fix: set current url tags in both ssr and browser space

gatsby-browser.ts

@@ -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";

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");
+  });
+};

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} />,
+    <meta data-url="currentUrl" key="og:url" property="og:url" content={currentUrl} />,
-    <link key="canonical" rel="canonical" href={currentUrl} />,
+    <link data-url="currentUrl" key="canonical" rel="canonical" href={currentUrl} />,
-    <meta property="test:rick" key="test:rick" content={currentUrl} />,
+    <meta data-url="currentUrl" property="test:rick" key="test:rick" content={currentUrl} />,
   ]);
 
   setPreBodyComponents([