Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aac0529bb6 | |||
| 5006163ddf | |||
| 35fb31249a | |||
| 120ba0488c | |||
| ffb637e05c | |||
| b97de267d9 | |||
| 1c3918d9e3 | |||
| c89933a7d4 | |||
| d67085fef8 | |||
| 85bac72f95 | |||
| b945ba31fb |
@@ -1,7 +1,7 @@
|
||||
FROM node:20-alpine
|
||||
|
||||
# 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++ curl git
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { m } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { m, AnimatePresence } from 'framer-motion';
|
||||
import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { LogoArcs } from '@/components/ui/LogoArcs';
|
||||
|
||||
export interface TeamMember {
|
||||
id: string;
|
||||
@@ -22,11 +25,102 @@ interface TeamGridProps {
|
||||
members: TeamMember[];
|
||||
}
|
||||
|
||||
function hashString(str: string): number {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
hash = (hash << 5) - hash + str.charCodeAt(i);
|
||||
hash |= 0;
|
||||
}
|
||||
return Math.abs(hash);
|
||||
}
|
||||
|
||||
export function getMemberLogoArcsProps(memberId: string) {
|
||||
const hash = hashString(memberId);
|
||||
const rotation = Math.round((hash * 137.5) % 360);
|
||||
const size = 160 + ((hash * 13) % 180); // 160px to 340px
|
||||
const top = -60 + ((hash * 7) % 80); // -60px to 20px
|
||||
const right = (hash % 2 === 0) ? -50 + ((hash * 11) % 70) : undefined;
|
||||
const left = (hash % 2 !== 0) ? -50 + ((hash * 11) % 70) : undefined;
|
||||
const opacity = Number((0.015 + ((hash % 7) * 0.005)).toFixed(3)); // 0.015 to 0.045 (ultra subtle)
|
||||
|
||||
return { rotation, size, top, right, left, opacity };
|
||||
}
|
||||
|
||||
export function TeamGrid({ members }: TeamGridProps) {
|
||||
const t = useTranslations('TeamGrid');
|
||||
const [selectedMember, setSelectedMember] = useState<TeamMember | null>(null);
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [[page, direction], setPage] = useState([0, 0]);
|
||||
|
||||
const selectedIndex = selectedMember ? members.findIndex(m => m.id === selectedMember.id) : -1;
|
||||
const prevMember = selectedIndex !== -1 && members.length > 1 ? members[(selectedIndex - 1 + members.length) % members.length] : null;
|
||||
const nextMember = selectedIndex !== -1 && members.length > 1 ? members[(selectedIndex + 1) % members.length] : null;
|
||||
|
||||
const paginate = (newDirection: number) => {
|
||||
if (newDirection > 0 && nextMember) {
|
||||
setPage([page + 1, newDirection]);
|
||||
setSelectedMember(nextMember);
|
||||
} else if (newDirection < 0 && prevMember) {
|
||||
setPage([page - 1, newDirection]);
|
||||
setSelectedMember(prevMember);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
setSelectedMember(null);
|
||||
} else if (e.key === 'ArrowLeft' && prevMember) {
|
||||
paginate(-1);
|
||||
} else if (e.key === 'ArrowRight' && nextMember) {
|
||||
paginate(1);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
if (selectedMember) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
} else {
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [selectedMember, prevMember, nextMember, page]);
|
||||
|
||||
const handlePreload = (url: string | null) => {
|
||||
if (url && typeof window !== 'undefined') {
|
||||
const img = new window.Image();
|
||||
img.src = url;
|
||||
}
|
||||
};
|
||||
|
||||
if (!members || members.length === 0) return null;
|
||||
|
||||
const slideVariants = {
|
||||
enter: (dir: number) => ({
|
||||
x: dir > 0 ? 350 : dir < 0 ? -350 : 0,
|
||||
opacity: 0,
|
||||
scale: 0.82,
|
||||
}),
|
||||
center: {
|
||||
x: 0,
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
},
|
||||
exit: (dir: number) => ({
|
||||
x: dir < 0 ? 350 : dir > 0 ? -350 : 0,
|
||||
opacity: 0,
|
||||
scale: 0.82,
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-16 md:py-24 lg:py-32 bg-white relative overflow-hidden">
|
||||
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl relative z-10">
|
||||
@@ -39,75 +133,353 @@ export function TeamGrid({ members }: TeamGridProps) {
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-10">
|
||||
{members.map((member, i) => (
|
||||
<m.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
|
||||
>
|
||||
{/* Card Banner */}
|
||||
<div className="h-32 bg-neutral-50 relative border-b border-neutral-100 overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-neutral-100 to-neutral-200/50" />
|
||||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'20\\' viewBox=\\'0 0 20 20\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'1\\' height=\\'1\\' fill=\\'%23000000\\'/%3E%3C/svg%3E')" }} />
|
||||
</div>
|
||||
{members.map((member, i) => {
|
||||
const imageUrl = member.image ? (typeof member.image === 'string' ? member.image : member.image.url) : null;
|
||||
const arcsProps = getMemberLogoArcsProps(member.id);
|
||||
|
||||
<div className="px-8 pb-8 relative flex-grow flex flex-col">
|
||||
{/* Overlapping Profile Picture */}
|
||||
<div className="w-24 h-24 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-12 mb-6 group-hover:-translate-y-2 transition-transform duration-500">
|
||||
{member.image && (typeof member.image === 'string' ? member.image : member.image.url) ? (
|
||||
<Image
|
||||
src={typeof member.image === 'string' ? member.image : member.image.url}
|
||||
alt={member.name}
|
||||
fill
|
||||
sizes="96px"
|
||||
className="object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-neutral-300 bg-neutral-50">
|
||||
<svg className="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
return (
|
||||
<m.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
|
||||
onMouseEnter={() => handlePreload(imageUrl)}
|
||||
onTouchStart={() => handlePreload(imageUrl)}
|
||||
className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
|
||||
>
|
||||
{/* Card Banner with Signature E-TIB LogoArcs Design Element */}
|
||||
<div className="h-44 sm:h-52 md:h-36 bg-neutral-50 relative border-b border-neutral-100 overflow-hidden select-none">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-neutral-100/90 via-neutral-50 to-orange-50/20" />
|
||||
|
||||
{/* Signature E-TIB Logo Arcs Design Element */}
|
||||
<div
|
||||
className="absolute pointer-events-none transition-transform duration-700 group-hover:scale-110 text-primary"
|
||||
style={{
|
||||
width: `${arcsProps.size}px`,
|
||||
height: `${arcsProps.size}px`,
|
||||
top: `${arcsProps.top}px`,
|
||||
right: arcsProps.right !== undefined ? `${arcsProps.right}px` : undefined,
|
||||
left: arcsProps.left !== undefined ? `${arcsProps.left}px` : undefined,
|
||||
transform: `rotate(${arcsProps.rotation}deg)`,
|
||||
opacity: arcsProps.opacity,
|
||||
}}
|
||||
>
|
||||
<LogoArcs className="w-full h-full" />
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.025] pointer-events-none" style={{ backgroundImage: "url('data:image/svg+xml,%3Csvg width=\\'20\\' height=\\'20\\' viewBox=\\'0 0 20 20\\' xmlns=\\'http://www.w3.org/2000/svg\\'%3E%3Crect width=\\'1\\' height=\\'1\\' fill=\\'%23000000\\'/%3E%3C/svg%3E')" }} />
|
||||
</div>
|
||||
|
||||
<div className="px-6 sm:px-8 pb-8 relative flex-grow flex flex-col items-center md:items-start text-center md:text-left">
|
||||
{/* Overlapping Profile Picture (Extra Large Centered on Mobile, Lightbox modal active only on Desktop) */}
|
||||
<m.div
|
||||
layoutId={`team-avatar-${member.id}`}
|
||||
onClick={() => {
|
||||
if (typeof window !== 'undefined' && window.innerWidth >= 768) {
|
||||
setPage([0, 0]);
|
||||
setSelectedMember(member);
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => handlePreload(imageUrl)}
|
||||
onTouchStart={() => handlePreload(imageUrl)}
|
||||
className="w-52 h-64 sm:w-60 sm:h-72 md:w-36 md:h-44 mx-auto md:mx-0 rounded-2xl overflow-hidden border-4 border-white shadow-xl bg-white relative -mt-28 md:-mt-24 mb-6 transition-transform duration-500 cursor-default md:cursor-pointer group/avatar"
|
||||
>
|
||||
{imageUrl ? (
|
||||
<>
|
||||
<Image
|
||||
src={imageUrl}
|
||||
alt={member.name}
|
||||
fill
|
||||
sizes="(max-width: 768px) 300px, 144px"
|
||||
className="object-cover object-[center_15%] transition-transform duration-500 group-hover/avatar:scale-105"
|
||||
/>
|
||||
{/* Zoom Icon Overlay on Hover (Desktop only) */}
|
||||
<div className="hidden md:flex absolute inset-0 bg-black/40 opacity-0 group-hover/avatar:opacity-100 transition-opacity duration-300 items-center justify-center text-white cursor-pointer">
|
||||
<svg className="w-8 h-8 drop-shadow-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="11" y1="8" x2="11" y2="14"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex items-center justify-center text-neutral-300 bg-neutral-50 group-hover/avatar:bg-neutral-100 transition-colors">
|
||||
<svg className="w-16 h-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
<div className="hidden md:flex absolute inset-0 bg-black/30 opacity-0 group-hover/avatar:opacity-100 transition-opacity duration-300 items-center justify-center text-white cursor-pointer">
|
||||
<svg className="w-8 h-8 drop-shadow-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||||
<line x1="11" y1="8" x2="11" y2="14"></line>
|
||||
<line x1="8" y1="11" x2="14" y2="11"></line>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</m.div>
|
||||
|
||||
{/* Details */}
|
||||
<h4 className="font-heading font-extrabold text-2xl text-neutral-dark mb-1 group-hover:text-primary transition-colors duration-300 leading-tight">{member.name}</h4>
|
||||
<p className="text-primary font-bold text-xs uppercase tracking-widest mb-6">{member.position}</p>
|
||||
|
||||
{member.branch && (
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1 bg-neutral-100 text-neutral-600 rounded-md text-xs uppercase tracking-widest font-semibold border border-neutral-200/60">
|
||||
{member.branch === 'e-tib' ? t('branchETIB') : member.branch === 'ing' ? t('branchIng') : member.branch === 'bohrtechnik' ? t('branchBohr') : member.branch}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<h4 className="font-heading font-extrabold text-2xl text-neutral-dark mb-1 group-hover:text-primary transition-colors duration-300 leading-tight">{member.name}</h4>
|
||||
<p className="text-primary font-bold text-xs uppercase tracking-widest mb-6">{member.position}</p>
|
||||
|
||||
{member.branch && (
|
||||
<div className="mb-6">
|
||||
<span className="inline-block px-3 py-1 bg-neutral-100 text-neutral-600 rounded-md text-xs uppercase tracking-widest font-semibold border border-neutral-200/60">
|
||||
{member.branch === 'e-tib' ? t('branchETIB') : member.branch === 'ing' ? t('branchIng') : member.branch === 'bohrtechnik' ? t('branchBohr') : member.branch}
|
||||
</span>
|
||||
{/* Contacts (Sticky at bottom) */}
|
||||
<div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4 w-full text-left">
|
||||
{member.email && (
|
||||
<a href={`mailto:${member.email}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
</div>
|
||||
<span className="truncate">{member.email}</span>
|
||||
</a>
|
||||
)}
|
||||
{member.phone && (
|
||||
<a href={`tel:${member.phone}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium cursor-pointer">
|
||||
<div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
||||
</div>
|
||||
<span>{member.phone}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contacts (Sticky at bottom) */}
|
||||
<div className="mt-auto pt-6 border-t border-neutral-100 flex flex-col gap-4">
|
||||
{member.email && (
|
||||
<a href={`mailto:${member.email}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium">
|
||||
<div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
</div>
|
||||
<span className="truncate">{member.email}</span>
|
||||
</a>
|
||||
)}
|
||||
{member.phone && (
|
||||
<a href={`tel:${member.phone}`} className="group/link flex items-center gap-4 text-text-secondary hover:text-primary transition-colors font-medium">
|
||||
<div className="w-10 h-10 rounded-xl bg-neutral-50 flex items-center justify-center text-neutral-400 group-hover/link:bg-primary/10 group-hover/link:text-primary transition-colors border border-neutral-100">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
||||
</div>
|
||||
<span>{member.phone}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
))}
|
||||
</m.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3D Carousel Lightbox Modal with Neighbor Blurred Preview Cards & React Portal */}
|
||||
{mounted && createPortal(
|
||||
<AnimatePresence>
|
||||
{selectedMember && (
|
||||
<m.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setSelectedMember(null)}
|
||||
className="fixed inset-0 z-[9999] bg-black/85 backdrop-blur-xl flex flex-col items-center justify-center p-4 sm:p-6 md:p-12 overflow-y-auto"
|
||||
>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => setSelectedMember(null)}
|
||||
className="absolute top-4 right-4 sm:top-6 sm:right-6 z-50 w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 hover:bg-white/30 text-white flex items-center justify-center backdrop-blur-md transition-colors cursor-pointer"
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg className="w-5 h-5 sm:w-6 sm:h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Desktop Left Arrow Navigation Button */}
|
||||
{prevMember && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
paginate(-1);
|
||||
}}
|
||||
className="hidden md:flex absolute left-4 md:left-8 z-40 w-12 h-12 rounded-full bg-white/10 hover:bg-white/30 text-white items-center justify-center backdrop-blur-md transition-all duration-300 hover:scale-110 cursor-pointer"
|
||||
aria-label="Previous Team Member"
|
||||
>
|
||||
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<polyline points="15 18 9 12 15 6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Desktop Right Arrow Navigation Button */}
|
||||
{nextMember && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
paginate(1);
|
||||
}}
|
||||
className="hidden md:flex absolute right-4 md:right-8 z-40 w-12 h-12 rounded-full bg-white/10 hover:bg-white/30 text-white items-center justify-center backdrop-blur-md transition-all duration-300 hover:scale-110 cursor-pointer"
|
||||
aria-label="Next Team Member"
|
||||
>
|
||||
<svg className="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
|
||||
<polyline points="9 18 15 12 9 6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* 3D Carousel Stage */}
|
||||
<div className="relative w-full max-w-6xl flex items-center justify-center">
|
||||
{/* Previous Neighbor Card (Blurred Background Left - Desktop only) */}
|
||||
{prevMember && (
|
||||
<m.div
|
||||
key={`prev-${prevMember.id}`}
|
||||
layout
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
paginate(-1);
|
||||
}}
|
||||
className="hidden lg:flex flex-col absolute -left-12 xl:-left-20 w-64 lg:w-72 rounded-3xl overflow-hidden bg-white/10 border border-white/20 backdrop-blur-md opacity-35 hover:opacity-70 scale-90 transition-all duration-500 cursor-pointer z-10 shadow-2xl select-none"
|
||||
>
|
||||
<div className="relative w-full aspect-[3/4] bg-neutral-900 overflow-hidden">
|
||||
{prevMember.image && (
|
||||
<Image
|
||||
src={typeof prevMember.image === 'string' ? prevMember.image : prevMember.image.url}
|
||||
alt={prevMember.name}
|
||||
fill
|
||||
sizes="300px"
|
||||
className="object-cover blur-[2px]"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
|
||||
<div className="absolute bottom-4 left-4 right-4 text-white">
|
||||
<p className="font-heading font-extrabold text-lg truncate">{prevMember.name}</p>
|
||||
<p className="text-neutral-300 text-xs truncate">{prevMember.position}</p>
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
|
||||
{/* Active Main Card with Directional Slide Animation into Center */}
|
||||
<AnimatePresence custom={direction} mode="popLayout">
|
||||
<m.div
|
||||
key={selectedMember.id}
|
||||
custom={direction}
|
||||
variants={slideVariants}
|
||||
initial="enter"
|
||||
animate="center"
|
||||
exit="exit"
|
||||
drag="y"
|
||||
dragConstraints={{ top: 0, bottom: 0 }}
|
||||
dragElastic={0.6}
|
||||
onDragEnd={(_, info) => {
|
||||
if (Math.abs(info.offset.y) > 100 || Math.abs(info.velocity.y) > 500) {
|
||||
setSelectedMember(null);
|
||||
}
|
||||
}}
|
||||
transition={{
|
||||
x: { type: 'spring', stiffness: 300, damping: 30 },
|
||||
opacity: { duration: 0.25 },
|
||||
scale: { duration: 0.25 },
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white rounded-[2rem] sm:rounded-3xl overflow-hidden max-w-[380px] sm:max-w-md md:max-w-lg w-full shadow-2xl border border-white/20 relative flex flex-col z-20 my-auto touch-none cursor-grab active:cursor-grabbing shrink-0"
|
||||
>
|
||||
{/* Mobile Drag Indicator Bar */}
|
||||
<div className="absolute top-3 left-1/2 -translate-x-1/2 z-30 w-12 h-1.5 rounded-full bg-white/50 backdrop-blur-sm pointer-events-none" />
|
||||
|
||||
{/* Portrait Container - Immersive Extra Large Portrait Aspect Framing for Mobile */}
|
||||
<m.div
|
||||
layoutId={`team-avatar-${selectedMember.id}`}
|
||||
className="relative w-full h-[60vh] min-h-[440px] max-h-[620px] md:h-[460px] bg-neutral-900 overflow-hidden shrink-0"
|
||||
>
|
||||
{selectedMember.image ? (
|
||||
<Image
|
||||
src={typeof selectedMember.image === 'string' ? selectedMember.image : selectedMember.image.url}
|
||||
alt={selectedMember.name}
|
||||
fill
|
||||
sizes="(max-width: 768px) 100vw, 600px"
|
||||
className="object-cover object-[center_15%] pointer-events-none select-none"
|
||||
priority
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-neutral-400 bg-neutral-800">
|
||||
<svg className="w-24 h-24 mb-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-transparent to-transparent pointer-events-none" />
|
||||
<div className="absolute bottom-5 left-5 right-5 text-white pointer-events-none">
|
||||
<h3 className="font-heading font-extrabold text-2xl sm:text-3xl drop-shadow-md">{selectedMember.name}</h3>
|
||||
<p className="text-primary-light font-semibold text-xs sm:text-sm uppercase tracking-widest drop-shadow-sm">{selectedMember.position}</p>
|
||||
</div>
|
||||
</m.div>
|
||||
|
||||
{/* Contact Info Footer */}
|
||||
<div className="p-5 sm:p-6 bg-white flex flex-col gap-3">
|
||||
{selectedMember.email && (
|
||||
<a href={`mailto:${selectedMember.email}`} className="flex items-center gap-3 text-neutral-700 hover:text-primary font-medium transition-colors cursor-pointer text-sm sm:text-base">
|
||||
<div className="w-9 h-9 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 shrink-0">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
|
||||
</div>
|
||||
<span className="truncate">{selectedMember.email}</span>
|
||||
</a>
|
||||
)}
|
||||
{selectedMember.phone && (
|
||||
<a href={`tel:${selectedMember.phone}`} className="flex items-center gap-3 text-neutral-700 hover:text-primary font-medium transition-colors cursor-pointer text-sm sm:text-base">
|
||||
<div className="w-9 h-9 rounded-lg bg-neutral-100 flex items-center justify-center text-neutral-500 shrink-0">
|
||||
<svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
||||
</div>
|
||||
<span>{selectedMember.phone}</span>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</m.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Next Neighbor Card (Blurred Background Right - Desktop only) */}
|
||||
{nextMember && (
|
||||
<m.div
|
||||
key={`next-${nextMember.id}`}
|
||||
layout
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
paginate(1);
|
||||
}}
|
||||
className="hidden lg:flex flex-col absolute -right-12 xl:-right-20 w-64 lg:w-72 rounded-3xl overflow-hidden bg-white/10 border border-white/20 backdrop-blur-md opacity-35 hover:opacity-70 scale-90 transition-all duration-500 cursor-pointer z-10 shadow-2xl select-none"
|
||||
>
|
||||
<div className="relative w-full aspect-[3/4] bg-neutral-900 overflow-hidden">
|
||||
{nextMember.image && (
|
||||
<Image
|
||||
src={typeof nextMember.image === 'string' ? nextMember.image : nextMember.image.url}
|
||||
alt={nextMember.name}
|
||||
fill
|
||||
sizes="300px"
|
||||
className="object-cover blur-[2px]"
|
||||
/>
|
||||
)}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" />
|
||||
<div className="absolute bottom-4 left-4 right-4 text-white">
|
||||
<p className="font-heading font-extrabold text-lg truncate">{nextMember.name}</p>
|
||||
<p className="text-neutral-300 text-xs truncate">{nextMember.position}</p>
|
||||
</div>
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Mobile Dedicated Navigation Bar (Bottom) */}
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex md:hidden items-center justify-between w-full max-w-md mt-4 px-4 py-2.5 bg-white/10 backdrop-blur-xl rounded-full border border-white/20 text-white z-40 shrink-0"
|
||||
>
|
||||
<button
|
||||
onClick={() => paginate(-1)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 active:bg-white/40 flex items-center justify-center text-white cursor-pointer"
|
||||
aria-label="Previous"
|
||||
>
|
||||
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||
</button>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-white/90">
|
||||
{selectedIndex + 1} / {members.length}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => paginate(1)}
|
||||
className="w-10 h-10 rounded-full bg-white/20 active:bg-white/40 flex items-center justify-center text-white cursor-pointer"
|
||||
aria-label="Next"
|
||||
>
|
||||
<svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||
</button>
|
||||
</div>
|
||||
</m.div>
|
||||
)}
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ layout: "fullBleed"
|
||||
icon: "hdd",
|
||||
lists: [
|
||||
[
|
||||
"Horizontalspülbohrverfahren (bis 250m)",
|
||||
"Horizontalspülbohrverfahren (bis 400m)",
|
||||
"Horizontalspülbohrverfahren (bis 400er Rohr)",
|
||||
"Erdrakete (bis 15m DÖ-Länge)",
|
||||
"Erdrakete (bis 160er Rohr)"
|
||||
|
||||
@@ -104,7 +104,7 @@ layout: "fullBleed"
|
||||
icon: "hdd",
|
||||
lists: [
|
||||
[
|
||||
"Horizontal directional drilling (up to 250m)",
|
||||
"Horizontal directional drilling (up to 400m)",
|
||||
"Horizontal directional drilling (up to 400mm pipe)",
|
||||
"Earth rocket (up to 15m crossing length)",
|
||||
"Earth rocket (up to 160mm pipe)"
|
||||
|
||||
@@ -34,11 +34,9 @@ services:
|
||||
# Force Garbage Collection before Docker kills the container (OOM)
|
||||
NODE_OPTIONS: "--max-old-space-size=6144"
|
||||
NEXT_TELEMETRY_DISABLED: "1"
|
||||
UV_THREADPOOL_SIZE: "1"
|
||||
RAYON_NUM_THREADS: "1"
|
||||
NEXT_PRIVATE_WORKER_THREADS: "false"
|
||||
NPM_TOKEN: ${NPM_TOKEN:-}
|
||||
CI: "true"
|
||||
HUSKY: "0"
|
||||
WATCHPACK_POLLING: "true"
|
||||
ports:
|
||||
- "3001:3001"
|
||||
@@ -48,7 +46,6 @@ services:
|
||||
- etib_next_cache:/app/.next
|
||||
- etib_turbo_cache:/app/.turbo
|
||||
- etib_pnpm_store:/pnpm
|
||||
- /app/.git
|
||||
- /app/reference
|
||||
- /app/data
|
||||
|
||||
@@ -57,24 +54,13 @@ services:
|
||||
limits:
|
||||
memory: 8G
|
||||
command: >
|
||||
sh -c "pnpm install --no-frozen-lockfile &&
|
||||
while true; do
|
||||
(
|
||||
echo '[warmup] Waiting for Next.js to be reachable...'
|
||||
until curl -sf http://localhost:3001 > /dev/null; do sleep 2; done
|
||||
echo '[warmup] Server is up! Pre-compiling routes...'
|
||||
curl -sf http://localhost:3001/de > /dev/null 2>&1 && echo '[warmup] /de ready'
|
||||
echo '[warmup] All routes pre-compiled ✓'
|
||||
) &
|
||||
pnpm next dev --webpack --hostname 0.0.0.0 --port 3001;
|
||||
echo '[etib-app] next dev exited, restarting in 2s...';
|
||||
sleep 2;
|
||||
done"
|
||||
sh -c "pnpm install --no-frozen-lockfile && pnpm next dev --webpack --hostname 0.0.0.0 --port 3001"
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3001"
|
||||
- "traefik.http.services.${PROJECT_NAME:-etib}-app-svc.loadbalancer.server.port=3001"
|
||||
- "traefik.docker.network=infra"
|
||||
|
||||
|
||||
networks:
|
||||
default:
|
||||
name: ${COMPOSE_PROJECT_NAME:-etib}-dev-internal
|
||||
|
||||
@@ -15,46 +15,47 @@ services:
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
# HTTP ⇒ HTTPS redirect
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-web.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-web.entrypoints=web"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-web.middlewares=redirect-https"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-web.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-web.entrypoints=web"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-web.middlewares=redirect-https"
|
||||
# HTTPS router (Standard)
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.service=${PROJECT_NAME:-klz}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}.middlewares=${AUTH_MIDDLEWARE:-etib-ratelimit,etib-forward,etib-compress}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.rule=${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.service=${PROJECT_NAME:-etib}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}.middlewares=${AUTH_MIDDLEWARE:-etib-ratelimit,etib-forward,etib-compress}"
|
||||
|
||||
# Public Router – paths that bypass Gatekeeper auth (health, SEO, static assets, OG images)
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?(health|login|gatekeeper|uploads|media|assets|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.service=${PROJECT_NAME:-klz}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-public.priority=2000"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?(health|login|gatekeeper|uploads|media|assets|_next|robots\\.txt|manifest\\.webmanifest|sitemap(-[0-9]+)?\\.xml|(.*/)?api/og(/.*)?|(.*/)?opengraph-image.*)`)"
|
||||
|
||||
- "traefik.http.services.${PROJECT_NAME:-klz}-app-svc.loadbalancer.server.port=3000"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.service=${PROJECT_NAME:-etib}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-public.priority=2000"
|
||||
|
||||
- "traefik.http.services.${PROJECT_NAME:-etib}-app-svc.loadbalancer.server.port=3000"
|
||||
- "traefik.docker.network=infra"
|
||||
|
||||
# Middlewares
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-compress.compress=true"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-ratelimit.ratelimit.average=100"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-ratelimit.ratelimit.burst=50"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-compress.compress=true"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-ratelimit.ratelimit.average=100"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-ratelimit.ratelimit.burst=50"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-forward.headers.customrequestheaders.X-Forwarded-Proto=https"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-forward.headers.customrequestheaders.X-Forwarded-Ssl=on"
|
||||
|
||||
# Login redirect – the app's middleware sends users to /login but login lives at /gatekeeper/login
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.regex=^https?://([^/]+)/([a-z]{2}/)?login(.*)"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.replacement=https://$${1}/gatekeeper/login$${3}"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-loginredirect.redirectregex.permanent=false"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?login`)"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.middlewares=${PROJECT_NAME:-klz}-loginredirect"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.service=${PROJECT_NAME:-klz}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-loginredir.priority=2002"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-loginredirect.redirectregex.regex=^https?://([^/]+)/([a-z]{2}/)?login(.*)"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-loginredirect.redirectregex.replacement=https://$${1}/gatekeeper/login$${3}"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-loginredirect.redirectregex.permanent=false"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathRegexp(`^/([a-z]{2}/)?login`)"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.middlewares=${PROJECT_NAME:-etib}-loginredirect"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.service=${PROJECT_NAME:-etib}-app-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-loginredir.priority=2002"
|
||||
|
||||
etib-gatekeeper:
|
||||
profiles: [ "gatekeeper" ]
|
||||
@@ -64,7 +65,7 @@ services:
|
||||
default:
|
||||
infra:
|
||||
aliases:
|
||||
- ${PROJECT_NAME:-klz}-gatekeeper
|
||||
- ${PROJECT_NAME:-etib}-gatekeeper
|
||||
env_file:
|
||||
- ${ENV_FILE:-.env}
|
||||
environment:
|
||||
@@ -73,19 +74,20 @@ services:
|
||||
NODE_ENV: production
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
- "traefik.http.services.${PROJECT_NAME:-klz}-gatekeeper-svc.loadbalancer.server.port=3000"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.address=http://${PROJECT_NAME:-klz}-gatekeeper:3000/gatekeeper/api/verify"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.trustForwardHeader=true"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-klz}-auth.forwardauth.authResponseHeaders=X-Auth-User"
|
||||
- "traefik.http.services.${PROJECT_NAME:-etib}-gatekeeper-svc.loadbalancer.server.port=3000"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-auth.forwardauth.address=http://${PROJECT_NAME:-etib}-gatekeeper:3000/gatekeeper/api/verify"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-auth.forwardauth.trustForwardHeader=true"
|
||||
- "traefik.http.middlewares.${PROJECT_NAME:-etib}-auth.forwardauth.authResponseHeaders=X-Auth-User"
|
||||
- "traefik.docker.network=infra"
|
||||
|
||||
# Gatekeeper Public Router (Login/Auth UI) — basePath mode on main domain
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathPrefix(`/gatekeeper`)"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.service=${PROJECT_NAME:-klz}-gatekeeper-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-klz}-gatekeeper.priority=2001"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.rule=(${TRAEFIK_HOST_RULE:-Host(`${TRAEFIK_HOST:-e-tib.com}`) || Host(`staging.${TRAEFIK_HOST:-e-tib.com}`) || Host(`testing.${TRAEFIK_HOST:-e-tib.com}`)}) && PathPrefix(`/gatekeeper`)"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.entrypoints=${TRAEFIK_ENTRYPOINT:-web}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.tls.certresolver=${TRAEFIK_CERT_RESOLVER:-}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.tls=${TRAEFIK_TLS:-false}"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.service=${PROJECT_NAME:-etib}-gatekeeper-svc"
|
||||
- "traefik.http.routers.${PROJECT_NAME:-etib}-gatekeeper.priority=2001"
|
||||
|
||||
|
||||
etib-db:
|
||||
image: postgres:15-alpine
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
{
|
||||
"name": "e-tib-nextjs",
|
||||
"version": "2.4.58",
|
||||
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"packageManager": "pnpm@10.18.3",
|
||||
@@ -140,7 +142,7 @@
|
||||
"prepare": "husky",
|
||||
"preinstall": "npx only-allow pnpm"
|
||||
},
|
||||
"version": "2.4.47",
|
||||
"version": "2.4.48",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
|
||||
11
proxy.ts
11
proxy.ts
@@ -7,11 +7,12 @@ export default createMiddleware({
|
||||
});
|
||||
|
||||
export const config = {
|
||||
// Match all pathnames except for
|
||||
// Match all pathnames except for:
|
||||
// - /api (API routes)
|
||||
// - /stats (Analytics proxy)
|
||||
// - /_next (Next.js internals)
|
||||
// - /_static (inside /public)
|
||||
// - all root files inside /public (e.g. /favicon.ico)
|
||||
matcher: ['/((?!api|stats|_next|assets|_static|_vercel|[\\w-]+\\.\\w+).*)']
|
||||
// - /_next (Next.js internals & image optimizer)
|
||||
// - /assets, /_static (static files in /public)
|
||||
// - all files with an extension (e.g. /favicon.ico, .JPG, .png, .webp, .svg)
|
||||
matcher: ['/((?!api|stats|_next|assets|_static|_vercel|.*\\..*).*)']
|
||||
};
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 109 KiB |
@@ -31,22 +31,23 @@ fi
|
||||
get_media_path() {
|
||||
case "$1" in
|
||||
local) echo "$LOCAL_MEDIA_DIR" ;;
|
||||
testing) echo "/var/lib/docker/volumes/klz-testing_klz_media_data/_data" ;;
|
||||
staging) echo "/var/lib/docker/volumes/klz-staging_klz_media_data/_data" ;;
|
||||
prod|production) echo "/var/lib/docker/volumes/klz-cablescom_klz_media_data/_data" ;;
|
||||
testing) echo "/var/lib/docker/volumes/etib-testing_etib_media_data/_data" ;;
|
||||
staging) echo "/var/lib/docker/volumes/etib-staging_etib_media_data/_data" ;;
|
||||
prod|production) echo "/var/lib/docker/volumes/e-tibcom_etib_media_data/_data" ;;
|
||||
*) echo "❌ Unknown environment: $1"; exit 1 ;;
|
||||
esac
|
||||
}
|
||||
|
||||
get_app_container() {
|
||||
case "$1" in
|
||||
testing) echo "klz-testing-klz-app-1" ;;
|
||||
staging) echo "klz-staging-klz-app-1" ;;
|
||||
prod|production) echo "klz-cablescom-klz-app-1" ;;
|
||||
testing) echo "etib-testing-etib-app-1" ;;
|
||||
staging) echo "etib-staging-etib-app-1" ;;
|
||||
prod|production) echo "e-tibcom-etib-app-1" ;;
|
||||
*) echo "" ;;
|
||||
esac
|
||||
}
|
||||
|
||||
|
||||
SRC_PATH=$(get_media_path "$SOURCE_ENV")
|
||||
TGT_PATH=$(get_media_path "$TARGET_ENV")
|
||||
TGT_CONTAINER=$(get_app_container "$TARGET_ENV")
|
||||
|
||||
@@ -15,7 +15,8 @@ export NEXT_PUBLIC_CI=true
|
||||
export CI=true
|
||||
|
||||
docker network create infra 2>/dev/null || true
|
||||
docker volume create klz_db_data 2>/dev/null || true
|
||||
docker volume create etib_db_data 2>/dev/null || true
|
||||
|
||||
|
||||
# 2. Start infra services (DB, CMS, Gatekeeper)
|
||||
echo "📦 Starting infrastructure services..."
|
||||
|
||||
@@ -7,7 +7,8 @@ const targetUrl =
|
||||
process.env.NEXT_PUBLIC_BASE_URL ||
|
||||
'http://localhost:3000';
|
||||
const limit = process.env.ASSET_CHECK_LIMIT ? parseInt(process.env.ASSET_CHECK_LIMIT) : 20;
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting Strict Asset Integrity Check for: ${targetUrl}`);
|
||||
@@ -20,9 +21,10 @@ async function main() {
|
||||
try {
|
||||
console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
});
|
||||
|
||||
|
||||
const $ = cheerio.load(response.data, { xmlMode: true });
|
||||
urls = $('url loc')
|
||||
.map((i, el) => $(el).text())
|
||||
@@ -64,7 +66,7 @@ async function main() {
|
||||
|
||||
// Inject Gatekeeper session bypassing auth screens
|
||||
await page.setCookie({
|
||||
name: 'klz_gatekeeper_session',
|
||||
name: authCookieName,
|
||||
value: gatekeeperPassword,
|
||||
domain: new URL(targetUrl).hostname,
|
||||
path: '/',
|
||||
|
||||
@@ -3,7 +3,8 @@ import axios from 'axios';
|
||||
import * as cheerio from 'cheerio';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
// Utility for hardcoded delays
|
||||
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
@@ -20,7 +21,7 @@ async function main() {
|
||||
while (Date.now() - startTime < maxWaitMs) {
|
||||
try {
|
||||
const resp = await axios.get(targetUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
timeout: 5000,
|
||||
validateStatus: (s) => s === 200,
|
||||
});
|
||||
@@ -50,7 +51,7 @@ async function main() {
|
||||
try {
|
||||
console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
});
|
||||
|
||||
const $ = cheerio.load(response.data, { xmlMode: true });
|
||||
|
||||
@@ -5,7 +5,8 @@ import * as path from 'path';
|
||||
import { execSync } from 'child_process';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting HTML Validation for: ${targetUrl}`);
|
||||
@@ -16,10 +17,11 @@ async function main() {
|
||||
console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
|
||||
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
validateStatus: (status) => status < 400,
|
||||
});
|
||||
|
||||
|
||||
const $ = cheerio.load(response.data, { xmlMode: true });
|
||||
let urls = $('url loc')
|
||||
.map((i, el) => $(el).text())
|
||||
@@ -47,10 +49,11 @@ async function main() {
|
||||
const u = urls[i];
|
||||
try {
|
||||
const res = await axios.get(u, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
validateStatus: (status) => status < 400,
|
||||
});
|
||||
|
||||
|
||||
// Generate a safe filename that retains URL information
|
||||
const urlStr = new URL(u);
|
||||
const safePath = (urlStr.pathname + urlStr.search).replace(/[^a-zA-Z0-9]/g, '_');
|
||||
|
||||
@@ -2,7 +2,8 @@ import axios from 'axios';
|
||||
import * as cheerio from 'cheerio';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting HTTP Sitemap Validation for: ${targetUrl}\n`);
|
||||
@@ -12,10 +13,11 @@ async function main() {
|
||||
console.log(`📥 Fetching sitemap from ${sitemapUrl}...`);
|
||||
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
validateStatus: (status) => status < 400,
|
||||
});
|
||||
|
||||
|
||||
const $ = cheerio.load(response.data, { xmlMode: true });
|
||||
let urls = $('url loc')
|
||||
.map((i, el) => $(el).text())
|
||||
@@ -42,10 +44,11 @@ async function main() {
|
||||
const u = urls[i];
|
||||
try {
|
||||
const res = await axios.get(u, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
validateStatus: null, // Don't throw on error status
|
||||
});
|
||||
|
||||
|
||||
if (res.status >= 400) {
|
||||
console.error(`❌ ERROR ${res.status}: ${res.statusText} -> ${u}`);
|
||||
hasErrors = true;
|
||||
|
||||
@@ -12,7 +12,8 @@ import * as cheerio from 'cheerio';
|
||||
*/
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
// Expected slug translations: German key → English value
|
||||
const SLUG_MAP: Record<string, string> = {
|
||||
@@ -32,7 +33,8 @@ const REVERSE_SLUG_MAP: Record<string, string> = Object.fromEntries(
|
||||
Object.entries(SLUG_MAP).map(([de, en]) => [en, de]),
|
||||
);
|
||||
|
||||
const headers = { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` };
|
||||
const headers = { Cookie: `${authCookieName}=${gatekeeperPassword}` };
|
||||
|
||||
|
||||
function getExpectedTranslation(
|
||||
sourcePath: string,
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
const requiredHeaders = [
|
||||
'strict-transport-security',
|
||||
@@ -15,10 +16,11 @@ async function main() {
|
||||
console.log(`\n🛡️ Starting Security Headers Scan for: ${targetUrl}\n`);
|
||||
try {
|
||||
const response = await axios.head(targetUrl, {
|
||||
headers: { Cookie: `klz_gatekeeper_session=${gatekeeperPassword}` },
|
||||
headers: { Cookie: `${authCookieName}=${gatekeeperPassword}` },
|
||||
validateStatus: () => true,
|
||||
});
|
||||
|
||||
|
||||
const headers = response.headers;
|
||||
let allPassed = true;
|
||||
|
||||
|
||||
@@ -7,9 +7,10 @@ module.exports = async (browser, context) => {
|
||||
// Using LHCI_URL or TARGET_URL if available
|
||||
const targetUrl =
|
||||
process.env.LHCI_URL || process.env.TARGET_URL || 'https://testing.e-tib.com';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
|
||||
console.log(`🔑 LHCI Auth: Setting gatekeeper cookie (${authCookieName}) for ${new URL(targetUrl).hostname}...`);
|
||||
|
||||
await page.setCookie({
|
||||
|
||||
@@ -18,9 +18,10 @@ const targetUrl =
|
||||
process.env.LHCI_URL ||
|
||||
'http://localhost:3000';
|
||||
const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20; // Default limit to avoid infinite runs
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting PageSpeed test for: ${targetUrl}`);
|
||||
console.log(`📊 Limit: ${limit} pages\n`);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import puppeteer from 'puppeteer';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
|
||||
|
||||
async function run() {
|
||||
console.log(`🚀 Smoke Test: ${targetUrl}`);
|
||||
|
||||
@@ -14,7 +14,8 @@ import * as path from 'path';
|
||||
|
||||
const targetUrl = process.argv[2] || process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000';
|
||||
const limit = process.env.PAGESPEED_LIMIT ? parseInt(process.env.PAGESPEED_LIMIT) : 20;
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'klz2026';
|
||||
const gatekeeperPassword = process.env.GATEKEEPER_PASSWORD || 'etib2026';
|
||||
const authCookieName = process.env.AUTH_COOKIE_NAME || 'etib_gatekeeper_session';
|
||||
|
||||
async function main() {
|
||||
console.log(`\n🚀 Starting WCAG Audit for: ${targetUrl}`);
|
||||
@@ -27,11 +28,12 @@ async function main() {
|
||||
|
||||
const response = await axios.get(sitemapUrl, {
|
||||
headers: {
|
||||
Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
|
||||
Cookie: `${authCookieName}=${gatekeeperPassword}`,
|
||||
},
|
||||
validateStatus: (status) => status < 400,
|
||||
});
|
||||
|
||||
|
||||
const $ = cheerio.load(response.data, { xmlMode: true });
|
||||
let urls = $('url loc')
|
||||
.map((i, el) => $(el).text())
|
||||
@@ -92,8 +94,9 @@ async function main() {
|
||||
],
|
||||
},
|
||||
headers: {
|
||||
Cookie: `klz_gatekeeper_session=${gatekeeperPassword}`,
|
||||
Cookie: `${authCookieName}=${gatekeeperPassword}`,
|
||||
},
|
||||
|
||||
timeout: 60000, // Increase timeout for slower pages
|
||||
},
|
||||
urls: urls,
|
||||
|
||||
15
tests/docker-config.test.ts
Normal file
15
tests/docker-config.test.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
|
||||
describe('Docker Configuration Project Name Integrity', () => {
|
||||
it('ensures docker-compose.yml has no legacy klz project fallbacks', () => {
|
||||
const composeContent = fs.readFileSync(path.resolve(process.cwd(), 'docker-compose.yml'), 'utf-8');
|
||||
expect(composeContent).not.toContain('klz');
|
||||
});
|
||||
|
||||
it('ensures docker-compose.dev.yml has no legacy klz project fallbacks', () => {
|
||||
const devComposeContent = fs.readFileSync(path.resolve(process.cwd(), 'docker-compose.dev.yml'), 'utf-8');
|
||||
expect(devComposeContent).not.toContain('klz');
|
||||
});
|
||||
});
|
||||
21
tests/proxy-config.test.ts
Normal file
21
tests/proxy-config.test.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { config } from '../proxy';
|
||||
|
||||
describe('Proxy Middleware Config Matcher', () => {
|
||||
const matcherRegex = new RegExp(`^${config.matcher[0]}`);
|
||||
|
||||
|
||||
it('matches localized page routes for next-intl processing', () => {
|
||||
expect(matcherRegex.test('/de')).toBe(true);
|
||||
expect(matcherRegex.test('/en/contact')).toBe(true);
|
||||
expect(matcherRegex.test('/karriere')).toBe(true);
|
||||
});
|
||||
|
||||
it('excludes static assets with any file extension including uppercase .JPG and subdirectories', () => {
|
||||
// These should NOT match the middleware (expect test to be false so middleware is bypassed)
|
||||
expect(matcherRegex.test('/assets/photos/DJI_0048.JPG')).toBe(false);
|
||||
expect(matcherRegex.test('/assets/videos/web/hero-kabelpflug-poster.jpg')).toBe(false);
|
||||
expect(matcherRegex.test('/assets/logo-white.png')).toBe(false);
|
||||
expect(matcherRegex.test('/_next/image')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,61 +0,0 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
|
||||
describe('Team Images and Team Page Content', () => {
|
||||
const publicTeamPhotosDir = path.join(process.cwd(), 'public', 'assets', 'photos', 'team');
|
||||
const publicPhotosDir = path.join(process.cwd(), 'public', 'assets', 'photos');
|
||||
const deTeamPath = path.join(process.cwd(), 'content', 'de', 'team.mdx');
|
||||
const enTeamPath = path.join(process.cwd(), 'content', 'en', 'team.mdx');
|
||||
|
||||
it('should verify all required team photos exist in public/assets/photos/team/', () => {
|
||||
const requiredMemberImages = [
|
||||
'danny.jpg',
|
||||
'dirk.jpg',
|
||||
'kathrin.jpg',
|
||||
'katrin-heigold.jpg',
|
||||
'maik.jpg',
|
||||
'martin.jpg',
|
||||
'oliver.jpg',
|
||||
'sven.jpg',
|
||||
];
|
||||
|
||||
for (const imgName of requiredMemberImages) {
|
||||
const imgPath = path.join(publicTeamPhotosDir, imgName);
|
||||
expect(fs.existsSync(imgPath), `Expected image ${imgName} to exist`).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it('should verify team group photo exists in public/assets/photos/', () => {
|
||||
const groupPhotoPath = path.join(publicPhotosDir, 'E-TIB_Gruppenfoto.jpg');
|
||||
expect(fs.existsSync(groupPhotoPath), 'Expected E-TIB_Gruppenfoto.jpg to exist').toBe(true);
|
||||
});
|
||||
|
||||
it('should verify DE and EN team.mdx use E-TIB_Gruppenfoto.jpg in HeroSection', () => {
|
||||
const deContent = fs.readFileSync(deTeamPath, 'utf8');
|
||||
const enContent = fs.readFileSync(enTeamPath, 'utf8');
|
||||
|
||||
expect(deContent).toContain("url: '/assets/photos/E-TIB_Gruppenfoto.jpg'");
|
||||
expect(enContent).toContain("url: '/assets/photos/E-TIB_Gruppenfoto.jpg'");
|
||||
});
|
||||
|
||||
it('should verify Frau Joseph (Kerstin Joseph) has no image property in team.mdx', () => {
|
||||
const deContent = fs.readFileSync(deTeamPath, 'utf8');
|
||||
const enContent = fs.readFileSync(enTeamPath, 'utf8');
|
||||
|
||||
// Parse kerstin-joseph block and ensure no image line exists for kerstin-joseph
|
||||
const deKerstinBlock = deContent.match(/id:\s*"kerstin-joseph"[\s\S]*?\}/)?.[0] || '';
|
||||
const enKerstinBlock = enContent.match(/id:\s*"kerstin-joseph"[\s\S]*?\}/)?.[0] || '';
|
||||
|
||||
expect(deKerstinBlock).not.toContain('image:');
|
||||
expect(enKerstinBlock).not.toContain('image:');
|
||||
});
|
||||
|
||||
it('should verify Katrin Heigold has image set in team.mdx', () => {
|
||||
const deContent = fs.readFileSync(deTeamPath, 'utf8');
|
||||
const enContent = fs.readFileSync(enTeamPath, 'utf8');
|
||||
|
||||
expect(deContent).toContain('/assets/photos/team/katrin-heigold.jpg');
|
||||
expect(enContent).toContain('/assets/photos/team/katrin-heigold.jpg');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user