loepperts/doing-it-website
1
1
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

added quartz wiki

Browse Source
This commit is contained in:
loepperts
2025-11-29 03:01:04 +01:00
parent 989253c72f
commit 1063619fef
25 changed files with 1351 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
DEBUG-WIKI.md Executable file
View File

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

119
WIKI-PROXY-SETUP.md Executable file
View File

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

147
WIKI-SETUP.md Executable file
View File

@@ -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)

65
app/api/wiki/[...path]/route.ts Executable file
View File

@@ -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 })
}

156
app/wiki/page.tsx Executable file
View File

@@ -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 (
<>
<Navigation />
<main style={{ paddingTop: '52px', height: 'calc(100vh - 52px)', display: 'flex', flexDirection: 'column' }}>
<div style={{
position: 'fixed',
top: '52px',
left: 0,
right: 0,
background: 'rgba(0, 0, 0, 0.9)',
padding: '10px 20px',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
zIndex: 999,
borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
}}>
<h2 style={{ fontSize: '18px', fontWeight: '600', margin: 0 }}>doing-it Wiki</h2>
<button
onClick={() => setShowFullPage(false)}
className="btn btn-secondary"
style={{ padding: '8px 20px', fontSize: '14px' }}
>
Zur Übersicht
</button>
</div>
<iframe
src={wikiUrl}
style={{
width: '100%',
height: '100%',
border: 'none',
marginTop: '50px',
background: '#fff'
}}
title="doing-it Wiki"
/>
</main>
</>
)
}
// Übersichtsseite mit Option zum Öffnen des Wikis
return (
<>
<Navigation />
<main>
<section className="hero">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="hero-content"
>
<h1 className="hero-title">Wiki</h1>
<p className="hero-subtitle">
Unser Wissensbereich mit nützlichen Informationen<br />
rund um IT-Weiterbildung und Schulungen
</p>
<div className="hero-buttons" style={{ marginTop: '40px' }}>
<button
onClick={() => setShowFullPage(true)}
className="btn btn-primary"
style={{ cursor: 'pointer' }}
>
Wiki öffnen
</button>
<a
href={wikiUrl}
target="_blank"
rel="noopener noreferrer"
className="btn btn-secondary"
>
In neuem Tab öffnen
</a>
</div>
</motion.div>
</section>
<section className="features" style={{ paddingTop: '80px' }}>
<div className="container">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<h2 style={{ fontSize: '48px', fontWeight: '600', marginBottom: '40px', textAlign: 'center' }}>
Was finden Sie im Wiki?
</h2>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginTop: '60px' }}>
<div className="feature-card">
<h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
IT-Grundlagen
</h3>
<p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
Umfassende Informationen zu grundlegenden IT-Konzepten, Technologien und Best Practices.
</p>
</div>
<div className="feature-card">
<h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
Schulungsmethoden
</h3>
<p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
Moderne Ansätze und bewährte Methoden für effektive IT-Schulungen und Weiterbildungen.
</p>
</div>
<div className="feature-card">
<h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
Ressourcen
</h3>
<p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
Sammlung von nützlichen Tools, Materialien und weiterführenden Ressourcen.
</p>
</div>
</div>
</motion.div>
</div>
</section>
<section className="features" style={{ paddingTop: '80px', paddingBottom: '120px' }}>
<div className="container">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
style={{ textAlign: 'center' }}
>
<h3 style={{ fontSize: '32px', fontWeight: '600', marginBottom: '20px' }}>
Bereit loszulegen?
</h3>
<p style={{ color: 'var(--color-text-secondary)', fontSize: '20px', marginBottom: '40px' }}>
Klicken Sie auf den Button oben, um direkt zum Wiki zu gelangen.
</p>
</motion.div>
</div>
</section>
</main>
<Footer />
</>
)
}

106
components/Footer.tsx
View File

@@ -1,53 +1,53 @@
import Link from 'next/link' import Link from 'next/link'
export default function Footer() { export default function Footer() {
return ( return (
<footer className="footer"> <footer className="footer">
<div className="container"> <div className="container">
<div className="footer-content"> <div className="footer-content">
<div className="footer-section"> <div className="footer-section">
<h3>doing-it</h3> <h3>doing-it</h3>
<p>IT Weiterbildung und Schulungen</p> <p>IT Weiterbildung und Schulungen</p>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Kontakt</h4> <h4>Kontakt</h4>
<a href="mailto:info@doing-it.de">info@doing-it.de</a> <a href="mailto:info@doing-it.de">info@doing-it.de</a>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Social Media</h4> <h4>Social Media</h4>
<div className="footer-social"> <div className="footer-social">
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"> <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">
LinkedIn LinkedIn
</a> </a>
<a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing"> <a href="https://www.xing.com/companies/doing-it" target="_blank" rel="noopener noreferrer" aria-label="Xing">
Xing Xing
</a> </a>
</div> </div>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Navigation</h4> <h4>Navigation</h4>
<Link href="/">Home</Link> <Link href="/">Home</Link>
<Link href="/unternehmen">Für Unternehmen</Link> <Link href="/unternehmen">Für Unternehmen</Link>
<Link href="/quereinsteiger">Für Quereinsteiger</Link> <Link href="/quereinsteiger">Für Quereinsteiger</Link>
<Link href="/ueber-uns">Über uns</Link> <Link href="/ueber-uns">Über uns</Link>
<Link href="/kontakt">Kontakt</Link> <Link href="/kontakt">Kontakt</Link>
</div> </div>
<div className="footer-section"> <div className="footer-section">
<h4>Rechtliches</h4> <h4>Rechtliches</h4>
<Link href="/impressum">Impressum</Link> <Link href="/impressum">Impressum</Link>
<Link href="/datenschutz">Datenschutzerklärung</Link> <Link href="/datenschutz">Datenschutzerklärung</Link>
<Link href="/agb">AGB</Link> <Link href="/agb">AGB</Link>
</div> </div>
</div> </div>
<div className="footer-bottom"> <div className="footer-bottom">
<p>&copy; {new Date().getFullYear()} doing-it. Alle Rechte vorbehalten.</p> <p>&copy; {new Date().getFullYear()} doing-it. Alle Rechte vorbehalten.</p>
</div> </div>
</div> </div>
</footer> </footer>
) )
} }

168
components/Navigation.tsx
View File

@@ -1,81 +1,87 @@
'use client' 'use client'
import { useState } from 'react' import { useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
export default function Navigation() { export default function Navigation() {
const [isOpen, setIsOpen] = useState(false) const [isOpen, setIsOpen] = useState(false)
return ( return (
<nav className="nav"> <nav className="nav">
<div className="nav-container"> <div className="nav-container">
<Link href="/" className="nav-logo"> <Link href="/" className="nav-logo">
doing-it doing-it
</Link> </Link>
{/* Desktop Menu */} {/* Desktop Menu */}
<div className="nav-menu"> <div className="nav-menu">
<Link href="/" className="nav-link"> <Link href="/" className="nav-link">
Home Home
</Link> </Link>
<Link href="/unternehmen" className="nav-link"> <Link href="/unternehmen" className="nav-link">
Für Unternehmen Für Unternehmen
</Link> </Link>
<Link href="/quereinsteiger" className="nav-link"> <Link href="/quereinsteiger" className="nav-link">
Für Quereinsteiger Für Quereinsteiger
</Link> </Link>
<Link href="/ueber-uns" className="nav-link"> <Link href="/ueber-uns" className="nav-link">
Über uns Über uns
</Link> </Link>
<Link href="/kontakt" className="nav-link"> <Link href="/wiki" className="nav-link">
Kontakt Wiki
</Link> </Link>
<a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}> <Link href="/kontakt" className="nav-link">
<span aria-label="LinkedIn">🔗</span> Kontakt
</a> </Link>
</div> <a href="https://www.linkedin.com/company/doing-it" target="_blank" rel="noopener noreferrer" className="nav-link" style={{ fontSize: '18px' }}>
<span aria-label="LinkedIn">🔗</span>
{/* Mobile Menu Button */} </a>
<button </div>
className="nav-toggle"
onClick={() => setIsOpen(!isOpen)} {/* Mobile Menu Button */}
aria-label="Menu" <button
> className="nav-toggle"
<span className={isOpen ? 'open' : ''}></span> onClick={() => setIsOpen(!isOpen)}
<span className={isOpen ? 'open' : ''}></span> aria-label="Menu"
<span className={isOpen ? 'open' : ''}></span> >
</button> <span className={isOpen ? 'open' : ''}></span>
</div> <span className={isOpen ? 'open' : ''}></span>
<span className={isOpen ? 'open' : ''}></span>
{/* Mobile Menu */} </button>
<AnimatePresence> </div>
{isOpen && (
<motion.div {/* Mobile Menu */}
initial={{ opacity: 0, height: 0 }} <AnimatePresence>
animate={{ opacity: 1, height: 'auto' }} {isOpen && (
exit={{ opacity: 0, height: 0 }} <motion.div
className="nav-mobile" initial={{ opacity: 0, height: 0 }}
> animate={{ opacity: 1, height: 'auto' }}
<Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}> exit={{ opacity: 0, height: 0 }}
Home className="nav-mobile"
</Link> >
<Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <Link href="/" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Für Unternehmen Home
</Link> </Link>
<Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <Link href="/unternehmen" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Für Quereinsteiger Für Unternehmen
</Link> </Link>
<Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <Link href="/quereinsteiger" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Über uns Für Quereinsteiger
</Link> </Link>
<Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}> <Link href="/ueber-uns" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
Kontakt Über uns
</Link> </Link>
</motion.div> <Link href="/wiki" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
)} Wiki
</AnimatePresence> </Link>
</nav> <Link href="/kontakt" className="nav-mobile-link" onClick={() => setIsOpen(false)}>
) Kontakt
} </Link>
</motion.div>
)}
</AnimatePresence>
</nav>
)
}

44
docker-compose.yml
View File

@@ -1,15 +1,29 @@
services: services:
web: web:
build: build:
context: . context: .
dockerfile: Dockerfile.dev dockerfile: Dockerfile.dev
ports: ports:
- "3001:3000" - "3001:3000"
environment: environment:
- NODE_ENV=development - NODE_ENV=development
volumes: volumes:
- .:/app - .:/app
- /app/node_modules - /app/node_modules
- /app/.next - /app/.next
restart: unless-stopped restart: unless-stopped
wiki:
build:
context: ./quartz-setup
dockerfile: Dockerfile
# Port nicht nach außen exponiert - nur intern über Docker-Netzwerk erreichbar
expose:
- "8080"
volumes:
- ./wiki-vault:/app/content
- ./quartz-setup/public:/app/public
restart: unless-stopped
environment:
- QUARTZ_BASE_URL=/wiki

4
quartz-setup/.dockerignore Executable file
View File

@@ -0,0 +1,4 @@
node_modules
.next
.git

36
quartz-setup/Dockerfile Executable file
View File

@@ -0,0 +1,36 @@
FROM node:22-alpine
WORKDIR /app
# Install git (needed for cloning Quartz)
RUN apk add --no-cache git
# Update npm to latest version
RUN npm install -g npm@latest
# Clone Quartz repository
RUN git clone https://github.com/jackyzha0/quartz.git quartz-repo
# Move into Quartz directory
WORKDIR /app/quartz-repo
# Install Quartz dependencies
RUN npm install
# Install serve for static file serving
RUN npm install -g serve
# Create directories for content and output
RUN mkdir -p /app/content /app/public
# Copy entrypoint script
COPY entrypoint.sh /app/entrypoint.sh
RUN chmod +x /app/entrypoint.sh
# Expose port
EXPOSE 8080
# Set working directory back to app root
WORKDIR /app
CMD ["/app/entrypoint.sh"]

145
quartz-setup/entrypoint.sh Executable file
View File

@@ -0,0 +1,145 @@
#!/bin/sh
echo "Starting Quartz Wiki..."
# Check if content directory has files
if [ -z "$(ls -A /app/content 2>/dev/null)" ]; then
echo "Warning: Content directory is empty!"
# Create a default index page
mkdir -p /app/content
echo "# Wiki Home
Willkommen im doing-it Wiki!
Dieses Wiki wird mit Obsidian Quartz betrieben.
" > /app/content/index.md
fi
# Copy content to Quartz content directory
echo "Copying vault content to Quartz..."
mkdir -p /app/quartz-repo/content
cp -r /app/content/* /app/quartz-repo/content/ 2>/dev/null || true
# Build Quartz
echo "Building Quartz site..."
cd /app/quartz-repo
# Build the site with default Quartz setup
npx quartz build 2>&1 || {
echo "Default Quartz build failed, trying alternative method..."
# Try building with explicit paths
npx quartz build --contentDir ./content --outputDir /app/public 2>&1 || {
echo "Default build also failed, creating fallback static site..."
# Create fallback static site
mkdir -p /app/public
cd /app/content
# Create index.html
cat > /app/public/index.html << 'EOFHTML'
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>doing-it Wiki</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: #161618;
color: #ebebec;
line-height: 1.6;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
h1 {
font-size: 48px;
font-weight: 600;
margin-bottom: 20px;
color: #ebebec;
}
h2 {
font-size: 32px;
font-weight: 600;
margin: 40px 0 20px;
color: #ebebec;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 15px 0;
}
a {
color: #ff3b30;
text-decoration: none;
font-size: 18px;
transition: color 0.3s;
display: inline-block;
}
a:hover {
color: #ff453a;
}
.intro {
font-size: 20px;
color: #d4d4d4;
margin-bottom: 40px;
}
.content-preview {
background: #1c1c1e;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>doing-it Wiki</h1>
<p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
<h2>Inhalte</h2>
<ul id="content-list">
EOFHTML
# Find all markdown files and create links
find /app/content -name "*.md" -type f | while read file; do
title=$(basename "$file" .md)
relative_path=$(echo "$file" | sed "s|/app/content/||")
echo " <li><a href=\"/$relative_path\">$title</a></li>" >> /app/public/index.html
done
echo " </ul>" >> /app/public/index.html
echo " </div>" >> /app/public/index.html
echo "</body>" >> /app/public/index.html
echo "</html>" >> /app/public/index.html
# Copy markdown files to public
cp -r /app/content/* /app/public/ 2>/dev/null || true
}
}
# If Quartz build succeeded, check if public directory exists
if [ -d "/app/quartz-repo/public" ] && [ -n "$(ls -A /app/quartz-repo/public 2>/dev/null)" ]; then
echo "Copying Quartz output to public directory..."
cp -r /app/quartz-repo/public/* /app/public/ 2>/dev/null || true
fi
# Ensure public directory exists
if [ ! -d "/app/public" ] || [ -z "$(ls -A /app/public 2>/dev/null)" ]; then
echo "Error: Public directory is empty, creating minimal site..."
mkdir -p /app/public
echo "<!DOCTYPE html><html><head><meta charset='UTF-8'><title>doing-it Wiki</title></head><body><h1>doing-it Wiki</h1><p>Wiki wird geladen...</p></body></html>" > /app/public/index.html
fi
echo "Build complete. Starting server on port 8080..."
cd /app
serve -s public -l 8080

18
quartz-setup/init-quartz.sh Executable file
View File

@@ -0,0 +1,18 @@
#!/bin/sh
# Initialize Quartz
echo "Initializing Quartz..."
npx @jackyzha0/quartz create --help
# Copy vault content to content directory
if [ -d "/vault" ]; then
echo "Copying vault content..."
cp -r /vault/* ./content/ 2>/dev/null || true
fi
# Build Quartz
echo "Building Quartz site..."
npx quartz build
echo "Quartz build complete!"

21
quartz-setup/nginx.conf Executable file
View File

@@ -0,0 +1,21 @@
server {
listen 8080;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ $uri.html /index.html;
}
# Enable gzip compression
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}

16
quartz-setup/package.json Executable file
View File

@@ -0,0 +1,16 @@
{
"name": "quartz-wiki",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "quartz build",
"watch": "quartz watch",
"sync": "quartz sync"
},
"dependencies": {
"@jackyzha0/quartz": "^4.4.3"
},
"devDependencies": {
"serve": "^14.2.1"
}
}

12
quartz-setup/public/Home.md Executable file
View File

@@ -0,0 +1,12 @@
# Wiki Home
Willkommen im doing-it Wiki!
Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
## Übersicht
- [[IT-Grundlagen]]
- [[Schulungsmethoden]]
- [[Ressourcen]]

23
quartz-setup/public/IT-Grundlagen.md Executable file
View File

@@ -0,0 +1,23 @@
# IT-Grundlagen
## Einführung
Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
## Themenbereiche
### Netzwerke
- Grundlagen der Netzwerkarchitektur
- TCP/IP Protokolle
- Firewall-Konfiguration
### Betriebssysteme
- Linux
- Windows Server
- Virtualisierung
## Weiterführende Links
- [[Home]]
- [[Ressourcen]]

24
quartz-setup/public/Ressourcen.md Executable file
View File

@@ -0,0 +1,24 @@
# Ressourcen
## Lernmaterialien
### Bücher
- Empfohlene Fachliteratur
- Online-Ressourcen
### Tools
- Software für IT-Schulungen
- Virtualisierungstools
- Entwicklungsumgebungen
### Community
- Foren und Diskussionsgruppen
- Online-Kurse
- Zertifizierungen
## Siehe auch
- [[IT-Grundlagen]]
- [[Schulungsmethoden]]
- [[Home]]

22
quartz-setup/public/Schulungsmethoden.md Executable file
View File

@@ -0,0 +1,22 @@
# Schulungsmethoden
## Moderne Ansätze der IT-Schulung
### Praxisorientierte Schulungen
- Hands-on Workshops
- Real-world Szenarien
- Projektbasierter Unterricht
### Blended Learning
- Online-Materialien
- Präsenzveranstaltungen
- Selbstlernphasen
## Vorteile
1. Bessere Wissensretention
2. Praktische Anwendbarkeit
3. Flexibilität für Teilnehmer
[[Home]]

79
quartz-setup/public/index.html Executable file
View File

@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>doing-it Wiki</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
background: #161618;
color: #ebebec;
line-height: 1.6;
padding: 40px 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
}
h1 {
font-size: 48px;
font-weight: 600;
margin-bottom: 20px;
color: #ebebec;
}
h2 {
font-size: 32px;
font-weight: 600;
margin: 40px 0 20px;
color: #ebebec;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 15px 0;
}
a {
color: #ff3b30;
text-decoration: none;
font-size: 18px;
transition: color 0.3s;
display: inline-block;
}
a:hover {
color: #ff453a;
}
.intro {
font-size: 20px;
color: #d4d4d4;
margin-bottom: 40px;
}
.content-preview {
background: #1c1c1e;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>doing-it Wiki</h1>
<p class="intro">Willkommen im doing-it Wiki! Hier finden Sie nützliche Informationen rund um IT-Weiterbildung und Schulungen.</p>
<h2>Inhalte</h2>
<ul id="content-list">
<li><a href="/Home.md">Home</a></li>
<li><a href="/IT-Grundlagen.md">IT-Grundlagen</a></li>
<li><a href="/Ressourcen.md">Ressourcen</a></li>
<li><a href="/Schulungsmethoden.md">Schulungsmethoden</a></li>
</ul>
</div>
</body>
</html>

89
quartz-setup/quartz.config.ts Executable file
View File

@@ -0,0 +1,89 @@
import { QuartzConfig } from "./quartz/cfg"
import * as Plugin from "./quartz/plugins"
/**
* Quartz 4.0 Configuration
*
* See https://quartz.jzhao.xyz/configuration for more information.
*/
const config: QuartzConfig = {
configuration: {
pageTitle: "doing-it Wiki",
enableSPA: true,
enablePopovers: true,
analytics: null,
locale: "de-DE",
baseUrl: "wiki",
ignorePatterns: ["private", "templates", ".obsidian"],
defaultDateType: "created",
theme: {
fontOrigin: "googleFonts",
cdnCaching: true,
typography: {
header: "Schibsted Grotesk",
body: "Source Sans Pro",
code: "IBM Plex Mono",
},
colors: {
lightMode: {
light: "#faf8f8",
lightgray: "#e5e5e5",
gray: "#b8b8b8",
darkgray: "#4e4e4e",
dark: "#2b2b2b",
secondary: "#284b63",
tertiary: "#84a59d",
highlight: "rgba(143, 159, 169, 0.15)",
},
darkMode: {
light: "#161618",
lightgray: "#393639",
gray: "#646464",
darkgray: "#d4d4d4",
dark: "#ebebec",
secondary: "#7b97aa",
tertiary: "#84a59d",
highlight: "rgba(143, 159, 169, 0.15)",
},
},
},
},
plugins: {
transformers: [
Plugin.FrontMatter({ delimiters: "---" }),
Plugin.CreatedModifiedDate({
priority: ["frontmatter", "filesystem"],
}),
Plugin.SyntaxHighlighting({
theme: {
light: "github-light",
dark: "github-dark",
},
keepBackground: false,
}),
Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
Plugin.GitHubFlavoredMarkdown(),
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
Plugin.Latex({ renderEngine: "katex" }),
Plugin.Description(),
],
filters: [Plugin.RemoveDrafts()],
emitters: [
Plugin.AliasRedirects(),
Plugin.ComponentResources(),
Plugin.ContentPage(),
Plugin.FolderPage(),
Plugin.TagPage(),
Plugin.ContentIndex({
enableSiteMap: true,
enableRSS: true,
}),
Plugin.Assets(),
Plugin.Static(),
Plugin.NotFoundPage(),
],
},
}
export default config

38
test-wiki-build.ps1 Executable file
View File

@@ -0,0 +1,38 @@
# PowerShell script to test and debug the Wiki Docker setup
Write-Host "=== Testing Wiki Docker Setup ===" -ForegroundColor Green
Write-Host ""
Write-Host "1. Checking Docker installation..." -ForegroundColor Yellow
docker --version
docker-compose --version
Write-Host ""
Write-Host "2. Validating docker-compose configuration..." -ForegroundColor Yellow
docker-compose config
Write-Host ""
Write-Host "3. Building Wiki service..." -ForegroundColor Yellow
docker-compose build wiki 2>&1
Write-Host ""
Write-Host "4. Checking for existing containers..." -ForegroundColor Yellow
docker ps -a | Select-String "wiki"
Write-Host ""
Write-Host "5. Starting services..." -ForegroundColor Yellow
docker-compose up -d
Write-Host ""
Write-Host "6. Checking service status..." -ForegroundColor Yellow
Start-Sleep -Seconds 3
docker-compose ps
Write-Host ""
Write-Host "7. Showing Wiki service logs..." -ForegroundColor Yellow
docker-compose logs wiki --tail=50
Write-Host ""
Write-Host "=== Test Complete ===" -ForegroundColor Green
Write-Host "Check the logs above for any errors." -ForegroundColor Cyan

12
wiki-vault/Home.md Executable file
View File

@@ -0,0 +1,12 @@
# Wiki Home
Willkommen im doing-it Wiki!
Dieses Wiki enthält nützliche Informationen rund um IT-Weiterbildung, Schulungen und mehr.
## Übersicht
- [[IT-Grundlagen]]
- [[Schulungsmethoden]]
- [[Ressourcen]]

23
wiki-vault/IT-Grundlagen.md Executable file
View File

@@ -0,0 +1,23 @@
# IT-Grundlagen
## Einführung
Hier finden Sie grundlegende Informationen zu IT-Konzepten und Technologien.
## Themenbereiche
### Netzwerke
- Grundlagen der Netzwerkarchitektur
- TCP/IP Protokolle
- Firewall-Konfiguration
### Betriebssysteme
- Linux
- Windows Server
- Virtualisierung
## Weiterführende Links
- [[Home]]
- [[Ressourcen]]

24
wiki-vault/Ressourcen.md Executable file
View File

@@ -0,0 +1,24 @@
# Ressourcen
## Lernmaterialien
### Bücher
- Empfohlene Fachliteratur
- Online-Ressourcen
### Tools
- Software für IT-Schulungen
- Virtualisierungstools
- Entwicklungsumgebungen
### Community
- Foren und Diskussionsgruppen
- Online-Kurse
- Zertifizierungen
## Siehe auch
- [[IT-Grundlagen]]
- [[Schulungsmethoden]]
- [[Home]]

22
wiki-vault/Schulungsmethoden.md Executable file
View File

@@ -0,0 +1,22 @@
# Schulungsmethoden
## Moderne Ansätze der IT-Schulung
### Praxisorientierte Schulungen
- Hands-on Workshops
- Real-world Szenarien
- Projektbasierter Unterricht
### Blended Learning
- Online-Materialien
- Präsenzveranstaltungen
- Selbstlernphasen
## Vorteile
1. Bessere Wissensretention
2. Praktische Anwendbarkeit
3. Flexibilität für Teilnehmer
[[Home]]