GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update function to handle multiple meta tags

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-22 12:34:54 +02:00
parent df2d18d3d9
commit a212258c07
2 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/pages/+Head.tsx
View File

@ -36,6 +36,9 @@ export default function HeadDefault() {
crossorigin="anonymous" crossorigin="anonymous"
/> />
<meta property="og:type" content="siteweb" />
<meta property="og:url" content={getCanonicalUrl()} />
<link <link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lexend:wght@400;500;700&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Lexend:wght@400;500;700&display=swap"
rel="stylesheet" rel="stylesheet"

48
app/pages/+onPageTransitionEnd.ts
View File

@ -9,30 +9,52 @@ export const onPageTransitionEnd: OnPageTransitionEndAsync = async (
NProgress.done(); NProgress.done();
NProgress.remove(); NProgress.remove();
updateCanonicalTag(pageContext); updateCanonicalsTag(pageContext);
}; };
const updateCanonicalTag = (pageContext: PageContext) => { const updateCanonicalsTag = (pageContext: PageContext) => {
const canonicalTag = findOrCreateCanonicalTag(); const canonicalNativeTag = findOrCreateTag<HTMLLinkElement>("link", {
rel: "canonical",
});
const canonicalOGTag = findOrCreateTag<HTMLMetaElement>("meta", {
property: "og:url",
});
const typeOGTag = findOrCreateTag<HTMLMetaElement>("meta", {
property: "og:type",
});
const localOGTag = findOrCreateTag<HTMLMetaElement>("meta", {
property: "og:locale",
});
const siteNameOGTag = findOrCreateTag<HTMLMetaElement>("meta", {
property: "og:site_name",
});
const canonicalUrl = buildPublicUrl( const canonicalUrl = buildPublicUrl(
pageContext, pageContext,
pageContext.urlParsed.pathname, pageContext.urlParsed.pathname,
); );
canonicalTag.href = canonicalUrl; canonicalNativeTag.setAttribute("href", canonicalUrl);
canonicalOGTag.setAttribute("content", canonicalUrl);
typeOGTag.setAttribute("content", "website");
localOGTag.setAttribute("content", "fr-FR");
siteNameOGTag.setAttribute("content", document.title);
}; };
const findOrCreateCanonicalTag = () => { const findOrCreateTag = <T>(
tagName: string,
attributes: Record<string, string>,
): T => {
const head = document.head; const head = document.head;
let canonicalTag: HTMLLinkElement | null = head.querySelector( let tag: HTMLElement | null = head.querySelector(tagName);
"link[rel=canonical]", if (tag) return tag as T;
);
if (canonicalTag) return canonicalTag;
canonicalTag = document.createElement("link"); tag = document.createElement(tagName);
canonicalTag.rel = "canonical"; for (const [key, value] of Object.entries(attributes)) {
tag.setAttribute(key, value);
}
document.head.appendChild(canonicalTag); document.head.appendChild(tag);
return canonicalTag; return tag as T;
}; };