feat: enhance locale handling and markdown file loading for dynamic routes

Signed-off-by: Daniel Ntege <danientege785@gmail.com>

Author: danielmarv

src/app/[locale]/[...rest]/page.tsx

@@ -1,5 +1,130 @@
-import { notFound } from 'next/navigation'
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import type { Metadata } from 'next';
+import { notFound, redirect } from 'next/navigation';
+import { remark } from 'remark';
+import remarkGfm from 'remark-gfm';
+import html from 'remark-html';
+import { transformHugoShortcodes } from '@/lib/remark-hugo-shortcodes';
 
-export default function LocaleCatchAllPage() {
-  notFound()
+type CatchAllPageProps = {
+  params: Promise<{
+    locale: string;
+    rest: string[];
+  }>;
+};
+
+const contentDirectory = path.join(process.cwd(), 'content');
+
+const CONTENT_PATH_ALIASES: Record<string, string> = {
+  'support-care-maven/status': 'support-care-maven-status',
+};
+
+const REDIRECTS_TO_POSTS = new Set(['articles', 'categories', 'tags']);
+
+function localePrefix(locale: string): string {
+  return locale === 'de' ? '/de' : '';
+}
+
+function maybeRedirectLegacyPath(locale: string, requestPath: string): string | null {
+  const normalizedPath = requestPath.replace(/^\/+|\/+$/g, '');
+  const prefix = localePrefix(locale);
+
+  if (normalizedPath === 'about-support-care') {
+    return `${prefix}/support-care`;
+  }
+
+  if (normalizedPath === 'employees') {
+    return `${prefix}/about`;
+  }
+
+  if (REDIRECTS_TO_POSTS.has(normalizedPath) || normalizedPath.startsWith('categories/') || normalizedPath.startsWith('tags/')) {
+    return `${prefix}/posts`;
+  }
+
+  return null;
+}
+
+function findMarkdownFile(locale: string, requestPath: string): string | null {
+  const normalizedPath = requestPath.replace(/^\/+|\/+$/g, '');
+  const mappedPath = CONTENT_PATH_ALIASES[normalizedPath] || normalizedPath;
+  const deFile = path.join(contentDirectory, mappedPath, 'index.de.md');
+  const enFile = path.join(contentDirectory, mappedPath, 'index.md');
+
+  if (locale === 'de') {
+    if (fs.existsSync(deFile)) return deFile;
+    if (fs.existsSync(enFile)) return enFile;
+    return null;
+  }
+
+  if (fs.existsSync(enFile)) return enFile;
+  return null;
+}
+
+async function loadPageData(locale: string, requestPath: string): Promise<{ title: string; description?: string; contentHtml: string } | null> {
+  const markdownFile = findMarkdownFile(locale, requestPath);
+
+  if (!markdownFile) {
+    return null;
+  }
+
+  const fileContents = fs.readFileSync(markdownFile, 'utf8');
+  const { data, content } = matter(fileContents);
+  const transformedContent = transformHugoShortcodes(content);
+  const processedContent = await remark().use(remarkGfm).use(html, { sanitize: false }).process(transformedContent);
+
+  return {
+    title: typeof data.title === 'string' ? data.title : 'Open Elements',
+    description: typeof data.description === 'string' ? data.description : undefined,
+    contentHtml: processedContent.toString(),
+  };
+}
+
+export async function generateMetadata({ params }: CatchAllPageProps): Promise<Metadata> {
+  const { locale, rest } = await params;
+  const requestPath = rest.join('/');
+
+  if (maybeRedirectLegacyPath(locale, requestPath)) {
+    return {
+      title: 'Open Elements',
+    };
+  }
+
+  const pageData = await loadPageData(locale, requestPath);
+
+  if (!pageData) {
+    return {
+      title: 'Page Not Found',
+    };
+  }
+
+  return {
+    title: `${pageData.title} - Open Elements`,
+    description: pageData.description,
+  };
+}
+
+export default async function LocaleCatchAllPage({ params }: CatchAllPageProps) {
+  const { locale, rest } = await params;
+  const requestPath = rest.join('/');
+
+  const redirectTarget = maybeRedirectLegacyPath(locale, requestPath);
+  if (redirectTarget) {
+    redirect(redirectTarget);
+  }
+
+  const pageData = await loadPageData(locale, requestPath);
+  if (!pageData) {
+    notFound();
+  }
+
+  return (
+    <div className="container py-16 sm:py-24">
+      <article className="prose prose-sm sm:prose-base text-blue max-w-4xl mx-auto prose-a:text-purple-700">
+        <h1>{pageData.title}</h1>
+        <div dangerouslySetInnerHTML={{ __html: pageData.contentHtml }} />
+      </article>
+    </div>
+  );
 }

src/app/[locale]/posts/[...slug]/page.tsx

@@ -6,7 +6,7 @@ import { getPostBySlug, getAllPostSlugs } from '@/lib/markdown';
 import teamDataEn from '@/data/en/team.json';
 import teamDataDe from '@/data/de/team.json';
 
-export const dynamicParams = false;
+export const dynamicParams = true;
 
 interface TeamMember {
   id: string;

src/lib/markdown.ts

@@ -116,18 +116,13 @@ Prism.hooks.add('wrap', (environment) => {
 
 /**
  * Generate a URL-friendly slug from text.
- * Transliterates German umlauts and common diacritics before slugifying.
+ * Keeps locale-specific characters (e.g. umlauts) to match Hugo URLs.
  */
 function slugify(text: string): string {
   return text
     .toLowerCase()
-    .replace(/ä/g, 'ae')
-    .replace(/ö/g, 'oe')
-    .replace(/ü/g, 'ue')
-    .replace(/ß/g, 'ss')
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '') // Remove remaining diacritics
-    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/-+/g, '-')
     .replace(/^-+|-+$/g, '');
 }
 
@@ -155,6 +150,49 @@ function generatePostPath(frontmatter: PostFrontmatter): string {
   return `${year}/${month}/${day}/${slug}`;
 }
 
+function normalizeLegacySlugSegment(slug: string): string {
+  return slug
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/-+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+function isDateBasedSlugMatch(candidatePath: string, requestedPath: string): boolean {
+  if (candidatePath === requestedPath) {
+    return true;
+  }
+
+  const candidateSegments = candidatePath.split('/');
+  const requestedSegments = requestedPath.split('/');
+
+  if (candidateSegments.length !== 4 || requestedSegments.length !== 4) {
+    return false;
+  }
+
+  const candidateDatePrefix = candidateSegments.slice(0, 3).join('/');
+  const requestedDatePrefix = requestedSegments.slice(0, 3).join('/');
+
+  if (candidateDatePrefix !== requestedDatePrefix) {
+    return false;
+  }
+
+  return normalizeLegacySlugSegment(candidateSegments[3]) === normalizeLegacySlugSegment(requestedSegments[3]);
+}
+
+function decodePathSegments(pathValue: string): string {
+  return pathValue
+    .split('/')
+    .map((segment) => {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    })
+    .join('/');
+}
+
 /**
  * Find the filename for a post matching the given date-based slug path and locale.
  * slugPath format: "YYYY/MM/DD/slug-text"
@@ -164,6 +202,21 @@ function generatePostPath(frontmatter: PostFrontmatter): string {
  */
 function getPostFilename(slugPath: string, locale: string): string | null {
   const files = fs.readdirSync(postsDirectory);
+  const decodedSlugPath = decodePathSegments(slugPath);
+
+  // Legacy NextJS path format: "YYYY-MM-DD-post-slug" (filename base)
+  if (!decodedSlugPath.includes('/')) {
+    if (locale === 'de') {
+      const deFilename = `${decodedSlugPath}.de.md`;
+      return files.includes(deFilename) ? deFilename : null;
+    }
+
+    const enFilename = `${decodedSlugPath}.md`;
+    if (files.includes(enFilename) && !enFilename.includes('.de.md')) {
+      return enFilename;
+    }
+    return null;
+  }
 
   for (const filename of files) {
     if (!filename.endsWith('.md')) continue;
@@ -179,7 +232,7 @@ function getPostFilename(slugPath: string, locale: string): string | null {
     const fileContents = fs.readFileSync(fullPath, 'utf8');
     const { data } = matter(fileContents);
 
-    if (generatePostPath(data as PostFrontmatter) === slugPath) {
+    if (isDateBasedSlugMatch(generatePostPath(data as PostFrontmatter), decodedSlugPath)) {
       return filename;
     }
   }
@@ -580,18 +633,19 @@ export function getAllPostSlugs(): Array<{ locale: string; slug: string[] }> {
     const { data } = matter(fileContents);
     const frontmatter = data as PostFrontmatter;
 
-    // Skip outdated posts from static generation
-    if (frontmatter.outdated === true) {
-      continue;
-    }
-
     const postPath = generatePostPath(frontmatter);
     const slugSegments = postPath.split('/');
+    const legacyBaseSlug = filename.endsWith('.de.md')
+      ? filename.replace('.de.md', '')
+      : filename.replace('.md', '');
+    const legacySlugSegments = [legacyBaseSlug];
 
     if (filename.endsWith('.de.md')) {
       slugs.push({ locale: 'de', slug: slugSegments });
+      slugs.push({ locale: 'de', slug: legacySlugSegments });
     } else {
       slugs.push({ locale: 'en', slug: slugSegments });
+      slugs.push({ locale: 'en', slug: legacySlugSegments });
     }
   }
 

src/middleware.ts

@@ -2,9 +2,12 @@ import createMiddleware from 'next-intl/middleware';
 import { routing } from './i18n/routing';
 
 const intlMiddleware = createMiddleware(routing);
+const STATIC_FILE_EXTENSION_PATTERN = /\.(?:avif|bmp|css|gif|ico|jpeg|jpg|js|json|map|mp4|png|svg|txt|webm|webp|woff|woff2|xml)$/i;
 
 export default function middleware(req: any) {
-  if (req.nextUrl.pathname.endsWith('sitemap.xml')) {
+  const { pathname } = req.nextUrl;
+
+  if (pathname.endsWith('sitemap.xml') || STATIC_FILE_EXTENSION_PATTERN.test(pathname)) {
     return;
   }
   return intlMiddleware(req);
@@ -14,5 +17,5 @@ export const config = {
   // Match all pathnames except for
   // - ... if they start with `/api`, `/_next` or `/_vercel`
   // - ... if they contain a dot (e.g. `favicon.ico`)
-  matcher: ['/', '/(de|en)/:path*', '/((?!api|_next|_vercel|.*\\..*).*)'],
+  matcher: ['/', '/posts/:path*', '/(de|en)/:path*', '/((?!api|_next|_vercel|.*\\..*).*)'],
 };