From 1063619fef8083389f0fe596921dbad4aa99e835 Mon Sep 17 00:00:00 2001 From: loepperts Date: Sat, 29 Nov 2025 03:01:04 +0100 Subject: [PATCH] added quartz wiki --- DEBUG-WIKI.md | 87 ++++++++++++ WIKI-PROXY-SETUP.md | 119 ++++++++++++++++ WIKI-SETUP.md | 147 ++++++++++++++++++++ app/api/wiki/[...path]/route.ts | 65 +++++++++ app/wiki/page.tsx | 156 +++++++++++++++++++++ components/Footer.tsx | 106 +++++++------- components/Navigation.tsx | 168 ++++++++++++----------- docker-compose.yml | 44 ++++-- quartz-setup/.dockerignore | 4 + quartz-setup/Dockerfile | 36 +++++ quartz-setup/entrypoint.sh | 145 +++++++++++++++++++ quartz-setup/init-quartz.sh | 18 +++ quartz-setup/nginx.conf | 21 +++ quartz-setup/package.json | 16 +++ quartz-setup/public/Home.md | 12 ++ quartz-setup/public/IT-Grundlagen.md | 23 ++++ quartz-setup/public/Ressourcen.md | 24 ++++ quartz-setup/public/Schulungsmethoden.md | 22 +++ quartz-setup/public/index.html | 79 +++++++++++ quartz-setup/quartz.config.ts | 89 ++++++++++++ test-wiki-build.ps1 | 38 +++++ wiki-vault/Home.md | 12 ++ wiki-vault/IT-Grundlagen.md | 23 ++++ wiki-vault/Ressourcen.md | 24 ++++ wiki-vault/Schulungsmethoden.md | 22 +++ 25 files changed, 1351 insertions(+), 149 deletions(-) create mode 100755 DEBUG-WIKI.md create mode 100755 WIKI-PROXY-SETUP.md create mode 100755 WIKI-SETUP.md create mode 100755 app/api/wiki/[...path]/route.ts create mode 100755 app/wiki/page.tsx create mode 100755 quartz-setup/.dockerignore create mode 100755 quartz-setup/Dockerfile create mode 100755 quartz-setup/entrypoint.sh create mode 100755 quartz-setup/init-quartz.sh create mode 100755 quartz-setup/nginx.conf create mode 100755 quartz-setup/package.json create mode 100755 quartz-setup/public/Home.md create mode 100755 quartz-setup/public/IT-Grundlagen.md create mode 100755 quartz-setup/public/Ressourcen.md create mode 100755 quartz-setup/public/Schulungsmethoden.md create mode 100755 quartz-setup/public/index.html create mode 100755 quartz-setup/quartz.config.ts create mode 100755 test-wiki-build.ps1 create mode 100755 wiki-vault/Home.md create mode 100755 wiki-vault/IT-Grundlagen.md create mode 100755 wiki-vault/Ressourcen.md create mode 100755 wiki-vault/Schulungsmethoden.md diff --git a/DEBUG-WIKI.md b/DEBUG-WIKI.md new file mode 100755 index 0000000..1e0a43c --- /dev/null +++ b/DEBUG-WIKI.md @@ -0,0 +1,87 @@ +# Debug-Anleitung für Wiki-Setup + +## Problem behoben: Node.js Version + +**Problem**: Quartz 4.5.2 benötigt Node.js >= 22, wir hatten Node 20. + +**Lösung**: Dockerfile wurde aktualisiert auf `node:22-alpine` + +## Build-Anweisungen + +### 1. Wiki-Service neu bauen (nach Node.js Update) +```powershell +docker-compose build --no-cache wiki +``` + +### 2. Alle Services bauen +```powershell +docker-compose build +``` + +### 3. Services starten +```powershell +docker-compose up -d +``` + +### 4. Logs prüfen +```powershell +# Alle Logs +docker-compose logs + +# Nur Wiki-Logs +docker-compose logs wiki + +# Live-Logs folgen +docker-compose logs -f wiki +``` + +### 5. Container-Status prüfen +```powershell +docker-compose ps +``` + +## Erwartete Ausgabe beim Build + +Beim erfolgreichen Build sollten Sie sehen: +- ✅ Git wird installiert +- ✅ npm wird aktualisiert +- ✅ Quartz Repository wird geklont +- ✅ npm install läuft durch (kann einige Minuten dauern) +- ✅ serve wird installiert + +## Wenn der Build immer noch fehlschlägt + +### Option 1: Container-Status prüfen +```powershell +docker ps -a +docker-compose logs wiki --tail=100 +``` + +### Option 2: In Container einsteigen und manuell testen +```powershell +# Container starten (auch wenn Build fehlschlägt) +docker-compose run --rm wiki sh + +# Dann im Container: +cd /app/quartz-repo +npm install +``` + +### Option 3: Cache leeren und neu bauen +```powershell +docker-compose down +docker system prune -f +docker-compose build --no-cache wiki +``` + +## Erwartete Ports + +- **Web (Next.js)**: http://localhost:3001 +- **Wiki (Quartz)**: http://localhost:8080 + +## Nächste Schritte nach erfolgreichem Build + +1. Services starten: `docker-compose up -d` +2. Wiki aufrufen: http://localhost:8080 +3. Wiki-Seite testen: http://localhost:3001/wiki + diff --git a/WIKI-PROXY-SETUP.md b/WIKI-PROXY-SETUP.md new file mode 100755 index 0000000..78db1cf --- /dev/null +++ b/WIKI-PROXY-SETUP.md @@ -0,0 +1,119 @@ +# Wiki Proxy Setup - Dokumentation + +## Übersicht + +Das Wiki ist jetzt so konfiguriert, dass es über die Domain `doing-it.de/wiki` erreichbar ist, ohne dass Port 8080 nach außen exponiert werden muss. Dies wird durch einen Next.js API-Route-Proxy erreicht. + +## Architektur + +``` +Browser → doing-it.de/wiki → Next.js (/wiki page) → iframe → /api/wiki/* → Wiki-Service (intern) +``` + +1. **Browser** greift auf `doing-it.de/wiki` zu +2. **Next.js Wiki-Seite** (`app/wiki/page.tsx`) zeigt das Wiki als iframe +3. **iframe** lädt `/api/wiki/*` (Next.js API-Route) +4. **API-Route** (`app/api/wiki/[...path]/route.ts`) leitet Requests an den internen Wiki-Service weiter +5. **Wiki-Service** läuft nur im Docker-Netzwerk, Port 8080 ist nicht nach außen exponiert + +## Änderungen + +### 1. Docker Compose (`docker-compose.yml`) +- Wiki-Service verwendet jetzt `expose` statt `ports` +- Port 8080 ist nur im Docker-Netzwerk erreichbar, nicht von außen +- Kommunikation zwischen Services erfolgt über Service-Namen (`wiki:8080`) + +### 2. Next.js API-Route (`app/api/wiki/[...path]/route.ts`) +- Proxied alle Requests an den Wiki-Service +- Unterstützt alle HTTP-Methoden (GET, POST, PUT, DELETE) +- Weiterleitung von Headers und Query-Parametern + +### 3. Wiki-Seite (`app/wiki/page.tsx`) +- Zeigt das Wiki als iframe +- Lädt über `/api/wiki` (API-Route) +- Enthält Navigation zurück zur Website + +### 4. Navigation +- Link zu `/wiki` wurde bereits hinzugefügt +- Führt direkt zur Wiki-Seite mit eingebettetem Wiki + +## Vorteile + +✅ **Sicherheit**: Port 8080 ist nicht nach außen exponiert +✅ **Einheitliche Domain**: Alles über `doing-it.de` +✅ **Einfache Integration**: Wiki ist nahtlos in die Website eingebettet +✅ **Proxy-Funktionalität**: Alle Wiki-Ressourcen (CSS, JS, Bilder) werden korrekt weitergeleitet + +## Konfiguration + +### Environment Variables + +Die API-Route verwendet die Umgebungsvariable `WIKI_SERVICE_URL`: +- **Standard**: `http://wiki:8080` (Docker-Service-Name) +- **Anpassung**: Kann in `docker-compose.yml` gesetzt werden + +### Docker Compose + +```yaml +wiki: + expose: + - "8080" # Nur intern, nicht nach außen +``` + +Die Services kommunizieren automatisch über das Docker-Netzwerk. + +## Testing + +### Lokales Testen + +1. Services starten: +```powershell +docker-compose up -d +``` + +2. Wiki-Seite öffnen: +``` +http://localhost:3001/wiki +``` + +3. API-Route direkt testen: +``` +http://localhost:3001/api/wiki +``` + +### Produktion + +Nach dem Deployment hinter einem Reverse Proxy (z.B. Nginx): +- Wiki ist erreichbar über `https://doing-it.de/wiki` +- Kein direkter Zugriff auf Port 8080 erforderlich +- Alle Requests gehen über die Next.js-Anwendung + +## Troubleshooting + +### Problem: Wiki lädt nicht im iframe + +**Lösung**: +- Prüfen Sie die Browser-Konsole auf Fehler +- Überprüfen Sie, ob der Wiki-Service läuft: `docker-compose ps` +- Prüfen Sie die API-Route-Logs: `docker-compose logs web` + +### Problem: CORS-Fehler + +**Lösung**: +- Die API-Route setzt bereits `Access-Control-Allow-Origin: *` +- Falls weitere CORS-Header benötigt werden, in `route.ts` hinzufügen + +### Problem: Wiki-Service nicht erreichbar + +**Lösung**: +- Überprüfen Sie, ob beide Services im gleichen Docker-Netzwerk sind +- Prüfen Sie die Service-Namen in `docker-compose.yml` +- Testen Sie die interne Kommunikation: `docker-compose exec web ping wiki` + +## Nächste Schritte + +1. ✅ Wiki über Proxy erreichbar +2. ✅ Port 8080 nicht mehr exponiert +3. ✅ Einheitliche Domain (`doing-it.de/wiki`) +4. Optional: Reverse Proxy (Nginx/Traefik) für HTTPS und Domain-Routing konfigurieren + diff --git a/WIKI-SETUP.md b/WIKI-SETUP.md new file mode 100755 index 0000000..820979b --- /dev/null +++ b/WIKI-SETUP.md @@ -0,0 +1,147 @@ +# Wiki Setup mit Obsidian Quartz + +## Übersicht + +Das Wiki wurde erfolgreich in die doing-it.de Website integriert. Es verwendet Obsidian Quartz als statischen Site-Generator und läuft als Docker-Container. + +## Struktur + +``` +doing-it.de/ +├── wiki-vault/ # Obsidian Vault mit Markdown-Dateien +│ ├── Home.md +│ ├── IT-Grundlagen.md +│ ├── Schulungsmethoden.md +│ └── Ressourcen.md +├── quartz-setup/ # Quartz Docker Setup +│ ├── Dockerfile +│ ├── entrypoint.sh +│ ├── package.json +│ └── quartz.config.ts +├── app/wiki/ # Next.js Wiki-Seite +│ └── page.tsx +└── docker-compose.yml # Erweitert um Wiki-Service +``` + +## Was wurde implementiert + +### 1. Obsidian Vault (`wiki-vault/`) +- Enthält Beispiel-Markdown-Dateien +- Kann durch eigene Obsidian-Vault-Dateien ersetzt werden + +### 2. Quartz Docker Setup (`quartz-setup/`) +- Dockerfile: Klont Quartz Repository und richtet es ein +- entrypoint.sh: Baut die Quartz-Site und startet den Server +- Fallback: Erstellt einfache statische Site, falls Quartz-Build fehlschlägt + +### 3. Docker Compose Service +- Service `wiki` läuft auf Port 8080 +- Bindet `wiki-vault` als Volume ein +- Build-Output in `quartz-setup/public` + +### 4. Next.js Integration +- Neue Seite unter `/wiki` +- Wiki-Link in Navigation (Desktop & Mobile) +- Link zur Quartz-Instanz auf Port 8080 + +## Testing & Debugging in PowerShell + +### 1. Docker Compose Validierung +```powershell +docker-compose config +``` + +### 2. Wiki-Service bauen +```powershell +docker-compose build wiki +``` + +### 3. Alle Services starten +```powershell +docker-compose up -d +``` + +### 4. Logs prüfen +```powershell +# Alle Logs +docker-compose logs + +# Nur Wiki-Logs +docker-compose logs wiki + +# Follow Logs (Live) +docker-compose logs -f wiki +``` + +### 5. Container-Status prüfen +```powershell +docker-compose ps +docker ps -a +``` + +### 6. In Container einsteigen (falls nötig) +```powershell +docker-compose exec wiki sh +``` + +### 7. Services stoppen +```powershell +docker-compose down +``` + +### 8. Alles neu bauen +```powershell +docker-compose down +docker-compose build --no-cache +docker-compose up -d +``` + +## Erwartete Ports + +- **Next.js Web**: http://localhost:3001 +- **Wiki (Quartz)**: http://localhost:8080 + +## Häufige Probleme + +### Problem: Quartz Build schlägt fehl +**Lösung**: Der Entrypoint-Script erstellt automatisch einen Fallback mit einfacher HTML-Seite. Die Markdown-Dateien werden trotzdem angezeigt. + +### Problem: Port 8080 bereits belegt +**Lösung**: Port in `docker-compose.yml` ändern: +```yaml +ports: + - "8081:8080" # Ändere 8081 zu gewünschtem Port +``` + +### Problem: Container startet nicht +**Lösung**: +1. Logs prüfen: `docker-compose logs wiki` +2. Container neu bauen: `docker-compose build --no-cache wiki` +3. Container-Status: `docker ps -a` + +### Problem: Keine Inhalte im Wiki +**Lösung**: +1. Prüfen ob `wiki-vault` Dateien enthält +2. Volume-Mount prüfen: `docker-compose exec wiki ls -la /app/content` +3. Container neu starten: `docker-compose restart wiki` + +## Wiki-Inhalte aktualisieren + +1. Markdown-Dateien in `wiki-vault/` bearbeiten oder hinzufügen +2. Container neu starten: `docker-compose restart wiki` +3. Oder für kompletten Rebuild: `docker-compose up -d --build wiki` + +## Navigation + +Der Wiki-Link wurde zur Navigation hinzugefügt: +- Desktop: Zwischen "Über uns" und "Kontakt" +- Mobile: Im Hamburger-Menü + +Die Wiki-Seite (`/wiki`) zeigt einen Link zur Quartz-Instanz, der in einem neuen Tab geöffnet wird. + +## Nächste Schritte + +1. Eigene Obsidian-Vault-Dateien in `wiki-vault/` kopieren +2. Quartz-Konfiguration in `quartz-setup/quartz.config.ts` anpassen +3. Wiki-Styling an Website-Design anpassen (falls gewünscht) + diff --git a/app/api/wiki/[...path]/route.ts b/app/api/wiki/[...path]/route.ts new file mode 100755 index 0000000..cd86c91 --- /dev/null +++ b/app/api/wiki/[...path]/route.ts @@ -0,0 +1,65 @@ +import { NextRequest, NextResponse } from 'next/server' + +const WIKI_SERVICE_URL = process.env.WIKI_SERVICE_URL || 'http://wiki:8080' + +export async function GET( + request: NextRequest, + { params }: { params: { path: string[] } } +) { + try { + const path = params.path || [] + const searchParams = request.nextUrl.searchParams.toString() + const queryString = searchParams ? `?${searchParams}` : '' + const wikiPath = path.length > 0 ? `/${path.join('/')}` : '/' + + const wikiUrl = `${WIKI_SERVICE_URL}${wikiPath}${queryString}` + + const response = await fetch(wikiUrl, { + headers: { + 'User-Agent': request.headers.get('user-agent') || 'Next.js', + }, + }) + + if (!response.ok) { + return new NextResponse('Wiki not found', { status: response.status }) + } + + const contentType = response.headers.get('content-type') || 'text/html' + const content = await response.text() + + // Pass through headers + const headers = new Headers() + headers.set('Content-Type', contentType) + + // Handle CORS if needed + headers.set('Access-Control-Allow-Origin', '*') + + // Preserve cache headers + const cacheControl = response.headers.get('cache-control') + if (cacheControl) { + headers.set('Cache-Control', cacheControl) + } + + return new NextResponse(content, { + status: response.status, + headers, + }) + } catch (error) { + console.error('Wiki proxy error:', error) + return new NextResponse('Error loading wiki', { status: 500 }) + } +} + +// Handle other HTTP methods +export async function POST(request: NextRequest, { params }: { params: { path: string[] } }) { + return GET(request, { params }) +} + +export async function PUT(request: NextRequest, { params }: { params: { path: string[] } }) { + return GET(request, { params }) +} + +export async function DELETE(request: NextRequest, { params }: { params: { path: string[] } }) { + return GET(request, { params }) +} + diff --git a/app/wiki/page.tsx b/app/wiki/page.tsx new file mode 100755 index 0000000..52b9bea --- /dev/null +++ b/app/wiki/page.tsx @@ -0,0 +1,156 @@ +'use client' + +import { motion } from 'framer-motion' +import Navigation from '@/components/Navigation' +import Footer from '@/components/Footer' +import { useState } from 'react' + +export default function Wiki() { + const [showFullPage, setShowFullPage] = useState(true) + + // Wiki URL über den Next.js API Proxy + const wikiUrl = '/api/wiki' + + if (showFullPage) { + // Vollständige Wiki-Seite als iframe + return ( + <> + +
+
+

doing-it Wiki

+ +
+