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

This commit is contained in:
Rick van Lieshout 2023-10-29 15:33:28 +01:00
parent e065f16fb5
commit 1c4c9d058a
3 changed files with 22 additions and 6 deletions

View File

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

19
gatsby-browser.tsx Normal file
View File

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

View File

@ -26,9 +26,9 @@ export const onRenderBody = ({
const currentUrl = `https://rickvanlieshout.com${pathname}`; const currentUrl = `https://rickvanlieshout.com${pathname}`;
setHeadComponents([ 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([ setPreBodyComponents([