chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
2026-02-05 14:18:51 +01:00
parent 190720ad92
commit 103d71851c
1029 changed files with 13242 additions and 27898 deletions
--- a/apps/web/src/components/BlogPostClient.tsx
+++ b/apps/web/src/components/BlogPostClient.tsx
@@ -0,0 +1,131 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface BlogPostClientProps {
+  readingTime: number;
+  title: string;
+}
+
+export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, title }) => {
+  const router = useRouter();
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 100);
+      
+      // Update progress bar
+      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      const scrolled = (winScroll / height);
+      const progressBar = document.querySelector('.reading-progress-bar') as HTMLElement;
+      if (progressBar) {
+        progressBar.style.transform = `scaleX(${scrolled})`;
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const handleBack = () => {
+    // Lovely exit animation
+    const content = document.getElementById('post-content');
+    if (content) {
+      content.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
+      content.style.opacity = '0';
+      content.style.transform = 'translateY(20px) scale(0.98)';
+    }
+    
+    const topNav = document.getElementById('top-nav');
+    if (topNav) {
+      topNav.style.transition = 'opacity 0.4s ease-out';
+      topNav.style.opacity = '0';
+    }
+    
+    const overlay = document.createElement('div');
+    overlay.className = 'fixed inset-0 bg-gradient-to-br from-white via-slate-50 to-white z-[100] opacity-0 transition-opacity duration-500';
+    document.body.appendChild(overlay);
+    
+    setTimeout(() => {
+      overlay.style.opacity = '1';
+    }, 100);
+    
+    setTimeout(() => {
+      router.push('/blog?from=post');
+    }, 500);
+  };
+
+  const handleShare = async () => {
+    const url = window.location.href;
+    if (navigator.share) {
+      try {
+        await navigator.share({ title, url });
+      } catch (err) {
+        console.error('Share failed:', err);
+      }
+    } else {
+      // Fallback: copy to clipboard
+      try {
+        await navigator.clipboard.writeText(url);
+        alert('Link copied to clipboard!');
+      } catch (err) {
+        console.error('Copy failed:', err);
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="reading-progress-bar" />
+      <nav
+        id="top-nav"
+        className={`fixed top-0 left-0 right-0 z-40 border-b border-slate-200 transition-all duration-300 ${
+          isScrolled ? 'bg-white/95 backdrop-blur-md' : 'bg-white/80 backdrop-blur-sm'
+        }`}
+      >
+        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
+          <button
+            onClick={handleBack}
+            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 group"
+            aria-label="Back to home"
+          >
+            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+            </svg>
+            <span className="font-bold uppercase tracking-widest text-xs">Zurück</span>
+          </button>
+          
+          <div className="flex items-center gap-3">
+            <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400 hidden sm:inline">
+              {readingTime} min read
+            </span>
+            <button
+              onClick={handleShare}
+              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
+              aria-label="Share this post"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </nav>
+
+      <div className="mt-16 pt-8 border-t border-slate-50 text-center">
+        <button
+          onClick={handleBack}
+          className="btn btn-primary group"
+        >
+          <svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+          </svg>
+          Alle Beiträge
+        </button>
+      </div>
+    </>
+  );
+};