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.
This commit is contained in:
Mathis HERRIOT
32
documentation/public/memegoat-color.svg
Normal file
32
documentation/public/memegoat-color.svg
Normal file
@@ -0,0 +1,32 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 12.7 12.7"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><g
|
||||
id="layer2"
|
||||
style="display:inline;fill:#331515;fill-opacity:1;stroke:none;stroke-opacity:1"><g
|
||||
id="g4"
|
||||
transform="matrix(0.27373039,0,0,0.2517503,-17.319768,-6.635693)"><path
|
||||
style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
|
||||
d="m 63.549508,31.272583 c 14.328936,-3.710301 27.209984,13.389088 27.890078,13.535152 0.680094,0.146064 1.97586,-0.235884 2.525697,-0.05846 0.549838,0.177421 15.026777,16.527845 15.060637,17.083533 1.74538,3.30074 -1.90259,3.06506 -3.92583,2.323248 5.37774,-0.791177 -2.21688,-5.198834 -11.742846,-16.869391 -0.147456,-0.175131 -3.964059,0.778259 -4.256268,0.701582 C 88.808767,47.911567 81.73125,33.52768 63.549508,31.272587 Z"
|
||||
id="path3"
|
||||
/><path
|
||||
style="fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
|
||||
d="m 93.034113,43.424739 c 0.01364,0.09232 -0.675113,0.182763 -0.888834,0.115759 -0.629692,-0.633297 -8.246274,-12.981478 -21.468457,-16.867187 1.693703,0.215332 13.413267,-2.089805 22.357291,16.751428 z"
|
||||
id="path4"
|
||||
/><path
|
||||
style="fill:#331515;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
|
||||
d="m 67.93177,57.811458 c 0,0 8.027633,-6.50087 12.881414,-6.79531 0.480584,-0.387983 -3.871691,-1.542721 -2.380562,-3.24086 1.49113,-1.698139 5.250473,0.540425 7.391596,1.999451 1.766946,1.505799 3.023678,1.996756 4.505942,2.316766 1.482263,0.320011 4.02687,-0.200099 4.02687,-0.200099 0,0 1.940728,0.98341 4.540677,5.004385 -2.591761,-0.7264 -2.41512,-0.981648 -3.208762,-1.57919 -2.106185,-1.512522 -2.069041,-1.140598 -3.382436,-1.176237 -1.313395,-0.03564 -2.736712,1.308881 -4.134114,1.190625 -1.397402,-0.118256 -3.077124,-1.180017 -3.770313,-1.587501 -3.167354,-1.124112 -16.470312,4.06797 -16.470312,4.06797 z"
|
||||
id="path2"
|
||||
/><path
|
||||
style="fill:#331515;fill-opacity:1;stroke:none;stroke-width:0.264583;stroke-opacity:1"
|
||||
d="m 73.743605,76.275575 c 2.018029,-13.473637 15.69821,-18.736572 15.69821,-18.736572 0,0 -1.204881,6.06481 3.98785,6.266622 1.334027,0.15504 6.078103,-0.608039 12.805785,3.325856 -1.83163,2.367028 -2.13487,-0.599513 -3.84316,0.01934 -1.17041,1.0398 1.90501,6.011329 -3.043981,9.45497 C 102.13838,64.571303 84.706376,58.089029 73.743605,76.275575 Z"
|
||||
id="path1"
|
||||
/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -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 (
|
||||
<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>
|
||||
<main className="flex flex-1 flex-col">
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden py-24 sm:py-32">
|
||||
<div className="absolute top-0 left-1/2 -z-10 h-256 w-512 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-[-10%]">
|
||||
<svg
|
||||
viewBox="0 0 1108 632"
|
||||
aria-hidden="true"
|
||||
className="w-277 fill-primary/10"
|
||||
>
|
||||
<title>Decorative background</title>
|
||||
<path d="M410.151 513.506L299.302 153.332L0 443.517L410.151 513.506Z" />
|
||||
<path d="M1108 138.337L817.11 0L748.5 549.691L1108 138.337Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="container px-6 lg:px-8 mx-auto">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<div className="mb-8 flex justify-center">
|
||||
<div className="relative rounded-full px-4 py-1.5 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-accent transition-colors bg-card/50 backdrop-blur-sm">
|
||||
Propulsé par une architecture sécurisée{" "}
|
||||
<Link href="/docs/security" className="font-semibold text-primary">
|
||||
<span className="absolute inset-0" aria-hidden="true" />
|
||||
En savoir plus <span aria-hidden="true">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<h1 className="text-5xl font-extrabold tracking-tight sm:text-7xl mb-8 bg-linear-to-r from-primary via-orange-500 to-amber-500 bg-clip-text text-transparent leading-tight">
|
||||
La Bible Technique de MemeGoat 🐐
|
||||
</h1>
|
||||
<p className="mt-6 text-xl leading-8 text-muted-foreground">
|
||||
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).
|
||||
</p>
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-x-6">
|
||||
<Link
|
||||
href="/docs"
|
||||
className="w-full sm:w-auto rounded-xl bg-primary px-8 py-4 text-base font-bold text-primary-foreground shadow-lg hover:bg-primary/90 transition-all transform hover:scale-105 active:scale-95"
|
||||
>
|
||||
Débuter l'exploration
|
||||
</Link>
|
||||
<Link
|
||||
href="/docs/api-reference"
|
||||
className="w-full sm:w-auto text-base font-semibold leading-6 text-foreground hover:text-primary transition-colors flex items-center justify-center gap-2 py-4 sm:py-0"
|
||||
>
|
||||
Référence API <ArrowRight className="h-5 w-5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pillars Section */}
|
||||
<section className="py-24 bg-fd-background/50 border-y border-border">
|
||||
<div className="container px-6 lg:px-8 mx-auto">
|
||||
<div className="mx-auto max-w-2xl lg:text-center mb-16">
|
||||
<h2 className="text-base font-bold leading-7 text-primary uppercase tracking-widest">Les Fondations</h2>
|
||||
<p className="mt-2 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl">
|
||||
Une plateforme bâtie pour tenir
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
|
||||
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-12 lg:max-w-none lg:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
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) => (
|
||||
<div key={feature.name} className="flex flex-col border border-border p-10 rounded-3xl bg-card hover:border-primary/50 transition-all shadow-md hover:shadow-xl group">
|
||||
<dt className="flex items-center gap-x-4 text-xl font-bold leading-7 text-foreground">
|
||||
<div className="p-3 rounded-xl bg-primary/10 group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
|
||||
<feature.icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
{feature.name}
|
||||
</dt>
|
||||
<dd className="mt-6 flex flex-auto flex-col text-base leading-7 text-muted-foreground">
|
||||
<p className="flex-auto">{feature.description}</p>
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tech Stack Section */}
|
||||
<section className="py-24 sm:py-32 overflow-hidden">
|
||||
<div className="container px-6 lg:px-8 mx-auto">
|
||||
<div className="mx-auto max-w-2xl lg:text-center mb-20">
|
||||
<h2 className="text-base font-bold leading-7 text-primary uppercase tracking-widest text-center">Stack Technique</h2>
|
||||
<p className="mt-2 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl text-center">
|
||||
Technologies de pointe
|
||||
</p>
|
||||
</div>
|
||||
<div className="mx-auto max-w-5xl">
|
||||
<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
|
||||
{[
|
||||
{ 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) => (
|
||||
<div key={tech.name} className="flex flex-col items-center p-8 border border-border rounded-2xl bg-card/50 hover:bg-card hover:border-primary transition-all group">
|
||||
<tech.icon className={`h-12 w-12 text-muted-foreground mb-4 transition-colors ${tech.color}`} />
|
||||
<span className="font-bold text-lg">{tech.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Access Section */}
|
||||
<section className="py-24 bg-card border-t border-border">
|
||||
<div className="container px-6 lg:px-8 mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<h2 className="text-3xl font-extrabold mb-6 italic text-primary">"On ne rigole pas avec le rire. Surtout quand il s'agit de vous." 🐐</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
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.
|
||||
</p>
|
||||
<Link
|
||||
href="/docs/index"
|
||||
className="inline-flex items-center text-primary font-bold hover:gap-3 transition-all gap-2 text-lg"
|
||||
>
|
||||
Plongez dans le code (garanti sans crottin) <ArrowRight className="h-6 w-6" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<Link href="/docs/database" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
|
||||
<Database className="h-6 w-6 text-primary" />
|
||||
Modèle de Données
|
||||
</Link>
|
||||
<Link href="/docs/security" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
|
||||
<Shield className="h-6 w-6 text-primary" />
|
||||
Sécurité PGP
|
||||
</Link>
|
||||
<Link href="/docs/api-reference" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
|
||||
<Code className="h-6 w-6 text-primary" />
|
||||
Référence API
|
||||
</Link>
|
||||
<Link href="/docs/deployment" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
|
||||
<Server className="h-6 w-6 text-primary" />
|
||||
Déploiement
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
});
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
@import "tailwindcss";
|
||||
@import "fumadocs-ui/css/neutral.css";
|
||||
@import "fumadocs-ui/css/catppuccin.css";
|
||||
@import "fumadocs-ui/css/preset.css";
|
||||
|
||||
@@ -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 (
|
||||
<html lang="en" className={inter.className} suppressHydrationWarning>
|
||||
<html lang="fr" className={inter.className} suppressHydrationWarning>
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<RootProvider>{children}</RootProvider>
|
||||
</body>
|
||||
|
||||
@@ -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: (
|
||||
<span className="flex items-center gap-2 font-bold text-xl">
|
||||
<Image
|
||||
src="/memegoat-color.svg"
|
||||
alt="Memegoat Logo"
|
||||
width={64}
|
||||
height={64}
|
||||
className="w-8 h-8"
|
||||
/>
|
||||
<span>Memegoat</span>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
links: [
|
||||
{
|
||||
text: "Documentation",
|
||||
url: "/docs",
|
||||
active: "nested-url",
|
||||
},
|
||||
{
|
||||
text: "GitHub",
|
||||
url: "https://git.yidhra.fr/Mathis/memegoat",
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user