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:
2026-08-08 18:02:14 +02:00
parent d453b8073f
commit 6333bc410f
833 changed files with 108974 additions and 1386 deletions
+103 -39
View File
@@ -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