From f56de743c7476109501644d732dffe22ad5a4201 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Sun, 13 Apr 2025 17:55:45 +0200 Subject: [PATCH] feat: Add certification and documentation pages --- app/data/certifications/page.md | 25 ++++++++++++++++++ app/data/docs/documentations/page.md | 27 ++++++++++++++++++++ app/data/docs/index/page.md | 2 +- app/lib/navigation.ts | 10 +++++++- app/pages/+Head.tsx | 3 --- app/pages/+config.ts | 7 ++--- app/pages/docs/+route.ts | 2 +- app/pages/index/+Page.tsx | 19 ++++++++++---- app/pages/index/+data.ts | 36 ++++++++++++++++++++++++++ app/pages/index/Counter.tsx | 17 ------------- app/pages/tp/+Page.tsx | 16 ++++++++++++ app/pages/tp/+data.ts | 38 ++++++++++++++++++++++++++++ app/pages/tp/+route.ts | 16 ++++++++++++ app/services/DocsService.ts | 1 + 14 files changed, 188 insertions(+), 31 deletions(-) create mode 100644 app/data/certifications/page.md create mode 100644 app/data/docs/documentations/page.md create mode 100644 app/pages/index/+data.ts delete mode 100644 app/pages/index/Counter.tsx create mode 100644 app/pages/tp/+Page.tsx create mode 100644 app/pages/tp/+data.ts create mode 100644 app/pages/tp/+route.ts diff --git a/app/data/certifications/page.md b/app/data/certifications/page.md new file mode 100644 index 0000000..cdf7e53 --- /dev/null +++ b/app/data/certifications/page.md @@ -0,0 +1,25 @@ +--- +title: Documentation Memento Dev +description: Plonge toi dans une documentation synthétique et concise, conçue pour les développeurs ou passionnés de l'information en quête de savoir ! +tags: [] +--- + +Toi qui vient d'arriver sur cette plateforme, sache que si tu cherches un coup de main pour mieux comprendre certaines notions dans le développement, tu es tombé au bon endroit ! + +En prime, tu trouveras également des synthèses de certains référentiels de titres professionnels ! 🎉 + +## Pourquoi cette plateforme ? + +À l'instar du [MDN Web Docs](https://developer.mozilla.org/fr/) et feu **Le Site du Zéro**, cette plateforme a pour objectif de te fournir des ressources de qualité pour t'aider à te perfectionner dans le développement. + +## Contenu du Memento + +Le contenu de cette plateforme est divisé en plusieurs sections : + +- **Documentation** : Une documentation synthétique _(mais complète et détaillée)_ sur les différentes technologies du développement web. +- **Référentiels** : Des synthèses de référentiels de titres professionnels pour t'aider à te préparer aux examens. + +Les différents contenus ne sont pas uniquement destinées aux développeurs, mais également aux passionnés de l'information en quête de savoir ! +Il est donc possible que tu trouves des articles qui ne te concernent pas directement, mais qui pourraient t'intéresser tout de même ! 😊 + +Par contre je te préviens : certains concepts peuvent être un peu techniques et nécessiter un peu de temps pour être compris. diff --git a/app/data/docs/documentations/page.md b/app/data/docs/documentations/page.md new file mode 100644 index 0000000..2ccd434 --- /dev/null +++ b/app/data/docs/documentations/page.md @@ -0,0 +1,27 @@ +--- +title: Documentations du Memento +description: Plonge toi dans une documentation synthétique et concise, conçue pour les développeurs ou passionnés de l'information en quête de savoir ! +tags: [] +--- + +## Documentations rédigées + +- [React](/docs/react) + +## Documentations en cours de rédaction + +- [Merise](/docs/merise) + +## Documentations à venir + +- HTML +- CSS +- JavaScript +- PHP +- SQL +- Node.js +- Express.js +- UML +- Maquettage + +Et bien d'autres encore ! 😄 diff --git a/app/data/docs/index/page.md b/app/data/docs/index/page.md index cdf7e53..2904ef4 100644 --- a/app/data/docs/index/page.md +++ b/app/data/docs/index/page.md @@ -1,5 +1,5 @@ --- -title: Documentation Memento Dev +title: Synthèses et ressources pour développeurs description: Plonge toi dans une documentation synthétique et concise, conçue pour les développeurs ou passionnés de l'information en quête de savoir ! tags: [] --- diff --git a/app/lib/navigation.ts b/app/lib/navigation.ts index 31edb59..1d64643 100644 --- a/app/lib/navigation.ts +++ b/app/lib/navigation.ts @@ -1,10 +1,16 @@ export const navigation = [ { title: "Préambule", - links: [{ title: "Memento Dev", href: "/docs" }], + type: "global", + links: [ + { title: "Memento Dev", href: "/" }, + { title: "Certifications", href: "/tp" }, + { title: "Documentations", href: "/docs" }, + ], }, { title: "React", + type: "documentation", links: [ { title: "Introduction", href: "/docs/react" }, { title: "Initialisation", href: "/docs/react/initialisation" }, @@ -18,6 +24,7 @@ export const navigation = [ }, { title: "Merise", + type: "documentation", links: [ { title: "Introduction", href: "/docs/merise" }, { title: "Dictionnaire de données", href: "/docs/merise/dictionnaire-de-donnees" }, @@ -26,6 +33,7 @@ export const navigation = [ }, { title: "Communauté", + type: "global", links: [ { title: "Influenceurs", href: "/docs/communaute/influenceurs" }, { title: "Partages et réutilisations", href: "/docs/communaute/partages" }, diff --git a/app/pages/+Head.tsx b/app/pages/+Head.tsx index 4f22d8b..429fd8a 100644 --- a/app/pages/+Head.tsx +++ b/app/pages/+Head.tsx @@ -1,6 +1,3 @@ -// https://vike.dev/Head - -import React from "react"; import logoUrl from "../assets/logo.svg"; export default function HeadDefault() { diff --git a/app/pages/+config.ts b/app/pages/+config.ts index febd6b2..9ca5c86 100644 --- a/app/pages/+config.ts +++ b/app/pages/+config.ts @@ -1,6 +1,7 @@ -import vikeReact from "vike-react/config"; import type { Config } from "vike/types"; -import Layout from "../layouts/LayoutDefault.js"; + +import Layout from "@/layouts/LayoutDefault"; +import vikeReact from "vike-react/config"; // Default config (can be overridden by pages) // https://vike.dev/config @@ -13,7 +14,7 @@ export default { // https://vike.dev/head-tags title: "Memento Dev", - description: "Demo showcasing Vike", + description: "Découvrez des synthèses et ressources open-source dans le développement informatique.", htmlAttributes: { class: "h-full antialiased", diff --git a/app/pages/docs/+route.ts b/app/pages/docs/+route.ts index 1552b94..6d0b182 100644 --- a/app/pages/docs/+route.ts +++ b/app/pages/docs/+route.ts @@ -4,7 +4,7 @@ const routeRegex = /^\/docs\/(.*)$/; export function route(pageContext: PageContext) { if (pageContext.urlPathname === "/docs") { - return { routeParams: { key: "index" } }; + return { routeParams: { key: "documentations" } }; } const match = pageContext.urlPathname.match(routeRegex); diff --git a/app/pages/index/+Page.tsx b/app/pages/index/+Page.tsx index ee586a9..a675f16 100644 --- a/app/pages/index/+Page.tsx +++ b/app/pages/index/+Page.tsx @@ -1,7 +1,16 @@ +import type { Data } from "./+data"; + +import { useData } from "vike-react/useData"; +import Markdoc from "@markdoc/markdoc"; +import nodes from "@/markdoc/nodes"; +import tags from "@/markdoc/tags"; +import React from "react"; + export default function Page() { - return ( -
-

My Vike app

-
- ); + const { doc, estimatedReadingTime } = useData(); + + const parsedDoc = Markdoc.parse(doc.content); + const transformedDoc = Markdoc.transform(parsedDoc, { nodes, tags, variables: { estimatedReadingTime } }); + + return Markdoc.renderers.react(transformedDoc, React); } diff --git a/app/pages/index/+data.ts b/app/pages/index/+data.ts new file mode 100644 index 0000000..d96d7f3 --- /dev/null +++ b/app/pages/index/+data.ts @@ -0,0 +1,36 @@ +import type { PageContext } from "vike/types"; + +import { snippetsService } from "@/services/SnippetsService"; +import { docsService } from "@/services/DocsService"; +import { readingTime } from "reading-time-estimator"; +import { useConfig } from "vike-react/useConfig"; +import buildTitle from "@/pages/buildTitle"; +import { render } from "vike/abort"; + +export type Data = Awaited>; + +export async function data(pageContext: PageContext) { + const config = useConfig(); + + const doc = await docsService.getDoc("docs", "index"); + + if (!doc) { + throw render(404); + } + + const readingTimeObject = readingTime(doc.content, 300, "fr"); + + config({ + title: buildTitle(doc.title), + description: doc.description, + }); + + docsService.transform(doc); + + const snippets = Array.from(doc.snippets).map((snippetPath) => ({ + path: snippetPath, + content: snippetsService.getFromCache(snippetPath), + })); + + return { doc, estimatedReadingTime: readingTimeObject.text, snippets }; +} diff --git a/app/pages/index/Counter.tsx b/app/pages/index/Counter.tsx deleted file mode 100644 index b44b3a3..0000000 --- a/app/pages/index/Counter.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { useState } from "react"; - -export function Counter() { - const [count, setCount] = useState(0); - - return ( - - ); -} diff --git a/app/pages/tp/+Page.tsx b/app/pages/tp/+Page.tsx new file mode 100644 index 0000000..a675f16 --- /dev/null +++ b/app/pages/tp/+Page.tsx @@ -0,0 +1,16 @@ +import type { Data } from "./+data"; + +import { useData } from "vike-react/useData"; +import Markdoc from "@markdoc/markdoc"; +import nodes from "@/markdoc/nodes"; +import tags from "@/markdoc/tags"; +import React from "react"; + +export default function Page() { + const { doc, estimatedReadingTime } = useData(); + + const parsedDoc = Markdoc.parse(doc.content); + const transformedDoc = Markdoc.transform(parsedDoc, { nodes, tags, variables: { estimatedReadingTime } }); + + return Markdoc.renderers.react(transformedDoc, React); +} diff --git a/app/pages/tp/+data.ts b/app/pages/tp/+data.ts new file mode 100644 index 0000000..0761ff1 --- /dev/null +++ b/app/pages/tp/+data.ts @@ -0,0 +1,38 @@ +import type { PageContext } from "vike/types"; + +import { snippetsService } from "@/services/SnippetsService"; +import { docsService } from "@/services/DocsService"; +import { readingTime } from "reading-time-estimator"; +import { useConfig } from "vike-react/useConfig"; +import buildTitle from "@/pages/buildTitle"; +import { render } from "vike/abort"; + +export type Data = Awaited>; + +export async function data(pageContext: PageContext) { + const config = useConfig(); + + const { key } = pageContext.routeParams; + + const doc = await docsService.getDoc("certifications", key); + + if (!doc) { + throw render(404); + } + + const readingTimeObject = readingTime(doc.content, 300, "fr"); + + config({ + title: buildTitle(doc.title), + description: doc.description, + }); + + docsService.transform(doc); + + const snippets = Array.from(doc.snippets).map((snippetPath) => ({ + path: snippetPath, + content: snippetsService.getFromCache(snippetPath), + })); + + return { doc, estimatedReadingTime: readingTimeObject.text, snippets }; +} diff --git a/app/pages/tp/+route.ts b/app/pages/tp/+route.ts new file mode 100644 index 0000000..1552b94 --- /dev/null +++ b/app/pages/tp/+route.ts @@ -0,0 +1,16 @@ +import type { PageContext } from "vike/types"; + +const routeRegex = /^\/docs\/(.*)$/; + +export function route(pageContext: PageContext) { + if (pageContext.urlPathname === "/docs") { + return { routeParams: { key: "index" } }; + } + + const match = pageContext.urlPathname.match(routeRegex); + if (!match) return false; + + const [, key] = match; + + return { routeParams: { key } }; +} diff --git a/app/services/DocsService.ts b/app/services/DocsService.ts index 6d85eb4..b7f7d98 100644 --- a/app/services/DocsService.ts +++ b/app/services/DocsService.ts @@ -152,6 +152,7 @@ class DocsService { public async getDoc(namespace: "docs" | "certifications", key: string) { try { await this.fetchDocs(); + console.log(this.cache.keys()); const doc = this.getFromCache(`/${namespace}/${key}`); if (!doc) {