CMS 2.0 - Theme engine, logging, admin improvements
Major changes: - New ThemeManager with Twig templating and SCSS compilation - Dynamic themes system (themes/default, themes/demo) - LogManager with SQLite storage and syslog forwarding - RequestLogger with static helper methods - Admin UI overhaul (Bootstrap 5, dark mode) - Admin config page with logging and theme settings - Admin logs page with filters and search - Removed legacy Mustache templates - Removed test plugin and theme - Composer dependencies: Twig, scssphp, CommonMark, MaxMind GeoIP
This commit is contained in:
+103
-39
@@ -58,8 +58,8 @@ codepress/
|
||||
│ ├── core/
|
||||
│ │ ├── class/
|
||||
│ │ │ ├── CodePressCMS.php # Hoofd CMS class (content, navigatie, search)
|
||||
│ │ │ ├── ThemeManager.php # Thema-resolver + Twig render + SCSS compile
|
||||
│ │ │ ├── Logger.php # Gestructureerd logging systeem
|
||||
│ │ │ ├── SimpleTemplate.php # Mustache-style template engine
|
||||
│ │ │ ├── Analytics.php # Bezoekersstatistieken
|
||||
│ │ │ ├── BotGuard.php # Bot/AI/scraper detectie
|
||||
│ │ │ ├── GeoIP.php # Landbepaling op basis van IP
|
||||
@@ -73,13 +73,21 @@ codepress/
|
||||
│ ├── lang/ # Taalbestanden
|
||||
│ │ ├── nl.php # Nederlandse vertalingen
|
||||
│ │ └── en.php # Engelse vertalingen
|
||||
│ ├── templates/ # Mustache templates
|
||||
│ │ ├── layout.mustache # Hoofd layout (CSS, structuur)
|
||||
│ │ ├── assets/ # Header, navigation, footer partials
|
||||
│ │ ├── markdown_content.mustache
|
||||
│ │ ├── php_content.mustache
|
||||
│ │ └── html_content.mustache
|
||||
│ └── router.php # PHP dev server router
|
||||
│ └── router.php # PHP dev server router (serveert ook /themes/)
|
||||
├── themes/ # Dynamische thema's (volledig zelfstandig)
|
||||
│ ├── default/ # Standaard thema
|
||||
│ │ ├── theme.json # { title, config.default_template, template→.twig mapping }
|
||||
│ │ ├── base.twig # Hoofd layout (head, header, nav, footer)
|
||||
│ │ ├── full_content.twig # Layout: volledige breedte
|
||||
│ │ ├── left_sidebar.twig # Layout: sidebar links
|
||||
│ │ ├── right_sidebar.twig # Layout: sidebar rechts
|
||||
│ │ ├── custom1.twig # Layout: custom
|
||||
│ │ ├── partials/ # header.twig, navigation.twig, footer.twig
|
||||
│ │ ├── css/theme.scss # Kleuren, hoogtes, achtergrond (runtime gecompileerd)
|
||||
│ │ ├── js/theme.js # Thema JavaScript
|
||||
│ │ └── theme.png # Voorbeeldafbeelding
|
||||
│ ├── demo/ # Demo thema (zelfde structuur, andere look)
|
||||
│ └── test/ # Test thema
|
||||
├── admin/ # Admin paneel
|
||||
│ ├── config/
|
||||
│ │ ├── app.php # Admin app configuratie (paden, timezone)
|
||||
@@ -124,12 +132,19 @@ codepress/
|
||||
│ ├── assets/ # CSS, JS, favicons
|
||||
│ │ ├── codemirror/ # CodeMirror editor (minified JS/CSS)
|
||||
│ │ └── css/js/ # Bootstrap, icons, app CSS/JS
|
||||
│ ├── themes/ # Geuploade theme achtergronden
|
||||
│ ├── themes/ # Runtime gecompileerde thema CSS (public/themes)
|
||||
│ └── manifest.json / sw.js # PWA ondersteuning
|
||||
├── themes/ # Thema definities
|
||||
├── themes/ # Dynamische thema's (volledig zelfstandig)
|
||||
│ ├── default/ # Standaard thema
|
||||
│ │ └── theme.json # Kleuren, hoogtes, achtergrond
|
||||
│ └── ... # Andere thema's
|
||||
│ │ ├── theme.json # Titel, default template, template mapping
|
||||
│ │ ├── base.twig # Hoofd layout
|
||||
│ │ ├── *.twig # Layout-sjablonen (full_content, left_sidebar, ...)
|
||||
│ │ ├── partials/ # header, navigation, footer
|
||||
│ │ ├── css/theme.scss # Kleuren, hoogtes, achtergrond
|
||||
│ │ ├── js/theme.js # Thema JavaScript
|
||||
│ │ └── theme.png # Voorbeeldafbeelding
|
||||
│ ├── demo/ # Demo thema
|
||||
│ └── test/ # Test thema
|
||||
├── config.json # Site configuratie
|
||||
├── version.php # Versie informatie
|
||||
└── vendor/ # Composer dependencies
|
||||
@@ -302,7 +317,6 @@ Dit is handig voor je eigen IP-adres of dat van interne monitoring tools.
|
||||
{
|
||||
"site_title": "CodePress",
|
||||
"content_dir": "content",
|
||||
"templates_dir": "cms\/templates",
|
||||
"default_page": "index",
|
||||
"active_theme": "default",
|
||||
"language": {
|
||||
@@ -337,32 +351,64 @@ Dit is handig voor je eigen IP-adres of dat van interne monitoring tools.
|
||||
|
||||
### Thema's
|
||||
|
||||
Thema's worden beheerd via het admin paneel op `/admin/theme`. Je kunt thema's aanmaken, activeren, kleuren aanpassen, achtergrondafbeeldingen uploaden en verwijderen.
|
||||
Thema's worden beheerd via het admin paneel op `/admin/theme`. Dit is een selectiepagina: kies het actieve thema en klik "Thema activeren". Elk thema is een volledig zelfstandige map in `themes/` met eigen Twig-sjablonen, SCSS en JavaScript.
|
||||
|
||||
#### Thema-structuur (`themes/<naam>/`)
|
||||
|
||||
```
|
||||
themes/<naam>/
|
||||
├── theme.json # Titel, default template, template mapping
|
||||
├── base.twig # Hoofd layout (head, header, nav, footer)
|
||||
├── full_content.twig # Layout: volledige breedte
|
||||
├── left_sidebar.twig # Layout: sidebar links
|
||||
├── right_sidebar.twig # Layout: sidebar rechts
|
||||
├── custom1.twig # Layout: custom
|
||||
├── partials/ # header.twig, navigation.twig, footer.twig
|
||||
├── css/theme.scss # Kleuren, hoogtes, achtergrond (runtime gecompileerd)
|
||||
├── js/theme.js # Thema JavaScript
|
||||
└── theme.png # Voorbeeldafbeelding (tonen in admin)
|
||||
```
|
||||
|
||||
#### Thema Configuratie (`themes/<naam>/theme.json`)
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Standaard",
|
||||
"header_color": "#0a369d",
|
||||
"header_font_color": "#ffffff",
|
||||
"header_height": "56",
|
||||
"navigation_color": "#2754b4",
|
||||
"navigation_font_color": "#ffffff",
|
||||
"nav_height": "42",
|
||||
"sidebar_background": "#f8f9fa",
|
||||
"sidebar_border": "#dee2e6",
|
||||
"background_image": "",
|
||||
"background_image_opacity": "100"
|
||||
"title": "default",
|
||||
"config": {
|
||||
"default_template": "full_content"
|
||||
},
|
||||
"template": {
|
||||
"full_content": "full_content.twig",
|
||||
"left_sidebar": "left_sidebar.twig",
|
||||
"right_sidebar": "right_sidebar.twig",
|
||||
"custom1": "custom1.twig"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **`config.default_template`**: de standaard sjabloon die gebruikt wordt wanneer een pagina een onbekende layout vraagt.
|
||||
- **`template`**: de layout-sleutel → `.twig`-bestand koppeling. Zo kan een thema meerdere template-pagina's hebben.
|
||||
|
||||
Kleuren, hoogtes en achtergrond worden **niet** in `theme.json` gezet, maar in `css/theme.scss`:
|
||||
|
||||
```scss
|
||||
$header-bg: #0a369d;
|
||||
$header-font: #ffffff;
|
||||
$header-height: 56px;
|
||||
$nav-bg: #2754b4;
|
||||
$nav-font: #ffffff;
|
||||
$nav-height: 42px;
|
||||
$sidebar-bg: #f8f9fa;
|
||||
$sidebar-border: #dee2e6;
|
||||
$header-bg-image: none; // optionele header-achtergrond
|
||||
$header-bg-opacity: 1;
|
||||
```
|
||||
|
||||
De SCSS wordt runtime gecompileerd naar `public/themes/<naam>/theme.css`.
|
||||
|
||||
#### Een nieuw thema maken
|
||||
|
||||
1. Ga naar `/admin/theme`
|
||||
2. Voer een naam in en klik "Aanmaken"
|
||||
3. Pas kleuren, hoogtes en achtergrond aan
|
||||
4. Activeer het thema
|
||||
Thema's zijn handmatig aan te maken: kopieer de `themes/default/` map naar `themes/<naam>/`, pas de SCSS-kleuren en sjablonen aan, en voeg een `theme.png` preview toe. Daarna is het thema beschikbaar op `/admin/theme` om te activeren.
|
||||
|
||||
### Beveiliging
|
||||
|
||||
@@ -419,10 +465,23 @@ Landbepaling kan via drie bronnen:
|
||||
|
||||
### Logging
|
||||
|
||||
De admin console houdt twee logs bij, te bekijken via `/admin/logs`:
|
||||
De admin console houdt logs bij, te bekijken via `/admin/logs`:
|
||||
|
||||
- **Activiteiten log** (`admin/storage/logs/admin.log`) — admin acties zoals pagina's aanmaken, bewerken, verwijderen, plugin in/uitschakelen, configuratie wijzigen.
|
||||
- **Requests log** (`admin/storage/logs/requests.log`) — elke pageview op de website, met IP, pagina, domein, taal, user-agent en referrer.
|
||||
- **Dynamisch log** — gestructureerde logregels via `LogManager`, met gebeurtenistype, niveau, IP en bericht.
|
||||
|
||||
#### Dynamische logging configureren
|
||||
|
||||
Via `/admin/config` → **Logging** kun je instellen hoe en wat er geregistreerd wordt:
|
||||
|
||||
- **Opslag**: `SQLite` (standaard) of `Syslog`.
|
||||
- **Syslog server**: als er een host is opgegeven, worden logregels via UDP naar die server gestuurd. Laat leeg om SQLite te gebruiken.
|
||||
- **Facility**: de categorie van de logbron in syslog. `local0`–`local7` zijn bedoeld voor eigen applicaties; `daemon`, `user` en `auth` zijn standaard systeemcategorieën.
|
||||
- **Syslog ident**: de naam die in het logbericht verschijnt (bijv. `codepress`).
|
||||
- **Gebeurtenissen**: kies welke types geregistreerd worden — `admin`, `requests`, `errors`, `security`, `content`, `system`.
|
||||
|
||||
Als er geen syslog-server is opgegeven, wordt altijd SQLite gebruikt (met een bestands-fallback als SQLite niet beschikbaar is).
|
||||
|
||||
Het dashboard toont de laatste 20 entries van elk log. Klik "Bekijk alle →" voor de volledige lijst, waar je ook kunt downloaden of wissen.
|
||||
|
||||
@@ -524,6 +583,8 @@ Deze handleiding is ook ingebouwd in het admin paneel via `/admin/guide`, met on
|
||||
|
||||
### Templates
|
||||
|
||||
Sjablonen zijn Twig-bestanden die per thema in `themes/<naam>/` staan. `ThemeManager` rendert ze en compileert `css/theme.scss` runtime naar `public/themes/<naam>/theme.css`.
|
||||
|
||||
#### Template Variabelen
|
||||
|
||||
**Site Info** - `site_title`, `author_name`, `author_website`, `author_git`
|
||||
@@ -532,36 +593,39 @@ Deze handleiding is ook ingebouwd in het admin paneel via `/admin/guide`, met on
|
||||
|
||||
**Navigation** - `menu`, `breadcrumb`, `homepage`
|
||||
|
||||
**Theme (uit theme.json)** - `header_color`, `header_font_color`, `header_height`, `navigation_color`, `navigation_font_color`, `nav_height`, `sidebar_background`, `sidebar_border`, `background_image_css`, `background_image_opacity`
|
||||
**Theme** - `theme_title`, `theme_css_url`, `theme_js_url`, `theme_config` (config uit theme.json)
|
||||
|
||||
**Language** - `current_lang`, `current_lang_upper`, `t_*` (vertaalde strings)
|
||||
|
||||
#### Layout Opties
|
||||
|
||||
Gebruik YAML frontmatter om layout te selecteren:
|
||||
Gebruik YAML frontmatter om de sjabloon te selecteren. De layout-sleutel verwijst naar een template in het actieve thema:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Mijn Pagina
|
||||
layout: sidebar-content
|
||||
layout: left_sidebar
|
||||
plugins: HTMLBlock
|
||||
---
|
||||
```
|
||||
|
||||
#### Beschikbare Layouts
|
||||
|
||||
- `sidebar-content` - Sidebar links, content rechts (standaard)
|
||||
- `content` - Alleen content (volle breedte)
|
||||
- `sidebar` - Alleen sidebar
|
||||
- `content-sidebar` - Content links, sidebar rechts
|
||||
- `content-sidebar-reverse` - Content rechts, sidebar links
|
||||
De beschikbare layouts worden bepaald door de `template`-sectie van het actieve thema (`themes/<naam>/theme.json`). Het standaard thema bevat:
|
||||
|
||||
- `full_content` - Alleen content (volle breedte)
|
||||
- `left_sidebar` - Sidebar links, content rechts
|
||||
- `right_sidebar` - Content links, sidebar rechts
|
||||
- `custom1` - Custom layout
|
||||
|
||||
Vraag een pagina een onbekende layout aan, dan wordt de `default_template` uit `config` van het thema gebruikt.
|
||||
|
||||
#### Meta Data
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Pagina Titel
|
||||
layout: content-sidebar
|
||||
layout: left_sidebar
|
||||
description: Pagina beschrijving
|
||||
author: Auteur Naam
|
||||
date: 2025-11-26
|
||||
|
||||
Reference in New Issue
Block a user