From f5f797eea793aefeb9fb899c632e282ad10ceed4 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 13:10:56 +0200
Subject: [PATCH] feat: Add functionality to display latest documentation

---
 app/components/QuickLinks.tsx | 23 +++++++++++++-
 app/layouts/DocsLayout.tsx    | 33 +++++++++++---------
 app/layouts/LayoutDefault.tsx |  7 +++--
 app/pages/+data.ts            |  5 +++
 app/partials/LatestDocs.tsx   | 31 +++++++++++++++++++
 app/services/DocCache.ts      | 58 +++++++++++++++++++++++++++++++++--
 6 files changed, 138 insertions(+), 19 deletions(-)
 create mode 100644 app/partials/LatestDocs.tsx

diff --git a/app/components/QuickLinks.tsx b/app/components/QuickLinks.tsx
index b2b46e0..0ba1139 100644
--- a/app/components/QuickLinks.tsx
+++ b/app/components/QuickLinks.tsx
@@ -3,14 +3,21 @@ import type { IconProps } from "./Icon";
 
 import { Icon } from "./Icon";
 import { Link } from "./Link";
+import clsx from "clsx";
 
 type QuickLinksProps = {
 	children: JSXElement;
+	class?: string;
 };
 
 export default function QuickLinks(props: QuickLinksProps) {
 	return (
-		<div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
+		<div
+			class={clsx(
+				"not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2",
+				props.class,
+			)}
+		>
 			{props.children}
 		</div>
 	);
@@ -20,6 +27,7 @@ type QuickLinkProps = {
 	title: string;
 	description: string;
 	href: string;
+	lastEdited?: Date;
 	icon: IconProps["icon"];
 };
 
@@ -36,6 +44,19 @@ QuickLinks.QuickLink = (props: QuickLinkProps) => (
 				</Link>
 			</h2>
 
+			{props.lastEdited && (
+				<p class="-mt-2 italic mb-2 text-xs text-slate-500">
+					<span class="font-semibold">Dernière modification :</span>{" "}
+					<time datetime={props.lastEdited.toISOString()}>
+						{props.lastEdited.toLocaleDateString("fr-FR", {
+							year: "numeric",
+							month: "2-digit",
+							day: "2-digit",
+						})}
+					</time>
+				</p>
+			)}
+
 			<p class="mt-1 text-sm text-slate-700">{props.description}</p>
 		</div>
 	</div>
diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index 1eee27d..c8e44b0 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -2,6 +2,7 @@ import type { JSXElement } from "solid-js";
 
 import { PrevNextLinks } from "@/components/PrevNextLinks";
 import { usePageContext } from "vike-solid/usePageContext";
+import { LatestDocs } from "@/partials/LatestDocs";
 import { clientOnly } from "vike-solid/clientOnly";
 import { clock } from "solid-heroicons/outline";
 import { navigation } from "@/libs/navigation";
@@ -21,21 +22,25 @@ export function DocsLayout(props: DocsLayoutProps) {
 
 	return (
 		<>
-			<main
-				id="article-content"
-				class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
-			>
-				<article>
-					<DocsHeader
-						title={pageContext.exports.frontmatter?.title}
-						estimatedReadingTime={pageContext.exports.readingTime?.text}
-					/>
-					<Prose>{props.children}</Prose>
-				</article>
-				<PrevNextLinks />
-			</main>
+			<div class="flex">
+				<main
+					id="article-content"
+					class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow"
+				>
+					<article>
+						<DocsHeader
+							title={pageContext.exports.frontmatter?.title}
+							estimatedReadingTime={pageContext.exports.readingTime?.text}
+						/>
+						<Prose>{props.children}</Prose>
+					</article>
+					<PrevNextLinks />
+				</main>
 
-			<TableOfContents />
+				<TableOfContents />
+			</div>
+
+			<LatestDocs />
 		</>
 	);
 }
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index 7dbd8d4..19c6858 100755
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -3,8 +3,8 @@ import type { JSXElement } from "solid-js";
 import { usePageContext } from "vike-solid/usePageContext";
 import { SmoothScroll } from "@/components/SmoothScroll";
 import { HeroSection } from "@/partials/HeroSection";
-import { Navigation } from "@/partials/Navigation";
 import { clientOnly } from "vike-solid/clientOnly";
+import { Navigation } from "@/partials/Navigation";
 import { Header } from "@/partials/Header";
 import { Footer } from "@/partials/Footer";
 import { DocsLayout } from "./DocsLayout";
@@ -40,7 +40,10 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 							<Navigation />
 						</div>
 					</div>
-					<DocsLayout>{props.children}</DocsLayout>
+
+					<div class="flex flex-col">
+						<DocsLayout>{props.children}</DocsLayout>
+					</div>
 				</div>
 
 				<Footer />
diff --git a/app/pages/+data.ts b/app/pages/+data.ts
index 06c477e..3472ac3 100644
--- a/app/pages/+data.ts
+++ b/app/pages/+data.ts
@@ -38,5 +38,10 @@ export async function data(pageContext: PageContext) {
 	return {
 		sections: doc?.sections || [],
 		frontmatter,
+		docs: docCache.orderByLastEdit({
+			limit: 2,
+			includedBasePaths: ["docs", "certifications"],
+			excludedFileNames: [cachePathname],
+		}),
 	};
 }
diff --git a/app/partials/LatestDocs.tsx b/app/partials/LatestDocs.tsx
new file mode 100644
index 0000000..8de1d6e
--- /dev/null
+++ b/app/partials/LatestDocs.tsx
@@ -0,0 +1,31 @@
+import type { Data } from "@/pages/+data";
+
+import QuickLinks from "@/components/QuickLinks";
+import { useData } from "vike-solid/useData";
+import { For } from "solid-js";
+
+export function LatestDocs() {
+	const data = useData<Data>();
+
+	return (
+		<section class="bg-violet-200 rounded-md p-4 m-6">
+			<h2 class="font-display text-3xl tracking-tight text-slate-900 text-center">
+				Dernières documentations
+			</h2>
+
+			<QuickLinks class="!mb-0 !mt-6">
+				<For each={data.docs}>
+					{(doc) => (
+						<QuickLinks.QuickLink
+							title={doc.frontmatter?.title || ""}
+							description={doc.frontmatter?.description || ""}
+							lastEdited={doc.lastEdit}
+							href={doc.filePath}
+							icon="presets"
+						/>
+					)}
+				</For>
+			</QuickLinks>
+		</section>
+	);
+}
diff --git a/app/services/DocCache.ts b/app/services/DocCache.ts
index e1c71e5..86d971d 100644
--- a/app/services/DocCache.ts
+++ b/app/services/DocCache.ts
@@ -1,5 +1,3 @@
-import type { FlexSearchData } from "./FlexSearchService";
-import type { TableOfContents } from "@/remarkHeadingId";
 import type { Node } from "@markdoc/markdoc";
 
 import { slugifyWithCounter } from "@sindresorhus/slugify";
@@ -16,6 +14,8 @@ export type SectionCache = {
 	frontmatter?: SectionFrontmatter;
 	markdocNode: Node;
 	sections: DocSection[];
+	lastEdit: Date;
+	filePath: string;
 };
 
 export type DocSection = {
@@ -32,6 +32,14 @@ type SectionFrontmatter = {
 	tags: string[];
 };
 
+type OrderConfig = {
+	limit: number;
+	includedBasePaths: string[];
+	excludedBasePaths: string[];
+	includedFileNames: string[];
+	excludedFileNames: string[];
+};
+
 class DocCache {
 	private static readonly pagesDir = path.join(__dirname, "pages");
 	private static instance: DocCache | null = null;
@@ -162,12 +170,17 @@ class DocCache {
 			.replace(/\+Page\.md(x)?$/, "")
 			.replace(/\/+/, "/")
 			.replace(/\/$/, "");
+		const lastEdit = new Date(
+			(await fs.stat(path.join(DocCache.pagesDir, file))).mtime,
+		);
 
 		this.cache.set(filePath, {
 			content,
 			frontmatter,
 			markdocNode,
 			sections: this.getTableOfContents(markdocNode),
+			lastEdit,
+			filePath,
 		});
 	}
 
@@ -207,6 +220,47 @@ class DocCache {
 		return this.cache.get(file);
 	}
 
+	public orderByLastEdit(customConfig?: Partial<OrderConfig>): SectionCache[] {
+		const config: OrderConfig = {
+			excludedBasePaths: [],
+			includedBasePaths: [],
+			excludedFileNames: [],
+			includedFileNames: [],
+			limit: 0,
+			...customConfig,
+		};
+
+		const sortedDocs = Array.from(this.cache.values())
+			.sort((a, b) => b.lastEdit.getTime() - a.lastEdit.getTime())
+			.filter((doc) => {
+				if (config.includedBasePaths.length > 0) {
+					return config.includedBasePaths.some((basePath) => {
+						return doc.filePath.startsWith(basePath);
+					});
+				}
+				if (config.excludedBasePaths.length > 0) {
+					return !config.excludedBasePaths.some((basePath) => {
+						return doc.filePath.startsWith(basePath);
+					});
+				}
+				if (config.includedFileNames.length > 0) {
+					return config.includedFileNames.some((fileName) => {
+						return doc.filePath.includes(fileName);
+					});
+				}
+				if (config.excludedFileNames.length > 0) {
+					return !config.excludedFileNames.some((fileName) => {
+						return doc.filePath.includes(fileName);
+					});
+				}
+				return true;
+			});
+
+		if (config.limit > 0) return sortedDocs.slice(0, config.limit);
+
+		return sortedDocs;
+	}
+
 	public waitingForCache(timeout: 20000): Promise<void> {
 		const timer = hrtime();