From df2d18d3d94d7e3b3cbd90573b269a42938ca8f8 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Tue, 22 Apr 2025 12:23:01 +0200
Subject: [PATCH] refactor: Update canonical URL building logic

---
 app/buildPublicUrl.ts             |  4 +++-
 app/pages/+Head.tsx               | 10 +++++++++
 app/pages/+onPageTransitionEnd.ts | 34 +++++++++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/app/buildPublicUrl.ts b/app/buildPublicUrl.ts
index 07a4da9..ac28e0f 100644
--- a/app/buildPublicUrl.ts
+++ b/app/buildPublicUrl.ts
@@ -4,7 +4,9 @@ export function buildPublicUrl(pageContext: PageContext, resource: string) {
 	const { baseUrl } = pageContext;
 	const url = new URL(
 		resource,
-		process.env.NODE_ENV === "production" ? "https://memento-dev.fr" : baseUrl,
+		process.env.NODE_ENV === "production"
+			? "https://memento-dev.fr"
+			: baseUrl || "http://localhost:5500",
 	).toString();
 
 	return url;
diff --git a/app/pages/+Head.tsx b/app/pages/+Head.tsx
index 83ff130..0077d5b 100755
--- a/app/pages/+Head.tsx
+++ b/app/pages/+Head.tsx
@@ -1,13 +1,23 @@
+import { usePageContext } from "vike-solid/usePageContext";
 import blurCyanImage from "@/images/blur-cyan.webp";
+import { buildPublicUrl } from "@/buildPublicUrl";
 import logoUrl from "@/assets/logo.svg";
 
 // https://vike.dev/Head
 
 export default function HeadDefault() {
+	const pageContext = usePageContext();
+
+	const getCanonicalUrl = () => {
+		return buildPublicUrl(pageContext, pageContext.urlParsed.pathname);
+	};
+
 	return (
 		<>
 			<link rel="icon" href={logoUrl} />
 
+			<link rel="canonical" href={getCanonicalUrl()} />
+
 			<script
 				defer
 				src="https://cloud.umami.is/script.js"
diff --git a/app/pages/+onPageTransitionEnd.ts b/app/pages/+onPageTransitionEnd.ts
index c38412d..c10c5a3 100644
--- a/app/pages/+onPageTransitionEnd.ts
+++ b/app/pages/+onPageTransitionEnd.ts
@@ -1,8 +1,38 @@
-import type { OnPageTransitionEndAsync } from "vike/types";
+import type { OnPageTransitionEndAsync, PageContext } from "vike/types";
 
+import { buildPublicUrl } from "@/buildPublicUrl";
 import NProgress from "nprogress";
 
-export const onPageTransitionEnd: OnPageTransitionEndAsync = async () => {
+export const onPageTransitionEnd: OnPageTransitionEndAsync = async (
+	pageContext,
+) => {
 	NProgress.done();
 	NProgress.remove();
+
+	updateCanonicalTag(pageContext);
+};
+
+const updateCanonicalTag = (pageContext: PageContext) => {
+	const canonicalTag = findOrCreateCanonicalTag();
+	const canonicalUrl = buildPublicUrl(
+		pageContext,
+		pageContext.urlParsed.pathname,
+	);
+
+	canonicalTag.href = canonicalUrl;
+};
+
+const findOrCreateCanonicalTag = () => {
+	const head = document.head;
+	let canonicalTag: HTMLLinkElement | null = head.querySelector(
+		"link[rel=canonical]",
+	);
+	if (canonicalTag) return canonicalTag;
+
+	canonicalTag = document.createElement("link");
+	canonicalTag.rel = "canonical";
+
+	document.head.appendChild(canonicalTag);
+
+	return canonicalTag;
 };