99 lines
3.4 KiB
JavaScript
99 lines
3.4 KiB
JavaScript
import { motion } from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
import { supabase } from '../lib/supabase';
|
|
|
|
// Funktion zur Validierung von Bildpfaden
|
|
const isValidImagePath = (imagePath) => {
|
|
if (!imagePath || typeof imagePath !== 'string') return false;
|
|
return imagePath.startsWith('/') || imagePath.startsWith('http://') || imagePath.startsWith('https://');
|
|
};
|
|
|
|
export default function DevLog({ devlogData }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h1 className="text-4xl font-bold mb-6">Entwicklungs-Log</h1>
|
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
|
Verfolgen Sie die neuesten Updates und Fortschritte unserer Projekte.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{devlogData && devlogData.map((log, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 0.2 }}
|
|
className="relative p-8 bg-white before:content-[''] before:absolute before:top-0 before:left-0 before:w-8 before:h-8 before:border-t-2 before:border-l-2 before:border-pb-turquoise after:content-[''] after:absolute after:bottom-0 after:right-0 after:w-8 after:h-8 after:border-b-2 after:border-r-2 after:border-pb-turquoise"
|
|
>
|
|
{log.image && isValidImagePath(log.image) && (
|
|
<div className="relative w-full h-48 mb-4 overflow-hidden">
|
|
<Image
|
|
src={log.image}
|
|
alt={log.title}
|
|
fill
|
|
priority={index < 2}
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
<Link href={`/blog/${log.slug}`} legacyBehavior>
|
|
<a className="block group">
|
|
<h3 className="text-xl font-bold mb-2 group-hover:text-pb-turquoise transition-colors">{log.title}</h3>
|
|
<p className="text-gray-600 mb-4">{log.date}</p>
|
|
<p className="text-gray-600 mb-4">{log.description}</p>
|
|
<span className="text-pb-turquoise group-hover:underline">Mehr erfahren</span>
|
|
</a>
|
|
</Link>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</motion.div>
|
|
);
|
|
}
|
|
|
|
export async function getServerSideProps() {
|
|
try {
|
|
const { data: devlogData, error } = await supabase
|
|
.from('devlog_entries')
|
|
.select('*')
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
console.error('Error fetching devlog data:', error);
|
|
return {
|
|
props: {
|
|
devlogData: []
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
props: {
|
|
devlogData: devlogData || []
|
|
}
|
|
};
|
|
} catch (error) {
|
|
console.error('Error in getServerSideProps:', error);
|
|
return {
|
|
props: {
|
|
devlogData: []
|
|
}
|
|
};
|
|
}
|
|
}
|