refactor: migrate documentation to support multi-language structure with i18n integration

documentation/biome.json

@@ -7,14 +7,7 @@
 	},
 	"files": {
 		"ignoreUnknown": true,
-    "includes": [
+		"includes": ["**", "!node_modules", "!.next", "!dist", "!build", "!.source"]
-      "**",
-      "!node_modules",
-      "!.next",
-      "!dist",
-      "!build",
-      "!.source"
-    ]
 	},
 	"formatter": {
 		"enabled": true,

documentation/content/docs/conception/index.fr.mdx

@@ -0,0 +1,116 @@
+---
+title: Conception de la Base de Données
+description: MCD, MLD et MPD de MemeGoat.
+---
+
+## Modèle Conceptuel des Données (MCD)
+Le MCD définit les entités et leurs relations.
+
+```mermaid
+erDiagram
+    UTILISATEUR ||--o{ MEME : "crée"
+    UTILISATEUR ||--o{ COMMENTAIRE : "écrit"
+    MEME ||--o{ COMMENTAIRE : "reçoit"
+    MEME }o--o{ TAG : "possède"
+
+    UTILISATEUR {
+        string pseudo
+        string email
+        string mot_de_passe
+        datetime date_creation
+    }
+    MEME {
+        string titre
+        string url_image
+        datetime date_creation
+    }
+    TAG {
+        string nom
+    }
+    COMMENTAIRE {
+        string contenu
+        datetime date_creation
+    }
+```
+
+## Modèle Logique des Données (MLD)
+Le MLD traduit le MCD en tables avec les clés étrangères.
+
+```mermaid
+erDiagram
+    users ||--o{ memes : "user_id"
+    users ||--o{ comments : "user_id"
+    memes ||--o{ comments : "meme_id"
+    memes ||--o{ meme_tags : "meme_id"
+    tags ||--o{ meme_tags : "tag_id"
+
+    users {
+        uuid id PK
+        varchar username
+        varchar email
+        text password_hash
+        timestamp created_at
+    }
+    memes {
+        uuid id PK
+        varchar title
+        text image_url
+        uuid user_id FK
+        timestamp created_at
+    }
+    tags {
+        uuid id PK
+        varchar name
+    }
+    meme_tags {
+        uuid meme_id FK
+        uuid tag_id FK
+    }
+    comments {
+        uuid id PK
+        text content
+        uuid user_id FK
+        uuid meme_id FK
+        timestamp created_at
+    }
+```
+
+## Modèle Physique des Données (MPD)
+Implémentation SQL pour PostgreSQL.
+
+```sql
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    username VARCHAR(50) UNIQUE NOT NULL,
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password_hash TEXT NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE memes (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    title VARCHAR(255) NOT NULL,
+    image_url TEXT NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE SET NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE tags (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(50) UNIQUE NOT NULL
+);
+
+CREATE TABLE meme_tags (
+    meme_id UUID REFERENCES memes(id) ON DELETE CASCADE,
+    tag_id UUID REFERENCES tags(id) ON DELETE CASCADE,
+    PRIMARY KEY (meme_id, tag_id)
+);
+
+CREATE TABLE comments (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    content TEXT NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE SET NULL,
+    meme_id UUID REFERENCES memes(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+```

documentation/content/docs/conception/index.mdx

@@ -0,0 +1,116 @@
+---
+title: Database Design
+description: MCD, MLD and MPD for MemeGoat.
+---
+
+## Conceptual Data Model (MCD)
+The MCD defines entities and their relationships.
+
+```mermaid
+erDiagram
+    USER ||--o{ MEME : "creates"
+    USER ||--o{ COMMENT : "writes"
+    MEME ||--o{ COMMENT : "receives"
+    MEME }o--o{ TAG : "has"
+
+    USER {
+        string username
+        string email
+        string password
+        datetime created_at
+    }
+    MEME {
+        string title
+        string image_url
+        datetime created_at
+    }
+    TAG {
+        string name
+    }
+    COMMENT {
+        string content
+        datetime created_at
+    }
+```
+
+## Logical Data Model (MLD)
+The MLD translates the MCD into tables with foreign keys.
+
+```mermaid
+erDiagram
+    users ||--o{ memes : "user_id"
+    users ||--o{ comments : "user_id"
+    memes ||--o{ comments : "meme_id"
+    memes ||--o{ meme_tags : "meme_id"
+    tags ||--o{ meme_tags : "tag_id"
+
+    users {
+        uuid id PK
+        varchar username
+        varchar email
+        text password_hash
+        timestamp created_at
+    }
+    memes {
+        uuid id PK
+        varchar title
+        text image_url
+        uuid user_id FK
+        timestamp created_at
+    }
+    tags {
+        uuid id PK
+        varchar name
+    }
+    meme_tags {
+        uuid meme_id FK
+        uuid tag_id FK
+    }
+    comments {
+        uuid id PK
+        text content
+        uuid user_id FK
+        uuid meme_id FK
+        timestamp created_at
+    }
+```
+
+## Physical Data Model (MPD)
+SQL implementation for PostgreSQL.
+
+```sql
+CREATE TABLE users (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    username VARCHAR(50) UNIQUE NOT NULL,
+    email VARCHAR(255) UNIQUE NOT NULL,
+    password_hash TEXT NOT NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE memes (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    title VARCHAR(255) NOT NULL,
+    image_url TEXT NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE SET NULL,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE TABLE tags (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(50) UNIQUE NOT NULL
+);
+
+CREATE TABLE meme_tags (
+    meme_id UUID REFERENCES memes(id) ON DELETE CASCADE,
+    tag_id UUID REFERENCES tags(id) ON DELETE CASCADE,
+    PRIMARY KEY (meme_id, tag_id)
+);
+
+CREATE TABLE comments (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    content TEXT NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE SET NULL,
+    meme_id UUID REFERENCES memes(id) ON DELETE CASCADE,
+    created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+```

documentation/content/docs/conception/meta.en.json

@@ -0,0 +1,3 @@
+{
+  "title": "Design"
+}

documentation/content/docs/conception/meta.json

@@ -0,0 +1,3 @@
+{
+  "title": "Conception"
+}

documentation/content/docs/index.fr.mdx

@@ -0,0 +1,13 @@
+---
+title: Introduction
+description: Bienvenue sur MemeGoat, la bibliothèque de MEME et GIF.
+---
+
+MemeGoat est un site bibliothèque de MEME et de GIF.
+Le but est de permettre de retrouver une image adaptée à son besoin par une simple recherche.
+Il est aussi possible de créer du contenu sur le site.
+
+## Objectifs
+- Recherche rapide et intuitive.
+- Partage de contenu original.
+- Bibliothèque communautaire.

documentation/content/docs/index.mdx

@@ -1,13 +1,13 @@
 ---
-title: Hello World
+title: Introduction
-description: Your first document
+description: Welcome to MemeGoat, the MEME and GIF library.
 ---
 
-Welcome to the docs! You can start writing documents in `/content/docs`.
+MemeGoat is a MEME and GIF library website.
+The goal is to allow finding an image suited to one's needs through a simple search.
+It is also possible to create content on the site.
 
-## What is Next?
+## Goals
-
+- Fast and intuitive search.
-<Cards>
+- Sharing original content.
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+- Community-driven library.
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
-</Cards>

documentation/content/docs/stack/index.fr.mdx

@@ -0,0 +1,17 @@
+---
+title: Stack Technique
+description: Choix technologiques pour MemeGoat.
+---
+
+## Frontend
+- **Framework**: Next.js 15
+- **Style**: Tailwind CSS
+- **Bibliothèque UI**: Lucide React, Radix UI
+
+## Backend
+- **Langage**: Node.js (TypeScript) / NestJS ou Go
+- **Base de données**: PostgreSQL
+- **Stockage d'images**: S3 ou similaire (Cloudinary, Uploadcare)
+
+## Documentation
+- **Framework**: Fumadocs

documentation/content/docs/stack/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Tech Stack
+description: Technological choices for MemeGoat.
+---
+
+## Frontend
+- **Framework**: Next.js 15
+- **Style**: Tailwind CSS
+- **UI Library**: Lucide React, Radix UI
+
+## Backend
+- **Language**: Node.js (TypeScript) / NestJS or Go
+- **Database**: PostgreSQL
+- **Image Storage**: S3 or similar (Cloudinary, Uploadcare)
+
+## Documentation
+- **Framework**: Fumadocs

documentation/content/docs/stack/meta.en.json

@@ -0,0 +1,3 @@
+{
+  "title": "Stack"
+}

documentation/content/docs/stack/meta.json

@@ -0,0 +1,3 @@
+{
+  "title": "Stack"
+}

documentation/content/docs/test.mdx

@@ -1,17 +0,0 @@
----
-title: Components
-description: Components
----
-
-## Code Block
-
-```js
-console.log('Hello World');
-```
-
-## Cards
-
-<Cards>
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
-</Cards>

documentation/next.config.mjs

@@ -1,4 +1,4 @@
-import { createMDX } from 'fumadocs-mdx/next';
+import { createMDX } from "fumadocs-mdx/next";
 
 const withMDX = createMDX();
 

documentation/package.json

@@ -16,11 +16,14 @@
 		"fumadocs-mdx": "14.2.4",
 		"fumadocs-ui": "16.4.3",
 		"lucide-react": "^0.562.0",
+		"mermaid": "^11.12.2",
 		"next": "16.1.1",
+		"next-themes": "^0.4.6",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "^2.3.10",
 		"@tailwindcss/postcss": "^4.1.18",
 		"@types/mdx": "^2.0.13",
 		"@types/node": "^24.10.2",
@@ -28,7 +31,6 @@
 		"@types/react-dom": "^19.2.3",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^4.1.18",
-    "typescript": "^5.9.3",
+		"typescript": "^5.9.3"
-    "@biomejs/biome": "^2.3.10"
 	}
 }

documentation/postcss.config.mjs

@@ -1,5 +1,5 @@
 export default {
 	plugins: {
-    '@tailwindcss/postcss': {},
+		"@tailwindcss/postcss": {},
 	},
 };

documentation/source.config.ts

@@ -1,9 +1,14 @@
-import { defineConfig, defineDocs, frontmatterSchema, metaSchema } from 'fumadocs-mdx/config';
+import {
+	defineConfig,
+	defineDocs,
+	frontmatterSchema,
+	metaSchema,
+} from "fumadocs-mdx/config";
 
 // You can customise Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.dev/docs/mdx/collections
 export const docs = defineDocs({
-  dir: 'content/docs',
+	dir: "content/docs",
 	docs: {
 		schema: frontmatterSchema,
 		postprocess: {

documentation/src/app/(home)/layout.tsx

@@ -1,6 +0,0 @@
-import { HomeLayout } from 'fumadocs-ui/layouts/home';
-import { baseOptions } from '@/lib/layout.shared';
-
-export default function Layout({ children }: LayoutProps<'/'>) {
-  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
-}

documentation/src/app/(home)/page.tsx

@@ -1,16 +0,0 @@
-import Link from 'next/link';
-
-export default function HomePage() {
-  return (
-    <div className="flex flex-col justify-center text-center flex-1">
-      <h1 className="text-2xl font-bold mb-4">Hello World</h1>
-      <p>
-        You can open{' '}
-        <Link href="/docs" className="font-medium underline">
-          /docs
-        </Link>{' '}
-        and see the documentation.
-      </p>
-    </div>
-  );
-}

documentation/src/app/[lang]/(home)/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: { children: React.ReactNode; params: Promise<{ lang: string }>}) {
+	return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

documentation/src/app/[lang]/(home)/page.tsx

@@ -0,0 +1,16 @@
+import Link from "next/link";
+
+export default function HomePage() {
+	return (
+		<div className="flex flex-col justify-center text-center flex-1">
+			<h1 className="text-2xl font-bold mb-4">Hello World</h1>
+			<p>
+				You can open{" "}
+				<Link href="/[lang]/docs" className="font-medium underline">
+					/docs
+				</Link>{" "}
+				and see the documentation.
+			</p>
+		</div>
+	);
+}

documentation/src/app/[lang]/docs/[[...slug]]/page.tsx

@@ -0,0 +1,54 @@
+import { getPageImage, source } from "@/lib/source";
+import {
+	DocsBody,
+	DocsDescription,
+	DocsPage,
+	DocsTitle,
+} from "fumadocs-ui/layouts/docs/page";
+import { notFound } from "next/navigation";
+import { getMDXComponents } from "@/mdx-components";
+import type { Metadata } from "next";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+
+export default async function Page(props: { params: Promise<{ lang: string; slug?: string[]; }> }) {
+	const params = await props.params;
+	const page = source.getPage(params.slug, params.lang);
+	if (!page) notFound();
+
+	const MDX = page.data.body;
+
+	return (
+		<DocsPage toc={page.data.toc} full={page.data.full}>
+			<DocsTitle>{page.data.title}</DocsTitle>
+			<DocsDescription>{page.data.description}</DocsDescription>
+			<DocsBody>
+				<MDX
+					components={getMDXComponents({
+						// this allows you to link to other pages with relative file paths
+						a: createRelativeLink(source, page),
+					})}
+				/>
+			</DocsBody>
+		</DocsPage>
+	);
+}
+
+export async function generateStaticParams() {
+	return source.generateParams();
+}
+
+export async function generateMetadata(
+	props: PageProps<"/docs/[[...slug]]"> & { params: Promise<{ lang: string; }> },
+): Promise<Metadata> {
+	const params = await props.params;
+	const page = source.getPage(params.slug, params.lang);
+	if (!page) notFound();
+
+	return {
+		title: page.data.title,
+		description: page.data.description,
+		openGraph: {
+			images: getPageImage(page).url,
+		},
+	};
+}

documentation/src/app/[lang]/docs/layout.tsx

@@ -0,0 +1,11 @@
+import { source } from "@/lib/source";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+	return (
+		<DocsLayout tree={source.getPageTree()} {...baseOptions()}>
+			{children}
+		</DocsLayout>
+	);
+}

documentation/src/app/[lang]/global.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";

documentation/src/app/[lang]/layout.tsx

@@ -0,0 +1,38 @@
+import { RootProvider } from "fumadocs-ui/provider/next";
+import "./global.css";
+import { Inter } from "next/font/google";
+import { defineI18nUI } from "fumadocs-ui/i18n";
+import { i18n } from "@/lib/i18n";
+
+const inter = Inter({
+	subsets: ["latin"],
+});
+
+const { provider } = defineI18nUI(i18n, {
+	translations: {
+		en: {
+			displayName: "English",
+		},
+		fr: {
+			displayName: "French",
+		},
+	},
+});
+
+export default async function RootLayout({
+	params,
+	children,
+}: {
+	params: Promise<{ lang: string }>;
+	children: React.ReactNode;
+}) {
+	const lang = (await params).lang;
+
+	return (
+		<html lang={lang}>
+			<body className={inter.className}>
+				<RootProvider i18n={provider(lang)}>{children}</RootProvider>
+			</body>
+		</html>
+	);
+}

documentation/src/app/api/search/route.ts

@@ -1,7 +1,9 @@
-import { source } from '@/lib/source';
+import { source } from "@/lib/source";
-import { createFromSource } from 'fumadocs-core/search/server';
+import { createFromSource } from "fumadocs-core/search/server";
 
 export const { GET } = createFromSource(source, {
-  // https://docs.orama.com/docs/orama-js/supported-languages
+	localeMap: {
-  language: 'english',
+		fr: { language: 'french' },
+		en: { language: 'english' },
+	},
 });

documentation/src/app/docs/[[...slug]]/page.tsx

@@ -1,47 +0,0 @@
-import { getPageImage, source } from '@/lib/source';
-import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
-import { notFound } from 'next/navigation';
-import { getMDXComponents } from '@/mdx-components';
-import type { Metadata } from 'next';
-import { createRelativeLink } from 'fumadocs-ui/mdx';
-
-export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
-  const params = await props.params;
-  const page = source.getPage(params.slug);
-  if (!page) notFound();
-
-  const MDX = page.data.body;
-
-  return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsDescription>{page.data.description}</DocsDescription>
-      <DocsBody>
-        <MDX
-          components={getMDXComponents({
-            // this allows you to link to other pages with relative file paths
-            a: createRelativeLink(source, page),
-          })}
-        />
-      </DocsBody>
-    </DocsPage>
-  );
-}
-
-export async function generateStaticParams() {
-  return source.generateParams();
-}
-
-export async function generateMetadata(props: PageProps<'/docs/[[...slug]]'>): Promise<Metadata> {
-  const params = await props.params;
-  const page = source.getPage(params.slug);
-  if (!page) notFound();
-
-  return {
-    title: page.data.title,
-    description: page.data.description,
-    openGraph: {
-      images: getPageImage(page).url,
-    },
-  };
-}

documentation/src/app/docs/layout.tsx

@@ -1,11 +0,0 @@
-import { source } from '@/lib/source';
-import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { baseOptions } from '@/lib/layout.shared';
-
-export default function Layout({ children }: LayoutProps<'/docs'>) {
-  return (
-    <DocsLayout tree={source.getPageTree()} {...baseOptions()}>
-      {children}
-    </DocsLayout>
-  );
-}

documentation/src/app/global.css

@@ -1,3 +0,0 @@
-@import 'tailwindcss';
-@import 'fumadocs-ui/css/neutral.css';
-@import 'fumadocs-ui/css/preset.css';

documentation/src/app/layout.tsx

@@ -1,17 +0,0 @@
-import { RootProvider } from 'fumadocs-ui/provider/next';
-import './global.css';
-import { Inter } from 'next/font/google';
-
-const inter = Inter({
-  subsets: ['latin'],
-});
-
-export default function Layout({ children }: LayoutProps<'/'>) {
-  return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="flex flex-col min-h-screen">
-        <RootProvider>{children}</RootProvider>
-      </body>
-    </html>
-  );
-}

documentation/src/app/llms-full.txt/route.ts

@@ -1,4 +1,4 @@
-import { getLLMText, source } from '@/lib/source';
+import { getLLMText, source } from "@/lib/source";
 
 export const revalidate = false;
 
@@ -6,5 +6,5 @@ export async function GET() {
 	const scan = source.getPages().map(getLLMText);
 	const scanned = await Promise.all(scan);
 
-  return new Response(scanned.join('\n\n'));
+	return new Response(scanned.join("\n\n"));
 }

documentation/src/app/og/docs/[...slug]/route.tsx

@@ -1,17 +1,24 @@
-import { getPageImage, source } from '@/lib/source';
+import { getPageImage, source } from "@/lib/source";
-import { notFound } from 'next/navigation';
+import { notFound } from "next/navigation";
-import { ImageResponse } from 'next/og';
+import { ImageResponse } from "next/og";
-import { generate as DefaultImage } from 'fumadocs-ui/og';
+import { generate as DefaultImage } from "fumadocs-ui/og";
 
 export const revalidate = false;
 
-export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[...slug]'>) {
+export async function GET(
+	_req: Request,
+	{ params }: RouteContext<"/og/docs/[...slug]">,
+) {
 	const { slug } = await params;
 	const page = source.getPage(slug.slice(0, -1));
 	if (!page) notFound();
 
 	return new ImageResponse(
-    <DefaultImage title={page.data.title} description={page.data.description} site="My App" />,
+		<DefaultImage
+			title={page.data.title}
+			description={page.data.description}
+			site="MemeGoat"
+		/>,
 		{
 			width: 1200,
 			height: 630,

documentation/src/components/mdx/mermaid.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { use, useEffect, useId, useState } from 'react';
+import { useTheme } from 'next-themes';
+
+export function Mermaid({ chart }: { chart: string }) {
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	if (!mounted) return;
+	return <MermaidContent chart={chart} />;
+}
+
+const cache = new Map<string, Promise<unknown>>();
+
+function cachePromise<T>(key: string, setPromise: () => Promise<T>): Promise<T> {
+	const cached = cache.get(key);
+	if (cached) return cached as Promise<T>;
+
+	const promise = setPromise();
+	cache.set(key, promise);
+	return promise;
+}
+
+function MermaidContent({ chart }: { chart: string }) {
+	const id = useId();
+	const { resolvedTheme } = useTheme();
+	const { default: mermaid } = use(cachePromise('mermaid', () => import('mermaid')));
+
+	mermaid.initialize({
+		startOnLoad: false,
+		securityLevel: 'loose',
+		fontFamily: 'inherit',
+		themeCSS: 'margin: 1.5rem auto 0;',
+		theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+	});
+
+	const { svg, bindFunctions } = use(
+		cachePromise(`${chart}-${resolvedTheme}`, () => {
+			return mermaid.render(id, chart.replaceAll('\\n', '\n'));
+		}),
+	);
+
+	return (
+		<div
+			ref={(container) => {
+				if (container) bindFunctions?.(container);
+			}}
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: correct usage.
+			dangerouslySetInnerHTML={{ __html: svg }}
+		/>
+	);
+}

documentation/src/lib/i18n.ts

@@ -0,0 +1,6 @@
+import { defineI18n } from "fumadocs-core/i18n";
+
+export const i18n = defineI18n({
+	defaultLanguage: "en",
+	languages: ["en", "fr"],
+});

documentation/src/lib/layout.shared.tsx

@@ -1,9 +1,11 @@
-import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import {i18n} from "@/lib/i18n";
 
 export function baseOptions(): BaseLayoutProps {
 	return {
+    i18n,
 		nav: {
-      title: 'My App',
+			title: "MemeGoat",
 		},
 	};
 }

documentation/src/lib/source.ts

@@ -1,25 +1,27 @@
-import { docs } from 'fumadocs-mdx:collections/server';
+import { docs } from "fumadocs-mdx:collections/server";
-import { type InferPageType, loader } from 'fumadocs-core/source';
+import { type InferPageType, loader } from "fumadocs-core/source";
-import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
+import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
+import {i18n} from "@/lib/i18n";
 
 // See https://fumadocs.dev/docs/headless/source-api for more info
 export const source = loader({
-  baseUrl: '/docs',
+  i18n,
+	baseUrl: "/docs",
 	source: docs.toFumadocsSource(),
 	plugins: [lucideIconsPlugin()],
 });
 
 export function getPageImage(page: InferPageType<typeof source>) {
-  const segments = [...page.slugs, 'image.png'];
+	const segments = [...page.slugs, "image.png"];
 
 	return {
 		segments,
-    url: `/og/docs/${segments.join('/')}`,
+		url: `/og/docs/${segments.join("/")}`,
 	};
 }
 
 export async function getLLMText(page: InferPageType<typeof source>) {
-  const processed = await page.data.getText('processed');
+	const processed = await page.data.getText("processed");
 
 	return `# ${page.data.title}
 

documentation/src/mdx-components.tsx

@@ -1,9 +1,22 @@
-import defaultMdxComponents from 'fumadocs-ui/mdx';
+import defaultMdxComponents from "fumadocs-ui/mdx";
-import type { MDXComponents } from 'mdx/types';
+import type { MDXComponents } from "mdx/types";
+import { Mermaid } from "@/components/mdx/mermaid";
 
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
 	return {
 		...defaultMdxComponents,
 		...components,
+		pre: ({ children, ...props }: any) => {
+			if (
+				children &&
+				typeof children === "object" &&
+				"type" in children &&
+				(children as any).type === "code" &&
+				(children as any).props.className === "language-mermaid"
+			) {
+				return <Mermaid chart={(children as any).props.children} />;
+			}
+			return <defaultMdxComponents.pre {...props}>{children}</defaultMdxComponents.pre>;
+		},
 	};
 }

documentation/src/proxy.ts

@@ -0,0 +1,10 @@
+import { createI18nMiddleware } from "fumadocs-core/i18n/middleware";
+import { i18n } from "@/lib/i18n";
+
+export default createI18nMiddleware(i18n);
+
+export const config = {
+	// Matcher ignoring `/_next/` and `/api/`
+	//TODO Adjust it to ignore static assets in `/public` folder
+	matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
+};

documentation/tsconfig.json

@@ -2,11 +2,7 @@
 	"compilerOptions": {
 		"baseUrl": ".",
 		"target": "ESNext",
-    "lib": [
+		"lib": ["dom", "dom.iterable", "esnext"],
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
 		"allowJs": true,
 		"skipLibCheck": true,
 		"strict": true,
@@ -20,12 +16,8 @@
 		"jsx": "react-jsx",
 		"incremental": true,
 		"paths": {
-      "@/*": [
+			"@/*": ["./src/*"],
-        "./src/*"
+			"fumadocs-mdx:collections/*": [".source/*"]
-      ],
-      "fumadocs-mdx:collections/*": [
-        ".source/*"
-      ]
 		},
 		"plugins": [
 			{
@@ -40,7 +32,5 @@
 		".next/types/**/*.ts",
 		".next/dev/types/**/*.ts"
 	],
-  "exclude": [
+	"exclude": ["node_modules"]
-    "node_modules"
-  ]
 }