v2.6.2 (Lyra): Thema editor, content editor, unified scanEditorFiles

- Thema editor (thema's net zo bewerkbaar maken als plugins):
  bestandsbrowser zijbalk, nieuw bestand, uploaden, verwijderen,
  verplaatsen, SCSS compileren vanuit editor, thema activeren/
  verwijderen, nieuw thema met basis-kopie, uniforme thema-structuur
- Content editor (content consistent met plugins en thema's):
  bestandsbrowser zijbalk naast bestaande lijst weergave, nieuw
  bestand/map, uploaden, verwijderen, verplaatsen, mappen beheer,
  layout/plugins selectie, git/backup integratie in editor zijbalk
- Uniformiteit: scanEditorFiles() unified scanner
  (scanPluginFiles/scanThemeFiles/scanContentFiles als dunne wrappers)
- Media invoegen in editor: ?theme= scope voor media-list endpoint
- Bug fix: thema-naam niet overgenomen bij kopiëren - title in
  theme.json wordt overschreven met nieuwe themanaam
- Handleidingen bijgewerkt (thema-beheer.md + content-beheer.md NL/EN)
- Release notes: docs/release-notes/v2.6.2.md
- Pentest 30/30, WCAG 25/25
This commit is contained in:
2026-08-19 10:44:32 +00:00
parent 6d5ca7cab4
commit d91a5acf9b
21 changed files with 3253 additions and 176 deletions
+78 -14
View File
@@ -1,6 +1,82 @@
# Content management
## Managing files
CodePress offers two views for content management:
1. **List view** (`/admin/content`) — classic table with filter, upload, new folder/file per folder
2. **Content editor** (`/admin/content-files`) — file browser sidebar + CodeMirror editor (uniform with plugin/theme editors)
Both work side-by-side and use the same content directory. The content editor offers the same functionality as the list view, but with a nested file-tree sidebar like the plugin and theme editors — for a consistent editor experience.
## Content editor (content-files)
### File browser sidebar
- Shows the nested file tree of `content/`
- Hidden directories (`.bak`, `.git`) and dotfiles are skipped
- Click a file to open it in the CodeMirror editor
- Folders containing the active file are auto-expanded
- Per folder there are action buttons: new file, new folder, rename, delete
### Editable file types
`.md` (Markdown), `.php` (PHP), `.html` (HTML) — consistent with the existing content-edit page.
### Create a new file
- Click **New file** (at the top or per folder in the sidebar)
- Enter a path within content (e.g. `en.page` or `blog/en.post`)
- Choose the file type (Markdown/PHP/HTML)
- Subfolders are created automatically
- Frontmatter with `layout`, `author_name`, `author_email`, `created` is auto-generated
### Upload a file
- Click **Upload** to upload files to `content/`
- Allowed: images, video, audio, PDF, ZIP, office docs, CSS, SCSS, JS, JSON, HTML, MD
- Path-traversal protection: target dir must stay within `content/`
### Move / delete a file
- In the file tree each file has a move button (arrows icon) and a delete button (trash)
- **Move**: choose a target folder from the dropdown listing all folders in content
- **Delete**: with confirmation
### Folder management
- **New folder**: per folder in the sidebar or at the top
- **Rename folder**: pencil icon per folder
- **Delete folder**: trash icon per folder (only empty folders)
### Layout selection
On the editor page you can choose the layout from the layouts defined in `theme.json` (template mapping). The selected layout is stored in the frontmatter `layout:` key.
### Plugins on pages
- Content plugins (from `plugin.json` with `type: "content"`) appear in the plugin selection
- Choose which plugins run on the page
- The plugin selection is stored in the frontmatter `plugins:` key
### Git / Backup integration (Phase 5)
At the top of the content editor there are backup and git actions:
- **Git init**: initializes a git repository in `content/` (if none exists yet)
- **Commit**: commits all uncommitted changes (only if there is a git repo and there are changes)
- **Backup**: link to the backup page (`/admin/content-backup`) for ZIP backup/restore
- The git status badge shows the current branch, whether there are uncommitted changes, and the last commit
### Frontmatter
The editor updates the frontmatter live when layout or plugin selection changes:
```markdown
---
layout: left_sidebar
author_name: Admin
author_email: admin@example.com
created: 2026-08-19 10:30:25
plugins: HTMLBlock, Navigation
---
# Page title
Content...
```
## List view (content)
### Managing files
- **New folder** — Create folder structure
- **New file** — Create a page (`.md`, `.php`, `.html`)
@@ -10,24 +86,12 @@
- **Delete** — Remove content
- **Rename folder** — Change a folder name
## Editor (content-edit)
### Editor (content-edit)
- **CodeMirror** with syntax highlighting (Markdown, PHP, HTML)
- **Toolbar** for quickly inserting Markdown
- **Shortcuts**: Ctrl+S (save), Ctrl+N (new)
## Layout selection
On the content-edit page you can choose the layout from the layouts defined in `theme.json` (template mapping). The selected layout is stored in the frontmatter `layout:` key.
## Plugins on pages
- Content plugins (from `plugin.json` with `type: "content"`) appear in the plugin selection
- Choose which plugins appear in the sidebar
- **Order is adjustable** with up/down buttons
- The plugin order is stored in the frontmatter `plugins:` key
- Plugins are **hidden** when the chosen layout has no sidebar (e.g. `full_content`)
## Frontmatter
The editor updates the frontmatter live when layout or plugin selection changes:
+65 -6
View File
@@ -3,15 +3,72 @@
## Managing themes
1. Go to **Theme** in the admin menu
2. **Activate** — Choose the active theme (stored in `config.json`)
3. **Compile SCSS** — Process SCSS to CSS (forced)
4. **New theme** — Create a custom theme via admin or manually
2. **Edit** — Click the pencil icon to edit theme files (see [Theme editor](#theme-editor))
3. **Activate** — Click the checkmark to activate a theme (stored in `config.json`)
4. **Compile SCSS** — Click the palette icon to force-compile SCSS to `assets/css_compiled/theme.css`
5. **Delete** — Trash icon (only non-active, non-default themes)
6. **New theme** — Create a custom theme, optionally based on an existing theme
## Theme status badges
In the theme overview you see per theme:
- **Active** (green) — this theme is selected in `config.json`
- **SCSS ok** (green) — `assets/css_compiled/theme.css` is newer than `assets/scss/theme.scss`
- **SCSS stale** (yellow) — SCSS source was changed after the last compile; click the palette icon to compile
## Theme editor
Via **Edit** (pencil icon) in the theme overview you open the theme editor (`/admin/theme-edit?theme=<name>`). It works the same as the plugin editor:
### File browser sidebar
- Shows the nested file tree of the theme
- `assets/css_compiled/` is hidden (runtime artefact, read-only)
- Click a file to open it in the CodeMirror editor
- Folders containing the active file are auto-expanded
### Editable file types
`.twig`, `.json`, `.scss`, `.css`, `.js`, `.html`, `.md`, `.php`
### Create a new file
- Click **New file**
- Enter a path within the theme (e.g. `partials/header.twig` or `assets/scss/_variables.scss`)
- Subfolders are created automatically
- Allowed: twig, json, scss, css, js, html, md, php
- A stub is auto-generated (e.g. `{% extends 'base.twig' %}` for `.twig`)
### Upload a file
- Click **Upload** to upload files to the theme's `assets/`
- Allowed: images, video, audio, PDF, ZIP, CSS, SCSS, JS, JSON, HTML, MD, TWIG, fonts
- Path-traversal protection: target dir must stay within `assets/`
### Move / delete a file
- In the file tree each file has a move button (arrows icon) and a delete button (trash)
- **Move**: choose a target folder from the dropdown listing all folders in the theme
- **Delete**: with confirmation; `theme.json` cannot be deleted
### Compile SCSS from the editor
- At the top of the editor there is a **Compile SCSS** button (only if `assets/scss/theme.scss` exists)
- Shows the compile status: **up-to-date** (green) or **stale** (yellow)
- Forces compilation via `ThemeManager::compileCss(true)`
### Insert media in the editor
- The media button in the editor toolbar opens the media modal
- In theme context it scans `themes/<name>/assets/` (via `/admin/media-list?theme=<name>`)
- Snippet format depends on file type: markdown → `![alt](url)`, html/php → `<img src=...>`, others → raw URL
### Security
- All actions require a CSRF token
- Path-traversal protection via `realpath()` + prefix check on the theme dir
- `theme.json` can be edited but not deleted/moved
- Default theme can be edited but not deleted
- Active theme cannot be deleted (activate another theme first)
## Theme structure
```
themes/default/
├── theme.json # { title, config.default_template, template: layout→.twig }
├── README.md # Theme documentation (per theme)
├── base.twig # Main layout (head, header, nav, breadcrumb, footer)
├── full_content.twig # Layout: full width
├── left_sidebar.twig # Layout: sidebar on the left
@@ -21,13 +78,15 @@ themes/default/
├── partials/ # header.twig, navigation.twig, footer.twig
└── assets/
├── scss/theme.scss # SCSS source (only CSS source — manual css/theme.css must not exist)
├── css_compiled/ # Generated by scssphp (read-only, do not edit manually)
├── css_compiled/ # Generated by scssphp (read-only, do not edit manually, hidden in editor)
├── css/ # External CSS (bootstrap.min.css, bootstrap-icons.css, mobile.css)
├── js/ # app.js, bootstrap.bundle.min.js
├── fonts/ # bootstrap-icons.woff, woff2
└── img/ # favicon, icon, world-map
```
New themes created via admin automatically get this uniform structure (with `README.md`, `base.twig`, `full_content.twig`, `partials/header.twig`, `partials/footer.twig`, `assets/scss/theme.scss`, and all assets subfolders).
## theme.json
```json
@@ -53,9 +112,9 @@ themes/default/
## SCSS compilation
- `ThemeManager` compiles `assets/scss/theme.scss` at runtime to `assets/css_compiled/theme.css` via scssphp
- `css_compiled/` is **read-only** — do not edit manually
- `css_compiled/` is **read-only** — do not edit manually (hidden in the theme editor)
- `assets/css/theme.css` must **not** exist; otherwise `ThemeManager::getCssUrl()` ignores the SCSS
- After SCSS changes: remove `assets/css_compiled/theme.css` and `.mtime` to force recompilation
- Force compilation via the **Compile SCSS** button in admin (or remove `assets/css_compiled/theme.css` and `.mtime`)
## Layouts
+78 -14
View File
@@ -1,6 +1,82 @@
# Content beheer
## Bestanden beheren
CodePress biedt twee weergaven voor content-beheer:
1. **Lijst weergave** (`/admin/content`) — klassieke tabel met filter, upload, nieuwe map/bestand per map
2. **Content editor** (`/admin/content-files`) — bestandsbrowser zijbalk + CodeMirror editor (uniform met plugin/theme-editors)
Beide werken naast elkaarlijk en gebruiken dezelfde content-map. De content-editor biedt dezelfde functionaliteit als de lijst weergave, maar dan met een geneste bestandsboom zijbalk zoals de plugin- en thema-editors — voor consistente editor-ervaring.
## Content editor (content-files)
### Bestandsbrowser zijbalk
- Toont de geneste bestandsboom van `content/`
- Verborgen mappen (`.bak`, `.git`) en dotfiles worden overgeslagen
- Klik op een bestand om het te openen in de CodeMirror editor
- Mappen die het actieve bestand bevatten zijn automatisch uitgeklapt
- Per map staan actie-knoppen: nieuw bestand, nieuwe map, hernoemen, verwijderen
### Bewerkbare bestandstypen
`.md` (Markdown), `.php` (PHP), `.html` (HTML) — consistent met de bestaande content-edit pagina.
### Nieuw bestand aanmaken
- Klik op **Nieuw bestand** (bovenaan of per map in de zijbalk)
- Geef een pad op binnen content (bijv. `nl.pagina` of `blog/nl.post`)
- Kies het bestandstype (Markdown/PHP/HTML)
- Submappen worden automatisch aangemaakt
- Frontmatter met `layout`, `author_name`, `author_email`, `created` wordt automatisch gegenereerd
### Bestand uploaden
- Klik op **Upload** om bestanden naar `content/` te uploaden
- Toegestaan: afbeeldingen, video, audio, PDF, ZIP, office docs, CSS, SCSS, JS, JSON, HTML, MD
- Path-traversal bescherming: doelmap moet binnen `content/` blijven
### Bestand verplaatsen / verwijderen
- In de bestandsboom heeft elk bestand een verplaats-knop (pijlen-icoon) en een verwijder-knop (prullenbak)
- **Verplaatsen**: kies een doelmap uit de dropdown met alle mappen in content
- **Verwijderen**: met bevestiging
### Mappen beheer
- **Nieuwe map**: per map in de zijbalk of bovenaan
- **Map hernoemen**: potlood-icoon per map
- **Map verwijderen**: prullenbak-icoon per map (alleen lege mappen)
### Layout selectie
Op de editor-pagina kun je de layout kiezen uit de layouts gedefinieerd in `theme.json` (template mapping). De geselecteerde layout wordt opgeslagen in de frontmatter `layout:` key.
### Plugins op pagina's
- Content plugins (uit `plugin.json` met `type: "content"`) verschijnen in de plugin selectie
- Kies welke plugins op de pagina draaien
- De plugin selectie wordt opgeslagen in de frontmatter `plugins:` key
### Git / Backup integratie (Fase 5)
Bovenaan de content-editor staan backup- en git-acties:
- **Git init**: initialiseert een git repository in `content/` (als er nog geen is)
- **Commit**: committed alle niet-committed wijzigingen (alleen als er een git repo is en er wijzigingen zijn)
- **Backup**: link naar de backup-pagina (`/admin/content-backup`) voor ZIP backup/restore
- De git status badge toont de huidige branch, of er niet-committed wijzigingen zijn, en de laatste commit
### Frontmatter
De editor werkt de frontmatter live bij bij wijzigingen van layout of plugin selectie:
```markdown
---
layout: left_sidebar
author_name: Admin
author_email: admin@example.com
created: 2026-08-19 10:30:25
plugins: HTMLBlock, Navigation
---
# Pagina titel
Content...
```
## Lijst weergave (content)
### Bestanden beheren
- **Nieuwe map** — Mappen structuur aanmaken
- **Nieuw bestand** — Pagina aanmaken (`.md`, `.php`, `.html`)
@@ -10,24 +86,12 @@
- **Verwijderen** — Content verwijderen
- **Map hernoemen** — Map naam wijzigen
## Editor (content-edit)
### Editor (content-edit)
- **CodeMirror** met syntax highlighting (Markdown, PHP, HTML)
- **Toolbar** voor snel Markdown invoeren
- **Sneltoetsen**: Ctrl+S (opslaan), Ctrl+N (nieuw)
## Layout selectie
Op de content-edit pagina kun je de layout kiezen uit de layouts gedefinieerd in `theme.json` (template mapping). De geselecteerde layout wordt opgeslagen in de frontmatter `layout:` key.
## Plugins op pagina's
- Content plugins (uit `plugin.json` met `type: "content"`) verschijnen in de plugin selectie
- Kies welke plugins in de sidebar verschijnen
- **Volgorde aanpasbaar** met up/down knoppen
- De plugin volgorde wordt opgeslagen in de frontmatter `plugins:` key
- Plugins worden **verbergen** als de gekozen layout geen sidebar heeft (bijv. `full_content`)
## Frontmatter
De editor werkt de frontmatter live bij bij wijzigingen van layout of plugin selectie:
+65 -6
View File
@@ -3,15 +3,72 @@
## Thema's beheren
1. Ga naar **Thema** in admin menu
2. **Activeren** — Kies actief thema (wordt opgeslagen in `config.json`)
3. **SCSS compileren**Verwerk SCSS naar CSS (geforceerd)
4. **Nieuw thema** — Eigen thema aanmaken via admin of handmatig
2. **Bewerken** — Klik op het potlood-icoon om themabestanden te bewerken (zie [Thema editor](#thema-editor))
3. **Activeren**Klik op het vinkje om een thema te activeren (wordt opgeslagen in `config.json`)
4. **SCSS compileren** — Klik op het palet-icoon om SCSS geforceerd te compileren naar `assets/css_compiled/theme.css`
5. **Verwijderen** — Prullenbak-icoon (alleen niet-actieve, niet-default thema's)
6. **Nieuw thema** — Eigen thema aanmaken, optioneel gebaseerd op een bestaand thema
## Thema status badges
In het thema-overzicht zie je per thema:
- **Actief** (groen) — dit thema is geselecteerd in `config.json`
- **SCSS ok** (groen) — `assets/css_compiled/theme.css` is nieuwer dan `assets/scss/theme.scss`
- **SCSS verouderd** (geel) — SCSS source is gewijzigd na laatste compile; klik op het palet-icoon om te compileren
## Thema editor
Via **Bewerken** (potlood-icoon) in het thema-overzicht open je de thema-editor (`/admin/theme-edit?theme=<naam>`). Deze werkt hetzelfde als de plugin-editor:
### Bestandsbrowser zijbalk
- Toont de geneste bestandsboom van het thema
- `assets/css_compiled/` wordt verborgen (runtime artefact, read-only)
- Klik op een bestand om het te openen in de CodeMirror editor
- Mappen die het actieve bestand bevatten zijn automatisch uitgeklapt
### Bewerkbare bestandstypen
`.twig`, `.json`, `.scss`, `.css`, `.js`, `.html`, `.md`, `.php`
### Nieuw bestand aanmaken
- Klik op **Nieuw bestand**
- Geef een pad op binnen het thema (bijv. `partials/header.twig` of `assets/scss/_variables.scss`)
- Submappen worden automatisch aangemaakt
- Toegestaan: twig, json, scss, css, js, html, md, php
- Een stub wordt automatisch gegenereerd (bijv. `{% extends 'base.twig' %}` voor `.twig`)
### Bestand uploaden
- Klik op **Upload** om bestanden naar `assets/` van het thema te uploaden
- Toegestaan: afbeeldingen, video, audio, PDF, ZIP, CSS, SCSS, JS, JSON, HTML, MD, TWIG, fonts
- Path-traversal bescherming: doelmap moet binnen `assets/` blijven
### Bestand verplaatsen / verwijderen
- In de bestandsboom heeft elk bestand een verplaats-knop (pijlen-icoon) en een verwijder-knop (prullenbak)
- **Verplaatsen**: kies een doelmap uit de dropdown met alle mappen in het thema
- **Verwijderen**: met bevestiging; `theme.json` kan niet verwijderd worden
### SCSS compileren vanuit de editor
- Bovenaan de editor staat een **SCSS compileren** knop (alleen als `assets/scss/theme.scss` bestaat)
- Toont de compile-status: **up-to-date** (groen) of **verouderd** (geel)
- Forceert compilatie via `ThemeManager::compileCss(true)`
### Media invoegen in editor
- De media-knop in de editor-toolbar opent de media-modal
- In thema-context scant deze `themes/<naam>/assets/` (via `/admin/media-list?theme=<naam>`)
- Snippet-formaat depends op bestandstype: markdown → `![alt](url)`, html/php → `<img src=...>`, andere → ruwe URL
### Beveiliging
- Alle acties vereisen CSRF token
- Path-traversal bescherming via `realpath()` + prefix-check op de thema-map
- `theme.json` kan bewerkt maar niet verwijderd/verplaatst worden
- Default thema kan bewerkt maar niet verwijderd worden
- Actief thema kan niet verwijderd worden (activeer eerst een ander thema)
## Thema structuur
```
themes/default/
├── theme.json # { title, config.default_template, template: layout→.twig }
├── README.md # Thema documentatie (per thema)
├── base.twig # Hoofd layout (head, header, nav, breadcrumb, footer)
├── full_content.twig # Layout: volledige breedte
├── left_sidebar.twig # Layout: sidebar links
@@ -21,13 +78,15 @@ themes/default/
├── partials/ # header.twig, navigation.twig, footer.twig
└── assets/
├── scss/theme.scss # SCSS bron (enige CSS bron — handmatige css/theme.css mag niet bestaan)
├── css_compiled/ # Gegenereerd door scssphp (read-only, niet handmatig aanpassen)
├── css_compiled/ # Gegenereerd door scssphp (read-only, niet handmatig aanpassen, verborgen in editor)
├── css/ # Externe CSS (bootstrap.min.css, bootstrap-icons.css, mobile.css)
├── js/ # app.js, bootstrap.bundle.min.js
├── fonts/ # bootstrap-icons.woff, woff2
└── img/ # favicon, icon, world-map
```
Nieuwe thema's die via de admin worden aangemaakt krijgen automatisch deze uniforme structuur (met `README.md`, `base.twig`, `full_content.twig`, `partials/header.twig`, `partials/footer.twig`, `assets/scss/theme.scss`, en alle assets-submappen).
## theme.json
```json
@@ -53,9 +112,9 @@ themes/default/
## SCSS compilatie
- `ThemeManager` compileert `assets/scss/theme.scss` runtime naar `assets/css_compiled/theme.css` via scssphp
- `css_compiled/` is **read-only** — niet handmatig aanpassen
- `css_compiled/` is **read-only** — niet handmatig aanpassen (wordt verborgen in de thema-editor)
- `assets/css/theme.css` mag **niet** bestaan; anders negeert `ThemeManager::getCssUrl()` de SCSS
- Na SCSS wijzigingen: verwijder `assets/css_compiled/theme.css` en `.mtime` om te forceren
- Forceer compilatie via de **SCSS compileren** knop in admin (of verwijder `assets/css_compiled/theme.css` en `.mtime`)
## Layouts