feat(server): integrate base URL into vikeHandler context

app/buildPublicUrl.ts

@@ -1,11 +1,8 @@
-import { config } from "@/config";
+import type { PageContext } from "vike/types";
 
-export function buildPublicUrl(resource: string) {
+export function buildPublicUrl(pageContext: PageContext, resource: string) {
-	const { BASE_URL } = config;
+	const { baseUrl } = pageContext;
+	const url = new URL(resource, baseUrl).toString();
 
-	if (BASE_URL) {
+	return url;
-		return new URL(resource, BASE_URL).toString();
-	}
-
-	return resource;
 }

app/fastify-entry.ts

@@ -18,6 +18,7 @@ const root = __dirname;
 declare global {
 	namespace Vike {
 		interface PageContext {
+			baseUrl: string;
 			exports: {
 				frontmatter?: Partial<{
 					title: string;

app/pages/+config.ts

@@ -1,6 +1,5 @@
 import type { Config } from "vike/types";
 
-import { buildPublicUrl } from "@/buildPublicUrl";
 import Layout from "@/layouts/LayoutDefault";
 import vikeSolid from "vike-solid/config";
 
@@ -26,8 +25,6 @@ export default {
 		class: "flex min-h-full bg-white",
 	},
 
-	image: buildPublicUrl("/opengraph/default.png"),
-
 	prerender: true,
 	prefetchStaticAssets: "hover",
 

app/pages/+image.ts

@@ -0,0 +1,7 @@
+import type { PageContext } from "vike/types";
+
+import { buildPublicUrl } from "@/buildPublicUrl";
+
+export const image = (pageContext: PageContext) => {
+	return buildPublicUrl(pageContext, "/opengraph/default.png");
+};

app/pages/docs/+Page.mdx

@@ -0,0 +1,50 @@
+---
+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: []
+---
+
+import { QuickLink, QuickLinks } from "@/components/QuickLinks";
+
+## 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"
+    href="/docs/react"
+    icon="presets"
+  />
+</QuickLinks>
+
+## Documentations en cours de rédaction
+
+<QuickLinks>
+  <QuickLink
+    title="Merise"
+    description="Introduction et synthèse de la méthode Merise"
+    href="/docs/merise"
+    icon="presets"
+  />
+</QuickLinks>
+
+## Documentations à venir
+
+- HTML
+- CSS
+- JavaScript
+- PHP
+- SQL
+- Node.js
+- Express.js
+- UML
+- Maquettage
+
+Et bien d'autres encore ! 😄

app/server/vike-handler.ts

@@ -1,18 +1,28 @@
 /// <reference lib="webworker" />
-import { renderPage } from "vike/server";
+
 // TODO: stop using universal-middleware and directly integrate server middlewares instead and/or use vike-server https://vike.dev/server. (Bati generates boilerplates that use universal-middleware https://github.com/magne4000/universal-middleware to make Bati's internal logic easier. This is temporary and will be removed soon.)
 import type { Get, UniversalHandler } from "@universal-middleware/core";
 
-export const vikeHandler: Get<[], UniversalHandler> = () => async (request, context, runtime) => {
+import { renderPage } from "vike/server";
-  const pageContextInit = { ...context, ...runtime, urlOriginal: request.url, headersOriginal: request.headers };
+import { config } from "@/config";
-  const pageContext = await renderPage(pageContextInit);
-  const response = pageContext.httpResponse;
 
-  const { readable, writable } = new TransformStream();
+export const vikeHandler: Get<[], UniversalHandler> =
-  response.pipe(writable);
+	() => async (request, context, runtime) => {
+		const pageContextInit = {
+			...context,
+			...runtime,
+			urlOriginal: request.url,
+			headersOriginal: request.headers,
+			baseUrl: config.BASE_URL,
+		};
+		const pageContext = await renderPage(pageContextInit);
+		const response = pageContext.httpResponse;
 
-  return new Response(readable, {
+		const { readable, writable } = new TransformStream();
-    status: response.statusCode,
+		response.pipe(writable);
-    headers: response.headers,
+
-  });
+		return new Response(readable, {
-};
+			status: response.statusCode,
+			headers: response.headers,
+		});
+	};