Update site content and structure, including localization adjustments for addresses, removal of unused files, and enhancements to the layout and styling for better user experience.

2025-07-24 19:18:12 +02:00
parent 37a6e0ab31
commit 32301a18e9
60 changed files with 667 additions and 229 deletions
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -1,28 +1,70 @@
 ---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import Header from '../../components/Header.astro';
+import Footer from '../../components/Footer.astro';
+import { getBlogPostBySlug, getBlogPosts } from '../../utils/directus';
+import { useTranslations } from '../../utils/i18n';
+
 export async function getStaticPaths() {
-  // Get all blog posts to create redirects
-  const { getBlogPosts } = await import('../../utils/directus');
  const posts = await getBlogPosts();
  
  return posts
    .filter((post) => typeof post.slug === 'string' && post.slug.trim() !== '')
    .map((post) => ({
      params: { slug: post.slug },
-      props: { slug: post.slug },
+      props: { post },
    }));
 }

-const { slug } = Astro.props;
+const { post } = Astro.props;
+const t = await useTranslations('en');
 ---
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Redirecting...</title>
-  <meta http-equiv="refresh" content="0;url=/en/blog/{slug}">
-  <link rel="canonical" href="/en/blog/{slug}">
-</head>
-<body>
-  <p>Redirecting to <a href="/en/blog/{slug}">blog post</a>...</p>
-</body>
-</html> 
+
+<BaseLayout title={`${post.title} | ${t('blog.title')}`} description={post.content.replace(/<[^>]+>/g, '').substring(0, 160)}>
+  <Header />
+  
+  <main class="flex-1">
+    <!-- Hero Section -->
+    <section class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 py-20">
+      <div class="container-custom">
+        <div class="max-w-4xl mx-auto">
+          <nav class="mb-6">
+            <a href="/en/blog" class="text-primary hover:underline flex items-center">
+              ← {t('blog.backToBlog')}
+            </a>
+          </nav>
+          <header class="text-center">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
+              {post.title}
+            </h1>
+            <p class="text-xl text-gray-600 dark:text-gray-300">
+              {new Date(post.date_created).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric'
+              })}
+            </p>
+          </header>
+        </div>
+      </div>
+    </section>
+
+    <!-- Article Content -->
+    <section class="py-16">
+      <div class="container-custom">
+        <article class="max-w-4xl mx-auto">
+          <div class="prose prose-lg dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-primary prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded" set:html={post.content}></div>
+          
+          <!-- Back to Blog Button -->
+          <div class="mt-12 pt-8 border-t border-border text-center">
+            <a href="/en/blog" class="btn btn-primary">
+              ← {t('blog.backToBlog')}
+            </a>
+          </div>
+        </article>
+      </div>
+    </section>
+  </main>
+
+  <Footer />
+</BaseLayout>