From ec771eb074838a525e59139ed2c8ad29b90fdba0 Mon Sep 17 00:00:00 2001 From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com> Date: Thu, 8 Jan 2026 15:32:13 +0100 Subject: [PATCH] feat: revamp documentation pages with new components, layout, and visuals Introduced enhanced MDX components (cards, callouts, tabs, accordions, steps) for better content presentation. Redesigned the homepage with new sections highlighting features, tech stack, and quick access links. Updated the global CSS to use Catppuccin theme. Added branded visuals like the Memegoat logo and SVG. Improved metadata, localization (French), and search functionality. --- documentation/public/memegoat-color.svg | 32 ++++ documentation/src/app/(home)/page.tsx | 172 ++++++++++++++++++++-- documentation/src/app/api/search/route.ts | 2 +- documentation/src/app/global.css | 2 +- documentation/src/app/layout.tsx | 10 +- documentation/src/lib/layout.shared.tsx | 25 +++- documentation/src/mdx-components.tsx | 14 ++ 7 files changed, 243 insertions(+), 14 deletions(-) create mode 100644 documentation/public/memegoat-color.svg diff --git a/documentation/public/memegoat-color.svg b/documentation/public/memegoat-color.svg new file mode 100644 index 0000000..0e6b1cf --- /dev/null +++ b/documentation/public/memegoat-color.svg @@ -0,0 +1,32 @@ + + + + diff --git a/documentation/src/app/(home)/page.tsx b/documentation/src/app/(home)/page.tsx index 60cd663..f70999c 100644 --- a/documentation/src/app/(home)/page.tsx +++ b/documentation/src/app/(home)/page.tsx @@ -1,16 +1,168 @@ import Link from "next/link"; +import { Shield, Scale, Zap, Database, Server, Code, ArrowRight } from "lucide-react"; export default function HomePage() { return ( -
-

Hello World

-

- You can open{" "} - - /docs - {" "} - and see the documentation. -

-
+
+ {/* Hero Section */} +
+
+ +
+ +
+
+
+
+ Propulsé par une architecture sécurisée{" "} + +
+
+

+ La Bible Technique de MemeGoat 🐐 +

+

+ Parce que partager des MEME de qualité demande une infrastructure qui ne broute pas. + Découvrez comment nous avons bâti le futur du rire avec une pointe de sérieux (mais pas trop). +

+
+ + Débuter l'exploration + + + Référence API + +
+
+
+
+ + {/* Pillars Section */} +
+
+
+

Les Fondations

+

+ Une plateforme bâtie pour tenir +

+
+
+
+ {[ + { + name: "Coffre-Fort Bêêêê-ton", + description: "Chiffrement PGP au repos et hachage Argon2id. Vos données sont plus en sécurité ici que dans un enclos fermé à double tour.", + icon: Shield, + }, + { + name: "RGPD & Relax", + description: "Droit à l'oubli et portabilité. On respecte votre vie privée autant que vous respectez un bon mème bien placé.", + icon: Scale, + }, + { + name: "Vitesse Turbo-Chèvre", + description: "Transcodage WebP/WebM instantané. Vos GIFs se chargent plus vite que votre ombre, même sur le vieux smartphone de mamie.", + icon: Zap, + }, + ].map((feature) => ( +
+
+
+
+ {feature.name} +
+
+

{feature.description}

+
+
+ ))} +
+
+
+
+ + {/* Tech Stack Section */} +
+
+
+

Stack Technique

+

+ Technologies de pointe +

+
+
+
+ {[ + { name: "Next.js 16", icon: Code, color: "hover:text-black dark:hover:text-white" }, + { name: "NestJS 11", icon: Server, color: "hover:text-red-500" }, + { name: "PostgreSQL 15", icon: Database, color: "hover:text-blue-500" }, + { name: "Chèvre-Power", icon: Zap, color: "hover:text-orange-500" }, + ].map((tech) => ( +
+ + {tech.name} +
+ ))} +
+
+
+
+ + {/* Quick Access Section */} +
+
+
+
+

"On ne rigole pas avec le rire. Surtout quand il s'agit de vous." 🐐

+

+ Memegoat n'est pas qu'un site pour scroller à l'infini. C'est un site qui as pour but de partager des MEME de qualité sans surconsommer les ressources mondiales avec des fichiers beaucoup trop gros et des requêtes trop nombreuses. +

+ + Plongez dans le code (garanti sans crottin) + +
+
+ + + Modèle de Données + + + + Sécurité PGP + + + + Référence API + + + + Déploiement + +
+
+
+
+
); } diff --git a/documentation/src/app/api/search/route.ts b/documentation/src/app/api/search/route.ts index 0ea0883..295a59c 100644 --- a/documentation/src/app/api/search/route.ts +++ b/documentation/src/app/api/search/route.ts @@ -3,5 +3,5 @@ import { source } from "@/lib/source"; export const { GET } = createFromSource(source, { // https://docs.orama.com/docs/orama-js/supported-languages - language: "english", + language: "french", }); diff --git a/documentation/src/app/global.css b/documentation/src/app/global.css index dbcc721..6fdaa2a 100644 --- a/documentation/src/app/global.css +++ b/documentation/src/app/global.css @@ -1,3 +1,3 @@ @import "tailwindcss"; -@import "fumadocs-ui/css/neutral.css"; +@import "fumadocs-ui/css/catppuccin.css"; @import "fumadocs-ui/css/preset.css"; diff --git a/documentation/src/app/layout.tsx b/documentation/src/app/layout.tsx index 3f18935..739f358 100644 --- a/documentation/src/app/layout.tsx +++ b/documentation/src/app/layout.tsx @@ -6,9 +6,17 @@ const inter = Inter({ subsets: ["latin"], }); +export const metadata = { + title: { + template: "%s | Memegoat Docs", + default: "Memegoat Documentation", + }, + description: "Documentation technique officielle de Memegoat.", +}; + export default function Layout({ children }: LayoutProps<"/">) { return ( - + {children} diff --git a/documentation/src/lib/layout.shared.tsx b/documentation/src/lib/layout.shared.tsx index 777daa1..9e00302 100644 --- a/documentation/src/lib/layout.shared.tsx +++ b/documentation/src/lib/layout.shared.tsx @@ -1,9 +1,32 @@ import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared"; +import {Image} from "fumadocs-core/framework"; export function baseOptions(): BaseLayoutProps { return { nav: { - title: "My App", + title: ( + + Memegoat Logo + Memegoat + + ), }, + links: [ + { + text: "Documentation", + url: "/docs", + active: "nested-url", + }, + { + text: "GitHub", + url: "https://git.yidhra.fr/Mathis/memegoat", + }, + ], }; } diff --git a/documentation/src/mdx-components.tsx b/documentation/src/mdx-components.tsx index e67868e..37700cd 100644 --- a/documentation/src/mdx-components.tsx +++ b/documentation/src/mdx-components.tsx @@ -1,11 +1,25 @@ import defaultMdxComponents from "fumadocs-ui/mdx"; import type { MDXComponents } from "mdx/types"; import { Mermaid } from "@/components/mdx/mermaid"; +import { Card, Cards } from "fumadocs-ui/components/card"; +import { Callout } from "fumadocs-ui/components/callout"; +import { Step, Steps } from "fumadocs-ui/components/steps"; +import { Tabs, Tab } from "fumadocs-ui/components/tabs"; +import { Accordion, Accordions } from "fumadocs-ui/components/accordion"; export function getMDXComponents(components?: MDXComponents): MDXComponents { return { ...defaultMdxComponents, Mermaid, + Card, + Cards, + Callout, + Step, + Steps, + Tabs, + Tab, + Accordion, + Accordions, ...components, }; }