app/buildPublicUrl.ts

@@ -2,7 +2,10 @@ import type { PageContext } from "vike/types";
 
 export function buildPublicUrl(pageContext: PageContext, resource: string) {
 	const { baseUrl } = pageContext;
-	const url = new URL(resource, baseUrl).toString();
+	const url = new URL(
+		resource,
+		process.env.NODE_ENV === "production" ? "https://memento-dev.fr" : baseUrl,
+	).toString();
 
 	return url;
 }

app/bun.lock

@@ -19,6 +19,7 @@
         "reading-time-estimator": "^1.14.0",
         "remark-frontmatter": "^5.0.0",
         "remark-heading-id": "^1.0.1",
+        "solid-devtools": "^0.34.0",
         "solid-heroicons": "^3.2.4",
         "solid-highlight-words": "^1.0.4",
         "solid-js": "^1.9.5",
@@ -86,6 +87,8 @@
 
     "@babel/plugin-syntax-jsx": ["@babel/plugin-syntax-jsx@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA=="],
 
+    "@babel/plugin-syntax-typescript": ["@babel/plugin-syntax-typescript@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ=="],
+
     "@babel/template": ["@babel/template@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/parser": "^7.27.0", "@babel/types": "^7.27.0" } }, "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA=="],
 
     "@babel/traverse": ["@babel/traverse@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.27.0", "@babel/parser": "^7.27.0", "@babel/template": "^7.27.0", "@babel/types": "^7.27.0", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA=="],
@@ -242,6 +245,8 @@
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@nothing-but/utils": ["@nothing-but/utils@0.17.0", "", {}, "sha512-TuCHcHLOqDL0SnaAxACfuRHBNRgNJcNn9X0GiH5H3YSDBVquCr3qEIG3FOQAuMyZCbu9w8nk2CHhOsn7IvhIwQ=="],
+
     "@pkgr/core": ["@pkgr/core@0.2.4", "", {}, "sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw=="],
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
@@ -292,6 +297,34 @@
 
     "@sindresorhus/transliterate": ["@sindresorhus/transliterate@1.6.0", "", { "dependencies": { "escape-string-regexp": "^5.0.0" } }, "sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ=="],
 
+    "@solid-devtools/debugger": ["@solid-devtools/debugger@0.27.0", "", { "dependencies": { "@nothing-but/utils": "~0.17.0", "@solid-devtools/shared": "^0.19.1", "@solid-primitives/bounds": "^0.1.0", "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/keyboard": "^1.3.0", "@solid-primitives/platform": "^0.2.0", "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/scheduled": "^1.5.0", "@solid-primitives/static-store": "^0.1.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.9.0" } }, "sha512-z0mqbjKmPUZ3x3mlEVTSbMmlMP+DTHjrk4P2L1Bk6352Oy7CkgAL6UNWuxVGlWGueK+9pL60n53045A0ofoEFQ=="],
+
+    "@solid-devtools/shared": ["@solid-devtools/shared@0.19.1", "", { "dependencies": { "@nothing-but/utils": "~0.17.0", "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/media": "^2.3.0", "@solid-primitives/refs": "^1.1.0", "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/scheduled": "^1.5.0", "@solid-primitives/static-store": "^0.1.0", "@solid-primitives/styles": "^0.1.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.9.0" } }, "sha512-bkPrp3dlDveEHqeOyO4v6XqikKCla0A4bGQ3uoYiilPv54LcDUKqrEvQjeSfw26oO8QbGSChetY8OUpT727yug=="],
+
+    "@solid-primitives/bounds": ["@solid-primitives/bounds@0.1.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/resize-observer": "^2.1.0", "@solid-primitives/static-store": "^0.1.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-mPci7ji6cvQIjexYaWgy75mLkip1YxlUijFa8B1PkuYfL13FtGrl1AzPvA2vq8fV5LNysuq3ghwgUFFwaqAR6w=="],
+
+    "@solid-primitives/event-listener": ["@solid-primitives/event-listener@2.4.0", "", { "dependencies": { "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-TSfR1PNTfojFEYGSxSMCnUhXsaYWBo4p+cm73QmWODa9YnaQAk6PB7VjzG2bOT2D817VlvuOqTj0Qdq+MZrdGg=="],
+
+    "@solid-primitives/keyboard": ["@solid-primitives/keyboard@1.3.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-0QX9O3eUaQorNNmXZn8a4efSByayIScVq+iGSwheD7m3SL/ACLM5oZlCNpTPLcemnVVfUPAHFiViEj86XpN5qw=="],
+
+    "@solid-primitives/media": ["@solid-primitives/media@2.3.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/static-store": "^0.1.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-7+C3wfbWnGE/WPoNsqcp/EeOP2aNNB92RCpsWhBth8E5lZo/J+rK6jMb7umVsK0zguT8HBpeXp1pFyFbcsHStA=="],
+
+    "@solid-primitives/platform": ["@solid-primitives/platform@0.2.0", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-x5Tmed85MxRYMNy7LKV88JBjR7ju7Vd8a56Q7CcyMN0i2sPY8/VB82uT/SFD4ncWDxYWOs5zmwBPQBDPHUNOsw=="],
+
+    "@solid-primitives/refs": ["@solid-primitives/refs@1.1.0", "", { "dependencies": { "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-QJ3bTSQOlPdHBP2m6llrT13FvVzAwZfx41lTN8lQrRwwcZoWb7kfCAjhaohPnwkAsQ6nJpLjtGfT5GOyuCA4tA=="],
+
+    "@solid-primitives/resize-observer": ["@solid-primitives/resize-observer@2.1.0", "", { "dependencies": { "@solid-primitives/event-listener": "^2.4.0", "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/static-store": "^0.1.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-tO9MDAc2pNjpcRd5B8LWbiR1qzIgvGZ5BtTuO98N7CLwd+fnuyGwtlQtJpz5hcLcTnoawpQYLpiRGNgaYW+YzQ=="],
+
+    "@solid-primitives/rootless": ["@solid-primitives/rootless@1.5.0", "", { "dependencies": { "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-YJ+EveQeDv9DLqfDKfsPAAGy2x3vBruoD23yn+nD2dT84QjoBxWT1T0qA0TMFjek6/xuN3flqnHtQ4r++4zdjg=="],
+
+    "@solid-primitives/scheduled": ["@solid-primitives/scheduled@1.5.0", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-RVw24IRNh1FQ4DCMb3OahB70tXIwc5vH8nhR4nNPsXwUPQeuOkLsDI5BlxaPk0vyZgqw9lDpufgI3HnPwplgDw=="],
+
+    "@solid-primitives/static-store": ["@solid-primitives/static-store@0.1.0", "", { "dependencies": { "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-6Coau0Kv/dF83UQpbBzc+gnJafOQAPe2jCbB4jmTK5UocsR5cWmFBVRm3kin+nZFVaO4WkuELw0cKANWgTVh8Q=="],
+
+    "@solid-primitives/styles": ["@solid-primitives/styles@0.1.0", "", { "dependencies": { "@solid-primitives/rootless": "^1.5.0", "@solid-primitives/utils": "^6.3.0" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-e+JquRLrplp17yObMBosPEltzexyvY/FDFovbRuWVUX4IYk4DvG4jUmvz6uW8nwwA817DEUYIYruj4ocMFWunQ=="],
+
+    "@solid-primitives/utils": ["@solid-primitives/utils@6.3.0", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-e7hTlJ1Ywh2+g/Qug+n4L1mpfxsikoIS4/sHE2EK9WatQt8UJqop/vE6bsLnXlU1xuhb/jo94Ah5Y27rd4wP7A=="],
+
     "@tailwindcss/node": ["@tailwindcss/node@4.1.4", "", { "dependencies": { "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.29.2", "tailwindcss": "4.1.4" } }, "sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw=="],
 
     "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.4", "@tailwindcss/oxide-darwin-arm64": "4.1.4", "@tailwindcss/oxide-darwin-x64": "4.1.4", "@tailwindcss/oxide-freebsd-x64": "4.1.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.4", "@tailwindcss/oxide-linux-arm64-musl": "4.1.4", "@tailwindcss/oxide-linux-x64-gnu": "4.1.4", "@tailwindcss/oxide-linux-x64-musl": "4.1.4", "@tailwindcss/oxide-wasm32-wasi": "4.1.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.4", "@tailwindcss/oxide-win32-x64-msvc": "4.1.4" } }, "sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ=="],
@@ -990,6 +1023,8 @@
 
     "sirv": ["sirv@3.0.1", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A=="],
 
+    "solid-devtools": ["solid-devtools@0.34.0", "", { "dependencies": { "@babel/core": "^7.26.10", "@babel/plugin-syntax-typescript": "^7.25.9", "@babel/types": "^7.26.10", "@solid-devtools/debugger": "^0.27.0", "@solid-devtools/shared": "^0.19.1" }, "peerDependencies": { "solid-js": "^1.9.0", "vite": "^2.2.3 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0" }, "optionalPeers": ["vite"] }, "sha512-TpMZMCoxVOe5rkWQoHzly8FTIdfnLu63lls+OfQCu8+EF+11SnkuzVJ7MxsezfXXRxZqtPMwaD20CK79Xvd5hg=="],
+
     "solid-heroicons": ["solid-heroicons@3.2.4", "", { "dependencies": { "solid-js": "^1.7.6" } }, "sha512-u6BMdFLvkJnvUGYzdFcWp1wvJ4hb9Y1zd3AbZ9D3bUmmiy9jBzNZX+RcqBCI2EKRvdQwAb1UB9bkESfqfhayDg=="],
 
     "solid-highlight-words": ["solid-highlight-words@1.0.4", "", { "peerDependencies": { "solid-js": "^1.8.0" } }, "sha512-Qxnc9W69HsGUl16wrpNwW3j3IvJaFVQjJM+BFfwU3WReSpPCzHSk7vUHzb9V1V3vh0azq1T73+OqtICmnSQ8CQ=="],

app/components/Icon.tsx

@@ -40,11 +40,11 @@ export function Icon(props: IconProps) {
 
 	return (
 		<svg
+			{...props}
 			aria-hidden="true"
 			viewBox="0 0 32 32"
 			fill="none"
 			class={clsx(props.class, iconStyles[props.color || "blue"])}
-			{...props}
 		>
 			<IconComponent id={id} color={props.color || "blue"} />
 		</svg>
@@ -53,13 +53,13 @@ export function Icon(props: IconProps) {
 
 const gradients = {
 	blue: [
-		{ stopColor: "#0EA5E9" },
+		{ "stop-color": "#0EA5E9" },
-		{ stopColor: "#22D3EE", offset: ".527" },
+		{ "stop-color": "#22D3EE", offset: ".527" },
-		{ stopColor: "#818CF8", offset: 1 },
+		{ "stop-color": "#818CF8", offset: 1 },
 	],
 	amber: [
-		{ stopColor: "#FDE68A", offset: ".08" },
+		{ "stop-color": "#FDE68A", offset: ".08" },
-		{ stopColor: "#F59E0B", offset: ".837" },
+		{ "stop-color": "#F59E0B", offset: ".837" },
 	],
 };
 

app/components/QuickLink.tsx

@@ -0,0 +1,31 @@
+import type { IconProps } from "./Icon";
+
+import { Icon } from "./Icon";
+import { Link } from "./Link";
+
+type QuickLinkProps = {
+	title: string;
+	description: string;
+	href: string;
+	icon: IconProps["icon"];
+};
+
+export default function QuickLink(props: QuickLinkProps) {
+	return (
+		<div class="group relative rounded-xl border border-slate-200">
+			<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
+			<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">
+					<Link href={props.href}>
+						<span class="absolute -inset-px rounded-xl" />
+						{props.title}
+					</Link>
+				</h2>
+
+				<p class="mt-1 text-sm text-slate-700">{props.description}</p>
+			</div>
+		</div>
+	);
+}

app/components/QuickLinks.tsx

@@ -1,44 +1,13 @@
 import type { JSXElement } from "solid-js";
-import type { IconProps } from "./Icon";
-
-import { Icon } from "./Icon";
-import { Link } from "./Link";
 
 type QuickLinksProps = {
 	children: JSXElement;
 };
 
-export function QuickLinks(props: QuickLinksProps) {
+export default function QuickLinks(props: QuickLinksProps) {
 	return (
 		<div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
 			{props.children}
 		</div>
 	);
 }
-
-type QuickLinkProps = {
-	title: string;
-	description: string;
-	href: string;
-	icon: IconProps["icon"];
-};
-
-export function QuickLink(props: QuickLinkProps) {
-	return (
-		<div class="group relative rounded-xl border border-slate-200">
-			<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
-			<div class="relative overflow-hidden rounded-xl p-6">
-				<Icon icon={props.icon} class="h-8 w-8" />
-
-				<h2 class="mt-4 font-display text-base text-slate-900">
-					<Link href={props.href}>
-						<span class="absolute -inset-px rounded-xl" />
-						{props.title}
-					</Link>
-				</h2>
-
-				<p class="mt-1 text-sm text-slate-700">{props.description}</p>
-			</div>
-		</div>
-	);
-}

app/icons/PresetsIcon.tsx

@@ -16,12 +16,8 @@ export function PresetsIcon(props: GradientProps) {
 					color={props.color}
 					gradientTransform="matrix(0 21 -21 0 20 3)"
 				/>
-				<Gradient
-					id={`${props.id}-gradient-dark`}
-					color={props.color}
-					gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
-				/>
 			</defs>
+			<g>
 				<circle cx={20} cy={12} r={12} fill={`url(#${props.id}-gradient)`} />
 				<g
 					class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
@@ -35,6 +31,7 @@ export function PresetsIcon(props: GradientProps) {
 					<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
 					<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
 				</g>
+			</g>
 		</>
 	);
 }

app/layouts/DocsLayout.tsx

@@ -9,6 +9,9 @@ import { Prose } from "@/components/Prose";
 import { MDXProvider } from "solid-jsx";
 import { Icon } from "solid-heroicons";
 
+import QuickLinks from "@/components/QuickLinks";
+import QuickLink from "@/components/QuickLink";
+
 type DocsLayoutProps = {
 	children: JSXElement;
 };
@@ -23,7 +26,7 @@ export function DocsLayout(props: DocsLayoutProps) {
 	} = usePageContext();
 
 	return (
-		<MDXProvider components={{}}>
+		<MDXProvider components={{ QuickLinks, QuickLink }}>
 			<div 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

app/package.json

@@ -24,6 +24,7 @@
 		"reading-time-estimator": "^1.14.0",
 		"remark-frontmatter": "^5.0.0",
 		"remark-heading-id": "^1.0.1",
+		"solid-devtools": "^0.34.0",
 		"solid-heroicons": "^3.2.4",
 		"solid-highlight-words": "^1.0.4",
 		"solid-js": "^1.9.5",

app/pages/docs/+Page.mdx

@@ -4,18 +4,12 @@ description: Plonge toi dans une documentation synthétique et concise, conçue
 tags: []
 ---
 
-import { QuickLink, QuickLinks } from "@/components/QuickLinks";
+import QuickLinks from "@/components/QuickLinks";
+import QuickLink from "@/components/QuickLink";
 
 ## Documentations rédigées
 
 <QuickLinks>
-  <QuickLink
-    title="Git"
-    description="Introduction et synthèse de l'outil Git"
-    href="/docs/git"
-    icon="git"
-  />
-  
   <QuickLink
     title="React"
     description="Introduction et synthèse de la bibliothèque React"

app/pages/docs/Button.tsx

@@ -0,0 +1,5 @@
+const Button = () => {
+	return <span>OK</span>;
+};
+
+export default Button;

app/server/vike-handler.ts

@@ -15,6 +15,7 @@ export const vikeHandler: Get<[], UniversalHandler> =
 			headersOriginal: request.headers,
 			baseUrl: config.BASE_URL,
 		};
+
 		const pageContext = await renderPage(pageContextInit);
 		const response = pageContext.httpResponse;
 

app/vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig({
 		vikeSolid(),
 		mdx({
 			jsxImportSource: "solid-jsx",
-			providerImportSource: "solid-mdx",
+			// providerImportSource: "solid-mdx",
 			remarkPlugins: [
 				remarkFrontmatter,
 				remarkHeadingId,