Merge branch 'cursor/aktivit-ts-feed-neulade-anzeige-00e6' into dev_test
Co-authored-by: dennis <dennis@konkol.net>
This commit is contained in:
Cursor Agent
@@ -1,16 +1,16 @@
|
||||
name: Dev Deployment (Zero Downtime)
|
||||
name: Testing Deployment (Zero Downtime)
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ dev ]
|
||||
branches: [ testing ]
|
||||
|
||||
env:
|
||||
NODE_VERSION: '20'
|
||||
DOCKER_IMAGE: portfolio-app
|
||||
IMAGE_TAG: staging
|
||||
IMAGE_TAG: testing
|
||||
|
||||
jobs:
|
||||
deploy-dev:
|
||||
deploy-testing:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout code
|
||||
@@ -38,7 +38,7 @@ jobs:
|
||||
|
||||
- name: Build Docker image
|
||||
run: |
|
||||
echo "🏗️ Building dev Docker image with BuildKit cache..."
|
||||
echo "🏗️ Building testing Docker image with BuildKit cache..."
|
||||
DOCKER_BUILDKIT=1 docker build \
|
||||
--cache-from ${{ env.DOCKER_IMAGE }}:${{ env.IMAGE_TAG }} \
|
||||
--cache-from ${{ env.DOCKER_IMAGE }}:latest \
|
||||
@@ -46,12 +46,12 @@ jobs:
|
||||
.
|
||||
echo "✅ Docker image built successfully"
|
||||
|
||||
- name: Zero-Downtime Dev Deployment
|
||||
- name: Zero-Downtime Testing Deployment
|
||||
run: |
|
||||
echo "🚀 Starting zero-downtime dev deployment..."
|
||||
echo "🚀 Starting zero-downtime testing deployment..."
|
||||
|
||||
COMPOSE_FILE="docker-compose.staging.yml"
|
||||
CONTAINER_NAME="portfolio-app-staging"
|
||||
COMPOSE_FILE="docker-compose.testing.yml"
|
||||
CONTAINER_NAME="portfolio-app-testing"
|
||||
HEALTH_PORT="3002"
|
||||
|
||||
# Backup current container ID if running
|
||||
@@ -59,7 +59,7 @@ jobs:
|
||||
|
||||
# Start new container with updated image
|
||||
echo "🆕 Starting new dev container..."
|
||||
docker compose -f $COMPOSE_FILE up -d --no-deps --build portfolio-staging
|
||||
docker compose -f $COMPOSE_FILE up -d --no-deps --build portfolio-testing
|
||||
|
||||
# Wait for new container to be healthy
|
||||
echo "⏳ Waiting for new container to be healthy..."
|
||||
@@ -84,8 +84,8 @@ jobs:
|
||||
|
||||
# Verify new container is working
|
||||
if ! curl -f http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
|
||||
echo "⚠️ New dev container health check failed, but continuing (non-blocking)..."
|
||||
docker compose -f $COMPOSE_FILE logs --tail=50 portfolio-staging
|
||||
echo "⚠️ New testing container health check failed, but continuing (non-blocking)..."
|
||||
docker compose -f $COMPOSE_FILE logs --tail=50 portfolio-testing
|
||||
fi
|
||||
|
||||
# Remove old container if it exists and is different
|
||||
@@ -98,32 +98,33 @@ jobs:
|
||||
fi
|
||||
fi
|
||||
|
||||
echo "✅ Dev deployment completed!"
|
||||
echo "✅ Testing deployment completed!"
|
||||
env:
|
||||
NODE_ENV: staging
|
||||
NODE_ENV: production
|
||||
LOG_LEVEL: ${{ vars.LOG_LEVEL || 'debug' }}
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_TESTING || 'https://testing.dk0.dev' }}
|
||||
MY_EMAIL: ${{ vars.MY_EMAIL }}
|
||||
MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
|
||||
MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
|
||||
MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
|
||||
ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
|
||||
ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
|
||||
N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
|
||||
N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
|
||||
|
||||
- name: Dev Health Check
|
||||
- name: Testing Health Check
|
||||
run: |
|
||||
echo "🔍 Running dev health checks..."
|
||||
echo "🔍 Running testing health checks..."
|
||||
for i in {1..20}; do
|
||||
if curl -f http://localhost:3002/api/health && curl -f http://localhost:3002/ > /dev/null; then
|
||||
echo "✅ Dev is fully operational!"
|
||||
echo "✅ Testing is fully operational!"
|
||||
exit 0
|
||||
fi
|
||||
echo "⏳ Waiting for dev... ($i/20)"
|
||||
echo "⏳ Waiting for testing... ($i/20)"
|
||||
sleep 3
|
||||
done
|
||||
echo "⚠️ Dev health check failed, but continuing (non-blocking)..."
|
||||
docker compose -f docker-compose.staging.yml logs --tail=50
|
||||
echo "⚠️ Testing health check failed, but continuing (non-blocking)..."
|
||||
docker compose -f docker-compose.testing.yml logs --tail=50
|
||||
|
||||
- name: Cleanup
|
||||
run: |
|
||||
|
||||
@@ -69,6 +69,7 @@ jobs:
|
||||
export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
|
||||
export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
|
||||
export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
|
||||
export ADMIN_SESSION_SECRET="${{ secrets.ADMIN_SESSION_SECRET }}"
|
||||
|
||||
# Start new container with updated image (docker-compose will handle this)
|
||||
echo "🆕 Starting new production container..."
|
||||
@@ -196,12 +197,13 @@ jobs:
|
||||
env:
|
||||
NODE_ENV: production
|
||||
LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || 'https://dk0.dev' }}
|
||||
MY_EMAIL: ${{ vars.MY_EMAIL }}
|
||||
MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
|
||||
MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
|
||||
MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
|
||||
ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
|
||||
ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
|
||||
N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
|
||||
N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
|
||||
N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
|
||||
|
||||
@@ -66,6 +66,7 @@ RUN adduser --system --uid 1001 nextjs
|
||||
|
||||
# Copy the built application
|
||||
COPY --from=builder /app/public ./public
|
||||
COPY --from=builder /app/scripts ./scripts
|
||||
|
||||
# Set the correct permission for prerender cache
|
||||
RUN mkdir .next
|
||||
@@ -82,6 +83,8 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||
# Copy Prisma files
|
||||
COPY --from=builder /app/prisma ./prisma
|
||||
COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
|
||||
COPY --from=builder /app/node_modules/prisma ./node_modules/prisma
|
||||
COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
|
||||
|
||||
# Note: Environment variables should be passed via docker-compose or runtime environment
|
||||
# DO NOT copy .env files into the image for security reasons
|
||||
@@ -97,4 +100,4 @@ ENV HOSTNAME="0.0.0.0"
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD curl -f http://localhost:3000/api/health || exit 1
|
||||
|
||||
CMD ["node", "server.js"]
|
||||
CMD ["node", "scripts/start-with-migrate.js"]
|
||||
@@ -10,12 +10,12 @@ In Gitea kannst du **Variables** (öffentlich) und **Secrets** (verschlüsselt)
|
||||
2. Klicke auf **Settings** (Einstellungen)
|
||||
3. Klicke auf **Variables** oder **Secrets** im linken Menü
|
||||
|
||||
## 🔑 Variablen für Production Branch
|
||||
## 🔑 Variablen für Production Branch (`production` → `dk0.dev`)
|
||||
|
||||
Für den `production` Branch brauchst du:
|
||||
|
||||
### Variables (öffentlich sichtbar):
|
||||
- `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev`
|
||||
- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
|
||||
- `MY_EMAIL` = `contact@dk0.dev` (oder deine Email)
|
||||
- `MY_INFO_EMAIL` = `info@dk0.dev` (oder deine Info-Email)
|
||||
- `LOG_LEVEL` = `info`
|
||||
@@ -25,14 +25,15 @@ Für den `production` Branch brauchst du:
|
||||
- `MY_PASSWORD` = Dein Email-Passwort
|
||||
- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort
|
||||
- `ADMIN_BASIC_AUTH` = `admin:dein_sicheres_passwort`
|
||||
- `ADMIN_SESSION_SECRET` = zufälliger Secret (mind. 32 Zeichen)
|
||||
- `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
|
||||
|
||||
## 🧪 Variablen für Dev Branch
|
||||
|
||||
Für den `dev` Branch brauchst du die **gleichen** Variablen, aber mit anderen Werten:
|
||||
Für den `testing` Branch brauchst du die **gleichen** Variablen, aber mit anderen Werten:
|
||||
|
||||
### Variables:
|
||||
- `NEXT_PUBLIC_BASE_URL` = `https://dev.dk0.dev` ⚠️ **WICHTIG: Andere URL!**
|
||||
- `NEXT_PUBLIC_BASE_URL_TESTING` = `https://testing.dk0.dev` ⚠️ **WICHTIG: Andere URL!**
|
||||
- `MY_EMAIL` = `contact@dk0.dev` (kann gleich sein)
|
||||
- `MY_INFO_EMAIL` = `info@dk0.dev` (kann gleich sein)
|
||||
- `LOG_LEVEL` = `debug` (für Dev mehr Logging)
|
||||
@@ -41,7 +42,8 @@ Für den `dev` Branch brauchst du die **gleichen** Variablen, aber mit anderen W
|
||||
### Secrets:
|
||||
- `MY_PASSWORD` = Dein Email-Passwort (kann gleich sein)
|
||||
- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort (kann gleich sein)
|
||||
- `ADMIN_BASIC_AUTH` = `admin:staging_password` (kann anders sein)
|
||||
- `ADMIN_BASIC_AUTH` = `admin:testing_password` (kann anders sein)
|
||||
- `ADMIN_SESSION_SECRET` = zufälliger Secret (mind. 32 Zeichen; kann gleich sein)
|
||||
- `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
|
||||
|
||||
## ✅ Lösung: Automatische Branch-Erkennung
|
||||
@@ -54,38 +56,27 @@ Die Workflows triggern auf unterschiedlichen Branches und verwenden automatisch
|
||||
|
||||
**Production Workflow** (`.gitea/workflows/production-deploy.yml`):
|
||||
- Triggert nur auf `production` Branch
|
||||
- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dk0.dev`
|
||||
- Verwendet: `NEXT_PUBLIC_BASE_URL_PRODUCTION` (wenn gesetzt) oder Default: `https://dk0.dev`
|
||||
|
||||
**Dev Workflow** (`.gitea/workflows/dev-deploy.yml`):
|
||||
- Triggert nur auf `dev` Branch
|
||||
- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dev.dk0.dev`
|
||||
**Testing Workflow** (`.gitea/workflows/dev-deploy.yml`):
|
||||
- Triggert nur auf `testing` Branch
|
||||
- Verwendet: `NEXT_PUBLIC_BASE_URL_TESTING` (wenn gesetzt) oder Default: `https://testing.dk0.dev`
|
||||
|
||||
**Das bedeutet:**
|
||||
- Du setzt **eine** Variable `NEXT_PUBLIC_BASE_URL` in Gitea
|
||||
- **Production Branch** → verwendet diese Variable (oder Default `https://dk0.dev`)
|
||||
- **Dev Branch** → verwendet diese Variable (oder Default `https://dev.dk0.dev`)
|
||||
- Du setzt **zwei** Variablen in Gitea (empfohlen, weil Gitea nicht branch-spezifisch scoped):
|
||||
- `NEXT_PUBLIC_BASE_URL_PRODUCTION`
|
||||
- `NEXT_PUBLIC_BASE_URL_TESTING`
|
||||
|
||||
### ⚠️ WICHTIG:
|
||||
|
||||
Da beide Workflows die **gleiche Variable** verwenden, aber unterschiedliche Defaults haben:
|
||||
|
||||
**Option 1: Variable NICHT setzen (Empfohlen)**
|
||||
- Production verwendet automatisch: `https://dk0.dev`
|
||||
- Dev verwendet automatisch: `https://dev.dk0.dev`
|
||||
- ✅ Funktioniert perfekt ohne Konfiguration!
|
||||
|
||||
**Option 2: Variable setzen**
|
||||
- Wenn du `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev` setzt
|
||||
- Dann verwendet **beide** Branches diese URL (nicht ideal für Dev)
|
||||
- ⚠️ Nicht empfohlen, da Dev dann die Production-URL verwendet
|
||||
Gitea kann Variablen/Secrets nicht pro Branch trennen. Darum nutzen wir **separate Variablennamen** für Production und Testing.
|
||||
|
||||
## ✅ Empfohlene Konfiguration
|
||||
|
||||
### ⭐ Einfachste Lösung: NICHTS setzen!
|
||||
### ⭐ Einfachste Lösung: nur URLs setzen (optional)
|
||||
|
||||
Die Workflows haben bereits die richtigen Defaults:
|
||||
- **Production Branch** → automatisch `https://dk0.dev`
|
||||
- **Dev Branch** → automatisch `https://dev.dk0.dev`
|
||||
- **Testing Branch** → automatisch `https://testing.dk0.dev`
|
||||
|
||||
Du musst **NICHTS** in Gitea setzen, es funktioniert automatisch!
|
||||
|
||||
@@ -100,10 +91,12 @@ Du musst **NICHTS** in Gitea setzen, es funktioniert automatisch!
|
||||
- `MY_PASSWORD` = Dein Email-Passwort
|
||||
- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort
|
||||
- `ADMIN_BASIC_AUTH` = `admin:dein_passwort`
|
||||
- `ADMIN_SESSION_SECRET` = zufälliger Secret (mind. 32 Zeichen)
|
||||
- `N8N_SECRET_TOKEN` = Dein n8n Token (optional)
|
||||
|
||||
**⚠️ NICHT setzen:**
|
||||
- `NEXT_PUBLIC_BASE_URL` - Lass diese Variable leer, damit jeder Branch seinen eigenen Default verwendet!
|
||||
**Optional setzen:**
|
||||
- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
|
||||
- `NEXT_PUBLIC_BASE_URL_TESTING` = `https://testing.dk0.dev`
|
||||
|
||||
## 📝 Schritt-für-Schritt Anleitung
|
||||
|
||||
@@ -116,11 +109,17 @@ https://git.dk0.dev/denshooter/portfolio/settings
|
||||
|
||||
### 3. Für Variables (öffentlich):
|
||||
- Klicke auf **"New Variable"**
|
||||
- **Name:** `NEXT_PUBLIC_BASE_URL`
|
||||
- **Value:** `https://dk0.dev` (für Production)
|
||||
- **Name:** `NEXT_PUBLIC_BASE_URL_PRODUCTION`
|
||||
- **Value:** `https://dk0.dev`
|
||||
- **Protect:** ✅ (optional, schützt vor Änderungen)
|
||||
- Klicke **"Add Variable"**
|
||||
|
||||
- Klicke auf **"New Variable"**
|
||||
- **Name:** `NEXT_PUBLIC_BASE_URL_TESTING`
|
||||
- **Value:** `https://testing.dk0.dev`
|
||||
- **Protect:** ✅ (optional)
|
||||
- Klicke **"Add Variable"**
|
||||
|
||||
### 4. Für Secrets (verschlüsselt):
|
||||
- Klicke auf **"New Secret"**
|
||||
- **Name:** `MY_PASSWORD`
|
||||
@@ -133,53 +132,22 @@ Die Workflows verwenden diese einfache Logik:
|
||||
|
||||
```yaml
|
||||
# Production Workflow (triggert nur auf production branch)
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || 'https://dk0.dev' }}
|
||||
|
||||
# Dev Workflow (triggert nur auf dev branch)
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
|
||||
# Testing Workflow (triggert nur auf testing branch)
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_TESTING || 'https://testing.dk0.dev' }}
|
||||
```
|
||||
|
||||
**Das bedeutet:**
|
||||
- Jeder Workflow hat seinen **eigenen Default**
|
||||
- Wenn `NEXT_PUBLIC_BASE_URL` in Gitea gesetzt ist, wird diese verwendet
|
||||
- Wenn die jeweilige Variable (`NEXT_PUBLIC_BASE_URL_PRODUCTION` / `NEXT_PUBLIC_BASE_URL_TESTING`) in Gitea gesetzt ist, wird diese verwendet
|
||||
- Wenn **nicht** gesetzt, verwendet jeder Branch seinen eigenen Default
|
||||
|
||||
**⭐ Beste Lösung:**
|
||||
- **NICHT** `NEXT_PUBLIC_BASE_URL` in Gitea setzen
|
||||
- Dann verwendet Production automatisch `https://dk0.dev`
|
||||
- Und Dev verwendet automatisch `https://dev.dk0.dev`
|
||||
- ✅ Perfekt getrennt, ohne Konfiguration!
|
||||
- Setze `NEXT_PUBLIC_BASE_URL_PRODUCTION` und `NEXT_PUBLIC_BASE_URL_TESTING` (oder lass beide weg und nutze Defaults).
|
||||
|
||||
## 🎯 Best Practice
|
||||
|
||||
1. **Production:** Setze alle Variablen explizit in Gitea
|
||||
2. **Dev:** Nutze die Defaults im Workflow (oder setze separate Variablen)
|
||||
3. **Secrets:** Immer in Gitea Secrets setzen, nie in Code!
|
||||
|
||||
## 🔍 Prüfen ob Variablen gesetzt sind
|
||||
|
||||
In den Workflow-Logs siehst du:
|
||||
```
|
||||
📝 Using Gitea Variables and Secrets:
|
||||
- NEXT_PUBLIC_BASE_URL: https://dk0.dev
|
||||
```
|
||||
|
||||
Wenn eine Variable fehlt, wird der Default verwendet.
|
||||
|
||||
## ⚙️ Alternative: Environment-spezifische Variablen
|
||||
|
||||
Falls du separate Variablen für Dev und Production willst, können wir die Workflows anpassen:
|
||||
|
||||
```yaml
|
||||
# Production
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || 'https://dk0.dev' }}
|
||||
|
||||
# Dev
|
||||
NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || 'https://dev.dk0.dev' }}
|
||||
```
|
||||
|
||||
Dann könntest du setzen:
|
||||
- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
|
||||
- `NEXT_PUBLIC_BASE_URL_DEV` = `https://dev.dk0.dev`
|
||||
|
||||
Soll ich die Workflows entsprechend anpassen?
|
||||
1. **Production (`production`)**: `docker-compose.production.yml` → Port 3000 → NPM Host `dk0.dev`
|
||||
2. **Testing (`testing`)**: `docker-compose.testing.yml` → Port 3002 → NPM Host `testing.dk0.dev`
|
||||
3. **Secrets**: immer als Gitea Secrets, nie im Code
|
||||
|
||||
@@ -48,8 +48,10 @@ npm run start # Production Server
|
||||
## 📖 Dokumentation
|
||||
|
||||
- [Development Setup](DEV-SETUP.md) - Detaillierte Setup-Anleitung
|
||||
- [Deployment Guide](DEPLOYMENT.md) - Production Deployment
|
||||
- [Deployment Setup](DEPLOYMENT_SETUP.md) - Production Deployment
|
||||
- [Analytics](ANALYTICS.md) - Analytics und Performance
|
||||
- [CMS Guide](docs/CMS_GUIDE.md) - Inhalte/Sprachen pflegen (Rich Text)
|
||||
- [Testing & Deployment](docs/TESTING_AND_DEPLOYMENT.md) - Branches → Container → Domains
|
||||
|
||||
## 🔗 Links
|
||||
|
||||
|
||||
27
app/[locale]/layout.tsx
Normal file
27
app/[locale]/layout.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { NextIntlClientProvider } from "next-intl";
|
||||
import { setRequestLocale } from "next-intl/server";
|
||||
import React from "react";
|
||||
import ConsentBanner from "../components/ConsentBanner";
|
||||
|
||||
export default async function LocaleLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
params: Promise<{ locale: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
// Ensure next-intl actually uses the route segment locale for this request.
|
||||
setRequestLocale(locale);
|
||||
// Load messages explicitly by route locale to avoid falling back to the wrong
|
||||
// language when request-level locale detection is unavailable/misconfigured.
|
||||
const messages = (await import(`../../messages/${locale}.json`)).default;
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
{children}
|
||||
<ConsentBanner />
|
||||
</NextIntlClientProvider>
|
||||
);
|
||||
}
|
||||
|
||||
19
app/[locale]/legal-notice/page.tsx
Normal file
19
app/[locale]/legal-notice/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
|
||||
export { default } from "../../legal-notice/page";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const languages = getLanguageAlternates({ pathWithoutLocale: "legal-notice" });
|
||||
return {
|
||||
alternates: {
|
||||
canonical: toAbsoluteUrl(`/${locale}/legal-notice`),
|
||||
languages,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
23
app/[locale]/page.tsx
Normal file
23
app/[locale]/page.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import HomePage from "../_ui/HomePage";
|
||||
import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const languages = getLanguageAlternates({ pathWithoutLocale: "" });
|
||||
return {
|
||||
alternates: {
|
||||
canonical: toAbsoluteUrl(`/${locale}`),
|
||||
languages,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default function Page() {
|
||||
return <HomePage />;
|
||||
}
|
||||
|
||||
19
app/[locale]/privacy-policy/page.tsx
Normal file
19
app/[locale]/privacy-policy/page.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import type { Metadata } from "next";
|
||||
import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
|
||||
export { default } from "../../privacy-policy/page";
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const languages = getLanguageAlternates({ pathWithoutLocale: "privacy-policy" });
|
||||
return {
|
||||
alternates: {
|
||||
canonical: toAbsoluteUrl(`/${locale}/privacy-policy`),
|
||||
languages,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
53
app/[locale]/projects/[slug]/page.tsx
Normal file
53
app/[locale]/projects/[slug]/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import ProjectDetailClient from "@/app/_ui/ProjectDetailClient";
|
||||
import { notFound } from "next/navigation";
|
||||
import type { Metadata } from "next";
|
||||
import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
|
||||
|
||||
export const revalidate = 300;
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; slug: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale, slug } = await params;
|
||||
const languages = getLanguageAlternates({ pathWithoutLocale: `projects/${slug}` });
|
||||
return {
|
||||
alternates: {
|
||||
canonical: toAbsoluteUrl(`/${locale}/projects/${slug}`),
|
||||
languages,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProjectPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; slug: string }>;
|
||||
}) {
|
||||
const { locale, slug } = await params;
|
||||
|
||||
const project = await prisma.project.findFirst({
|
||||
where: { slug, published: true },
|
||||
include: {
|
||||
translations: {
|
||||
where: { locale },
|
||||
select: { title: true, description: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (!project) return notFound();
|
||||
|
||||
const tr = project.translations?.[0];
|
||||
const { translations: _translations, ...rest } = project;
|
||||
const localized = {
|
||||
...rest,
|
||||
title: tr?.title ?? project.title,
|
||||
description: tr?.description ?? project.description,
|
||||
};
|
||||
|
||||
return <ProjectDetailClient project={localized} locale={locale} />;
|
||||
}
|
||||
|
||||
53
app/[locale]/projects/page.tsx
Normal file
53
app/[locale]/projects/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import ProjectsPageClient from "@/app/_ui/ProjectsPageClient";
|
||||
import type { Metadata } from "next";
|
||||
import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
|
||||
|
||||
export const revalidate = 300;
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { locale } = await params;
|
||||
const languages = getLanguageAlternates({ pathWithoutLocale: "projects" });
|
||||
return {
|
||||
alternates: {
|
||||
canonical: toAbsoluteUrl(`/${locale}/projects`),
|
||||
languages,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function ProjectsPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>;
|
||||
}) {
|
||||
const { locale } = await params;
|
||||
|
||||
const projects = await prisma.project.findMany({
|
||||
where: { published: true },
|
||||
orderBy: { createdAt: "desc" },
|
||||
include: {
|
||||
translations: {
|
||||
where: { locale },
|
||||
select: { title: true, description: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const localized = projects.map((p) => {
|
||||
const tr = p.translations?.[0];
|
||||
const { translations: _translations, ...rest } = p;
|
||||
return {
|
||||
...rest,
|
||||
title: tr?.title ?? p.title,
|
||||
description: tr?.description ?? p.description,
|
||||
};
|
||||
});
|
||||
|
||||
return <ProjectsPageClient projects={localized} locale={locale} />;
|
||||
}
|
||||
|
||||
@@ -1,43 +1,27 @@
|
||||
import { GET } from '@/app/api/fetchAllProjects/route';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
// Wir mocken node-fetch direkt
|
||||
jest.mock('node-fetch', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(() =>
|
||||
Promise.resolve({
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
posts: [
|
||||
jest.mock('@/lib/prisma', () => ({
|
||||
prisma: {
|
||||
project: {
|
||||
findMany: jest.fn(async () => [
|
||||
{
|
||||
id: '67ac8dfa709c60000117d312',
|
||||
title: 'Just Doing Some Testing',
|
||||
meta_description: 'Hello bla bla bla bla',
|
||||
id: 1,
|
||||
slug: 'just-doing-some-testing',
|
||||
updated_at: '2025-02-13T14:25:38.000+00:00',
|
||||
title: 'Just Doing Some Testing',
|
||||
updatedAt: new Date('2025-02-13T14:25:38.000Z'),
|
||||
metaDescription: 'Hello bla bla bla bla',
|
||||
},
|
||||
{
|
||||
id: '67aaffc3709c60000117d2d9',
|
||||
title: 'Blockchain Based Voting System',
|
||||
meta_description:
|
||||
'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
|
||||
id: 2,
|
||||
slug: 'blockchain-based-voting-system',
|
||||
updated_at: '2025-02-13T16:54:42.000+00:00',
|
||||
title: 'Blockchain Based Voting System',
|
||||
updatedAt: new Date('2025-02-13T16:54:42.000Z'),
|
||||
metaDescription:
|
||||
'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
|
||||
},
|
||||
],
|
||||
meta: {
|
||||
pagination: {
|
||||
limit: 'all',
|
||||
next: null,
|
||||
page: 1,
|
||||
pages: 1,
|
||||
prev: null,
|
||||
total: 2,
|
||||
]),
|
||||
},
|
||||
},
|
||||
}),
|
||||
})
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('next/server', () => ({
|
||||
@@ -47,12 +31,8 @@ jest.mock('next/server', () => ({
|
||||
}));
|
||||
|
||||
describe('GET /api/fetchAllProjects', () => {
|
||||
beforeAll(() => {
|
||||
process.env.GHOST_API_URL = 'http://localhost:2368';
|
||||
process.env.GHOST_API_KEY = 'some-key';
|
||||
});
|
||||
|
||||
it('should return a list of projects (partial match)', async () => {
|
||||
const { GET } = await import('@/app/api/fetchAllProjects/route');
|
||||
await GET();
|
||||
|
||||
// Den tatsächlichen Argumentwert extrahieren
|
||||
@@ -61,11 +41,11 @@ describe('GET /api/fetchAllProjects', () => {
|
||||
expect(responseArg).toMatchObject({
|
||||
posts: expect.arrayContaining([
|
||||
expect.objectContaining({
|
||||
id: '67ac8dfa709c60000117d312',
|
||||
id: '1',
|
||||
title: 'Just Doing Some Testing',
|
||||
}),
|
||||
expect.objectContaining({
|
||||
id: '67aaffc3709c60000117d2d9',
|
||||
id: '2',
|
||||
title: 'Blockchain Based Voting System',
|
||||
}),
|
||||
]),
|
||||
|
||||
@@ -1,26 +1,23 @@
|
||||
import { GET } from '@/app/api/fetchProject/route';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
|
||||
// Mock node-fetch so the route uses it as a reliable fallback
|
||||
jest.mock('node-fetch', () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
posts: [
|
||||
{
|
||||
id: '67aaffc3709c60000117d2d9',
|
||||
jest.mock('@/lib/prisma', () => ({
|
||||
prisma: {
|
||||
project: {
|
||||
findUnique: jest.fn(async ({ where }: { where: { slug: string } }) => {
|
||||
if (where.slug !== 'blockchain-based-voting-system') return null;
|
||||
return {
|
||||
id: 2,
|
||||
title: 'Blockchain Based Voting System',
|
||||
meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
|
||||
metaDescription:
|
||||
'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
|
||||
slug: 'blockchain-based-voting-system',
|
||||
updated_at: '2025-02-13T16:54:42.000+00:00',
|
||||
},
|
||||
],
|
||||
updatedAt: new Date('2025-02-13T16:54:42.000Z'),
|
||||
description: null,
|
||||
content: null,
|
||||
};
|
||||
}),
|
||||
})
|
||||
),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('next/server', () => ({
|
||||
@@ -29,12 +26,8 @@ jest.mock('next/server', () => ({
|
||||
},
|
||||
}));
|
||||
describe('GET /api/fetchProject', () => {
|
||||
beforeAll(() => {
|
||||
process.env.GHOST_API_URL = 'http://localhost:2368';
|
||||
process.env.GHOST_API_KEY = 'some-key';
|
||||
});
|
||||
|
||||
it('should fetch a project by slug', async () => {
|
||||
const { GET } = await import('@/app/api/fetchProject/route');
|
||||
const mockRequest = {
|
||||
url: 'http://localhost/api/fetchProject?slug=blockchain-based-voting-system',
|
||||
} as unknown as NextRequest;
|
||||
@@ -44,11 +37,11 @@ describe('GET /api/fetchProject', () => {
|
||||
expect(NextResponse.json).toHaveBeenCalledWith({
|
||||
posts: [
|
||||
{
|
||||
id: '67aaffc3709c60000117d2d9',
|
||||
id: '2',
|
||||
title: 'Blockchain Based Voting System',
|
||||
meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
|
||||
slug: 'blockchain-based-voting-system',
|
||||
updated_at: '2025-02-13T16:54:42.000+00:00',
|
||||
updated_at: '2025-02-13T16:54:42.000Z',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@@ -34,77 +34,38 @@ jest.mock("next/server", () => {
|
||||
};
|
||||
});
|
||||
|
||||
import { GET } from "@/app/api/sitemap/route";
|
||||
|
||||
// Mock node-fetch so we don't perform real network requests in tests
|
||||
jest.mock("node-fetch", () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn(() =>
|
||||
Promise.resolve({
|
||||
ok: true,
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
posts: [
|
||||
jest.mock("@/lib/sitemap", () => ({
|
||||
getSitemapEntries: jest.fn(async () => [
|
||||
{
|
||||
id: "67ac8dfa709c60000117d312",
|
||||
title: "Just Doing Some Testing",
|
||||
meta_description: "Hello bla bla bla bla",
|
||||
slug: "just-doing-some-testing",
|
||||
updated_at: "2025-02-13T14:25:38.000+00:00",
|
||||
url: "https://dki.one/en",
|
||||
lastModified: "2025-01-01T00:00:00.000Z",
|
||||
},
|
||||
{
|
||||
id: "67aaffc3709c60000117d2d9",
|
||||
title: "Blockchain Based Voting System",
|
||||
meta_description:
|
||||
"This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
|
||||
slug: "blockchain-based-voting-system",
|
||||
updated_at: "2025-02-13T16:54:42.000+00:00",
|
||||
url: "https://dki.one/de",
|
||||
lastModified: "2025-01-01T00:00:00.000Z",
|
||||
},
|
||||
],
|
||||
meta: {
|
||||
pagination: {
|
||||
limit: "all",
|
||||
next: null,
|
||||
page: 1,
|
||||
pages: 1,
|
||||
prev: null,
|
||||
total: 2,
|
||||
{
|
||||
url: "https://dki.one/en/projects/blockchain-based-voting-system",
|
||||
lastModified: "2025-02-13T16:54:42.000Z",
|
||||
},
|
||||
{
|
||||
url: "https://dki.one/de/projects/blockchain-based-voting-system",
|
||||
lastModified: "2025-02-13T16:54:42.000Z",
|
||||
},
|
||||
}),
|
||||
}),
|
||||
]),
|
||||
generateSitemapXml: jest.fn(
|
||||
() =>
|
||||
'<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
|
||||
),
|
||||
}));
|
||||
|
||||
describe("GET /api/sitemap", () => {
|
||||
beforeAll(() => {
|
||||
process.env.GHOST_API_URL = "http://localhost:2368";
|
||||
process.env.GHOST_API_KEY = "test-api-key";
|
||||
process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
|
||||
|
||||
// Provide mock posts via env so route can use them without fetching
|
||||
process.env.GHOST_MOCK_POSTS = JSON.stringify({
|
||||
posts: [
|
||||
{
|
||||
id: "67ac8dfa709c60000117d312",
|
||||
title: "Just Doing Some Testing",
|
||||
meta_description: "Hello bla bla bla bla",
|
||||
slug: "just-doing-some-testing",
|
||||
updated_at: "2025-02-13T14:25:38.000+00:00",
|
||||
},
|
||||
{
|
||||
id: "67aaffc3709c60000117d2d9",
|
||||
title: "Blockchain Based Voting System",
|
||||
meta_description:
|
||||
"This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
|
||||
slug: "blockchain-based-voting-system",
|
||||
updated_at: "2025-02-13T16:54:42.000+00:00",
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("should return a sitemap", async () => {
|
||||
const { GET } = await import("@/app/api/sitemap/route");
|
||||
const response = await GET();
|
||||
|
||||
// Get the body text from the NextResponse
|
||||
@@ -113,15 +74,7 @@ describe("GET /api/sitemap", () => {
|
||||
expect(body).toContain(
|
||||
'<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
|
||||
);
|
||||
expect(body).toContain("<loc>https://dki.one/</loc>");
|
||||
expect(body).toContain("<loc>https://dki.one/legal-notice</loc>");
|
||||
expect(body).toContain("<loc>https://dki.one/privacy-policy</loc>");
|
||||
expect(body).toContain(
|
||||
"<loc>https://dki.one/projects/just-doing-some-testing</loc>",
|
||||
);
|
||||
expect(body).toContain(
|
||||
"<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
|
||||
);
|
||||
expect(body).toContain("<loc>https://dki.one/en</loc>");
|
||||
// Note: Headers are not available in test environment
|
||||
});
|
||||
});
|
||||
|
||||
@@ -21,7 +21,7 @@ describe('Header', () => {
|
||||
it('renders the mobile header', () => {
|
||||
render(<Header />);
|
||||
// Check for mobile menu button (hamburger icon)
|
||||
const menuButton = screen.getByRole('button');
|
||||
const menuButton = screen.getByLabelText('Open menu');
|
||||
expect(menuButton).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,5 +1,4 @@
|
||||
import "@testing-library/jest-dom";
|
||||
import { GET } from "@/app/sitemap.xml/route";
|
||||
|
||||
jest.mock("next/server", () => ({
|
||||
NextResponse: jest.fn().mockImplementation((body: unknown, init?: ResponseInit) => {
|
||||
@@ -11,71 +10,32 @@ jest.mock("next/server", () => ({
|
||||
}),
|
||||
}));
|
||||
|
||||
// Sitemap XML used by node-fetch mock
|
||||
const sitemapXml = `
|
||||
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://dki.one/</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://dki.one/legal-notice</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://dki.one/privacy-policy</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://dki.one/projects/just-doing-some-testing</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://dki.one/projects/blockchain-based-voting-system</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
`;
|
||||
|
||||
// Mock node-fetch for sitemap endpoint (hoisted by Jest)
|
||||
jest.mock("node-fetch", () => ({
|
||||
__esModule: true,
|
||||
default: jest.fn((_url: string) =>
|
||||
Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) }),
|
||||
jest.mock("@/lib/sitemap", () => ({
|
||||
getSitemapEntries: jest.fn(async () => [
|
||||
{
|
||||
url: "https://dki.one/en",
|
||||
lastModified: "2025-01-01T00:00:00.000Z",
|
||||
},
|
||||
]),
|
||||
generateSitemapXml: jest.fn(
|
||||
() =>
|
||||
'<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
|
||||
),
|
||||
}));
|
||||
|
||||
describe("Sitemap Component", () => {
|
||||
beforeAll(() => {
|
||||
process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
|
||||
|
||||
// Provide sitemap XML directly so route uses it without fetching
|
||||
process.env.GHOST_MOCK_SITEMAP = sitemapXml;
|
||||
|
||||
// Mock global.fetch too, to avoid any network calls
|
||||
global.fetch = jest.fn().mockImplementation((url: string) => {
|
||||
if (url.includes("/api/sitemap")) {
|
||||
return Promise.resolve({
|
||||
ok: true,
|
||||
text: () => Promise.resolve(sitemapXml),
|
||||
});
|
||||
}
|
||||
return Promise.reject(new Error(`Unknown URL: ${url}`));
|
||||
});
|
||||
});
|
||||
|
||||
it("should render the sitemap XML", async () => {
|
||||
const { GET } = await import("@/app/sitemap.xml/route");
|
||||
const response = await GET();
|
||||
|
||||
expect(response.body).toContain(
|
||||
'<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
|
||||
);
|
||||
expect(response.body).toContain("<loc>https://dki.one/</loc>");
|
||||
expect(response.body).toContain("<loc>https://dki.one/legal-notice</loc>");
|
||||
expect(response.body).toContain(
|
||||
"<loc>https://dki.one/privacy-policy</loc>",
|
||||
);
|
||||
expect(response.body).toContain(
|
||||
"<loc>https://dki.one/projects/just-doing-some-testing</loc>",
|
||||
);
|
||||
expect(response.body).toContain(
|
||||
"<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
|
||||
);
|
||||
expect(response.body).toContain("<loc>https://dki.one/en</loc>");
|
||||
// Note: Headers are not available in test environment
|
||||
});
|
||||
});
|
||||
|
||||
31
app/_ui/ActivityFeedClient.tsx
Normal file
31
app/_ui/ActivityFeedClient.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
type ActivityFeedComponent = React.ComponentType<Record<string, never>>;
|
||||
|
||||
export default function ActivityFeedClient() {
|
||||
const [Comp, setComp] = useState<ActivityFeedComponent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
try {
|
||||
const mod = await import("../components/ActivityFeed");
|
||||
const C = (mod as unknown as { default?: ActivityFeedComponent }).default;
|
||||
if (!cancelled && typeof C === "function") {
|
||||
setComp(() => C);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!Comp) return null;
|
||||
return <Comp />;
|
||||
}
|
||||
|
||||
115
app/_ui/HomePage.tsx
Normal file
115
app/_ui/HomePage.tsx
Normal file
@@ -0,0 +1,115 @@
|
||||
import Header from "../components/Header";
|
||||
import Hero from "../components/Hero";
|
||||
import About from "../components/About";
|
||||
import Projects from "../components/Projects";
|
||||
import Contact from "../components/Contact";
|
||||
import Footer from "../components/Footer";
|
||||
import Script from "next/script";
|
||||
import ActivityFeedClient from "./ActivityFeedClient";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Script
|
||||
id={"structured-data"}
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Person",
|
||||
name: "Dennis Konkol",
|
||||
url: "https://dk0.dev",
|
||||
jobTitle: "Software Engineer",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
addressLocality: "Osnabrück",
|
||||
addressCountry: "Germany",
|
||||
},
|
||||
sameAs: [
|
||||
"https://github.com/Denshooter",
|
||||
"https://linkedin.com/in/dkonkol",
|
||||
],
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<ActivityFeedClient />
|
||||
<Header />
|
||||
{/* Spacer to prevent navbar overlap */}
|
||||
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
||||
<main className="relative">
|
||||
<Hero />
|
||||
|
||||
{/* Wavy Separator 1 - Hero to About */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient1)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<About />
|
||||
|
||||
{/* Wavy Separator 2 - About to Projects */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient2)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#FED7AA" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#FDE68A" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Projects />
|
||||
|
||||
{/* Wavy Separator 3 - Projects to Contact */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path
|
||||
d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient3)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#99F6E4" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#A7F3D0" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#D9F99D" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
238
app/_ui/ProjectDetailClient.tsx
Normal file
238
app/_ui/ProjectDetailClient.tsx
Normal file
@@ -0,0 +1,238 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
export type ProjectDetailData = {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
tags: string[];
|
||||
featured: boolean;
|
||||
category: string;
|
||||
date: string;
|
||||
github?: string | null;
|
||||
live?: string | null;
|
||||
imageUrl?: string | null;
|
||||
};
|
||||
|
||||
export default function ProjectDetailClient({
|
||||
project,
|
||||
locale,
|
||||
}: {
|
||||
project: ProjectDetailData;
|
||||
locale: string;
|
||||
}) {
|
||||
// Track page view (non-blocking)
|
||||
useEffect(() => {
|
||||
try {
|
||||
navigator.sendBeacon?.(
|
||||
"/api/analytics/track",
|
||||
new Blob(
|
||||
[
|
||||
JSON.stringify({
|
||||
type: "pageview",
|
||||
projectId: project.id.toString(),
|
||||
page: `/${locale}/projects/${project.slug}`,
|
||||
}),
|
||||
],
|
||||
{ type: "application/json" },
|
||||
),
|
||||
);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}, [project.id, project.slug, locale]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
{/* Navigation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}/projects`}
|
||||
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span className="font-medium">Back to Projects</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Header & Meta */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="mb-12"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
||||
<h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
|
||||
{project.title}
|
||||
</h1>
|
||||
<div className="flex gap-2 shrink-0 pt-2">
|
||||
{project.featured && (
|
||||
<span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
|
||||
Featured
|
||||
</span>
|
||||
)}
|
||||
<span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
|
||||
{project.category}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar size={18} />
|
||||
<span className="font-mono">
|
||||
{new Date(project.date).toLocaleDateString(undefined, {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag) => (
|
||||
<span key={tag} className="text-stone-700 font-medium">
|
||||
#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Featured Image / Fallback */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
|
||||
>
|
||||
{project.imageUrl ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={project.imageUrl} alt={project.title} className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
|
||||
<span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
|
||||
{project.title.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Content & Sidebar Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
||||
{/* Main Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="lg:col-span-2"
|
||||
>
|
||||
<div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
|
||||
<ReactMarkdown
|
||||
components={{
|
||||
h1: ({ children }) => (
|
||||
<h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>
|
||||
),
|
||||
h2: ({ children }) => (
|
||||
<h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>
|
||||
),
|
||||
p: ({ children }) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
|
||||
li: ({ children }) => <li className="text-stone-700">{children}</li>,
|
||||
code: ({ children }) => (
|
||||
<code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
pre: ({ children }) => (
|
||||
<pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">
|
||||
{children}
|
||||
</pre>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{project.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Sidebar / Actions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="lg:col-span-1 space-y-8"
|
||||
>
|
||||
<div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
|
||||
<h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
|
||||
<Share2 size={18} />
|
||||
Project Links
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{project.live && project.live.trim() && project.live !== "#" ? (
|
||||
<a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
|
||||
>
|
||||
<span>Live Demo</span>
|
||||
<ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
) : (
|
||||
<div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
|
||||
Live demo not available
|
||||
</div>
|
||||
)}
|
||||
|
||||
{project.github && project.github.trim() && project.github !== "#" ? (
|
||||
<a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
|
||||
>
|
||||
<span>View Source</span>
|
||||
<GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-stone-100">
|
||||
<h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
292
app/_ui/ProjectsPageClient.tsx
Normal file
292
app/_ui/ProjectsPageClient.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink, Github, Calendar, ArrowLeft, Search } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export type ProjectListItem = {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
tags: string[];
|
||||
featured: boolean;
|
||||
category: string;
|
||||
date: string;
|
||||
github?: string | null;
|
||||
live?: string | null;
|
||||
imageUrl?: string | null;
|
||||
};
|
||||
|
||||
export default function ProjectsPageClient({
|
||||
projects,
|
||||
locale,
|
||||
}: {
|
||||
projects: ProjectListItem[];
|
||||
locale: string;
|
||||
}) {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const categories = useMemo(() => {
|
||||
const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
|
||||
return ["All", ...unique];
|
||||
}, [projects]);
|
||||
|
||||
const filteredProjects = useMemo(() => {
|
||||
let result = projects;
|
||||
|
||||
if (selectedCategory !== "All") {
|
||||
result = result.filter((project) => project.category === selectedCategory);
|
||||
}
|
||||
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
result = result.filter(
|
||||
(project) =>
|
||||
project.title.toLowerCase().includes(query) ||
|
||||
project.description.toLowerCase().includes(query) ||
|
||||
project.tags.some((tag) => tag.toLowerCase().includes(query)),
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
}, [projects, selectedCategory, searchQuery]);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="mb-12"
|
||||
>
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span>Back to Home</span>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
|
||||
My Projects
|
||||
</h1>
|
||||
<p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
|
||||
Explore my portfolio of projects, from web applications to mobile apps. Each project showcases different
|
||||
skills and technologies.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Filters & Search */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
|
||||
>
|
||||
{/* Categories */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{categories.map((category) => (
|
||||
<button
|
||||
key={category}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
|
||||
selectedCategory === category
|
||||
? "bg-stone-800 text-stone-50 border-stone-800 shadow-md"
|
||||
: "bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300"
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative w-full md:w-64">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search projects..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{filteredProjects.map((project, index) => (
|
||||
<motion.div
|
||||
key={project.id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
|
||||
>
|
||||
{/* Image / Fallback / Cover Area */}
|
||||
<div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
|
||||
{project.imageUrl ? (
|
||||
<>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={project.imageUrl}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
</>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
|
||||
<div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
|
||||
<div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
|
||||
{project.title.charAt(0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Texture/Grain Overlay */}
|
||||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
|
||||
|
||||
{/* Animated Shine Effect */}
|
||||
<div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
|
||||
|
||||
{project.featured && (
|
||||
<div className="absolute top-3 left-3 z-20">
|
||||
<div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
|
||||
Featured
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Overlay Links */}
|
||||
<div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
|
||||
{project.github && (
|
||||
<a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
|
||||
aria-label="GitHub"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Github size={20} />
|
||||
</a>
|
||||
)}
|
||||
{project.live && !project.title.toLowerCase().includes("kernel panic") && (
|
||||
<a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
|
||||
aria-label="Live Demo"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
{/* Stretched Link covering the whole card (including image area) */}
|
||||
<Link
|
||||
href={`/${locale}/projects/${project.slug}`}
|
||||
className="absolute inset-0 z-10"
|
||||
aria-label={`View project ${project.title}`}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
<div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
|
||||
<Calendar size={12} />
|
||||
<span>{new Date(project.date).getFullYear()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">{project.description}</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-6">
|
||||
{project.tags.slice(0, 4).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
{project.tags.length > 4 && (
|
||||
<span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
|
||||
<div className="flex gap-3">
|
||||
{project.github && (
|
||||
<a
|
||||
href={project.github}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Github size={18} />
|
||||
</a>
|
||||
)}
|
||||
{project.live && !project.title.toLowerCase().includes("kernel panic") && (
|
||||
<a
|
||||
href={project.live}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<ExternalLink size={18} />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredProjects.length === 0 && (
|
||||
<div className="text-center py-20">
|
||||
<p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedCategory("All");
|
||||
setSearchQuery("");
|
||||
}}
|
||||
className="mt-4 text-stone-800 font-medium hover:underline"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,12 +22,9 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
// Check admin authentication
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) {
|
||||
if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) {
|
||||
return authError;
|
||||
}
|
||||
}
|
||||
if (authError) return authError;
|
||||
|
||||
const { type } = await request.json();
|
||||
|
||||
|
||||
@@ -26,7 +26,20 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
// Track page view
|
||||
if (type === 'pageview' && page) {
|
||||
const projectIdNum = projectId ? parseInt(projectId.toString()) : null;
|
||||
let projectIdNum: number | null = null;
|
||||
if (projectId != null) {
|
||||
const raw = projectId.toString();
|
||||
const parsed = parseInt(raw, 10);
|
||||
if (Number.isFinite(parsed)) {
|
||||
projectIdNum = parsed;
|
||||
} else {
|
||||
const bySlug = await prisma.project.findFirst({
|
||||
where: { slug: raw },
|
||||
select: { id: true },
|
||||
});
|
||||
projectIdNum = bySlug?.id ?? null;
|
||||
}
|
||||
}
|
||||
|
||||
// Create page view record
|
||||
await prisma.pageView.create({
|
||||
@@ -83,7 +96,7 @@ export async function POST(request: NextRequest) {
|
||||
where: {
|
||||
OR: [
|
||||
{ id: parseInt(slug) || 0 },
|
||||
{ title: { contains: slug, mode: 'insensitive' } }
|
||||
{ slug }
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import { type NextRequest, NextResponse } from "next/server";
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
|
||||
import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export async function PUT(
|
||||
request: NextRequest,
|
||||
@@ -25,6 +23,11 @@ export async function PUT(
|
||||
);
|
||||
}
|
||||
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const resolvedParams = await params;
|
||||
const id = parseInt(resolvedParams.id);
|
||||
const body = await request.json();
|
||||
@@ -93,6 +96,11 @@ export async function DELETE(
|
||||
);
|
||||
}
|
||||
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const resolvedParams = await params;
|
||||
const id = parseInt(resolvedParams.id);
|
||||
|
||||
|
||||
25
app/api/content/page/route.ts
Normal file
25
app/api/content/page/route.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getContentByKey } from "@/lib/content";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const key = searchParams.get("key");
|
||||
const locale = searchParams.get("locale") || "en";
|
||||
|
||||
if (!key) {
|
||||
return NextResponse.json({ error: "key is required" }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
const translation = await getContentByKey({ key, locale });
|
||||
if (!translation) return NextResponse.json({ content: null });
|
||||
return NextResponse.json({ content: translation });
|
||||
} catch (error) {
|
||||
// If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.warn("Content API failed; returning null content:", error);
|
||||
}
|
||||
return NextResponse.json({ content: null });
|
||||
}
|
||||
}
|
||||
|
||||
55
app/api/content/pages/route.ts
Normal file
55
app/api/content/pages/route.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { requireSessionAuth } from "@/lib/auth";
|
||||
import { upsertContentByKey } from "@/lib/content";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
const isAdminRequest = request.headers.get("x-admin-request") === "true";
|
||||
if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const pages = await prisma.contentPage.findMany({
|
||||
orderBy: { key: "asc" },
|
||||
include: {
|
||||
translations: {
|
||||
select: { locale: true, updatedAt: true, title: true, slug: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json({ pages });
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
const isAdminRequest = request.headers.get("x-admin-request") === "true";
|
||||
if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const body = await request.json();
|
||||
const { key, locale, title, slug, content, metaDescription, keywords } = body as Record<string, unknown>;
|
||||
|
||||
if (!key || typeof key !== "string") {
|
||||
return NextResponse.json({ error: "key is required" }, { status: 400 });
|
||||
}
|
||||
if (!locale || typeof locale !== "string") {
|
||||
return NextResponse.json({ error: "locale is required" }, { status: 400 });
|
||||
}
|
||||
if (!content || typeof content !== "object") {
|
||||
return NextResponse.json({ error: "content (JSON) is required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const saved = await upsertContentByKey({
|
||||
key,
|
||||
locale,
|
||||
title: typeof title === "string" ? title : null,
|
||||
slug: typeof slug === "string" ? slug : null,
|
||||
content,
|
||||
metaDescription: typeof metaDescription === "string" ? metaDescription : null,
|
||||
keywords: typeof keywords === "string" ? keywords : null,
|
||||
});
|
||||
|
||||
return NextResponse.json({ saved });
|
||||
}
|
||||
|
||||
@@ -2,10 +2,8 @@ import { type NextRequest, NextResponse } from "next/server";
|
||||
import nodemailer from "nodemailer";
|
||||
import SMTPTransport from "nodemailer/lib/smtp-transport";
|
||||
import Mail from "nodemailer/lib/mailer";
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
// Sanitize input to prevent XSS
|
||||
function sanitizeInput(input: string, maxLength: number = 10000): string {
|
||||
@@ -95,12 +93,6 @@ export async function POST(request: NextRequest) {
|
||||
const user = process.env.MY_EMAIL ?? "";
|
||||
const pass = process.env.MY_PASSWORD ?? "";
|
||||
|
||||
console.log('🔑 Environment check:', {
|
||||
hasEmail: !!user,
|
||||
hasPassword: !!pass,
|
||||
emailHost: user.split('@')[1] || 'unknown'
|
||||
});
|
||||
|
||||
if (!user || !pass) {
|
||||
console.error("❌ Missing email/password environment variables");
|
||||
return NextResponse.json(
|
||||
@@ -123,11 +115,12 @@ export async function POST(request: NextRequest) {
|
||||
connectionTimeout: 30000, // 30 seconds
|
||||
greetingTimeout: 30000, // 30 seconds
|
||||
socketTimeout: 60000, // 60 seconds
|
||||
// Additional TLS options for better compatibility
|
||||
tls: {
|
||||
rejectUnauthorized: false, // Allow self-signed certificates
|
||||
ciphers: 'SSLv3'
|
||||
}
|
||||
// TLS hardening (allow insecure/self-signed only when explicitly enabled)
|
||||
tls:
|
||||
process.env.SMTP_ALLOW_INSECURE_TLS === "true" ||
|
||||
process.env.SMTP_ALLOW_SELF_SIGNED === "true"
|
||||
? { rejectUnauthorized: false }
|
||||
: { rejectUnauthorized: true, minVersion: "TLSv1.2" },
|
||||
};
|
||||
|
||||
// Creating transport with configured options
|
||||
|
||||
@@ -1,66 +1,58 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import NodeCache from "node-cache";
|
||||
|
||||
// Use a dynamic import for node-fetch so tests that mock it (via jest.mock) are respected
|
||||
async function getFetch() {
|
||||
try {
|
||||
const mod = await import("node-fetch");
|
||||
// support both CJS and ESM interop
|
||||
return (mod as { default: unknown }).default ?? mod;
|
||||
} catch (_err) {
|
||||
return globalThis.fetch;
|
||||
}
|
||||
}
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const runtime = "nodejs"; // Force Node runtime
|
||||
|
||||
const GHOST_API_URL = process.env.GHOST_API_URL;
|
||||
const GHOST_API_KEY = process.env.GHOST_API_KEY;
|
||||
const cache = new NodeCache({ stdTTL: 300 }); // Cache für 5 Minuten
|
||||
|
||||
type GhostPost = {
|
||||
type LegacyPost = {
|
||||
slug: string;
|
||||
id: string;
|
||||
title: string;
|
||||
feature_image: string;
|
||||
visibility: string;
|
||||
published_at: string;
|
||||
meta_description: string | null;
|
||||
updated_at: string;
|
||||
html: string;
|
||||
reading_time: number;
|
||||
meta_description: string;
|
||||
};
|
||||
|
||||
type GhostPostsResponse = {
|
||||
posts: Array<GhostPost>;
|
||||
type LegacyPostsResponse = {
|
||||
posts: Array<LegacyPost>;
|
||||
};
|
||||
|
||||
export async function GET() {
|
||||
const cacheKey = "ghostPosts";
|
||||
const cachedPosts = cache.get<GhostPostsResponse>(cacheKey);
|
||||
const cacheKey = "projects:legacyPosts";
|
||||
const cachedPosts = cache.get<LegacyPostsResponse>(cacheKey);
|
||||
|
||||
if (cachedPosts) {
|
||||
return NextResponse.json(cachedPosts);
|
||||
}
|
||||
|
||||
try {
|
||||
const fetchFn = await getFetch();
|
||||
const response = await (fetchFn as unknown as typeof fetch)(
|
||||
`${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
|
||||
);
|
||||
const posts: GhostPostsResponse =
|
||||
(await response.json()) as GhostPostsResponse;
|
||||
const projects = await prisma.project.findMany({
|
||||
where: { published: true },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
updatedAt: true,
|
||||
metaDescription: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!posts || !posts.posts) {
|
||||
console.error("Invalid posts data");
|
||||
return NextResponse.json([]);
|
||||
}
|
||||
const payload: LegacyPostsResponse = {
|
||||
posts: projects.map((p) => ({
|
||||
id: String(p.id),
|
||||
slug: p.slug,
|
||||
title: p.title,
|
||||
meta_description: p.metaDescription ?? null,
|
||||
updated_at: (p.updatedAt ?? new Date()).toISOString(),
|
||||
})),
|
||||
};
|
||||
|
||||
cache.set(cacheKey, posts); // Daten im Cache speichern
|
||||
|
||||
return NextResponse.json(posts);
|
||||
cache.set(cacheKey, payload);
|
||||
return NextResponse.json(payload);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch posts from Ghost:", error);
|
||||
console.error("Failed to fetch projects:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch projects" },
|
||||
{ status: 500 },
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
|
||||
export const runtime = "nodejs"; // Force Node runtime
|
||||
|
||||
const GHOST_API_URL = process.env.GHOST_API_URL;
|
||||
const GHOST_API_KEY = process.env.GHOST_API_KEY;
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const slug = searchParams.get("slug");
|
||||
@@ -14,59 +12,37 @@ export async function GET(request: Request) {
|
||||
}
|
||||
|
||||
try {
|
||||
// Debug: show whether fetch is present/mocked
|
||||
const project = await prisma.project.findUnique({
|
||||
where: { slug },
|
||||
select: {
|
||||
id: true,
|
||||
slug: true,
|
||||
title: true,
|
||||
updatedAt: true,
|
||||
metaDescription: true,
|
||||
description: true,
|
||||
content: true,
|
||||
},
|
||||
});
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
console.log(
|
||||
"DEBUG fetch in fetchProject:",
|
||||
typeof (globalThis as any).fetch,
|
||||
"globalIsMock:",
|
||||
!!(globalThis as any).fetch?._isMockFunction,
|
||||
);
|
||||
|
||||
// Try global fetch first (as tests often mock it). If it fails or returns undefined,
|
||||
// fall back to dynamically importing node-fetch.
|
||||
let response: any;
|
||||
|
||||
if (typeof (globalThis as any).fetch === "function") {
|
||||
try {
|
||||
response = await (globalThis as any).fetch(
|
||||
`${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
|
||||
);
|
||||
} catch (_e) {
|
||||
response = undefined;
|
||||
}
|
||||
if (!project) {
|
||||
return NextResponse.json({ posts: [] }, { status: 200 });
|
||||
}
|
||||
|
||||
if (!response || typeof response.ok === "undefined") {
|
||||
try {
|
||||
const mod = await import("node-fetch");
|
||||
const nodeFetch = (mod as any).default ?? mod;
|
||||
response = await (nodeFetch as any)(
|
||||
`${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
|
||||
);
|
||||
} catch (_err) {
|
||||
response = undefined;
|
||||
}
|
||||
}
|
||||
/* eslint-enable @typescript-eslint/no-explicit-any */
|
||||
|
||||
// Debug: inspect the response returned from the fetch
|
||||
|
||||
// Debug: inspect the response returned from the fetch
|
||||
|
||||
console.log("DEBUG fetch response:", response);
|
||||
|
||||
if (!response || !response.ok) {
|
||||
throw new Error(
|
||||
`Failed to fetch post: ${response?.statusText ?? "no response"}`,
|
||||
);
|
||||
}
|
||||
|
||||
const post = await response.json();
|
||||
return NextResponse.json(post);
|
||||
// Legacy shape (Ghost-like) for compatibility with older frontend/tests.
|
||||
return NextResponse.json({
|
||||
posts: [
|
||||
{
|
||||
id: String(project.id),
|
||||
title: project.title,
|
||||
meta_description: project.metaDescription ?? project.description ?? "",
|
||||
slug: project.slug,
|
||||
updated_at: (project.updatedAt ?? new Date()).toISOString(),
|
||||
},
|
||||
],
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch post from Ghost:", error);
|
||||
console.error("Failed to fetch project:", error);
|
||||
return NextResponse.json(
|
||||
{ error: "Failed to fetch project" },
|
||||
{ status: 500 },
|
||||
|
||||
@@ -6,10 +6,21 @@ export const revalidate = 30;
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
// Rate limiting for n8n status endpoint
|
||||
const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
|
||||
const ip =
|
||||
request.headers.get("x-forwarded-for") ||
|
||||
request.headers.get("x-real-ip") ||
|
||||
"unknown";
|
||||
const ua = request.headers.get("user-agent") || "unknown";
|
||||
const { checkRateLimit } = await import('@/lib/auth');
|
||||
|
||||
if (!checkRateLimit(ip, 30, 60000)) { // 30 requests per minute for status
|
||||
// In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
|
||||
const rateKey =
|
||||
process.env.NODE_ENV === "development" && ip === "unknown"
|
||||
? `ua:${ua.slice(0, 120)}`
|
||||
: ip;
|
||||
const maxPerMinute = process.env.NODE_ENV === "development" ? 300 : 30;
|
||||
|
||||
if (!checkRateLimit(rateKey, maxPerMinute, 60000)) { // requests per minute
|
||||
return NextResponse.json(
|
||||
{ error: 'Rate limit exceeded. Please try again later.' },
|
||||
{ status: 429 }
|
||||
@@ -43,7 +54,8 @@ export async function GET(request: NextRequest) {
|
||||
const res = await fetch(statusUrl, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
// n8n sometimes responds with empty body; we'll parse defensively below.
|
||||
Accept: "application/json",
|
||||
...(process.env.N8N_SECRET_TOKEN && {
|
||||
Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
|
||||
}),
|
||||
@@ -60,7 +72,21 @@ export async function GET(request: NextRequest) {
|
||||
throw new Error(`n8n error: ${res.status} - ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
const raw = await res.text().catch(() => "");
|
||||
if (!raw || !raw.trim()) {
|
||||
throw new Error("Empty response body received from n8n");
|
||||
}
|
||||
|
||||
let data: unknown;
|
||||
try {
|
||||
data = JSON.parse(raw);
|
||||
} catch (parseError) {
|
||||
// Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
|
||||
const snippet = raw.slice(0, 240);
|
||||
throw new Error(
|
||||
`Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
|
||||
);
|
||||
}
|
||||
|
||||
// n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
|
||||
const statusData = Array.isArray(data) ? data[0] : data;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { prisma } from '@/lib/prisma';
|
||||
import { apiCache } from '@/lib/cache';
|
||||
import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
|
||||
import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
|
||||
import { generateUniqueSlug } from '@/lib/slug';
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
@@ -88,12 +89,37 @@ export async function PUT(
|
||||
const data = await request.json();
|
||||
|
||||
// Remove difficulty field if it exists (since we're removing it)
|
||||
const { difficulty, ...projectData } = data;
|
||||
const { difficulty, slug, defaultLocale, ...projectData } = data;
|
||||
|
||||
// Keep slug stable by default; only update if explicitly provided,
|
||||
// or if the project currently has no slug (e.g. after migration).
|
||||
const existing = await prisma.project.findUnique({
|
||||
where: { id },
|
||||
select: { slug: true, title: true },
|
||||
});
|
||||
|
||||
const nextSlug =
|
||||
typeof slug === 'string' && slug.trim()
|
||||
? slug.trim()
|
||||
: existing?.slug?.trim()
|
||||
? existing.slug
|
||||
: await generateUniqueSlug({
|
||||
base: String(projectData.title || existing?.title || 'project'),
|
||||
isTaken: async (candidate) => {
|
||||
const found = await prisma.project.findUnique({
|
||||
where: { slug: candidate },
|
||||
select: { id: true },
|
||||
});
|
||||
return !!found && found.id !== id;
|
||||
},
|
||||
});
|
||||
|
||||
const project = await prisma.project.update({
|
||||
where: { id },
|
||||
data: {
|
||||
...projectData,
|
||||
slug: nextSlug,
|
||||
defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
|
||||
updatedAt: new Date(),
|
||||
// Keep existing difficulty if not provided
|
||||
...(difficulty ? { difficulty } : {})
|
||||
|
||||
71
app/api/projects/[id]/translation/route.ts
Normal file
71
app/api/projects/[id]/translation/route.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { requireSessionAuth } from "@/lib/auth";
|
||||
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const isAdminRequest = request.headers.get("x-admin-request") === "true";
|
||||
if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const { id: idParam } = await params;
|
||||
const id = parseInt(idParam, 10);
|
||||
if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const locale = searchParams.get("locale") || "en";
|
||||
|
||||
const translation = await prisma.projectTranslation.findFirst({
|
||||
where: { projectId: id, locale },
|
||||
});
|
||||
|
||||
return NextResponse.json({ translation });
|
||||
}
|
||||
|
||||
export async function PUT(
|
||||
request: NextRequest,
|
||||
{ params }: { params: Promise<{ id: string }> },
|
||||
) {
|
||||
const isAdminRequest = request.headers.get("x-admin-request") === "true";
|
||||
if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const { id: idParam } = await params;
|
||||
const id = parseInt(idParam, 10);
|
||||
if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
|
||||
|
||||
const body = (await request.json()) as {
|
||||
locale?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
};
|
||||
|
||||
const locale = body.locale || "en";
|
||||
const title = body.title?.trim();
|
||||
const description = body.description?.trim();
|
||||
|
||||
if (!title || !description) {
|
||||
return NextResponse.json({ error: "title and description are required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const saved = await prisma.projectTranslation.upsert({
|
||||
where: { projectId_locale: { projectId: id, locale } },
|
||||
create: {
|
||||
projectId: id,
|
||||
locale,
|
||||
title,
|
||||
description,
|
||||
},
|
||||
update: {
|
||||
title,
|
||||
description,
|
||||
},
|
||||
});
|
||||
|
||||
return NextResponse.json({ translation: saved });
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { projectService } from '@/lib/prisma';
|
||||
import { prisma, projectService } from '@/lib/prisma';
|
||||
import { requireSessionAuth } from '@/lib/auth';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
@@ -9,16 +9,39 @@ export async function GET(request: NextRequest) {
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
// Get all projects with full data
|
||||
const projectsResult = await projectService.getAllProjects();
|
||||
// Projects (with translations)
|
||||
const projectsResult = await projectService.getAllProjects({ limit: 10000 });
|
||||
const projects = projectsResult.projects || projectsResult;
|
||||
const projectIds = projects.map((p: { id: number }) => p.id);
|
||||
|
||||
const projectTranslations = await prisma.projectTranslation.findMany({
|
||||
where: { projectId: { in: projectIds } },
|
||||
orderBy: [{ projectId: 'asc' }, { locale: 'asc' }],
|
||||
});
|
||||
|
||||
// CMS content pages (with translations)
|
||||
const contentPages = await prisma.contentPage.findMany({
|
||||
orderBy: { key: 'asc' },
|
||||
include: {
|
||||
translations: {
|
||||
orderBy: { locale: 'asc' },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const siteSettings = await prisma.siteSettings.findUnique({ where: { id: 1 } });
|
||||
|
||||
// Format for export
|
||||
const exportData = {
|
||||
version: '1.0',
|
||||
version: '2.0',
|
||||
exportDate: new Date().toISOString(),
|
||||
siteSettings,
|
||||
contentPages,
|
||||
projectTranslations,
|
||||
projects: projects.map(project => ({
|
||||
id: project.id,
|
||||
slug: (project as unknown as { slug?: string }).slug,
|
||||
defaultLocale: (project as unknown as { defaultLocale?: string }).defaultLocale,
|
||||
title: project.title,
|
||||
description: project.description,
|
||||
content: project.content,
|
||||
|
||||
@@ -1,86 +1,309 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { projectService } from '@/lib/prisma';
|
||||
import { requireSessionAuth } from '@/lib/auth';
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { prisma, projectService } from "@/lib/prisma";
|
||||
import { requireSessionAuth } from "@/lib/auth";
|
||||
import type { Prisma } from "@prisma/client";
|
||||
|
||||
type ImportSiteSettings = {
|
||||
defaultLocale?: unknown;
|
||||
locales?: unknown;
|
||||
theme?: unknown;
|
||||
};
|
||||
|
||||
type ImportContentPageTranslation = {
|
||||
locale?: unknown;
|
||||
title?: unknown;
|
||||
slug?: unknown;
|
||||
content?: unknown;
|
||||
metaDescription?: unknown;
|
||||
keywords?: unknown;
|
||||
};
|
||||
|
||||
type ImportContentPage = {
|
||||
key?: unknown;
|
||||
status?: unknown;
|
||||
translations?: unknown;
|
||||
};
|
||||
|
||||
type ImportProject = {
|
||||
id?: unknown;
|
||||
slug?: unknown;
|
||||
defaultLocale?: unknown;
|
||||
title?: unknown;
|
||||
description?: unknown;
|
||||
content?: unknown;
|
||||
tags?: unknown;
|
||||
category?: unknown;
|
||||
featured?: unknown;
|
||||
github?: unknown;
|
||||
live?: unknown;
|
||||
published?: unknown;
|
||||
imageUrl?: unknown;
|
||||
difficulty?: unknown;
|
||||
timeToComplete?: unknown;
|
||||
technologies?: unknown;
|
||||
challenges?: unknown;
|
||||
lessonsLearned?: unknown;
|
||||
futureImprovements?: unknown;
|
||||
demoVideo?: unknown;
|
||||
screenshots?: unknown;
|
||||
colorScheme?: unknown;
|
||||
accessibility?: unknown;
|
||||
performance?: unknown;
|
||||
analytics?: unknown;
|
||||
};
|
||||
|
||||
type ImportProjectTranslation = {
|
||||
projectId?: unknown;
|
||||
locale?: unknown;
|
||||
title?: unknown;
|
||||
description?: unknown;
|
||||
content?: unknown;
|
||||
metaDescription?: unknown;
|
||||
keywords?: unknown;
|
||||
ogImage?: unknown;
|
||||
schema?: unknown;
|
||||
};
|
||||
|
||||
type ImportPayload = {
|
||||
projects?: unknown;
|
||||
siteSettings?: unknown;
|
||||
contentPages?: unknown;
|
||||
projectTranslations?: unknown;
|
||||
};
|
||||
|
||||
function asString(v: unknown): string | null {
|
||||
return typeof v === "string" ? v : null;
|
||||
}
|
||||
|
||||
function asStringArray(v: unknown): string[] | null {
|
||||
if (!Array.isArray(v)) return null;
|
||||
const allStrings = v.filter((x) => typeof x === "string") as string[];
|
||||
return allStrings.length === v.length ? allStrings : null;
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
|
||||
const isAdminRequest = request.headers.get("x-admin-request") === "true";
|
||||
if (!isAdminRequest) {
|
||||
return NextResponse.json({ error: "Admin access required" }, { status: 403 });
|
||||
}
|
||||
const authError = requireSessionAuth(request);
|
||||
if (authError) return authError;
|
||||
|
||||
const body = await request.json();
|
||||
const body = (await request.json()) as ImportPayload;
|
||||
|
||||
// Validate import data structure
|
||||
if (!body.projects || !Array.isArray(body.projects)) {
|
||||
if (!Array.isArray(body.projects)) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Invalid import data format' },
|
||||
{ status: 400 }
|
||||
{ error: "Invalid import data format" },
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const results = {
|
||||
imported: 0,
|
||||
skipped: 0,
|
||||
errors: [] as string[]
|
||||
errors: [] as string[],
|
||||
};
|
||||
|
||||
// Import SiteSettings (optional)
|
||||
if (body.siteSettings && typeof body.siteSettings === "object") {
|
||||
try {
|
||||
const ss = body.siteSettings as ImportSiteSettings;
|
||||
const defaultLocale = asString(ss.defaultLocale);
|
||||
const locales = asStringArray(ss.locales);
|
||||
const theme = ss.theme as Prisma.InputJsonValue | undefined;
|
||||
|
||||
await prisma.siteSettings.upsert({
|
||||
where: { id: 1 },
|
||||
create: {
|
||||
id: 1,
|
||||
...(defaultLocale ? { defaultLocale } : {}),
|
||||
...(locales ? { locales } : {}),
|
||||
...(theme ? { theme } : {}),
|
||||
},
|
||||
update: {
|
||||
...(defaultLocale ? { defaultLocale } : {}),
|
||||
...(locales ? { locales } : {}),
|
||||
...(theme ? { theme } : {}),
|
||||
},
|
||||
});
|
||||
} catch {
|
||||
// non-blocking
|
||||
}
|
||||
}
|
||||
|
||||
// Import CMS content pages (optional)
|
||||
if (Array.isArray(body.contentPages)) {
|
||||
for (const page of body.contentPages) {
|
||||
try {
|
||||
const key = asString((page as ImportContentPage)?.key);
|
||||
if (!key) continue;
|
||||
const statusRaw = asString((page as ImportContentPage)?.status);
|
||||
const status = statusRaw === "DRAFT" || statusRaw === "PUBLISHED" ? statusRaw : "PUBLISHED";
|
||||
const upserted = await prisma.contentPage.upsert({
|
||||
where: { key },
|
||||
create: { key, status },
|
||||
update: { status },
|
||||
});
|
||||
|
||||
const translations = (page as ImportContentPage)?.translations;
|
||||
if (Array.isArray(translations)) {
|
||||
for (const tr of translations as ImportContentPageTranslation[]) {
|
||||
const locale = asString(tr?.locale);
|
||||
if (!locale || typeof tr?.content === "undefined" || tr?.content === null) continue;
|
||||
await prisma.contentPageTranslation.upsert({
|
||||
where: { pageId_locale: { pageId: upserted.id, locale } },
|
||||
create: {
|
||||
pageId: upserted.id,
|
||||
locale,
|
||||
title: asString(tr.title),
|
||||
slug: asString(tr.slug),
|
||||
content: tr.content as Prisma.InputJsonValue,
|
||||
metaDescription: asString(tr.metaDescription),
|
||||
keywords: asString(tr.keywords),
|
||||
},
|
||||
update: {
|
||||
title: asString(tr.title),
|
||||
slug: asString(tr.slug),
|
||||
content: tr.content as Prisma.InputJsonValue,
|
||||
metaDescription: asString(tr.metaDescription),
|
||||
keywords: asString(tr.keywords),
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
const key = asString((page as ImportContentPage)?.key) ?? "unknown";
|
||||
results.errors.push(
|
||||
`Failed to import content page "${key}": ${error instanceof Error ? error.message : "Unknown error"}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Preload existing titles once (avoid O(n^2) DB reads during import)
|
||||
const existingProjectsResult = await projectService.getAllProjects({ limit: 10000 });
|
||||
const existingProjects = existingProjectsResult.projects || existingProjectsResult;
|
||||
const existingTitles = new Set(existingProjects.map(p => p.title));
|
||||
const existingSlugs = new Set(
|
||||
existingProjects
|
||||
.map((p) => (p as unknown as { slug?: string }).slug)
|
||||
.filter((s): s is string => typeof s === "string" && s.length > 0),
|
||||
);
|
||||
|
||||
// Process each project
|
||||
for (const projectData of body.projects) {
|
||||
for (const projectData of body.projects as ImportProject[]) {
|
||||
try {
|
||||
// Check if project already exists (by title)
|
||||
const exists = existingTitles.has(projectData.title);
|
||||
const title = asString(projectData.title);
|
||||
if (!title) continue;
|
||||
const exists = existingTitles.has(title);
|
||||
|
||||
if (exists) {
|
||||
results.skipped++;
|
||||
results.errors.push(`Project "${projectData.title}" already exists`);
|
||||
results.errors.push(`Project "${title}" already exists`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Create new project
|
||||
await projectService.createProject({
|
||||
title: projectData.title,
|
||||
description: projectData.description,
|
||||
content: projectData.content,
|
||||
tags: projectData.tags || [],
|
||||
category: projectData.category,
|
||||
featured: projectData.featured || false,
|
||||
github: projectData.github,
|
||||
live: projectData.live,
|
||||
const created = await projectService.createProject({
|
||||
slug: asString(projectData.slug) ?? undefined,
|
||||
defaultLocale: asString(projectData.defaultLocale) ?? "en",
|
||||
title,
|
||||
description: asString(projectData.description) ?? "",
|
||||
content: projectData.content as Prisma.InputJsonValue | undefined,
|
||||
tags: (asStringArray(projectData.tags) ?? []) as string[],
|
||||
category: asString(projectData.category) ?? "General",
|
||||
featured: projectData.featured === true,
|
||||
github: asString(projectData.github) ?? undefined,
|
||||
live: asString(projectData.live) ?? undefined,
|
||||
published: projectData.published !== false, // Default to true
|
||||
imageUrl: projectData.imageUrl,
|
||||
difficulty: projectData.difficulty || 'Intermediate',
|
||||
timeToComplete: projectData.timeToComplete,
|
||||
technologies: projectData.technologies || [],
|
||||
challenges: projectData.challenges || [],
|
||||
lessonsLearned: projectData.lessonsLearned || [],
|
||||
futureImprovements: projectData.futureImprovements || [],
|
||||
demoVideo: projectData.demoVideo,
|
||||
screenshots: projectData.screenshots || [],
|
||||
colorScheme: projectData.colorScheme || 'Dark',
|
||||
imageUrl: asString(projectData.imageUrl) ?? undefined,
|
||||
difficulty: asString(projectData.difficulty) ?? "Intermediate",
|
||||
timeToComplete: asString(projectData.timeToComplete) ?? undefined,
|
||||
technologies: (asStringArray(projectData.technologies) ?? []) as string[],
|
||||
challenges: (asStringArray(projectData.challenges) ?? []) as string[],
|
||||
lessonsLearned: (asStringArray(projectData.lessonsLearned) ?? []) as string[],
|
||||
futureImprovements: (asStringArray(projectData.futureImprovements) ?? []) as string[],
|
||||
demoVideo: asString(projectData.demoVideo) ?? undefined,
|
||||
screenshots: (asStringArray(projectData.screenshots) ?? []) as string[],
|
||||
colorScheme: asString(projectData.colorScheme) ?? "Dark",
|
||||
accessibility: projectData.accessibility !== false, // Default to true
|
||||
performance: projectData.performance || {
|
||||
performance: (projectData.performance as Record<string, unknown> | null) || {
|
||||
lighthouse: 0,
|
||||
bundleSize: '0KB',
|
||||
loadTime: '0s'
|
||||
bundleSize: "0KB",
|
||||
loadTime: "0s",
|
||||
},
|
||||
analytics: projectData.analytics || {
|
||||
analytics: (projectData.analytics as Record<string, unknown> | null) || {
|
||||
views: 0,
|
||||
likes: 0,
|
||||
shares: 0
|
||||
}
|
||||
shares: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// Import translations (optional, from export v2)
|
||||
if (Array.isArray(body.projectTranslations)) {
|
||||
for (const tr of body.projectTranslations as ImportProjectTranslation[]) {
|
||||
const projectId = typeof tr?.projectId === "number" ? tr.projectId : null;
|
||||
const locale = asString(tr?.locale);
|
||||
if (!projectId || !locale) continue;
|
||||
// Map translation to created project by original slug/title when possible.
|
||||
// We match by slug if available in exported project list; otherwise by title.
|
||||
const exportedProject = (body.projects as ImportProject[]).find(
|
||||
(p) => typeof p.id === "number" && p.id === projectId,
|
||||
);
|
||||
const exportedSlug = asString(exportedProject?.slug);
|
||||
const matches =
|
||||
(exportedSlug && (created as unknown as { slug?: string }).slug === exportedSlug) ||
|
||||
(!!asString(exportedProject?.title) &&
|
||||
(created as unknown as { title?: string }).title === asString(exportedProject?.title));
|
||||
if (!matches) continue;
|
||||
|
||||
const trTitle = asString(tr.title);
|
||||
const trDescription = asString(tr.description);
|
||||
if (!trTitle || !trDescription) continue;
|
||||
await prisma.projectTranslation.upsert({
|
||||
where: {
|
||||
projectId_locale: {
|
||||
projectId: (created as unknown as { id: number }).id,
|
||||
locale,
|
||||
},
|
||||
},
|
||||
create: {
|
||||
projectId: (created as unknown as { id: number }).id,
|
||||
locale,
|
||||
title: trTitle,
|
||||
description: trDescription,
|
||||
content: (tr.content as Prisma.InputJsonValue) ?? null,
|
||||
metaDescription: asString(tr.metaDescription),
|
||||
keywords: asString(tr.keywords),
|
||||
ogImage: asString(tr.ogImage),
|
||||
schema: (tr.schema as Prisma.InputJsonValue) ?? null,
|
||||
},
|
||||
update: {
|
||||
title: trTitle,
|
||||
description: trDescription,
|
||||
content: (tr.content as Prisma.InputJsonValue) ?? null,
|
||||
metaDescription: asString(tr.metaDescription),
|
||||
keywords: asString(tr.keywords),
|
||||
ogImage: asString(tr.ogImage),
|
||||
schema: (tr.schema as Prisma.InputJsonValue) ?? null,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
results.imported++;
|
||||
existingTitles.add(projectData.title);
|
||||
existingTitles.add(title);
|
||||
const slug = asString(projectData.slug);
|
||||
if (slug) existingSlugs.add(slug);
|
||||
} catch (error) {
|
||||
results.skipped++;
|
||||
results.errors.push(`Failed to import "${projectData.title}": ${error instanceof Error ? error.message : 'Unknown error'}`);
|
||||
const title = asString(projectData.title) ?? "unknown";
|
||||
results.errors.push(
|
||||
`Failed to import "${title}": ${error instanceof Error ? error.message : "Unknown error"}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,10 +313,10 @@ export async function POST(request: NextRequest) {
|
||||
results
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Import error:', error);
|
||||
console.error("Import error:", error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to import projects' },
|
||||
{ status: 500 }
|
||||
{ error: "Failed to import projects" },
|
||||
{ status: 500 },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { apiCache } from '@/lib/cache';
|
||||
import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
import { requireSessionAuth, checkRateLimit, getRateLimitHeaders, getClientIp } from '@/lib/auth';
|
||||
import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
|
||||
import { generateUniqueSlug } from '@/lib/slug';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Rate limiting
|
||||
const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
|
||||
if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
|
||||
const ip = getClientIp(request);
|
||||
const rlKey = ip !== "unknown" ? ip : `dev_unknown:${request.headers.get("user-agent") || "ua"}`;
|
||||
// In development we keep this very high to avoid breaking local navigation/HMR.
|
||||
const max = process.env.NODE_ENV === "development" ? 300 : 60;
|
||||
if (!checkRateLimit(rlKey, max, 60000)) {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Rate limit exceeded' }),
|
||||
{
|
||||
status: 429,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...getRateLimitHeaders(ip, 10, 60000)
|
||||
...getRateLimitHeaders(rlKey, max, 60000)
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -154,11 +158,27 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
// Remove difficulty field if it exists (since we're removing it)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { difficulty, ...projectData } = data;
|
||||
const { difficulty, slug, defaultLocale, ...projectData } = data;
|
||||
|
||||
const derivedSlug =
|
||||
typeof slug === 'string' && slug.trim()
|
||||
? slug.trim()
|
||||
: await generateUniqueSlug({
|
||||
base: String(projectData.title || 'project'),
|
||||
isTaken: async (candidate) => {
|
||||
const existing = await prisma.project.findUnique({
|
||||
where: { slug: candidate },
|
||||
select: { id: true },
|
||||
});
|
||||
return !!existing;
|
||||
},
|
||||
});
|
||||
|
||||
const project = await prisma.project.create({
|
||||
data: {
|
||||
...projectData,
|
||||
slug: derivedSlug,
|
||||
defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
|
||||
// Set default difficulty since it's required in schema
|
||||
difficulty: 'INTERMEDIATE',
|
||||
performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },
|
||||
|
||||
@@ -9,28 +9,15 @@ export async function GET(request: NextRequest) {
|
||||
const category = searchParams.get('category');
|
||||
|
||||
if (slug) {
|
||||
// Search by slug (convert title to slug format)
|
||||
const projects = await prisma.project.findMany({
|
||||
const project = await prisma.project.findFirst({
|
||||
where: {
|
||||
published: true
|
||||
published: true,
|
||||
slug,
|
||||
},
|
||||
orderBy: { createdAt: 'desc' }
|
||||
orderBy: { createdAt: 'desc' },
|
||||
});
|
||||
|
||||
// Find exact match by converting titles to slugs
|
||||
const foundProject = projects.find(project => {
|
||||
const projectSlug = project.title.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
return projectSlug === slug;
|
||||
});
|
||||
|
||||
if (foundProject) {
|
||||
return NextResponse.json({ projects: [foundProject] });
|
||||
}
|
||||
|
||||
// If no exact match, return empty array
|
||||
return NextResponse.json({ projects: [] });
|
||||
return NextResponse.json({ projects: project ? [project] : [] });
|
||||
}
|
||||
|
||||
if (search) {
|
||||
|
||||
@@ -1,164 +1,22 @@
|
||||
import { NextResponse } from "next/server";
|
||||
|
||||
interface Project {
|
||||
slug: string;
|
||||
updated_at?: string; // Optional timestamp for last modification
|
||||
}
|
||||
|
||||
interface ProjectsData {
|
||||
posts: Project[];
|
||||
}
|
||||
import { generateSitemapXml, getSitemapEntries } from "@/lib/sitemap";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const runtime = "nodejs"; // Force Node runtime
|
||||
|
||||
// Read Ghost API config at runtime, tests may set env vars in beforeAll
|
||||
|
||||
// Funktion, um die XML für die Sitemap zu generieren
|
||||
function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
|
||||
const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
|
||||
const urlsetOpen =
|
||||
'<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
|
||||
const urlsetClose = "</urlset>";
|
||||
|
||||
const urlEntries = sitemapRoutes
|
||||
.map(
|
||||
(route) => `
|
||||
<url>
|
||||
<loc>${route.url}</loc>
|
||||
<lastmod>${route.lastModified}</lastmod>
|
||||
<changefreq>monthly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
</url>`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
return `${xmlHeader}${urlsetOpen}${urlEntries}${urlsetClose}`;
|
||||
}
|
||||
export const runtime = "nodejs";
|
||||
|
||||
export async function GET() {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
|
||||
|
||||
// Statische Routen
|
||||
const staticRoutes = [
|
||||
{
|
||||
url: `${baseUrl}/`,
|
||||
lastModified: new Date().toISOString(),
|
||||
priority: 1,
|
||||
changeFreq: "weekly",
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/legal-notice`,
|
||||
lastModified: new Date().toISOString(),
|
||||
priority: 0.5,
|
||||
changeFreq: "yearly",
|
||||
},
|
||||
{
|
||||
url: `${baseUrl}/privacy-policy`,
|
||||
lastModified: new Date().toISOString(),
|
||||
priority: 0.5,
|
||||
changeFreq: "yearly",
|
||||
},
|
||||
];
|
||||
|
||||
// In test environment we can short-circuit and use a mocked posts payload
|
||||
if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_POSTS) {
|
||||
const mockData = JSON.parse(process.env.GHOST_MOCK_POSTS);
|
||||
const projects = (mockData as ProjectsData).posts || [];
|
||||
|
||||
const sitemapRoutes = projects.map((project) => {
|
||||
const lastModified = project.updated_at || new Date().toISOString();
|
||||
return {
|
||||
url: `${baseUrl}/projects/${project.slug}`,
|
||||
lastModified,
|
||||
priority: 0.8,
|
||||
changeFreq: "monthly",
|
||||
};
|
||||
});
|
||||
|
||||
const allRoutes = [...staticRoutes, ...sitemapRoutes];
|
||||
const xml = generateXml(allRoutes);
|
||||
|
||||
// For tests return a plain object so tests can inspect `.body` easily
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
try {
|
||||
const entries = await getSitemapEntries();
|
||||
const xml = generateSitemapXml(entries);
|
||||
return new NextResponse(xml, {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
|
||||
return new NextResponse(xml, {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
// Debug: show whether fetch is present/mocked
|
||||
|
||||
// Try global fetch first (tests may mock global.fetch)
|
||||
let response: Response | undefined;
|
||||
|
||||
try {
|
||||
if (typeof globalThis.fetch === "function") {
|
||||
response = await globalThis.fetch(
|
||||
`${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
|
||||
);
|
||||
// Debug: inspect the result
|
||||
|
||||
console.log("DEBUG sitemap global fetch returned:", response);
|
||||
}
|
||||
} catch (_e) {
|
||||
response = undefined;
|
||||
}
|
||||
|
||||
if (!response || typeof response.ok === "undefined" || !response.ok) {
|
||||
try {
|
||||
const mod = await import("node-fetch");
|
||||
const nodeFetch = mod.default ?? mod;
|
||||
response = await (nodeFetch as unknown as typeof fetch)(
|
||||
`${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
|
||||
);
|
||||
} catch (err) {
|
||||
console.log("Failed to fetch posts from Ghost:", err);
|
||||
return new NextResponse(generateXml(staticRoutes), {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!response || !response.ok) {
|
||||
console.error(
|
||||
`Failed to fetch posts: ${response?.statusText ?? "no response"}`,
|
||||
);
|
||||
return new NextResponse(generateXml(staticRoutes), {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
|
||||
const projectsData = (await response.json()) as ProjectsData;
|
||||
|
||||
const projects = projectsData.posts;
|
||||
|
||||
// Dynamische Projekt-Routen generieren
|
||||
const sitemapRoutes = projects.map((project) => {
|
||||
const lastModified = project.updated_at || new Date().toISOString();
|
||||
return {
|
||||
url: `${baseUrl}/projects/${project.slug}`,
|
||||
lastModified,
|
||||
priority: 0.8,
|
||||
changeFreq: "monthly",
|
||||
};
|
||||
});
|
||||
|
||||
const allRoutes = [...staticRoutes, ...sitemapRoutes];
|
||||
|
||||
// Rückgabe der Sitemap im XML-Format
|
||||
return new NextResponse(generateXml(allRoutes), {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
} catch (error) {
|
||||
console.log("Failed to fetch posts from Ghost:", error);
|
||||
// Rückgabe der statischen Routen, falls Fehler auftritt
|
||||
return new NextResponse(generateXml(staticRoutes), {
|
||||
console.error("Failed to generate sitemap:", error);
|
||||
// Fail closed: return minimal sitemap
|
||||
const xml = generateSitemapXml([]);
|
||||
return new NextResponse(xml, {
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "./RichTextClient";
|
||||
|
||||
const staggerContainer: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
@@ -27,6 +31,30 @@ const fadeInUp: Variants = {
|
||||
};
|
||||
|
||||
const About = () => {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("home.about");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/content/page?key=${encodeURIComponent("home-about")}&locale=${encodeURIComponent(locale)}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
// Only use CMS content if it exists for the active locale.
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
} else {
|
||||
setCmsDoc(null);
|
||||
}
|
||||
} catch {
|
||||
// ignore; fallback to static
|
||||
setCmsDoc(null);
|
||||
}
|
||||
})();
|
||||
}, [locale]);
|
||||
|
||||
const techStack = [
|
||||
{
|
||||
category: "Frontend & Mobile",
|
||||
@@ -76,32 +104,21 @@ const About = () => {
|
||||
variants={fadeInUp}
|
||||
className="text-4xl md:text-5xl font-bold text-stone-900"
|
||||
>
|
||||
About Me
|
||||
{t("title")}
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
className="prose prose-stone prose-lg text-stone-700 space-y-4"
|
||||
>
|
||||
<p>
|
||||
Hi, I'm Dennis – a student and passionate self-hoster based
|
||||
in Osnabrück, Germany.
|
||||
</p>
|
||||
<p>
|
||||
I love building full-stack web applications with{" "}
|
||||
<strong>Next.js</strong> and mobile apps with{" "}
|
||||
<strong>Flutter</strong>. But what really excites me is{" "}
|
||||
<strong>DevOps</strong>: I run my own infrastructure on{" "}
|
||||
<strong>IONOS</strong> and <strong>OVHcloud</strong>, managing
|
||||
everything with <strong>Docker Swarm</strong>,{" "}
|
||||
<strong>Traefik</strong>, and automated CI/CD pipelines with my
|
||||
own runners.
|
||||
</p>
|
||||
<p>
|
||||
When I'm not coding or tinkering with servers, you'll
|
||||
find me <strong>gaming</strong>, <strong>jogging</strong>, or
|
||||
experimenting with new tech like game servers or automation
|
||||
workflows with <strong>n8n</strong>.
|
||||
</p>
|
||||
{cmsDoc ? (
|
||||
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
|
||||
) : (
|
||||
<>
|
||||
<p>{t("p1")}</p>
|
||||
<p>{t("p2")}</p>
|
||||
<p>{t("p3")}</p>
|
||||
</>
|
||||
)}
|
||||
<motion.div
|
||||
variants={fadeInUp}
|
||||
className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
|
||||
@@ -110,12 +127,10 @@ const About = () => {
|
||||
<Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-stone-800 mb-1">
|
||||
Fun Fact
|
||||
{t("funFactTitle")}
|
||||
</p>
|
||||
<p className="text-sm text-stone-700 leading-relaxed">
|
||||
Even though I automate a lot, I still use pen and paper
|
||||
for my calendar and notes – it helps me clear my head and
|
||||
stay focused.
|
||||
{t("funFactBody")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -54,27 +54,31 @@ export default function ActivityFeed() {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [isMinimized, setIsMinimized] = useState(false);
|
||||
const [hasActivity, setHasActivity] = useState(false);
|
||||
const [isTrackingEnabled, setIsTrackingEnabled] = useState(() => {
|
||||
// Check localStorage for tracking preference
|
||||
if (typeof window !== "undefined") {
|
||||
try {
|
||||
const stored = localStorage.getItem("activityTrackingEnabled");
|
||||
return stored !== "false"; // Default to true if not set
|
||||
} catch (error) {
|
||||
// localStorage might be disabled
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn('Failed to read tracking preference:', error);
|
||||
}
|
||||
return true; // Default to enabled
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
// NOTE: Don't read localStorage during initial render.
|
||||
// Doing so can cause a hydration mismatch (SSR default vs client preference),
|
||||
// which can leave the feed stuck in its initial (small/transparent) motion styles.
|
||||
const [isTrackingEnabled, setIsTrackingEnabled] = useState(true);
|
||||
const [quote, setQuote] = useState<{
|
||||
content: string;
|
||||
author: string;
|
||||
} | null>(null);
|
||||
|
||||
// Sync tracking preference after mount (client-only)
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
try {
|
||||
const stored = localStorage.getItem("activityTrackingEnabled");
|
||||
const enabled = stored !== "false"; // Default to true if not set
|
||||
setIsTrackingEnabled(enabled);
|
||||
} catch (error) {
|
||||
// localStorage might be disabled
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.warn("Failed to read tracking preference:", error);
|
||||
}
|
||||
// Keep default (enabled)
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Fetch data every 30 seconds (optimized to match server cache)
|
||||
useEffect(() => {
|
||||
// Don't fetch if tracking is disabled or during SSR
|
||||
@@ -84,8 +88,17 @@ export default function ActivityFeed() {
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const fallback: StatusData = {
|
||||
status: { text: "offline", color: "gray" },
|
||||
music: null,
|
||||
gaming: null,
|
||||
coding: null,
|
||||
};
|
||||
|
||||
// Check if fetch is available (should be, but safety check)
|
||||
if (typeof fetch === 'undefined') {
|
||||
setData(fallback);
|
||||
setHasActivity(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -104,6 +117,9 @@ export default function ActivityFeed() {
|
||||
if (process.env.NODE_ENV === 'development' && res) {
|
||||
console.warn('ActivityFeed: API returned non-OK status:', res.status);
|
||||
}
|
||||
// Don't stay in tiny "loading" state forever; show stable fallback UI.
|
||||
setData(fallback);
|
||||
setHasActivity(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -114,6 +130,8 @@ export default function ActivityFeed() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.warn('ActivityFeed: Failed to parse JSON response:', parseError);
|
||||
}
|
||||
setData(fallback);
|
||||
setHasActivity(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -131,6 +149,8 @@ export default function ActivityFeed() {
|
||||
}
|
||||
|
||||
if (!json || typeof json !== 'object') {
|
||||
setData(fallback);
|
||||
setHasActivity(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -168,7 +188,14 @@ export default function ActivityFeed() {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.error("Failed to fetch activity:", error);
|
||||
}
|
||||
// Don't set error state - just fail silently
|
||||
// Don't set error state - show stable fallback
|
||||
setData({
|
||||
status: { text: "offline", color: "gray" },
|
||||
music: null,
|
||||
gaming: null,
|
||||
coding: null,
|
||||
});
|
||||
setHasActivity(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1457,25 +1484,62 @@ export default function ActivityFeed() {
|
||||
};
|
||||
|
||||
// Don't render if tracking is disabled and no data
|
||||
if (!isTrackingEnabled && !data) return null;
|
||||
if (!isTrackingEnabled && !data) {
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="pointer-events-auto bg-black/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
|
||||
>
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity size={18} className="text-white" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-bold text-white">Live Activity</h3>
|
||||
<p className="text-[10px] text-white/50">Tracking disabled</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTracking}
|
||||
className="text-xs font-semibold px-3 py-1.5 rounded-full bg-white/10 text-white hover:bg-white/15 transition-colors border border-white/10"
|
||||
title="Enable activity tracking"
|
||||
>
|
||||
Enable
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// If tracking disabled but we have data, show a disabled state
|
||||
if (!isTrackingEnabled && data) {
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto">
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 font-sans w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)] pointer-events-none">
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
initial={false}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="bg-black/80 backdrop-blur-xl border border-white/10 rounded-xl p-3 shadow-2xl"
|
||||
className="pointer-events-auto bg-black/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
|
||||
>
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity size={18} className="text-white" />
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-bold text-white">Live Activity</h3>
|
||||
<p className="text-[10px] text-white/50">Tracking disabled</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTracking}
|
||||
className="flex items-center gap-2 text-white/60 hover:text-white transition-colors"
|
||||
title="Activity tracking is disabled. Click to enable."
|
||||
className="text-xs font-semibold px-3 py-1.5 rounded-full bg-white/10 text-white hover:bg-white/15 transition-colors border border-white/10"
|
||||
title="Enable activity tracking"
|
||||
>
|
||||
<Activity size={16} />
|
||||
<span className="text-xs">Tracking disabled</span>
|
||||
Enable
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
@@ -1487,9 +1551,9 @@ export default function ActivityFeed() {
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 md:bottom-6 md:right-6 flex flex-col items-end gap-3 z-40 font-sans pointer-events-none w-[280px] sm:w-[320px] max-w-[calc(100vw-2rem)]">
|
||||
<motion.div
|
||||
initial={{ scale: 0, opacity: 0 }}
|
||||
initial={false}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
className="pointer-events-auto bg-black/90 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
|
||||
className="pointer-events-auto bg-black/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden w-full"
|
||||
>
|
||||
<div className="w-full px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -1520,14 +1584,14 @@ export default function ActivityFeed() {
|
||||
if (isMinimized) {
|
||||
return (
|
||||
<motion.button
|
||||
initial={{ scale: 0 }}
|
||||
initial={false}
|
||||
animate={{ scale: 1 }}
|
||||
onClick={() => setIsMinimized(false)}
|
||||
className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto bg-black/80 backdrop-blur-xl border border-white/10 p-3 rounded-full shadow-2xl hover:scale-110 transition-transform"
|
||||
className="fixed bottom-4 right-4 md:bottom-6 md:right-6 z-40 pointer-events-auto bg-white/80 backdrop-blur-xl border border-white/60 p-3 rounded-full shadow-xl hover:scale-110 transition-transform"
|
||||
>
|
||||
<Activity size={20} className="text-white" />
|
||||
<Activity size={20} className="text-stone-900" />
|
||||
{activeCount > 0 && (
|
||||
<span className="absolute -top-1 -right-1 bg-green-500 text-white text-[10px] font-bold rounded-full w-5 h-5 flex items-center justify-center">
|
||||
<span className="absolute -top-1 -right-1 bg-stone-900 text-white text-[10px] font-bold rounded-full w-5 h-5 flex items-center justify-center">
|
||||
{activeCount}
|
||||
</span>
|
||||
)}
|
||||
@@ -1540,7 +1604,7 @@ export default function ActivityFeed() {
|
||||
{/* Main Container */}
|
||||
<motion.div
|
||||
layout
|
||||
className="pointer-events-auto bg-black/90 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl w-full overflow-hidden [&_a]:text-inherit [&_a]:no-underline"
|
||||
className="pointer-events-auto bg-black/95 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl w-full overflow-hidden [&_a]:text-inherit [&_a]:no-underline"
|
||||
>
|
||||
{/* Header - Always Visible - Changed from button to div to fix nesting error */}
|
||||
<div
|
||||
|
||||
@@ -292,11 +292,11 @@ export default function ChatWidget() {
|
||||
setIsOpen(true);
|
||||
}
|
||||
}}
|
||||
className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-[#292524] text-[#fdfcf8] p-3.5 rounded-full shadow-[0_8px_20px_rgba(41,37,36,0.25)] hover:bg-[#44403c] hover:scale-105 transition-all duration-300 group cursor-pointer border border-[#f3f1e7]/20 ring-1 ring-[#f3f1e7]/10"
|
||||
className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-white/80 backdrop-blur-xl text-stone-900 p-3.5 rounded-full shadow-[0_10px_26px_rgba(41,37,36,0.16)] hover:bg-white hover:scale-105 transition-all duration-300 group cursor-pointer border border-white/60 ring-1 ring-white/30"
|
||||
aria-label="Open chat"
|
||||
>
|
||||
<MessageCircle size={24} />
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-[#292524]" />
|
||||
<span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-white" />
|
||||
|
||||
{/* Tooltip */}
|
||||
<span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm">
|
||||
@@ -315,16 +315,16 @@ export default function ChatWidget() {
|
||||
animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
|
||||
exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 400 }}
|
||||
className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-[#fdfcf8]/95 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.2)] flex flex-col overflow-hidden border border-[#e7e5e4] ring-1 ring-[#f3f1e7]"
|
||||
className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-white/80 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.16)] flex flex-col overflow-hidden border border-white/60 ring-1 ring-white/30"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-[#fdfcf8] text-[#292524] p-4 flex items-center justify-between border-b border-[#e7e5e4]">
|
||||
<div className="bg-white/70 text-stone-900 p-4 flex items-center justify-between border-b border-white/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#f3f1e7] to-[#fdfcf8] flex items-center justify-center ring-1 ring-[#e7e5e4] shadow-sm">
|
||||
<Sparkles size={18} className="text-[#57534e]" />
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-liquid-mint/50 via-liquid-lavender/40 to-liquid-rose/40 flex items-center justify-center ring-1 ring-white/50 shadow-sm">
|
||||
<Sparkles size={18} className="text-stone-800" />
|
||||
</div>
|
||||
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-[#fdfcf8] shadow-sm" />
|
||||
<span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white shadow-sm" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
|
||||
@@ -366,12 +366,12 @@ export default function ChatWidget() {
|
||||
<div
|
||||
className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
|
||||
message.sender === "user"
|
||||
? "bg-[#292524] text-[#fdfcf8]"
|
||||
: "bg-[#f3f1e7] text-[#292524] border border-[#e7e5e4]"
|
||||
? "bg-stone-900 text-white"
|
||||
: "bg-white/70 text-stone-900 border border-white/60"
|
||||
}`}
|
||||
>
|
||||
<p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
|
||||
message.sender === "user" ? "text-[#fdfcf8]/90 font-light" : "text-[#292524] font-medium"
|
||||
message.sender === "user" ? "text-white/90 font-normal" : "text-stone-900 font-medium"
|
||||
}`}>
|
||||
{message.text}
|
||||
</p>
|
||||
|
||||
@@ -6,6 +6,7 @@ import dynamic from "next/dynamic";
|
||||
import { ToastProvider } from "@/components/Toast";
|
||||
import ErrorBoundary from "@/components/ErrorBoundary";
|
||||
import { AnalyticsProvider } from "@/components/AnalyticsProvider";
|
||||
import { ConsentProvider, useConsent } from "./ConsentProvider";
|
||||
|
||||
// Dynamic import with SSR disabled to avoid framer-motion issues
|
||||
const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
|
||||
@@ -70,16 +71,43 @@ export default function ClientProviders({
|
||||
return (
|
||||
<ErrorBoundary>
|
||||
<ErrorBoundary>
|
||||
<AnalyticsProvider>
|
||||
<ErrorBoundary>
|
||||
<ToastProvider>
|
||||
{mounted && <BackgroundBlobs />}
|
||||
<div className="relative z-10">{children}</div>
|
||||
{mounted && !is404Page && <ChatWidget />}
|
||||
</ToastProvider>
|
||||
</ErrorBoundary>
|
||||
</AnalyticsProvider>
|
||||
<ConsentProvider>
|
||||
<GatedProviders mounted={mounted} is404Page={is404Page}>
|
||||
{children}
|
||||
</GatedProviders>
|
||||
</ConsentProvider>
|
||||
</ErrorBoundary>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
function GatedProviders({
|
||||
children,
|
||||
mounted,
|
||||
is404Page,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
mounted: boolean;
|
||||
is404Page: boolean;
|
||||
}) {
|
||||
const { consent } = useConsent();
|
||||
const pathname = usePathname();
|
||||
|
||||
const isAdminRoute = pathname.startsWith("/manage") || pathname.startsWith("/editor");
|
||||
|
||||
// If consent is not decided yet, treat optional features as off
|
||||
const analyticsEnabled = !!consent?.analytics;
|
||||
const chatEnabled = !!consent?.chat;
|
||||
|
||||
const content = (
|
||||
<ErrorBoundary>
|
||||
<ToastProvider>
|
||||
{mounted && <BackgroundBlobs />}
|
||||
<div className="relative z-10">{children}</div>
|
||||
{mounted && !is404Page && !isAdminRoute && chatEnabled && <ChatWidget />}
|
||||
</ToastProvider>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
|
||||
return analyticsEnabled ? <AnalyticsProvider>{content}</AnalyticsProvider> : content;
|
||||
}
|
||||
|
||||
112
app/components/ConsentBanner.tsx
Normal file
112
app/components/ConsentBanner.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useConsent, type ConsentState } from "./ConsentProvider";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function ConsentBanner() {
|
||||
const { consent, setConsent } = useConsent();
|
||||
const [draft, setDraft] = useState<ConsentState>({ analytics: false, chat: false });
|
||||
const [minimized, setMinimized] = useState(false);
|
||||
const t = useTranslations("consent");
|
||||
|
||||
const shouldShow = consent === null;
|
||||
if (!shouldShow) return null;
|
||||
|
||||
const s = {
|
||||
title: t("title"),
|
||||
description: t("description"),
|
||||
essential: t("essential"),
|
||||
analytics: t("analytics"),
|
||||
chat: t("chat"),
|
||||
acceptAll: t("acceptAll"),
|
||||
acceptSelected: t("acceptSelected"),
|
||||
rejectAll: t("rejectAll"),
|
||||
};
|
||||
|
||||
if (minimized) {
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-[60]">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMinimized(false)}
|
||||
className="px-4 py-2 rounded-full bg-white/80 backdrop-blur-xl border border-white/60 shadow-lg text-stone-800 font-semibold hover:bg-white transition-colors"
|
||||
aria-label="Open privacy settings"
|
||||
>
|
||||
{s.title}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-4 right-4 z-[60] max-w-[calc(100vw-2rem)]">
|
||||
<div className="w-[360px] max-w-full bg-white/85 backdrop-blur-xl border border-white/60 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.14)] p-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-base font-bold text-stone-900">{s.title}</div>
|
||||
<p className="text-xs text-stone-600 mt-1 leading-snug">{s.description}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMinimized(true)}
|
||||
className="shrink-0 text-xs text-stone-500 hover:text-stone-900 transition-colors"
|
||||
aria-label="Minimize privacy banner"
|
||||
title="Minimize"
|
||||
>
|
||||
Hide
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-xs font-semibold text-stone-800">{s.essential}</div>
|
||||
<div className="text-[11px] text-stone-500">Always on</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center justify-between gap-3 py-1">
|
||||
<span className="text-sm font-semibold text-stone-800">{s.analytics}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.analytics}
|
||||
onChange={(e) => setDraft((p) => ({ ...p, analytics: e.target.checked }))}
|
||||
className="w-4 h-4 accent-stone-900"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center justify-between gap-3 py-1">
|
||||
<span className="text-sm font-semibold text-stone-800">{s.chat}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.chat}
|
||||
onChange={(e) => setDraft((p) => ({ ...p, chat: e.target.checked }))}
|
||||
className="w-4 h-4 accent-stone-900"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
<button
|
||||
onClick={() => setConsent({ analytics: true, chat: true })}
|
||||
className="px-4 py-2 rounded-xl bg-stone-900 text-stone-50 font-semibold hover:bg-stone-800 transition-colors"
|
||||
>
|
||||
{s.acceptAll}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConsent(draft)}
|
||||
className="px-4 py-2 rounded-xl bg-white border border-stone-200 text-stone-800 font-semibold hover:bg-stone-50 transition-colors"
|
||||
>
|
||||
{s.acceptSelected}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConsent({ analytics: false, chat: false })}
|
||||
className="px-4 py-2 rounded-xl bg-transparent text-stone-600 font-semibold hover:text-stone-900 transition-colors"
|
||||
>
|
||||
{s.rejectAll}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
76
app/components/ConsentProvider.tsx
Normal file
76
app/components/ConsentProvider.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
|
||||
|
||||
export type ConsentState = {
|
||||
analytics: boolean;
|
||||
chat: boolean;
|
||||
};
|
||||
|
||||
const COOKIE_NAME = "dk0_consent_v1";
|
||||
|
||||
function readConsentFromCookie(): ConsentState | null {
|
||||
if (typeof document === "undefined") return null;
|
||||
const match = document.cookie
|
||||
.split(";")
|
||||
.map((c) => c.trim())
|
||||
.find((c) => c.startsWith(`${COOKIE_NAME}=`));
|
||||
if (!match) return null;
|
||||
const value = decodeURIComponent(match.split("=").slice(1).join("="));
|
||||
try {
|
||||
const parsed = JSON.parse(value) as Partial<ConsentState>;
|
||||
return {
|
||||
analytics: !!parsed.analytics,
|
||||
chat: !!parsed.chat,
|
||||
};
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeConsentCookie(value: ConsentState) {
|
||||
const encoded = encodeURIComponent(JSON.stringify(value));
|
||||
// 180 days
|
||||
const maxAge = 60 * 60 * 24 * 180;
|
||||
document.cookie = `${COOKIE_NAME}=${encoded}; path=/; max-age=${maxAge}; samesite=lax`;
|
||||
}
|
||||
|
||||
const ConsentContext = createContext<{
|
||||
consent: ConsentState | null;
|
||||
setConsent: (next: ConsentState) => void;
|
||||
resetConsent: () => void;
|
||||
}>({
|
||||
consent: null,
|
||||
setConsent: () => {},
|
||||
resetConsent: () => {},
|
||||
});
|
||||
|
||||
export function ConsentProvider({ children }: { children: React.ReactNode }) {
|
||||
// Read cookie synchronously so we don't flash the banner on every reload.
|
||||
const [consent, setConsentState] = useState<ConsentState | null>(() => readConsentFromCookie());
|
||||
|
||||
const setConsent = useCallback((next: ConsentState) => {
|
||||
setConsentState(next);
|
||||
writeConsentCookie(next);
|
||||
}, []);
|
||||
|
||||
const resetConsent = useCallback(() => {
|
||||
setConsentState(null);
|
||||
// expire cookie
|
||||
document.cookie = `${COOKIE_NAME}=; path=/; max-age=0; samesite=lax`;
|
||||
}, []);
|
||||
|
||||
const value = useMemo(
|
||||
() => ({ consent, setConsent, resetConsent }),
|
||||
[consent, setConsent, resetConsent],
|
||||
);
|
||||
|
||||
return <ConsentContext.Provider value={value}>{children}</ConsentContext.Provider>;
|
||||
}
|
||||
|
||||
export function useConsent() {
|
||||
return useContext(ConsentContext);
|
||||
}
|
||||
|
||||
export const consentCookieName = COOKIE_NAME;
|
||||
|
||||
@@ -4,14 +4,35 @@ import { useState, useEffect } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Mail, MapPin, Send } from "lucide-react";
|
||||
import { useToast } from "@/components/Toast";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "./RichTextClient";
|
||||
|
||||
const Contact = () => {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { showEmailSent, showEmailError } = useToast();
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("home.contact");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/content/page?key=${encodeURIComponent("home-contact")}&locale=${encodeURIComponent(locale)}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
// Only use CMS content if it exists for the active locale.
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
} else {
|
||||
setCmsDoc(null);
|
||||
}
|
||||
} catch {
|
||||
// ignore; fallback to static
|
||||
setCmsDoc(null);
|
||||
}
|
||||
})();
|
||||
}, [locale]);
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
@@ -143,10 +164,6 @@ const Contact = () => {
|
||||
},
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
id="contact"
|
||||
@@ -162,12 +179,15 @@ const Contact = () => {
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
|
||||
Contact Me
|
||||
{t("title")}
|
||||
</h2>
|
||||
{cmsDoc ? (
|
||||
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-2xl mx-auto mt-4 text-stone-700" />
|
||||
) : (
|
||||
<p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
|
||||
Interested in working together or have questions about my projects?
|
||||
Feel free to reach out!
|
||||
{t("subtitle")}
|
||||
</p>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
@@ -181,12 +201,10 @@ const Contact = () => {
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-stone-900 mb-6">
|
||||
Get In Touch
|
||||
{t("getInTouch")}
|
||||
</h3>
|
||||
<p className="text-stone-700 leading-relaxed">
|
||||
I'm always available to discuss new opportunities,
|
||||
interesting projects, or simply chat about technology and
|
||||
innovation.
|
||||
{t("getInTouchBody")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,14 +5,16 @@ import { motion } from 'framer-motion';
|
||||
import { Heart, Code } from 'lucide-react';
|
||||
import { SiGithub, SiLinkedin } from 'react-icons/si';
|
||||
import Link from 'next/link';
|
||||
import { useLocale } from "next-intl";
|
||||
import { useConsent } from "./ConsentProvider";
|
||||
|
||||
const Footer = () => {
|
||||
const [currentYear, setCurrentYear] = useState(2024);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const locale = useLocale();
|
||||
const { resetConsent } = useConsent();
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentYear(new Date().getFullYear());
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const socialLinks = [
|
||||
@@ -20,10 +22,6 @@ const Footer = () => {
|
||||
{ icon: SiLinkedin, href: 'https://linkedin.com/in/dkonkol', label: 'LinkedIn' }
|
||||
];
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<footer className="relative py-12 px-4 bg-white border-t border-stone-200">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
@@ -44,7 +42,7 @@ const Footer = () => {
|
||||
<Code className="w-6 h-6 text-stone-800" />
|
||||
</motion.div>
|
||||
<div>
|
||||
<Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
|
||||
<Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
|
||||
dk<span className="text-liquid-rose">0</span>
|
||||
</Link>
|
||||
<p className="text-xs text-stone-500">Software Engineer</p>
|
||||
@@ -104,17 +102,25 @@ const Footer = () => {
|
||||
>
|
||||
<div className="flex space-x-6 text-sm">
|
||||
<Link
|
||||
href="/legal-notice"
|
||||
href={`/${locale}/legal-notice`}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
>
|
||||
Impressum
|
||||
</Link>
|
||||
<Link
|
||||
href="/privacy-policy"
|
||||
href={`/${locale}/privacy-policy`}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => resetConsent()}
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
|
||||
title="Show privacy settings banner again"
|
||||
>
|
||||
Privacy settings
|
||||
</button>
|
||||
<Link
|
||||
href="/404"
|
||||
className="text-stone-500 hover:text-stone-800 transition-colors duration-200 font-mono text-xs"
|
||||
|
||||
@@ -5,18 +5,18 @@ import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Mail } from "lucide-react";
|
||||
import { SiGithub, SiLinkedin } from "react-icons/si";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
|
||||
const Header = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const locale = useLocale();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const t = useTranslations("nav");
|
||||
|
||||
useEffect(() => {
|
||||
// Use requestAnimationFrame to ensure smooth transition
|
||||
requestAnimationFrame(() => {
|
||||
setMounted(true);
|
||||
});
|
||||
}, []);
|
||||
const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
@@ -28,10 +28,10 @@ const Header = () => {
|
||||
}, []);
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "About", href: "#about" },
|
||||
{ name: "Projects", href: "#projects" },
|
||||
{ name: "Contact", href: "#contact" },
|
||||
{ name: t("home"), href: `/${locale}` },
|
||||
{ name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
|
||||
{ name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
|
||||
{ name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
|
||||
];
|
||||
|
||||
const socialLinks = [
|
||||
@@ -44,16 +44,21 @@ const Header = () => {
|
||||
{ icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
|
||||
];
|
||||
|
||||
const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
|
||||
const qs = searchParams.toString();
|
||||
const query = qs ? `?${qs}` : "";
|
||||
const enHref = `/en${pathWithoutLocale}${query}`;
|
||||
const deHref = `/de${pathWithoutLocale}${query}`;
|
||||
|
||||
// Always render to prevent flash, but use opacity transition
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.header
|
||||
initial={false}
|
||||
animate={{ y: 0, opacity: mounted ? 1 : 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none"
|
||||
style={{ opacity: mounted ? 1 : 0 }}
|
||||
>
|
||||
<div
|
||||
className={`pointer-events-auto transition-all duration-500 ease-out ${
|
||||
@@ -62,7 +67,7 @@ const Header = () => {
|
||||
>
|
||||
<motion.div
|
||||
initial={false}
|
||||
animate={{ opacity: mounted ? 1 : 0, y: 0 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className={`
|
||||
backdrop-blur-xl transition-all duration-500
|
||||
@@ -79,7 +84,7 @@ const Header = () => {
|
||||
className="flex items-center space-x-2"
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
|
||||
>
|
||||
dk<span className="text-red-500">0</span>
|
||||
@@ -126,6 +131,30 @@ const Header = () => {
|
||||
</nav>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-3">
|
||||
<div className="flex items-center bg-white/40 border border-white/50 rounded-full overflow-hidden shadow-sm">
|
||||
<Link
|
||||
href={enHref}
|
||||
className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
|
||||
locale === "en"
|
||||
? "bg-stone-900 text-stone-50"
|
||||
: "text-stone-700 hover:bg-white/60"
|
||||
}`}
|
||||
aria-label="Switch language to English"
|
||||
>
|
||||
EN
|
||||
</Link>
|
||||
<Link
|
||||
href={deHref}
|
||||
className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
|
||||
locale === "de"
|
||||
? "bg-stone-900 text-stone-50"
|
||||
: "text-stone-700 hover:bg-white/60"
|
||||
}`}
|
||||
aria-label="Sprache auf Deutsch umstellen"
|
||||
>
|
||||
DE
|
||||
</Link>
|
||||
</div>
|
||||
{socialLinks.map((social) => (
|
||||
<motion.a
|
||||
key={social.label}
|
||||
@@ -145,6 +174,7 @@ const Header = () => {
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-full bg-white/40 hover:bg-white/60 text-stone-800 transition-colors liquid-hover"
|
||||
aria-label={isOpen ? "Close menu" : "Open menu"}
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</motion.button>
|
||||
|
||||
@@ -2,13 +2,42 @@
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "./RichTextClient";
|
||||
|
||||
const Hero = () => {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("home.hero");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/content/page?key=${encodeURIComponent("home-hero")}&locale=${encodeURIComponent(locale)}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
// Only use CMS content if it exists for the active locale.
|
||||
// If the API falls back to another locale, keep showing next-intl strings
|
||||
// so the locale switch visibly changes the page.
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
} else {
|
||||
setCmsDoc(null);
|
||||
}
|
||||
} catch {
|
||||
// ignore; fallback to static
|
||||
setCmsDoc(null);
|
||||
}
|
||||
})();
|
||||
}, [locale]);
|
||||
|
||||
const features = [
|
||||
{ icon: Code, text: "Next.js & Flutter" },
|
||||
{ icon: Zap, text: "Docker Swarm & CI/CD" },
|
||||
{ icon: Rocket, text: "Self-Hosted Infrastructure" },
|
||||
{ icon: Code, text: t("features.f1") },
|
||||
{ icon: Zap, text: t("features.f2") },
|
||||
{ icon: Rocket, text: t("features.f3") },
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -81,12 +110,13 @@ const Hero = () => {
|
||||
repeatType: "reverse",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
{/* Use a plain <img> to fully bypass Next.js image optimizer (dev 400 issue). */}
|
||||
<img
|
||||
src="/images/me.jpg"
|
||||
alt="Dennis Konkol"
|
||||
fill
|
||||
className="object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
|
||||
priority
|
||||
className="absolute inset-0 w-full h-full object-cover scale-105 hover:scale-[1.08] transition-transform duration-1000 ease-out"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
|
||||
{/* Glossy Overlay for Liquid Feel */}
|
||||
@@ -146,26 +176,18 @@ const Hero = () => {
|
||||
</motion.div>
|
||||
|
||||
{/* Description */}
|
||||
<motion.p
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
Student and passionate{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
|
||||
self-hoster
|
||||
</span>{" "}
|
||||
building full-stack web apps and mobile solutions. I run my own{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-4">
|
||||
infrastructure
|
||||
</span>{" "}
|
||||
and love exploring{" "}
|
||||
<span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-4">
|
||||
DevOps
|
||||
</span>
|
||||
.
|
||||
</motion.p>
|
||||
{cmsDoc ? (
|
||||
<RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
|
||||
) : (
|
||||
<p>{t("description")}</p>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Features */}
|
||||
<motion.div
|
||||
@@ -209,7 +231,7 @@ const Hero = () => {
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="px-8 py-4 bg-stone-900 text-cream rounded-full shadow-lg hover:shadow-xl hover:bg-stone-950 transition-all duration-500 flex items-center gap-2"
|
||||
>
|
||||
<span className="text-cream">View My Work</span>
|
||||
<span className="text-cream">{t("ctaWork")}</span>
|
||||
<ArrowDown size={18} />
|
||||
</motion.a>
|
||||
|
||||
@@ -220,7 +242,7 @@ const Hero = () => {
|
||||
transition={{ duration: 0.3, ease: "easeOut" }}
|
||||
className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all duration-500"
|
||||
>
|
||||
<span>Contact Me</span>
|
||||
<span>{t("ctaContact")}</span>
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { motion, Variants } from "framer-motion";
|
||||
import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { useLocale } from "next-intl";
|
||||
|
||||
const fadeInUp: Variants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
@@ -31,6 +32,7 @@ const staggerContainer: Variants = {
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
@@ -45,6 +47,7 @@ interface Project {
|
||||
|
||||
const Projects = () => {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const locale = useLocale();
|
||||
|
||||
useEffect(() => {
|
||||
const loadProjects = async () => {
|
||||
@@ -175,7 +178,7 @@ const Projects = () => {
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
{/* Stretched Link covering the whole card (including image area) */}
|
||||
<Link
|
||||
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
||||
href={`/${locale}/projects/${project.slug}`}
|
||||
className="absolute inset-0 z-10"
|
||||
aria-label={`View project ${project.title}`}
|
||||
/>
|
||||
@@ -247,7 +250,7 @@ const Projects = () => {
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<Link
|
||||
href="/projects"
|
||||
href={`/${locale}/projects`}
|
||||
className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
|
||||
>
|
||||
View All Projects <ArrowRight size={16} />
|
||||
|
||||
21
app/components/RichText.tsx
Normal file
21
app/components/RichText.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import { richTextToSafeHtml } from "@/lib/richtext";
|
||||
|
||||
export default function RichText({
|
||||
doc,
|
||||
className,
|
||||
}: {
|
||||
doc: JSONContent;
|
||||
className?: string;
|
||||
}) {
|
||||
const html = richTextToSafeHtml(doc);
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
// HTML is sanitized in `richTextToSafeHtml`
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
24
app/components/RichTextClient.tsx
Normal file
24
app/components/RichTextClient.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo } from "react";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import { richTextToSafeHtml } from "@/lib/richtext";
|
||||
|
||||
export default function RichTextClient({
|
||||
doc,
|
||||
className,
|
||||
}: {
|
||||
doc: JSONContent;
|
||||
className?: string;
|
||||
}) {
|
||||
const html = useMemo(() => richTextToSafeHtml(doc), [doc]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
// HTML is sanitized in `richTextToSafeHtml`
|
||||
dangerouslySetInnerHTML={{ __html: html }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -50,6 +50,7 @@ interface Project {
|
||||
function EditorPageContent() {
|
||||
const searchParams = useSearchParams();
|
||||
const projectId = searchParams.get("id");
|
||||
const initialLocale = searchParams.get("locale") || "en";
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const { showSuccess, showError } = useToast();
|
||||
|
||||
@@ -58,6 +59,8 @@ function EditorPageContent() {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(!projectId);
|
||||
const [editLocale, setEditLocale] = useState(initialLocale);
|
||||
const [baseTexts, setBaseTexts] = useState<{ title: string; description: string } | null>(null);
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
const [_isTyping, setIsTyping] = useState(false);
|
||||
const [history, setHistory] = useState<typeof formData[]>([]);
|
||||
@@ -90,6 +93,10 @@ function EditorPageContent() {
|
||||
);
|
||||
|
||||
if (foundProject) {
|
||||
setBaseTexts({
|
||||
title: foundProject.title || "",
|
||||
description: foundProject.description || "",
|
||||
});
|
||||
const initialData = {
|
||||
title: foundProject.title || "",
|
||||
description: foundProject.description || "",
|
||||
@@ -127,6 +134,30 @@ function EditorPageContent() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadTranslation = useCallback(async (id: string, locale: string) => {
|
||||
if (!id || !locale || locale === "en") return;
|
||||
try {
|
||||
const response = await fetch(`/api/projects/${id}/translation?locale=${encodeURIComponent(locale)}`, {
|
||||
headers: {
|
||||
"x-admin-request": "true",
|
||||
"x-session-token": sessionStorage.getItem("admin_session_token") || "",
|
||||
},
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const data = await response.json();
|
||||
const tr = data.translation as { title?: string; description?: string } | null;
|
||||
if (tr?.title && tr?.description) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
title: tr.title || prev.title,
|
||||
description: tr.description || prev.description,
|
||||
}));
|
||||
}
|
||||
} catch {
|
||||
// ignore translation load failures
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Check authentication and load project
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
@@ -141,6 +172,7 @@ function EditorPageContent() {
|
||||
// Load project if editing
|
||||
if (projectId) {
|
||||
await loadProject(projectId);
|
||||
await loadTranslation(projectId, editLocale);
|
||||
} else {
|
||||
setIsCreating(true);
|
||||
// Initialize history for new project
|
||||
@@ -182,7 +214,7 @@ function EditorPageContent() {
|
||||
};
|
||||
|
||||
init();
|
||||
}, [projectId, loadProject]);
|
||||
}, [projectId, loadProject, loadTranslation, editLocale]);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
try {
|
||||
@@ -205,9 +237,13 @@ function EditorPageContent() {
|
||||
const method = projectId ? "PUT" : "POST";
|
||||
|
||||
// Prepare data for saving - only include fields that exist in the database schema
|
||||
const saveTitle = editLocale === "en" ? formData.title.trim() : (baseTexts?.title || formData.title.trim());
|
||||
const saveDescription =
|
||||
editLocale === "en" ? formData.description.trim() : (baseTexts?.description || formData.description.trim());
|
||||
|
||||
const saveData = {
|
||||
title: formData.title.trim(),
|
||||
description: formData.description.trim(),
|
||||
title: saveTitle,
|
||||
description: saveDescription,
|
||||
content: formData.content.trim(),
|
||||
category: formData.category,
|
||||
tags: formData.tags,
|
||||
@@ -252,6 +288,27 @@ function EditorPageContent() {
|
||||
// Show success toast (smaller, smoother)
|
||||
showSuccess("Saved", `"${savedProject.title}" saved`);
|
||||
|
||||
// Save translation if editing a non-default locale
|
||||
if (projectId && editLocale !== "en") {
|
||||
try {
|
||||
await fetch(`/api/projects/${projectId}/translation`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-admin-request": "true",
|
||||
"x-session-token": sessionStorage.getItem("admin_session_token") || "",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
locale: editLocale,
|
||||
title: formData.title.trim(),
|
||||
description: formData.description.trim(),
|
||||
}),
|
||||
});
|
||||
} catch {
|
||||
// ignore translation save failures
|
||||
}
|
||||
}
|
||||
|
||||
// Update project ID if it was a new project
|
||||
if (!projectId && savedProject.id) {
|
||||
const newUrl = `/editor?id=${savedProject.id}`;
|
||||
@@ -275,7 +332,7 @@ function EditorPageContent() {
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}, [projectId, formData, showSuccess, showError]);
|
||||
}, [projectId, formData, showSuccess, showError, editLocale, baseTexts]);
|
||||
|
||||
const handleInputChange = (
|
||||
field: string,
|
||||
@@ -645,6 +702,34 @@ function EditorPageContent() {
|
||||
</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-300 mb-2">
|
||||
Language
|
||||
</label>
|
||||
<div className="custom-select">
|
||||
<select
|
||||
value={editLocale}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value;
|
||||
setEditLocale(next);
|
||||
if (projectId) {
|
||||
// Update URL for deep-linking and reload translation
|
||||
const newUrl = `/editor?id=${projectId}&locale=${encodeURIComponent(next)}`;
|
||||
window.history.replaceState({}, "", newUrl);
|
||||
loadTranslation(projectId, next);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value="en">English (default)</option>
|
||||
<option value="de">Deutsch</option>
|
||||
</select>
|
||||
</div>
|
||||
{editLocale !== "en" && (
|
||||
<p className="text-xs text-stone-400 mt-2">
|
||||
Title/description are saved as a translation. Other fields are global.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-300 mb-2">
|
||||
Category
|
||||
|
||||
@@ -3,27 +3,24 @@ import { Metadata } from "next";
|
||||
import { Inter } from "next/font/google";
|
||||
import React from "react";
|
||||
import ClientProviders from "./components/ClientProviders";
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export default function RootLayout({
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const cookieStore = await cookies();
|
||||
const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
|
||||
return (
|
||||
<html lang="en">
|
||||
<html lang={locale}>
|
||||
<head>
|
||||
<script
|
||||
defer
|
||||
src="https://analytics.dk0.dev/script.js"
|
||||
data-website-id="b3665829-927a-4ada-b9bb-fcf24171061e"
|
||||
></script>
|
||||
<meta charSet="utf-8" />
|
||||
<title>Dennis Konkol's Portfolio</title>
|
||||
</head>
|
||||
<body className={inter.variable} suppressHydrationWarning>
|
||||
<ClientProviders>{children}</ClientProviders>
|
||||
|
||||
@@ -6,8 +6,40 @@ import { ArrowLeft } from 'lucide-react';
|
||||
import Header from "../components/Header";
|
||||
import Footer from "../components/Footer";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "../components/RichTextClient";
|
||||
|
||||
export default function LegalNotice() {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("common");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
const [cmsTitle, setCmsTitle] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/content/page?key=${encodeURIComponent("legal-notice")}&locale=${encodeURIComponent(locale)}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
// Only use CMS content if it exists for the active locale.
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
setCmsTitle((data.content.title as string | null) ?? null);
|
||||
} else {
|
||||
setCmsDoc(null);
|
||||
setCmsTitle(null);
|
||||
}
|
||||
} catch {
|
||||
// ignore; fallback to static content
|
||||
setCmsDoc(null);
|
||||
setCmsTitle(null);
|
||||
}
|
||||
})();
|
||||
}, [locale]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen animated-bg">
|
||||
<Header />
|
||||
@@ -19,15 +51,15 @@ export default function LegalNotice() {
|
||||
className="mb-8"
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
href={`/${locale}`}
|
||||
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back to Home</span>
|
||||
<span>{t("backToHome")}</span>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
|
||||
Impressum
|
||||
{cmsTitle || "Impressum"}
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
@@ -37,33 +69,51 @@ export default function LegalNotice() {
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="glass-card p-8 rounded-2xl space-y-6"
|
||||
>
|
||||
{cmsDoc ? (
|
||||
<RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-gray-300 leading-relaxed">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Verantwortlicher für die Inhalte dieser Website
|
||||
</h2>
|
||||
<h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Inhalte dieser Website</h2>
|
||||
<div className="space-y-2 text-gray-300">
|
||||
<p><strong>Name:</strong> Dennis Konkol</p>
|
||||
<p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
|
||||
<p><strong>E-Mail:</strong> <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">info@dk0.dev</Link></p>
|
||||
<p><strong>Website:</strong> <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">dk0.dev</Link></p>
|
||||
<p>
|
||||
<strong>Name:</strong> Dennis Konkol
|
||||
</p>
|
||||
<p>
|
||||
<strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
|
||||
</p>
|
||||
<p>
|
||||
<strong>E-Mail:</strong>{" "}
|
||||
<Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||||
info@dk0.dev
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Website:</strong>{" "}
|
||||
<Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||||
dk0.dev
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-gray-300">
|
||||
<h2 className="text-2xl font-semiboldmb-4">Haftung für Links</h2>
|
||||
<h2 className="text-2xl font-semibold mb-4">Haftung für Links</h2>
|
||||
<p className="leading-relaxed">
|
||||
Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser Websites
|
||||
und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der Betreiber oder
|
||||
Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum Zeitpunkt der Verlinkung
|
||||
auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Links umgehend entfernen.
|
||||
Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser
|
||||
Websites und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
|
||||
Betreiber oder Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum
|
||||
Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde
|
||||
ich derartige Links umgehend entfernen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="text-gray-300">
|
||||
<h2 className="text-2xl font-semibold mb-4">Urheberrecht</h2>
|
||||
<p className="leading-relaxed">
|
||||
Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter Urheberrechtsschutz.
|
||||
Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist verboten.
|
||||
Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter
|
||||
Urheberrechtsschutz. Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist
|
||||
verboten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -71,13 +121,16 @@ export default function LegalNotice() {
|
||||
<h2 className="text-2xl font-semibold mb-4">Gewährleistung</h2>
|
||||
<p className="leading-relaxed">
|
||||
Die Nutzung der Inhalte dieser Website erfolgt auf eigene Gefahr. Als Diensteanbieter kann ich keine
|
||||
Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser Website.
|
||||
Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser
|
||||
Website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-gray-700">
|
||||
<p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -26,21 +26,21 @@ const KernelPanic404 = dynamic(() => import("./components/KernelPanic404Wrapper"
|
||||
});
|
||||
|
||||
export default function NotFound() {
|
||||
// In tests, avoid next/dynamic loadable timing and render a stable fallback
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
return (
|
||||
<div>
|
||||
Oops! The page you're looking for doesn't exist.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// In tests, avoid next/dynamic loadable timing and render a stable fallback
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
return (
|
||||
<div>
|
||||
Oops! The page you're looking for doesn't exist.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div style={{
|
||||
|
||||
181
app/page.tsx
181
app/page.tsx
@@ -1,177 +1,8 @@
|
||||
"use client";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cookies } from "next/headers";
|
||||
|
||||
import Header from "./components/Header";
|
||||
import Hero from "./components/Hero";
|
||||
import About from "./components/About";
|
||||
import Projects from "./components/Projects";
|
||||
import Contact from "./components/Contact";
|
||||
import Footer from "./components/Footer";
|
||||
import Script from "next/script";
|
||||
import dynamic from "next/dynamic";
|
||||
import ErrorBoundary from "@/components/ErrorBoundary";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
// Wrap ActivityFeed in error boundary to prevent crashes
|
||||
const ActivityFeed = dynamic(() => import("./components/ActivityFeed").catch(() => ({ default: () => null })), {
|
||||
ssr: false,
|
||||
loading: () => null,
|
||||
});
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Script
|
||||
id={"structured-data"}
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Person",
|
||||
name: "Dennis Konkol",
|
||||
url: "https://dk0.dev",
|
||||
jobTitle: "Software Engineer",
|
||||
address: {
|
||||
"@type": "PostalAddress",
|
||||
addressLocality: "Osnabrück",
|
||||
addressCountry: "Germany",
|
||||
},
|
||||
sameAs: [
|
||||
"https://github.com/Denshooter",
|
||||
"https://linkedin.com/in/dkonkol",
|
||||
],
|
||||
}),
|
||||
}}
|
||||
/>
|
||||
<ErrorBoundary>
|
||||
<ActivityFeed />
|
||||
</ErrorBoundary>
|
||||
<Header />
|
||||
{/* Spacer to prevent navbar overlap */}
|
||||
<div className="h-24 md:h-32" aria-hidden="true"></div>
|
||||
<main className="relative">
|
||||
<Hero />
|
||||
|
||||
{/* Wavy Separator 1 - Hero to About */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<motion.path
|
||||
d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient1)"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
d: [
|
||||
"M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
|
||||
"M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
|
||||
"M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 0.8, delay: 0.3 },
|
||||
d: {
|
||||
duration: 12,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<About />
|
||||
|
||||
{/* Wavy Separator 2 - About to Projects */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<motion.path
|
||||
d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient2)"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
d: [
|
||||
"M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
|
||||
"M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
|
||||
"M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 0.8, delay: 0.3 },
|
||||
d: {
|
||||
duration: 14,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#FED7AA" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#FDE68A" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Projects />
|
||||
|
||||
{/* Wavy Separator 3 - Projects to Contact */}
|
||||
<div className="relative h-24 overflow-hidden">
|
||||
<svg
|
||||
className="absolute inset-0 w-full h-full"
|
||||
viewBox="0 0 1440 120"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<motion.path
|
||||
d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
|
||||
fill="url(#gradient3)"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
d: [
|
||||
"M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
|
||||
"M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
|
||||
"M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
|
||||
],
|
||||
}}
|
||||
transition={{
|
||||
opacity: { duration: 0.8, delay: 0.3 },
|
||||
d: {
|
||||
duration: 16,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#99F6E4" stopOpacity="0.4" />
|
||||
<stop offset="50%" stopColor="#A7F3D0" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#D9F99D" stopOpacity="0.4" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<Contact />
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
export default async function RootRedirectPage() {
|
||||
const cookieStore = await cookies();
|
||||
const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
|
||||
redirect(`/${locale}`);
|
||||
}
|
||||
|
||||
@@ -6,8 +6,40 @@ import { ArrowLeft } from 'lucide-react';
|
||||
import Header from "../components/Header";
|
||||
import Footer from "../components/Footer";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import RichTextClient from "../components/RichTextClient";
|
||||
|
||||
export default function PrivacyPolicy() {
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("common");
|
||||
const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
|
||||
const [cmsTitle, setCmsTitle] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/content/page?key=${encodeURIComponent("privacy-policy")}&locale=${encodeURIComponent(locale)}`,
|
||||
);
|
||||
const data = await res.json();
|
||||
// Only use CMS content if it exists for the active locale.
|
||||
if (data?.content?.content && data?.content?.locale === locale) {
|
||||
setCmsDoc(data.content.content as JSONContent);
|
||||
setCmsTitle((data.content.title as string | null) ?? null);
|
||||
} else {
|
||||
setCmsDoc(null);
|
||||
setCmsTitle(null);
|
||||
}
|
||||
} catch {
|
||||
// ignore; fallback to static content
|
||||
setCmsDoc(null);
|
||||
setCmsTitle(null);
|
||||
}
|
||||
})();
|
||||
}, [locale]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen animated-bg">
|
||||
<Header />
|
||||
@@ -19,15 +51,15 @@ export default function PrivacyPolicy() {
|
||||
className="mb-8"
|
||||
>
|
||||
<motion.a
|
||||
href="/"
|
||||
href={`/${locale}`}
|
||||
className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
<span>Back to Home</span>
|
||||
<span>{t("backToHome")}</span>
|
||||
</motion.a>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
|
||||
Datenschutzerklärung
|
||||
{cmsTitle || "Datenschutzerklärung"}
|
||||
</h1>
|
||||
</motion.div>
|
||||
|
||||
@@ -37,6 +69,10 @@ export default function PrivacyPolicy() {
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="glass-card p-8 rounded-2xl space-y-6 text-white"
|
||||
>
|
||||
{cmsDoc ? (
|
||||
<RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
|
||||
) : (
|
||||
<>
|
||||
<div className="text-gray-300 leading-relaxed">
|
||||
<p>
|
||||
Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie
|
||||
@@ -45,25 +81,39 @@ export default function PrivacyPolicy() {
|
||||
</div>
|
||||
|
||||
<div className="text-gray-300 leading-relaxed">
|
||||
<h2 className="text-2xl font-semibold mb-4">
|
||||
Verantwortlicher für die Datenverarbeitung
|
||||
</h2>
|
||||
<h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Datenverarbeitung</h2>
|
||||
<div className="space-y-2 text-gray-300">
|
||||
<p><strong>Name:</strong> Dennis Konkol</p>
|
||||
<p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
|
||||
<p><strong>E-Mail:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">info@dk0.dev</Link></p>
|
||||
<p><strong>Website:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">dk0.dev</Link></p>
|
||||
</div>
|
||||
<p className="mt-4">
|
||||
Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.
|
||||
<p>
|
||||
<strong>Name:</strong> Dennis Konkol
|
||||
</p>
|
||||
<p>
|
||||
<strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
|
||||
</p>
|
||||
<p>
|
||||
<strong>E-Mail:</strong>{" "}
|
||||
<Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">
|
||||
info@dk0.dev
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<strong>Website:</strong>{" "}
|
||||
<Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">
|
||||
dk0.dev
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-4">
|
||||
Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
|
||||
Verantwortlichen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-semibold mt-6">
|
||||
Erfassung allgemeiner Informationen beim Besuch meiner Website
|
||||
</h2>
|
||||
<div className="mt-2">
|
||||
Beim Zugriff auf meiner Website werden automatisch Informationen
|
||||
allgemeiner Natur erfasst. Diese beinhalten unter anderem:
|
||||
Beim Zugriff auf meiner Website werden automatisch Informationen allgemeiner Natur erfasst. Diese
|
||||
beinhalten unter anderem:
|
||||
<ul className="list-disc list-inside mt-2">
|
||||
<li>IP-Adresse (in anonymisierter Form)</li>
|
||||
<li>Uhrzeit</li>
|
||||
@@ -72,23 +122,23 @@ export default function PrivacyPolicy() {
|
||||
<li>Referrer-URL (die zuvor besuchte Seite)</li>
|
||||
</ul>
|
||||
<br />
|
||||
Diese Informationen werden anonymisiert erfasst und dienen
|
||||
ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre
|
||||
Person sind nicht möglich. Diese Daten werden verarbeitet, um:
|
||||
Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
|
||||
Rückschlüsse auf Ihre Person sind nicht möglich. Diese Daten werden verarbeitet, um:
|
||||
<ul className="list-disc list-inside mt-2">
|
||||
<li>die Inhalte meiner Website korrekt auszuliefern,</li>
|
||||
<li>die Inhalte meiner Website zu optimieren,</li>
|
||||
<li>die Systemsicherheit und -stabilität zu analysiern.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-semibold mt-6">Cookies</h2>
|
||||
<p className="mt-2">
|
||||
Meine Website verwendet keine Cookies. Daher ist kein
|
||||
Cookie-Consent-Banner erforderlich.
|
||||
Diese Website verwendet ein technisch notwendiges Cookie, um deine Datenschutz-Einstellungen (z.B.
|
||||
Analytics/Chatbot) zu speichern. Ohne dieses Cookie wäre ein Consent-Banner bei jedem Besuch erneut
|
||||
nötig.
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold mt-6">
|
||||
Analyse- und Tracking-Tools
|
||||
</h2>
|
||||
|
||||
<h2 className="text-2xl font-semibold mt-6">Analyse- und Tracking-Tools</h2>
|
||||
<p className="mt-2">
|
||||
Die nachfolgend beschriebene Analyse- und Tracking-Methode (im
|
||||
Folgenden „Maßnahme“ genannt) basiert auf Art. 6 Abs. 1 S. 1 lit. f
|
||||
@@ -118,6 +168,11 @@ export default function PrivacyPolicy() {
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
Zusätzlich kann diese Website optionale, selbst gehostete
|
||||
Nutzungsstatistiken erfassen (z.B. Seitenaufrufe, Performance-Metriken),
|
||||
die erst nach deiner Einwilligung im Consent-Banner aktiviert werden.
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold mt-6">Kontaktformular</h2>
|
||||
<p className="mt-2">
|
||||
Wenn Sie das Kontaktformular nutzen, werden Ihre Angaben zur
|
||||
@@ -126,6 +181,17 @@ export default function PrivacyPolicy() {
|
||||
<br />
|
||||
Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold mt-6">Chatbot</h2>
|
||||
<p className="mt-2">
|
||||
Wenn du den optionalen Chatbot nutzt, werden die von dir eingegebenen
|
||||
Nachrichten verarbeitet, um eine Antwort zu generieren. Die Verarbeitung
|
||||
kann dabei über eine selbst gehostete Automations-/Chat-Infrastruktur
|
||||
(z.B. n8n) erfolgen. Bitte gib im Chat keine sensiblen Daten ein.
|
||||
<br />
|
||||
<br />
|
||||
Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung) – der
|
||||
Chatbot wird erst nach Aktivierung im Consent-Banner geladen.
|
||||
</p>
|
||||
<h2 className="text-2xl font-semibold mt-6">Social Media Links</h2>
|
||||
<p className="mt-2">
|
||||
Unsere Website enthält Links zu GitHub und LinkedIn. Durch das
|
||||
@@ -233,6 +299,8 @@ export default function PrivacyPolicy() {
|
||||
<div className="pt-4 border-t border-gray-700">
|
||||
<p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -6,9 +6,11 @@ import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { useState, useEffect } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
@@ -24,6 +26,8 @@ interface Project {
|
||||
const ProjectDetail = () => {
|
||||
const params = useParams();
|
||||
const slug = params.slug as string;
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("common");
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
|
||||
// Load project from API by slug
|
||||
@@ -90,11 +94,11 @@ const ProjectDetail = () => {
|
||||
className="mb-8"
|
||||
>
|
||||
<Link
|
||||
href="/projects"
|
||||
href={`/${locale}/projects`}
|
||||
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span className="font-medium">Back to Projects</span>
|
||||
<span className="font-medium">{t("backToProjects")}</span>
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
|
||||
@@ -4,9 +4,11 @@ import { useState, useEffect } from "react";
|
||||
import { motion } from 'framer-motion';
|
||||
import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
|
||||
interface Project {
|
||||
id: number;
|
||||
slug: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
@@ -26,6 +28,8 @@ const ProjectsPage = () => {
|
||||
const [selectedCategory, setSelectedCategory] = useState("All");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const locale = useLocale();
|
||||
const t = useTranslations("common");
|
||||
|
||||
// Load projects from API
|
||||
useEffect(() => {
|
||||
@@ -87,11 +91,11 @@ const ProjectsPage = () => {
|
||||
className="mb-12"
|
||||
>
|
||||
<Link
|
||||
href="/"
|
||||
href={`/${locale}`}
|
||||
className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
|
||||
>
|
||||
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||
<span>Back to Home</span>
|
||||
<span>{t("backToHome")}</span>
|
||||
</Link>
|
||||
|
||||
<h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
|
||||
@@ -222,7 +226,7 @@ const ProjectsPage = () => {
|
||||
<div className="p-6 flex flex-col flex-1">
|
||||
{/* Stretched Link covering the whole card (including image area) */}
|
||||
<Link
|
||||
href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
|
||||
href={`/${locale}/projects/${project.slug}`}
|
||||
className="absolute inset-0 z-10"
|
||||
aria-label={`View project ${project.title}`}
|
||||
/>
|
||||
|
||||
25
app/robots.txt/route.ts
Normal file
25
app/robots.txt/route.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { getBaseUrl } from "@/lib/seo";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const base = getBaseUrl();
|
||||
const body = [
|
||||
"User-agent: *",
|
||||
"Allow: /",
|
||||
"Disallow: /api/",
|
||||
"Disallow: /manage",
|
||||
"Disallow: /editor",
|
||||
`Sitemap: ${base}/sitemap.xml`,
|
||||
"",
|
||||
].join("\n");
|
||||
|
||||
return new NextResponse(body, {
|
||||
headers: {
|
||||
"Content-Type": "text/plain; charset=utf-8",
|
||||
"Cache-Control": "public, max-age=3600",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,67 +1,20 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { generateSitemapXml, getSitemapEntries } from "@/lib/sitemap";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET() {
|
||||
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
|
||||
const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API
|
||||
|
||||
// In test runs, allow returning a mocked sitemap explicitly
|
||||
if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_SITEMAP) {
|
||||
// For tests return a simple object so tests can inspect `.body`
|
||||
if (process.env.NODE_ENV === "test") {
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
return {
|
||||
body: process.env.GHOST_MOCK_SITEMAP,
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
} as any;
|
||||
/* eslint-enable @typescript-eslint/no-explicit-any */
|
||||
}
|
||||
return new NextResponse(process.env.GHOST_MOCK_SITEMAP, {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
// Holt die Sitemap-Daten von der API
|
||||
// Try global fetch first, then fall back to node-fetch
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
let res: any;
|
||||
try {
|
||||
if (typeof (globalThis as any).fetch === "function") {
|
||||
res = await (globalThis as any).fetch(apiUrl);
|
||||
}
|
||||
} catch (_e) {
|
||||
res = undefined;
|
||||
}
|
||||
|
||||
if (!res || typeof res.ok === "undefined" || !res.ok) {
|
||||
try {
|
||||
const mod = await import("node-fetch");
|
||||
const nodeFetch = (mod as any).default ?? mod;
|
||||
res = await (nodeFetch as any)(apiUrl);
|
||||
} catch (err) {
|
||||
console.error("Error fetching sitemap:", err);
|
||||
return new NextResponse("Error fetching sitemap", { status: 500 });
|
||||
}
|
||||
}
|
||||
/* eslint-enable @typescript-eslint/no-explicit-any */
|
||||
|
||||
if (!res || !res.ok) {
|
||||
console.error(
|
||||
`Failed to fetch sitemap: ${res?.statusText ?? "no response"}`,
|
||||
);
|
||||
return new NextResponse("Failed to fetch sitemap", { status: 500 });
|
||||
}
|
||||
|
||||
const xml = await res.text();
|
||||
|
||||
// Gibt die XML mit dem richtigen Content-Type zurück
|
||||
const entries = await getSitemapEntries();
|
||||
const xml = generateSitemapXml(entries);
|
||||
return new NextResponse(xml, {
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error fetching sitemap:", error);
|
||||
return new NextResponse("Error fetching sitemap", { status: 500 });
|
||||
console.error("Error generating sitemap.xml:", error);
|
||||
return new NextResponse(generateSitemapXml([]), {
|
||||
status: 500,
|
||||
headers: { "Content-Type": "application/xml" },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,6 +69,10 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Track performance metrics to our API
|
||||
const trackPerformanceToAPI = async () => {
|
||||
try {
|
||||
if (typeof performance === "undefined" || typeof performance.getEntriesByType !== "function") {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current page path to extract project ID if on project page
|
||||
const path = window.location.pathname;
|
||||
const projectMatch = path.match(/\/projects\/([^\/]+)/);
|
||||
@@ -266,6 +270,8 @@ export const AnalyticsProvider: React.FC<AnalyticsProviderProps> = ({ children }
|
||||
// Cleanup
|
||||
return () => {
|
||||
try {
|
||||
// Remove load handler if we added it
|
||||
window.removeEventListener('load', trackPerformanceToAPI);
|
||||
window.removeEventListener('popstate', handleRouteChange);
|
||||
document.removeEventListener('click', handleClick);
|
||||
document.removeEventListener('submit', handleSubmit);
|
||||
|
||||
414
components/ContentManager.tsx
Normal file
414
components/ContentManager.tsx
Normal file
@@ -0,0 +1,414 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { EditorContent, useEditor, type JSONContent } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import Link from '@tiptap/extension-link';
|
||||
import { TextStyle } from '@tiptap/extension-text-style';
|
||||
import Color from '@tiptap/extension-color';
|
||||
import Highlight from '@tiptap/extension-highlight';
|
||||
import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Link as LinkIcon, Highlighter, Type, Save, RefreshCw } from 'lucide-react';
|
||||
import { FontFamily, type AllowedFontFamily } from '@/lib/tiptap/fontFamily';
|
||||
|
||||
const EMPTY_DOC: JSONContent = {
|
||||
type: 'doc',
|
||||
content: [{ type: 'paragraph', content: [{ type: 'text', text: '' }] }],
|
||||
};
|
||||
|
||||
type PageListItem = {
|
||||
id: number;
|
||||
key: string;
|
||||
translations: Array<{ locale: string; updatedAt: string; title: string | null; slug: string | null }>;
|
||||
};
|
||||
|
||||
export default function ContentManager() {
|
||||
const [pages, setPages] = useState<PageListItem[]>([]);
|
||||
const [selectedKey, setSelectedKey] = useState<string>('privacy-policy');
|
||||
const [selectedLocale, setSelectedLocale] = useState<string>('de');
|
||||
const [title, setTitle] = useState<string>('');
|
||||
const [slug, setSlug] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [isSaving, setIsSaving] = useState<boolean>(false);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [fontFamily, setFontFamily] = useState<AllowedFontFamily | ''>('');
|
||||
const [color, setColor] = useState<string>('#111827');
|
||||
|
||||
const extensions = useMemo(
|
||||
() => [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
|
||||
}),
|
||||
TextStyle,
|
||||
FontFamily,
|
||||
Color,
|
||||
Highlight,
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const editor = useEditor({
|
||||
extensions,
|
||||
content: EMPTY_DOC,
|
||||
editorProps: {
|
||||
attributes: {
|
||||
class:
|
||||
'prose prose-stone max-w-none focus:outline-none min-h-[320px] p-4 bg-white rounded-xl border border-stone-200',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const sessionHeaders = () => {
|
||||
const sessionToken = sessionStorage.getItem('admin_session_token') || '';
|
||||
return {
|
||||
'x-admin-request': 'true',
|
||||
'x-session-token': sessionToken,
|
||||
'Content-Type': 'application/json',
|
||||
};
|
||||
};
|
||||
|
||||
const loadPages = useCallback(async () => {
|
||||
setError('');
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await fetch('/api/content/pages', { headers: sessionHeaders() });
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data?.error || 'Failed to load content pages');
|
||||
setPages(data.pages || []);
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to load content pages');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadSelected = useCallback(async () => {
|
||||
if (!editor) return;
|
||||
setError('');
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await fetch(`/api/content/page?key=${encodeURIComponent(selectedKey)}&locale=${encodeURIComponent(selectedLocale)}`);
|
||||
const data = await res.json();
|
||||
const translation = data?.content;
|
||||
|
||||
const nextTitle = (translation?.title as string | undefined) || '';
|
||||
const nextSlug = (translation?.slug as string | undefined) || '';
|
||||
const nextDoc = (translation?.content as JSONContent | undefined) || EMPTY_DOC;
|
||||
|
||||
setTitle(nextTitle);
|
||||
setSlug(nextSlug);
|
||||
editor.commands.setContent(nextDoc);
|
||||
setFontFamily('');
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to load content');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [editor, selectedKey, selectedLocale]);
|
||||
|
||||
useEffect(() => {
|
||||
loadPages();
|
||||
}, [loadPages]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSelected();
|
||||
}, [loadSelected]);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!editor) return;
|
||||
setError('');
|
||||
try {
|
||||
setIsSaving(true);
|
||||
const content = editor.getJSON();
|
||||
const res = await fetch('/api/content/pages', {
|
||||
method: 'POST',
|
||||
headers: sessionHeaders(),
|
||||
body: JSON.stringify({
|
||||
key: selectedKey,
|
||||
locale: selectedLocale,
|
||||
title: title || null,
|
||||
slug: slug || null,
|
||||
content,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data?.error || 'Failed to save content');
|
||||
await loadPages();
|
||||
} catch (e) {
|
||||
setError(e instanceof Error ? e.message : 'Failed to save content');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const localeOptions = ['en', 'de'];
|
||||
const fontOptions: Array<{ label: string; value: AllowedFontFamily | '' }> = [
|
||||
{ label: 'Default', value: '' },
|
||||
{ label: 'Inter', value: 'Inter' },
|
||||
{ label: 'Sans', value: 'ui-sans-serif' },
|
||||
{ label: 'Serif', value: 'ui-serif' },
|
||||
{ label: 'Mono', value: 'ui-monospace' },
|
||||
];
|
||||
|
||||
const selectedInfo = useMemo(() => {
|
||||
const page = pages.find((p) => p.key === selectedKey);
|
||||
const tr = page?.translations?.find((t) => t.locale === selectedLocale);
|
||||
return tr;
|
||||
}, [pages, selectedKey, selectedLocale]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-stone-900">Content Manager</h2>
|
||||
<p className="text-stone-500 mt-1">
|
||||
Edit texts/pages with rich formatting (bold, underline, links, highlights).
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={loadPages}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4" />
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="p-4 bg-red-50 border border-red-100 rounded-xl text-red-700 text-sm">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-1 space-y-4">
|
||||
<div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-1">Page key</label>
|
||||
<select
|
||||
value={selectedKey}
|
||||
onChange={(e) => setSelectedKey(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
|
||||
>
|
||||
{pages.map((p) => (
|
||||
<option key={p.key} value={p.key}>
|
||||
{p.key}
|
||||
</option>
|
||||
))}
|
||||
{pages.length === 0 && (
|
||||
<>
|
||||
<option value="privacy-policy">privacy-policy</option>
|
||||
<option value="legal-notice">legal-notice</option>
|
||||
<option value="home-hero">home-hero</option>
|
||||
</>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-1">Locale</label>
|
||||
<select
|
||||
value={selectedLocale}
|
||||
onChange={(e) => setSelectedLocale(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
|
||||
>
|
||||
{localeOptions.map((l) => (
|
||||
<option key={l} value={l}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="text-xs text-stone-500">
|
||||
Last updated:{' '}
|
||||
<span className="font-medium text-stone-700">
|
||||
{selectedInfo?.updatedAt ? new Date(selectedInfo.updatedAt).toLocaleString() : '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-1">Title (optional)</label>
|
||||
<input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
|
||||
placeholder="Page title"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700 mb-1">Slug (optional)</label>
|
||||
<input
|
||||
value={slug}
|
||||
onChange={(e) => setSlug(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
|
||||
placeholder="privacy-policy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || isLoading || !editor}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<Save className="w-4 h-4" />
|
||||
<span>{isSaving ? 'Saving…' : 'Save'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
<div className="bg-white border border-stone-200 rounded-xl p-4">
|
||||
<div className="text-sm font-semibold text-stone-900 mb-3">Content</div>
|
||||
{isLoading ? (
|
||||
<div className="text-stone-500 text-sm">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
{editor && (
|
||||
<div className="flex flex-wrap items-center gap-2 mb-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('bold')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Bold"
|
||||
>
|
||||
<Bold className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('italic')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Italic"
|
||||
>
|
||||
<Italic className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleUnderline().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('underline')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Underline"
|
||||
>
|
||||
<UnderlineIcon className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleHighlight().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('highlight')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Highlight"
|
||||
>
|
||||
<Highlighter className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('bulletList')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Bullet list"
|
||||
>
|
||||
<List className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('orderedList')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Ordered list"
|
||||
>
|
||||
<ListOrdered className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
const prev = editor.getAttributes('link')?.href as string | undefined;
|
||||
const href = prompt('Enter URL', prev || 'https://');
|
||||
if (!href) return;
|
||||
editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
|
||||
}}
|
||||
className={`p-2 rounded-lg border transition-colors ${
|
||||
editor.isActive('link')
|
||||
? 'bg-stone-900 text-stone-50 border-stone-900'
|
||||
: 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
|
||||
}`}
|
||||
title="Link"
|
||||
>
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<Type className="w-4 h-4 text-stone-500" />
|
||||
<select
|
||||
value={fontFamily}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value as AllowedFontFamily | '';
|
||||
setFontFamily(next);
|
||||
if (!next) {
|
||||
editor.chain().focus().unsetFontFamily().run();
|
||||
} else {
|
||||
editor.chain().focus().setFontFamily(next).run();
|
||||
}
|
||||
}}
|
||||
className="px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300 text-sm"
|
||||
title="Font family"
|
||||
>
|
||||
{fontOptions.map((f) => (
|
||||
<option key={f.label} value={f.value}>
|
||||
{f.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => {
|
||||
const next = e.target.value;
|
||||
setColor(next);
|
||||
editor.chain().focus().setColor(next).run();
|
||||
}}
|
||||
className="w-10 h-10 p-1 bg-white border border-stone-200 rounded-lg"
|
||||
title="Text color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<EditorContent editor={editor} />
|
||||
</>
|
||||
)}
|
||||
<p className="text-xs text-stone-500 mt-3">
|
||||
Tip: Use bold/underline, links, lists, headings. (Email-safe rendering is handled separately.)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -120,6 +120,24 @@ export const EmailManager: React.FC = () => {
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// Persist responded status in DB
|
||||
try {
|
||||
await fetch(`/api/contacts/${selectedMessage.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-admin-request': 'true',
|
||||
'x-session-token': sessionToken,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
responded: true,
|
||||
responseTemplate: 'reply',
|
||||
}),
|
||||
});
|
||||
} catch {
|
||||
// ignore persistence failures
|
||||
}
|
||||
|
||||
setMessages(prev => prev.map(msg =>
|
||||
msg.id === selectedMessage.id ? { ...msg, responded: true } : msg
|
||||
));
|
||||
|
||||
@@ -36,7 +36,7 @@ export default function ImportExport() {
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `portfolio-projects-${new Date().toISOString().split('T')[0]}.json`;
|
||||
a.download = `portfolio-backup-${new Date().toISOString().split('T')[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
@@ -119,9 +119,9 @@ export default function ImportExport() {
|
||||
<div className="space-y-4">
|
||||
{/* Export Section */}
|
||||
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
|
||||
<h4 className="font-medium text-stone-900 mb-2">Export Projekte</h4>
|
||||
<h4 className="font-medium text-stone-900 mb-2">Backup Export (Projekte + CMS)</h4>
|
||||
<p className="text-sm text-stone-600 mb-3">
|
||||
Alle Projekte als JSON-Datei herunterladen
|
||||
Vollständiges Backup als JSON herunterladen (inkl. CMS Inhalte und Übersetzungen)
|
||||
</p>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
@@ -135,9 +135,9 @@ export default function ImportExport() {
|
||||
|
||||
{/* Import Section */}
|
||||
<div className="bg-stone-50 border border-stone-200 rounded-xl p-4">
|
||||
<h4 className="font-medium text-stone-900 mb-2">Import Projekte</h4>
|
||||
<h4 className="font-medium text-stone-900 mb-2">Backup Import</h4>
|
||||
<p className="text-sm text-stone-600 mb-3">
|
||||
JSON-Datei mit Projekten hochladen
|
||||
JSON-Datei mit Backup hochladen (Projekte + CMS + Übersetzungen)
|
||||
</p>
|
||||
<label className="flex items-center px-4 py-2 bg-stone-900 text-white rounded-lg hover:bg-stone-800 transition-colors cursor-pointer w-fit">
|
||||
<Upload className="w-4 h-4 mr-2" />
|
||||
|
||||
@@ -35,6 +35,10 @@ const ProjectManager = dynamic(
|
||||
() => import('./ProjectManager').then((m) => m.ProjectManager),
|
||||
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading projects…</div> }
|
||||
);
|
||||
const ContentManager = dynamic(
|
||||
() => import('./ContentManager').then((m) => m.default),
|
||||
{ ssr: false, loading: () => <div className="p-6 text-stone-500">Loading content…</div> }
|
||||
);
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
@@ -66,7 +70,7 @@ interface ModernAdminDashboardProps {
|
||||
}
|
||||
|
||||
const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
|
||||
const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings'>('overview');
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
@@ -216,6 +220,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{ id: 'projects', label: 'Projects', icon: Database, color: 'green', description: 'Manage Projects' },
|
||||
{ id: 'emails', label: 'Emails', icon: Mail, color: 'purple', description: 'Email Management' },
|
||||
{ id: 'analytics', label: 'Analytics', icon: Activity, color: 'orange', description: 'Site Analytics' },
|
||||
{ id: 'content', label: 'Content', icon: Shield, color: 'teal', description: 'Texts, pages & localization' },
|
||||
{ id: 'settings', label: 'Settings', icon: Settings, color: 'gray', description: 'System Settings' }
|
||||
];
|
||||
|
||||
@@ -250,7 +255,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
{navigation.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
|
||||
onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings')}
|
||||
className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
|
||||
activeTab === item.id
|
||||
? 'bg-stone-100 text-stone-900 font-medium shadow-sm border border-stone-200'
|
||||
@@ -314,7 +319,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings');
|
||||
setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings');
|
||||
setMobileMenuOpen(false);
|
||||
}}
|
||||
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
|
||||
@@ -619,6 +624,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
|
||||
<AnalyticsDashboard isAuthenticated={isAuthenticated} />
|
||||
)}
|
||||
|
||||
{activeTab === 'content' && (
|
||||
<ContentManager />
|
||||
)}
|
||||
|
||||
{activeTab === 'settings' && (
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
|
||||
@@ -18,6 +18,9 @@ services:
|
||||
- MY_PASSWORD=${MY_PASSWORD}
|
||||
- MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
|
||||
- ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH:-admin:your_secure_password_here}
|
||||
- ADMIN_SESSION_SECRET=${ADMIN_SESSION_SECRET}
|
||||
# If you already have an existing DB (pre-migrations), set this to true ONCE to baseline.
|
||||
- PRISMA_AUTO_BASELINE=${PRISMA_AUTO_BASELINE:-false}
|
||||
- LOG_LEVEL=info
|
||||
- N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-}
|
||||
- N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-}
|
||||
|
||||
97
docker-compose.testing.yml
Normal file
97
docker-compose.testing.yml
Normal file
@@ -0,0 +1,97 @@
|
||||
# Testing Docker Compose configuration for testing.dk0.dev
|
||||
# Runs alongside production with isolated DB/Redis and different ports.
|
||||
|
||||
services:
|
||||
portfolio-testing:
|
||||
image: portfolio-app:testing
|
||||
container_name: portfolio-app-testing
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "3002:3000" # Nginx Proxy Manager -> http://HOST:3002
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- DATABASE_URL=postgresql://portfolio_user:portfolio_testing_pass@postgres-testing:5432/portfolio_testing_db?schema=public
|
||||
- REDIS_URL=redis://redis-testing:6379
|
||||
- NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://testing.dk0.dev}
|
||||
- MY_EMAIL=${MY_EMAIL:-contact@dk0.dev}
|
||||
- MY_INFO_EMAIL=${MY_INFO_EMAIL:-info@dk0.dev}
|
||||
- MY_PASSWORD=${MY_PASSWORD}
|
||||
- MY_INFO_PASSWORD=${MY_INFO_PASSWORD}
|
||||
- ADMIN_BASIC_AUTH=${ADMIN_BASIC_AUTH:-admin:testing_password}
|
||||
- ADMIN_SESSION_SECRET=${ADMIN_SESSION_SECRET}
|
||||
- PRISMA_AUTO_BASELINE=${PRISMA_AUTO_BASELINE:-false}
|
||||
- LOG_LEVEL=info
|
||||
- N8N_WEBHOOK_URL=${N8N_WEBHOOK_URL:-}
|
||||
- N8N_SECRET_TOKEN=${N8N_SECRET_TOKEN:-}
|
||||
- N8N_API_KEY=${N8N_API_KEY:-}
|
||||
volumes:
|
||||
- portfolio_testing_data:/app/.next/cache
|
||||
networks:
|
||||
- portfolio_testing_net
|
||||
- proxy
|
||||
depends_on:
|
||||
postgres-testing:
|
||||
condition: service_healthy
|
||||
redis-testing:
|
||||
condition: service_healthy
|
||||
healthcheck:
|
||||
test: ["CMD", "curl", "-f", "http://localhost:3000/api/health"]
|
||||
interval: 30s
|
||||
timeout: 10s
|
||||
retries: 3
|
||||
start_period: 40s
|
||||
|
||||
postgres-testing:
|
||||
image: postgres:16-alpine
|
||||
container_name: portfolio-postgres-testing
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- POSTGRES_DB=portfolio_testing_db
|
||||
- POSTGRES_USER=portfolio_user
|
||||
- POSTGRES_PASSWORD=portfolio_testing_pass
|
||||
volumes:
|
||||
- postgres_testing_data:/var/lib/postgresql/data
|
||||
- ./scripts/init-db.sql:/docker-entrypoint-initdb.d/init-db.sql:ro
|
||||
networks:
|
||||
- portfolio_testing_net
|
||||
ports:
|
||||
- "5435:5432"
|
||||
healthcheck:
|
||||
test: ["CMD-SHELL", "pg_isready -U portfolio_user -d portfolio_testing_db"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
start_period: 30s
|
||||
|
||||
redis-testing:
|
||||
image: redis:7-alpine
|
||||
container_name: portfolio-redis-testing
|
||||
restart: unless-stopped
|
||||
command: redis-server --appendonly yes --maxmemory 256mb --maxmemory-policy allkeys-lru
|
||||
volumes:
|
||||
- redis_testing_data:/data
|
||||
networks:
|
||||
- portfolio_testing_net
|
||||
ports:
|
||||
- "6382:6379"
|
||||
healthcheck:
|
||||
test: ["CMD", "redis-cli", "ping"]
|
||||
interval: 10s
|
||||
timeout: 5s
|
||||
retries: 5
|
||||
start_period: 30s
|
||||
|
||||
volumes:
|
||||
portfolio_testing_data:
|
||||
driver: local
|
||||
postgres_testing_data:
|
||||
driver: local
|
||||
redis_testing_data:
|
||||
driver: local
|
||||
|
||||
networks:
|
||||
portfolio_testing_net:
|
||||
driver: bridge
|
||||
proxy:
|
||||
external: true
|
||||
|
||||
20
docs/CMS_GUIDE.md
Normal file
20
docs/CMS_GUIDE.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# CMS Guide (ohne extra Software)
|
||||
|
||||
Du brauchst **kein externes CMS**: das Projekt hat ein eingebautes, self-hosted CMS (Postgres + Admin UI).
|
||||
|
||||
## Wo ist das CMS?
|
||||
|
||||
- Öffne: `/manage`
|
||||
- Login (Admin)
|
||||
- Tab: **Content**
|
||||
|
||||
## Wie bearbeite ich Texte?
|
||||
|
||||
Im Content Tab kannst du auswählen:
|
||||
- **Page key** (z.B. `home-hero`, `home-about`, `home-contact`, `privacy-policy`, `legal-notice`)
|
||||
- **Locale** (`en` oder `de`)
|
||||
|
||||
Dann:
|
||||
- Text bearbeiten (Rich Text)
|
||||
- **Save**
|
||||
|
||||
69
docs/TESTING_AND_DEPLOYMENT.md
Normal file
69
docs/TESTING_AND_DEPLOYMENT.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Testing & Deployment (Gitea → Docker → Nginx Proxy Manager)
|
||||
|
||||
## Ziel
|
||||
|
||||
- **Production**: Branch `production` → Container `portfolio-app` → `dk0.dev` (Port `3000`)
|
||||
- **Testing**: Branch `testing` → Container `portfolio-app-testing` → `testing.dk0.dev` (Port `3002`)
|
||||
|
||||
Beide Stacks laufen parallel und sind komplett getrennt (eigene Postgres/Redis/Volumes).
|
||||
|
||||
## DNS / Nginx Proxy Manager
|
||||
|
||||
### DNS
|
||||
- Setze `A` (oder `CNAME`) Records:
|
||||
- `dk0.dev` → dein Server
|
||||
- `testing.dk0.dev` → dein Server
|
||||
|
||||
### Nginx Proxy Manager
|
||||
Lege zwei Proxy Hosts an:
|
||||
|
||||
- **`dk0.dev`**
|
||||
- Forward Hostname/IP: `127.0.0.1` (oder Server-IP)
|
||||
- Forward Port: `3000`
|
||||
|
||||
- **`testing.dk0.dev`**
|
||||
- Forward Hostname/IP: `127.0.0.1` (oder Server-IP)
|
||||
- Forward Port: `3002`
|
||||
|
||||
Dann SSL Zertifikate (Let’s Encrypt) aktivieren.
|
||||
|
||||
## Gitea Workflows
|
||||
|
||||
- `production` push → `.gitea/workflows/production-deploy.yml`
|
||||
- `testing` push → `.gitea/workflows/dev-deploy.yml` (umbenannt im Namen, Inhalt ist Testing)
|
||||
|
||||
### Benötigte Variables (Gitea)
|
||||
- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
|
||||
- `NEXT_PUBLIC_BASE_URL_TESTING` = `https://testing.dk0.dev`
|
||||
- optional: `MY_EMAIL`, `MY_INFO_EMAIL`, `LOG_LEVEL`, `N8N_WEBHOOK_URL`, `N8N_API_KEY`
|
||||
|
||||
### Benötigte Secrets (Gitea)
|
||||
- `MY_PASSWORD`
|
||||
- `MY_INFO_PASSWORD`
|
||||
- `ADMIN_BASIC_AUTH` (z.B. `admin:<starkes_passwort>`)
|
||||
- `ADMIN_SESSION_SECRET` (mind. 32 Zeichen, zufällig; für Session-Login im Admin)
|
||||
- optional: `N8N_SECRET_TOKEN`
|
||||
|
||||
## Docker Compose Files
|
||||
|
||||
- Production: `docker-compose.production.yml` (Port 3000)
|
||||
- Testing: `docker-compose.testing.yml` (Port 3002)
|
||||
|
||||
Wenn du “dev” nicht mehr brauchst, kannst du den Branch einfach nicht mehr benutzen.
|
||||
|
||||
## Prisma Migrations (Auto-Deploy)
|
||||
|
||||
Der App-Container führt beim Start automatisch aus:
|
||||
- `prisma migrate deploy`
|
||||
|
||||
### Wichtig: bestehende Datenbank (Baseline)
|
||||
Wenn deine DB bereits existiert (vor Einführung von Prisma Migrations), dann würde die initiale Migration sonst mit “table already exists” scheitern.
|
||||
|
||||
**Einmalig beim ersten Deploy**:
|
||||
- Setze `PRISMA_AUTO_BASELINE=true` (z.B. als Compose env oder Gitea Variable/Secret)
|
||||
- Deploy ausführen
|
||||
- Danach wieder auf `false` setzen
|
||||
|
||||
Alternative (manuell/sauber):
|
||||
- Baseline per `prisma migrate resolve --applied <init_migration_name>` ausführen (z.B. lokal gegen die Prod-DB)
|
||||
|
||||
32
e2e/activity-feed.spec.ts
Normal file
32
e2e/activity-feed.spec.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("ActivityFeed reload rendering", () => {
|
||||
test("feed stays visible and dark after reload", async ({ page }) => {
|
||||
await page.goto("/en", { waitUntil: "domcontentloaded" });
|
||||
|
||||
const feed = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
|
||||
await expect(feed).toBeVisible({ timeout: 15000 });
|
||||
|
||||
const initialBox = await feed.boundingBox();
|
||||
expect(initialBox).not.toBeNull();
|
||||
expect(initialBox!.width).toBeGreaterThan(200);
|
||||
expect(initialBox!.height).toBeGreaterThan(30);
|
||||
|
||||
const initialOpacity = await feed.evaluate((el) => getComputedStyle(el).opacity);
|
||||
expect(Number(initialOpacity)).toBeGreaterThan(0.5);
|
||||
|
||||
await page.reload({ waitUntil: "domcontentloaded" });
|
||||
|
||||
const feedAfter = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
|
||||
await expect(feedAfter).toBeVisible({ timeout: 15000 });
|
||||
|
||||
const afterBox = await feedAfter.boundingBox();
|
||||
expect(afterBox).not.toBeNull();
|
||||
expect(afterBox!.width).toBeGreaterThan(200);
|
||||
expect(afterBox!.height).toBeGreaterThan(30);
|
||||
|
||||
const afterOpacity = await feedAfter.evaluate((el) => getComputedStyle(el).opacity);
|
||||
expect(Number(afterOpacity)).toBeGreaterThan(0.5);
|
||||
});
|
||||
});
|
||||
|
||||
27
e2e/consent.spec.ts
Normal file
27
e2e/consent.spec.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("Consent banner", () => {
|
||||
test("banner shows and can be accepted", async ({ page, context }) => {
|
||||
// Start clean
|
||||
await context.clearCookies();
|
||||
|
||||
await page.goto("/en", { waitUntil: "domcontentloaded" });
|
||||
|
||||
// Banner should appear on public pages when no consent is set yet
|
||||
const bannerTitle = page.getByText(/Privacy settings|Datenschutz-Einstellungen/i);
|
||||
await expect(bannerTitle).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Accept all
|
||||
const acceptAll = page.getByRole("button", { name: /Accept all|Alles akzeptieren/i });
|
||||
await acceptAll.click();
|
||||
|
||||
// Banner disappears
|
||||
await expect(bannerTitle).toBeHidden({ timeout: 10000 });
|
||||
|
||||
// Cookie is written
|
||||
const cookies = await context.cookies();
|
||||
const consentCookie = cookies.find((c) => c.name === "dk0_consent_v1");
|
||||
expect(consentCookie).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -6,7 +6,7 @@ import { test, expect } from '@playwright/test';
|
||||
*/
|
||||
test.describe('Critical Paths', () => {
|
||||
test('Home page loads and displays correctly', async ({ page }) => {
|
||||
await page.goto('/', { waitUntil: 'networkidle' });
|
||||
await page.goto('/en', { waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for page to be fully loaded
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
@@ -25,7 +25,7 @@ test.describe('Critical Paths', () => {
|
||||
});
|
||||
|
||||
test('Projects page loads and displays projects', async ({ page }) => {
|
||||
await page.goto('/projects', { waitUntil: 'networkidle' });
|
||||
await page.goto('/en/projects', { waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for projects to load
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
@@ -45,7 +45,7 @@ test.describe('Critical Paths', () => {
|
||||
|
||||
test('Individual project page loads', async ({ page }) => {
|
||||
// First, get a project slug from the projects page
|
||||
await page.goto('/projects', { waitUntil: 'networkidle' });
|
||||
await page.goto('/en/projects', { waitUntil: 'networkidle' });
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Try to find a project link
|
||||
|
||||
@@ -20,7 +20,7 @@ test.describe('Hydration Tests', () => {
|
||||
});
|
||||
|
||||
// Navigate to home page
|
||||
await page.goto('/', { waitUntil: 'networkidle' });
|
||||
await page.goto('/en', { waitUntil: 'networkidle' });
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Check for hydration errors
|
||||
@@ -51,7 +51,7 @@ test.describe('Hydration Tests', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
await page.goto('/en');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Check for duplicate key warnings
|
||||
@@ -71,11 +71,11 @@ test.describe('Hydration Tests', () => {
|
||||
}
|
||||
});
|
||||
|
||||
await page.goto('/', { waitUntil: 'networkidle' });
|
||||
await page.goto('/en', { waitUntil: 'networkidle' });
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Navigate to projects page via link
|
||||
const projectsLink = page.locator('a[href="/projects"], a[href*="projects"]').first();
|
||||
const projectsLink = page.locator('a[href*="/projects"]').first();
|
||||
if (await projectsLink.count() > 0) {
|
||||
await projectsLink.click();
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
@@ -90,7 +90,7 @@ test.describe('Hydration Tests', () => {
|
||||
});
|
||||
|
||||
test('Server and client HTML match', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.goto('/en');
|
||||
|
||||
// Get initial HTML
|
||||
const initialHTML = await page.content();
|
||||
@@ -108,7 +108,7 @@ test.describe('Hydration Tests', () => {
|
||||
});
|
||||
|
||||
test('Interactive elements work after hydration', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.goto('/en');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Try to find and click interactive elements
|
||||
|
||||
25
e2e/i18n.spec.ts
Normal file
25
e2e/i18n.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("i18n routing", () => {
|
||||
test("language switcher navigates between locales", async ({ page }) => {
|
||||
await page.goto("/en", { waitUntil: "domcontentloaded" });
|
||||
|
||||
// Locale switchers are links (work even without hydration)
|
||||
const deLink = page.getByRole("link", { name: "Sprache auf Deutsch umstellen" });
|
||||
if (await deLink.count()) {
|
||||
// Verify an EN label is present before switching (nav.home)
|
||||
await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
|
||||
|
||||
await Promise.all([
|
||||
page.waitForURL(/\/de(\/|$)/, { timeout: 30000 }),
|
||||
deLink.click(),
|
||||
]);
|
||||
|
||||
// Verify the nav label updates after switching
|
||||
await expect(page.getByRole("link", { name: "Start" })).toBeVisible();
|
||||
} else {
|
||||
test.skip();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
22
e2e/seo.spec.ts
Normal file
22
e2e/seo.spec.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { test, expect } from "@playwright/test";
|
||||
|
||||
test.describe("SEO endpoints", () => {
|
||||
test("robots.txt is served and contains sitemap", async ({ request }) => {
|
||||
const res = await request.get("/robots.txt");
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const txt = await res.text();
|
||||
expect(txt).toContain("User-agent:");
|
||||
expect(txt).toContain("Sitemap:");
|
||||
});
|
||||
|
||||
test("sitemap.xml is served and contains locale routes", async ({ request }) => {
|
||||
const res = await request.get("/sitemap.xml");
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const xml = await res.text();
|
||||
expect(xml).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
|
||||
// At least the localized home routes should exist
|
||||
expect(xml).toMatch(/\/en<\/loc>/);
|
||||
expect(xml).toMatch(/\/de<\/loc>/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -34,6 +34,14 @@ N8N_API_KEY=your-n8n-api-key
|
||||
# JWT_SECRET=your-jwt-secret
|
||||
# ENCRYPTION_KEY=your-encryption-key
|
||||
ADMIN_BASIC_AUTH=admin:your_secure_password_here
|
||||
ADMIN_SESSION_SECRET=change_me_to_a_long_random_string_at_least_32_chars
|
||||
|
||||
# Prisma migrations at container startup
|
||||
# - default: migrations are executed (`prisma migrate deploy`)
|
||||
# - set to true ONCE if you already have an existing DB that was created before migrations existed
|
||||
PRISMA_AUTO_BASELINE=false
|
||||
# emergency switch (not recommended for normal operation)
|
||||
# SKIP_PRISMA_MIGRATE=true
|
||||
|
||||
# Monitoring (optional)
|
||||
# SENTRY_DSN=your-sentry-dsn
|
||||
|
||||
3
i18n/locales.ts
Normal file
3
i18n/locales.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export const locales = ["en", "de"] as const;
|
||||
export type AppLocale = (typeof locales)[number];
|
||||
|
||||
15
i18n/request.ts
Normal file
15
i18n/request.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { getRequestConfig } from "next-intl/server";
|
||||
import { locales } from "./locales";
|
||||
export { locales, type AppLocale } from "./locales";
|
||||
|
||||
export default getRequestConfig(async ({ locale }) => {
|
||||
// next-intl can call us with unknown/undefined locales; fall back safely
|
||||
const requested = typeof locale === "string" ? locale : "en";
|
||||
const safeLocale = (locales as readonly string[]).includes(requested) ? requested : "en";
|
||||
|
||||
return {
|
||||
locale: safeLocale,
|
||||
messages: (await import(`../messages/${safeLocale}.json`)).default,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -26,6 +26,69 @@ jest.mock("next/navigation", () => ({
|
||||
notFound: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock next-intl (ESM) for Jest
|
||||
jest.mock("next-intl", () => ({
|
||||
useLocale: () => "en",
|
||||
useTranslations:
|
||||
(namespace?: string) =>
|
||||
(key: string) => {
|
||||
if (namespace === "nav") {
|
||||
const map: Record<string, string> = {
|
||||
home: "Home",
|
||||
about: "About",
|
||||
projects: "Projects",
|
||||
contact: "Contact",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "common") {
|
||||
const map: Record<string, string> = {
|
||||
backToHome: "Back to Home",
|
||||
backToProjects: "Back to Projects",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.hero") {
|
||||
const map: Record<string, string> = {
|
||||
"features.f1": "Next.js & Flutter",
|
||||
"features.f2": "Docker Swarm & CI/CD",
|
||||
"features.f3": "Self-Hosted Infrastructure",
|
||||
description:
|
||||
"Student and passionate self-hoster building full-stack web apps and mobile solutions. I run my own infrastructure and love exploring DevOps.",
|
||||
ctaWork: "View My Work",
|
||||
ctaContact: "Contact Me",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.about") {
|
||||
const map: Record<string, string> = {
|
||||
title: "About Me",
|
||||
p1: "Hi, I'm Dennis – a student and passionate self-hoster based in Osnabrück, Germany.",
|
||||
p2: "I love building full-stack web applications with Next.js and mobile apps with Flutter. But what really excites me is DevOps: I run my own infrastructure and automate deployments with CI/CD.",
|
||||
p3: "When I'm not coding or tinkering with servers, you'll find me gaming, jogging, or experimenting with automation workflows.",
|
||||
funFactTitle: "Fun Fact",
|
||||
funFactBody:
|
||||
"Even though I automate a lot, I still use pen and paper for my calendar and notes – it helps me stay focused.",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
if (namespace === "home.contact") {
|
||||
const map: Record<string, string> = {
|
||||
title: "Contact Me",
|
||||
subtitle:
|
||||
"Interested in working together or have questions about my projects? Feel free to reach out!",
|
||||
getInTouch: "Get In Touch",
|
||||
getInTouchBody:
|
||||
"I'm always available to discuss new opportunities, interesting projects, or simply chat about technology and innovation.",
|
||||
};
|
||||
return map[key] || key;
|
||||
}
|
||||
return key;
|
||||
},
|
||||
NextIntlClientProvider: ({ children }: { children: React.ReactNode }) =>
|
||||
React.createElement(React.Fragment, null, children),
|
||||
}));
|
||||
|
||||
// Mock next/link
|
||||
jest.mock("next/link", () => {
|
||||
return function Link({
|
||||
|
||||
@@ -25,12 +25,21 @@ export interface WebVitalsMetric {
|
||||
|
||||
// Track custom events to Umami
|
||||
export const trackEvent = (event: string, data?: Record<string, unknown>) => {
|
||||
if (typeof window !== 'undefined' && window.umami) {
|
||||
window.umami.track(event, {
|
||||
if (typeof window === "undefined") return;
|
||||
const trackFn = window.umami?.track;
|
||||
if (typeof trackFn !== "function") return;
|
||||
|
||||
try {
|
||||
trackFn(event, {
|
||||
...data,
|
||||
timestamp: Date.now(),
|
||||
url: window.location.pathname,
|
||||
});
|
||||
} catch (error) {
|
||||
// Silently fail - analytics must never break the app
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
console.warn("Error tracking Umami event:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
82
lib/content.ts
Normal file
82
lib/content.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import type { Prisma } from "@prisma/client";
|
||||
import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
|
||||
|
||||
export async function getSiteSettings() {
|
||||
return prisma.siteSettings.findUnique({ where: { id: 1 } });
|
||||
}
|
||||
|
||||
export async function getContentByKey(opts: { key: string; locale: string }) {
|
||||
const { key, locale } = opts;
|
||||
try {
|
||||
const page = await prisma.contentPage.findUnique({
|
||||
where: { key },
|
||||
include: {
|
||||
translations: {
|
||||
where: { locale },
|
||||
take: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (page?.translations?.[0]) return page.translations[0];
|
||||
|
||||
const settings = await getSiteSettings();
|
||||
const fallbackLocale = settings?.defaultLocale || "en";
|
||||
|
||||
const fallback = await prisma.contentPageTranslation.findFirst({
|
||||
where: {
|
||||
page: { key },
|
||||
locale: fallbackLocale,
|
||||
},
|
||||
});
|
||||
|
||||
return fallback;
|
||||
} catch (error) {
|
||||
// If migrations haven't been applied yet, don't crash the app.
|
||||
// Let callers fall back to static translations.
|
||||
if (error instanceof PrismaClientKnownRequestError && (error.code === "P2021" || error.code === "P2022")) {
|
||||
return null;
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function upsertContentByKey(opts: {
|
||||
key: string;
|
||||
locale: string;
|
||||
title?: string | null;
|
||||
slug?: string | null;
|
||||
content: unknown;
|
||||
metaDescription?: string | null;
|
||||
keywords?: string | null;
|
||||
}) {
|
||||
const { key, locale, title, slug, content, metaDescription, keywords } = opts;
|
||||
|
||||
const page = await prisma.contentPage.upsert({
|
||||
where: { key },
|
||||
create: { key, status: "PUBLISHED" },
|
||||
update: {},
|
||||
});
|
||||
|
||||
return prisma.contentPageTranslation.upsert({
|
||||
where: { pageId_locale: { pageId: page.id, locale } },
|
||||
create: {
|
||||
pageId: page.id,
|
||||
locale,
|
||||
title: title ?? undefined,
|
||||
slug: slug ?? undefined,
|
||||
content: content as Prisma.InputJsonValue, // JSON
|
||||
metaDescription: metaDescription ?? undefined,
|
||||
keywords: keywords ?? undefined,
|
||||
},
|
||||
update: {
|
||||
title: title ?? undefined,
|
||||
slug: slug ?? undefined,
|
||||
content: content as Prisma.InputJsonValue, // JSON
|
||||
metaDescription: metaDescription ?? undefined,
|
||||
keywords: keywords ?? undefined,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
import { generateUniqueSlug } from './slug';
|
||||
|
||||
const globalForPrisma = globalThis as unknown as {
|
||||
prisma: PrismaClient | undefined;
|
||||
@@ -68,9 +69,26 @@ export const projectService = {
|
||||
|
||||
// Create new project
|
||||
async createProject(data: Record<string, unknown>) {
|
||||
const providedSlug = typeof data.slug === 'string' ? data.slug : undefined;
|
||||
const providedTitle = typeof data.title === 'string' ? data.title : undefined;
|
||||
|
||||
const slug =
|
||||
providedSlug?.trim() ||
|
||||
(await generateUniqueSlug({
|
||||
base: providedTitle || 'project',
|
||||
isTaken: async (candidate) => {
|
||||
const existing = await prisma.project.findUnique({
|
||||
where: { slug: candidate },
|
||||
select: { id: true },
|
||||
});
|
||||
return !!existing;
|
||||
},
|
||||
}));
|
||||
|
||||
return prisma.project.create({
|
||||
data: {
|
||||
...data,
|
||||
slug,
|
||||
performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },
|
||||
analytics: data.analytics || { views: 0, likes: 0, shares: 0 }
|
||||
} as any // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
71
lib/richtext.ts
Normal file
71
lib/richtext.ts
Normal file
@@ -0,0 +1,71 @@
|
||||
import sanitizeHtml from "sanitize-html";
|
||||
import type { JSONContent } from "@tiptap/react";
|
||||
import { generateHTML } from "@tiptap/html";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import Link from "@tiptap/extension-link";
|
||||
import { TextStyle } from "@tiptap/extension-text-style";
|
||||
import Color from "@tiptap/extension-color";
|
||||
import Highlight from "@tiptap/extension-highlight";
|
||||
import { FontFamily } from "@/lib/tiptap/fontFamily";
|
||||
|
||||
export function richTextToSafeHtml(doc: JSONContent): string {
|
||||
const raw = generateHTML(doc, [
|
||||
StarterKit,
|
||||
Underline,
|
||||
Link.configure({
|
||||
openOnClick: false,
|
||||
autolink: false,
|
||||
HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
|
||||
}),
|
||||
TextStyle,
|
||||
FontFamily,
|
||||
Color,
|
||||
Highlight,
|
||||
]);
|
||||
|
||||
return sanitizeHtml(raw, {
|
||||
allowedTags: [
|
||||
"p",
|
||||
"br",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"blockquote",
|
||||
"strong",
|
||||
"em",
|
||||
"u",
|
||||
"a",
|
||||
"ul",
|
||||
"ol",
|
||||
"li",
|
||||
"code",
|
||||
"pre",
|
||||
"span"
|
||||
],
|
||||
allowedAttributes: {
|
||||
a: ["href", "rel", "target"],
|
||||
span: ["style"],
|
||||
code: ["class"],
|
||||
pre: ["class"],
|
||||
p: ["class"],
|
||||
h1: ["class"],
|
||||
h2: ["class"],
|
||||
h3: ["class"],
|
||||
blockquote: ["class"],
|
||||
ul: ["class"],
|
||||
ol: ["class"],
|
||||
li: ["class"]
|
||||
},
|
||||
allowedSchemes: ["http", "https", "mailto"],
|
||||
allowProtocolRelative: false,
|
||||
allowedStyles: {
|
||||
span: {
|
||||
color: [/^#[0-9a-fA-F]{3,8}$/],
|
||||
"background-color": [/^#[0-9a-fA-F]{3,8}$/],
|
||||
"font-family": [/^(Inter|ui-sans-serif|ui-serif|ui-monospace)$/],
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
30
lib/seo.ts
Normal file
30
lib/seo.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { locales, type AppLocale } from "@/i18n/locales";
|
||||
|
||||
export function getBaseUrl(): string {
|
||||
const raw =
|
||||
process.env.NEXT_PUBLIC_BASE_URL ||
|
||||
process.env.NEXTAUTH_URL || // fallback if ever added
|
||||
"http://localhost:3000";
|
||||
return raw.replace(/\/+$/, "");
|
||||
}
|
||||
|
||||
export function toAbsoluteUrl(path: string): string {
|
||||
const base = getBaseUrl();
|
||||
const normalized = path.startsWith("/") ? path : `/${path}`;
|
||||
return `${base}${normalized}`;
|
||||
}
|
||||
|
||||
export function getLanguageAlternates(opts: {
|
||||
/** Path without locale prefix, e.g. "/projects" or "/projects/my-slug" or "" */
|
||||
pathWithoutLocale: string;
|
||||
}): Record<AppLocale, string> {
|
||||
const path = opts.pathWithoutLocale === "" ? "" : `/${opts.pathWithoutLocale}`.replace(/\/{2,}/g, "/");
|
||||
const normalizedPath = path === "/" ? "" : path;
|
||||
|
||||
return locales.reduce((acc, l) => {
|
||||
const url = toAbsoluteUrl(`/${l}${normalizedPath}`);
|
||||
acc[l] = url;
|
||||
return acc;
|
||||
}, {} as Record<AppLocale, string>);
|
||||
}
|
||||
|
||||
70
lib/sitemap.ts
Normal file
70
lib/sitemap.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { locales } from "@/i18n/locales";
|
||||
import { getBaseUrl } from "@/lib/seo";
|
||||
|
||||
export type SitemapEntry = {
|
||||
url: string;
|
||||
lastModified: string;
|
||||
changefreq?: "daily" | "weekly" | "monthly" | "yearly";
|
||||
priority?: number;
|
||||
};
|
||||
|
||||
export function generateSitemapXml(entries: SitemapEntry[]): string {
|
||||
const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
|
||||
const urlsetOpen = '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
|
||||
const urlsetClose = "</urlset>";
|
||||
|
||||
const urlEntries = entries
|
||||
.map((e) => {
|
||||
const changefreq = e.changefreq ?? "monthly";
|
||||
const priority = typeof e.priority === "number" ? e.priority : 0.8;
|
||||
return `
|
||||
<url>
|
||||
<loc>${e.url}</loc>
|
||||
<lastmod>${e.lastModified}</lastmod>
|
||||
<changefreq>${changefreq}</changefreq>
|
||||
<priority>${priority.toFixed(1)}</priority>
|
||||
</url>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
return `${xmlHeader}${urlsetOpen}${urlEntries}${urlsetClose}`;
|
||||
}
|
||||
|
||||
export async function getSitemapEntries(): Promise<SitemapEntry[]> {
|
||||
const baseUrl = getBaseUrl();
|
||||
const nowIso = new Date().toISOString();
|
||||
|
||||
const staticPaths = ["", "/projects", "/legal-notice", "/privacy-policy"];
|
||||
const staticEntries: SitemapEntry[] = locales.flatMap((locale) =>
|
||||
staticPaths.map((p) => {
|
||||
const path = p === "" ? `/${locale}` : `/${locale}${p}`;
|
||||
return {
|
||||
url: `${baseUrl}${path}`,
|
||||
lastModified: nowIso,
|
||||
changefreq: p === "" ? "weekly" : p === "/projects" ? "weekly" : "yearly",
|
||||
priority: p === "" ? 1.0 : p === "/projects" ? 0.8 : 0.5,
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
// Projects: for each project slug we publish per locale (same slug)
|
||||
const projects = await prisma.project.findMany({
|
||||
where: { published: true },
|
||||
select: { slug: true, updatedAt: true },
|
||||
orderBy: { updatedAt: "desc" },
|
||||
});
|
||||
|
||||
const projectEntries: SitemapEntry[] = projects.flatMap((p) => {
|
||||
const lastModified = (p.updatedAt ?? new Date()).toISOString();
|
||||
return locales.map((locale) => ({
|
||||
url: `${baseUrl}/${locale}/projects/${p.slug}`,
|
||||
lastModified,
|
||||
changefreq: "monthly",
|
||||
priority: 0.7,
|
||||
}));
|
||||
});
|
||||
|
||||
return [...staticEntries, ...projectEntries];
|
||||
}
|
||||
|
||||
30
lib/slug.ts
Normal file
30
lib/slug.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
export function slugify(input: string): string {
|
||||
return input
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/['"]/g, "")
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/^-+|-+$/g, "");
|
||||
}
|
||||
|
||||
export async function generateUniqueSlug(opts: {
|
||||
base: string;
|
||||
isTaken: (slug: string) => Promise<boolean>;
|
||||
maxAttempts?: number;
|
||||
}): Promise<string> {
|
||||
const maxAttempts = opts.maxAttempts ?? 50;
|
||||
const normalizedBase = slugify(opts.base) || "item";
|
||||
|
||||
let candidate = normalizedBase;
|
||||
for (let i = 0; i < maxAttempts; i++) {
|
||||
// First try the base, then base-2, base-3, ...
|
||||
candidate = i === 0 ? normalizedBase : `${normalizedBase}-${i + 1}`;
|
||||
// eslint-disable-next-line no-await-in-loop
|
||||
const taken = await opts.isTaken(candidate);
|
||||
if (!taken) return candidate;
|
||||
}
|
||||
|
||||
// Last resort: append timestamp to avoid collisions
|
||||
return `${normalizedBase}-${Date.now()}`;
|
||||
}
|
||||
|
||||
67
lib/tiptap/fontFamily.ts
Normal file
67
lib/tiptap/fontFamily.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
import { Extension } from "@tiptap/core";
|
||||
|
||||
const allowedFonts = [
|
||||
"Inter",
|
||||
"ui-sans-serif",
|
||||
"ui-serif",
|
||||
"ui-monospace",
|
||||
] as const;
|
||||
|
||||
export type AllowedFontFamily = (typeof allowedFonts)[number];
|
||||
|
||||
declare module "@tiptap/core" {
|
||||
interface Commands<ReturnType> {
|
||||
fontFamily: {
|
||||
setFontFamily: (fontFamily: string) => ReturnType;
|
||||
unsetFontFamily: () => ReturnType;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const FontFamily = Extension.create({
|
||||
name: "fontFamily",
|
||||
|
||||
addGlobalAttributes() {
|
||||
return [
|
||||
{
|
||||
types: ["textStyle"],
|
||||
attributes: {
|
||||
fontFamily: {
|
||||
default: null,
|
||||
parseHTML: (element) => {
|
||||
const raw = (element as HTMLElement).style.fontFamily;
|
||||
if (!raw) return null;
|
||||
// Normalize: remove quotes and take first family only
|
||||
const first = raw.split(",")[0]?.trim().replace(/^["']|["']$/g, "");
|
||||
if (!first) return null;
|
||||
return first;
|
||||
},
|
||||
renderHTML: (attributes) => {
|
||||
const fontFamily = attributes.fontFamily as string | null;
|
||||
if (!fontFamily) return {};
|
||||
if (!allowedFonts.includes(fontFamily as AllowedFontFamily)) return {};
|
||||
return { style: `font-family: ${fontFamily}` };
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
addCommands() {
|
||||
return {
|
||||
setFontFamily:
|
||||
(fontFamily: string) =>
|
||||
({ chain }) => {
|
||||
if (!allowedFonts.includes(fontFamily as AllowedFontFamily)) return false;
|
||||
return chain().setMark("textStyle", { fontFamily }).run();
|
||||
},
|
||||
unsetFontFamily:
|
||||
() =>
|
||||
({ chain }) => {
|
||||
return chain().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run();
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -208,6 +208,13 @@ export const useWebVitals = () => {
|
||||
|
||||
// Wrap everything in try-catch to prevent errors from breaking the app
|
||||
try {
|
||||
const safeNow = () => {
|
||||
if (typeof performance !== "undefined" && typeof performance.now === "function") {
|
||||
return performance.now();
|
||||
}
|
||||
return Date.now();
|
||||
};
|
||||
|
||||
// Store web vitals for batch sending
|
||||
const webVitals: Record<string, number> = {};
|
||||
const path = window.location.pathname;
|
||||
@@ -233,7 +240,7 @@ export const useWebVitals = () => {
|
||||
cls: webVitals.CLS || 0,
|
||||
fid: webVitals.FID || 0,
|
||||
ttfb: webVitals.TTFB || 0,
|
||||
loadTime: performance.now()
|
||||
loadTime: safeNow()
|
||||
}
|
||||
})
|
||||
});
|
||||
@@ -307,7 +314,7 @@ export const useWebVitals = () => {
|
||||
setTimeout(() => {
|
||||
trackPerformance({
|
||||
name: 'page-load-complete',
|
||||
value: performance.now(),
|
||||
value: safeNow(),
|
||||
url: window.location.pathname,
|
||||
timestamp: Date.now(),
|
||||
userAgent: navigator.userAgent,
|
||||
|
||||
52
messages/de.json
Normal file
52
messages/de.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Start",
|
||||
"about": "Über mich",
|
||||
"projects": "Projekte",
|
||||
"contact": "Kontakt"
|
||||
},
|
||||
"common": {
|
||||
"backToHome": "Zurück zur Startseite",
|
||||
"backToProjects": "Zurück zu den Projekten",
|
||||
"viewAllProjects": "Alle Projekte ansehen",
|
||||
"loading": "Lädt..."
|
||||
},
|
||||
"consent": {
|
||||
"title": "Datenschutz-Einstellungen",
|
||||
"description": "Wir nutzen optionale Dienste (Analytics und Chat), um die Seite zu verbessern. Du kannst deine Auswahl jederzeit ändern.",
|
||||
"essential": "Essentiell",
|
||||
"analytics": "Analytics",
|
||||
"chat": "Chatbot",
|
||||
"acceptAll": "Alles akzeptieren",
|
||||
"acceptSelected": "Auswahl akzeptieren",
|
||||
"rejectAll": "Alles ablehnen"
|
||||
}
|
||||
,
|
||||
"home": {
|
||||
"hero": {
|
||||
"features": {
|
||||
"f1": "Next.js & Flutter",
|
||||
"f2": "Docker Swarm & CI/CD",
|
||||
"f3": "Self-Hosted Infrastruktur"
|
||||
},
|
||||
"description": "Student und leidenschaftlicher Self-Hoster: Ich baue Full-Stack Web-Apps und Mobile-Lösungen, betreibe meine eigene Infrastruktur und liebe DevOps.",
|
||||
"ctaWork": "Meine Projekte",
|
||||
"ctaContact": "Kontakt"
|
||||
},
|
||||
"about": {
|
||||
"title": "Über mich",
|
||||
"p1": "Hi, ich bin Dennis – Student und leidenschaftlicher Self-Hoster aus Osnabrück.",
|
||||
"p2": "Ich entwickle Full-Stack Web-Apps mit Next.js und Mobile-Apps mit Flutter. Besonders spannend finde ich DevOps: eigene Infrastruktur, Automatisierung und CI/CD Deployments.",
|
||||
"p3": "Wenn ich nicht code oder an Servern schraube, findest du mich beim Gaming, Joggen oder beim Experimentieren mit Automationen.",
|
||||
"funFactTitle": "Fun Fact",
|
||||
"funFactBody": "Auch wenn ich viel automatisiere, nutze ich für Kalender & Notizen noch Stift und Papier – das hilft mir beim Fokus."
|
||||
},
|
||||
"contact": {
|
||||
"title": "Kontakt",
|
||||
"subtitle": "Du willst zusammenarbeiten oder hast Fragen zu meinen Projekten? Schreib mir gerne!",
|
||||
"getInTouch": "Melde dich",
|
||||
"getInTouchBody": "Ich bin immer offen für neue Chancen, spannende Projekte oder einfach einen Tech-Talk."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
52
messages/en.json
Normal file
52
messages/en.json
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"nav": {
|
||||
"home": "Home",
|
||||
"about": "About",
|
||||
"projects": "Projects",
|
||||
"contact": "Contact"
|
||||
},
|
||||
"common": {
|
||||
"backToHome": "Back to Home",
|
||||
"backToProjects": "Back to Projects",
|
||||
"viewAllProjects": "View All Projects",
|
||||
"loading": "Loading..."
|
||||
},
|
||||
"consent": {
|
||||
"title": "Privacy settings",
|
||||
"description": "We use optional services (analytics and chat) to improve the site. You can change your choice anytime.",
|
||||
"essential": "Essential",
|
||||
"analytics": "Analytics",
|
||||
"chat": "Chatbot",
|
||||
"acceptAll": "Accept all",
|
||||
"acceptSelected": "Accept selected",
|
||||
"rejectAll": "Reject all"
|
||||
}
|
||||
,
|
||||
"home": {
|
||||
"hero": {
|
||||
"features": {
|
||||
"f1": "Next.js & Flutter",
|
||||
"f2": "Docker Swarm & CI/CD",
|
||||
"f3": "Self-Hosted Infrastructure"
|
||||
},
|
||||
"description": "Student and passionate self-hoster building full-stack web apps and mobile solutions. I run my own infrastructure and love exploring DevOps.",
|
||||
"ctaWork": "View My Work",
|
||||
"ctaContact": "Contact Me"
|
||||
},
|
||||
"about": {
|
||||
"title": "About Me",
|
||||
"p1": "Hi, I'm Dennis – a student and passionate self-hoster based in Osnabrück, Germany.",
|
||||
"p2": "I love building full-stack web applications with Next.js and mobile apps with Flutter. But what really excites me is DevOps: I run my own infrastructure and automate deployments with CI/CD.",
|
||||
"p3": "When I'm not coding or tinkering with servers, you'll find me gaming, jogging, or experimenting with automation workflows.",
|
||||
"funFactTitle": "Fun Fact",
|
||||
"funFactBody": "Even though I automate a lot, I still use pen and paper for my calendar and notes – it helps me stay focused."
|
||||
},
|
||||
"contact": {
|
||||
"title": "Contact Me",
|
||||
"subtitle": "Interested in working together or have questions about my projects? Feel free to reach out!",
|
||||
"getInTouch": "Get In Touch",
|
||||
"getInTouchBody": "I'm always available to discuss new opportunities, interesting projects, or simply chat about technology and innovation."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,99 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import type { NextRequest } from "next/server";
|
||||
|
||||
const SUPPORTED_LOCALES = ["en", "de"] as const;
|
||||
type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
|
||||
|
||||
function pickLocaleFromHeader(acceptLanguage: string | null): SupportedLocale {
|
||||
if (!acceptLanguage) return "en";
|
||||
const lower = acceptLanguage.toLowerCase();
|
||||
// Very small parser: prefer de, then en
|
||||
if (lower.includes("de")) return "de";
|
||||
if (lower.includes("en")) return "en";
|
||||
return "en";
|
||||
}
|
||||
|
||||
function hasLocalePrefix(pathname: string): boolean {
|
||||
return SUPPORTED_LOCALES.some((l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`));
|
||||
}
|
||||
|
||||
export function middleware(request: NextRequest) {
|
||||
// For /manage and /editor routes, the pages handle their own authentication
|
||||
// No middleware redirect needed - let the pages show login forms
|
||||
const { pathname, search } = request.nextUrl;
|
||||
|
||||
// If a locale-prefixed request hits a public asset path (e.g. /de/images/me.jpg),
|
||||
// redirect to the non-prefixed asset path.
|
||||
if (hasLocalePrefix(pathname)) {
|
||||
const rest = pathname.replace(/^\/(en|de)/, "") || "/";
|
||||
if (rest.includes(".")) {
|
||||
const responseUrl = request.nextUrl.clone();
|
||||
responseUrl.pathname = rest;
|
||||
const res = NextResponse.redirect(responseUrl);
|
||||
return addHeaders(request, res);
|
||||
}
|
||||
}
|
||||
|
||||
// Do not locale-route public assets (anything with a dot), robots, sitemap, etc.
|
||||
if (pathname.includes(".")) {
|
||||
return addHeaders(request, NextResponse.next());
|
||||
}
|
||||
|
||||
// Keep admin + APIs unlocalized for simplicity
|
||||
const isAdminOrApi =
|
||||
pathname.startsWith("/api/") ||
|
||||
pathname === "/api" ||
|
||||
pathname.startsWith("/manage") ||
|
||||
pathname.startsWith("/editor");
|
||||
|
||||
// Locale routing for public site pages
|
||||
const responseUrl = request.nextUrl.clone();
|
||||
|
||||
if (!isAdminOrApi) {
|
||||
if (hasLocalePrefix(pathname)) {
|
||||
// Persist locale preference
|
||||
const locale = pathname.split("/")[1] as SupportedLocale;
|
||||
const res = NextResponse.next();
|
||||
res.cookies.set("NEXT_LOCALE", locale, { path: "/" });
|
||||
|
||||
// Continue below to add security headers
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
return addHeaders(request, res);
|
||||
}
|
||||
|
||||
// Redirect bare routes to locale-prefixed ones
|
||||
const preferred = pickLocaleFromHeader(request.headers.get("accept-language"));
|
||||
const redirectTarget =
|
||||
pathname === "/" ? `/${preferred}` : `/${preferred}${pathname}${search || ""}`;
|
||||
responseUrl.pathname = redirectTarget;
|
||||
const res = NextResponse.redirect(responseUrl);
|
||||
res.cookies.set("NEXT_LOCALE", preferred, { path: "/" });
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
return addHeaders(request, res);
|
||||
}
|
||||
|
||||
// Fix for 421 Misdirected Request with Nginx Proxy Manager
|
||||
// Ensure proper host header handling for reverse proxy
|
||||
const hostname = request.headers.get('host') || request.headers.get('x-forwarded-host') || '';
|
||||
const hostname = request.headers.get("host") || request.headers.get("x-forwarded-host") || "";
|
||||
|
||||
// Add security headers to all responses
|
||||
const response = NextResponse.next();
|
||||
|
||||
return addHeaders(request, response, hostname);
|
||||
}
|
||||
|
||||
function addHeaders(request: NextRequest, response: NextResponse, hostnameOverride?: string) {
|
||||
const hostname =
|
||||
hostnameOverride ??
|
||||
request.headers.get("host") ??
|
||||
request.headers.get("x-forwarded-host") ??
|
||||
"";
|
||||
|
||||
// Set proper headers for Nginx Proxy Manager
|
||||
if (hostname) {
|
||||
response.headers.set('X-Forwarded-Host', hostname);
|
||||
response.headers.set('X-Real-IP', request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for') || '');
|
||||
response.headers.set("X-Forwarded-Host", hostname);
|
||||
response.headers.set(
|
||||
"X-Real-IP",
|
||||
request.headers.get("x-real-ip") || request.headers.get("x-forwarded-for") || "",
|
||||
);
|
||||
}
|
||||
|
||||
// Security headers (complementing next.config.ts headers)
|
||||
@@ -42,13 +120,11 @@ export const config = {
|
||||
matcher: [
|
||||
/*
|
||||
* Match all request paths except for the ones starting with:
|
||||
* - api/email (email API routes)
|
||||
* - api/health (health check)
|
||||
* - api (all API routes)
|
||||
* - _next/static (static files)
|
||||
* - _next/image (image optimization files)
|
||||
* - favicon.ico (favicon file)
|
||||
* - api/auth (auth API routes - need to be processed)
|
||||
*/
|
||||
"/((?!api/email|api/health|_next/static|_next/image|favicon.ico|api/auth).*)",
|
||||
"/((?!api|_next/static|_next/image|favicon.ico).*)",
|
||||
],
|
||||
};
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
|
||||
import dotenv from "dotenv";
|
||||
import path from "path";
|
||||
import bundleAnalyzer from "@next/bundle-analyzer";
|
||||
import createNextIntlPlugin from "next-intl/plugin";
|
||||
|
||||
// Load the .env file from the working directory
|
||||
dotenv.config({ path: path.resolve(process.cwd(), ".env") });
|
||||
@@ -16,7 +17,9 @@ const nextConfig: NextConfig = {
|
||||
poweredByHeader: false,
|
||||
|
||||
// React Strict Mode
|
||||
reactStrictMode: true,
|
||||
// In dev, React StrictMode double-mount can cause visible animation flicker
|
||||
// (Framer Motion "fade starts, disappears, then pops").
|
||||
reactStrictMode: process.env.NODE_ENV === "production",
|
||||
|
||||
// Disable ESLint during build for Docker
|
||||
eslint: {
|
||||
@@ -76,9 +79,9 @@ const nextConfig: NextConfig = {
|
||||
const csp =
|
||||
process.env.NODE_ENV === "production"
|
||||
? // Avoid `unsafe-eval` in production (reduces XSS impact and enables stronger CSP)
|
||||
"default-src 'self'; script-src 'self' 'unsafe-inline' https://analytics.dk0.dev; script-src-elem 'self' 'unsafe-inline' https://analytics.dk0.dev; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self' https://analytics.dk0.dev https://api.quotable.io; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
|
||||
"default-src 'self'; script-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
|
||||
: // Dev CSP: allow eval for tooling compatibility
|
||||
"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.dk0.dev; script-src-elem 'self' 'unsafe-inline' https://analytics.dk0.dev; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self' https://analytics.dk0.dev https://api.quotable.io; frame-ancestors 'none'; base-uri 'self'; form-action 'self';";
|
||||
"default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';";
|
||||
|
||||
return [
|
||||
{
|
||||
@@ -132,7 +135,11 @@ const nextConfig: NextConfig = {
|
||||
headers: [
|
||||
{
|
||||
key: "Cache-Control",
|
||||
value: "public, max-age=31536000, immutable",
|
||||
// In dev, aggressive caching breaks HMR and can brick a tab with stale chunks.
|
||||
value:
|
||||
process.env.NODE_ENV === "production"
|
||||
? "public, max-age=31536000, immutable"
|
||||
: "no-store",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -144,4 +151,6 @@ const withBundleAnalyzer = bundleAnalyzer({
|
||||
enabled: process.env.ANALYZE === "true",
|
||||
});
|
||||
|
||||
export default withBundleAnalyzer(nextConfig);
|
||||
const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
|
||||
|
||||
export default withBundleAnalyzer(withNextIntl(nextConfig));
|
||||
|
||||
2161
package-lock.json
generated
2161
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
17
package.json
17
package.json
@@ -54,6 +54,14 @@
|
||||
"dependencies": {
|
||||
"@next/bundle-analyzer": "^15.1.7",
|
||||
"@prisma/client": "^5.22.0",
|
||||
"@tiptap/extension-color": "^3.15.3",
|
||||
"@tiptap/extension-highlight": "^3.15.3",
|
||||
"@tiptap/extension-link": "^3.15.3",
|
||||
"@tiptap/extension-text-style": "^3.15.3",
|
||||
"@tiptap/extension-underline": "^3.15.3",
|
||||
"@tiptap/html": "^3.15.3",
|
||||
"@tiptap/react": "^3.15.3",
|
||||
"@tiptap/starter-kit": "^3.15.3",
|
||||
"@vercel/og": "^0.6.5",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^16.6.1",
|
||||
@@ -61,6 +69,7 @@
|
||||
"gray-matter": "^4.0.3",
|
||||
"lucide-react": "^0.542.0",
|
||||
"next": "^15.5.7",
|
||||
"next-intl": "^4.7.0",
|
||||
"node-cache": "^5.1.2",
|
||||
"node-fetch": "^2.7.0",
|
||||
"nodemailer": "^7.0.11",
|
||||
@@ -70,7 +79,9 @@
|
||||
"react-markdown": "^10.1.0",
|
||||
"react-responsive-masonry": "^2.7.1",
|
||||
"redis": "^5.8.2",
|
||||
"tailwind-merge": "^2.6.0"
|
||||
"sanitize-html": "^2.17.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"zod": "^4.3.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3",
|
||||
@@ -86,6 +97,8 @@
|
||||
"@types/react-dom": "^19",
|
||||
"@types/react-responsive-masonry": "^2.6.0",
|
||||
"@types/react-syntax-highlighter": "^15.5.11",
|
||||
"@types/sanitize-html": "^2.16.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "^15.5.7",
|
||||
@@ -93,7 +106,7 @@
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"nodemailer-mock": "^2.0.9",
|
||||
"playwright": "^1.57.0",
|
||||
"postcss": "^8",
|
||||
"postcss": "^8.4.49",
|
||||
"prisma": "^5.22.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"ts-jest": "^29.2.5",
|
||||
|
||||
@@ -44,7 +44,9 @@ export default defineConfig({
|
||||
],
|
||||
|
||||
webServer: {
|
||||
command: 'npm run dev',
|
||||
// Use plain Next.js dev server for E2E (no Docker dependency)
|
||||
// Force NODE_ENV=development to avoid Edge runtime eval issues in middleware bundle
|
||||
command: 'NODE_ENV=development npm run dev:next',
|
||||
url: 'http://localhost:3000',
|
||||
reuseExistingServer: true, // Always reuse if server is running
|
||||
timeout: 120 * 1000,
|
||||
|
||||
246
prisma/migrations/20260112150721_init/migration.sql
Normal file
246
prisma/migrations/20260112150721_init/migration.sql
Normal file
@@ -0,0 +1,246 @@
|
||||
-- CreateEnum
|
||||
CREATE TYPE "ContentStatus" AS ENUM ('DRAFT', 'PUBLISHED');
|
||||
|
||||
-- CreateEnum
|
||||
CREATE TYPE "Difficulty" AS ENUM ('BEGINNER', 'INTERMEDIATE', 'ADVANCED', 'EXPERT');
|
||||
|
||||
-- CreateEnum
|
||||
CREATE TYPE "InteractionType" AS ENUM ('LIKE', 'SHARE', 'BOOKMARK', 'COMMENT');
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "Project" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"slug" VARCHAR(255) NOT NULL,
|
||||
"defaultLocale" VARCHAR(10) NOT NULL DEFAULT 'en',
|
||||
"title" VARCHAR(255) NOT NULL,
|
||||
"description" TEXT NOT NULL,
|
||||
"content" TEXT NOT NULL,
|
||||
"tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"featured" BOOLEAN NOT NULL DEFAULT false,
|
||||
"category" VARCHAR(100) NOT NULL,
|
||||
"date" VARCHAR(10) NOT NULL,
|
||||
"github" VARCHAR(500),
|
||||
"live" VARCHAR(500),
|
||||
"published" BOOLEAN NOT NULL DEFAULT true,
|
||||
"imageUrl" VARCHAR(500),
|
||||
"metaDescription" TEXT,
|
||||
"keywords" TEXT,
|
||||
"ogImage" VARCHAR(500),
|
||||
"schema" JSONB,
|
||||
"difficulty" "Difficulty" NOT NULL DEFAULT 'INTERMEDIATE',
|
||||
"timeToComplete" VARCHAR(100),
|
||||
"technologies" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"challenges" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"lessonsLearned" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"futureImprovements" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"demoVideo" VARCHAR(500),
|
||||
"screenshots" TEXT[] DEFAULT ARRAY[]::TEXT[],
|
||||
"colorScheme" VARCHAR(100) NOT NULL DEFAULT 'Dark',
|
||||
"accessibility" BOOLEAN NOT NULL DEFAULT true,
|
||||
"performance" JSONB NOT NULL DEFAULT '{"loadTime": "1.5s", "bundleSize": "50KB", "lighthouse": 90}',
|
||||
"analytics" JSONB NOT NULL DEFAULT '{"likes": 0, "views": 0, "shares": 0}',
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "Project_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "project_translations" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"project_id" INTEGER NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL,
|
||||
"title" VARCHAR(255) NOT NULL,
|
||||
"description" TEXT NOT NULL,
|
||||
"content" JSONB,
|
||||
"metaDescription" TEXT,
|
||||
"keywords" TEXT,
|
||||
"ogImage" VARCHAR(500),
|
||||
"schema" JSONB,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "project_translations_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "content_pages" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"key" VARCHAR(100) NOT NULL,
|
||||
"status" "ContentStatus" NOT NULL DEFAULT 'PUBLISHED',
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "content_pages_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "content_page_translations" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"page_id" INTEGER NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL,
|
||||
"title" TEXT,
|
||||
"slug" VARCHAR(255),
|
||||
"content" JSONB NOT NULL,
|
||||
"metaDescription" TEXT,
|
||||
"keywords" TEXT,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "content_page_translations_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "site_settings" (
|
||||
"id" INTEGER NOT NULL DEFAULT 1,
|
||||
"defaultLocale" VARCHAR(10) NOT NULL DEFAULT 'en',
|
||||
"locales" TEXT[] DEFAULT ARRAY['en', 'de']::TEXT[],
|
||||
"theme" JSONB,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "site_settings_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "PageView" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"project_id" INTEGER,
|
||||
"page" VARCHAR(100) NOT NULL,
|
||||
"ip" VARCHAR(45),
|
||||
"user_agent" TEXT,
|
||||
"referrer" VARCHAR(500),
|
||||
"timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "PageView_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "UserInteraction" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"project_id" INTEGER NOT NULL,
|
||||
"type" "InteractionType" NOT NULL,
|
||||
"ip" VARCHAR(45),
|
||||
"user_agent" TEXT,
|
||||
"timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "UserInteraction_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "Contact" (
|
||||
"id" SERIAL NOT NULL,
|
||||
"name" VARCHAR(255) NOT NULL,
|
||||
"email" VARCHAR(255) NOT NULL,
|
||||
"subject" VARCHAR(500) NOT NULL,
|
||||
"message" TEXT NOT NULL,
|
||||
"responded" BOOLEAN NOT NULL DEFAULT false,
|
||||
"response_template" VARCHAR(50),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "Contact_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "activity_status" (
|
||||
"id" INTEGER NOT NULL DEFAULT 1,
|
||||
"activity_type" VARCHAR(50),
|
||||
"activity_details" VARCHAR(255),
|
||||
"activity_project" VARCHAR(255),
|
||||
"activity_language" VARCHAR(50),
|
||||
"activity_repo" VARCHAR(500),
|
||||
"music_playing" BOOLEAN NOT NULL DEFAULT false,
|
||||
"music_track" VARCHAR(255),
|
||||
"music_artist" VARCHAR(255),
|
||||
"music_album" VARCHAR(255),
|
||||
"music_platform" VARCHAR(50),
|
||||
"music_progress" INTEGER,
|
||||
"music_album_art" VARCHAR(500),
|
||||
"watching_title" VARCHAR(255),
|
||||
"watching_platform" VARCHAR(50),
|
||||
"watching_type" VARCHAR(50),
|
||||
"gaming_game" VARCHAR(255),
|
||||
"gaming_platform" VARCHAR(50),
|
||||
"gaming_status" VARCHAR(50),
|
||||
"status_mood" VARCHAR(50),
|
||||
"status_message" VARCHAR(500),
|
||||
"updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "activity_status_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "Project_slug_key" ON "Project"("slug");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_category_idx" ON "Project"("category");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_featured_idx" ON "Project"("featured");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_published_idx" ON "Project"("published");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_difficulty_idx" ON "Project"("difficulty");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_created_at_idx" ON "Project"("created_at");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Project_tags_idx" ON "Project"("tags");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "project_translations_locale_idx" ON "project_translations"("locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "project_translations_project_id_idx" ON "project_translations"("project_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "project_translations_project_id_locale_key" ON "project_translations"("project_id", "locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "content_pages_key_key" ON "content_pages"("key");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "content_page_translations_locale_idx" ON "content_page_translations"("locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "content_page_translations_slug_idx" ON "content_page_translations"("slug");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "content_page_translations_page_id_locale_key" ON "content_page_translations"("page_id", "locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "PageView_project_id_idx" ON "PageView"("project_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "PageView_timestamp_idx" ON "PageView"("timestamp");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "PageView_page_idx" ON "PageView"("page");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "UserInteraction_project_id_idx" ON "UserInteraction"("project_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "UserInteraction_type_idx" ON "UserInteraction"("type");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "UserInteraction_timestamp_idx" ON "UserInteraction"("timestamp");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Contact_email_idx" ON "Contact"("email");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Contact_responded_idx" ON "Contact"("responded");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "Contact_created_at_idx" ON "Contact"("created_at");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "project_translations" ADD CONSTRAINT "project_translations_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "content_page_translations" ADD CONSTRAINT "content_page_translations_page_id_fkey" FOREIGN KEY ("page_id") REFERENCES "content_pages"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
@@ -1,127 +0,0 @@
|
||||
# Database Migrations
|
||||
|
||||
This directory contains SQL migration scripts for manual database updates.
|
||||
|
||||
## Running Migrations
|
||||
|
||||
### Method 1: Using psql (Recommended)
|
||||
|
||||
```bash
|
||||
# Connect to your database
|
||||
psql -d portfolio -f prisma/migrations/create_activity_status.sql
|
||||
|
||||
# Or with connection string
|
||||
psql "postgresql://user:password@localhost:5432/portfolio" -f prisma/migrations/create_activity_status.sql
|
||||
```
|
||||
|
||||
### Method 2: Using Docker
|
||||
|
||||
```bash
|
||||
# If your database is in Docker
|
||||
docker exec -i postgres_container psql -U username -d portfolio < prisma/migrations/create_activity_status.sql
|
||||
```
|
||||
|
||||
### Method 3: Using pgAdmin or Database GUI
|
||||
|
||||
1. Open pgAdmin or your database GUI
|
||||
2. Connect to your `portfolio` database
|
||||
3. Open Query Tool
|
||||
4. Copy and paste the contents of `create_activity_status.sql`
|
||||
5. Execute the query
|
||||
|
||||
## Verifying Migration
|
||||
|
||||
After running the migration, verify it was successful:
|
||||
|
||||
```bash
|
||||
# Check if table exists
|
||||
psql -d portfolio -c "\dt activity_status"
|
||||
|
||||
# View table structure
|
||||
psql -d portfolio -c "\d activity_status"
|
||||
|
||||
# Check if default row was inserted
|
||||
psql -d portfolio -c "SELECT * FROM activity_status;"
|
||||
```
|
||||
|
||||
Expected output:
|
||||
```
|
||||
id | activity_type | ... | updated_at
|
||||
----+---------------+-----+---------------------------
|
||||
1 | | ... | 2024-01-15 10:30:00+00
|
||||
```
|
||||
|
||||
## Migration: create_activity_status.sql
|
||||
|
||||
**Purpose**: Creates the `activity_status` table for n8n activity feed integration.
|
||||
|
||||
**What it does**:
|
||||
- Creates `activity_status` table with all necessary columns
|
||||
- Inserts a default row with `id = 1`
|
||||
- Sets up automatic `updated_at` timestamp trigger
|
||||
- Adds table comment for documentation
|
||||
|
||||
**Required by**:
|
||||
- `/api/n8n/status` endpoint
|
||||
- `ActivityFeed` component
|
||||
- n8n workflows for status updates
|
||||
|
||||
**Safe to run multiple times**: Yes (uses `IF NOT EXISTS` and `ON CONFLICT`)
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### "relation already exists"
|
||||
Table already exists - migration is already applied. Safe to ignore.
|
||||
|
||||
### "permission denied"
|
||||
Your database user needs CREATE TABLE permissions:
|
||||
```sql
|
||||
GRANT CREATE ON DATABASE portfolio TO your_user;
|
||||
```
|
||||
|
||||
### "database does not exist"
|
||||
Create the database first:
|
||||
```bash
|
||||
createdb portfolio
|
||||
# Or
|
||||
psql -c "CREATE DATABASE portfolio;"
|
||||
```
|
||||
|
||||
### "connection refused"
|
||||
Ensure PostgreSQL is running:
|
||||
```bash
|
||||
# Check status
|
||||
pg_isready
|
||||
|
||||
# Start PostgreSQL (macOS)
|
||||
brew services start postgresql
|
||||
|
||||
# Start PostgreSQL (Linux)
|
||||
sudo systemctl start postgresql
|
||||
```
|
||||
|
||||
## Rolling Back
|
||||
|
||||
To remove the activity_status table:
|
||||
|
||||
```sql
|
||||
DROP TRIGGER IF EXISTS activity_status_updated_at ON activity_status;
|
||||
DROP FUNCTION IF EXISTS update_activity_status_updated_at();
|
||||
DROP TABLE IF EXISTS activity_status;
|
||||
```
|
||||
|
||||
Save this as `rollback_activity_status.sql` and run if needed.
|
||||
|
||||
## Future Migrations
|
||||
|
||||
When adding new migrations:
|
||||
1. Create a new `.sql` file with descriptive name
|
||||
2. Use timestamps in filename: `YYYYMMDD_description.sql`
|
||||
3. Document what it does in this README
|
||||
4. Test on local database first
|
||||
5. Mark as safe/unsafe for production
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: 2024-01-15
|
||||
**Status**: Required for n8n integration
|
||||
@@ -1,49 +0,0 @@
|
||||
-- Create activity_status table for n8n integration
|
||||
CREATE TABLE IF NOT EXISTS activity_status (
|
||||
id INTEGER PRIMARY KEY DEFAULT 1,
|
||||
activity_type VARCHAR(50),
|
||||
activity_details VARCHAR(255),
|
||||
activity_project VARCHAR(255),
|
||||
activity_language VARCHAR(50),
|
||||
activity_repo VARCHAR(500),
|
||||
music_playing BOOLEAN DEFAULT FALSE,
|
||||
music_track VARCHAR(255),
|
||||
music_artist VARCHAR(255),
|
||||
music_album VARCHAR(255),
|
||||
music_platform VARCHAR(50),
|
||||
music_progress INTEGER,
|
||||
music_album_art VARCHAR(500),
|
||||
watching_title VARCHAR(255),
|
||||
watching_platform VARCHAR(50),
|
||||
watching_type VARCHAR(50),
|
||||
gaming_game VARCHAR(255),
|
||||
gaming_platform VARCHAR(50),
|
||||
gaming_status VARCHAR(50),
|
||||
status_mood VARCHAR(50),
|
||||
status_message VARCHAR(500),
|
||||
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
|
||||
);
|
||||
|
||||
-- Insert default row
|
||||
INSERT INTO activity_status (id, updated_at)
|
||||
VALUES (1, NOW())
|
||||
ON CONFLICT (id) DO NOTHING;
|
||||
|
||||
-- Create function to automatically update updated_at
|
||||
CREATE OR REPLACE FUNCTION update_activity_status_updated_at()
|
||||
RETURNS TRIGGER AS $$
|
||||
BEGIN
|
||||
NEW.updated_at = NOW();
|
||||
RETURN NEW;
|
||||
END;
|
||||
$$ LANGUAGE plpgsql;
|
||||
|
||||
-- Create trigger for automatic timestamp updates
|
||||
DROP TRIGGER IF EXISTS activity_status_updated_at ON activity_status;
|
||||
CREATE TRIGGER activity_status_updated_at
|
||||
BEFORE UPDATE ON activity_status
|
||||
FOR EACH ROW
|
||||
EXECUTE FUNCTION update_activity_status_updated_at();
|
||||
|
||||
-- Add helpful comment
|
||||
COMMENT ON TABLE activity_status IS 'Stores real-time activity status from n8n workflows (coding, music, gaming, etc.)';
|
||||
1
prisma/migrations/migration_lock.toml
Normal file
1
prisma/migrations/migration_lock.toml
Normal file
@@ -0,0 +1 @@
|
||||
provider = "postgresql"
|
||||
@@ -1,73 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Quick Fix Script for Portfolio Database
|
||||
# This script creates the activity_status table needed for n8n integration
|
||||
|
||||
set -e
|
||||
|
||||
echo "🔧 Portfolio Database Quick Fix"
|
||||
echo "================================"
|
||||
echo ""
|
||||
|
||||
# Colors for output
|
||||
RED='\033[0;31m'
|
||||
GREEN='\033[0;32m'
|
||||
YELLOW='\033[1;33m'
|
||||
NC='\033[0m' # No Color
|
||||
|
||||
# Check if .env.local exists
|
||||
if [ ! -f .env.local ]; then
|
||||
echo -e "${RED}❌ Error: .env.local not found${NC}"
|
||||
echo "Please create .env.local with DATABASE_URL"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Load DATABASE_URL from .env.local
|
||||
export $(grep -v '^#' .env.local | xargs)
|
||||
|
||||
if [ -z "$DATABASE_URL" ]; then
|
||||
echo -e "${RED}❌ Error: DATABASE_URL not found in .env.local${NC}"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo -e "${GREEN}✓ Found DATABASE_URL${NC}"
|
||||
echo ""
|
||||
|
||||
# Extract database name from DATABASE_URL
|
||||
DB_NAME=$(echo $DATABASE_URL | sed -n 's/.*\/\([^?]*\).*/\1/p')
|
||||
echo "📦 Database: $DB_NAME"
|
||||
echo ""
|
||||
|
||||
# Run the migration
|
||||
echo "🚀 Creating activity_status table..."
|
||||
echo ""
|
||||
|
||||
psql "$DATABASE_URL" -f prisma/migrations/create_activity_status.sql
|
||||
|
||||
if [ $? -eq 0 ]; then
|
||||
echo ""
|
||||
echo -e "${GREEN}✅ SUCCESS! Migration completed${NC}"
|
||||
echo ""
|
||||
echo "Verifying table..."
|
||||
psql "$DATABASE_URL" -c "\d activity_status" | head -20
|
||||
echo ""
|
||||
echo "Checking default row..."
|
||||
psql "$DATABASE_URL" -c "SELECT id, updated_at FROM activity_status LIMIT 1;"
|
||||
echo ""
|
||||
echo -e "${GREEN}🎉 All done! Your database is ready.${NC}"
|
||||
echo ""
|
||||
echo "Next steps:"
|
||||
echo " 1. Restart your Next.js dev server: npm run dev"
|
||||
echo " 2. Visit http://localhost:3000"
|
||||
echo " 3. The activity feed should now work without errors"
|
||||
else
|
||||
echo ""
|
||||
echo -e "${RED}❌ Migration failed${NC}"
|
||||
echo ""
|
||||
echo "Troubleshooting:"
|
||||
echo " 1. Ensure PostgreSQL is running: pg_isready"
|
||||
echo " 2. Check your DATABASE_URL in .env.local"
|
||||
echo " 3. Verify database exists: psql -l | grep $DB_NAME"
|
||||
echo " 4. Try manual migration: psql $DB_NAME -f prisma/migrations/create_activity_status.sql"
|
||||
exit 1
|
||||
fi
|
||||
@@ -9,6 +9,8 @@ datasource db {
|
||||
|
||||
model Project {
|
||||
id Int @id @default(autoincrement())
|
||||
slug String @unique @db.VarChar(255)
|
||||
defaultLocale String @default("en") @db.VarChar(10)
|
||||
title String @db.VarChar(255)
|
||||
description String
|
||||
content String
|
||||
@@ -39,6 +41,8 @@ model Project {
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
translations ProjectTranslation[]
|
||||
|
||||
@@index([category])
|
||||
@@index([featured])
|
||||
@@index([published])
|
||||
@@ -47,6 +51,75 @@ model Project {
|
||||
@@index([tags])
|
||||
}
|
||||
|
||||
model ProjectTranslation {
|
||||
id Int @id @default(autoincrement())
|
||||
projectId Int @map("project_id")
|
||||
locale String @db.VarChar(10)
|
||||
title String @db.VarChar(255)
|
||||
description String
|
||||
content Json?
|
||||
metaDescription String?
|
||||
keywords String?
|
||||
ogImage String? @db.VarChar(500)
|
||||
schema Json?
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
project Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([projectId, locale])
|
||||
@@index([locale])
|
||||
@@index([projectId])
|
||||
@@map("project_translations")
|
||||
}
|
||||
|
||||
model ContentPage {
|
||||
id Int @id @default(autoincrement())
|
||||
key String @unique @db.VarChar(100)
|
||||
status ContentStatus @default(PUBLISHED)
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
translations ContentPageTranslation[]
|
||||
|
||||
@@map("content_pages")
|
||||
}
|
||||
|
||||
model ContentPageTranslation {
|
||||
id Int @id @default(autoincrement())
|
||||
pageId Int @map("page_id")
|
||||
locale String @db.VarChar(10)
|
||||
title String?
|
||||
slug String? @db.VarChar(255)
|
||||
content Json
|
||||
metaDescription String?
|
||||
keywords String?
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
|
||||
page ContentPage @relation(fields: [pageId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([pageId, locale])
|
||||
@@index([locale])
|
||||
@@index([slug])
|
||||
@@map("content_page_translations")
|
||||
}
|
||||
|
||||
model SiteSettings {
|
||||
id Int @id @default(1)
|
||||
defaultLocale String @default("en") @db.VarChar(10)
|
||||
locales String[] @default(["en","de"])
|
||||
theme Json?
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
@@map("site_settings")
|
||||
}
|
||||
|
||||
enum ContentStatus {
|
||||
DRAFT
|
||||
PUBLISHED
|
||||
}
|
||||
|
||||
model PageView {
|
||||
id Int @id @default(autoincrement())
|
||||
projectId Int? @map("project_id")
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user