Compare commits

..

27 Commits

Author SHA1 Message Date
6207e04bf5 2.2.13
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 1m41s
Build & Deploy / 🏗️ Build (push) Successful in 4m35s
Build & Deploy / 🚀 Deploy (push) Successful in 18s
Build & Deploy / 🧪 Post-Deploy Verification (push) Failing after 3m35s
Build & Deploy / 🔔 Notify (push) Successful in 1s
Nightly QA / 🎭 Lighthouse (push) Successful in 2m57s
Nightly QA / 🔗 Links & Deps (push) Successful in 3m15s
Nightly QA / ♿ Accessibility (push) Successful in 4m57s
Nightly QA / 🔍 Static Analysis (push) Successful in 7m0s
Nightly QA / 🔔 Notify (push) Successful in 2s
2026-03-16 23:15:10 +01:00
8ffb5967d3 fix(seo): correct canonical tags and localized blog post hreflang 2026-03-16 23:15:04 +01:00
8ba1c7ea38 style(pdf): align AGB layout with technical datasheet hero and spacing
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 53s
Build & Deploy / 🏗️ Build (push) Successful in 2m13s
Build & Deploy / 🚀 Deploy (push) Successful in 15s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 4m16s
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-16 07:53:29 +01:00
a546ffe69c fix(pdf): remove broken helvetica font registration causing 500 error
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 56s
Build & Deploy / 🏗️ Build (push) Successful in 2m29s
Build & Deploy / 🚀 Deploy (push) Failing after 15s
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-16 07:47:47 +01:00
15740db51e chore(ci): re-trigger pipeline after testing db schema hotfix
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 51s
Build & Deploy / 🏗️ Build (push) Successful in 2m20s
Build & Deploy / 🚀 Deploy (push) Successful in 15s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 4m7s
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-16 07:38:54 +01:00
13ab755857 fix(docker): bypass internal registry for base images to prevent 404s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 51s
Build & Deploy / 🏗️ Build (push) Successful in 2m23s
Build & Deploy / 🚀 Deploy (push) Successful in 18s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 3m33s
Build & Deploy / 🔔 Notify (push) Successful in 2s
Nightly QA / 🔗 Links & Deps (push) Successful in 2m57s
Nightly QA / 🎭 Lighthouse (push) Successful in 3m32s
Nightly QA / 🔍 Static Analysis (push) Failing after 4m49s
Nightly QA / ♿ Accessibility (push) Successful in 5m12s
Nightly QA / 🔔 Notify (push) Successful in 19s
2026-03-15 23:39:22 +01:00
1a68af0eec fix(pdf): align AGB page PDF layout with datasheet design tokens
Some checks failed
Nightly QA / 🔗 Links & Deps (push) Successful in 2m21s
Nightly QA / 🎭 Lighthouse (push) Successful in 4m15s
Nightly QA / 🔍 Static Analysis (push) Failing after 4m45s
Nightly QA / ♿ Accessibility (push) Successful in 5m16s
Nightly QA / 🔔 Notify (push) Successful in 3s
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 57s
Build & Deploy / 🏗️ Build (push) Failing after 18s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-13 22:24:33 +01:00
275784745d feat(db): add migration for pages redirect fields
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 54s
Build & Deploy / 🏗️ Build (push) Failing after 15s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-13 22:19:29 +01:00
4aef49cf2c fix: remove agbs rewrite rules that conflict with slug-mapping (redirect loop)
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 56s
Build & Deploy / 🏗️ Build (push) Failing after 16s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-13 15:35:01 +01:00
8ad3abb6f3 fix(docker): restore valid v1.8.20 base image tag
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 1m0s
Build & Deploy / 🏗️ Build (push) Failing after 15s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
Nightly QA / 🔗 Links & Deps (push) Successful in 2m32s
Nightly QA / 🎭 Lighthouse (push) Successful in 3m3s
Nightly QA / 🔍 Static Analysis (push) Failing after 4m43s
Nightly QA / ♿ Accessibility (push) Successful in 5m20s
Nightly QA / 🔔 Notify (push) Successful in 14s
2026-03-12 19:12:56 +01:00
1d75b60236 fix(docker): use correctly versioned mintel v2 base images
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Successful in 53s
Build & Deploy / 🏗️ Build (push) Failing after 15s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 14:39:05 +01:00
3dff19eca2 chore: update auto-generated types
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 11s
Build & Deploy / 🧪 QA (push) Successful in 2m9s
Build & Deploy / 🏗️ Build (push) Successful in 5m38s
Build & Deploy / 🚀 Deploy (push) Successful in 27s
Build & Deploy / 🧪 Post-Deploy Verification (push) Failing after 5m12s
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-12 13:41:23 +01:00
07b01c622a fix(deps): update pnpm-lock.yaml to fix CI registry checksums
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 14s
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🧪 QA (push) Has been cancelled
2026-03-12 13:34:32 +01:00
50de18c09c fix(docker): use latest tags for base images
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Successful in 2m7s
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
2026-03-12 13:29:45 +01:00
dbee0cd8bc fix(docker): use correct mmintel namespace for base images
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Successful in 2m12s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 13:24:33 +01:00
f30f8ddd8d fix(docker): migrate base image to git.infra.mintel.me registry
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 2m11s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 13:20:48 +01:00
bb9fd65dbb fix(og): convert font buffers to ArrayBuffer for Satori compatibility
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 2m8s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 13:17:18 +01:00
036fba8b53 feat(payload): add redirect settings to pages
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Successful in 2m6s
Build & Deploy / 🏗️ Build (push) Failing after 15s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 13:12:13 +01:00
3e8d5ad8b6 chore: backup script
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 2m13s
Build & Deploy / 🏗️ Build (push) Failing after 15s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 13:05:19 +01:00
70ad2e3041 fix(build): remove swcMinify and fix staleTimes/serverActions config object to pass Next.js validation
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 5s
Build & Deploy / 🧪 QA (push) Successful in 2m14s
Build & Deploy / 🏗️ Build (push) Failing after 14s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 12:52:51 +01:00
5376b939d5 fix(cache): disable client router cache and fix terms routing
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Successful in 2m8s
Build & Deploy / 🏗️ Build (push) Failing after 16s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 1s
2026-03-12 12:44:42 +01:00
6f80e72c1d style: align PDF Page component with KLZ brand Design System
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 12s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 4s
Build & Deploy / 🧪 QA (push) Failing after 1m15s
Build & Deploy / 🏗️ Build (push) Has been skipped
Nightly QA / 🔗 Links & Deps (push) Successful in 3m32s
Nightly QA / 🎭 Lighthouse (push) Successful in 5m5s
Nightly QA / ♿ Accessibility (push) Successful in 5m28s
Nightly QA / 🔍 Static Analysis (push) Failing after 6m0s
Nightly QA / 🔔 Notify (push) Successful in 2s
2026-03-05 22:57:16 +01:00
d9334f558d fix(cms): add missing featured_image_id column to products via migration 2026-03-05 22:04:14 +01:00
cb436d31d0 fix(cms): disable migrationDir in production to prevent runtime TS import crashes 2026-03-05 21:51:55 +01:00
4b3ef49522 feat: register PDF download block and fix gotify notifications
All checks were successful
Build & Deploy / 🔍 Prepare (push) Successful in 7s
Build & Deploy / 🧪 QA (push) Successful in 2m24s
Build & Deploy / 🏗️ Build (push) Successful in 4m3s
Build & Deploy / 🚀 Deploy (push) Successful in 17s
Build & Deploy / 🧪 Post-Deploy Verification (push) Successful in 9m3s
Build & Deploy / 🔔 Notify (push) Successful in 2s
2026-03-05 16:56:09 +01:00
301e112488 fix(workflow): remove push trigger from qa.yml to prevent race conditions with deploy 2026-03-05 16:56:09 +01:00
2d4919cc1f feat: add modular dynamic PDF generation for Payload pages
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 6s
Build & Deploy / 🧪 QA (push) Has been cancelled
Build & Deploy / 🏗️ Build (push) Has been cancelled
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
Nightly QA / 🔍 Static Analysis (push) Failing after 3m14s
Nightly QA / 🔗 Links & Deps (push) Successful in 3m59s
Nightly QA / 🎭 Lighthouse (push) Successful in 4m44s
Nightly QA / ♿ Accessibility (push) Successful in 5m48s
Nightly QA / 🔔 Notify (push) Successful in 3s
2026-03-05 13:53:59 +01:00
285 changed files with 3161 additions and 36748 deletions

38
.env Normal file
View File

@@ -0,0 +1,38 @@
# Application
NODE_ENV=production
NEXT_PUBLIC_BASE_URL=https://klz-cables.com
UMAMI_WEBSITE_ID=e4a2cd1c-59fb-4e5b-bac5-9dfd1d02dd81
UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
SENTRY_DSN=https://c10957d0182245b1a2a806ac2d34a197@errors.infra.mintel.me/1
LOG_LEVEL=info
NEXT_PUBLIC_FEEDBACK_ENABLED=false
NEXT_PUBLIC_RECORD_MODE_ENABLED=false
NPM_TOKEN=263e7f75d8ada27f3a2e71fd6bd9d95298d48a4d
# SMTP Configuration
MAIL_HOST=smtp.eu.mailgun.org
MAIL_PORT=587
MAIL_USERNAME=postmaster@mg.mintel.me
MAIL_PASSWORD=4592fcb94599ee1a45b4ac2386fd0a64-102c75d8-ca2870e6
MAIL_FROM="KLZ Cables <postmaster@mg.mintel.me>"
MAIL_RECIPIENTS=marc@cablecreations.de,info@klz-cables.com
# ────────────────────────────────────────────────────────────────────────────
# Payload Infrastructure (Dockerized)
# ────────────────────────────────────────────────────────────────────────────
# The POSTGRES_URI and PAYLOAD_SECRET are automatically constructed and injected
# by docker-compose.yml using these base DB credentials, so you don't need to
# manually write the connection strings here.
PAYLOAD_DB_NAME=payload
PAYLOAD_DB_USER=payload
PAYLOAD_DB_PASSWORD=120in09oenaoinsd9iaidon
# ────────────────────────────────────────────────────────────────────────────
# Hetzner S3 Object Storage
# ────────────────────────────────────────────────────────────────────────────
S3_ENDPOINT=https://fsn1.your-objectstorage.com
S3_ACCESS_KEY=ROB3MSWMEIGRL7N94ZKS
S3_SECRET_KEY=9QJV3NE8xeLxhyufhNU7lsUB0RffJxPhGuEuFSH3
S3_BUCKET=mintel
S3_REGION=fsn1
S3_PREFIX=klz-cables

View File

@@ -48,12 +48,6 @@ GATEKEEPER_PASSWORD=klz2026
SENTRY_DSN= SENTRY_DSN=
# SENTRY_ENVIRONMENT is set automatically by CI # SENTRY_ENVIRONMENT is set automatically by CI
# ────────────────────────────────────────────────────────────────────────────
# AI Agent (Payload CMS Agent via OpenRouter)
# ────────────────────────────────────────────────────────────────────────────
# Required for the Payload CMS AI Chat Agent
MISTRAL_API_KEY=
# ──────────────────────────────────────────────────────────────────────────── # ────────────────────────────────────────────────────────────────────────────
# Payload Infrastructure (Dockerized) # Payload Infrastructure (Dockerized)
# ──────────────────────────────────────────────────────────────────────────── # ────────────────────────────────────────────────────────────────────────────

51
.gitea/workflows/ci.yml Normal file
View File

@@ -0,0 +1,51 @@
name: CI - Lint, Typecheck & Test
on:
pull_request:
concurrency:
group: deploy-pipeline
cancel-in-progress: true
jobs:
quality-assurance:
runs-on: docker
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Setup pnpm
uses: pnpm/action-setup@v3
with:
version: 10
run_install: false
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: 20
- name: 🔐 Configure Private Registry
run: |
echo "@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm" > .npmrc
echo "//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${{ secrets.NPM_TOKEN }}" >> .npmrc
- name: Install dependencies
run: pnpm install --no-frozen-lockfile
env:
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: 🧪 QA Checks
env:
TURBO_TELEMETRY_DISABLED: "1"
run: npx turbo run check:mdx lint typecheck test --cache-dir=".turbo"
- name: 🏗️ Build
run: pnpm build
- name: ♿ Accessibility Check
run: pnpm start-server-and-test start http://localhost:3000 "pnpm check:a11y http://localhost:3000"
- name: ♿ WCAG Sitemap Audit
run: pnpm start-server-and-test start http://localhost:3000 "pnpm run check:wcag http://localhost:3000"
# monitor trigger

View File

@@ -37,8 +37,6 @@ jobs:
next_public_url: ${{ steps.determine.outputs.next_public_url }} next_public_url: ${{ steps.determine.outputs.next_public_url }}
project_name: ${{ steps.determine.outputs.project_name }} project_name: ${{ steps.determine.outputs.project_name }}
short_sha: ${{ steps.determine.outputs.short_sha }} short_sha: ${{ steps.determine.outputs.short_sha }}
slug: ${{ steps.determine.outputs.slug }}
gatekeeper_host: ${{ steps.determine.outputs.gatekeeper_host }}
container: container:
image: catthehacker/ubuntu:act-latest image: catthehacker/ubuntu:act-latest
steps: steps:
@@ -85,7 +83,7 @@ jobs:
SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//') SLUG=$(echo "$REF" | tr '[:upper:]' '[:lower:]' | sed 's/[^a-z0-9]/-/g' | sed 's/--*/-/g' | sed 's/^-//;s/-$//')
IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}" IMAGE_TAG="branch-${SLUG}-${SHORT_SHA}"
ENV_FILE=".env.branch-${SLUG}" ENV_FILE=".env.branch-${SLUG}"
TRAEFIK_HOST="${SLUG}.branch.klz-cables.com" TRAEFIK_HOST="${SLUG}.branch.mintel.me"
fi fi
# Standardize Traefik Rule (escaped backticks for Traefik v3) # Standardize Traefik Rule (escaped backticks for Traefik v3)
@@ -115,7 +113,6 @@ jobs:
echo "project_name=$PRJ-$TARGET" echo "project_name=$PRJ-$TARGET"
fi fi
echo "short_sha=$SHORT_SHA" echo "short_sha=$SHORT_SHA"
echo "slug=$SLUG"
} >> "$GITHUB_OUTPUT" } >> "$GITHUB_OUTPUT"
# ⏳ Wait for Upstream Packages/Images if Tagged # ⏳ Wait for Upstream Packages/Images if Tagged
@@ -159,8 +156,6 @@ jobs:
needs: prepare needs: prepare
if: needs.prepare.outputs.target != 'skip' if: needs.prepare.outputs.target != 'skip'
runs-on: docker runs-on: docker
env:
PUPPETEER_EXECUTABLE_PATH: /usr/bin/chromium
container: container:
image: catthehacker/ubuntu:act-latest image: catthehacker/ubuntu:act-latest
steps: steps:
@@ -186,12 +181,12 @@ jobs:
- name: 🔒 Security Audit - name: 🔒 Security Audit
run: pnpm audit --audit-level high || echo "⚠️ Audit found vulnerabilities (non-blocking)" run: pnpm audit --audit-level high || echo "⚠️ Audit found vulnerabilities (non-blocking)"
- name: 🧪 QA Checks - name: 🧪 QA Checks
if: github.event.inputs.skip_checks != 'true' if: github.event.inputs.skip_checks != 'true'
env: env:
TURBO_TELEMETRY_DISABLED: "1" TURBO_TELEMETRY_DISABLED: "1"
run: npx turbo run lint typecheck test --cache-dir=".turbo" run: npx turbo run lint typecheck test --cache-dir=".turbo"
# ────────────────────────────────────────────────────────────────────────────── # ──────────────────────────────────────────────────────────────────────────────
# JOB 3: Build & Push # JOB 3: Build & Push
# ────────────────────────────────────────────────────────────────────────────── # ──────────────────────────────────────────────────────────────────────────────
@@ -208,8 +203,7 @@ jobs:
- name: 🐳 Set up Docker Buildx - name: 🐳 Set up Docker Buildx
uses: docker/setup-buildx-action@v3 uses: docker/setup-buildx-action@v3
- name: 🔐 Registry Login - name: 🔐 Registry Login
run: | run: echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
echo "${{ secrets.REGISTRY_PASS }}" | docker login registry.infra.mintel.me -u "${{ secrets.REGISTRY_USER }}" --password-stdin
- name: 🏗️ Build and Push - name: 🏗️ Build and Push
uses: docker/build-push-action@v5 uses: docker/build-push-action@v5
with: with:
@@ -225,7 +219,7 @@ jobs:
NPM_TOKEN=${{ secrets.NPM_TOKEN }} NPM_TOKEN=${{ secrets.NPM_TOKEN }}
tags: registry.infra.mintel.me/mintel/klz-2026:${{ needs.prepare.outputs.image_tag }} tags: registry.infra.mintel.me/mintel/klz-2026:${{ needs.prepare.outputs.image_tag }}
secrets: | secrets: |
NPM_TOKEN=${{ secrets.NPM_TOKEN }} "NPM_TOKEN=${{ secrets.NPM_TOKEN }}"
# ────────────────────────────────────────────────────────────────────────────── # ──────────────────────────────────────────────────────────────────────────────
# JOB 4: Deploy # JOB 4: Deploy
@@ -243,7 +237,6 @@ jobs:
NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }} NEXT_PUBLIC_BASE_URL: ${{ needs.prepare.outputs.next_public_url }}
TRAEFIK_HOST: ${{ needs.prepare.outputs.traefik_host }} TRAEFIK_HOST: ${{ needs.prepare.outputs.traefik_host }}
GATEKEEPER_HOST: ${{ needs.prepare.outputs.gatekeeper_host }} GATEKEEPER_HOST: ${{ needs.prepare.outputs.gatekeeper_host }}
SLUG: ${{ needs.prepare.outputs.slug }}
# Secrets mapping (Payload CMS) # Secrets mapping (Payload CMS)
PAYLOAD_SECRET: ${{ secrets.PAYLOAD_SECRET || vars.PAYLOAD_SECRET || 'you-need-to-set-a-payload-secret' }} PAYLOAD_SECRET: ${{ secrets.PAYLOAD_SECRET || vars.PAYLOAD_SECRET || 'you-need-to-set-a-payload-secret' }}
@@ -256,8 +249,8 @@ jobs:
MAIL_PORT: ${{ secrets.SMTP_PORT || vars.SMTP_PORT || '587' }} MAIL_PORT: ${{ secrets.SMTP_PORT || vars.SMTP_PORT || '587' }}
MAIL_USERNAME: ${{ secrets.SMTP_USER || vars.SMTP_USER }} MAIL_USERNAME: ${{ secrets.SMTP_USER || vars.SMTP_USER }}
MAIL_PASSWORD: ${{ secrets.SMTP_PASS || vars.SMTP_PASS }} MAIL_PASSWORD: ${{ secrets.SMTP_PASS || vars.SMTP_PASS }}
MAIL_FROM: ${{ secrets.SMTP_FROM || vars.SMTP_FROM || 'noreply@klz-cables.com' }} MAIL_FROM: ${{ secrets.SMTP_FROM || vars.SMTP_FROM }}
MAIL_RECIPIENTS: ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT || 'info@klz-cables.com' }} MAIL_RECIPIENTS: ${{ secrets.CONTACT_RECIPIENT || vars.CONTACT_RECIPIENT }}
# Monitoring # Monitoring
SENTRY_DSN: ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }} SENTRY_DSN: ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
@@ -268,17 +261,6 @@ jobs:
# Analytics # Analytics
UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }} UMAMI_WEBSITE_ID: ${{ secrets.UMAMI_WEBSITE_ID || vars.UMAMI_WEBSITE_ID }}
UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }} UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
# Search & AI
OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY || vars.OPENROUTER_API_KEY }}
MISTRAL_API_KEY: ${{ secrets.MISTRAL_API_KEY || vars.MISTRAL_API_KEY }}
QDRANT_URL: ${{ secrets.QDRANT_URL || vars.QDRANT_URL || 'http://klz-qdrant:6333' }}
QDRANT_API_KEY: ${{ secrets.QDRANT_API_KEY || vars.QDRANT_API_KEY }}
REDIS_URL: ${{ secrets.REDIS_URL || vars.REDIS_URL || 'redis://klz-redis:6379' }}
KABELFACHMANN_MCP_URL: ${{ secrets.KABELFACHMANN_MCP_URL || vars.KABELFACHMANN_MCP_URL || 'http://klz-kabelfachmann:3007/sse' }}
# Container Registry (standalone)
REGISTRY_USER: ${{ secrets.REGISTRY_USER }}
REGISTRY_PASS: ${{ secrets.REGISTRY_PASS }}
steps: steps:
- name: Checkout repository - name: Checkout repository
uses: actions/checkout@v4 uses: actions/checkout@v4
@@ -337,14 +319,6 @@ jobs:
echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID" echo "UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID"
echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT" echo "UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT"
echo "" echo ""
echo "# Search & AI"
echo "OPENROUTER_API_KEY=$OPENROUTER_API_KEY"
echo "MISTRAL_API_KEY=$MISTRAL_API_KEY"
echo "QDRANT_URL=$QDRANT_URL"
echo "QDRANT_API_KEY=$QDRANT_API_KEY"
echo "REDIS_URL=$REDIS_URL"
echo "KABELFACHMANN_MCP_URL=$KABELFACHMANN_MCP_URL"
echo ""
echo "TARGET=$TARGET" echo "TARGET=$TARGET"
echo "SENTRY_ENVIRONMENT=$TARGET" echo "SENTRY_ENVIRONMENT=$TARGET"
echo "PROJECT_NAME=$PROJECT_NAME" echo "PROJECT_NAME=$PROJECT_NAME"
@@ -364,39 +338,9 @@ jobs:
cat .env.deploy cat .env.deploy
echo "----------------------------" echo "----------------------------"
- name: 🔐 Registry Auth
id: auth
run: |
echo "Testing available secrets against git.infra.mintel.me Docker registry..."
TOKENS="${{ secrets.GITEA_PAT }} ${{ secrets.MINTEL_PRIVATE_TOKEN }} ${{ secrets.NPM_TOKEN }}"
USERS="${{ github.repository_owner }} ${{ github.actor }} marcmintel mintel mmintel"
VALID_TOKEN=""
VALID_USER=""
for T in $TOKENS; do
if [ -n "$T" ]; then
for U in $USERS; do
if [ -n "$U" ]; then
if echo "$T" | docker login git.infra.mintel.me -u "$U" --password-stdin > /dev/null 2>&1; then
VALID_TOKEN="$T"
VALID_USER="$U"
break 2
fi
fi
done
fi
done
if [ -z "$VALID_TOKEN" ]; then echo "❌ All tokens failed to authenticate!"; exit 1; fi
echo "token=$VALID_TOKEN" >> $GITHUB_OUTPUT
echo "user=$VALID_USER" >> $GITHUB_OUTPUT
- name: 🚀 SSH Deploy - name: 🚀 SSH Deploy
shell: bash shell: bash
env: env:
TARGET: ${{ needs.prepare.outputs.target }}
SLUG: ${{ needs.prepare.outputs.slug }}
IMAGE_TAG: ${{ needs.prepare.outputs.image_tag }}
PROJECT_NAME: ${{ needs.prepare.outputs.project_name }}
ENV_FILE: ${{ needs.prepare.outputs.env_file }} ENV_FILE: ${{ needs.prepare.outputs.env_file }}
run: | run: |
mkdir -p ~/.ssh mkdir -p ~/.ssh
@@ -404,9 +348,6 @@ jobs:
chmod 600 ~/.ssh/id_ed25519 chmod 600 ~/.ssh/id_ed25519
ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts 2>/dev/null ssh-keyscan -H alpha.mintel.me >> ~/.ssh/known_hosts 2>/dev/null
# Determine deployment paths
echo "Preparing deployment for $TARGET..."
# Transfer and Restart # Transfer and Restart
if [[ "$TARGET" == "production" ]]; then if [[ "$TARGET" == "production" ]]; then
SITE_DIR="/home/deploy/sites/klz-cables.com" SITE_DIR="/home/deploy/sites/klz-cables.com"
@@ -415,55 +356,63 @@ jobs:
elif [[ "$TARGET" == "staging" ]]; then elif [[ "$TARGET" == "staging" ]]; then
SITE_DIR="/home/deploy/sites/staging.klz-cables.com" SITE_DIR="/home/deploy/sites/staging.klz-cables.com"
else else
SITE_DIR="/home/deploy/sites/branch.klz-cables.com/$SLUG" SITE_DIR="/home/deploy/sites/branch.klz-cables.com/${SLUG:-unknown}"
fi fi
# Transfer files
ssh root@alpha.mintel.me "mkdir -p $SITE_DIR" ssh root@alpha.mintel.me "mkdir -p $SITE_DIR"
scp .env.deploy root@alpha.mintel.me:$SITE_DIR/$ENV_FILE scp .env.deploy root@alpha.mintel.me:$SITE_DIR/$ENV_FILE
scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml scp docker-compose.yml root@alpha.mintel.me:$SITE_DIR/docker-compose.yml
APP_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-app-1" ssh root@alpha.mintel.me "cd $SITE_DIR && echo '${{ secrets.REGISTRY_PASS }}' | docker login registry.infra.mintel.me -u '${{ secrets.REGISTRY_USER }}' --password-stdin"
DB_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-db-1" ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' pull"
ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file '$ENV_FILE' up -d --remove-orphans"
# Branch Seeding Logic (Production -> Branch) # Sanitize Payload Migrations: Replace 'dev' push entries with proper migration names.
if [[ "$TARGET" == "branch" ]]; then # Without this, Payload prompts interactively for confirmation and blocks forever in Docker.
echo "🌱 Seeding Branch Environment from Production Database..." DB_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-db-1"
ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file $ENV_FILE pull && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file $ENV_FILE up -d klz-db" echo "⏳ Waiting for database container to be ready..."
for i in $(seq 1 15); do
# Wait for DB to be healthy with a 60s timeout if ssh root@alpha.mintel.me "docker exec $DB_CONTAINER pg_isready -U payload -q 2>/dev/null"; then
echo "⏳ Waiting for branch database to be ready..." echo "✅ Database is ready."
ssh root@alpha.mintel.me " break
for i in {1..30}; do fi
if docker exec $DB_CONTAINER pg_isready -U payload >/dev/null 2>&1; then echo " Attempt $i/15..."
exit 0 sleep 2
fi done
sleep 2
done echo "🔧 Sanitizing payload_migrations table (if exists)..."
echo '❌ Database failed to become ready after 60 seconds' REMOTE_DB_USER=$(ssh root@alpha.mintel.me "grep -h '^PAYLOAD_DB_USER=' $SITE_DIR/.env* 2>/dev/null | tail -1 | cut -d= -f2" || echo "payload")
exit 1 REMOTE_DB_NAME=$(ssh root@alpha.mintel.me "grep -h '^PAYLOAD_DB_NAME=' $SITE_DIR/.env* 2>/dev/null | tail -1 | cut -d= -f2" || echo "payload")
" || exit 1 REMOTE_DB_USER="${REMOTE_DB_USER:-payload}"
REMOTE_DB_NAME="${REMOTE_DB_NAME:-payload}"
# Copy Production Payload DB to Branch Payload DB & ensure media is copied
echo "📦 Syncing Production DB into Branch DB..." # Auto-detect migrations from src/migrations/*.ts
ssh root@alpha.mintel.me " BATCH=1
set -e -o pipefail VALUES=""
docker exec klz-cablescom-klz-db-1 pg_dump -U payload -d payload --clean --if-exists | docker exec -i $DB_CONTAINER psql -U payload -d payload --quiet for f in $(ls src/migrations/*.ts 2>/dev/null | sort); do
rsync -a --delete /var/lib/docker/volumes/klz-cablescom_klz_media_data/_data/ /var/lib/docker/volumes/${{ needs.prepare.outputs.project_name }}_klz_media_data/_data/ NAME=$(basename "$f" .ts)
" || exit 1 [ -n "$VALUES" ] && VALUES="$VALUES,"
VALUES="$VALUES ('$NAME', $BATCH)"
echo "✅ Branch database and media synced successfully." ((BATCH++))
done
if [ -n "$VALUES" ]; then
ssh root@alpha.mintel.me "docker exec $DB_CONTAINER psql -U $REMOTE_DB_USER -d $REMOTE_DB_NAME -c \"
DO \\\$\\\$ BEGIN
DELETE FROM payload_migrations WHERE batch = -1;
INSERT INTO payload_migrations (name, batch)
SELECT name, batch FROM (VALUES $VALUES) AS v(name, batch)
WHERE NOT EXISTS (SELECT 1 FROM payload_migrations pm WHERE pm.name = v.name);
EXCEPTION WHEN undefined_table THEN
RAISE NOTICE 'payload_migrations table does not exist yet — skipping sanitization';
END \\\$\\\$;
\"" || echo "⚠️ Migration sanitization skipped (table may not exist yet)"
fi fi
# Execute remote commands — alpha is pre-logged into registry.infra.mintel.me
ssh root@alpha.mintel.me "cd $SITE_DIR && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file $ENV_FILE pull && docker compose -p '${{ needs.prepare.outputs.project_name }}' --env-file $ENV_FILE up -d --remove-orphans"
# Restart app to pick up clean migration state # Restart app to pick up clean migration state
APP_CONTAINER="${{ needs.prepare.outputs.project_name }}-klz-app-1"
ssh root@alpha.mintel.me "docker restart $APP_CONTAINER" ssh root@alpha.mintel.me "docker restart $APP_CONTAINER"
# Generate Excel Datasheets
echo "📊 Generating Excel Datasheets on live container..."
ssh root@alpha.mintel.me "docker exec $APP_CONTAINER pnpm run excel:datasheets" || echo "⚠️ Excel generation failed (non-blocking)"
ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'" ssh root@alpha.mintel.me "docker system prune -f --filter 'until=24h'"
- name: 🧹 Post-Deploy Cleanup (Runner) - name: 🧹 Post-Deploy Cleanup (Runner)
@@ -476,7 +425,7 @@ jobs:
post_deploy_checks: post_deploy_checks:
name: 🧪 Post-Deploy Verification name: 🧪 Post-Deploy Verification
needs: [prepare, deploy] needs: [prepare, deploy]
if: needs.deploy.result == 'success' && true if: needs.deploy.result == 'success' && needs.prepare.outputs.target != 'branch'
runs-on: docker runs-on: docker
container: container:
image: catthehacker/ubuntu:act-latest image: catthehacker/ubuntu:act-latest
@@ -569,15 +518,6 @@ jobs:
GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }} GATEKEEPER_PASSWORD: ${{ secrets.GATEKEEPER_PASSWORD || 'klz2026' }}
UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }} UMAMI_API_ENDPOINT: ${{ secrets.UMAMI_API_ENDPOINT || vars.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me' }}
SENTRY_DSN: ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }} SENTRY_DSN: ${{ secrets.SENTRY_DSN || vars.SENTRY_DSN }}
- name: 📊 Excel Datasheet Accessibility Check
if: always() && steps.deps.outcome == 'success'
env:
TEST_URL: ${{ needs.prepare.outputs.next_public_url }}
run: |
echo "Checking if datasheets directory is reachable..."
# This checks if the /datasheets/ directory returns a valid response (200, 403, or 404 is technically reachable, but we'd prefer 200/403)
# Since the files are in public/datasheets/products/, we check that path.
curl -I -L -s -o /dev/null -w "%{http_code}" "$TEST_URL/datasheets/products/" | grep -E "200|301|302|403|404"
- name: 📝 E2E Form Submission Test - name: 📝 E2E Form Submission Test
if: always() && steps.deps.outcome == 'success' if: always() && steps.deps.outcome == 'success'
@@ -631,7 +571,7 @@ jobs:
STATUS_LINE="All checks passed" STATUS_LINE="All checks passed"
fi fi
TITLE="$EMOJI klz-cables.com $VERSION -> $TARGET" TITLE="$EMOJI klz-cables.com $VERSION $TARGET"
MESSAGE="$STATUS_LINE MESSAGE="$STATUS_LINE
Deploy: $DEPLOY | Smoke: $SMOKE | Perf: $PERF Deploy: $DEPLOY | Smoke: $SMOKE | Perf: $PERF
$URL" $URL"

View File

@@ -198,7 +198,7 @@ jobs:
notify: notify:
name: 🔔 Notify name: 🔔 Notify
needs: [static, a11y, lighthouse, links] needs: [static, a11y, lighthouse, links]
if: failure() if: always()
runs-on: docker runs-on: docker
container: container:
image: catthehacker/ubuntu:act-latest image: catthehacker/ubuntu:act-latest

6
.gitignore vendored
View File

@@ -28,9 +28,3 @@ html-errors*.json
reference/ reference/
# Database backups # Database backups
backups/ backups/
.env
# Payload CMS auto-generated
# Knowledge base source files
kabelhandbuch.txt

1
.npmrc
View File

@@ -1 +1,2 @@
@mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm/ @mintel:registry=https://git.infra.mintel.me/api/packages/mmintel/npm/
//git.infra.mintel.me/api/packages/mmintel/npm/:_authToken=${NPM_TOKEN}

View File

@@ -1,16 +1,22 @@
# Stage 1: Builder # Stage 1: Builder
FROM git.infra.mintel.me/mmintel/nextjs:latest AS base FROM node:20-alpine AS base
RUN apk add --no-cache libc6-compat curl
# Enable pnpm
RUN corepack enable && corepack prepare pnpm@10.3.0 --activate
WORKDIR /app WORKDIR /app
# Arguments for build-time configuration # Arguments for build-time configuration
ARG NEXT_PUBLIC_BASE_URL ARG NEXT_PUBLIC_BASE_URL
ARG NEXT_PUBLIC_TARGET ARG NEXT_PUBLIC_TARGET
ARG DIRECTUS_URL
ARG UMAMI_WEBSITE_ID ARG UMAMI_WEBSITE_ID
ARG UMAMI_API_ENDPOINT ARG UMAMI_API_ENDPOINT
# Environment variables for Next.js build # Environment variables for Next.js build
ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL ENV NEXT_PUBLIC_BASE_URL=$NEXT_PUBLIC_BASE_URL
ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET ENV NEXT_PUBLIC_TARGET=$NEXT_PUBLIC_TARGET
ENV DIRECTUS_URL=$DIRECTUS_URL
ENV UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID ENV UMAMI_WEBSITE_ID=$UMAMI_WEBSITE_ID
ENV UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT ENV UMAMI_API_ENDPOINT=$UMAMI_API_ENDPOINT
ENV SKIP_RUNTIME_ENV_VALIDATION=true ENV SKIP_RUNTIME_ENV_VALIDATION=true
@@ -18,7 +24,6 @@ ENV CI=true
# Copy lockfile and manifest for dependency installation caching # Copy lockfile and manifest for dependency installation caching
COPY pnpm-lock.yaml package.json .npmrc* ./ COPY pnpm-lock.yaml package.json .npmrc* ./
COPY patches* ./patches/
# Configure private registry and install dependencies # Configure private registry and install dependencies
RUN --mount=type=cache,id=pnpm,target=/pnpm/store \ RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
@@ -38,11 +43,6 @@ FROM base AS development
ENV NODE_ENV=development ENV NODE_ENV=development
CMD ["pnpm", "dev:local"] CMD ["pnpm", "dev:local"]
# Stage: Migrator
FROM base AS migrator
ENV NODE_ENV=production
CMD ["pnpm", "cms:migrate"]
# Build application # Build application
# Stage 3: Builder (Production) # Stage 3: Builder (Production)
FROM base AS builder FROM base AS builder
@@ -54,12 +54,21 @@ ENV RAYON_NUM_THREADS=3
ENV UV_THREADPOOL_SIZE=3 ENV UV_THREADPOOL_SIZE=3
RUN pnpm build RUN pnpm build
# Excel generation moved to post-deploy
# Stage 2: Runner # Stage 2: Runner
FROM git.infra.mintel.me/mmintel/runtime:latest AS runner FROM node:20-alpine AS runner
WORKDIR /app WORKDIR /app
# Install curl for health checks
RUN apk add --no-cache curl
# Create nextjs user and group (standardized in runtime image but ensuring local ownership)
RUN addgroup --system --gid 1001 nodejs && \
adduser --system --uid 1001 nextjs && \
chown -R nextjs:nodejs /app
USER nextjs
ENV HOSTNAME="0.0.0.0" ENV HOSTNAME="0.0.0.0"
ENV PORT=3000 ENV PORT=3000
ENV NODE_ENV=production ENV NODE_ENV=production
@@ -71,4 +80,3 @@ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
CMD ["node", "server.js"] CMD ["node", "server.js"]

View File

@@ -1,7 +1,7 @@
FROM node:20-alpine FROM node:20-alpine
# Install essential build tools if needed (e.g., for node-gyp) # Install essential build tools if needed (e.g., for node-gyp)
RUN apk add --no-cache libc6-compat python3 make g++ curl RUN apk add --no-cache libc6-compat python3 make g++
WORKDIR /app WORKDIR /app

View File

@@ -1,84 +1,57 @@
import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'; import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'; import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'; import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { BlocksFeatureClient as BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'; import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { default as default_9ed509b5e5f7d08a16335393f27586cc } from '../../../src/payload/components/Icon'; import { default as default_9ed509b5e5f7d08a16335393f27586cc } from '../../../src/payload/components/Icon'
import { default as default_5470ea90f7a8fd882c2fe59ff2b1c5b9 } from '../../../src/payload/components/Logo'; import { default as default_5470ea90f7a8fd882c2fe59ff2b1c5b9 } from '../../../src/payload/components/Logo'
import { ChatWindowProvider as ChatWindowProvider_d32a660df96f186e48bfc5b31626ccf5 } from '@mintel/payload-ai/components/ChatWindow'; import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc'
import { CollectionCards as CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1 } from '@payloadcms/next/rsc';
export const importMap = { export const importMap = {
'@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell': "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e, "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
'@payloadcms/richtext-lexical/rsc#RscEntryLexicalField': "@payloadcms/richtext-lexical/rsc#LexicalDiffComponent": LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e,
RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e, "@payloadcms/richtext-lexical/client#BlocksFeatureClient": BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/rsc#LexicalDiffComponent': "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e, "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#BlocksFeatureClient': "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
BlocksFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient': "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient': "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#UploadFeatureClient': "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#BlockquoteFeatureClient': "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#RelationshipFeatureClient': "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#LinkFeatureClient': "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#ChecklistFeatureClient': "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#OrderedListFeatureClient': "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#UnorderedListFeatureClient': "/src/payload/components/Icon#default": default_9ed509b5e5f7d08a16335393f27586cc,
UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "/src/payload/components/Logo#default": default_5470ea90f7a8fd882c2fe59ff2b1c5b9,
'@payloadcms/richtext-lexical/client#IndentFeatureClient': "@payloadcms/next/rsc#CollectionCards": CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1
IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, }
'@payloadcms/richtext-lexical/client#AlignFeatureClient':
AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#HeadingFeatureClient':
HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#ParagraphFeatureClient':
ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#InlineCodeFeatureClient':
InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#SuperscriptFeatureClient':
SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#SubscriptFeatureClient':
SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#StrikethroughFeatureClient':
StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#UnderlineFeatureClient':
UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#BoldFeatureClient':
BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'@payloadcms/richtext-lexical/client#ItalicFeatureClient':
ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
'/src/payload/components/Icon#default': default_9ed509b5e5f7d08a16335393f27586cc,
'/src/payload/components/Logo#default': default_5470ea90f7a8fd882c2fe59ff2b1c5b9,
'@mintel/payload-ai/components/ChatWindow#ChatWindowProvider':
ChatWindowProvider_d32a660df96f186e48bfc5b31626ccf5,
'@payloadcms/next/rsc#CollectionCards': CollectionCards_f9c02e79a4aed9a3924487c0cd4cafb1,
};

View File

@@ -1,8 +1,8 @@
import { notFound, redirect } from 'next/navigation'; import { notFound, redirect, permanentRedirect } from 'next/navigation';
import { Container, Badge, Heading } from '@/components/ui'; import { Container, Badge, Heading } from '@/components/ui';
import { getTranslations, setRequestLocale } from 'next-intl/server'; import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next'; import { Metadata } from 'next';
import { getPageBySlug } from '@/lib/pages'; import { getPageBySlug, getAllPages } from '@/lib/pages';
import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs'; import { mapSlugToFileSlug, mapFileSlugToTranslated } from '@/lib/slugs';
import PayloadRichText from '@/components/PayloadRichText'; import PayloadRichText from '@/components/PayloadRichText';
import { SITE_URL } from '@/lib/schema'; import { SITE_URL } from '@/lib/schema';
@@ -62,6 +62,15 @@ export default async function StandardPage({ params }: PageProps) {
notFound(); notFound();
} }
// Handle explicit CMS redirects (e.g. /en/terms -> /de/terms)
if (pageData.redirectUrl) {
if (pageData.redirectPermanent) {
permanentRedirect(pageData.redirectUrl);
} else {
redirect(pageData.redirectUrl);
}
}
// Redirect if accessed via a different locale's slug // Redirect if accessed via a different locale's slug
const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale); const fileSlug = await mapSlugToFileSlug(pageData.slug || slug, locale);
const correctSlug = await mapFileSlugToTranslated(fileSlug, locale); const correctSlug = await mapFileSlugToTranslated(fileSlug, locale);

View File

@@ -6,6 +6,7 @@ import {
getAdjacentPosts, getAdjacentPosts,
getReadingTime, getReadingTime,
extractLexicalHeadings, extractLexicalHeadings,
getPostSlugs,
} from '@/lib/blog'; } from '@/lib/blog';
import { Metadata } from 'next'; import { Metadata } from 'next';
import Link from 'next/link'; import Link from 'next/link';
@@ -33,12 +34,21 @@ export async function generateMetadata({ params }: BlogPostProps): Promise<Metad
if (!post) return {}; if (!post) return {};
const slugs = await getPostSlugs(slug, locale);
const deSlug = slugs?.de || post.slug;
const enSlug = slugs?.en || post.slug;
const description = post.frontmatter.excerpt || ''; const description = post.frontmatter.excerpt || '';
return { return {
title: post.frontmatter.title, title: post.frontmatter.title,
description: description, description: description,
alternates: { alternates: {
canonical: `${SITE_URL}/${locale}/blog/${post.slug}`, canonical: `${SITE_URL}/${locale}/blog/${post.slug}`,
languages: {
de: `${SITE_URL}/de/blog/${deSlug}`,
en: `${SITE_URL}/en/blog/${enSlug}`,
'x-default': `${SITE_URL}/en/blog/${enSlug}`,
},
}, },
openGraph: { openGraph: {
title: `${post.frontmatter.title} | KLZ Cables`, title: `${post.frontmatter.title} | KLZ Cables`,

View File

@@ -14,7 +14,7 @@ interface BlogIndexProps {
}>; }>;
} }
export async function generateMetadata({ params }: BlogIndexProps): Promise<Metadata> { export async function generateMetadata({ params }: BlogIndexProps) {
const { locale } = await params; const { locale } = await params;
const t = await getTranslations({ locale, namespace: 'Blog.meta' }); const t = await getTranslations({ locale, namespace: 'Blog.meta' });
return { return {

View File

@@ -5,7 +5,7 @@ import { Container, Heading, Section } from '@/components/ui';
import { Metadata } from 'next'; import { Metadata } from 'next';
import { getTranslations, setRequestLocale } from 'next-intl/server'; import { getTranslations, setRequestLocale } from 'next-intl/server';
import { SITE_URL } from '@/lib/schema'; import { SITE_URL } from '@/lib/schema';
import { getOGImageMetadata } from '@/lib/metadata';
import { Suspense } from 'react'; import { Suspense } from 'react';
import ContactMap from '@/components/ContactMap'; import ContactMap from '@/components/ContactMap';
import ObfuscatedEmail from '@/components/ObfuscatedEmail'; import ObfuscatedEmail from '@/components/ObfuscatedEmail';

View File

@@ -7,8 +7,10 @@ import AnalyticsShell from '@/components/analytics/AnalyticsShell';
import { Metadata, Viewport } from 'next'; import { Metadata, Viewport } from 'next';
import { NextIntlClientProvider } from 'next-intl'; import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server'; import { getMessages } from 'next-intl/server';
import { Suspense } from 'react';
import '../../styles/globals.css'; import '../../styles/globals.css';
import { SITE_URL } from '@/lib/schema'; import { SITE_URL } from '@/lib/schema';
import { config } from '@/lib/config';
import FeedbackClientWrapper from '@/components/FeedbackClientWrapper'; import FeedbackClientWrapper from '@/components/FeedbackClientWrapper';
import { setRequestLocale } from 'next-intl/server'; import { setRequestLocale } from 'next-intl/server';
import { Inter } from 'next/font/google'; import { Inter } from 'next/font/google';
@@ -33,13 +35,6 @@ export async function generateMetadata(props: {
}, },
metadataBase: new URL(baseUrl), metadataBase: new URL(baseUrl),
manifest: '/manifest.webmanifest', manifest: '/manifest.webmanifest',
alternates: {
canonical: `${baseUrl}/${locale}`,
languages: {
de: `${baseUrl}/de`,
en: `${baseUrl}/en`,
},
},
icons: { icons: {
icon: [ icon: [
{ url: '/favicon.ico', sizes: 'any' }, { url: '/favicon.ico', sizes: 'any' },
@@ -59,7 +54,6 @@ export const viewport: Viewport = {
themeColor: '#001a4d', themeColor: '#001a4d',
}; };
import AutoBrochureModal from '@/components/AutoBrochureModal';
export default async function Layout(props: { export default async function Layout(props: {
children: React.ReactNode; children: React.ReactNode;
params: Promise<{ locale: string }>; params: Promise<{ locale: string }>;
@@ -76,7 +70,7 @@ export default async function Layout(props: {
let messages: Record<string, any> = {}; let messages: Record<string, any> = {};
try { try {
messages = await getMessages(); messages = await getMessages();
} catch { } catch (error) {
messages = {}; messages = {};
} }
@@ -90,7 +84,6 @@ export default async function Layout(props: {
'Home', 'Home',
'Error', 'Error',
'StandardPage', 'StandardPage',
'Brochure',
]; ];
const clientMessages: Record<string, any> = {}; const clientMessages: Record<string, any> = {};
for (const key of clientKeys) { for (const key of clientKeys) {
@@ -132,11 +125,7 @@ export default async function Layout(props: {
const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true'; const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
return ( return (
<html <html lang={safeLocale} className={`overflow-x-hidden ${inter.variable}`}>
lang={safeLocale}
className={`scroll-smooth overflow-x-hidden ${inter.variable}`}
data-scroll-behavior="smooth"
>
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
@@ -160,8 +149,6 @@ export default async function Layout(props: {
<AnalyticsShell /> <AnalyticsShell />
<FeedbackClientWrapper feedbackEnabled={feedbackEnabled} /> <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />
<AutoBrochureModal />
</NextIntlClientProvider> </NextIntlClientProvider>
</body> </body>
</html> </html>

View File

@@ -72,7 +72,7 @@ export default async function NotFound() {
} }
suggestedUrl = '/' + pathParts.join('/'); suggestedUrl = '/' + pathParts.join('/');
} }
} catch { } catch (e) {
// Ignore Payload errors in 404 // Ignore Payload errors in 404
} }
} }

View File

@@ -1,11 +1,12 @@
import JsonLd from '@/components/JsonLd'; import JsonLd from '@/components/JsonLd';
import { SITE_URL } from '@/lib/schema'; import { SITE_URL } from '@/lib/schema';
import ProductSidebar from '@/components/ProductSidebar'; import ProductSidebar from '@/components/ProductSidebar';
import ExcelDownload from '@/components/ExcelDownload'; import ProductTabs from '@/components/ProductTabs';
import ProductTechnicalData from '@/components/ProductTechnicalData';
import RelatedProducts from '@/components/RelatedProducts'; import RelatedProducts from '@/components/RelatedProducts';
import DatasheetDownload from '@/components/DatasheetDownload'; import DatasheetDownload from '@/components/DatasheetDownload';
import { Badge, Card, Container, Heading, Section } from '@/components/ui'; import { Badge, Card, Container, Heading, Section } from '@/components/ui';
import { getDatasheetPath, getExcelDatasheetPath } from '@/lib/datasheets'; import { getDatasheetPath } from '@/lib/datasheets';
import { getAllProducts, getProductBySlug } from '@/lib/products'; import { getAllProducts, getProductBySlug } from '@/lib/products';
import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs'; import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
import { Metadata } from 'next'; import { Metadata } from 'next';
@@ -277,7 +278,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
} }
const datasheetPath = getDatasheetPath(productSlug, locale); const datasheetPath = getDatasheetPath(productSlug, locale);
const excelPath = getExcelDatasheetPath(productSlug, locale);
const isFallback = (product.frontmatter as any).isFallback; const isFallback = (product.frontmatter as any).isFallback;
const categorySlug = slug[0]; const categorySlug = slug[0];
const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale); const categoryFileSlug = await mapSlugToFileSlug(categorySlug, locale);
@@ -343,7 +343,6 @@ export default async function ProductPage({ params }: ProductPageProps) {
productName={product.frontmatter.title} productName={product.frontmatter.title}
productImage={product.frontmatter.images?.[0]} productImage={product.frontmatter.images?.[0]}
datasheetPath={datasheetPath} datasheetPath={datasheetPath}
excelPath={excelPath}
/> />
); );
@@ -497,15 +496,7 @@ export default async function ProductPage({ params }: ProductPageProps) {
</h2> </h2>
<div className="h-1.5 w-24 bg-accent rounded-full" /> <div className="h-1.5 w-24 bg-accent rounded-full" />
</div> </div>
<div className="flex flex-row flex-wrap items-center gap-4 max-w-2xl"> <DatasheetDownload datasheetPath={datasheetPath} />
<DatasheetDownload
datasheetPath={datasheetPath}
className="mt-0 w-full sm:w-auto"
/>
{excelPath && (
<ExcelDownload excelPath={excelPath} className="mt-0 w-full sm:w-auto" />
)}
</div>
</div> </div>
)} )}

View File

@@ -2,7 +2,7 @@ import { getTranslations, setRequestLocale } from 'next-intl/server';
import { Metadata } from 'next'; import { Metadata } from 'next';
import JsonLd from '@/components/JsonLd'; import JsonLd from '@/components/JsonLd';
import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema'; import { getBreadcrumbSchema, SITE_URL } from '@/lib/schema';
import { Section, Container, Heading, Badge } from '@/components/ui'; import { Section, Container, Heading, Badge, Button } from '@/components/ui';
import Image from 'next/image'; import Image from 'next/image';
import Reveal from '@/components/Reveal'; import Reveal from '@/components/Reveal';
import Gallery from '@/components/team/Gallery'; import Gallery from '@/components/team/Gallery';

View File

@@ -1,123 +0,0 @@
'use server';
import { getServerAppServices } from '@/lib/services/create-services.server';
export async function requestBrochureAction(formData: FormData) {
const services = getServerAppServices();
const logger = services.logger.child({ action: 'requestBrochureAction' });
const { headers } = await import('next/headers');
const requestHeaders = await headers();
if ('setServerContext' in services.analytics) {
(services.analytics as any).setServerContext({
userAgent: requestHeaders.get('user-agent') || undefined,
language: requestHeaders.get('accept-language')?.split(',')[0] || undefined,
referrer: requestHeaders.get('referer') || undefined,
ip: requestHeaders.get('x-forwarded-for')?.split(',')[0] || undefined,
});
}
services.analytics.track('brochure-request-attempt');
const email = formData.get('email') as string;
const locale = (formData.get('locale') as string) || 'en';
// Anti-spam Honeypot Check
const honeypot = formData.get('company_website') as string;
if (honeypot) {
logger.warn('Spam detected via honeypot in brochure request', { email });
// Silently succeed to fool the bot without doing actual work
return { success: true };
}
if (!email) {
logger.warn('Missing email in brochure request');
return { success: false, error: 'Missing email address' };
}
// Basic email validation
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
return { success: false, error: 'Invalid email address' };
}
// 1. Save to CMS
try {
const { getPayload } = await import('payload');
const configPromise = (await import('@payload-config')).default;
const payload = await getPayload({ config: configPromise });
await payload.create({
collection: 'form-submissions',
data: {
name: email.split('@')[0],
email,
message: `Brochure download request (${locale})`,
type: 'brochure_download' as any,
},
overrideAccess: true,
});
logger.info('Successfully saved brochure request to Payload CMS', { email });
} catch (error) {
logger.error('Failed to store brochure request in Payload CMS', { error });
services.errors.captureException(error, { action: 'payload_store_brochure_request' });
}
// 2. Notify via Gotify
try {
await services.notifications.notify({
title: '📑 Brochure Download Request',
message: `New brochure download request from ${email} (${locale})`,
priority: 3,
});
} catch (error) {
logger.error('Failed to send notification', { error });
}
// 3. Send Brochure via Email
const brochureUrl = `https://klz-cables.com/brochure/klz-product-catalog-${locale}.pdf`;
try {
const { sendEmail } = await import('@/lib/mail/mailer');
const { render } = await import('@mintel/mail');
const React = await import('react');
const { BrochureDeliveryEmail } = await import('@/components/emails/BrochureDeliveryEmail');
const html = await render(
React.createElement(BrochureDeliveryEmail, {
_email: email,
brochureUrl,
locale: locale as 'en' | 'de',
}),
);
const emailResult = await sendEmail({
to: email,
subject: locale === 'de' ? 'Ihr KLZ Kabelkatalog' : 'Your KLZ Cable Catalog',
html,
});
if (emailResult.success) {
logger.info('Brochure email sent successfully', { email });
} else {
logger.error('Failed to send brochure email', { error: emailResult.error, email });
services.errors.captureException(new Error(`Brochure email failed: ${emailResult.error}`), {
action: 'requestBrochureAction_email',
email,
});
return { success: false, error: 'Failed to send email. Please try again later.' };
}
} catch (error) {
logger.error('Exception while sending brochure email', { error });
return { success: false, error: 'Failed to send email. Please try again later.' };
}
// 4. Track success
services.analytics.track('brochure-request-success', {
locale,
delivery_method: 'email',
});
return { success: true };
}

View File

@@ -25,14 +25,6 @@ export async function sendContactFormAction(formData: FormData) {
// Track attempt // Track attempt
services.analytics.track('contact-form-attempt'); services.analytics.track('contact-form-attempt');
// Anti-spam Honeypot Check
const honeypot = formData.get('company_website') as string;
if (honeypot) {
logger.warn('Spam detected via honeypot in contact request', { email: formData.get('email') });
// Silently succeed to fool the bot without doing actual work
return { success: true };
}
const name = formData.get('name') as string; const name = formData.get('name') as string;
const email = formData.get('email') as string; const email = formData.get('email') as string;
const message = formData.get('message') as string; const message = formData.get('message') as string;
@@ -62,7 +54,6 @@ export async function sendContactFormAction(formData: FormData) {
type: productName ? 'product_quote' : 'contact', type: productName ? 'product_quote' : 'contact',
productName: productName || undefined, productName: productName || undefined,
}, },
overrideAccess: true,
}); });
logger.info('Successfully saved form submission to Payload CMS', { logger.info('Successfully saved form submission to Payload CMS', {

View File

@@ -1,218 +0,0 @@
import { NextResponse, NextRequest } from 'next/server'; // Added NextRequest
import { searchProducts } from '../../../src/lib/qdrant';
import redis from '../../../src/lib/redis';
import { z } from 'zod';
import * as Sentry from '@sentry/nextjs';
import { generateText } from 'ai';
import { createOpenAI } from '@ai-sdk/openai';
// @ts-expect-error - Local version of @mintel/payload-ai/tools/mcpAdapter might not have types published yet
import { createMcpTools } from '@mintel/payload-ai/tools/mcpAdapter';
export const dynamic = 'force-dynamic';
export const maxDuration = 60; // Max allowed duration (Vercel)
// Config and constants
const RATE_LIMIT_POINTS = 20; // 20 requests per minute
const RATE_LIMIT_DURATION = 60; // 1 minute window
const DAILY_BUDGET_LIMIT = 200; // max 200 requests per IP per day
const DAILY_BUDGET_DURATION = 60 * 60 * 24; // 24h
const MAX_CONVERSATION_MESSAGES = 20; // max messages in context
const MAX_RESPONSE_TOKENS = 300; // cap AI response length — keeps it chat-like
// Removed requestSchema as it's replaced by direct parsing
export async function POST(req: NextRequest) {
// Changed req type to NextRequest
try {
let body: any;
try {
body = await req.json();
} catch {
return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
}
const { messages, honeypot } = body;
// Get client IP for rate limiting
const forwarded = req.headers.get('x-forwarded-for');
const clientIp = forwarded?.split(',')[0]?.trim() || req.headers.get('x-real-ip') || 'unknown';
// 1. Basic Validation
if (!messages || !Array.isArray(messages) || messages.length === 0) {
return NextResponse.json({ error: 'Valid messages array is required' }, { status: 400 });
}
const latestMessage = messages[messages.length - 1].content;
const isBot = honeypot && honeypot.length > 0;
// Check if the input itself is obviously spam/too long
if (latestMessage.length > 500) {
return NextResponse.json({ error: 'Message too long' }, { status: 400 });
}
// 2. Honeypot check
if (isBot) {
console.warn('Honeypot triggered in AI search');
// Tarpit the bot
await new Promise((resolve) => setTimeout(resolve, 3000));
return NextResponse.json({
answerText: 'Vielen Dank für Ihre Anfrage.',
products: [],
});
}
// 3. Rate Limiting via Redis (IP-based)
try {
// Per-minute burst limit
const minuteKey = `ai_rate:${clientIp}:min`;
const minuteCount = await redis.incr(minuteKey);
if (minuteCount === 1) await redis.expire(minuteKey, RATE_LIMIT_DURATION);
if (minuteCount > RATE_LIMIT_POINTS) {
return NextResponse.json(
{ error: 'Zu viele Anfragen. Bitte warte einen Moment.' },
{ status: 429 },
);
}
// Daily budget limit
const dayKey = `ai_rate:${clientIp}:day`;
const dayCount = await redis.incr(dayKey);
if (dayCount === 1) await redis.expire(dayKey, DAILY_BUDGET_DURATION);
if (dayCount > DAILY_BUDGET_LIMIT) {
return NextResponse.json(
{ error: 'Tägliches Limit erreicht. Bitte versuche es morgen erneut.' },
{ status: 429 },
);
}
} catch (redisError) {
console.error('Redis Rate Limiting Error:', redisError);
Sentry.captureException(redisError, { tags: { context: 'ai-search-rate-limit' } });
// Fail open if Redis is down
}
// 4. Cap conversation length to limit token usage
const cappedMessages = messages.slice(-MAX_CONVERSATION_MESSAGES);
// 4. Fetch Context from Qdrant based on the latest message
let contextStr = '';
let foundProducts: any[] = [];
// Team context — hardcoded from translation data (no Payload collection for team)
const teamContextStr = `
Das ECHTE KLZ Team:
- Michael Bodemer (Geschäftsführer) — Der Macher, packt an wenn es kompliziert wird, kennt Kabelnetze in- und auswendig
- Klaus Mintel (Geschäftsführer) — Der Fels in der Brandung, jahrzehntelange Erfahrung, stabiles Netzwerk`;
try {
const searchResults = await searchProducts(latestMessage, 5);
if (searchResults && searchResults.length > 0) {
const productDescriptions = searchResults
.filter((p) => p.payload?.type === 'product' || !p.payload?.type)
.map((p: any) => p.payload?.content)
.join('\n\n');
if (productDescriptions) {
contextStr = `KATALOG & PRODUKTE:\n${productDescriptions}`;
}
foundProducts = searchResults
.filter((p) => (p.payload?.type === 'product' || !p.payload?.type) && p.payload?.data)
.map((p: any) => ({
id: p.id as string,
title: p.payload?.data?.title as string,
sku: p.payload?.data?.sku as string,
slug: p.payload?.data?.slug as string,
}));
}
} catch (searchError) {
console.error('Qdrant Search Error:', searchError);
Sentry.captureException(searchError, { tags: { context: 'ai-search-qdrant' } });
// We can still proceed without context if Qdrant fails
}
// 5. Generate AI Response via OpenRouter (Mistral for DSGVO)
const systemPrompt = `Du bist "Ohm" — der digitale KI-Berater von KLZ Cables. Dein Name ist eine Anspielung auf die Einheit des elektrischen Widerstands.
STIL & PERSÖNLICHKEIT:
- Antworte KURZ, KNAPP und PROFESSIONELL (maximal 2-3 Sätze).
- Schreibe wie in einem lockeren, aber kompetenten B2B-Chat (Du-Form ist okay, aber fachlich top).
- Kein Markdown, nur Fließtext.
- NIEMALS Platzhalter wie [Ihr Name], [Name], [Firma] verwenden.
DEINE HAUPTAUFGABE: BERATEN, NICHT AUSFRAGEN!
- Wenn der Kunde ein Projekt nennt (z.B. "Windpark 30kV"), dann lies im KONTEXT nach, welche Kabel passen, und EMPFIEHL SIE DIREKT! (z.B. "Für 30kV Windparks nehmen wir meistens NA2XS(F)2Y.").
- Stelle NIEMALS mehr als EINE Rückfrage pro Nachricht.
- FRAGE NICHT nach abstrakten Dingen wie "Welchen Kabeltyp brauchst du?" -> DAS IST DEIN JOB, IHM DAS ZU SAGEN!
- FRAGE NICHT nach Längen oder genauen Trassen, es sei denn, der Kunde hat schon ganz klar gesagt, was er kaufen will.
- Biete aktiv Hilfe an: "Ich kann dir die passenden Querschnitte raussuchen, wenn du willst."
- Wenn technisches Wissen aus dem Kabelhandbuch benötigt wird, NUTZE UNBEDINGT eines der "kabelfachmann_*" Tools, anstatt zu raten oder zu behaupten du wüsstest es nicht! Das Tool weiss alles.
VORGEHEN:
1. Prüfe den KONTEXT auf passende Katalog-Kabel für das Kundenprojekt.
2. Wenn du tiefgehendes Wissen zu einem Kabeltyp brauchst (z.B. Biegeradius, Normen, Querschnitte), rufe das Kabelfachmann-Tool auf.
3. Nenne direkt 1-2 passende Produktserien aus dem Kontext oder der Tool-Abfrage, die für diesen Fall Sinn machen.
4. Biete eine konkrete Hilfestellung an (z.B. Leitungsberechnung, Verfügbarkeitsprüfung) ODER stelle EINE einzige fachliche Rückfrage, um das Kabel weiter einzugrenzen (z.B. Alu oder Kupfer?).
5. Wenn das Projekt klar ist und die Kabeltypen besprochen sind, frag nach, ob ein Kollege (z.B. Micha) ein konkretes Angebot machen soll.
GRENZEN:
- PRIVAT-ANFRAGEN: B2B only. Private Hausinstallationen lehnen wir freundlich ab.
- Keine Preise oder genauen Lieferzeiten versprechen. Immer auf die menschlichen Kollegen verweisen für finale Angebote.
KONTEXT KABEL & TEAM:
${contextStr || 'Kein Katalogkontext verfügbar.'}
${teamContextStr}
`;
const openrouterApiKey = process.env.OPENROUTER_API_KEY;
if (!openrouterApiKey) {
throw new Error('OPENROUTER_API_KEY is not set');
}
const openrouter = createOpenAI({
baseURL: 'https://openrouter.ai/api/v1',
apiKey: openrouterApiKey,
});
let mcpTools: Record<string, any> = {};
const mcpUrl = process.env.KABELFACHMANN_MCP_URL || 'http://host.docker.internal:3007/sse';
try {
const { tools } = await createMcpTools({
name: 'kabelfachmann',
url: mcpUrl,
});
mcpTools = tools;
} catch (e) {
console.warn('Failed to load MCP tools', e);
Sentry.captureException(e, { tags: { context: 'ai-search-mcp' } });
}
const { text } = await generateText({
model: openrouter('openai/gpt-4o-mini'),
system: systemPrompt,
messages: cappedMessages.map((m: any) => ({
role: m.role,
content: typeof m.content === 'string' ? m.content : JSON.stringify(m.content),
})),
tools: mcpTools,
// @ts-expect-error - maxSteps might be missing in some versions of generateText types
maxSteps: 5,
temperature: 0.3,
maxTokens: MAX_RESPONSE_TOKENS,
});
// Return the AI's answer along with any found products
return NextResponse.json({
answerText: text,
products: foundProducts,
});
} catch (error) {
console.error('AI Search API Error:', error);
Sentry.captureException(error, { tags: { context: 'ai-search-api' } });
return NextResponse.json(
{ error: 'Ein interner Fehler ist aufgetreten. Bitte versuche es erneut.' },
{ status: 500 },
);
}
}

View File

@@ -16,14 +16,6 @@ export async function GET() {
const payload = await getPayload({ config: configPromise }); const payload = await getPayload({ config: configPromise });
checks.init = 'ok'; checks.init = 'ok';
// Ensure migrations are applied on startup (reliable for standalone builds)
try {
await payload.db.migrate();
} catch (e: any) {
console.error('Migration failed:', e.message);
// We continue to check the collections even if migration fails
}
// Verify each collection can be queried (catches missing locale tables, broken migrations) // Verify each collection can be queried (catches missing locale tables, broken migrations)
const collections = ['posts', 'products', 'pages', 'media'] as const; const collections = ['posts', 'products', 'pages', 'media'] as const;
for (const collection of collections) { for (const collection of collections) {
@@ -35,7 +27,7 @@ export async function GET() {
} }
} }
const hasErrors = Object.values(checks).some((v) => v.startsWith('error')); const hasErrors = Object.values(checks).some(v => v.startsWith('error'));
return NextResponse.json( return NextResponse.json(
{ status: hasErrors ? 'degraded' : 'ok', checks }, { status: hasErrors ? 'degraded' : 'ok', checks },
{ status: hasErrors ? 503 : 200 }, { status: hasErrors ? 503 : 200 },

View File

@@ -1,165 +0,0 @@
import { NextResponse } from 'next/server';
import { getPayload } from 'payload';
import configPromise from '../../../payload.config';
import { upsertProductVector } from '../../../src/lib/qdrant';
export const dynamic = 'force-dynamic';
export const maxDuration = 120;
/**
* Internal endpoint called by the warmup script on every dev boot.
* Syncs posts, pages, and products from Payload CMS into Qdrant.
* NOT for form entries, media, or users.
*/
export async function GET() {
const results = { products: 0, posts: 0, pages: 0, errors: [] as string[] };
try {
const payload = await getPayload({ config: configPromise });
// ── Products ──
const { docs: products } = await payload.find({
collection: 'products',
limit: 1000,
depth: 0,
where: { _status: { equals: 'published' } },
});
for (const product of products) {
try {
const contentText = `${product.title} - SKU: ${product.sku}\n${product.description || ''}`;
await upsertProductVector(String(product.id), contentText, {
type: 'product',
data: {
title: product.title,
sku: product.sku,
slug: product.slug,
description: product.description,
},
});
results.products++;
} catch (e: any) {
results.errors.push(`product:${product.sku}: ${e.message}`);
}
}
// ── Posts ──
const { docs: posts } = await payload.find({
collection: 'posts',
limit: 1000,
depth: 0,
where: { _status: { equals: 'published' } },
});
for (const post of posts) {
try {
const contentText = [
`Blog-Artikel: ${post.title}`,
post.excerpt ? `Zusammenfassung: ${post.excerpt}` : '',
post.category ? `Kategorie: ${post.category}` : '',
]
.filter(Boolean)
.join('\n');
await upsertProductVector(`post_${post.id}`, contentText, {
type: 'knowledge',
content: contentText,
data: {
title: post.title,
slug: post.slug,
},
});
results.posts++;
} catch (e: any) {
results.errors.push(`post:${post.slug}: ${e.message}`);
}
}
// ── Pages ──
const { docs: pages } = await payload.find({
collection: 'pages',
limit: 1000,
depth: 0,
where: { _status: { equals: 'published' } },
});
for (const page of pages) {
try {
const contentText = [
`Seite: ${page.title}`,
page.excerpt ? `Beschreibung: ${page.excerpt}` : '',
]
.filter(Boolean)
.join('\n');
await upsertProductVector(`page_${page.id}`, contentText, {
type: 'knowledge',
content: contentText,
data: {
title: page.title,
slug: page.slug,
},
});
results.pages++;
} catch (e: any) {
results.errors.push(`page:${page.slug}: ${e.message}`);
}
}
// ── Kabelhandbuch (Static Text) ──
const os = require('os');
const path = require('path');
const fs = require('fs');
const crypto = await import('crypto');
const txtPath = path.join(process.cwd(), 'kabelhandbuch.txt');
let manualChunks = 0;
if (fs.existsSync(txtPath)) {
try {
const text = fs.readFileSync(txtPath, 'utf8');
const chunks = text
.split(/\n\s*\n/)
.map((c: string) => c.trim())
.filter((c: string) => c.length > 50);
for (let i = 0; i < chunks.length; i++) {
const chunkText = chunks[i];
const syntheticId = crypto.randomUUID();
await upsertProductVector(syntheticId, chunkText, {
type: 'knowledge',
content: chunkText,
data: {
title: `Kabelhandbuch Wissen - Bereich ${i + 1}`,
source: 'Kabelhandbuch KLZ.pdf',
},
});
manualChunks++;
}
console.log(`[Qdrant Sync] ✅ ${manualChunks} Kabelhandbuch-Chunks synced`);
} catch (e: any) {
results.errors.push(`kabelhandbuch: ${e.message}`);
}
} else {
console.log(`[Qdrant Sync] ⚠️ skipped Kabelhandbuch: ${txtPath} not found`);
}
console.log(
`[Qdrant Sync] ✅ ${results.products} products, ${results.posts} posts, ${results.pages} pages synced, ${manualChunks} manual chunks synced`,
);
return NextResponse.json({
success: true,
synced: {
products: results.products,
posts: results.posts,
pages: results.pages,
},
errors: results.errors.length > 0 ? results.errors : undefined,
});
} catch (error: any) {
console.error('[Qdrant Sync] ❌ Fatal error:', error);
return NextResponse.json({ error: error.message }, { status: 500 });
}
}

View File

@@ -1,28 +0,0 @@
'use client';
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';
const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
export default function AutoBrochureModal() {
const [isOpen, setIsOpen] = useState(false);
useEffect(() => {
// Check if user has already seen or interacted with the modal
const hasSeenModal = localStorage.getItem('klz_brochure_modal_seen');
if (!hasSeenModal) {
// Auto-open after 5 seconds to not interrupt immediate page load
const timer = setTimeout(() => {
setIsOpen(true);
// Mark as seen so it doesn't bother them again on next page load
localStorage.setItem('klz_brochure_modal_seen', 'true');
}, 5000);
return () => clearTimeout(timer);
}
}, []);
return <BrochureModal isOpen={isOpen} onClose={() => setIsOpen(false)} />;
}

View File

@@ -1,88 +0,0 @@
'use client';
import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { cn } from '@/components/ui/utils';
import dynamic from 'next/dynamic';
const BrochureModal = dynamic(() => import('./BrochureModal'), { ssr: false });
interface Props {
className?: string;
compact?: boolean;
}
/**
* BrochureCTA — Shows a button that opens a modal asking for an email address.
* The full-catalog PDF is ONLY revealed after email submission.
* No direct download link is exposed anywhere.
*/
export default function BrochureCTA({ className, compact = false }: Props) {
const t = useTranslations('Brochure');
const [open, setOpen] = useState(false);
return (
<>
<div className={cn(className)}>
<button
type="button"
onClick={() => setOpen(true)}
className={cn(
'group relative flex w-full items-center gap-4 overflow-hidden rounded-[28px] bg-[#000d26] border border-white/[0.08] text-left cursor-pointer',
'transition-all duration-300 hover:border-[#82ed20]/30 hover:shadow-[0_8px_30px_rgba(0,0,0,0.3)]',
compact ? 'p-4 md:p-5' : 'p-6 md:p-8',
)}
>
{/* Green top accent */}
<span className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[#82ed20]/50 to-transparent" />
{/* Icon */}
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/10 border border-[#82ed20]/20 group-hover:bg-[#82ed20] transition-colors duration-300">
<svg
className="h-5 w-5 text-[#82ed20] group-hover:text-[#000d26] transition-colors duration-300"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
/>
</svg>
</span>
{/* Labels */}
<span className="flex-1 min-w-0">
<span className="block text-[9px] font-black uppercase tracking-[0.2em] text-[#82ed20] mb-0.5">
PDF Katalog
</span>
<span
className={cn(
'block font-black text-white uppercase tracking-tight group-hover:text-[#82ed20] transition-colors duration-200',
compact ? 'text-base' : 'text-lg md:text-xl',
)}
>
{t('ctaTitle')}
</span>
</span>
{/* Arrow */}
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-[#82ed20] group-hover:text-[#000d26] transition-all duration-300">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2.5}
d="M9 5l7 7-7 7"
/>
</svg>
</span>
</button>
</div>
<BrochureModal isOpen={open} onClose={() => setOpen(false)} />
</>
);
}

View File

@@ -1,256 +0,0 @@
'use client';
import { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useTranslations, useLocale } from 'next-intl';
import { cn } from '@/components/ui/utils';
import { requestBrochureAction } from '@/app/actions/brochure';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';
interface BrochureModalProps {
isOpen: boolean;
onClose: () => void;
}
export default function BrochureModal({ isOpen, onClose }: BrochureModalProps) {
const t = useTranslations('Brochure');
const locale = useLocale();
const { trackEvent } = useAnalytics();
const formRef = useRef<HTMLFormElement>(null);
const modalRef = useRef<HTMLDivElement>(null);
const [state, setState] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
const [errorMsg, setErrorMsg] = useState('');
// Close on escape + lock scroll + focus trap
useEffect(() => {
if (!isOpen) return;
// Auto-focus input when opened
const firstInput = document.getElementById('brochure-email');
if (firstInput) {
setTimeout(() => firstInput.focus(), 50);
}
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape') onClose();
if (e.key === 'Tab' && modalRef.current) {
const focusable = modalRef.current.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
) as NodeListOf<HTMLElement>;
if (focusable.length > 0) {
const first = focusable[0];
const last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) {
last.focus();
e.preventDefault();
} else if (!e.shiftKey && document.activeElement === last) {
first.focus();
e.preventDefault();
}
}
}
};
document.addEventListener('keydown', handleKeyDown);
// Strict overflow lock on mobile as well
document.documentElement.style.setProperty('overflow', 'hidden', 'important');
document.body.style.setProperty('overflow', 'hidden', 'important');
return () => {
document.removeEventListener('keydown', handleKeyDown);
document.documentElement.style.overflow = '';
document.body.style.overflow = '';
};
}, [isOpen, onClose]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formRef.current) return;
setState('submitting');
setErrorMsg('');
try {
const formData = new FormData(formRef.current);
formData.set('locale', locale);
const result = await requestBrochureAction(formData);
if (result.success) {
setState('success');
trackEvent(AnalyticsEvents.DOWNLOAD, {
file_name: `klz-product-catalog-${locale}.pdf`,
file_type: 'brochure',
location: 'brochure_modal',
});
} else {
setState('error');
setErrorMsg(result.error || 'Something went wrong');
}
} catch {
setState('error');
setErrorMsg('Network error');
}
};
const handleClose = () => {
setState('idle');
setErrorMsg('');
onClose();
};
if (!isOpen) return null;
const modal = (
<div
className="fixed inset-0 z-[9999] flex items-center justify-center p-4"
role="dialog"
aria-modal="true"
>
{/* Backdrop */}
<div
className="absolute inset-0 bg-black/70 backdrop-blur-sm"
onClick={handleClose}
aria-hidden="true"
/>
{/* Modal Panel */}
<div
ref={modalRef}
className="relative z-10 w-full max-w-md rounded-[28px] bg-[#000d26] border border-white/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] overflow-hidden"
>
{/* Accent bar at top */}
<div className="h-1 w-full bg-gradient-to-r from-[#82ed20] via-[#5cb516] to-[#82ed20]" />
{/* Close Button */}
<button
type="button"
onClick={handleClose}
className="absolute top-4 right-4 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/5 text-white/40 hover:bg-white/10 hover:text-white transition-colors cursor-pointer"
aria-label={t('close')}
>
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<div className="p-8 pt-7">
{/* Icon + Header */}
<div className="mb-7">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20 mb-4">
<svg
className="h-6 w-6 text-[#82ed20]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
/>
</svg>
</div>
<h2 className="text-2xl font-black text-white uppercase tracking-tight leading-none mb-2">
{t('title')}
</h2>
<p className="text-sm text-white/50 leading-relaxed">{t('subtitle')}</p>
</div>
{state === 'success' ? (
<div>
<div className="flex items-center gap-3 mb-6 p-4 rounded-2xl bg-[#82ed20]/10 border border-[#82ed20]/20">
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#82ed20]/20">
<svg
className="h-5 w-5 text-[#82ed20]"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 13l4 4L19 7"
/>
</svg>
</div>
<div>
<p className="text-sm font-bold text-[#82ed20]">
{locale === 'de' ? 'Erfolgreich gesendet' : 'Successfully sent'}
</p>
<p className="text-xs text-white/50 mt-0.5">
{locale === 'de'
? 'Bitte prüfen Sie Ihren Posteingang.'
: 'Please check your inbox.'}
</p>
</div>
</div>
<button
type="button"
onClick={handleClose}
className="flex items-center justify-center gap-3 w-full py-4 px-6 rounded-2xl bg-white/10 hover:bg-white/20 text-white font-black text-sm uppercase tracking-widest transition-colors"
>
{t('close')}
</button>
</div>
) : (
<form ref={formRef} onSubmit={handleSubmit}>
<div className="mb-5">
<label
htmlFor="brochure-email"
className="block text-[10px] font-black uppercase tracking-[0.2em] text-white/40 mb-2"
>
{t('emailLabel')}
</label>
<input
id="brochure-email"
name="email"
type="email"
required
autoComplete="email"
placeholder={t('emailPlaceholder')}
className="w-full rounded-xl bg-white/5 border border-white/10 px-4 py-3.5 text-white placeholder:text-white/20 text-sm font-medium focus:outline-none focus:border-[#82ed20]/40 transition-colors"
disabled={state === 'submitting'}
/>
</div>
{state === 'error' && errorMsg && (
<p className="text-red-400 text-xs mb-4 font-medium">{errorMsg}</p>
)}
<button
type="submit"
disabled={state === 'submitting'}
className={cn(
'w-full py-4 px-6 rounded-2xl font-black text-sm uppercase tracking-widest transition-colors',
state === 'submitting'
? 'bg-white/10 text-white/40 cursor-wait'
: 'bg-[#82ed20] hover:bg-[#6dd318] text-[#000d26]',
)}
>
{state === 'submitting' ? t('submitting') : t('submit')}
</button>
<p className="mt-4 text-[10px] text-white/25 text-center leading-relaxed">
{t('privacyNote')}
</p>
</form>
)}
</div>
</div>
</div>
);
return createPortal(modal, document.body);
}

View File

@@ -15,12 +15,10 @@ export default function CMSConnectivityNotice() {
const isDebug = new URLSearchParams(window.location.search).has('cms_debug'); const isDebug = new URLSearchParams(window.location.search).has('cms_debug');
const isLocal = config.isDevelopment; const isLocal = config.isDevelopment;
const isTesting = config.isTesting; const isTesting = config.isTesting;
const target = process.env.NEXT_PUBLIC_TARGET || '';
const isBranch = target === 'branch';
// Only proceed with check if it's developer context (Local, Testing, or Branch preview) // Only proceed with check if it's developer context (Local or Testing)
// Staging and Production should NEVER see this unless forced with ?cms_debug // Staging and Production should NEVER see this unless forced with ?cms_debug
if (!isLocal && !isTesting && !isBranch && !isDebug) return; if (!isLocal && !isTesting && !isDebug) return;
try { try {
const response = await fetch('/api/health/cms'); const response = await fetch('/api/health/cms');
@@ -60,8 +58,8 @@ export default function CMSConnectivityNotice() {
<h4 className="font-bold text-sm mb-1">CMS Issue Detected</h4> <h4 className="font-bold text-sm mb-1">CMS Issue Detected</h4>
<p className="text-xs opacity-90 leading-relaxed mb-3"> <p className="text-xs opacity-90 leading-relaxed mb-3">
{errorMsg === 'relation "products" does not exist' {errorMsg === 'relation "products" does not exist'
? 'The database schema is missing. Please run migrations for this environment.' ? 'The database schema is missing. Please sync your local data to this environment.'
: 'A content service is unavailable. Check the deployment logs for details.'} : errorMsg || 'The application cannot connect to the Directus CMS.'}
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button

View File

@@ -138,20 +138,7 @@ export default function ContactForm() {
<Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10"> <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
{t('form.title')} {t('form.title')}
</Heading> </Heading>
<form <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
id="contact-form"
onSubmit={handleSubmit}
className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8"
>
{/* Anti-spam Honeypot */}
<input
type="text"
name="company_website"
tabIndex={-1}
autoComplete="off"
style={{ display: 'none' }}
aria-hidden="true"
/>
<div className="space-y-1 md:space-y-2"> <div className="space-y-1 md:space-y-2">
<Label htmlFor="contact-name">{t('form.name')}</Label> <Label htmlFor="contact-name">{t('form.name')}</Label>
<Input <Input

View File

@@ -33,12 +33,12 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
<div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" /> <div className="absolute inset-0 bg-gradient-to-r from-accent via-saturated to-accent opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
{/* Inner Content */} {/* Inner Content */}
<div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10"> <div className="relative flex items-center gap-6 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:p-8 border border-white/10">
{/* Icon Container */} {/* Icon Container */}
<div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500"> <div className="relative flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-accent group-hover:border-white/20 transition-all duration-500">
<div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="absolute inset-0 rounded-2xl bg-accent/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<svg <svg
className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3" className="relative h-8 w-8 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -54,13 +54,13 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
</div> </div>
{/* Text Content */} {/* Text Content */}
<div className="flex-1 min-w-0"> <div className="flex-1">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent"> <span className="text-[10px] font-black uppercase tracking-[0.2em] text-accent">
PDF Datasheet PDF Datasheet
</span> </span>
</div> </div>
<h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300"> <h3 className="text-xl md:text-2xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-accent transition-colors duration-300">
{t('downloadDatasheet')} {t('downloadDatasheet')}
</h3> </h3>
<p className="mt-2 text-sm font-medium text-white/60 leading-relaxed"> <p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
@@ -69,9 +69,9 @@ export default function DatasheetDownload({ datasheetPath, className }: Datashee
</div> </div>
{/* Arrow Icon */} {/* Arrow Icon */}
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500"> <div className="flex h-10 w-10 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-accent group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
<svg <svg
className="h-5 w-5" className="h-6 w-6"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
viewBox="0 0 24 24" viewBox="0 0 24 24"

View File

@@ -1,94 +0,0 @@
'use client';
import { cn } from '@/components/ui/utils';
import { useTranslations } from 'next-intl';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';
interface ExcelDownloadProps {
excelPath: string;
className?: string;
}
export default function ExcelDownload({ excelPath, className }: ExcelDownloadProps) {
const t = useTranslations('Products');
const { trackEvent } = useAnalytics();
return (
<div className={cn('mt-4 animate-slight-fade-in-from-bottom', className)}>
<a
href={excelPath}
target="_blank"
rel="noopener noreferrer"
onClick={() =>
trackEvent(AnalyticsEvents.DOWNLOAD, {
file_name: excelPath.split('/').pop(),
file_path: excelPath,
file_type: 'excel',
location: 'product_page',
})
}
className="group relative block w-full overflow-hidden rounded-[32px] bg-primary-dark p-1 transition-all duration-500 hover:shadow-[0_20px_50px_rgba(0,0,0,0.2)] hover:-translate-y-1"
>
{/* Animated Background Gradient */}
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500 via-teal-400 to-emerald-500 opacity-20 group-hover:opacity-40 transition-opacity duration-500 animate-gradient-x" />
{/* Inner Content */}
<div className="relative flex items-center gap-5 rounded-[31px] bg-primary-dark/90 backdrop-blur-xl p-6 md:px-6 md:py-6 border border-white/10">
{/* Icon Container */}
<div className="relative flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl bg-white/5 border border-white/10 group-hover:bg-emerald-600 group-hover:border-white/20 transition-all duration-500">
<div className="absolute inset-0 rounded-2xl bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* Spreadsheet/Table Icon */}
<svg
className="relative h-7 w-7 text-white transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M3 10h18M3 14h18M10 3v18M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6z"
/>
</svg>
</div>
{/* Text Content */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-400">
Excel Datasheet
</span>
</div>
<h3 className="text-xl font-black text-white uppercase tracking-tighter leading-none group-hover:text-emerald-400 transition-colors duration-300">
{t('downloadExcel')}
</h3>
<p className="mt-2 text-sm font-medium text-white/60 leading-relaxed">
{t('downloadExcelDesc')}
</p>
</div>
{/* Arrow Icon */}
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-white/5 text-white/20 group-hover:bg-emerald-600 group-hover:text-white group-hover:translate-x-1 transition-all duration-500">
<svg
className="h-5 w-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2.5}
d="M9 5l7 7-7 7"
/>
</svg>
</div>
</div>
</a>
</div>
);
}

View File

@@ -3,11 +3,9 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl'; import { useTranslations, useLocale } from 'next-intl';
import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
import { Container } from './ui'; import { Container } from './ui';
import { useAnalytics } from './analytics/useAnalytics'; import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events'; import { AnalyticsEvents } from './analytics/analytics-events';
import FooterBrochureForm from './FooterBrochureForm';
export default function Footer() { export default function Footer() {
const t = useTranslations('Footer'); const t = useTranslations('Footer');
@@ -245,10 +243,6 @@ export default function Footer() {
</div> </div>
</div> </div>
<div className="mb-12 md:mb-16">
<FooterBrochureForm />
</div>
<div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium"> <div className="pt-8 md:pt-12 border-t border-white/10 flex flex-row justify-between items-center gap-4 text-white/70 text-xs md:text-sm font-medium">
<p>{t('copyright', { year: currentYear })}</p> <p>{t('copyright', { year: currentYear })}</p>
<div className="flex gap-8"> <div className="flex gap-8">
@@ -282,48 +276,6 @@ export default function Footer() {
</Link> </Link>
</div> </div>
</div> </div>
{/* Brand & Quality Sub-Footer */}
<div className="pt-8 mt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-white/40 text-[10px] sm:text-xs">
<div>
<a
href="https://mintel.me"
target="_blank"
rel="noopener noreferrer"
onClick={() =>
trackEvent(AnalyticsEvents.LINK_CLICK, {
target: 'mintel_agency',
location: 'sub_footer',
})
}
className="hover:text-white/80 transition-colors flex items-center gap-1.5"
>
Website entwickelt von Marc Mintel
</a>
</div>
<div className="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-3">
<div className="flex items-center gap-1.5" title="SSL Secured">
<ShieldCheck className="w-3.5 h-3.5" />
<span>SSL Secured</span>
</div>
<div className="flex items-center gap-1.5" title="Green Hosting">
<Leaf className="w-3.5 h-3.5" />
<span>Green Hosting</span>
</div>
<div className="flex items-center gap-1.5" title="DSGVO Compliant">
<Lock className="w-3.5 h-3.5" />
<span>DSGVO Compliant</span>
</div>
<div className="flex items-center gap-1.5" title="WCAG">
<Accessibility className="w-3.5 h-3.5" />
<span>WCAG</span>
</div>
<div className="flex items-center gap-1.5" title="PageSpeed 90+">
<Zap className="w-3.5 h-3.5" />
<span>PageSpeed 90+</span>
</div>
</div>
</div>
</Container> </Container>
</footer> </footer>
); );

View File

@@ -1,134 +0,0 @@
'use client';
import { useState, useRef } from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { requestBrochureAction } from '@/app/actions/brochure';
import { cn } from '@/components/ui/utils';
import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events';
interface Props {
className?: string;
}
export default function FooterBrochureForm({ className }: Props) {
const t = useTranslations('Brochure');
const locale = useLocale();
const { trackEvent } = useAnalytics();
const formRef = useRef<HTMLFormElement>(null);
const [phase, setPhase] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [err, setErr] = useState('');
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (!formRef.current) return;
setPhase('loading');
const fd = new FormData(formRef.current);
fd.set('locale', locale);
try {
const res = await requestBrochureAction(fd);
if (res.success) {
setPhase('success');
trackEvent(AnalyticsEvents.DOWNLOAD, {
file_name: `klz-product-catalog-${locale}.pdf`,
file_type: 'brochure',
location: 'footer_inline',
});
} else {
setErr(res.error || 'Error');
setPhase('error');
}
} catch {
setErr('Network error');
setPhase('error');
}
}
if (phase === 'success') {
return (
<div
className={cn(
'flex flex-col sm:flex-row items-center gap-4 bg-white/5 border border-[#82ed20]/20 rounded-2xl p-6',
className,
)}
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#82ed20]/20 text-[#82ed20]">
<svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
</div>
<div>
<h4 className="text-white font-bold mb-1">
{locale === 'de' ? 'Erfolgreich angefordert!' : 'Successfully requested!'}
</h4>
<p className="text-white/60 text-sm">
{locale === 'de'
? 'Wir haben Ihnen den Katalog soeben per E-Mail zugesendet.'
: 'We have just sent the catalog to your email.'}
</p>
</div>
</div>
);
}
return (
<div
className={cn(
'bg-white/5 border border-white/10 rounded-3xl p-6 md:p-8 flex flex-col md:flex-row items-start md:items-center justify-between gap-6 md:gap-12',
className,
)}
>
<div className="flex-1 max-w-xl">
<h4 className="text-lg font-black text-white uppercase tracking-tight mb-2">
{t('ctaTitle')}
</h4>
<p className="text-sm text-white/60 leading-relaxed mb-0">{t('subtitle')}</p>
</div>
<form
ref={formRef}
onSubmit={handleSubmit}
className="w-full md:w-auto flex flex-col sm:flex-row gap-3"
>
{/* Anti-spam Honeypot */}
<input
type="text"
name="company_website"
tabIndex={-1}
autoComplete="off"
style={{ display: 'none' }}
aria-hidden="true"
/>
<div className="relative w-full sm:w-64">
<input
name="email"
type="email"
required
placeholder={t('emailPlaceholder')}
disabled={phase === 'loading'}
className="w-full bg-primary-dark border border-white/20 rounded-xl px-4 py-3 text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-[#82ed20]/50 transition-colors"
/>
</div>
<button
type="submit"
disabled={phase === 'loading'}
className={cn(
'flex items-center justify-center shrink-0 px-6 py-3 rounded-xl font-bold text-sm uppercase tracking-widest transition-colors',
phase === 'loading'
? 'bg-white/10 text-white/40 cursor-wait'
: 'bg-[#82ed20] text-[#000d26] hover:bg-[#6dd318] cursor-pointer',
)}
>
{phase === 'loading' ? t('submitting') : t('submit')}
</button>
</form>
{phase === 'error' && err && (
<div className="absolute mt-16 text-red-400 text-xs font-medium">{err}</div>
)}
</div>
);
}

View File

@@ -9,8 +9,6 @@ import { useEffect, useState, useRef } from 'react';
import { cn } from './ui'; import { cn } from './ui';
import { useAnalytics } from './analytics/useAnalytics'; import { useAnalytics } from './analytics/useAnalytics';
import { AnalyticsEvents } from './analytics/analytics-events'; import { AnalyticsEvents } from './analytics/analytics-events';
import { Search } from 'lucide-react';
import { AISearchResults } from './search/AISearchResults';
export default function Header() { export default function Header() {
const t = useTranslations('Navigation'); const t = useTranslations('Navigation');
@@ -18,7 +16,6 @@ export default function Header() {
const { trackEvent } = useAnalytics(); const { trackEvent } = useAnalytics();
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isSearchOpen, setIsSearchOpen] = useState(false);
const mobileMenuRef = useRef<HTMLDivElement>(null); const mobileMenuRef = useRef<HTMLDivElement>(null);
// Extract locale from pathname // Extract locale from pathname
@@ -39,7 +36,6 @@ export default function Header() {
// Prevent scroll when mobile menu is open and handle focus trap // Prevent scroll when mobile menu is open and handle focus trap
useEffect(() => { useEffect(() => {
if (isMobileMenuOpen) { if (isMobileMenuOpen) {
document.documentElement.style.overflow = 'hidden';
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
// Focus trap logic // Focus trap logic
const focusableElements = mobileMenuRef.current?.querySelectorAll( const focusableElements = mobileMenuRef.current?.querySelectorAll(
@@ -84,8 +80,7 @@ export default function Header() {
}; };
} }
} else { } else {
document.documentElement.style.overflow = ''; document.body.style.overflow = 'unset';
document.body.style.overflow = '';
} }
}, [isMobileMenuOpen]); }, [isMobileMenuOpen]);
@@ -278,19 +273,6 @@ export default function Header() {
<div <div
className="animate-in fade-in zoom-in-95 fill-mode-both" className="animate-in fade-in zoom-in-95 fill-mode-both"
style={{ animationDuration: '600ms', animationDelay: '700ms' }} style={{ animationDuration: '600ms', animationDelay: '700ms' }}
>
<button
onClick={() => setIsSearchOpen(true)}
className="hover:text-accent transition-colors p-2"
aria-label="Search"
>
<Search className="w-5 h-5 md:w-6 md:h-6" />
</button>
</div>
<div
className="animate-in fade-in zoom-in-95 fill-mode-both"
style={{ animationDuration: '600ms', animationDelay: '800ms' }}
> >
<Button <Button
href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`} href={`/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`}
@@ -485,8 +467,6 @@ export default function Header() {
</div> </div>
</nav> </nav>
</div> </div>
<AISearchResults isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} />
</> </>
); );
} }

View File

@@ -23,7 +23,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
const previousFocusRef = useRef<HTMLElement | null>(null); const previousFocusRef = useRef<HTMLElement | null>(null);
useEffect(() => { useEffect(() => {
setMounted(true); setMounted(true); // eslint-disable-line react-hooks/set-state-in-effect
return () => setMounted(false); return () => setMounted(false);
}, []); }, []);
@@ -61,7 +61,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
if (photoParam !== null) { if (photoParam !== null) {
const index = parseInt(photoParam, 10); const index = parseInt(photoParam, 10);
if (!isNaN(index) && index >= 0 && index < images.length) { if (!isNaN(index) && index >= 0 && index < images.length) {
setCurrentIndex(index); setCurrentIndex(index); // eslint-disable-line react-hooks/set-state-in-effect
} }
} }
}, [searchParams, images.length]); }, [searchParams, images.length]);
@@ -125,17 +125,13 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
}; };
// Lock scroll // Lock scroll
const originalBodyStyle = window.getComputedStyle(document.body).overflow; const originalStyle = window.getComputedStyle(document.body).overflow;
const originalHtmlStyle = window.getComputedStyle(document.documentElement).overflow; document.body.style.overflow = 'hidden';
document.documentElement.style.setProperty('overflow', 'hidden', 'important');
document.body.style.setProperty('overflow', 'hidden', 'important');
window.addEventListener('keydown', handleKeyDown); window.addEventListener('keydown', handleKeyDown);
return () => { return () => {
document.documentElement.style.overflow = originalHtmlStyle; document.body.style.overflow = originalStyle;
document.body.style.overflow = originalBodyStyle;
window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keydown', handleKeyDown);
}; };
}, [isOpen, prevImage, nextImage, handleClose]); }, [isOpen, prevImage, nextImage, handleClose]);
@@ -143,7 +139,7 @@ export default function Lightbox({ isOpen, images, initialIndex, onClose }: Ligh
if (!mounted) return null; if (!mounted) return null;
return createPortal( return createPortal(
<LazyMotion strict features={() => import('@/lib/framer-features').then((res) => res.default)}> <LazyMotion strict features={() => import('@/lib/framer-features').then(res => res.default)}>
<AnimatePresence> <AnimatePresence>
{isOpen && ( {isOpen && (
<div <div

View File

@@ -17,7 +17,6 @@ export default function ObfuscatedEmail({ email, className = '', children }: Obf
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect
setMounted(true); setMounted(true);
}, []); }, []);

View File

@@ -16,7 +16,6 @@ export default function ObfuscatedPhone({ phone, className = '', children }: Obf
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect
setMounted(true); setMounted(true);
}, []); }, []);

View File

@@ -793,8 +793,8 @@ const jsxConverters: JSXConverters = {
</Section> </Section>
); );
}, },
imageGallery: () => <Gallery />, imageGallery: ({ node }: any) => <Gallery />,
'block-imageGallery': () => <Gallery />, 'block-imageGallery': ({ node }: any) => <Gallery />,
categoryGrid: ({ node }: any) => { categoryGrid: ({ node }: any) => {
const cats = node.fields.categories || []; const cats = node.fields.categories || [];
return ( return (

View File

@@ -4,7 +4,6 @@ import Image from 'next/image';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import RequestQuoteForm from '@/components/RequestQuoteForm'; import RequestQuoteForm from '@/components/RequestQuoteForm';
import DatasheetDownload from '@/components/DatasheetDownload'; import DatasheetDownload from '@/components/DatasheetDownload';
import ExcelDownload from '@/components/ExcelDownload';
import Scribble from '@/components/Scribble'; import Scribble from '@/components/Scribble';
import { cn } from '@/components/ui/utils'; import { cn } from '@/components/ui/utils';
@@ -12,7 +11,6 @@ interface ProductSidebarProps {
productName: string; productName: string;
productImage?: string; productImage?: string;
datasheetPath?: string | null; datasheetPath?: string | null;
excelPath?: string | null;
className?: string; className?: string;
} }
@@ -20,7 +18,6 @@ export default function ProductSidebar({
productName, productName,
productImage, productImage,
datasheetPath, datasheetPath,
excelPath,
className, className,
}: ProductSidebarProps) { }: ProductSidebarProps) {
const t = useTranslations('Products'); const t = useTranslations('Products');
@@ -73,9 +70,6 @@ export default function ProductSidebar({
{/* Datasheet Download */} {/* Datasheet Download */}
{datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />} {datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />}
{/* Excel Download right below datasheet */}
{excelPath && <ExcelDownload excelPath={excelPath} className="mt-0" />}
</aside> </aside>
); );
} }

View File

@@ -2,7 +2,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { formatTechnicalValue } from '@/lib/utils/technical';
interface KeyValueItem { interface KeyValueItem {
label: string; label: string;
@@ -46,40 +45,22 @@ export default function ProductTechnicalData({ data }: ProductTechnicalDataProps
<div className="w-2 h-8 bg-accent rounded-full" /> <div className="w-2 h-8 bg-accent rounded-full" />
General Data General Data
</h3> </h3>
<dl className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8"> <dl className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-6 md:gap-x-12 md:gap-y-8">
{technicalItems.map((item, idx) => { {technicalItems.map((item, idx) => (
const formatted = formatTechnicalValue(item.value); <div key={idx} className="flex flex-col group">
return ( <dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors">
<div key={idx} className="flex flex-col group"> {item.label}
<dt className="text-sm font-bold uppercase tracking-widest text-primary/40 mb-2 group-hover:text-accent transition-colors"> </dt>
{item.label} <dd className="text-lg font-semibold text-text-primary">
</dt> {item.value}{' '}
<dd className="text-lg font-semibold text-text-primary"> {item.unit && (
{formatted.isList ? ( <span className="text-sm font-normal text-text-secondary ml-1">
<div className="flex flex-wrap gap-2 mt-1"> {item.unit}
{formatted.parts.map((p, pIdx) => ( </span>
<span )}
key={pIdx} </dd>
className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm hover:border-accent/40 transition-colors" </div>
> ))}
{p}
</span>
))}
</div>
) : (
<>
{item.value}{' '}
{item.unit && (
<span className="text-sm font-normal text-text-secondary ml-1">
{item.unit}
</span>
)}
</>
)}
</dd>
</div>
);
})}
</dl> </dl>
</div> </div>
)} )}

View File

@@ -164,17 +164,7 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
} }
return ( return (
<form id="quote-request-form" onSubmit={handleSubmit} className="space-y-3 !mt-0"> <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
{/* Anti-spam Honeypot */}
<input
type="text"
name="company_website"
tabIndex={-1}
autoComplete="off"
style={{ display: 'none' }}
aria-hidden="true"
/>
<div className="space-y-2 !mt-0"> <div className="space-y-2 !mt-0">
<div className="space-y-1 !mt-0"> <div className="space-y-1 !mt-0">
<label htmlFor={emailId} className="sr-only"> <label htmlFor={emailId} className="sr-only">

View File

@@ -28,13 +28,13 @@ export default function TrackedLink({
}: TrackedLinkProps) { }: TrackedLinkProps) {
const { trackEvent } = useAnalytics(); const { trackEvent } = useAnalytics();
const handleClick = () => { const handleClick = (e: React.MouseEvent) => {
try { try {
trackEvent(eventName, { trackEvent(eventName, {
href, href,
...eventProperties, ...eventProperties,
}); });
} catch { } catch (_e) {
// Analytics tracking should not block navigation, so we catch and ignore errors. // Analytics tracking should not block navigation, so we catch and ignore errors.
} }
if (onClick) onClick(); if (onClick) onClick();

View File

@@ -1,5 +1,5 @@
import React from 'react';
import Scribble from '@/components/Scribble'; import Scribble from '@/components/Scribble';
import { formatTechnicalValue } from '@/lib/utils/technical';
interface TechnicalGridItem { interface TechnicalGridItem {
label: string; label: string;
@@ -18,44 +18,25 @@ export default function TechnicalGrid({ title, items }: TechnicalGridProps) {
<h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative"> <h3 className="text-2xl font-bold text-text-primary mb-8 flex items-center gap-4 relative">
<span className="relative inline-block"> <span className="relative inline-block">
{title} {title}
<Scribble <Scribble
variant="underline" variant="underline"
className="absolute -bottom-2 left-0 w-full h-3 text-accent/40" className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
/> />
</span> </span>
</h3> </h3>
)} )}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{items.map((item, index) => { {items.map((item, index) => (
const formatted = formatTechnicalValue(item.value); <div key={index} className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden">
return ( <div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
<div <span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70">
key={index} {item.label}
className="bg-white p-8 rounded-2xl border border-neutral-200 shadow-sm hover:shadow-md transition-all duration-300 group relative overflow-hidden" </span>
> <span className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
<div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" /> {item.value}
<span className="block text-xs font-bold text-primary uppercase tracking-[0.2em] mb-3 opacity-70"> </span>
{item.label} </div>
</span> ))}
<div className="text-lg text-text-secondary leading-relaxed group-hover:text-text-primary transition-colors">
{formatted.isList ? (
<div className="flex flex-wrap gap-2 mt-2">
{formatted.parts.map((p, pIdx) => (
<span
key={pIdx}
className="inline-block px-3 py-1 bg-neutral-light border border-neutral-dark/10 rounded-lg text-xs font-bold text-primary shadow-sm group-hover:border-accent/40 transition-colors"
>
{p}
</span>
))}
</div>
) : (
item.value
)}
</div>
</div>
);
})}
</div> </div>
</div> </div>
); );

View File

@@ -1,145 +0,0 @@
import {
Body,
Container,
Head,
Heading,
Hr,
Html,
Preview,
Section,
Text,
Button,
} from '@react-email/components';
import * as React from 'react';
interface BrochureDeliveryEmailProps {
_email: string;
brochureUrl: string;
locale: 'en' | 'de';
}
export const BrochureDeliveryEmail = ({
_email,
brochureUrl,
locale = 'en',
}: BrochureDeliveryEmailProps) => {
const t =
locale === 'de'
? {
subject: 'Ihr KLZ Kabelkatalog',
greeting: 'Vielen Dank für Ihr Interesse an KLZ Cables.',
body: 'Anbei erhalten Sie den Link zu unserem aktuellen Produktkatalog. Dieser enthält alle wichtigen technischen Spezifikationen und detaillierten Produktdaten.',
button: 'Katalog herunterladen',
footer: 'Diese E-Mail wurde von klz-cables.com gesendet.',
}
: {
subject: 'Your KLZ Cable Catalog',
greeting: 'Thank you for your interest in KLZ Cables.',
body: 'Below you will find the link to our current product catalog. It contains all key technical specifications and detailed product data.',
button: 'Download Catalog',
footer: 'This email was sent from klz-cables.com.',
};
return (
<Html>
<Head />
<Preview>{t.subject}</Preview>
<Body style={main}>
<Container style={container}>
<Section style={headerSection}>
<Heading style={h1}>{t.subject}</Heading>
</Section>
<Section style={section}>
<Text style={text}>
<strong>{t.greeting}</strong>
</Text>
<Text style={text}>{t.body}</Text>
<Section style={buttonContainer}>
<Button style={button} href={brochureUrl}>
{t.button}
</Button>
</Section>
<Hr style={hr} />
</Section>
<Text style={footer}>{t.footer}</Text>
</Container>
</Body>
</Html>
);
};
export default BrochureDeliveryEmail;
const main = {
backgroundColor: '#f6f9fc',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
};
const container = {
backgroundColor: '#ffffff',
margin: '0 auto',
padding: '0 0 48px',
marginBottom: '64px',
borderRadius: '8px',
overflow: 'hidden',
border: '1px solid #e6ebf1',
};
const headerSection = {
backgroundColor: '#000d26',
padding: '32px 48px',
borderBottom: '4px solid #4da612',
};
const h1 = {
color: '#ffffff',
fontSize: '24px',
fontWeight: 'bold',
margin: '0',
};
const section = {
padding: '32px 48px 0',
};
const text = {
color: '#333',
fontSize: '16px',
lineHeight: '24px',
textAlign: 'left' as const,
};
const buttonContainer = {
textAlign: 'center' as const,
marginTop: '32px',
marginBottom: '32px',
};
const button = {
backgroundColor: '#4da612',
borderRadius: '4px',
color: '#ffffff',
fontSize: '16px',
fontWeight: 'bold',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'inline-block',
padding: '16px 32px',
};
const hr = {
borderColor: '#e6ebf1',
margin: '20px 0',
};
const footer = {
color: '#8898aa',
fontSize: '12px',
lineHeight: '16px',
textAlign: 'center' as const,
marginTop: '20px',
};

View File

@@ -1,221 +1,98 @@
'use client'; 'use client';
import Scribble from '@/components/Scribble';
import { Button, Container, Heading, Section } from '@/components/ui'; import { Button, Container, Heading, Section } from '@/components/ui';
import { useTranslations, useLocale } from 'next-intl'; import { useTranslations, useLocale } from 'next-intl';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import { useAnalytics } from '../analytics/useAnalytics'; import { useAnalytics } from '../analytics/useAnalytics';
import { AnalyticsEvents } from '../analytics/analytics-events'; import { AnalyticsEvents } from '../analytics/analytics-events';
import { useState, useEffect, useRef, useCallback } from 'react';
import { ChevronRight } from 'lucide-react';
import { AISearchResults } from '../search/AISearchResults';
const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false }); const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
const AIOrb = dynamic(() => import('../search/AIOrb'), { ssr: false });
export default function Hero({ data }: { data?: any }) { export default function Hero({ data }: { data?: any }) {
const t = useTranslations('Home.hero'); const t = useTranslations('Home.hero');
const locale = useLocale(); const locale = useLocale();
const { trackEvent } = useAnalytics(); const { trackEvent } = useAnalytics();
const [searchQuery, setSearchQuery] = useState('');
const [isSearchOpen, setIsSearchOpen] = useState(false);
const [heroPlaceholder, setHeroPlaceholder] = useState(
'Projekt beschreiben oder Kabel suchen...',
);
const typingRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const HERO_PLACEHOLDERS = [
'Querschnittsberechnung für 110kV Trasse', // Hochspannung
'Wie schwer ist NAYY 4x150?',
'Ich plane einen Solarpark, was brauche ich?', // Projekt Solar
'Unterschied zwischen N2XSY und NAY2XSY?', // Fach
'Mittelspannungskabel für Windkraftanlage', // Windpark
'Welches Aluminiumkabel für 20kV?', // Mittelspannung
];
// Typing animation for the hero search placeholder
useEffect(() => {
if (searchQuery) {
setHeroPlaceholder('Projekt beschreiben oder Kabel suchen...');
return;
}
let textIdx = 0;
let charIdx = 0;
let deleting = false;
const tick = () => {
const fullText = HERO_PLACEHOLDERS[textIdx];
if (deleting) {
charIdx--;
setHeroPlaceholder(fullText.substring(0, charIdx));
} else {
charIdx++;
setHeroPlaceholder(fullText.substring(0, charIdx));
}
let delay = deleting ? 30 : 70;
if (!deleting && charIdx === fullText.length) {
delay = 2500;
deleting = true;
} else if (deleting && charIdx === 0) {
deleting = false;
textIdx = (textIdx + 1) % HERO_PLACEHOLDERS.length;
delay = 400;
}
typingRef.current = setTimeout(tick, delay);
};
typingRef.current = setTimeout(tick, 1500);
return () => {
if (typingRef.current) clearTimeout(typingRef.current);
};
}, [searchQuery]);
const handleSearchSubmit = (e: React.FormEvent) => {
e.preventDefault();
if (searchQuery.trim()) {
setIsSearchOpen(true);
}
};
return ( return (
<> <Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0">
<Section className="relative min-h-[85vh] md:h-[90vh] flex flex-col items-center justify-center overflow-hidden bg-primary py-12 md:py-0 lg:py-0"> <Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none">
<Container className="relative z-10 text-center md:text-left text-white w-full order-2 md:order-none"> <div className="max-w-5xl mx-auto md:mx-0">
<div className="max-w-5xl mx-auto md:mx-0"> <div>
<div> <Heading
<Heading level={1}
level={1} className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-3xl sm:text-4xl md:text-5xl font-extrabold"
className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
>
{data?.title ? (
<span
dangerouslySetInnerHTML={{
__html: data.title
.replace(
/<green>/g,
'<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">',
)
.replace(
/<\/green>/g,
'</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
),
}}
/>
) : (
t.rich('title', {
green: (chunks) => (
<span className="relative inline-block">
<span className="relative z-10 text-accent italic inline-block">
{chunks}
</span>
<div
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
style={{ animationDelay: '500ms' }}
>
<Scribble variant="circle" />
</div>
</span>
),
})
)}
</Heading>
</div>
<div>
<p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
{data?.subtitle || t('subtitle')}
</p>
</div>
<form
onSubmit={handleSearchSubmit}
className="w-full max-w-2xl bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-2 flex items-center mt-8 mb-10 transition-all focus-within:bg-white/15 focus-within:border-accent shadow-lg relative"
> >
<div className="absolute left-1 w-20 h-20 flex items-center justify-center z-10 overflow-visible"> {data?.title ? (
<AIOrb isThinking={false} /> <span
</div> dangerouslySetInnerHTML={{
<input __html: data.title
type="text" .replace(/<green>/g, '<span class="text-accent italic">')
value={searchQuery} .replace(/<\/green>/g, '</span>'),
onChange={(e) => setSearchQuery(e.target.value)} }}
placeholder={heroPlaceholder} />
className="flex-1 bg-transparent border-none text-white pl-20 pr-2 py-4 placeholder:text-white/50 focus:outline-none text-lg lg:text-xl" ) : (
autoFocus t.rich('title', {
/> green: (chunks) => <span className="text-accent italic">{chunks}</span>,
})
)}
</Heading>
</div>
<div>
<p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
{data?.subtitle || t('subtitle')}
</p>
</div>
<div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6">
<div>
<Button <Button
type="submit" href="/contact"
variant="accent" variant="accent"
size="lg" size="lg"
className="rounded-xl px-6 py-4 shrink-0 flex items-center shadow-md font-bold cursor-pointer hover:bg-accent hover:brightness-110" className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-transform"
onClick={() =>
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
label: data?.ctaLabel || t('cta'),
location: 'home_hero_primary',
})
}
> >
Fragen {data?.ctaLabel || t('cta')}
<ChevronRight className="w-5 h-5 ml-2 -mr-1" /> <span className="transition-transform group-hover/btn:translate-x-1 ml-2">
&rarr;
</span>
</Button>
</div>
<div>
<Button
href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
variant="white"
size="lg"
className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none hover:scale-105 transition-transform"
onClick={() =>
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
label: data?.secondaryCtaLabel || t('exploreProducts'),
location: 'home_hero_secondary',
})
}
>
{data?.secondaryCtaLabel || t('exploreProducts')}
</Button> </Button>
</form>
<div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6">
<div>
<Button
href="/contact"
variant="white"
size="lg"
className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-all outline-none"
onClick={() =>
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
label: data?.ctaLabel || t('cta'),
location: 'home_hero_primary',
})
}
>
{data?.ctaLabel || t('cta')}
<span className="transition-transform group-hover/btn:translate-x-1 ml-2">
&rarr;
</span>
</Button>
</div>
<div>
<Button
href={`/${locale}/${locale === 'de' ? 'produkte' : 'products'}`}
variant="outline"
size="lg"
className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg text-white border-white/30 hover:bg-white/10 hover:border-white transition-all"
onClick={() =>
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
label: data?.secondaryCtaLabel || t('exploreProducts'),
location: 'home_hero_secondary',
})
}
>
{data?.secondaryCtaLabel || t('exploreProducts')}
</Button>
</div>
</div> </div>
</div> </div>
</Container>
<div className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
<HeroIllustration />
</div> </div>
</Container>
<div <div className="relative md:absolute inset-0 z-0 w-full h-[40vh] md:h-full order-1 md:order-none mb-[-80px] md:mb-0 mt-[80px] md:mt-0 overflow-visible pointer-events-none animate-in fade-in zoom-in-95 duration-1000 ease-out fill-mode-both">
className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both" <HeroIllustration />
style={{ animationDelay: '2000ms' }} </div>
>
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1"> <div
<div className="w-1 h-2 bg-white rounded-full animate-bounce" /> className="absolute bottom-6 md:bottom-10 left-1/2 -translate-x-1/2 hidden sm:block animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out fill-mode-both"
</div> style={{ animationDelay: '2000ms' }}
>
<div className="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center p-1">
<div className="w-1 h-2 bg-white rounded-full animate-bounce" />
</div> </div>
</Section> </div>
<AISearchResults </Section>
isOpen={isSearchOpen}
onClose={() => setIsSearchOpen(false)}
initialQuery={searchQuery}
triggerSearch={true}
/>
</>
); );
} }

View File

@@ -74,14 +74,11 @@ export default async function RecentPosts({ locale, data }: RecentPostsProps) {
suppressHydrationWarning suppressHydrationWarning
className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md" className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
> >
{new Date(post.frontmatter.date).toLocaleDateString( {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
['en', 'de'].includes(locale) ? locale : 'de', year: 'numeric',
{ month: 'short',
year: 'numeric', day: 'numeric',
month: 'short', })}
day: 'numeric',
},
)}
</time> </time>
{(new Date(post.frontmatter.date) > new Date() || {(new Date(post.frontmatter.date) > new Date() ||
post.frontmatter.public === false) && ( post.frontmatter.public === false) && (

View File

@@ -1,371 +0,0 @@
'use client';
import React, { useRef, useEffect, useCallback } from 'react';
interface AIOrbProps {
isThinking: boolean;
hasError?: boolean;
}
function lerp(a: number, b: number, t: number) {
return a + (b - a) * t;
}
// Simple noise function for organic movement
function noise(x: number, y: number, t: number): number {
return (
Math.sin(x * 1.3 + t * 0.7) * Math.cos(y * 0.9 + t * 0.5) * 0.5 +
Math.sin(x * 2.7 + y * 1.1 + t * 1.3) * 0.25 +
Math.cos(x * 0.8 - y * 2.3 + t * 0.9) * 0.25
);
}
// ── Particle ───────────────────────────────────────────────────
interface Particle {
// Sphere position (target shape)
theta: number;
phi: number;
// Current position
x: number;
y: number;
z: number;
// Velocity
vx: number;
vy: number;
vz: number;
// Properties
size: number;
baseSize: number;
hue: number; // 0=blue, 1=green
brightness: number;
phase: number;
orbitSpeed: number;
noiseScale: number;
}
function createParticles(count: number): Particle[] {
const particles: Particle[] = [];
for (let i = 0; i < count; i++) {
// Fibonacci sphere distribution for even spacing
const golden = Math.PI * (3 - Math.sqrt(5));
const y = 1 - (i / (count - 1)) * 2;
const radiusAtY = Math.sqrt(1 - y * y);
const theta = golden * i;
const phi = Math.acos(y);
particles.push({
theta,
phi,
x: Math.cos(theta) * radiusAtY,
y,
z: Math.sin(theta) * radiusAtY,
vx: 0,
vy: 0,
vz: 0,
size: 0.4 + Math.random() * 0.8,
baseSize: 0.4 + Math.random() * 0.8,
hue: Math.random() > 0.45 ? 0 : 1,
brightness: 0.5 + Math.random() * 0.5,
phase: Math.random() * Math.PI * 2,
orbitSpeed: (0.1 + Math.random() * 0.4) * (Math.random() > 0.5 ? 1 : -1),
noiseScale: 0.5 + Math.random() * 1.5,
});
}
return particles;
}
export default function AIOrb({ isThinking = false, hasError = false }: AIOrbProps) {
const canvasRef = useRef<HTMLCanvasElement>(null);
const wrapRef = useRef<HTMLDivElement>(null);
const animRef = useRef<number>(0);
const particlesRef = useRef<Particle[]>([]);
const mouse = useRef({ x: 0.5, y: 0.5, hover: false });
const state = useRef({
pulse: 0,
hover: 0,
error: 0,
mouseX: 0.5,
mouseY: 0.5,
rotY: 0,
rotX: 0,
breathe: 0,
scatter: 0,
shake: 0,
});
const onMove = useCallback((e: React.PointerEvent) => {
const r = wrapRef.current?.getBoundingClientRect();
if (!r) return;
mouse.current.x = (e.clientX - r.left) / r.width;
mouse.current.y = (e.clientY - r.top) / r.height;
}, []);
const onEnter = useCallback(() => {
mouse.current.hover = true;
}, []);
const onLeave = useCallback(() => {
mouse.current.hover = false;
mouse.current.x = 0.5;
mouse.current.y = 0.5;
}, []);
const draw = useCallback(
function drawStep() {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const dpr = window.devicePixelRatio || 1;
const rect = canvas.getBoundingClientRect();
const w = rect.width * dpr;
const h = rect.height * dpr;
if (canvas.width !== w || canvas.height !== h) {
canvas.width = w;
canvas.height = h;
}
const cx = w / 2;
const cy = h / 2;
const minDim = Math.min(w, h);
// Reduced further to give maximum breathing room for glow + movement
const sphereR = minDim * 0.16;
const time = performance.now() / 1000;
const s = state.current;
const m = mouse.current;
// ── Interpolate state ──
s.pulse = lerp(s.pulse, isThinking ? 1 : 0, 0.03);
s.hover = lerp(s.hover, m.hover ? 1 : 0, 0.12);
s.error = lerp(s.error, hasError ? 1 : 0, 0.05);
s.mouseX = lerp(s.mouseX, m.x, 0.12);
s.mouseY = lerp(s.mouseY, m.y, 0.12);
s.scatter = lerp(s.scatter, m.hover ? 0.8 : hasError ? 0.5 : 0, 0.06);
s.shake += 0.15 * s.error;
// Global rotation — ALWAYS rotating + ALWAYS facing cursor
s.rotY += lerp(0.008, 0.04, Math.max(s.pulse, s.hover));
const mouseRotY = (s.mouseX - 0.5) * 1.2; // always face cursor
const mouseRotX = (s.mouseY - 0.5) * 0.8;
s.breathe += lerp(1.2, 3.0, s.pulse) / 60;
const breathe = Math.sin(s.breathe) * 0.5 + 0.5;
// ── Clear ──
ctx.clearRect(0, 0, w, h);
// ── Subtle core glow ──
const shakeX = Math.sin(s.shake * 17) * s.error * minDim * 0.02;
const glowCX = cx + shakeX;
const glowCY = cy;
// Clamp glow radius so it never exceeds ~48% of canvas (leaves padding for movement)
const glowR = Math.min(
sphereR * lerp(2.2, 4.0, Math.max(s.pulse, s.hover * 0.8)),
minDim * 0.48,
);
const glowA = lerp(0.1, 0.4, Math.max(s.pulse, s.hover * 0.7, s.error * 0.8));
const glow = ctx.createRadialGradient(glowCX, glowCY, 0, glowCX, glowCY, glowR);
// Glow color: blue normally, red on error
const glowR1 = Math.round(lerp(20, 255, s.error));
const glowG1 = Math.round(lerp(60, 40, s.error));
const glowB1 = Math.round(lerp(255, 40, s.error));
glow.addColorStop(0, `rgba(${glowR1}, ${glowG1}, ${glowB1}, ${glowA * 2})`);
glow.addColorStop(
0.25,
`rgba(${Math.round(lerp(80, 200, s.error))}, ${Math.round(lerp(140, 50, s.error))}, ${Math.round(lerp(255, 50, s.error))}, ${glowA * 1.2})`,
);
glow.addColorStop(0.6, `rgba(${glowR1}, ${glowG1}, ${glowB1}, ${glowA * 0.4})`);
glow.addColorStop(1, `rgba(${glowR1}, ${glowG1}, ${glowB1}, 0)`);
ctx.fillStyle = glow;
ctx.beginPath();
ctx.arc(glowCX, glowCY, glowR, 0, Math.PI * 2);
ctx.fill();
// ── Create particles if empty ──
if (particlesRef.current.length === 0) {
particlesRef.current = createParticles(350);
}
// ── Update & draw particles ──
const cosRY = Math.cos(s.rotY + mouseRotY);
const sinRY = Math.sin(s.rotY + mouseRotY);
const cosRX = Math.cos(mouseRotX);
const sinRX = Math.sin(mouseRotX);
// Sort by z for correct layering
type ParticleWithScreen = { p: Particle; sx: number; sy: number; sz: number; depth: number };
const projected: ParticleWithScreen[] = [];
for (const p of particlesRef.current) {
// Target position: sphere surface + noise displacement
const n = noise(p.theta * p.noiseScale, p.phi * p.noiseScale, time * 0.5 + p.phase);
const displacement = 1 + n * lerp(0.12, 0.3, s.pulse);
// Orbit: rotate theta — always moving, faster idle
const activeTheta = p.theta + time * p.orbitSpeed * lerp(0.35, 0.8, s.pulse);
// Sphere coordinates to cartesian
const sinPhi = Math.sin(p.phi);
const tgtX = Math.cos(activeTheta) * sinPhi * displacement;
// Excitement from hover + pulse + error
const targetExcite = Math.max(s.hover * 0.9, s.pulse, s.error * 0.8);
const tgtY = Math.cos(p.phi) * displacement;
const tgtZ = Math.sin(activeTheta) * sinPhi * displacement;
// Scatter on hover: push particles outward
const scatterMul = 1 + s.scatter * (0.5 + n * 0.5);
// Spring physics toward target
const tx = tgtX * scatterMul;
const ty = tgtY * scatterMul;
const tz = tgtZ * scatterMul;
p.vx += (tx - p.x) * 0.08;
p.vy += (ty - p.y) * 0.08;
p.vz += (tz - p.z) * 0.08;
p.vx *= 0.88;
p.vy *= 0.88;
p.vz *= 0.88;
p.x += p.vx;
p.y += p.vy;
p.z += p.vz;
// 3D rotation (Y then X)
const rx = p.x * cosRY - p.z * sinRY;
const rz = p.x * sinRY + p.z * cosRY;
const ry = p.y * cosRX - rz * sinRX;
const finalZ = p.y * sinRX + rz * cosRX;
// Project to screen
const perspective = 3;
const scale = perspective / (perspective + finalZ);
const sx = cx + rx * sphereR * scale;
const sy = cy + ry * sphereR * scale;
projected.push({ p, sx, sy, sz: finalZ, depth: scale });
}
// Sort back-to-front
projected.sort((a, b) => a.sz - b.sz);
for (const { p, sx, sy, sz, depth } of projected) {
// Depth-based alpha and size
const depthAlpha = 0.25 + (sz + 1) * 0.375; // 0.25 (back) → 1.0 (front)
const twinkle = 0.75 + 0.25 * Math.sin(time * 3.5 + p.phase);
const alpha =
depthAlpha * twinkle * p.brightness * lerp(0.8, 1.3, Math.max(s.pulse, s.hover * 0.8));
const drawSize =
p.baseSize * depth * dpr * lerp(1.0, 2.0, Math.max(s.pulse, s.hover * 0.7));
// Color — shift to red on error
let r: number, g: number, b: number;
if (s.error > 0.1) {
// Error: red family
if (p.hue === 0) {
r = Math.round(lerp(40 + sz * 30, 255, s.error));
g = Math.round(lerp(80 + sz * 40, 40 + sz * 20, s.error));
b = Math.round(lerp(255, 40, s.error));
} else {
r = Math.round(lerp(100 + sz * 30, 230, s.error));
g = Math.round(lerp(220 + sz * 17, 60, s.error));
b = Math.round(lerp(20, 20, s.error));
}
} else if (p.hue === 0) {
r = 60 + Math.round(sz * 40);
g = 100 + Math.round(sz * 50);
b = 255;
} else {
r = 120 + Math.round(sz * 30);
g = 237 + Math.round(sz * 10);
b = 30;
}
// Thinking: shift toward brighter, more saturated
if (s.pulse > 0.1) {
r = Math.round(lerp(r, p.hue === 0 ? 100 : 130, s.pulse * 0.3));
g = Math.round(lerp(g, p.hue === 0 ? 140 : 237, s.pulse * 0.3));
b = Math.round(lerp(b, p.hue === 0 ? 255 : 32, s.pulse * 0.3));
}
// Micro glow — always visible, stronger on front
if (depthAlpha > 0.25) {
const gSize = drawSize * lerp(4, 7, s.hover);
const pg = ctx.createRadialGradient(sx, sy, 0, sx, sy, gSize);
pg.addColorStop(0, `rgba(${r},${g},${b},${alpha * 0.5})`);
pg.addColorStop(1, `rgba(${r},${g},${b},0)`);
ctx.fillStyle = pg;
ctx.beginPath();
ctx.arc(sx, sy, gSize, 0, Math.PI * 2);
ctx.fill();
}
// Core dot — bright
ctx.fillStyle = `rgba(${Math.min(r + 40, 255)},${Math.min(g + 30, 255)},${b},${Math.min(alpha * 1.6, 1)})`;
ctx.beginPath();
ctx.arc(sx, sy, Math.max(drawSize * 0.5, 0.3 * dpr), 0, Math.PI * 2);
ctx.fill();
}
// ── Loading rings (thinking) ──
if (s.pulse > 0.02) {
ctx.save();
ctx.translate(cx, cy);
// Spinning arc
const spinAngle = time * 2;
const arcLen = Math.PI * lerp(0.3, 1.0, (Math.sin(time * 1.5) + 1) / 2);
ctx.rotate(spinAngle);
ctx.strokeStyle = `rgba(130, 237, 32, ${s.pulse * 0.4})`;
ctx.lineWidth = 1.2 * dpr;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.arc(0, 0, sphereR * 1.25, 0, arcLen);
ctx.stroke();
// Counter-spinning arc
ctx.rotate(-spinAngle * 2);
ctx.strokeStyle = `rgba(1, 29, 255, ${s.pulse * 0.3})`;
ctx.lineWidth = 0.8 * dpr;
ctx.beginPath();
ctx.arc(0, 0, sphereR * 1.35, 0, arcLen * 0.6);
ctx.stroke();
ctx.restore();
// Expanding pulse
const pulsePhase = (time * 0.8) % 1;
const pulseR = sphereR * (1 + pulsePhase * 1.5);
const pulseA = s.pulse * (1 - pulsePhase) * 0.15;
ctx.strokeStyle = `rgba(130, 237, 32, ${pulseA})`;
ctx.lineWidth = 1 * dpr;
ctx.beginPath();
ctx.arc(cx, cy, pulseR, 0, Math.PI * 2);
ctx.stroke();
}
animRef.current = requestAnimationFrame(drawStep);
},
[isThinking, hasError],
);
useEffect(() => {
animRef.current = requestAnimationFrame(draw);
return () => cancelAnimationFrame(animRef.current);
}, [draw]);
return (
<div
ref={wrapRef}
className="w-full h-full relative overflow-visible"
onPointerMove={onMove}
onPointerEnter={onEnter}
onPointerLeave={onLeave}
style={{ cursor: 'pointer' }}
>
<canvas ref={canvasRef} className="w-full h-full block" style={{ imageRendering: 'auto' }} />
</div>
);
}

View File

@@ -1,646 +0,0 @@
'use client';
import { useState, useRef, useEffect, KeyboardEvent } from 'react';
import { ArrowUp, X, Sparkles, ChevronRight, RotateCcw, Copy, Check } from 'lucide-react';
import Link from 'next/link';
import { useAnalytics } from '../analytics/useAnalytics';
import { AnalyticsEvents } from '../analytics/analytics-events';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import dynamic from 'next/dynamic';
const AIOrb = dynamic(() => import('./AIOrb'), { ssr: false });
const LOADING_TEXTS = [
'Durchsuche das Kabelhandbuch... 📖',
'Frage den Senior-Ingenieur... 👴🔧',
'Frage ChatGPTs Cousin 2. Grades... 🤖',
];
interface ProductMatch {
id: string;
title: string;
sku: string;
slug: string;
}
interface Message {
role: 'user' | 'assistant';
content: string;
products?: ProductMatch[];
timestamp: number;
}
interface ComponentProps {
isOpen: boolean;
onClose: () => void;
initialQuery?: string;
triggerSearch?: boolean;
}
export function AISearchResults({
isOpen,
onClose,
initialQuery = '',
triggerSearch = false,
}: ComponentProps) {
const { trackEvent } = useAnalytics();
const [query, setQuery] = useState('');
const [messages, setMessages] = useState<Message[]>([]);
const [honeypot, setHoneypot] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
const [copiedAll, setCopiedAll] = useState(false);
const [loadingText, setLoadingText] = useState(LOADING_TEXTS[0]);
const inputRef = useRef<HTMLInputElement>(null);
const modalRef = useRef<HTMLDivElement>(null);
const messagesEndRef = useRef<HTMLDivElement>(null);
const loadingIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
const hasTriggeredRef = useRef(false);
// Dedicated focus effect — polls until the input actually has focus
useEffect(() => {
if (!isOpen) return;
let attempts = 0;
const focusTimer = setInterval(() => {
const el = inputRef.current;
if (el && document.activeElement !== el) {
el.focus({ preventScroll: true });
}
attempts++;
if (attempts >= 15 || document.activeElement === el) {
clearInterval(focusTimer);
}
}, 100);
return () => clearInterval(focusTimer);
}, [isOpen]);
useEffect(() => {
if (isOpen) {
document.body.style.overflow = 'hidden';
// Trigger initial search only once
if (triggerSearch && initialQuery && !hasTriggeredRef.current) {
hasTriggeredRef.current = true;
handleSearch(initialQuery);
}
} else {
document.body.style.overflow = 'unset';
setQuery('');
setMessages([]);
setError(null);
setIsLoading(false);
hasTriggeredRef.current = false;
}
return () => {
document.body.style.overflow = 'unset';
};
}, [isOpen, triggerSearch]);
useEffect(() => {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, isLoading]);
// Global ESC handler
useEffect(() => {
if (!isOpen) return;
const handleEsc = (e: globalThis.KeyboardEvent) => {
if (e.key === 'Escape') {
const activeElement = document.activeElement;
const isInputFocused = activeElement === inputRef.current;
if (query.trim()) {
// If there's text, clear it but keep chat open
setQuery('');
inputRef.current?.focus();
} else if (!isInputFocused) {
// If no text and input is not focused, focus it
inputRef.current?.focus();
} else {
// If no text and input IS focused, close the chat
onClose();
}
}
};
document.addEventListener('keydown', handleEsc);
return () => document.removeEventListener('keydown', handleEsc);
}, [isOpen, onClose, query]);
const handleSearch = async (searchQuery: string = query) => {
if (!searchQuery.trim() || isLoading) return;
const newUserMessage: Message = { role: 'user', content: searchQuery, timestamp: Date.now() };
const newMessagesContext = [...messages, newUserMessage];
setMessages(newMessagesContext);
setQuery(''); // Always clear input after send
setError(null);
// Give the user message animation 400ms to arrive before showing "thinking"
setTimeout(() => {
setIsLoading(true);
// Start rotating loading texts
let textIdx = Math.floor(Math.random() * LOADING_TEXTS.length);
setLoadingText(LOADING_TEXTS[textIdx]);
loadingIntervalRef.current = setInterval(() => {
textIdx = (textIdx + 1) % LOADING_TEXTS.length;
setLoadingText(LOADING_TEXTS[textIdx]);
}, 2500);
}, 400);
trackEvent(AnalyticsEvents.FORM_SUBMIT, {
type: 'ai_chat',
query: searchQuery,
});
try {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 60000);
const res = await fetch('/api/ai-search', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
signal: controller.signal,
body: JSON.stringify({
messages: newMessagesContext,
_honeypot: honeypot,
}),
});
clearTimeout(timeout);
const data = await res.json().catch(() => null);
if (!res.ok || !data) {
throw new Error(data?.error || `Server antwortete mit Status ${res.status}`);
}
setMessages((prev) => [
...prev,
{
role: 'assistant',
content: data.answerText,
products: data.products,
timestamp: Date.now(),
},
]);
setTimeout(() => inputRef.current?.focus(), 100);
} catch (err: any) {
console.error(err);
const msg =
err.name === 'AbortError'
? 'Anfrage hat zu lange gedauert. Bitte versuche es erneut.'
: err.message || 'Ein Fehler ist aufgetreten.';
// Show error as a system message in the chat instead of a separate error banner
setMessages((prev) => [
...prev,
{
role: 'assistant',
content: `⚠️ ${msg}`,
timestamp: Date.now(),
},
]);
trackEvent(AnalyticsEvents.ERROR, {
location: 'ai_chat',
message: err.message,
query: searchQuery,
});
} finally {
setIsLoading(false);
if (loadingIntervalRef.current) {
clearInterval(loadingIntervalRef.current);
loadingIntervalRef.current = null;
}
// Always re-focus the input
setTimeout(() => inputRef.current?.focus(), 50);
}
};
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
e.preventDefault();
handleSearch();
}
if (e.key === 'ArrowUp' && !query) {
// Find the last user message and put it into the input
const lastUserNav = [...messages].reverse().find((m) => m.role === 'user');
if (lastUserNav) {
e.preventDefault();
setQuery(lastUserNav.content);
}
}
};
const handleCopy = (content: string, index?: number) => {
navigator.clipboard.writeText(content);
if (index !== undefined) {
setCopiedIndex(index);
setTimeout(() => setCopiedIndex(null), 2000);
} else {
setCopiedAll(true);
setTimeout(() => setCopiedAll(false), 2000);
}
};
const handleCopyChat = () => {
const fullChat = messages
.map((m) => `${m.role === 'user' ? 'Du' : 'Ohm'}:\n${m.content}`)
.join('\n\n');
handleCopy(fullChat);
};
if (!isOpen) return null;
const handleBackdropClick = (e: React.MouseEvent) => {
if (e.target === e.currentTarget) {
onClose();
}
};
return (
<div
className="fixed inset-0 z-[100] flex items-start justify-center pt-6 md:pt-12 px-4"
onClick={handleBackdropClick}
role="dialog"
aria-modal="true"
style={{ animation: 'chatBackdropIn 0.4s ease-out forwards' }}
>
{/* Animated backdrop */}
<div
className="absolute inset-0 bg-[#000a18]/90 backdrop-blur-2xl"
style={{ animation: 'chatFadeIn 0.3s ease-out' }}
/>
<div
ref={modalRef}
className="relative w-full max-w-3xl flex flex-col"
style={{
height: 'min(90vh, 900px)',
animation: 'chatSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
}}
>
{/* ── Glassmorphism container ── */}
<div className="flex flex-col h-full rounded-3xl overflow-hidden border border-white/[0.08] bg-gradient-to-b from-white/[0.06] to-white/[0.02] shadow-[0_32px_64px_-12px_rgba(0,0,0,0.6)]">
{/* ── Header ── */}
<div className="flex items-center justify-between px-5 py-4 border-b border-white/[0.06]">
<div className="flex items-center gap-3">
<div className="w-8 h-8 overflow-hidden rounded-full">
<AIOrb isThinking={isLoading} hasError={!!error} />
</div>
<div>
<h2 className="text-white font-bold text-sm tracking-wide">Ohm</h2>
<p className="text-[10px] text-white/30 font-medium tracking-wider uppercase">
{isLoading ? 'Denkt nach...' : error ? 'Fehler aufgetreten' : 'Online'}
</p>
</div>
</div>
<div className="flex items-center gap-2">
{messages.length > 0 && (
<button
onClick={handleCopyChat}
className="flex items-center gap-1.5 text-[10px] font-bold text-white/40 hover:text-white/80 transition-all duration-200 hover:bg-white/5 rounded-full px-3 py-1.5 cursor-pointer uppercase tracking-wider"
title="gesamten Chat kopieren"
>
{copiedAll ? (
<Check className="w-3.5 h-3.5 text-accent" />
) : (
<Copy className="w-3.5 h-3.5" />
)}
<span>{copiedAll ? 'Kopiert' : 'Chat kopieren'}</span>
</button>
)}
<button
onClick={onClose}
className="text-white/30 hover:text-white/80 transition-all duration-200 hover:bg-white/5 rounded-xl p-2 cursor-pointer"
aria-label="Close"
>
<X className="w-5 h-5" />
</button>
</div>
</div>
{/* ── Chat Area ── */}
<div className="flex-1 overflow-y-auto px-5 py-6 space-y-5 scroll-smooth chat-scrollbar">
{/* Empty state */}
{messages.length === 0 && !isLoading && !error && (
<div
className="flex flex-col items-center justify-center h-full text-center space-y-5"
style={{ animation: 'chatFadeIn 0.6s ease-out 0.3s both' }}
>
<div className="w-24 h-24 mb-2">
<AIOrb isThinking={false} hasError={false} />
</div>
<div>
<p className="text-xl md:text-2xl font-bold text-white/80">
Wie kann ich helfen?
</p>
<p className="text-sm text-white/30 mt-2 max-w-md">
Beschreibe dein Projekt, frag nach bestimmten Kabeln, oder nenne mir deine
Anforderungen.
</p>
</div>
{/* Quick prompts */}
<div className="flex flex-wrap justify-center gap-2 mt-4">
{['Windpark 33kV Verkabelung', 'NYCWY 4x185', 'Erdkabel für Solarpark'].map(
(prompt) => (
<button
key={prompt}
onClick={() => handleSearch(prompt)}
className="text-xs text-white/40 hover:text-white/80 border border-white/10 hover:border-white/20 hover:bg-white/5 rounded-full px-4 py-2 transition-all duration-200 cursor-pointer"
>
{prompt}
</button>
),
)}
</div>
</div>
)}
{/* Messages */}
{messages.map((msg, index) => (
<div
key={index}
className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
style={{
animation: `chatMessageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) ${index * 0.05}s both`,
}}
>
<div
className={`relative group max-w-[85%] rounded-2xl px-5 py-4 ${
msg.role === 'user'
? 'bg-accent text-primary font-semibold rounded-br-lg'
: 'bg-white/[0.05] border border-white/[0.06] text-white/90 rounded-bl-lg'
}`}
>
{/* Copy Button */}
<button
onClick={() => handleCopy(msg.content, index)}
className={`absolute opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded-lg cursor-pointer ${
msg.role === 'user'
? 'top-2 right-2 bg-primary/10 hover:bg-primary/20 text-primary/60 hover:text-primary'
: 'top-2 right-2 bg-white/5 hover:bg-white/10 text-white/40 hover:text-white'
}`}
title="Nachricht kopieren"
>
{copiedIndex === index ? (
<Check className="w-3.5 h-3.5" />
) : (
<Copy className="w-3.5 h-3.5" />
)}
</button>
{msg.role === 'assistant' && (
<div className="flex items-center gap-2 mb-2">
<Sparkles className="w-3 h-3 text-accent/60" />
<span className="text-[10px] font-bold tracking-widest uppercase text-accent/50">
Ohm
</span>
</div>
)}
<div
className={`text-sm md:text-[15px] leading-relaxed ${
msg.role === 'assistant'
? 'prose prose-invert prose-sm prose-p:leading-relaxed prose-a:text-accent prose-strong:text-accent/90 prose-ul:list-disc prose-ol:list-decimal'
: ''
}`}
>
{msg.role === 'assistant' ? (
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
) : (
<p className="whitespace-pre-wrap">{msg.content}</p>
)}
</div>
{/* Timestamp */}
{!msg.products?.length && (
<p
className={`text-[9px] mt-2 font-medium tracking-wide ${msg.role === 'user' ? 'text-primary/40' : 'text-white/20'}`}
>
{new Date(msg.timestamp).toLocaleTimeString('de', {
hour: '2-digit',
minute: '2-digit',
})}
</p>
)}
{/* Product cards */}
{msg.role === 'assistant' && msg.products && msg.products.length > 0 && (
<div className="mt-4 space-y-2 border-t border-white/[0.06] pt-4">
<h4 className="text-[10px] font-bold tracking-widest uppercase text-white/30 mb-2">
Empfohlene Produkte
</h4>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{msg.products.map((product, idx) => (
<Link
key={idx}
href={`/produkte/${product.slug}`}
onClick={() => {
onClose();
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
target: product.slug,
location: 'ai_chat',
});
}}
className="group flex items-center justify-between bg-white/[0.04] hover:bg-white/[0.08] border border-white/[0.06] hover:border-accent/30 rounded-xl px-4 py-3 transition-all duration-300"
style={{ animation: `chatFadeIn 0.3s ease-out ${idx * 0.1}s both` }}
>
<div className="min-w-0">
<p className="text-[9px] font-bold text-white/25 tracking-wider">
{product.sku}
</p>
<h5 className="text-xs font-bold text-white/70 group-hover:text-accent truncate transition-colors">
{product.title}
</h5>
</div>
<ChevronRight className="w-3.5 h-3.5 text-white/20 group-hover:text-accent shrink-0 ml-3 group-hover:translate-x-0.5 transition-all" />
</Link>
))}
</div>
</div>
)}
</div>
</div>
))}
{/* Loading indicator */}
{isLoading && (
<div
className="flex justify-start"
style={{ animation: 'chatMessageIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards' }}
>
<div className="flex items-center gap-4 bg-white/[0.03] border border-white/[0.06] rounded-2xl rounded-bl-lg px-5 py-4">
<div className="w-10 h-10 shrink-0">
<AIOrb isThinking={true} hasError={false} />
</div>
<div>
<p
className="text-sm text-white/50 font-medium"
style={{ animation: 'chatTextSwap 0.4s ease-out' }}
key={loadingText}
>
{loadingText}
</p>
<div className="flex gap-1 mt-2">
{[0, 1, 2].map((i) => (
<div
key={i}
className="w-1.5 h-1.5 rounded-full bg-accent/40"
style={{
animation: 'chatDotBounce 1.2s ease-in-out infinite',
animationDelay: `${i * 0.15}s`,
}}
/>
))}
</div>
</div>
</div>
</div>
)}
{/* Error */}
{error && (
<div className="flex justify-start" style={{ animation: 'chatShake 0.5s ease-out' }}>
<div className="flex items-center gap-4 bg-red-500/[0.06] border border-red-500/20 rounded-2xl rounded-bl-lg px-5 py-4">
<div className="w-10 h-10 shrink-0">
<AIOrb isThinking={false} hasError={true} />
</div>
<div>
<h3 className="text-sm font-bold text-red-300">Da ist was schiefgelaufen 😬</h3>
<p className="text-xs text-red-300/60 mt-1">{error}</p>
<button
onClick={() => {
setError(null);
inputRef.current?.focus();
}}
className="flex items-center gap-1.5 text-[10px] font-bold text-red-300/50 hover:text-red-300 mt-2 transition-colors cursor-pointer"
>
<RotateCcw className="w-3 h-3" />
Nochmal versuchen
</button>
</div>
</div>
</div>
)}
<div ref={messagesEndRef} />
</div>
{/* ── Input Area ── */}
<div className="px-5 pb-5 pt-3 border-t border-white/[0.04]">
<div
className={`relative flex items-center rounded-2xl transition-all duration-300 ${
query.trim()
? 'bg-white/[0.08] border border-accent/30 shadow-[0_0_20px_-4px_rgba(130,237,32,0.1)]'
: 'bg-white/[0.04] border border-white/[0.06]'
}`}
>
<input
ref={inputRef}
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
onKeyDown={onKeyDown}
placeholder="Nachricht eingeben..."
className="flex-1 bg-transparent border-none text-white text-sm md:text-base px-5 py-4 focus:outline-none placeholder:text-white/20"
disabled={isLoading}
tabIndex={1}
autoFocus
/>
<input
type="text"
className="hidden"
value={honeypot}
onChange={(e) => setHoneypot(e.target.value)}
tabIndex={-1}
autoComplete="off"
aria-hidden="true"
/>
<button
onClick={() => handleSearch()}
disabled={!query.trim() || isLoading}
className={`mr-2 w-9 h-9 rounded-xl flex items-center justify-center shrink-0 transition-all duration-300 cursor-pointer ${
query.trim()
? 'bg-accent text-primary shadow-lg shadow-accent/20 hover:shadow-accent/40 hover:scale-105 active:scale-95'
: 'bg-white/5 text-white/20'
}`}
aria-label="Nachricht senden"
>
<ArrowUp className="w-4 h-4" strokeWidth={2.5} />
</button>
</div>
<div className="flex items-center justify-center gap-3 mt-2.5">
<span className="text-[9px] uppercase tracking-[0.15em] font-medium text-white/15">
Enter zum Senden · Esc zum Schließen
</span>
<span className="text-[9px] uppercase tracking-[0.15em] font-medium text-white/15">
·
</span>
<span className="text-[9px] uppercase tracking-[0.15em] font-medium text-accent/40 flex items-center gap-1">
🛡 DSGVO-konform · EU-Server
</span>
</div>
</div>
</div>
</div>
{/* ── Keyframe animations ── */}
<style>{`
@keyframes chatBackdropIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes chatFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes chatSlideUp {
from { opacity: 0; transform: translateY(40px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chatMessageIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes chatDotBounce {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
40% { transform: scale(1); opacity: 1; }
}
@keyframes chatTextSwap {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes chatShake {
0%, 100% { transform: translateX(0); }
15% { transform: translateX(-6px); }
30% { transform: translateX(5px); }
45% { transform: translateX(-4px); }
60% { transform: translateX(3px); }
75% { transform: translateX(-1px); }
}
/* Custom scrollbar */
.chat-scrollbar::-webkit-scrollbar {
width: 4px;
}
.chat-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.chat-scrollbar::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.08);
border-radius: 4px;
}
.chat-scrollbar::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.16);
}
.chat-scrollbar {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
`}</style>
</div>
);
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

View File

@@ -8,7 +8,7 @@ services:
- infra - infra
labels: labels:
- "caddy=http://${TRAEFIK_HOST:-klz.localhost}" - "caddy=http://${TRAEFIK_HOST:-klz.localhost}"
- "caddy.reverse_proxy=http://klz-app:3000" - "caddy.reverse_proxy=host.docker.internal:3100"
# Full Docker dev (use with `pnpm run dev:docker`) # Full Docker dev (use with `pnpm run dev:docker`)
klz-app: klz-app:
@@ -26,20 +26,13 @@ services:
- ${ENV_FILE:-.env} - ${ENV_FILE:-.env}
environment: environment:
NODE_ENV: development NODE_ENV: development
# Force Garbage Collection before Docker kills the container (OOM)
NODE_OPTIONS: "--max-old-space-size=6144"
NEXT_TELEMETRY_DISABLED: "1" NEXT_TELEMETRY_DISABLED: "1"
POSTGRES_URI: postgres://${PAYLOAD_DB_USER:-payload}:${PAYLOAD_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${PAYLOAD_DB_NAME:-payload} POSTGRES_URI: postgres://${PAYLOAD_DB_USER:-payload}:${PAYLOAD_DB_PASSWORD:-120in09oenaoinsd9iaidon}@klz-db:5432/${PAYLOAD_DB_NAME:-payload}
PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-dev} PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-dev}
UV_THREADPOOL_SIZE: "1" NODE_OPTIONS: "--max-old-space-size=8192"
RAYON_NUM_THREADS: "1" UV_THREADPOOL_SIZE: "4"
NEXT_PRIVATE_WORKER_THREADS: "false"
NPM_TOKEN: ${NPM_TOKEN:-} NPM_TOKEN: ${NPM_TOKEN:-}
CI: "true" CI: "true"
QDRANT_URL: "http://klz-qdrant:6333"
REDIS_URL: "redis://klz-redis:6379"
MISTRAL_API_KEY: ${MISTRAL_API_KEY:-}
OPENROUTER_API_KEY: ${OPENROUTER_API_KEY:-}
volumes: volumes:
- .:/app - .:/app
- klz_node_modules:/app/node_modules - klz_node_modules:/app/node_modules
@@ -49,34 +42,19 @@ services:
- /app/.git - /app/.git
- /app/reference - /app/reference
- /app/data - /app/data
deploy: deploy:
resources: resources:
limits: limits:
cpus: '4'
memory: 8G memory: 8G
command: > command: >
sh -c "pnpm install --no-frozen-lockfile && sh -c "pnpm install && pnpm next dev --webpack --hostname 0.0.0.0"
while true; do
(
echo '[warmup] Waiting for Next.js to be reachable...'
until curl -sf http://localhost:3000 > /dev/null; do sleep 2; done
echo '[warmup] Server is up! Pre-compiling routes...'
curl -sf http://localhost:3000/de > /dev/null 2>&1 && echo '[warmup] /de ready'
curl -sf http://localhost:3000/api/health/cms > /dev/null 2>&1 && echo '[warmup] /api/health/cms ready'
curl -sf -X POST -H 'Content-Type: application/json' -d '{\"messages\":[{\"role\":\"user\",\"content\":\"warmup\"}]}' http://localhost:3000/api/ai-search > /dev/null 2>&1 && echo '[warmup] /api/ai-search ready'
echo '[warmup] Syncing CMS data to Qdrant...'
SYNC_RESULT=$(curl -sf http://localhost:3000/api/sync-qdrant 2>&1)
echo \"[warmup] Qdrant sync: $SYNC_RESULT\"
echo '[warmup] All routes pre-compiled + Qdrant synced ✓'
) &
pnpm next dev --webpack --hostname 0.0.0.0;
echo '[klz-app] next dev exited, restarting in 2s...';
sleep 2;
done"
labels: labels:
- "traefik.enable=true" - "traefik.enable=true"
- "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3000" - "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3000"
- "traefik.docker.network=infra" - "traefik.docker.network=infra"
- "caddy=http://${TRAEFIK_HOST:-klz.localhost}"
- "caddy.reverse_proxy={{upstreams 3000}}"
klz-db: klz-db:
image: postgres:15-alpine image: postgres:15-alpine
@@ -97,35 +75,6 @@ services:
ports: ports:
- "54322:5432" - "54322:5432"
klz-redis:
image: redis:7-alpine
restart: unless-stopped
networks:
- default
ports:
- "16379:6379"
klz-qdrant:
image: qdrant/qdrant:v1.13.2
restart: unless-stopped
volumes:
- klz_qdrant_data:/qdrant/storage
networks:
- default
- "16333:6333"
klz-kabelfachmann:
image: registry.infra.mintel.me/mintel/kabelfachmann-mcp:latest
restart: unless-stopped
networks:
- default
env_file:
- ${ENV_FILE:-.env}
environment:
QDRANT_URL: http://klz-qdrant:6333
depends_on:
- klz-qdrant
networks: networks:
default: default:
name: ${PROJECT_NAME:-klz-cables}-internal name: ${PROJECT_NAME:-klz-cables}-internal
@@ -135,8 +84,6 @@ networks:
volumes: volumes:
klz_db_data: klz_db_data:
external: false external: false
klz_qdrant_data:
external: false
klz_node_modules: klz_node_modules:
klz_next_cache: klz_next_cache:
klz_turbo_cache: klz_turbo_cache:

View File

@@ -14,7 +14,6 @@ services:
PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-production-needs-change} PAYLOAD_SECRET: ${PAYLOAD_SECRET:-fallback-secret-for-production-needs-change}
volumes: volumes:
- klz_media_data:/app/public/media - klz_media_data:/app/public/media
- klz_datasheets:/app/public/datasheets
labels: labels:
- "traefik.enable=true" - "traefik.enable=true"
# HTTP ⇒ HTTPS redirect # HTTP ⇒ HTTPS redirect
@@ -101,37 +100,6 @@ services:
networks: networks:
- default - default
klz-redis:
image: redis:7-alpine
restart: unless-stopped
networks:
- default
klz-qdrant:
image: qdrant/qdrant:v1.13.2
restart: unless-stopped
ports:
- "6333:6333"
environment:
QDRANT__SERVICE__HTTP_PORT: 6333
QDRANT__SERVICE__GRPC_PORT: 6334
volumes:
- klz_qdrant_data:/qdrant/storage
networks:
- default
klz-kabelfachmann:
image: registry.infra.mintel.me/mintel/kabelfachmann-mcp:latest
restart: unless-stopped
networks:
- default
env_file:
- ${ENV_FILE:-.env}
environment:
QDRANT_URL: http://klz-qdrant:6333
depends_on:
- klz-qdrant
networks: networks:
default: default:
name: ${PROJECT_NAME:-klz-cables}-internal name: ${PROJECT_NAME:-klz-cables}-internal
@@ -143,7 +111,3 @@ volumes:
external: false external: false
klz_media_data: klz_media_data:
external: false external: false
klz_qdrant_data:
external: false
klz_datasheets:
external: false

View File

@@ -23,9 +23,7 @@ export default [
"tests/**", "tests/**",
"next-env.d.ts", "next-env.d.ts",
"reference/**", "reference/**",
"data/**", "data/**"
"remotion/**",
"components/record-mode/**"
], ],
}, },

File diff suppressed because it is too large Load Diff

View File

@@ -136,6 +136,60 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
} }
} }
export async function getPostSlugs(slug: string, locale: string): Promise<Record<string, string>> {
try {
const payload = await getPayload({ config: configPromise });
// First, find the post in the current locale to get its ID
let { docs } = await payload.find({
collection: 'posts',
where: {
slug: { equals: slug },
...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
},
locale: locale as any,
draft: config.showDrafts,
limit: 1,
});
if (!docs || docs.length === 0) {
// Fallback: search across all locales
const { docs: crossLocaleDocs } = await payload.find({
collection: 'posts',
where: {
slug: { equals: slug },
...(!config.showDrafts ? { _status: { equals: 'published' } } : {}),
},
locale: 'all',
draft: config.showDrafts,
limit: 1,
});
docs = crossLocaleDocs;
}
if (!docs || docs.length === 0) return {};
const postId = docs[0].id;
// Fetch the post with locale 'all' to get all localized fields
const { docs: allLocalesDocs } = await payload.find({
collection: 'posts',
where: {
id: { equals: postId },
},
locale: 'all',
draft: config.showDrafts,
limit: 1,
});
if (!allLocalesDocs || allLocalesDocs.length === 0) return {};
return (allLocalesDocs[0].slug as unknown as Record<string, string>) || {};
} catch (error) {
console.error(`[Payload] getPostSlugs failed for ${slug}:`, error);
return {};
}
}
export async function getAllPosts(locale: string): Promise<PostData[]> { export async function getAllPosts(locale: string): Promise<PostData[]> {
try { try {
const payload = await getPayload({ config: configPromise }); const payload = await getPayload({ config: configPromise });

View File

@@ -7,7 +7,7 @@ import path from 'path';
*/ */
export function getDatasheetPath(slug: string, locale: string): string | null { export function getDatasheetPath(slug: string, locale: string): string | null {
const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets'); const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
if (!fs.existsSync(datasheetsDir)) { if (!fs.existsSync(datasheetsDir)) {
return null; return null;
} }
@@ -16,21 +16,16 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
const normalizedSlug = slug.replace(/-hv$|-mv$/, ''); const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
// Subdirectories to search in // Subdirectories to search in
const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar']; const subdirs = ['', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
// List of patterns to try for the current locale // List of patterns to try for the current locale
// Also try with -mv and -hv suffixes since some product slugs omit the voltage class
const patterns = [ const patterns = [
`${slug}-${locale}.pdf`, `${slug}-${locale}.pdf`,
`${slug}-2-${locale}.pdf`, `${slug}-2-${locale}.pdf`,
`${slug}-3-${locale}.pdf`, `${slug}-3-${locale}.pdf`,
`${slug}-mv-${locale}.pdf`,
`${slug}-hv-${locale}.pdf`,
`${normalizedSlug}-${locale}.pdf`, `${normalizedSlug}-${locale}.pdf`,
`${normalizedSlug}-2-${locale}.pdf`, `${normalizedSlug}-2-${locale}.pdf`,
`${normalizedSlug}-3-${locale}.pdf`, `${normalizedSlug}-3-${locale}.pdf`,
`${normalizedSlug}-mv-${locale}.pdf`,
`${normalizedSlug}-hv-${locale}.pdf`,
]; ];
for (const subdir of subdirs) { for (const subdir of subdirs) {
@@ -49,70 +44,9 @@ export function getDatasheetPath(slug: string, locale: string): string | null {
`${slug}-en.pdf`, `${slug}-en.pdf`,
`${slug}-2-en.pdf`, `${slug}-2-en.pdf`,
`${slug}-3-en.pdf`, `${slug}-3-en.pdf`,
`${slug}-mv-en.pdf`,
`${slug}-hv-en.pdf`,
`${normalizedSlug}-en.pdf`, `${normalizedSlug}-en.pdf`,
`${normalizedSlug}-2-en.pdf`, `${normalizedSlug}-2-en.pdf`,
`${normalizedSlug}-3-en.pdf`, `${normalizedSlug}-3-en.pdf`,
`${normalizedSlug}-mv-en.pdf`,
`${normalizedSlug}-hv-en.pdf`,
];
for (const subdir of subdirs) {
for (const pattern of enPatterns) {
const relativePath = path.join(subdir, pattern);
const filePath = path.join(datasheetsDir, relativePath);
if (fs.existsSync(filePath)) {
return `/datasheets/${relativePath}`;
}
}
}
}
return null;
}
/**
* Finds the datasheet Excel path for a given product slug and locale.
* Checks public/datasheets for matching .xlsx files.
*/
export function getExcelDatasheetPath(slug: string, locale: string): string | null {
const datasheetsDir = path.join(process.cwd(), 'public', 'datasheets');
if (!fs.existsSync(datasheetsDir)) {
return null;
}
const normalizedSlug = slug.replace(/-hv$|-mv$/, '');
const subdirs = ['', 'products', 'low-voltage', 'medium-voltage', 'high-voltage', 'solar'];
const patterns = [
`${slug}-${locale}.xlsx`,
`${slug}-2-${locale}.xlsx`,
`${slug}-3-${locale}.xlsx`,
`${normalizedSlug}-${locale}.xlsx`,
`${normalizedSlug}-2-${locale}.xlsx`,
`${normalizedSlug}-3-${locale}.xlsx`,
];
for (const subdir of subdirs) {
for (const pattern of patterns) {
const relativePath = path.join(subdir, pattern);
const filePath = path.join(datasheetsDir, relativePath);
if (fs.existsSync(filePath)) {
return `/datasheets/${relativePath}`;
}
}
}
// Fallback to English if locale is not 'en'
if (locale !== 'en') {
const enPatterns = [
`${slug}-en.xlsx`,
`${slug}-2-en.xlsx`,
`${slug}-3-en.xlsx`,
`${normalizedSlug}-en.xlsx`,
`${normalizedSlug}-2-en.xlsx`,
`${normalizedSlug}-3-en.xlsx`,
]; ];
for (const subdir of subdirs) { for (const subdir of subdirs) {
for (const pattern of enPatterns) { for (const pattern of enPatterns) {

View File

@@ -11,10 +11,21 @@ export async function getOgFonts() {
try { try {
console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`); console.log(`[OG] Loading fonts: bold=${boldFontPath}, regular=${regularFontPath}`);
const boldFont = readFileSync(boldFontPath); const boldFontBuffer = readFileSync(boldFontPath);
const regularFont = readFileSync(regularFontPath); const regularFontBuffer = readFileSync(regularFontPath);
// Satori (Vercel OG) strictly requires an ArrayBuffer, not a Node Buffer view.
const boldFont = boldFontBuffer.buffer.slice(
boldFontBuffer.byteOffset,
boldFontBuffer.byteOffset + boldFontBuffer.byteLength,
);
const regularFont = regularFontBuffer.buffer.slice(
regularFontBuffer.byteOffset,
regularFontBuffer.byteOffset + regularFontBuffer.byteLength,
);
console.log( console.log(
`[OG] Fonts loaded successfully (${boldFont.length} and ${regularFont.length} bytes)`, `[OG] Fonts loaded successfully (${boldFont.byteLength} and ${regularFont.byteLength} bytes)`,
); );
return [ return [

View File

@@ -15,6 +15,8 @@ export interface PageFrontmatter {
export interface PageData { export interface PageData {
slug: string; slug: string;
redirectUrl?: string;
redirectPermanent?: boolean;
frontmatter: PageFrontmatter; frontmatter: PageFrontmatter;
content: any; // Lexical AST Document content: any; // Lexical AST Document
} }
@@ -96,6 +98,8 @@ export async function getPageBySlug(slug: string, locale: string): Promise<PageD
return { return {
slug: doc.slug, slug: doc.slug,
redirectUrl: doc.redirectUrl,
redirectPermanent: doc.redirectPermanent ?? true,
frontmatter: { frontmatter: {
title: doc.title, title: doc.title,
excerpt: doc.excerpt || '', excerpt: doc.excerpt || '',

File diff suppressed because it is too large Load Diff

View File

@@ -1,220 +1,273 @@
import * as React from 'react'; import * as React from 'react';
import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer'; import { Document, Page, View, Text, Image, StyleSheet, Font } from '@react-pdf/renderer';
import type { DatasheetVoltageTable, KeyValueItem } from '../scripts/pdf/model/types';
// Standard built-in fonts are used. // Standard fonts like Helvetica are built-in to PDF and don't require registration
Font.registerHyphenationCallback((word) => [word]); // unless we want to use specific TTF files. Using built-in Helvetica for maximum stability.
const C = {
navy: '#001a4d',
navyDeep: '#000d26',
green: '#4da612',
greenLight: '#e8f5d8',
white: '#FFFFFF',
offWhite: '#f8f9fa',
gray100: '#f3f4f6',
gray200: '#e5e7eb',
gray300: '#d1d5db',
gray400: '#9ca3af',
gray600: '#4b5563',
gray900: '#111827',
};
const MARGIN = 56;
// Industrial/technical/restrained design - STYLEGUIDE.md compliant
const styles = StyleSheet.create({ const styles = StyleSheet.create({
page: { page: {
paddingHorizontal: MARGIN, color: '#111827', // Text Primary
paddingBottom: 80, lineHeight: 1.5,
paddingTop: 40, backgroundColor: '#FFFFFF',
paddingTop: 0,
paddingBottom: 100,
fontFamily: 'Helvetica', fontFamily: 'Helvetica',
backgroundColor: C.white,
color: C.gray900,
}, },
hero: { paddingBottom: 20, marginBottom: 10 },
// Hero-style header
hero: {
backgroundColor: '#FFFFFF',
paddingTop: 24,
paddingBottom: 0,
paddingHorizontal: 72,
marginBottom: 20,
position: 'relative',
borderBottomWidth: 0,
borderBottomColor: '#e5e7eb',
},
header: { header: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginBottom: 16, marginBottom: 16,
}, },
logoText: { logoText: {
fontSize: 22, fontSize: 24,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: '#000d26',
letterSpacing: 2, letterSpacing: 1,
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
docTitle: { docTitle: {
fontSize: 8, fontSize: 10,
fontWeight: 700, fontWeight: 700,
color: C.green, color: '#001a4d',
letterSpacing: 2, letterSpacing: 2,
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
productRow: { flexDirection: 'row', alignItems: 'center', gap: 20 },
productInfoCol: { flex: 1, justifyContent: 'center' }, productRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 20,
},
productInfoCol: {
flex: 1,
justifyContent: 'center',
},
productImageCol: { productImageCol: {
flex: 1, flex: 1,
height: 120, height: 120,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
borderRadius: 4, borderRadius: 8,
borderWidth: 1, borderWidth: 1,
borderColor: C.gray200, borderColor: '#e5e7eb',
backgroundColor: C.white, backgroundColor: '#FFFFFF',
overflow: 'hidden', overflow: 'hidden',
}, },
// Product Hero Info
productHero: {
marginTop: 0,
},
productName: { productName: {
fontSize: 24, fontSize: 24,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: '#000d26',
marginBottom: 0,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
productMeta: { productMeta: {
fontSize: 10, fontSize: 10,
color: C.gray600, color: '#4b5563',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 1, letterSpacing: 1,
marginBottom: 2,
}, },
heroImage: { width: '100%', height: '100%', objectFit: 'contain' },
noImage: { fontSize: 8, color: C.gray400, textAlign: 'center' },
content: {}, heroImage: {
section: { marginBottom: 20 }, width: '100%',
sectionTitle: { height: '100%',
fontSize: 8, objectFit: 'contain',
fontWeight: 700,
color: C.green,
marginBottom: 6,
textTransform: 'uppercase',
letterSpacing: 1.5,
}, },
noImage: {
fontSize: 8,
color: '#9ca3af',
textAlign: 'center',
},
// Content Area
content: {
paddingHorizontal: 72,
},
// Content sections
section: {
marginBottom: 20,
},
sectionTitle: {
fontSize: 14,
fontWeight: 700,
color: '#000d26', // Primary Dark
marginBottom: 8,
textTransform: 'uppercase',
letterSpacing: -0.2,
},
sectionAccent: { sectionAccent: {
width: 30, width: 30,
height: 2, height: 3,
backgroundColor: C.green, backgroundColor: '#82ed20', // Accent Green
marginBottom: 8, marginBottom: 8,
borderRadius: 1, borderRadius: 1.5,
}, },
description: { fontSize: 10, lineHeight: 1.7, color: C.gray600 },
categories: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 }, description: {
categoryTag: { fontSize: 11,
backgroundColor: C.offWhite, lineHeight: 1.7,
paddingHorizontal: 10, color: '#4b5563', // Text Secondary
paddingVertical: 4,
borderWidth: 0.5,
borderColor: C.gray200,
borderRadius: 3,
}, },
// Technical data table
specsTable: {
marginTop: 8,
border: '1px solid #e5e7eb',
borderRadius: 8,
overflow: 'hidden',
},
specsTableRow: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: '#e5e7eb',
},
specsTableRowLast: {
borderBottomWidth: 0,
},
specsTableLabelCell: {
flex: 1,
paddingVertical: 4,
paddingHorizontal: 16,
backgroundColor: '#f8f9fa',
borderRightWidth: 1,
borderRightColor: '#e5e7eb',
},
specsTableValueCell: {
flex: 1,
paddingVertical: 4,
paddingHorizontal: 16,
},
specsTableLabelText: {
fontSize: 9,
fontWeight: 700,
color: '#000d26',
textTransform: 'uppercase',
letterSpacing: 0.5,
},
specsTableValueText: {
fontSize: 10,
color: '#111827',
fontWeight: 500,
},
// Categories
categories: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
},
categoryTag: {
backgroundColor: '#f8f9fa',
paddingHorizontal: 12,
paddingVertical: 6,
border: '1px solid #e5e7eb',
borderRadius: 100,
},
categoryText: { categoryText: {
fontSize: 7, fontSize: 8,
color: C.gray600, color: '#4b5563',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.5, letterSpacing: 0.5,
}, },
// Footer
footer: { footer: {
position: 'absolute', position: 'absolute',
bottom: 28, bottom: 40,
left: MARGIN, left: 72,
right: MARGIN, right: 72,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingTop: 12, paddingTop: 24,
borderTopWidth: 2, borderTop: '1px solid #e5e7eb',
borderTopColor: C.green,
}, },
footerText: { footerText: {
fontSize: 7, fontSize: 8,
color: C.gray400, color: '#9ca3af',
fontWeight: 400, fontWeight: 500,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.8, letterSpacing: 1,
}, },
footerBrand: { footerBrand: {
fontSize: 9, fontSize: 10,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: '#000d26',
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 1.5, letterSpacing: 1,
}, },
kvGrid: { width: '100%', borderWidth: 1, borderColor: C.gray200 },
kvRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: C.gray200 },
kvRowAlt: { backgroundColor: C.offWhite },
kvRowLast: { borderBottomWidth: 0 },
kvCell: { paddingVertical: 6, paddingHorizontal: 8 },
kvMidDivider: { borderRightWidth: 1, borderRightColor: C.gray200 },
kvLabelText: { fontSize: 8.5, fontWeight: 700, color: C.gray600 },
kvValueText: { fontSize: 9.5, color: C.gray900 },
tableWrap: { width: '100%', borderWidth: 1, borderColor: C.gray200, marginBottom: 14 },
tableHeader: {
width: '100%',
flexDirection: 'row',
backgroundColor: C.white,
borderBottomWidth: 1,
borderBottomColor: C.gray200,
},
tableHeaderCell: {
paddingVertical: 5,
paddingHorizontal: 4,
fontSize: 6.6,
fontWeight: 700,
color: C.navyDeep,
},
tableHeaderCellCfg: { paddingHorizontal: 6 },
tableHeaderCellDivider: { borderRightWidth: 1, borderRightColor: C.gray200 },
tableRow: {
width: '100%',
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: C.gray200,
},
tableRowAlt: { backgroundColor: C.offWhite },
tableCell: { paddingVertical: 4, paddingHorizontal: 4, fontSize: 6.6, color: C.gray900 },
tableCellCfg: { paddingHorizontal: 6 },
tableCellDivider: { borderRightWidth: 1, borderRightColor: C.gray200 },
}); });
interface ProductData { interface ProductData {
id: number; id: number;
name: string; name: string;
sku: string; shortDescriptionHtml: string;
categoriesLine?: string; descriptionHtml: string;
descriptionText?: string;
heroSrc?: string | null;
productUrl?: string;
shortDescriptionHtml?: string;
descriptionHtml?: string;
applicationHtml?: string; applicationHtml?: string;
images?: string[]; images: string[];
featuredImage?: string | null; featuredImage: string | null;
logoDataUrl?: string | null; sku: string;
categories?: Array<{ name: string }>; categories: Array<{ name: string }>;
attributes?: Array<{ name: string; options: string[] }>; attributes: Array<{
name: string;
options: string[];
}>;
} }
export interface PDFDatasheetProps { interface PDFDatasheetProps {
product: ProductData; product: ProductData;
locale: 'en' | 'de'; locale: 'en' | 'de';
logoDataUrl?: string | null; logoUrl?: string;
technicalItems?: KeyValueItem[];
voltageTables?: DatasheetVoltageTable[];
legendItems?: KeyValueItem[];
} }
const stripHtml = (html: string): string => html.replace(/<[^>]*>/g, ''); // Helper to strip HTML tags
const stripHtml = (html: string): string => {
return html.replace(/<[^>]*>/g, '');
};
const getLabels = (locale: 'en' | 'de') => // Helper to get translated labels
({ const getLabels = (locale: 'en' | 'de') => {
const labels = {
en: { en: {
productDatasheet: 'Technical Datasheet', productDatasheet: 'Technical Datasheet',
description: 'APPLICATION', description: 'APPLICATION',
@@ -222,9 +275,6 @@ const getLabels = (locale: 'en' | 'de') =>
categories: 'CATEGORIES', categories: 'CATEGORIES',
sku: 'SKU', sku: 'SKU',
noImage: 'No image available', noImage: 'No image available',
crossSection: 'Configurations',
slug_cs: 'Cores & CS',
abbreviations: 'ABBREVIATIONS',
}, },
de: { de: {
productDatasheet: 'Technisches Datenblatt', productDatasheet: 'Technisches Datenblatt',
@@ -233,278 +283,39 @@ const getLabels = (locale: 'en' | 'de') =>
categories: 'KATEGORIEN', categories: 'KATEGORIEN',
sku: 'ARTIKELNUMMER', sku: 'ARTIKELNUMMER',
noImage: 'Kein Bild verfügbar', noImage: 'Kein Bild verfügbar',
crossSection: 'Konfigurationen',
slug_cs: 'Adern & QS',
abbreviations: 'ABKÜRZUNGEN',
}, },
})[locale]; };
return labels[locale];
};
function clamp(n: number, min: number, max: number) { export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({ product, locale }) => {
return Math.max(min, Math.min(max, n));
}
function normTextForMeasure(v: unknown) {
return String(v ?? '')
.replace(/\s+/g, ' ')
.trim();
}
function textLen(v: unknown) {
return normTextForMeasure(v).length;
}
function distributeWithMinMax(
weights: number[],
total: number,
minEach: number,
maxEach: number,
): number[] {
const n = weights.length;
if (!n) return [];
const mins = Array.from({ length: n }, () => minEach);
const maxs = Array.from({ length: n }, () => maxEach);
const minSum = mins.reduce((a, b) => a + b, 0);
if (minSum > total) return mins.map((m) => m * (total / minSum));
const result = mins.slice();
let remaining = total - minSum;
let remainingIdx = Array.from({ length: n }, (_, i) => i);
while (remaining > 1e-9 && remainingIdx.length) {
const wSum = remainingIdx.reduce((acc, i) => acc + Math.max(0, weights[i] || 0), 0);
if (wSum <= 1e-9) {
const even = remaining / remainingIdx.length;
for (const i of remainingIdx) result[i] += even;
remaining = 0;
break;
}
const nextIdx: number[] = [];
for (const i of remainingIdx) {
const w = Math.max(0, weights[i] || 0);
const add = (w / wSum) * remaining;
const capped = Math.min(result[i] + add, maxs[i]);
const used = capped - result[i];
result[i] = capped;
remaining -= used;
if (result[i] + 1e-9 < maxs[i]) nextIdx.push(i);
}
remainingIdx = nextIdx;
}
const sum = result.reduce((a, b) => a + b, 0);
const drift = total - sum;
if (Math.abs(drift) > 1e-9) result[result.length - 1] += drift;
return result;
}
function KeyValueGrid({ items }: { items: KeyValueItem[] }) {
const filtered = (items || []).filter((i) => i.label && i.value);
if (!filtered.length) return null;
const rows: Array<[KeyValueItem, KeyValueItem | null]> = [];
for (let i = 0; i < filtered.length; i += 2) rows.push([filtered[i], filtered[i + 1] || null]);
return (
<View style={styles.kvGrid}>
{rows.map(([left, right], rowIndex) => {
const isLast = rowIndex === rows.length - 1;
const leftValue = left.unit ? `${left.value} ${left.unit}` : left.value;
const rightValue = right ? (right.unit ? `${right.value} ${right.unit}` : right.value) : '';
return (
<View
key={`${left.label}-${rowIndex}`}
style={[
styles.kvRow,
rowIndex % 2 === 0 ? styles.kvRowAlt : null,
isLast ? styles.kvRowLast : null,
]}
wrap={false}
>
<View style={[styles.kvCell, { width: '23%' }]}>
<Text style={styles.kvLabelText}>{left.label}</Text>
</View>
<View style={[styles.kvCell, styles.kvMidDivider, { width: '27%' }]}>
<Text style={styles.kvValueText}>{leftValue}</Text>
</View>
<View style={[styles.kvCell, { width: '23%' }]}>
<Text style={styles.kvLabelText}>{right?.label || ''}</Text>
</View>
<View style={[styles.kvCell, { width: '27%' }]}>
<Text style={styles.kvValueText}>{rightValue}</Text>
</View>
</View>
);
})}
</View>
);
}
function DenseTable({
table,
firstColLabel,
}: {
table: Pick<DatasheetVoltageTable, 'columns' | 'rows'>;
firstColLabel: string;
}) {
const cols = table.columns;
const rows = table.rows;
const headerText = (label: string) =>
String(label || '')
.replace(/\s+/g, '\u00A0')
.trim();
const cfgMin = 0.14,
cfgMax = 0.23;
const cfgContentLen = Math.max(
textLen(firstColLabel),
...rows.map((r) => textLen(r.configuration)),
8,
);
const dataContentLens = cols.map((c, ci) => {
const headerL = textLen(c.label);
let cellMax = 0;
for (const r of rows) cellMax = Math.max(cellMax, textLen(r.cells[ci]));
return Math.max(headerL * 1.15, cellMax, 3);
});
const cfgWeight = cfgContentLen * 1.05;
const dataWeights = dataContentLens.map((l) => l);
const dataWeightSum = dataWeights.reduce((a, b) => a + b, 0);
const rawCfgPct = dataWeightSum > 0 ? cfgWeight / (cfgWeight + dataWeightSum) : 0.28;
let cfgPct = clamp(rawCfgPct, cfgMin, cfgMax);
const minDataPct =
cols.length >= 14 ? 0.045 : cols.length >= 12 ? 0.05 : cols.length >= 10 ? 0.055 : 0.06;
const cfgPctMaxForMinData = 1 - cols.length * minDataPct;
if (Number.isFinite(cfgPctMaxForMinData)) cfgPct = Math.min(cfgPct, cfgPctMaxForMinData);
cfgPct = clamp(cfgPct, cfgMin, cfgMax);
const dataTotal = Math.max(0, 1 - cfgPct);
const maxDataPct = Math.min(0.24, Math.max(minDataPct * 2.8, dataTotal * 0.55));
const dataPcts = distributeWithMinMax(dataWeights, dataTotal, minDataPct, maxDataPct);
const cfgW = `${(cfgPct * 100).toFixed(4)}%`;
const dataWs = dataPcts.map((p, idx) => {
if (idx === dataPcts.length - 1) {
const used = dataPcts.slice(0, -1).reduce((a, b) => a + b, 0);
const remainder = Math.max(0, dataTotal - used);
return `${(remainder * 100).toFixed(4)}%`;
}
return `${(p * 100).toFixed(4)}%`;
});
const headerFontSize =
cols.length >= 14 ? 5.7 : cols.length >= 12 ? 5.9 : cols.length >= 10 ? 6.2 : 6.6;
return (
<View style={styles.tableWrap} break={false}>
<View style={styles.tableHeader} wrap={false}>
<View style={{ width: cfgW }}>
<Text
style={[
styles.tableHeaderCell,
styles.tableHeaderCellCfg,
{ fontSize: headerFontSize, paddingHorizontal: 3 },
cols.length ? styles.tableHeaderCellDivider : null,
]}
wrap={false}
>
{headerText(firstColLabel)}
</Text>
</View>
{cols.map((c, idx) => {
const isLast = idx === cols.length - 1;
return (
<View key={c.key} style={{ width: dataWs[idx] }}>
<Text
style={[
styles.tableHeaderCell,
{ fontSize: headerFontSize, paddingHorizontal: 3 },
!isLast ? styles.tableHeaderCellDivider : null,
]}
wrap={false}
>
{headerText(c.label)}
</Text>
</View>
);
})}
</View>
{rows.map((r, ri) => (
<View
key={`${r.configuration}-${ri}`}
style={[styles.tableRow, ri % 2 === 0 ? styles.tableRowAlt : null]}
wrap={false}
minPresenceAhead={16}
>
<View style={{ width: cfgW }} wrap={false}>
<Text
style={[
styles.tableCell,
styles.tableCellCfg,
{ fontSize: 6.2, paddingHorizontal: 3 },
cols.length ? styles.tableCellDivider : null,
]}
wrap={false}
>
{r.configuration}
</Text>
</View>
{r.cells.map((cell, ci) => (
<View key={`${cols[ci]?.key || ci}`} style={{ width: dataWs[ci] }} wrap={false}>
<Text
style={[
styles.tableCell,
ci !== r.cells.length - 1 ? styles.tableCellDivider : null,
]}
wrap={false}
>
{cell}
</Text>
</View>
))}
</View>
))}
</View>
);
}
export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
product,
locale,
technicalItems = [],
voltageTables = [],
legendItems = [],
}) => {
const labels = getLabels(locale); const labels = getLabels(locale);
const description = stripHtml(
product.applicationHtml ||
product.shortDescriptionHtml ||
product.descriptionHtml ||
product.descriptionText ||
'',
);
return ( return (
<Document> <Document>
<Page size="A4" style={styles.page}> <Page size="A4" style={styles.page}>
{/* Hero Header */}
<View style={styles.hero}> <View style={styles.hero}>
<View style={styles.header}> <View style={styles.header}>
<View style={{ width: 80 }}> <View>
{product.logoDataUrl || (product as any).logoDataUrl ? ( <Text style={styles.logoText}>KLZ</Text>
<Image
src={product.logoDataUrl || (product as any).logoDataUrl}
style={{ width: '100%', objectFit: 'contain' }}
/>
) : (
<Text style={styles.logoText}>KLZ</Text>
)}
</View> </View>
<Text style={styles.docTitle}>{labels.productDatasheet}</Text> <Text style={styles.docTitle}>{labels.productDatasheet}</Text>
</View> </View>
<View style={styles.productRow}> <View style={styles.productRow}>
<View style={styles.productInfoCol}> <View style={styles.productInfoCol}>
<Text style={styles.productMeta}> <View style={styles.productHero}>
{product.categoriesLine || <View style={styles.categories}>
(product.categories || []).map((c) => c.name).join(' • ')} {product.categories.map((cat, index) => (
</Text> <Text key={index} style={styles.productMeta}>
<Text style={styles.productName}>{product.name}</Text> {cat.name}
{index < product.categories.length - 1 ? ' • ' : ''}
</Text>
))}
</View>
<Text style={styles.productName}>{product.name}</Text>
</View>
</View> </View>
<View style={styles.productImageCol}> <View style={styles.productImageCol}>
{product.featuredImage ? ( {product.featuredImage ? (
@@ -517,93 +328,66 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
</View> </View>
<View style={styles.content}> <View style={styles.content}>
{description && ( {/* Description section */}
{(product.applicationHtml || product.shortDescriptionHtml || product.descriptionHtml) && (
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionTitle}>{labels.description}</Text> <Text style={styles.sectionTitle}>{labels.description}</Text>
<View style={styles.sectionAccent} /> <View style={styles.sectionAccent} />
<Text style={styles.description}>{description}</Text> <Text style={styles.description}>
{stripHtml(
product.applicationHtml ||
product.shortDescriptionHtml ||
product.descriptionHtml,
)}
</Text>
</View> </View>
)} )}
{technicalItems.length > 0 && ( {/* Technical specifications */}
{product.attributes && product.attributes.length > 0 && (
<View style={styles.section}> <View style={styles.section}>
<Text style={styles.sectionTitle}>{labels.specifications}</Text> <Text style={styles.sectionTitle}>{labels.specifications}</Text>
<View style={styles.sectionAccent} /> <View style={styles.sectionAccent} />
<KeyValueGrid items={technicalItems} /> <View style={styles.specsTable}>
</View> {product.attributes.map((attr, index) => (
)} <View
key={index}
{voltageTables.map((table, idx) => ( style={[
<View key={idx} style={styles.section} break={false}> styles.specsTableRow,
<Text index === product.attributes.length - 1 && styles.specsTableRowLast,
style={styles.sectionTitle} ]}
>{`${labels.crossSection}${table.voltageLabel}`}</Text> >
<View style={styles.sectionAccent} /> <View style={styles.specsTableLabelCell}>
<DenseTable table={table} firstColLabel={labels.slug_cs} /> <Text style={styles.specsTableLabelText}>{attr.name}</Text>
</View>
))}
{legendItems.length > 0 && (
<View style={styles.section} break={false}>
<Text style={styles.sectionTitle}>{labels.abbreviations}</Text>
<View style={styles.sectionAccent} />
<KeyValueGrid items={legendItems} />
</View>
)}
{!technicalItems.length &&
!voltageTables.length &&
product.attributes &&
product.attributes.length > 0 && (
<View style={styles.section}>
<Text style={styles.sectionTitle}>{labels.specifications}</Text>
<View style={styles.sectionAccent} />
<View style={{ borderWidth: 1, borderColor: C.gray200 }}>
{product.attributes.map((attr, index) => (
<View
key={index}
style={{
flexDirection: 'row',
borderBottomWidth: index === product.attributes!.length - 1 ? 0 : 1,
borderBottomColor: C.gray200,
backgroundColor: index % 2 === 0 ? C.offWhite : C.white,
}}
>
<View
style={{
flex: 1,
padding: 6,
borderRightWidth: 1,
borderRightColor: C.gray200,
}}
>
<Text style={{ fontSize: 8.5, fontWeight: 700, color: C.gray600 }}>
{attr.name}
</Text>
</View>
<View style={{ flex: 1, padding: 6 }}>
<Text style={{ fontSize: 9.5, color: C.gray900 }}>
{attr.options.join(', ')}
</Text>
</View>
</View> </View>
))} <View style={styles.specsTableValueCell}>
</View> <Text style={styles.specsTableValueText}>{attr.options.join(', ')}</Text>
</View>
</View>
))}
</View> </View>
)} </View>
)}
{/* Categories as clean tags */}
{product.categories && product.categories.length > 0 && (
<View style={styles.section}>
<Text style={styles.sectionTitle}>{labels.categories}</Text>
<View style={styles.sectionAccent} />
<View style={styles.categories}>
{product.categories.map((cat, index) => (
<View key={index} style={styles.categoryTag}>
<Text style={styles.categoryText}>{cat.name}</Text>
</View>
))}
</View>
</View>
)}
</View> </View>
{/* Minimal footer */}
<View style={styles.footer} fixed> <View style={styles.footer} fixed>
<View style={{ width: 60 }}> <Text style={styles.footerBrand}>KLZ CABLES</Text>
{product.logoDataUrl || (product as any).logoDataUrl ? (
<Image
src={product.logoDataUrl || (product as any).logoDataUrl}
style={{ width: '100%', objectFit: 'contain' }}
/>
) : (
<Text style={styles.footerBrand}>KLZ CABLES</Text>
)}
</View>
<Text style={styles.footerText}> <Text style={styles.footerText}>
{new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', { {new Date().toLocaleDateString(locale === 'en' ? 'en-US' : 'de-DE', {
year: 'numeric', year: 'numeric',

View File

@@ -1,21 +1,14 @@
import * as React from 'react'; import * as React from 'react';
import { Document, Page, View, Text, StyleSheet, Font, Link } from '@react-pdf/renderer'; import { Document, Page, View, Text, StyleSheet, Font, Link } from '@react-pdf/renderer';
// Register fonts (using system fonts for now, can be customized) // Standard fonts like Helvetica are built-in to PDF and don't require registration
Font.register({ // unless we want to use specific TTF files. Using built-in Helvetica for maximum stability.
family: 'Helvetica',
fonts: [
{ src: '/fonts/Helvetica.ttf', fontWeight: 400 },
{ src: '/fonts/Helvetica-Bold.ttf', fontWeight: 700 },
],
});
// ─── Brand Tokens (matching datasheet) ────────────────────────────────── // ─── Brand Tokens (matching datasheet) ──────────────────────────────────
const C = { const C = {
navy: '#001a4d', navy: '#001a4d',
navyDeep: '#000d26', navyDeep: '#000d26',
green: '#4da612', accent: '#82ed20',
greenLight: '#e8f5d8',
white: '#FFFFFF', white: '#FFFFFF',
offWhite: '#f8f9fa', offWhite: '#f8f9fa',
gray100: '#f3f4f6', gray100: '#f3f4f6',
@@ -26,7 +19,7 @@ const C = {
gray900: '#111827', gray900: '#111827',
}; };
const MARGIN = 56; const MARGIN = 72;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
page: { page: {
@@ -34,7 +27,7 @@ const styles = StyleSheet.create({
lineHeight: 1.5, lineHeight: 1.5,
backgroundColor: C.white, backgroundColor: C.white,
paddingTop: 0, paddingTop: 0,
paddingBottom: 80, paddingBottom: 100,
fontFamily: 'Helvetica', fontFamily: 'Helvetica',
}, },
@@ -42,11 +35,12 @@ const styles = StyleSheet.create({
hero: { hero: {
backgroundColor: C.white, backgroundColor: C.white,
paddingTop: 24, paddingTop: 24,
paddingBottom: 0, paddingBottom: 20,
paddingHorizontal: MARGIN, paddingHorizontal: MARGIN,
marginBottom: 20, marginBottom: 20,
position: 'relative', position: 'relative',
borderBottomWidth: 0, borderBottomWidth: 1,
borderBottomColor: C.gray200,
}, },
header: { header: {
@@ -57,42 +51,45 @@ const styles = StyleSheet.create({
}, },
logoText: { logoText: {
fontSize: 22, fontSize: 24,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: C.navyDeep,
letterSpacing: 2, letterSpacing: 1,
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
docTitle: { docTitle: {
fontSize: 8, fontSize: 10,
fontWeight: 700, fontWeight: 700,
color: C.green, color: C.navy,
letterSpacing: 2, letterSpacing: 2,
textTransform: 'uppercase', textTransform: 'uppercase',
}, },
// Content Area productHero: {
content: { marginTop: 0,
paddingHorizontal: MARGIN,
}, },
pageTitle: { pageTitle: {
fontSize: 24, fontSize: 24,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: C.navyDeep,
marginBottom: 8, marginBottom: 0,
marginTop: 10,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: -0.5, letterSpacing: -0.5,
}, },
accentBar: { accentBar: {
width: 30, width: 30,
height: 2, height: 3,
backgroundColor: C.green, backgroundColor: C.accent,
marginBottom: 20, marginTop: 8,
borderRadius: 1, borderRadius: 1.5,
},
// Content Area
content: {
paddingHorizontal: MARGIN,
}, },
// Lexical Elements // Lexical Elements
@@ -136,7 +133,7 @@ const styles = StyleSheet.create({
listItemBullet: { listItemBullet: {
width: 12, width: 12,
fontSize: 10, fontSize: 10,
color: C.green, color: C.accent,
fontWeight: 700, fontWeight: 700,
}, },
listItemContent: { listItemContent: {
@@ -146,7 +143,7 @@ const styles = StyleSheet.create({
lineHeight: 1.7, lineHeight: 1.7,
}, },
link: { link: {
color: C.green, color: C.accent,
textDecoration: 'none', textDecoration: 'none',
}, },
textBold: { textBold: {
@@ -161,31 +158,31 @@ const styles = StyleSheet.create({
// Footer — matches brochure style // Footer — matches brochure style
footer: { footer: {
position: 'absolute', position: 'absolute',
bottom: 28, bottom: 40,
left: MARGIN, left: MARGIN,
right: MARGIN, right: MARGIN,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
paddingTop: 12, paddingTop: 24,
borderTopWidth: 2, borderTopWidth: 1,
borderTopColor: C.green, borderTopColor: C.gray200,
}, },
footerText: { footerText: {
fontSize: 7, fontSize: 8,
color: C.gray400, color: C.gray400,
fontWeight: 400, fontWeight: 500,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 0.8, letterSpacing: 1,
}, },
footerBrand: { footerBrand: {
fontSize: 9, fontSize: 10,
fontWeight: 700, fontWeight: 700,
color: C.navyDeep, color: C.navyDeep,
textTransform: 'uppercase', textTransform: 'uppercase',
letterSpacing: 1.5, letterSpacing: 1,
}, },
}); });
@@ -305,12 +302,14 @@ export const PDFPage: React.FC<PDFPageProps> = ({ page, locale = 'de' }) => {
</View> </View>
<Text style={styles.docTitle}>{locale === 'en' ? 'Document' : 'Dokument'}</Text> <Text style={styles.docTitle}>{locale === 'en' ? 'Document' : 'Dokument'}</Text>
</View> </View>
<View style={styles.productHero}>
<Text style={styles.pageTitle}>{page.title}</Text>
<View style={styles.accentBar} />
</View>
</View> </View>
<View style={styles.content}> <View style={styles.content}>
<Text style={styles.pageTitle}>{page.title}</Text>
<View style={styles.accentBar} />
<View> <View>
{page.content?.root?.children?.map((node: any, i: number) => {page.content?.root?.children?.map((node: any, i: number) =>
renderLexicalNode(node, i), renderLexicalNode(node, i),

View File

@@ -1,104 +0,0 @@
/**
* Utility for formatting technical data values.
* Handles long lists of standards and simplifies repetitive strings.
*/
export interface FormattedTechnicalValue {
original: string;
isList: boolean;
parts: string[];
displayValue: string;
}
/**
* Formats a technical value string.
* Detects if it's a list (separated by / or ,) and tries to clean it up.
*/
export function formatTechnicalValue(value: string | null | undefined): FormattedTechnicalValue {
if (!value) {
return { original: '', isList: false, parts: [], displayValue: '' };
}
const str = String(value).trim();
// Detect list separators
let parts: string[] = [];
if (str.includes(' / ')) {
parts = str.split(' / ').map((p) => p.trim());
} else if (str.includes(' /')) {
parts = str.split(' /').map((p) => p.trim());
} else if (str.includes('/ ')) {
parts = str.split('/ ').map((p) => p.trim());
} else if (str.split('/').length > 2) {
// Check if it's actually many standards separated by / without spaces
// e.g. EN123/EN456/EN789
const split = str.split('/');
if (split.length > 3) {
parts = split.map((p) => p.trim());
}
}
// If no parts found yet, try comma
if (parts.length === 0 && str.includes(', ')) {
parts = str.split(', ').map((p) => p.trim());
}
// Filter out empty parts
parts = parts.filter(Boolean);
// If we have parts, let's see if we can simplify them
if (parts.length > 2) {
// Find common prefix to condense repetitive standards
let commonPrefix = '';
const first = parts[0];
const last = parts[parts.length - 1];
let i = 0;
while (i < first.length && first.charAt(i) === last.charAt(i)) {
i++;
}
commonPrefix = first.substring(0, i);
// If a meaningful prefix exists (e.g., "EN 60 332-1-")
if (commonPrefix.length > 4) {
const suffixParts: string[] = [];
for (let idx = 0; idx < parts.length; idx++) {
if (idx === 0) {
suffixParts.push(parts[idx]);
} else {
const suffix = parts[idx].substring(commonPrefix.length).trim();
if (suffix) {
suffixParts.push(suffix);
}
}
}
// Condense into a single string like "EN 60 332-1-2 / -3 / -4"
// Wait, returning a single string might still wrap badly.
// Instead, we return them as chunks or just a condensed string.
const condensedString = suffixParts[0] + ' / -' + suffixParts.slice(1).join(' / -');
return {
original: str,
isList: false, // Turn off badge rendering to use text block instead
parts: [condensedString],
displayValue: condensedString,
};
}
// If no common prefix, return as list so UI can render badges
return {
original: str,
isList: true,
parts,
displayValue: parts.join(', '),
};
}
return {
original: str,
isList: false,
parts: [str],
displayValue: str,
};
}

BIN
lychee

Binary file not shown.

View File

@@ -3,7 +3,7 @@
"pages": { "pages": {
"impressum": "impressum", "impressum": "impressum",
"datenschutz": "datenschutz", "datenschutz": "datenschutz",
"agbs": "agbs", "agbs": "terms",
"kontakt": "contact", "kontakt": "contact",
"team": "team", "team": "team",
"blog": "blog", "blog": "blog",
@@ -74,7 +74,7 @@
"privacyPolicy": "Datenschutz", "privacyPolicy": "Datenschutz",
"privacyPolicySlug": "datenschutz", "privacyPolicySlug": "datenschutz",
"terms": "AGB", "terms": "AGB",
"termsSlug": "agbs", "termsSlug": "terms",
"products": "Produkte", "products": "Produkte",
"lowVoltage": "Niederspannungskabel", "lowVoltage": "Niederspannungskabel",
"mediumVoltage": "Mittelspannungskabel", "mediumVoltage": "Mittelspannungskabel",
@@ -226,10 +226,6 @@
"requestQuoteDesc": "Erhalten Sie technische Spezifikationen und Preise für Ihr Projekt.", "requestQuoteDesc": "Erhalten Sie technische Spezifikationen und Preise für Ihr Projekt.",
"downloadDatasheet": "Datenblatt herunterladen", "downloadDatasheet": "Datenblatt herunterladen",
"downloadDatasheetDesc": "Erhalten Sie die vollständigen technischen Spezifikationen als PDF.", "downloadDatasheetDesc": "Erhalten Sie die vollständigen technischen Spezifikationen als PDF.",
"downloadExcel": "Excel herunterladen",
"downloadExcelDesc": "Erhalten Sie die technischen Daten als editierbare Tabelle.",
"downloadBrochure": "Produktbroschüre",
"downloadBrochureDesc": "Laden Sie unseren kompletten Produktkatalog mit allen technischen Spezifikationen herunter.",
"form": { "form": {
"contactInfo": "Kontaktinformationen", "contactInfo": "Kontaktinformationen",
"projectDetails": "Projektdetails", "projectDetails": "Projektdetails",
@@ -399,21 +395,5 @@
"description": "Es scheint, als wäre das Kabel zu dieser Seite unterbrochen worden. Wir konnten die gesuchte Ressource nicht finden.", "description": "Es scheint, als wäre das Kabel zu dieser Seite unterbrochen worden. Wir konnten die gesuchte Ressource nicht finden.",
"cta": "Zurück zur Sicherheit" "cta": "Zurück zur Sicherheit"
} }
},
"Brochure": {
"title": "Produktkatalog",
"subtitle": "Erhalten Sie unsere komplette Produktbroschüre mit allen technischen Spezifikationen und Kabellösungen.",
"emailPlaceholder": "ihre@email.de",
"emailLabel": "E-Mail-Adresse",
"submit": "Broschüre erhalten",
"submitting": "Wird gesendet...",
"successTitle": "Ihre Broschüre ist bereit!",
"successDesc": "Vielen Dank für Ihr Interesse. Klicken Sie unten, um den kompletten KLZ-Produktkatalog herunterzuladen.",
"download": "Broschüre herunterladen",
"privacyNote": "Mit dem Absenden erklären Sie sich mit unserer Datenschutzerklärung einverstanden.",
"close": "Schließen",
"ctaTitle": "Kompletter Produktkatalog",
"ctaDesc": "Alle Datenblätter in einem Premium-PDF — technische Spezifikationen, Kabellösungen & mehr.",
"ctaButton": "Kostenlose Broschüre erhalten"
} }
} }

View File

@@ -3,7 +3,7 @@
"pages": { "pages": {
"legal-notice": "impressum", "legal-notice": "impressum",
"privacy-policy": "datenschutz", "privacy-policy": "datenschutz",
"terms": "agbs", "terms": "terms",
"contact": "contact", "contact": "contact",
"team": "team", "team": "team",
"blog": "blog", "blog": "blog",
@@ -226,10 +226,6 @@
"requestQuoteDesc": "Get technical specifications and pricing for your project.", "requestQuoteDesc": "Get technical specifications and pricing for your project.",
"downloadDatasheet": "Download Datasheet", "downloadDatasheet": "Download Datasheet",
"downloadDatasheetDesc": "Get the full technical specifications in PDF format.", "downloadDatasheetDesc": "Get the full technical specifications in PDF format.",
"downloadExcel": "Download Excel",
"downloadExcelDesc": "Get the technical data as editable spreadsheet.",
"downloadBrochure": "Product Brochure",
"downloadBrochureDesc": "Download our complete product catalog with all technical specifications.",
"form": { "form": {
"contactInfo": "Contact Information", "contactInfo": "Contact Information",
"projectDetails": "Project Details", "projectDetails": "Project Details",
@@ -399,21 +395,5 @@
"description": "It seems the cable to this page has been disconnected. We couldn't find the resource you were looking for.", "description": "It seems the cable to this page has been disconnected. We couldn't find the resource you were looking for.",
"cta": "Back to Safety" "cta": "Back to Safety"
} }
},
"Brochure": {
"title": "Product Catalog",
"subtitle": "Get our complete product brochure with all technical specifications and cable solutions.",
"emailPlaceholder": "your@email.com",
"emailLabel": "Email Address",
"submit": "Get Brochure",
"submitting": "Sending...",
"successTitle": "Your brochure is ready!",
"successDesc": "Thank you for your interest. Click below to download the complete KLZ product catalog.",
"download": "Download Brochure",
"privacyNote": "By submitting you agree to our privacy policy.",
"close": "Close",
"ctaTitle": "Complete Product Catalog",
"ctaDesc": "All datasheets in one premium PDF — technical specifications, cable solutions & more.",
"ctaButton": "Get Free Brochure"
} }
} }

View File

@@ -102,7 +102,7 @@ export default async function middleware(request: NextRequest) {
export const config = { export const config = {
matcher: [ matcher: [
'/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|xlsx|txt|vcf|xml|webm|mp4|map)$).*)', '/((?!api|_next/static|_next/image|favicon.ico|admin|manifest.webmanifest|.*\\.(?:svg|png|jpg|jpeg|gif|webp|pdf|txt|vcf|xml|webm|mp4|map)$).*)',
'/(de|en)/:path*', '/(de|en)/:path*',
], ],
}; };

2
next-env.d.ts vendored
View File

@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
import "./.next/types/routes.d.ts"; import "./.next/dev/types/routes.d.ts";
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

View File

@@ -7,29 +7,21 @@ import { withPayload } from '@payloadcms/next/withPayload';
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
transpilePackages: ['react-image-crop', '@react-three/fiber'],
onDemandEntries: { onDemandEntries: {
// Keep compiled pages/routes in memory for 5 minutes (reduced from 25m to prevent OOM) // Make sure entries are not disposed too quickly
maxInactiveAge: 5 * 60 * 1000, maxInactiveAge: 60 * 1000,
// Keep up to 2 pages in the dev buffer (reduced from 10 to prevent OOM)
pagesBufferLength: 2,
}, },
experimental: { experimental: {
optimizePackageImports: [ staleTimes: {
'lucide-react', dynamic: 0,
'framer-motion', static: 30,
'@/components/ui', },
'@sentry/nextjs', optimizePackageImports: ['lucide-react', 'framer-motion', '@/components/ui'],
'@payloadcms/richtext-lexical', cpus: 3,
'react-hook-form',
'zod',
'date-fns',
],
workerThreads: false, workerThreads: false,
memoryBasedWorkersCount: true, serverActions: {
}, allowedOrigins: ["*.klz-cables.com", "*.branch.klz-cables.com", "localhost:3000", "klz.localhost"],
serverActions: { },
allowedOrigins: ["*.klz-cables.com", "*.branch.klz-cables.com", "localhost:3000", "klz.localhost"],
}, },
reactStrictMode: false, reactStrictMode: false,
productionBrowserSourceMaps: false, productionBrowserSourceMaps: false,
@@ -39,22 +31,6 @@ const nextConfig = {
}, },
}, },
...(isProd ? { output: 'standalone' } : {}), ...(isProd ? { output: 'standalone' } : {}),
// Prevent webpack from restarting when .env files are touched via Docker volume mount
webpack: (config, { dev }) => {
if (dev) {
config.watchOptions = {
...config.watchOptions,
ignored: /node_modules|\.env/,
// Reduce poll frequency to lower CPU churn from VirtioFS
poll: 1000,
aggregateTimeout: 300,
};
// Reduce source map quality in dev for faster rebuilds
config.devtool = 'eval';
}
return config;
},
// Rewrites moved to bottom merged function
async headers() { async headers() {
const isProd = process.env.NODE_ENV === 'production'; const isProd = process.env.NODE_ENV === 'production';
const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin; const umamiDomain = new URL(process.env.UMAMI_API_ENDPOINT || 'https://analytics.infra.mintel.me').origin;
@@ -77,7 +53,7 @@ const nextConfig = {
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com; font-src 'self' https://fonts.gstatic.com;
img-src 'self' data: blob: ${extraImgDomains}; img-src 'self' data: blob: ${extraImgDomains};
connect-src 'self' ${umamiDomain} ${glitchtipDomain} https://raw.githack.com https://raw.githubusercontent.com; connect-src 'self' ${umamiDomain} ${glitchtipDomain};
frame-src 'self'; frame-src 'self';
object-src 'none'; object-src 'none';
base-uri 'self'; base-uri 'self';
@@ -109,7 +85,7 @@ const nextConfig = {
}, },
{ {
key: 'Strict-Transport-Security', key: 'Strict-Transport-Security',
value: isProd ? 'max-age=63072000; includeSubDomains; preload' : 'max-age=0', value: 'max-age=63072000; includeSubDomains; preload',
}, },
]; ];
@@ -423,7 +399,6 @@ const nextConfig = {
]; ];
}, },
images: { images: {
qualities: [25, 50, 75, 100],
formats: ['image/webp'], formats: ['image/webp'],
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
remotePatterns: [ remotePatterns: [
@@ -456,22 +431,6 @@ const nextConfig = {
async rewrites() { async rewrites() {
return { return {
beforeFiles: [ beforeFiles: [
{
source: '/:locale/datasheets/:path*',
destination: '/api/datasheets/:path*',
},
{
source: '/:locale/brochures/:path*',
destination: '/api/brochures/:path*',
},
{
source: '/datasheets/:path*',
destination: '/api/datasheets/:path*',
},
{
source: '/brochures/:path*',
destination: '/api/brochures/:path*',
},
{ {
source: '/de/produkte', source: '/de/produkte',
destination: '/de/products', destination: '/de/products',
@@ -505,10 +464,6 @@ const nextConfig = {
source: '/en/datenschutz', source: '/en/datenschutz',
destination: '/en/privacy-policy', destination: '/en/privacy-policy',
}, },
{
source: '/en/agbs',
destination: '/en/terms',
},
], ],
afterFiles: [], afterFiles: [],
fallback: [], fallback: [],

View File

@@ -4,26 +4,19 @@
"private": true, "private": true,
"packageManager": "pnpm@10.18.3", "packageManager": "pnpm@10.18.3",
"dependencies": { "dependencies": {
"@ai-sdk/google": "^3.0.31", "@mintel/mail": "^1.8.21",
"@ai-sdk/openai": "^3.0.36", "@mintel/next-config": "^1.8.21",
"@mintel/mail": "^1.9.0", "@mintel/next-feedback": "^1.8.21",
"@mintel/next-config": "^1.9.0", "@mintel/next-utils": "^1.8.21",
"@mintel/next-feedback": "^1.9.0",
"@mintel/next-utils": "^1.9.0",
"@mintel/payload-ai": "^1.9.15",
"@payloadcms/db-postgres": "^3.77.0", "@payloadcms/db-postgres": "^3.77.0",
"@payloadcms/email-nodemailer": "^3.77.0", "@payloadcms/email-nodemailer": "^3.77.0",
"@payloadcms/next": "^3.77.0", "@payloadcms/next": "^3.77.0",
"@payloadcms/richtext-lexical": "^3.77.0", "@payloadcms/richtext-lexical": "^3.77.0",
"@payloadcms/ui": "^3.77.0", "@payloadcms/ui": "^3.77.0",
"@qdrant/js-client-rest": "^1.17.0", "@react-email/components": "^1.0.7",
"@react-email/components": "1.0.8",
"@react-pdf/renderer": "^4.3.2", "@react-pdf/renderer": "^4.3.2",
"@react-three/drei": "^10.7.7",
"@react-three/fiber": "^9.5.0",
"@sentry/nextjs": "^10.39.0", "@sentry/nextjs": "^10.39.0",
"@types/recharts": "^2.0.1", "@types/recharts": "^2.0.1",
"ai": "^6.0.101",
"axios": "^1.13.5", "axios": "^1.13.5",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"framer-motion": "^12.34.0", "framer-motion": "^12.34.0",
@@ -31,7 +24,6 @@
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"i18next": "^25.7.3", "i18next": "^25.7.3",
"import-in-the-middle": "^1.11.0", "import-in-the-middle": "^1.11.0",
"ioredis": "^5.9.3",
"jsdom": "^27.4.0", "jsdom": "^27.4.0",
"leaflet": "^1.9.4", "leaflet": "^1.9.4",
"next": "16.1.6", "next": "16.1.6",
@@ -46,17 +38,13 @@
"react-dom": "^19.2.4", "react-dom": "^19.2.4",
"react-email": "^5.2.5", "react-email": "^5.2.5",
"react-leaflet": "^4.2.1", "react-leaflet": "^4.2.1",
"react-markdown": "^10.1.0",
"recharts": "^3.7.0", "recharts": "^3.7.0",
"rehype-raw": "^7.0.0",
"remark-gfm": "^4.0.1",
"require-in-the-middle": "^8.0.1", "require-in-the-middle": "^8.0.1",
"resend": "^3.5.0", "resend": "^3.5.0",
"schema-dts": "^1.1.5", "schema-dts": "^1.1.5",
"sharp": "^0.34.5", "sharp": "^0.34.5",
"svg-to-pdfkit": "^0.1.8", "svg-to-pdfkit": "^0.1.8",
"tailwind-merge": "^3.4.0", "tailwind-merge": "^3.4.0",
"three": "^0.183.1",
"xlsx": "npm:@e965/xlsx@^0.20.3", "xlsx": "npm:@e965/xlsx@^0.20.3",
"zod": "3.25.76" "zod": "3.25.76"
}, },
@@ -65,8 +53,8 @@
"@commitlint/config-conventional": "^20.4.0", "@commitlint/config-conventional": "^20.4.0",
"@cspell/dict-de-de": "^4.1.2", "@cspell/dict-de-de": "^4.1.2",
"@lhci/cli": "^0.15.1", "@lhci/cli": "^0.15.1",
"@mintel/eslint-config": "^1.9.0", "@mintel/eslint-config": "1.8.21",
"@mintel/tsconfig": "^1.9.0", "@mintel/tsconfig": "^1.8.21",
"@next/bundle-analyzer": "^16.1.6", "@next/bundle-analyzer": "^16.1.6",
"@tailwindcss/cli": "^4.1.18", "@tailwindcss/cli": "^4.1.18",
"@tailwindcss/postcss": "^4.1.18", "@tailwindcss/postcss": "^4.1.18",
@@ -92,7 +80,6 @@
"lint-staged": "^16.2.7", "lint-staged": "^16.2.7",
"lucide-react": "^0.563.0", "lucide-react": "^0.563.0",
"pa11y-ci": "^4.0.1", "pa11y-ci": "^4.0.1",
"pdf-parse": "^2.4.5",
"postcss": "^8.5.6", "postcss": "^8.5.6",
"prettier": "^3.8.1", "prettier": "^3.8.1",
"puppeteer": "^24.37.3", "puppeteer": "^24.37.3",
@@ -102,12 +89,11 @@
"tsx": "^4.21.0", "tsx": "^4.21.0",
"turbo": "^2.8.10", "turbo": "^2.8.10",
"typescript": "^5.7.2", "typescript": "^5.7.2",
"vitest": "^4.0.16", "vitest": "^4.0.16"
"xlsx-cli": "^1.1.3"
}, },
"scripts": { "scripts": {
"dev": "bash -c '[ -f .env ] || (cp .env.example .env && sed -i.bak \"s/TRAEFIK_HOST=klz-cables.com/TRAEFIK_HOST=klz.localhost/\" .env && rm -f .env.bak && echo \"✅ Created .env from .env.example\"); trap \"COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down\" EXIT INT TERM; docker network create infra 2>/dev/null || true && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up klz-app klz-db klz-proxy klz-qdrant klz-redis --remove-orphans'", "dev": "bash -c 'trap \"COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down\" EXIT INT TERM; docker network create infra 2>/dev/null || true && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down && COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up klz-app klz-db --remove-orphans'",
"dev:local": "bash -c 'trap \"COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down\" EXIT INT TERM; COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy klz-qdrant klz-redis && POSTGRES_URI=NODE_ENV=development next dev --webpack --port 3100 --hostname 0.0.0.0'", "dev:local": "bash -c 'trap \"COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml down\" EXIT INT TERM; COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy && POSTGRES_URI=NODE_ENV=development next dev --webpack --port 3100 --hostname 0.0.0.0'",
"dev:infra": "COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy", "dev:infra": "COMPOSE_PROJECT_NAME=klz-2026 docker-compose -f docker-compose.dev.yml up -d klz-db klz-proxy",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
@@ -115,7 +101,6 @@
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"test": "vitest run --passWithNoTests", "test": "vitest run --passWithNoTests",
"test:og": "vitest run tests/og-image.test.ts", "test:og": "vitest run tests/og-image.test.ts",
"test:e2e": "vitest run tests/*.e2e.test.ts",
"check:og": "tsx scripts/check-og-images.ts", "check:og": "tsx scripts/check-og-images.ts",
"check:a11y": "pa11y-ci", "check:a11y": "pa11y-ci",
"check:wcag": "tsx ./scripts/wcag-sitemap.ts", "check:wcag": "tsx ./scripts/wcag-sitemap.ts",
@@ -128,11 +113,9 @@
"check:assets": "tsx ./scripts/check-broken-assets.ts", "check:assets": "tsx ./scripts/check-broken-assets.ts",
"check:forms": "tsx ./scripts/check-forms.ts", "check:forms": "tsx ./scripts/check-forms.ts",
"check:apis": "tsx ./scripts/check-apis.ts", "check:apis": "tsx ./scripts/check-apis.ts",
"pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.tsx", "pdf:datasheets": "tsx ./scripts/generate-pdf-datasheets.ts",
"pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts", "pdf:datasheets:legacy": "tsx ./scripts/generate-pdf-datasheets-pdf-lib.ts",
"excel:datasheets": "tsx ./scripts/generate-excel-datasheets.ts", "cms:migrate": "payload migrate",
"brochure:generate": "tsx ./scripts/generate-brochure.ts",
"cms:migrate": "tsx ./node_modules/payload/bin.js migrate",
"cms:seed": "tsx ./scripts/seed-payload.ts", "cms:seed": "tsx ./scripts/seed-payload.ts",
"assets:push:testing": "bash ./scripts/assets-sync.sh local testing", "assets:push:testing": "bash ./scripts/assets-sync.sh local testing",
"assets:push:staging": "bash ./scripts/assets-sync.sh local staging", "assets:push:staging": "bash ./scripts/assets-sync.sh local staging",
@@ -142,10 +125,6 @@
"assets:pull:prod": "bash ./scripts/assets-sync.sh prod local", "assets:pull:prod": "bash ./scripts/assets-sync.sh prod local",
"assets:sync:testing-to-staging": "bash ./scripts/assets-sync.sh testing staging", "assets:sync:testing-to-staging": "bash ./scripts/assets-sync.sh testing staging",
"assets:sync:staging-to-prod": "bash ./scripts/assets-sync.sh staging prod", "assets:sync:staging-to-prod": "bash ./scripts/assets-sync.sh staging prod",
"qdrant:push:testing": "bash ./scripts/qdrant-sync.sh testing",
"qdrant:push:staging": "bash ./scripts/qdrant-sync.sh staging",
"qdrant:push:prod": "bash ./scripts/qdrant-sync.sh prod",
"qdrant:push:branch": "bash ./scripts/qdrant-sync.sh",
"pagespeed:test": "tsx ./scripts/pagespeed-sitemap.ts", "pagespeed:test": "tsx ./scripts/pagespeed-sitemap.ts",
"pagespeed:audit": "./scripts/audit-local.sh", "pagespeed:audit": "./scripts/audit-local.sh",
"pagespeed:urls": "tsx -e \"import sitemap from './app/sitemap'; sitemap().then(urls => console.log(urls.map(u => u.url).join('\\n')))\"", "pagespeed:urls": "tsx -e \"import sitemap from './app/sitemap'; sitemap().then(urls => console.log(urls.map(u => u.url).join('\\n')))\"",
@@ -160,7 +139,7 @@
"prepare": "husky", "prepare": "husky",
"preinstall": "npx only-allow pnpm" "preinstall": "npx only-allow pnpm"
}, },
"version": "2.2.12", "version": "2.2.13",
"pnpm": { "pnpm": {
"onlyBuiltDependencies": [ "onlyBuiltDependencies": [
"@parcel/watcher", "@parcel/watcher",
@@ -172,9 +151,6 @@
"overrides": { "overrides": {
"next": "16.1.6", "next": "16.1.6",
"minimatch": ">=10.2.2" "minimatch": ">=10.2.2"
},
"patchedDependencies": {
"@mintel/payload-ai@1.9.15": "patches/@mintel__payload-ai@1.9.15.patch"
} }
}, },
"browserslist": [ "browserslist": [

View File

@@ -1,131 +0,0 @@
diff --git a/dist/components/ChatWindow/index.js b/dist/components/ChatWindow/index.js
index 90c65bae4abb78beec98d8308e808e8ba341dcc2..f675dbc69ff82b64438288f53599c93a56391b64 100644
--- a/dist/components/ChatWindow/index.js
+++ b/dist/components/ChatWindow/index.js
@@ -2,7 +2,6 @@
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useChat } from '@ai-sdk/react';
-import './ChatWindow.scss';
export const ChatWindowProvider = ({ children }) => {
return (_jsxs(_Fragment, { children: [children, _jsx(ChatWindow, {})] }));
};
@@ -14,47 +13,63 @@ const ChatWindow = () => {
initialMessages: []
});
// Basic implementation to toggle chat window and submit messages
- return (_jsxs("div", { className: "payload-mcp-chat-container", children: [_jsx("button", { className: "payload-mcp-chat-toggle", onClick: () => setIsOpen(!isOpen), style: {
- position: 'fixed',
- bottom: '20px',
- right: '20px',
- zIndex: 9999,
- padding: '12px 24px',
- backgroundColor: '#000',
- color: '#fff',
- borderRadius: '8px',
- border: 'none',
- cursor: 'pointer',
- fontWeight: 'bold'
- }, children: isOpen ? 'Close AI Chat' : 'Ask AI' }), isOpen && (_jsxs("div", { className: "payload-mcp-chat-window", style: {
- position: 'fixed',
- bottom: '80px',
- right: '20px',
- width: '400px',
- height: '600px',
- backgroundColor: '#fff',
- border: '1px solid #eaeaea',
- borderRadius: '12px',
- zIndex: 9999,
- display: 'flex',
- flexDirection: 'column',
- boxShadow: '0 10px 40px rgba(0,0,0,0.1)'
- }, children: [_jsx("div", { className: "chat-header", style: { padding: '16px', borderBottom: '1px solid #eaeaea', backgroundColor: '#f9f9f9', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, children: _jsx("h3", { style: { margin: 0, fontSize: '16px' }, children: "Payload MCP Chat" }) }), _jsx("div", { className: "chat-messages", style: { flex: 1, padding: '16px', overflowY: 'auto' }, children: messages.map((m) => (_jsx("div", { style: {
- marginBottom: '12px',
- textAlign: m.role === 'user' ? 'right' : 'left'
- }, children: _jsxs("div", { style: {
- display: 'inline-block',
- padding: '8px 12px',
- borderRadius: '8px',
- backgroundColor: m.role === 'user' ? '#000' : '#f0f0f0',
- color: m.role === 'user' ? '#fff' : '#000',
- maxWidth: '80%'
- }, children: [m.role === 'user' ? 'G: ' : 'AI: ', m.content] }) }, m.id))) }), _jsx("form", { onSubmit: handleSubmit, style: { padding: '16px', borderTop: '1px solid #eaeaea' }, children: _jsx("input", { value: input, placeholder: "Ask me anything or use /commands...", onChange: handleInputChange, style: {
- width: '100%',
- padding: '12px',
- borderRadius: '8px',
- border: '1px solid #eaeaea',
- boxSizing: 'border-box'
- } }) })] }))] }));
+ return (_jsxs("div", {
+ className: "payload-mcp-chat-container", children: [_jsx("button", {
+ className: "payload-mcp-chat-toggle", onClick: () => setIsOpen(!isOpen), style: {
+ position: 'fixed',
+ bottom: '20px',
+ right: '20px',
+ zIndex: 9999,
+ padding: '12px 24px',
+ backgroundColor: '#000',
+ color: '#fff',
+ borderRadius: '8px',
+ border: 'none',
+ cursor: 'pointer',
+ fontWeight: 'bold'
+ }, children: isOpen ? 'Close AI Chat' : 'Ask AI'
+ }), isOpen && (_jsxs("div", {
+ className: "payload-mcp-chat-window", style: {
+ position: 'fixed',
+ bottom: '80px',
+ right: '20px',
+ width: '400px',
+ height: '600px',
+ backgroundColor: '#fff',
+ border: '1px solid #eaeaea',
+ borderRadius: '12px',
+ zIndex: 9999,
+ display: 'flex',
+ flexDirection: 'column',
+ boxShadow: '0 10px 40px rgba(0,0,0,0.1)'
+ }, children: [_jsx("div", { className: "chat-header", style: { padding: '16px', borderBottom: '1px solid #eaeaea', backgroundColor: '#f9f9f9', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, children: _jsx("h3", { style: { margin: 0, fontSize: '16px' }, children: "Payload MCP Chat" }) }), _jsx("div", {
+ className: "chat-messages", style: { flex: 1, padding: '16px', overflowY: 'auto' }, children: messages.map((m) => (_jsx("div", {
+ style: {
+ marginBottom: '12px',
+ textAlign: m.role === 'user' ? 'right' : 'left'
+ }, children: _jsxs("div", {
+ style: {
+ display: 'inline-block',
+ padding: '8px 12px',
+ borderRadius: '8px',
+ backgroundColor: m.role === 'user' ? '#000' : '#f0f0f0',
+ color: m.role === 'user' ? '#fff' : '#000',
+ maxWidth: '80%'
+ }, children: [m.role === 'user' ? 'G: ' : 'AI: ', m.content]
+ })
+ }, m.id)))
+ }), _jsx("form", {
+ onSubmit: handleSubmit, style: { padding: '16px', borderTop: '1px solid #eaeaea' }, children: _jsx("input", {
+ value: input, placeholder: "Ask me anything or use /commands...", onChange: handleInputChange, style: {
+ width: '100%',
+ padding: '12px',
+ borderRadius: '8px',
+ border: '1px solid #eaeaea',
+ boxSizing: 'border-box'
+ }
+ })
+ })]
+ }))]
+ }));
};
//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/src/components/ChatWindow/index.tsx b/src/components/ChatWindow/index.tsx
index 9081ae77d4eae53ce660e285c1a6babde99ceaab..f262f1dd0fd1199734024cc27905d956e31900a2 100644
--- a/src/components/ChatWindow/index.tsx
+++ b/src/components/ChatWindow/index.tsx
@@ -2,7 +2,6 @@
import React, { useState } from 'react'
import { useChat } from '@ai-sdk/react'
-import './ChatWindow.scss'
export const ChatWindowProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
return (

View File

@@ -254,7 +254,7 @@ export interface FormSubmission {
id: number; id: number;
name: string; name: string;
email: string; email: string;
type: 'contact' | 'product_quote' | 'brochure_download'; type: 'contact' | 'product_quote';
/** /**
* The specific KLZ product the user requested a quote for. * The specific KLZ product the user requested a quote for.
*/ */
@@ -333,6 +333,14 @@ export interface Page {
layout?: ('default' | 'fullBleed') | null; layout?: ('default' | 'fullBleed') | null;
excerpt?: string | null; excerpt?: string | null;
featuredImage?: (number | null) | Media; featuredImage?: (number | null) | Media;
/**
* If set, visiting this page will immediately redirect the user to this URL (e.g. /de/terms).
*/
redirectUrl?: string | null;
/**
* Check for a permanent (301) redirect. Uncheck for a temporary (302) redirect.
*/
redirectPermanent?: boolean | null;
content: { content: {
root: { root: {
type: string; type: string;
@@ -579,6 +587,8 @@ export interface PagesSelect<T extends boolean = true> {
layout?: T; layout?: T;
excerpt?: T; excerpt?: T;
featuredImage?: T; featuredImage?: T;
redirectUrl?: T;
redirectPermanent?: T;
content?: T; content?: T;
updatedAt?: T; updatedAt?: T;
createdAt?: T; createdAt?: T;

View File

@@ -23,13 +23,6 @@ import { Products } from './src/payload/collections/Products';
import { Pages } from './src/payload/collections/Pages'; import { Pages } from './src/payload/collections/Pages';
import { seedDatabase } from './src/payload/seed'; import { seedDatabase } from './src/payload/seed';
const isMigrate = process.argv.includes('migrate');
let chatPlugin: any = null;
if (!isMigrate) {
const mod = await import('@mintel/payload-ai');
chatPlugin = mod.payloadChatPlugin;
}
const filename = fileURLToPath(import.meta.url); const filename = fileURLToPath(import.meta.url);
const dirname = path.dirname(filename); const dirname = path.dirname(filename);
@@ -78,6 +71,8 @@ export default buildConfig({
}, },
db: postgresAdapter({ db: postgresAdapter({
prodMigrations: migrations, prodMigrations: migrations,
migrationDir:
process.env.NODE_ENV === 'production' ? undefined : path.resolve(dirname, 'src/migrations'),
pool: { pool: {
connectionString: connectionString:
process.env.DATABASE_URI || process.env.DATABASE_URI ||
@@ -105,14 +100,5 @@ export default buildConfig({
}) })
: undefined, : undefined,
sharp, sharp,
plugins: [ plugins: [],
...(chatPlugin
? [
chatPlugin({
enabled: true,
mcpServers: [{ name: 'klz-qdrant-mcp' }],
}),
]
: []),
],
}); });

5406
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

Binary file not shown.

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More