docs: Add guide for adding 404 project to production
Some checks failed
Production Deployment (Zero Downtime) / deploy-production (push) Has been cancelled
Some checks failed
Production Deployment (Zero Downtime) / deploy-production (push) Has been cancelled
This commit is contained in:
314
docs/ADD_404_PROJECT_TO_PRODUCTION.md
Normal file
314
docs/ADD_404_PROJECT_TO_PRODUCTION.md
Normal file
@@ -0,0 +1,314 @@
|
|||||||
|
# 🚀 Kernel Panic 404 Projekt auf Production hinzufügen
|
||||||
|
|
||||||
|
## Übersicht
|
||||||
|
|
||||||
|
Das "Kernel Panic 404 - Interactive Terminal" Projekt wurde bereits zum Seed-Script hinzugefügt, aber um es auf Production zu bekommen, gibt es mehrere Optionen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Option 1: Über den Editor (Empfohlen) ⭐
|
||||||
|
|
||||||
|
### Schritt 1: Editor öffnen
|
||||||
|
1. Gehe zu `https://dk0.dev/editor` (oder `https://dev.dk0.dev/editor` für Staging)
|
||||||
|
2. Logge dich mit Admin-Credentials ein
|
||||||
|
|
||||||
|
### Schritt 2: Neues Projekt erstellen
|
||||||
|
1. Klicke auf "New Project" oder gehe direkt zu `/editor`
|
||||||
|
2. Fülle die Felder aus:
|
||||||
|
|
||||||
|
**Grunddaten:**
|
||||||
|
- **Title**: `Kernel Panic 404 - Interactive Terminal`
|
||||||
|
- **Description**: `An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.`
|
||||||
|
- **Category**: `Web Development`
|
||||||
|
- **Tags**: `Next.js`, `React`, `TypeScript`, `Terminal`, `404`, `Interactive`, `Easter Eggs`
|
||||||
|
- **Featured**: ✅ (Checkbox aktivieren)
|
||||||
|
- **Published**: ✅ (Checkbox aktivieren)
|
||||||
|
|
||||||
|
**Content (Markdown):**
|
||||||
|
```markdown
|
||||||
|
# Kernel Panic 404 - Interactive Terminal
|
||||||
|
|
||||||
|
An immersive, retro-style 404 page that transforms the error experience into an interactive terminal adventure.
|
||||||
|
|
||||||
|
## 🎯 Purpose
|
||||||
|
|
||||||
|
Instead of showing a boring "Page Not Found" message, visitors are greeted with a fully functional terminal emulator where they can explore a virtual file system, run commands, and discover hidden Easter eggs.
|
||||||
|
|
||||||
|
## 🚀 Features
|
||||||
|
|
||||||
|
- **Interactive Terminal**: Full command-line interface with command history
|
||||||
|
- **Virtual File System**: Navigate directories, read files, and explore hidden content
|
||||||
|
- **CRT Monitor Effects**: Authentic retro computer terminal aesthetics
|
||||||
|
- **Easter Eggs**: Hidden references to pop culture (Stranger Things, Mr. Robot, Hitchhiker's Guide)
|
||||||
|
- **Command Autocomplete**: Tab completion for commands and file paths
|
||||||
|
- **Audio Synthesis**: Sound effects for key presses and special events
|
||||||
|
- **Visual Effects**: Glitch effects, color shifts, and screen distortions
|
||||||
|
|
||||||
|
## 🛠️ Technologies Used
|
||||||
|
|
||||||
|
- Next.js 15 (App Router)
|
||||||
|
- React (Client Components)
|
||||||
|
- TypeScript
|
||||||
|
- CSS Animations
|
||||||
|
- Web Audio API
|
||||||
|
- Framer Motion (for effects)
|
||||||
|
|
||||||
|
## 💻 Available Commands
|
||||||
|
|
||||||
|
### System Commands
|
||||||
|
- \`ls\`, \`cd\`, \`cat\`, \`grep\`, \`find\`, \`pwd\`
|
||||||
|
- \`whoami\`, \`uname\`, \`date\`, \`uptime\`
|
||||||
|
- \`clear\`, \`history\`, \`help\`
|
||||||
|
|
||||||
|
### Easter Egg Commands
|
||||||
|
- \`hawkins\` / \`011\` / \`eleven\` - Enter the Upside Down
|
||||||
|
- \`fsociety\` / \`elliot\` / \`bonsoir\` - Mr. Robot mode
|
||||||
|
- \`42\` / \`answer\` - Deep Thought calculation
|
||||||
|
- \`rm -rf /\` - Trigger kernel panic
|
||||||
|
|
||||||
|
## 🎨 Design Features
|
||||||
|
|
||||||
|
- **CRT Monitor Aesthetics**: Scanlines, phosphor glow, authentic terminal colors
|
||||||
|
- **Retro Typography**: Monospace font with terminal-style appearance
|
||||||
|
- **Interactive Elements**: Fully functional command line with history navigation
|
||||||
|
- **Visual Effects**: Screen glitches, color shifts, and distortion effects
|
||||||
|
|
||||||
|
## 🔍 Hidden Content
|
||||||
|
|
||||||
|
The file system contains hidden clues and references:
|
||||||
|
- \`/var/log/syslog\` - Contains hints about Easter eggs
|
||||||
|
- \`~/.bash_history\` - Shows previous commands
|
||||||
|
- \`~/readme.txt\` - Welcome message and hints
|
||||||
|
|
||||||
|
## 💡 What I Learned
|
||||||
|
|
||||||
|
- Building interactive terminal emulators in React
|
||||||
|
- Web Audio API for sound synthesis
|
||||||
|
- Complex state management for file systems
|
||||||
|
- CSS animations for retro effects
|
||||||
|
- Creating engaging error pages
|
||||||
|
|
||||||
|
## 🔮 Future Enhancements
|
||||||
|
|
||||||
|
- More Easter eggs and hidden commands
|
||||||
|
- Additional visual effects
|
||||||
|
- Sound theme variations
|
||||||
|
- More complex file system structures
|
||||||
|
- Network commands (ping, curl, etc.)
|
||||||
|
|
||||||
|
## 🎮 Try It Out
|
||||||
|
|
||||||
|
Visit any non-existent page on the site to see the terminal in action. Or click the "404" link in the footer!
|
||||||
|
|
||||||
|
**Try these commands:**
|
||||||
|
- \`ls -la\` - List all files including hidden ones
|
||||||
|
- \`cat readme.txt\` - Read the welcome message
|
||||||
|
- \`cd /var/log\` - Navigate to system logs
|
||||||
|
- \`hawkins\` - Enter the Upside Down mode
|
||||||
|
- \`42\` - Get the answer to everything
|
||||||
|
```
|
||||||
|
|
||||||
|
**Links:**
|
||||||
|
- **Live URL**: `/404`
|
||||||
|
- **GitHub**: (optional, leer lassen)
|
||||||
|
|
||||||
|
3. Klicke auf "Save"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Option 2: Direkt über die API
|
||||||
|
|
||||||
|
### Mit curl:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST https://dk0.dev/api/projects \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-H "x-admin-request: true" \
|
||||||
|
-u "admin:your_password" \
|
||||||
|
-d '{
|
||||||
|
"title": "Kernel Panic 404 - Interactive Terminal",
|
||||||
|
"description": "An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.",
|
||||||
|
"content": "# Kernel Panic 404...",
|
||||||
|
"category": "Web Development",
|
||||||
|
"tags": ["Next.js", "React", "TypeScript", "Terminal", "404", "Interactive", "Easter Eggs"],
|
||||||
|
"featured": true,
|
||||||
|
"published": true,
|
||||||
|
"live": "/404",
|
||||||
|
"date": "2025-01-09",
|
||||||
|
"difficulty": "INTERMEDIATE",
|
||||||
|
"timeToComplete": "1-2 weeks",
|
||||||
|
"technologies": ["Next.js", "React", "TypeScript", "CSS", "Web Audio API"],
|
||||||
|
"challenges": [
|
||||||
|
"Terminal emulator implementation",
|
||||||
|
"File system state management",
|
||||||
|
"Command parsing and execution"
|
||||||
|
],
|
||||||
|
"lessonsLearned": [
|
||||||
|
"Building interactive UIs",
|
||||||
|
"Web Audio API usage",
|
||||||
|
"Complex state management"
|
||||||
|
],
|
||||||
|
"futureImprovements": [
|
||||||
|
"More Easter eggs",
|
||||||
|
"Additional visual effects",
|
||||||
|
"Sound theme variations"
|
||||||
|
],
|
||||||
|
"colorScheme": "Retro terminal green on black",
|
||||||
|
"accessibility": true,
|
||||||
|
"performance": {
|
||||||
|
"lighthouse": 0,
|
||||||
|
"bundleSize": "0KB",
|
||||||
|
"loadTime": "0s"
|
||||||
|
},
|
||||||
|
"analytics": {
|
||||||
|
"views": 0,
|
||||||
|
"likes": 0,
|
||||||
|
"shares": 0
|
||||||
|
}
|
||||||
|
}'
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Option 3: Über die Datenbank (SQL)
|
||||||
|
|
||||||
|
### Schritt 1: Verbinde zur Production-Datenbank
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Wenn du Zugriff auf den Production-Container hast:
|
||||||
|
docker exec -it portfolio-postgres psql -U portfolio_user -d portfolio_db
|
||||||
|
```
|
||||||
|
|
||||||
|
### Schritt 2: Projekt einfügen
|
||||||
|
|
||||||
|
```sql
|
||||||
|
INSERT INTO project (
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
content,
|
||||||
|
category,
|
||||||
|
tags,
|
||||||
|
featured,
|
||||||
|
published,
|
||||||
|
live,
|
||||||
|
date,
|
||||||
|
difficulty,
|
||||||
|
"timeToComplete",
|
||||||
|
technologies,
|
||||||
|
challenges,
|
||||||
|
"lessonsLearned",
|
||||||
|
"futureImprovements",
|
||||||
|
"colorScheme",
|
||||||
|
accessibility,
|
||||||
|
performance,
|
||||||
|
analytics,
|
||||||
|
"createdAt",
|
||||||
|
"updatedAt"
|
||||||
|
) VALUES (
|
||||||
|
'Kernel Panic 404 - Interactive Terminal',
|
||||||
|
'An interactive terminal-style 404 page with a fully functional command line, file system navigation, and Easter eggs inspired by Stranger Things, Mr. Robot, and Hitchhiker's Guide to the Galaxy.',
|
||||||
|
'# Kernel Panic 404 - Interactive Terminal...',
|
||||||
|
'Web Development',
|
||||||
|
ARRAY['Next.js', 'React', 'TypeScript', 'Terminal', '404', 'Interactive', 'Easter Eggs'],
|
||||||
|
true,
|
||||||
|
true,
|
||||||
|
'/404',
|
||||||
|
'2025-01-09',
|
||||||
|
'INTERMEDIATE',
|
||||||
|
'1-2 weeks',
|
||||||
|
ARRAY['Next.js', 'React', 'TypeScript', 'CSS', 'Web Audio API'],
|
||||||
|
ARRAY['Terminal emulator implementation', 'File system state management', 'Command parsing and execution'],
|
||||||
|
ARRAY['Building interactive UIs', 'Web Audio API usage', 'Complex state management'],
|
||||||
|
ARRAY['More Easter eggs', 'Additional visual effects', 'Sound theme variations'],
|
||||||
|
'Retro terminal green on black',
|
||||||
|
true,
|
||||||
|
'{"lighthouse": 0, "bundleSize": "0KB", "loadTime": "0s"}'::json,
|
||||||
|
'{"views": 0, "likes": 0, "shares": 0}'::json,
|
||||||
|
NOW(),
|
||||||
|
NOW()
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Option 4: Seed-Script ausführen (⚠️ Achtung: Löscht alle Projekte!)
|
||||||
|
|
||||||
|
**WARNUNG**: Das Seed-Script löscht alle bestehenden Projekte und erstellt sie neu!
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Im Production-Container:
|
||||||
|
docker exec -it portfolio-app npm run seed
|
||||||
|
|
||||||
|
# Oder lokal, wenn du Zugriff auf die Production-DB hast:
|
||||||
|
DATABASE_URL="postgresql://portfolio_user:portfolio_pass@your-production-db:5432/portfolio_db" npm run seed
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ Verifizierung
|
||||||
|
|
||||||
|
Nach dem Hinzufügen des Projekts:
|
||||||
|
|
||||||
|
1. **Projekte-Seite prüfen**: Gehe zu `https://dk0.dev/projects`
|
||||||
|
- Das Projekt sollte in der Liste erscheinen
|
||||||
|
- Es sollte als "Featured" markiert sein
|
||||||
|
|
||||||
|
2. **Projekt-Detail-Seite prüfen**:
|
||||||
|
- Klicke auf das Projekt
|
||||||
|
- Die Detail-Seite sollte alle Informationen anzeigen
|
||||||
|
|
||||||
|
3. **404-Seite testen**:
|
||||||
|
- Gehe zu `https://dk0.dev/404` oder einer nicht existierenden Route
|
||||||
|
- Die Terminal-404-Seite sollte erscheinen
|
||||||
|
|
||||||
|
4. **Footer-Link prüfen**:
|
||||||
|
- Scrolle zum Footer
|
||||||
|
- Der "404" Link sollte sichtbar sein
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 Troubleshooting
|
||||||
|
|
||||||
|
### Problem: Projekt erscheint nicht
|
||||||
|
|
||||||
|
**Lösung:**
|
||||||
|
1. Prüfe, ob `published: true` gesetzt ist
|
||||||
|
2. Prüfe die Datenbank direkt: `SELECT * FROM project WHERE title LIKE '%404%';`
|
||||||
|
3. Prüfe die Browser-Konsole auf Fehler
|
||||||
|
4. Leere den Cache: `docker exec portfolio-app npm run build`
|
||||||
|
|
||||||
|
### Problem: Editor funktioniert nicht
|
||||||
|
|
||||||
|
**Lösung:**
|
||||||
|
1. Prüfe, ob du eingeloggt bist (`/manage`)
|
||||||
|
2. Prüfe die Admin-Credentials in den Environment Variables
|
||||||
|
3. Prüfe die Browser-Konsole auf Fehler
|
||||||
|
|
||||||
|
### Problem: 404-Seite zeigt nicht die Terminal-Seite
|
||||||
|
|
||||||
|
**Lösung:**
|
||||||
|
1. Prüfe, ob `app/not-found.tsx` existiert
|
||||||
|
2. Prüfe, ob `app/components/KernelPanic404.tsx` existiert
|
||||||
|
3. Baue die App neu: `npm run build`
|
||||||
|
4. Prüfe die Browser-Konsole auf Fehler
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📝 Quick Reference
|
||||||
|
|
||||||
|
**Editor URL**: `https://dk0.dev/editor`
|
||||||
|
**Admin Dashboard**: `https://dk0.dev/manage`
|
||||||
|
**404-Seite**: `https://dk0.dev/404` oder jede nicht existierende Route
|
||||||
|
**Projekte-Seite**: `https://dk0.dev/projects`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Empfohlener Workflow
|
||||||
|
|
||||||
|
1. **Lokal testen**: Füge das Projekt lokal hinzu und teste es
|
||||||
|
2. **Auf Staging deployen**: Teste auf `dev.dk0.dev`
|
||||||
|
3. **Auf Production deployen**: Wenn alles funktioniert, auf `dk0.dev` deployen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Happy coding! 🚀
|
||||||
Reference in New Issue
Block a user