# CodePress CMS Handleiding

## Overzicht

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.

## Functies

### 🏠 **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
- **Breadcrumb navigatie** met home icoon en pad weergave
- **Active state marking** voor huidige pagina in menu

### 📄 **Content Types**
- **Markdown (.md)** - Met CommonMark ondersteuning en extensies (autolink, strikethrough, tables, task lists)
- **PHP (.php)** - Voor dynamische content en functionaliteit
- **HTML (.html)** - Voor statische HTML pagina's
- **Directory listings** - Automatische generatie van directory overzichten
- **Language-specific content** - `nl.` en `en.` prefix voor meertalige content
- **Automatische template selectie** op basis van bestandstype

### 🔍 **Zoekfunctionaliteit**
- **Volledige tekst zoek** door alle content bestanden
- **Resultaten met snippets** en highlighting
- **Directe navigatie** naar gevonden pagina's
- **SEO-vriendelijke** zoekresultaten
- **Search URL**: `?search=zoekterm` voor bookmarkable searches

### 🧭 **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** met kleur instellingen
- **Language settings** voor meertalige content
- **Feature toggles** voor search, breadcrumbs, auto-linking

### 🎨 **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
- **Mustache templates** met conditionals en partials
- **Semantic HTML5** structuur voor SEO

### 📱 **Responsive Features**
- **Mobile-first** aanpak
- **Hamburger menu** voor kleine schermen
- **Touch-friendly** dropdowns en navigatie
- **Adaptieve breedtes** voor verschillende schermgroottes

### 🌍 **Language Support**
- **Browser language detection** op basis van Accept-Language header
- **URL language switching**: `?lang=nl` of `?lang=en`
- **Translation files**: `lang/nl.php` en `lang/en.php`
- **Language prefixes**: `nl.bestand.md` en `en.bestand.md`
- **Automatic language routing** voor meertalige content

## 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",
    "language": {
        "default": "nl",
        "available": ["nl", "en"]
    },
    "theme": {
        "header_color": "#0a369d",
        "header_font_color": "#ffffff",
        "navigation_color": "#2754b4",
        "navigation_font_color": "#ffffff"
    },
    "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"
    },
    "features": {
        "auto_link_pages": true,
        "search_enabled": true,
        "breadcrumbs_enabled": true
    }
}
```

### Configuratie Opties

- **`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)
- **`language.default`** - Standaard taal
- **`language.available`** - Beschikbare talen
- **`theme.*`** - Kleur instellingen voor header en navigatie
- **`author`** - Auteur informatie met links
- **`seo`** - SEO instellingen
- **`features.*`** - Feature toggles (search, breadcrumbs, auto-linking)

## Content Structuur

### Bestandsstructuur

```
content/
├── map1/
│   ├── submap1/
│   │   ├── pagina1.md
│   │   └── pagina2.php
│   └── pagina3.html
├── map2/
│   └── pagina4.md
├── homepage.md
└── index.html
```

### Bestandsnamen

- **Gebruik lowercase** bestandsnamen
- **Geen spaties** - gebruik `-` of `_` als scheidingsteken
- **Logische extensies** - `.md`, `.php`, `.html`
- **Unieke namen** - geen duplicaten binnen dezelfde map
- **Language prefixes** - `nl.bestand.md` en `en.bestand.md` voor meertalige content
- **Display names** - `bestands-naam` wordt automatisch "Bestands Naam" in menu's
- **Special cases** - `phpinfo` → "phpinfo", `ict` → "ICT"

## Templates

### Template Structuur

```
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
```

### Template Variabelen

#### **Site Info**
- **`{{site_title}}`** - Website titel
- **`{{author_name}}`** - Auteur naam
- **`{{author_website}}`** - Auteur website
- **`{{author_git}}`** - Git repository link

#### **Page Info**
- **`{{page_title}}`** - Pagina titel (bestandsnaam zonder extensie)
- **`{{content}}`** - Content (HTML)
- **`{{file_info}}`** - Bestandsinformatie (datum, grootte)
- **`{{is_homepage}}`** - Boolean: is dit de homepage?

#### **Navigation**
- **`{{menu}}`** - Navigatie menu
- **`{{breadcrumb}}`** - Breadcrumb navigatie
- **`{{homepage}}`** - Homepage link
- **`{{homepage_title}}`** - Homepage titel

#### **Theme**
- **`{{header_color}}`** - Header achtergrondkleur
- **`{{header_font_color}}`** - Header tekstkleur
- **`{{navigation_color}}`** - Navigatie achtergrondkleur
- **`{{navigation_font_color}}`** - Navigatie tekstkleur

#### **Language**
- **`{{current_lang}}`** - Huidige taal (nl/en)
- **`{{current_lang_upper}}`** - Huidige taal (NL/EN)
- **`{{available_langs}}`** - Beschikbare talen
- **`{{t_*}}`** - Vertaalde strings (t_home, t_search, etc.)

#### **SEO**
- **`{{seo_description}}`** - Meta description
- **`{{seo_keywords}}`** - Meta keywords

#### **Features**
- **`{{has_content}}`** - Boolean: is er content beschikbaar?
- **`{{show_site_link}}`** - Boolean: toon site link?
- **`{{is_guide_page}}`** - Boolean: is dit de handleiding pagina?

## URL Structuur

### Basis URLs
- **Home**: `/` of `?page=home`
- **Pagina**: `?page=map/pagina`
- **Zoeken**: `?search=zoekterm`
- **Handleiding**: `?guide`
- **Language**: `?lang=nl` of `?lang=en`

### File Extensions
Bestandsextensies worden automatisch gedetecteerd:
- `pagina.md` → `?page=pagina`
- `pagina.php` → `?page=pagina`
- `pagina.html` → `?page=pagina`

### Language Support
- **Browser detection**: Automatische taal detectie
- **URL switching**: `?page=nl.bestand&lang=nl`
- **Language prefixes**: `nl.bestand.md` en `en.bestand.md`
- **Directory precedence**: Directories hebben voorrang op bestanden

### Directory Listings
- **Auto-generation**: `?page=map` toont directory inhoud
- **File info**: Creatie/modificatie datums en groottes
- **Navigation**: Links naar bestanden en submappen

## SEO Optimalisatie

### Meta Tags

De CMS voegt automatisch de volgende meta tags toe:

```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">
```

### 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

Voor technische ondersteuning:
- **GitHub**: https://git.noorlander.info/E.Noorlander/CodePress.git
- **Website**: https://noorlander.info
- **Issues**: Rapporteer problemen via GitHub issues

## Licentie

CodePress CMS is open-source software. Controleer de licentie in de repository voor meer informatie.