adding the article suggestion at the end of the blog post

app/[locale]/blog/[slug]/_components/OtherArticles.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { useTranslations } from "next-intl";
+
+type props = {
+    locale: string;
+    articles: {
+        slug: string;
+        title: string;
+        description: string;
+        cover?: string;
+    }[];
+};
+
+export function OtherArticles({ locale, articles }: props) {
+    const ref = useRef<HTMLElement>(null);
+    const t = useTranslations('blogPage.otherArticles');
+
+    useEffect(() => {
+        const el = ref.current;
+        if (!el) return;
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    el.querySelectorAll('.reveal').forEach((node, i) => {
+                        setTimeout(() => node.classList.add('visible'), i * 120);
+                    });
+                    observer.unobserve(el);
+                }
+            },
+            { threshold: 0.1 }
+        );
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+
+    if (!articles.length) return null;
+
+    return (
+        <section ref={ref} className="pt-6 pb-20">
+            {/* Divider */}
+            <div className="w-full h-px bg-brand-brown/10 mb-14" />
+
+            {/* Label */}
+            <div className="flex items-center gap-3 mb-6">
+                <span className="w-6 h-px bg-brand-brown/40" />
+                <span className="font-sans text-[10px] uppercase tracking-[0.2em] text-brand-brown/40">
+                    {t('sectionLabel')}
+                </span>
+            </div>
+
+            <h2 className="reveal font-serif text-[clamp(48px,6vw,80px)] leading-none text-brand-brown mb-12">
+                {t('title')}
+            </h2>
+
+            <div className="grid gap-6 md:grid-cols-2">
+                {articles.map((article, i) => (
+                    <Link
+                        key={article.slug}
+                        href={`/${locale}/blog/${article.slug}`}
+                        className="reveal group block cursor-pointer"
+                        style={{ transitionDelay: `${i * 100}ms` }}
+                    >
+                        {/* Image */}
+                        <div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
+                            {article.cover && (
+                                <img
+                                    src={article.cover}
+                                    alt={article.title}
+                                    className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
+                                />
+                            )}
+                        </div>
+
+                        {/* Text */}
+                        <div className="flex items-start justify-between gap-4">
+                            <div>
+                                <h3 className="font-serif text-2xl text-brand-brown uppercase mb-1.5">
+                                    {article.title}
+                                </h3>
+                                <p className="font-sans text-sm text-brand-brown/55 leading-relaxed">
+                                    {article.description}
+                                </p>
+                            </div>
+                            <svg
+                                className="w-5 h-5 text-brand-brown/30 flex-shrink-0 mt-1 group-hover:translate-x-1 group-hover:text-brand-brown/60 transition-all duration-200"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                                aria-hidden="true"
+                            >
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                            </svg>
+                        </div>
+                    </Link>
+                ))}
+            </div>
+        </section>
+    );
+}

app/[locale]/blog/[slug]/page.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
-import { getArticleBySlug, getAllArticles, getAlternatesArticle } from "@/lib/blog/get-articles";
+import { getArticleBySlug, getAllArticles, getAlternatesArticle, getRandomOtherArticles } from "@/lib/blog/get-articles";
 import { ArticleHero } from "@/app/[locale]/blog/[slug]/_components/ArticleHero";
 import { ArticleSummary } from "@/app/[locale]/blog/[slug]/_components/ArticleSummary";
+import { OtherArticles } from "@/app/[locale]/blog/[slug]/_components/OtherArticles";
 import { locales } from "@/middleware";
 import Link from "next/link";
 import { MermaidDiagram } from "@/components/mdx/MermaidDiagram";
@@ -144,6 +145,13 @@ export default async function ArticlePage({ params }: props) {
 
     const articleUrl = `${siteUrl}/${locale}/blog/${slug}`;
 
+    const otherArticles = getRandomOtherArticles(locale, slug, 2).map((item) => ({
+        slug: item.slug,
+        title: item.title,
+        description: item.description,
+        cover: item.cover,
+    }));
+
     const imageUrl = article.cover
         ? article.cover.startsWith("http")
             ? article.cover
@@ -229,6 +237,8 @@ export default async function ArticlePage({ params }: props) {
                         components={mdxComponents}
                     />
                 </article>
+
+                <OtherArticles locale={locale} articles={otherArticles} />
             </div>
         </main>
     );

app/[locale]/works/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
-import { getAllProjects, getProjectBySlug, getProjectSlugs } from "@/lib/projects/get-projects";
+import { getProjectBySlug, getProjectSlugs, getRandomOtherProjects } from "@/lib/projects/get-projects";
 import { mdxComponents } from "@/components/mdx/mdxComponents";
 import { ProjectHero } from "@/app/[locale]/works/_components/ProjectHero";
 import { ProjectMeta } from "@/app/[locale]/works/_components/ProjectMeta";
@@ -38,15 +38,12 @@ export default async function ProjectPage({ params }: props) {
         notFound();
     }
 
-    const otherProjects = getAllProjects(locale)
+    const otherProjects = getRandomOtherProjects(locale, slug, 2).map((item) => ({
-        .filter((item: any) => item.slug !== slug && item.ready)
+        slug: item.slug,
-        .slice(0, 2)
+        title: item.title,
-        .map((item: any) => ({
+        description: item.description,
-            slug: item.slug,
+        cover: item.cover,
-            title: item.title,
+    }));
-            description: item.description,
-            cover: item.cover,
-        }));
 
     return (
         <main className="bg-brand-beige">

app/[locale]/works/_components/OtherProjects.tsx

@@ -10,7 +10,7 @@ type props = {
         slug: string;
         title: string;
         description: string;
-        cover: string;
+        cover?: string;
     }[];
 };
 
@@ -65,11 +65,13 @@ export function OtherProjects({ locale, projects }: props) {
                     >
                         {/* Image */}
                         <div className="w-full h-[240px] rounded-xl overflow-hidden bg-brand-brown/5 mb-5">
-                            <img
+                            {project.cover && (
-                                src={project.cover}
+                                <img
-                                alt={project.title}
+                                    src={project.cover}
-                                className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
+                                    alt={project.title}
-                            />
+                                    className="w-full h-full object-cover transition-all duration-700 group-hover:scale-[1.04] group-hover:brightness-105"
+                                />
+                            )}
                         </div>
 
                         {/* Text */}

lib/blog/get-articles.ts

@@ -45,6 +45,17 @@ export function getAllArticles(locale: string): Article[] {
         .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 }
 
+export function getRandomOtherArticles(locale: string, excludeSlug: string, count: number): Article[] {
+    const candidates = getAllArticles(locale).filter((article) => article.slug !== excludeSlug);
+
+    for (let i = candidates.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [candidates[i], candidates[j]] = [candidates[j], candidates[i]];
+    }
+
+    return candidates.slice(0, count);
+}
+
 export function getAlternatesArticle(article: Article) {
     if (!article.translationKey) {
         return {};

lib/projects/get-projects.ts

@@ -42,3 +42,16 @@ export function getAllProjects(locale: string): Project[] {
         .filter((project): project is Project => project !== null)
         .sort((a, b) => a.priority - b.priority);
 }
+
+export function getRandomOtherProjects(locale: string, excludeSlug: string, count: number): Project[] {
+    const candidates = getAllProjects(locale).filter(
+        (project) => project.slug !== excludeSlug && project.ready
+    );
+
+    for (let i = candidates.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [candidates[i], candidates[j]] = [candidates[j], candidates[i]];
+    }
+
+    return candidates.slice(0, count);
+}

messages/en.json

@@ -82,6 +82,10 @@
         "noArticles": "No articles yet.",
         "summary": {
             "label": "Summary"
+        },
+        "otherArticles": {
+            "sectionLabel": "Other articles",
+            "title": "See also"
         }
     },
     "projectPage": {

messages/fr.json

@@ -82,6 +82,10 @@
         "noArticles": "Aucun article pour le moment.",
         "summary": {
             "label": "En résumé"
+        },
+        "otherArticles": {
+            "sectionLabel": "Autres articles",
+            "title": "Voir aussi"
         }
     },
     "projectPage": {