Complete CodePress CMS refactoring

- 🏠 Refactored layout system with flexbox
- 🎨 Implemented tab-style navigation with dropdowns
- 📱 Added responsive design with mobile support
- 🔧 Enhanced template system with content type detection
- 📝 Added comprehensive documentation (guide.md, README.md)
- ⚙️ Improved security with proper file access control
- 🎨 Added meta tags for SEO and author attribution
- 📁 Fixed breadcrumb navigation and duplicate links
- 🗂️ Removed unused files and cleaned up project structure
- ⚙️ Added JSON configuration system with homepage detection
- 📱 Enhanced search functionality with snippet display
- 🔗 Implemented auto-linking between pages
- 📊 Added file metadata display in footer

Features:
- Multi-format content support (Markdown, PHP, HTML)
- Dynamic navigation with collapsible folders
- Full-text search across all content
- Responsive Bootstrap 5 design
- JSON-based configuration
- SEO-optimized meta tags
- Security-focused file management
- Mobile-first responsive design
- Auto-linking between pages
- File metadata tracking
- Breadcrumb navigation
- Custom CSS styling
- Progressive enhancement

Technical improvements:
- Replaced fixed positioning with flexbox layout
- Implemented proper template inheritance
- Added content type detection
- Enhanced security with .htaccess
- Optimized for performance
- Added proper error handling
- Implemented caching mechanisms
- Enhanced accessibility features
This commit is contained in:
2025-11-21 16:58:37 +01:00
parent a86809c243
commit dfe2df141b
28 changed files with 837 additions and 1800 deletions

View File

@@ -1,171 +1,227 @@
# CodePress CMS Handleiding
## Welkom bij CodePress CMS
## Overzicht
CodePress is een lichtgewicht, op bestanden gebaseerd Content Management Systeem gebouwd met PHP en Bootstrap.
CodePress CMS is een lichtgewicht, file-based content management systeem gebouwd met PHP. Het is ontworpen om eenvoudig te gebruiken, flexibel te zijn en zonder database te werken.
### Inhoudsopgave
## Functies
1. [Getting Started](#getting-started)
2. [Content Management](#content-management)
3. [Templates](#templates)
4. [Configuration](#configuration)
### 🏠 **Navigatie**
- **Tab-style navigatie** met Bootstrap styling
- **Dropdown menus** voor mappen en sub-mappen
- **Home knop** met icoon die linkt naar de ingestelde homepage
- **Automatische menu generatie** op basis van content structuur
- **Responsive design** voor mobiele apparaten
---
### 📄 **Content Types**
- **Markdown (.md)** - Met auto-linking tussen pagina's
- **PHP (.php)** - Voor dynamische content en functionaliteit
- **HTML (.html)** - Voor statische HTML pagina's
- **Automatische template selectie** op basis van bestandstype
## Getting Started
### 🔍 **Zoekfunctionaliteit**
- **Volledige tekst zoek** door alle content bestanden
- **Resultaten met snippets** en highlighting
- **Directe navigatie** naar gevonden pagina's
- **SEO-vriendelijke** zoekresultaten
### Vereisten
- PHP 8.4+
- Webserver (Apache/Nginx)
- Modern web browser
### 🧭 **Configuratie**
- **JSON configuratie** in project root (`config.json`)
- **Dynamische homepage** instelling of automatische detectie
- **SEO instellingen** (description, keywords)
- **Author informatie** met links naar website en Git
- **Thema configuratie** mogelijkheden
### Installatie
1. Clone of download de CodePress bestanden
2. Upload naar je webserver
3. Zorg dat de `content/` map schrijfbaar is
4. Navigeer naar je website in de browser
### 🎨 **Layout & Design**
- **Flexbox layout** voor moderne, responsive structuur
- **Fixed header** met logo en zoekfunctie
- **Breadcrumb navigatie** tussen header en content
- **Fixed footer** met file info en links
- **Bootstrap 5** styling en componenten
- **Custom CSS** voor specifieke styling
### Basis Configuratie
De belangrijkste instellingen vind je in `engine/core/config.php`:
### 📱 **Responsive Features**
- **Mobile-first** aanpak
- **Hamburger menu** voor kleine schermen
- **Touch-friendly** dropdowns en navigatie
- **Adaptieve breedtes** voor verschillende schermgroottes
```php
$config = [
'site_title' => 'Mijn Website',
'default_page' => 'home',
'content_dir' => __DIR__ . '/../../content',
'templates_dir' => __DIR__ . '/../templates'
];
## Installatie
1. **Upload bestanden** naar webserver
2. **Stel permissies in** voor webserver
3. **Configureer** `config.json` indien nodig
4. **Toegang** tot website via browser
## Configuratie
### Basis Configuratie (`config.json`)
```json
{
"site_title": "CodePress",
"content_dir": "content",
"templates_dir": "engine/templates",
"default_page": "auto",
"homepage": "welkom",
"author": {
"name": "Edwin Noorlander",
"website": "https://noorlander.info",
"git": "https://git.noorlander.info/E.Noorlander/CodePress.git"
},
"seo": {
"description": "CodePress CMS - Lightweight file-based content management system",
"keywords": "cms, php, content management, file-based"
}
}
```
---
### Configuratie Opties
## Content Management
- **`site_title`** - Naam van de website
- **`content_dir`** - Map met content bestanden
- **`templates_dir`** - Map met template bestanden
- **`default_page`** - Standaard pagina (`"auto"` voor automatische detectie)
- **`homepage`** - Specifieke homepage (`"auto"` voor automatische detectie)
- **`author`** - Auteur informatie met links
- **`seo`** - SEO instellingen
## Content Structuur
### Bestandsstructuur
```
content/
├── home.md # Home pagina
├── blog/
│ ├── index.md # Blog overzicht
├── artikel-1.md # Blog artikel
│ └── categorie/
│ └── artikel.md # Artikel in categorie
└── over-ons/
└── info.md # Over ons pagina
├── map1/
│ ├── submap1/
│ ├── pagina1.md
│ └── pagina2.php
│ └── pagina3.html
├── map2/
│ └── pagina4.md
├── homepage.md
└── index.html
```
### Content Types
CodePress ondersteunt drie content types:
### Bestandsnamen
#### Markdown (`.md`)
```markdown
# Pagina Titel
Dit is de inhoud van de pagina in **Markdown** formaat.
## Subsectie
- Lijst item 1
- Lijst item 2
```
#### PHP (`.php`)
```php
<?php
$title = "Dynamische Pagina";
?>
<h1><?php echo $title; ?></h1>
<p>Dit is dynamische content met PHP.</p>
```
#### HTML (`.html`)
```html
<h1>HTML Pagina</h1>
<p>Dit is statische HTML content.</p>
```
### Automatische Linking
CodePress maakt automatisch links naar andere pagina's wanneer je paginanamen in je content noemt.
---
- **Gebruik lowercase** bestandsnamen
- **Geen spaties** - gebruik `-` of `_` als scheidingsteken
- **Logische extensies** - `.md`, `.php`, `.html`
- **Unieke namen** - geen duplicaten binnen dezelfde map
## Templates
### Template Structuur
CodePress gebruikt Mustache-compatible templates:
- `layout.mustache` - Hoofdtemplate
- `assets/header.mustache` - Header component
- `assets/sidebar.mustache` - Sidebar navigatie
- `assets/footer.mustache` - Footer component
### Template Variabelen
Beschikbare variabelen in templates:
- `{{site_title}}` - Website titel
- `{{page_title}}` - Huidige pagina titel
- `{{content}}` - Pagina inhoud
- `{{menu}}` - Navigatie menu
- `{{breadcrumb}}` - Broodkruimel navigatie
---
## Configuration
### Basis Instellingen
Pas `engine/core/config.php` aan voor jouw website:
```php
$config = [
'site_title' => 'Jouw Website Naam',
'default_page' => 'home', // Standaard startpagina
'content_dir' => __DIR__ . '/../../content',
'templates_dir' => __DIR__ . '/../templates'
];
```
engine/templates/
├── layout.mustache - Hoofd layout template
├── assets/
│ ├── header.mustache - Header template
│ ├── navigation.mustache - Navigatie template
│ └── footer.mustache - Footer template
├── markdown_content.mustache - Markdown content template
├── php_content.mustache - PHP content template
└── html_content.mustache - HTML content template
```
### SEO Vriendelijke URLs
CodePress genereert automatisch schone URLs:
- `home.md``/home`
- `blog/artikel.md``/blog/artikel`
### Template Variabelen
### Zoekfunctionaliteit
De ingebouwde zoekfunctie doorzoekt:
- Bestandsnamen
- Content van Markdown/PHP/HTML bestanden
- **`{{site_title}}`** - Website titel
- **`{{page_title}}`** - Pagina titel
- **`{{content}}`** - Content (HTML)
- **`{{menu}}`** - Navigatie menu
- **`{{breadcrumb}}`** - Breadcrumb navigatie
- **`{{search_query}}`** - Zoekopdracht
- **`{{homepage}}`** - Homepage link
- **`{{author_*}}`** - Auteur informatie
- **`{{seo_*}}`** - SEO informatie
---
## SEO Optimalisatie
## Tips en Tricks
### Meta Tags
### Pagina Organisatie
- Gebruik submappen voor categoriën
- Geef elke map een `index.md` voor een overzichtspagina
- Houd bestandsnamen kort en beschrijvend
De CMS voegt automatisch de volgende meta tags toe:
### Content Optimalisatie
- Gebruik duidelijke koppen (H1, H2, H3)
- Voeg beschrijvende meta-informatie toe
- Gebruik interne links voor betere navigatie
```html
<meta name="generator" content="CodePress CMS">
<meta name="application-name" content="CodePress">
<meta name="author" content="Edwin Noorlander">
<meta name="description" content="...">
<meta name="keywords" content="...">
<link rel="author" href="https://noorlander.info">
<link rel="me" href="https://git.noorlander.info/E.Noorlander/CodePress.git">
```
### Veiligheid
- Houd je CodePress installatie bijgewerkt
- Beperk schrijfrechten op de `content/` map
- Gebruik HTTPS indien mogelijk
### Auto-linking
---
De CMS linkt automatisch pagina titels naar hun content:
- **Automatische detectie** van pagina titels in tekst
- **Slimme links** met `title` attributen
- **Geen dubbele links** voor dezelfde pagina
- **SEO-vriendelijke** URL structuur
## Veelgestelde Vragen
### Hoe stel ik de homepage in?
1. **Automatisch**: Laat de CMS het eerste bestand kiezen
2. **Handmatig**: Stel `"homepage": "pagina-naam"` in `config.json`
3. **Flexibel**: Werkt met elk bestandstype (md, php, html)
### Hoe werkt de navigatie?
- **Mappen** worden dropdown menus
- **Bestanden** worden directe links
- **Sub-mappen** worden geneste dropdowns
- **Home knop** linkt altijd naar de homepage
### Hoe voeg ik nieuwe content toe?
1. **Upload** bestanden naar de `content/` map
2. **Organiseer** in logische mappen
3. **Gebruik** juiste bestandsnamen en extensies
4. **Herlaad** de pagina om de navigatie te vernieuwen
### Kan ik custom CSS gebruiken?
Ja! Voeg custom CSS toe aan:
- **`/public/assets/css/style.css`** - Voor algemene styling
- **Template bestanden** - Voor specifieke componenten
- **Inline styles** - In content bestanden indien nodig
## Troubleshooting
### Pagina niet gevonden (404)
1. **Controleer** bestandsnaam en pad
2. **Controleer** bestandsextensie (.md, .php, .html)
3. **Controleer** permissies van bestanden
4. **Controleer** `config.json` syntax
### Template niet geladen
1. **Controleer** template bestandsnamen
2. **Controleer** template map permissies
3. **Controleer** PHP error logs
4. **Controleer** `templates_dir` configuratie
### Navigatie niet bijgewerkt
1. **Herlaad** de pagina
2. **Controleer** content map structuur
3. **Controleer** bestandsnamen (geen spaties)
4. **Controleer** PHP cache indien aanwezig
## Ondersteuning
### Problemen Oplossen
- **Lege pagina's**: Controleer bestandsrechten
- **Template fouten**: Verifieer template syntax
- **404 fouten**: Controleer bestandsnamen en paden
Voor technische ondersteuning:
- **GitHub**: https://git.noorlander.info/E.Noorlander/CodePress.git
- **Website**: https://noorlander.info
- **Issues**: Rapporteer problemen via GitHub issues
### Meer Informatie
- Documentatie: [CodePress GitHub](https://git.noorlander.info/E.Noorlander/CodePress.git)
- Issues en feature requests: GitHub Issues
## Licentie
---
*Deze handleiding is onderdeel van CodePress CMS en wordt automatisch getoond wanneer er geen content beschikbaar is.*
CodePress CMS is open-source software. Controleer de licentie in de repository voor meer informatie.