refactor: Improve code readability and maintainability

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"];
 };
 
@@ -29,13 +37,26 @@ QuickLinks.QuickLink = (props: QuickLinkProps) => (
 		<div class="relative overflow-hidden rounded-xl p-6">
 			<Icon icon={props.icon} color="blue" class="h-8 w-8" />
 
-			<h2 class="mt-4 font-display text-base text-slate-900">
+			<h2 class="mt-4 font-display text-base text-slate-900 leading-5">
 				<Link href={props.href}>
 					<span class="absolute -inset-px rounded-xl" />
 					{props.title}
 				</Link>
 			</h2>
 
+			{props.lastEdited && (
+				<p class="mt-2 mb-4 italic 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>

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 />
 		</>
 	);
 }

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 />

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],
+		}),
 	};
 }

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>
+	);
+}

app/partials/Navigation.tsx

@@ -27,7 +27,9 @@ function NavigationItem(props: NavigationItemProps) {
 		return props.section.links.some((link) => checkIsLinkActive(link));
 	};
 
-	const [isOpened, setIsOpened] = createSignal(checkIsActive());
+	const [isOpened, setIsOpened] = createSignal(
+		checkIsActive() || pageContext.urlPathname === "/",
+	);
 
 	createEffect(() => {
 		// If the current URL path is the same as the link's href, set isOpened to true

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,72 @@ class DocCache {
 		return this.cache.get(file);
 	}
 
+	public orderByLastEdit(customConfig?: Partial<OrderConfig>): SectionCache[] {
+		const config: OrderConfig = {
+			excludedBasePaths: [],
+			includedBasePaths: [],
+			excludedFileNames: [],
+			includedFileNames: [],
+			limit: 0,
+			...customConfig,
+		};
+
+		const checkIfIncludedBasePath = (doc: SectionCache) => {
+			if (config.includedBasePaths.length > 0) {
+				return config.includedBasePaths.some((basePath) => {
+					return doc.filePath.startsWith(basePath);
+				});
+			}
+
+			return true;
+		};
+
+		const checkIfExcludedBasePaths = (doc: SectionCache) => {
+			if (config.excludedBasePaths.length > 0) {
+				return !config.excludedBasePaths.some((basePath) => {
+					return doc.filePath.startsWith(basePath);
+				});
+			}
+
+			return true;
+		};
+
+		const checkIfIncludedFileNames = (doc: SectionCache) => {
+			if (config.includedFileNames.length > 0) {
+				return config.includedFileNames.some((fileName) => {
+					return doc.filePath.includes(fileName);
+				});
+			}
+
+			return true;
+		};
+
+		const checkIfExcludedFileNames = (doc: SectionCache) => {
+			if (config.excludedFileNames.length > 0) {
+				return !config.excludedFileNames.some((fileName) => {
+					return doc.filePath.includes(fileName);
+				});
+			}
+
+			return true;
+		};
+
+		const sortedDocs = Array.from(this.cache.values())
+			.sort((a, b) => b.lastEdit.getTime() - a.lastEdit.getTime())
+			.filter((doc) => {
+				return [
+					checkIfIncludedBasePath(doc),
+					checkIfExcludedBasePaths(doc),
+					checkIfIncludedFileNames(doc),
+					checkIfExcludedFileNames(doc),
+				].every((check) => check === true);
+			});
+
+		if (config.limit > 0) return sortedDocs.slice(0, config.limit);
+
+		return sortedDocs;
+	}
+
 	public waitingForCache(timeout: 20000): Promise<void> {
 		const timer = hrtime();