From 1c4c9d058a7382ebe52dd1b188b22ca8d7a185c3 Mon Sep 17 00:00:00 2001
From: Mastermindzh <info@rickvanlieshout.com>
Date: Sun, 29 Oct 2023 15:33:28 +0100
Subject: [PATCH] fix: set current url tags in both ssr and browser space

---
 gatsby-browser.ts  |  3 ---
 gatsby-browser.tsx | 19 +++++++++++++++++++
 gatsby-ssr.tsx     |  6 +++---
 3 files changed, 22 insertions(+), 6 deletions(-)
 delete mode 100644 gatsby-browser.ts
 create mode 100644 gatsby-browser.tsx

diff --git a/gatsby-browser.ts b/gatsby-browser.ts
deleted file mode 100644
index 5d93189..0000000
--- a/gatsby-browser.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import "./src/assets/scss/main.scss";
-import "./src/assets/scss/prism/github.scss";
-import "./src/assets/scss/prism/prism-tomorrow.scss";
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
new file mode 100644
index 0000000..d378136
--- /dev/null
+++ b/gatsby-browser.tsx
@@ -0,0 +1,19 @@
+import "./src/assets/scss/main.scss";
+import "./src/assets/scss/prism/github.scss";
+import "./src/assets/scss/prism/prism-tomorrow.scss";
+
+export const onRouteUpdate = ({ location }: { location: { pathname: string } }) => {
+  const elements = document.querySelectorAll("[data-url]");
+  const currentUrl = `https://rickvanlieshout.com${location.pathname ?? ""}`;
+
+  const setAttributeIfAvailable = (element: Element, elementIdentifier: string) => {
+    if (element.hasAttribute(elementIdentifier)) {
+      element.setAttribute(elementIdentifier, currentUrl);
+    }
+  };
+
+  elements.forEach((element) => {
+    setAttributeIfAvailable(element, "href");
+    setAttributeIfAvailable(element, "content");
+  });
+};
diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
index 5ca9b0f..a6487e6 100644
--- a/gatsby-ssr.tsx
+++ b/gatsby-ssr.tsx
@@ -26,9 +26,9 @@ export const onRenderBody = ({
   const currentUrl = `https://rickvanlieshout.com${pathname}`;
 
   setHeadComponents([
-    <meta key="og:url" property="og:url" content={currentUrl} />,
-    <link key="canonical" rel="canonical" href={currentUrl} />,
-    <meta property="test:rick" key="test:rick" content={currentUrl} />,
+    <meta data-url="currentUrl" key="og:url" property="og:url" content={currentUrl} />,
+    <link data-url="currentUrl" key="canonical" rel="canonical" href={currentUrl} />,
+    <meta data-url="currentUrl" property="test:rick" key="test:rick" content={currentUrl} />,
   ]);
 
   setPreBodyComponents([