rickvanlieshout.com/gatsby-ssr.tsx

43 lines
1.3 KiB
TypeScript
Raw Normal View History

import { RenderBodyArgs } from "gatsby";
import React from "react";
const setColorTheme = `
(function() {
const mode = localStorage.getItem('theme');
if (mode !== null && ['light', 'dark'].includes(mode)) {
document.documentElement.dataset.theme = mode;
return;
}
const preferredColorScheme = window.matchMedia('(prefers-color-scheme: dark)');
const hasMediaQueryPreference = typeof preferredColorScheme.matches === 'boolean';
if (hasMediaQueryPreference && preferredColorScheme.matches === true) {
document.documentElement.dataset.theme = 'dark';
} else {
document.documentElement.dataset.theme = 'light'
}
})();
`;
export const onRenderBody = ({
setPreBodyComponents,
setHeadComponents,
pathname,
}: RenderBodyArgs) => {
2023-10-29 15:41:11 +01:00
const currentUrl = `https://www.rickvanlieshout.com${pathname}`;
setHeadComponents([
<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([
React.createElement("script", {
key: "theme",
dangerouslySetInnerHTML: {
__html: setColorTheme,
},
}),
]);
};