fix: resolve project 404s with Directus fallback and upgrade 404 page

Merged Directus and PostgreSQL project data, implemented single project fetch from CMS, and modernized the NotFound component with liquid design.
2026-02-15 22:47:25 +01:00
parent 6998a0e7a1
commit cc8fff14d2
7 changed files with 370 additions and 237 deletions
@@ -659,3 +659,112 @@ export async function getProjects(
    return null;
  }
 }
+
+/**
+ * Get a single project by slug from Directus
+ */
+export async function getProjectBySlug(
+  slug: string,
+  locale: string
+): Promise<Project | null> {
+  const directusLocale = toDirectusLocale(locale);
+
+  const query = `
+    query {
+      projects(
+        filter: { 
+          _and: [
+            { slug: { _eq: "${slug}" } },
+            { status: { _eq: "published" } }
+          ]
+        }
+        limit: 1
+      ) {
+        id
+        slug
+        category
+        difficulty
+        tags
+        technologies
+        challenges
+        lessons_learned
+        future_improvements
+        github
+        live
+        image_url
+        demo_video
+        date_created
+        date_updated
+        featured
+        status
+        translations {
+          title
+          description
+          content
+          meta_description
+          keywords
+          languages_code { code }
+        }
+      }
+    }
+  `;
+
+  try {
+    const result = await directusRequest(
+      '',
+      { body: { query } }
+    );
+
+    const projects = (result as any)?.projects;
+    if (!projects || projects.length === 0) {
+      return null;
+    }
+
+    const proj = projects[0];
+    const trans =
+      proj.translations?.find((t: any) => t.languages_code?.code === directusLocale) ||
+      proj.translations?.[0] ||
+      {};
+    
+    // Parse JSON string fields if needed
+    const parseTags = (tags: any) => {
+      if (!tags) return [];
+      if (Array.isArray(tags)) return tags;
+      if (typeof tags === 'string') {
+        try {
+          return JSON.parse(tags);
+        } catch {
+          return [];
+        }
+      }
+      return [];
+    };
+    
+    return {
+      id: proj.id,
+      slug: proj.slug,
+      title: trans.title || proj.slug,
+      description: trans.description || '',
+      content: trans.content,
+      category: proj.category,
+      difficulty: proj.difficulty,
+      tags: parseTags(proj.tags),
+      technologies: parseTags(proj.technologies),
+      challenges: proj.challenges,
+      lessons_learned: proj.lessons_learned,
+      future_improvements: proj.future_improvements,
+      github_url: proj.github,
+      live_url: proj.live,
+      image_url: proj.image_url,
+      demo_video_url: proj.demo_video,
+      screenshots: parseTags(proj.screenshots),
+      featured: proj.featured === 1 || proj.featured === true,
+      published: proj.status === 'published',
+      created_at: proj.date_created,
+      updated_at: proj.date_updated
+    };
+  } catch (error) {
+    console.error(`Failed to fetch project by slug ${slug} (${locale}):`, error);
+    return null;
+  }
+}