From 96ab48361fa0abf4db98344130279c1f0ea9228e Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 13:54:00 +0200
Subject: [PATCH 1/3] style: remove commented out code and adjust layout styles

---
 app/layouts/DocsLayout.tsx    |  1 +
 app/layouts/LayoutDefault.tsx | 18 +++++++++++++++++-
 app/partials/LatestDocs.tsx   |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index c8e44b0..af1b0e1 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -34,6 +34,7 @@ export function DocsLayout(props: DocsLayoutProps) {
 						/>
 						<Prose>{props.children}</Prose>
 					</article>
+
 					<PrevNextLinks />
 				</main>
 
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index 19c6858..a1d5438 100755
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -31,6 +31,22 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 
 				{pageContext.urlPathname === "/" && <HeroSection />}
 
+				{/* Backup */}
+				{/* <div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
+					<div class="hidden lg:relative lg:block lg:flex-none">
+						<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
+						<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
+						<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
+						<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
+							<Navigation />
+						</div>
+					</div>
+
+					<div class="flex flex-col max-w-[calc(100vw-20rem)]">
+						<DocsLayout>{props.children}</DocsLayout>
+					</div>
+				</div> */}
+
 				<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
 					<div class="hidden lg:relative lg:block lg:flex-none">
 						<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
@@ -41,7 +57,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 						</div>
 					</div>
 
-					<div class="flex flex-col">
+					<div class="flex flex-col max-w-[calc(100vw-20rem)]">
 						<DocsLayout>{props.children}</DocsLayout>
 					</div>
 				</div>
diff --git a/app/partials/LatestDocs.tsx b/app/partials/LatestDocs.tsx
index f1ae701..9cf1789 100644
--- a/app/partials/LatestDocs.tsx
+++ b/app/partials/LatestDocs.tsx
@@ -8,7 +8,7 @@ export function LatestDocs() {
 	const data = useData<Data>();
 
 	return (
-		<section class="bg-violet-200 rounded-md p-4 m-4 lg:m-6">
+		<section class="bg-violet-200 rounded-md p-4 my-4 ml-4 lg:mr-2">
 			<h2 class="font-display text-3xl tracking-tight text-slate-900 text-center">
 				Dernières documentations
 			</h2>
-- 
2.45.2


From 51771c48713ebe3a8efeda8a1c6dbb898ea1e2c0 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 14:12:48 +0200
Subject: [PATCH 2/3] style: Update styles in various components

---
 app/components/Callout.tsx       |  2 +-
 app/components/PrevNextLinks.tsx |  2 +-
 app/components/SmoothScroll.tsx  |  2 ++
 app/layouts/DocsLayout.tsx       |  5 ++---
 app/layouts/LayoutDefault.tsx    | 18 +-----------------
 app/partials/LatestDocs.tsx      |  2 +-
 6 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/app/components/Callout.tsx b/app/components/Callout.tsx
index f2a3f3e..d29b799 100644
--- a/app/components/Callout.tsx
+++ b/app/components/Callout.tsx
@@ -42,7 +42,7 @@ export default function Callout(props: {
 	return (
 		<div
 			class={clsx(
-				"my-8 flex flex-col rounded-3xl p-6",
+				"my-8 flex flex-col w-full rounded-3xl p-6",
 				styles[props.type || "note"].container,
 				{ "cursor-pointer": props.collapsible },
 			)}
diff --git a/app/components/PrevNextLinks.tsx b/app/components/PrevNextLinks.tsx
index f166b5a..c621d27 100644
--- a/app/components/PrevNextLinks.tsx
+++ b/app/components/PrevNextLinks.tsx
@@ -111,7 +111,7 @@ export function PrevNextLinks() {
 	if (getNeighboringLinks().length === 0) return null;
 
 	return (
-		<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
+		<dl class="mt-12 mx-4 lg:mr-0 flex gap-4 border-t border-slate-200 pt-6">
 			{getNeighboringLinks()[0] && (
 				<PageLink
 					dir="previous"
diff --git a/app/components/SmoothScroll.tsx b/app/components/SmoothScroll.tsx
index f7dbdd1..f2267e9 100644
--- a/app/components/SmoothScroll.tsx
+++ b/app/components/SmoothScroll.tsx
@@ -72,6 +72,8 @@ export function SmoothScroll(props: SmoothScrollProps) {
 
 	const handleWheel = (event: WheelEvent) => {
 		if (isMobile()) return;
+		if (event.ctrlKey) return;
+		if (event.metaKey) return;
 
 		const hoveredElement = document.elementFromPoint(
 			event.clientX,
diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx
index af1b0e1..767658a 100644
--- a/app/layouts/DocsLayout.tsx
+++ b/app/layouts/DocsLayout.tsx
@@ -25,7 +25,7 @@ export function DocsLayout(props: DocsLayoutProps) {
 			<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"
+					class="max-w-2xl lg:max-w-none w-10 min-w-0 flex-auto px-4 py-16 lg:pr-0 lg:pl-8 xl:px-16 grow"
 				>
 					<article>
 						<DocsHeader
@@ -34,13 +34,12 @@ export function DocsLayout(props: DocsLayoutProps) {
 						/>
 						<Prose>{props.children}</Prose>
 					</article>
-
-					<PrevNextLinks />
 				</main>
 
 				<TableOfContents />
 			</div>
 
+			<PrevNextLinks />
 			<LatestDocs />
 		</>
 	);
diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx
index a1d5438..19c6858 100755
--- a/app/layouts/LayoutDefault.tsx
+++ b/app/layouts/LayoutDefault.tsx
@@ -31,22 +31,6 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 
 				{pageContext.urlPathname === "/" && <HeroSection />}
 
-				{/* Backup */}
-				{/* <div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
-					<div class="hidden lg:relative lg:block lg:flex-none">
-						<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
-						<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
-						<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
-						<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
-							<Navigation />
-						</div>
-					</div>
-
-					<div class="flex flex-col max-w-[calc(100vw-20rem)]">
-						<DocsLayout>{props.children}</DocsLayout>
-					</div>
-				</div> */}
-
 				<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
 					<div class="hidden lg:relative lg:block lg:flex-none">
 						<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
@@ -57,7 +41,7 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
 						</div>
 					</div>
 
-					<div class="flex flex-col max-w-[calc(100vw-20rem)]">
+					<div class="flex flex-col">
 						<DocsLayout>{props.children}</DocsLayout>
 					</div>
 				</div>
diff --git a/app/partials/LatestDocs.tsx b/app/partials/LatestDocs.tsx
index 9cf1789..1c8c051 100644
--- a/app/partials/LatestDocs.tsx
+++ b/app/partials/LatestDocs.tsx
@@ -8,7 +8,7 @@ export function LatestDocs() {
 	const data = useData<Data>();
 
 	return (
-		<section class="bg-violet-200 rounded-md p-4 my-4 ml-4 lg:mr-2">
+		<section class="bg-violet-200 rounded-md p-4 m-4 lg:mr-0">
 			<h2 class="font-display text-3xl tracking-tight text-slate-900 text-center">
 				Dernières documentations
 			</h2>
-- 
2.45.2


From 32ee8dd628eea3ac250be22a0c28efa3d9069bb7 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 14:19:25 +0200
Subject: [PATCH 3/3] feat: Update Snippet component to use For loop for
 rendering snippets

---
 app/components/Snippet.tsx | 38 +++++++++++++++++++-------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/app/components/Snippet.tsx b/app/components/Snippet.tsx
index 77bd30d..136e09c 100644
--- a/app/components/Snippet.tsx
+++ b/app/components/Snippet.tsx
@@ -131,25 +131,25 @@ export function Snippet(props: SnippetProps) {
 					</div>
 				</nav>
 
-				{selectedTab() && (
-					<div class="mt-6">
-						{selectedTab().code && (
-							<Highlight
-								class={clsx(
-									"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
-									props.dark && "dark text-white",
-								)}
-								language={(selectedTab() as SnippetTab).codeLanguage}
-								withLineNumbers={(selectedTab() as SnippetTab).withLineNumbers}
-							>
-								{(selectedTab() as SnippetTab).code}
-							</Highlight>
-						)}
-						{!selectedTab().code && (
-							<div class="pb-1">{(selectedTab() as CommonTab).children}</div>
-						)}
-					</div>
-				)}
+				<For each={props.snippets}>
+					{(tab) => (
+						<div class={clsx("mt-6", isActive(tab) ? "block" : "hidden")}>
+							{tab.code && (
+								<Highlight
+									class={clsx(
+										"!pt-0 !px-1 max-h-96 overflow-auto mb-2",
+										props.dark && "dark text-white",
+									)}
+									language={tab.codeLanguage}
+									withLineNumbers={tab.withLineNumbers}
+								>
+									{tab.code}
+								</Highlight>
+							)}
+							{!tab.code && <div class="pb-1">{tab.children}</div>}
+						</div>
+					)}
+				</For>
 			</div>
 		</div>
 	);
-- 
2.45.2