diff --git a/.vscode/settings.json b/.vscode/settings.json index a059214..e8b3eb2 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,10 @@ "sonarlint.connectedMode.project": { "connectionId": "nhcarrigan", "projectKey": "nhcarrigan_website-headers" - } + }, + "cSpell.words": [ + "Adsense", + "nhcarrigan", + "noreferrer" + ] } diff --git a/src/index.ts b/src/index.ts index 0b3da41..ea6ca0b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,10 +5,10 @@ */ // #region Version -const version = "{{ version }}"; +const nhcarriganHeadersVersion = "{{ version }}"; console.log(` ======================================== -Loading NHCarrigan library v${version}. +Loading NHCarrigan library v${nhcarriganHeadersVersion}. Copyright (c) ${new Date().getFullYear(). toString()} NHCarrigan Changelog: https://codeberg.org/nhcarrigan/website-headers/releases @@ -19,12 +19,18 @@ Questions? Contact us at https://docs.nhcarrigan.com/about/contact // #endregion // #region Query Selectors -const head = document.querySelector("head"); -const body = document.querySelector("body"); -const title = document.querySelector("title"); -const description = document.querySelector(`meta[name="description"]`); +const nhcarriganHeadersHead = document.querySelector("head"); +const nhcarriganHeadersBody = document.querySelector("body"); +const nhcarriganHeadersTitle = document.querySelector("title"); +const nhcarriganHeadersDescription = document.querySelector( + `meta[name="description"]`, +); -const { href: url, hostname, pathname } = window.location; +const { + href: nhcarriganHeadersUrl, + hostname: nhcarriganHeadersHostname, + pathname: nhcarriganHeadersPathname, +} = window.location; // #endregion @@ -34,79 +40,96 @@ const { href: url, hostname, pathname } = window.location; * The title and description are set by each website. This should * only load things like open graph data and favicons. */ -const openGraphTitle = document.createElement("meta"); -openGraphTitle.setAttribute("property", "og:title"); -openGraphTitle.setAttribute("content", title?.innerText ?? "NHCarrigan"); -const openGraphDescription = document.createElement("meta"); -openGraphDescription.setAttribute("property", "og:description"); -openGraphDescription.setAttribute( +const nhcarriganHeadersOpenGraphTitle = document.createElement("meta"); +nhcarriganHeadersOpenGraphTitle.setAttribute("property", "og:title"); +nhcarriganHeadersOpenGraphTitle.setAttribute( "content", - description?.getAttribute("content") - // eslint-disable-next-line stylistic/max-len -- big boi string - ?? "We are a software engineering and community management consulting firm.", + nhcarriganHeadersTitle?.innerText ?? "NHCarrigan", ); -const openGraphImage = document.createElement("meta"); -openGraphImage.setAttribute("property", "og:image"); -openGraphImage.setAttribute( +const nhcarriganHeadersOpenGraphDescription = document.createElement("meta"); +nhcarriganHeadersOpenGraphDescription.setAttribute( + "property", + "og:description", +); +nhcarriganHeadersOpenGraphDescription.setAttribute( + "content", + nhcarriganHeadersDescription?.getAttribute("content") + ?? "We are a software engineering and community management consulting firm.", +); +const nhcarriganHeadersOpenGraphImage = document.createElement("meta"); +nhcarriganHeadersOpenGraphImage.setAttribute("property", "og:image"); +nhcarriganHeadersOpenGraphImage.setAttribute( "content", "https://cdn.nhcarrigan.com/og-image.png", ); -const openGraphUrl = document.createElement("meta"); -openGraphUrl.setAttribute("property", "og:url"); -openGraphUrl.setAttribute("content", url); -const openGraphType = document.createElement("meta"); -openGraphType.setAttribute("property", "og:type"); -openGraphType.setAttribute("content", "website"); +const nhcarriganHeadersOpenGraphUrl = document.createElement("meta"); +nhcarriganHeadersOpenGraphUrl.setAttribute("property", "og:url"); +nhcarriganHeadersOpenGraphUrl.setAttribute("content", nhcarriganHeadersUrl); +const nhcarriganHeadersOpenGraphType = document.createElement("meta"); +nhcarriganHeadersOpenGraphType.setAttribute("property", "og:type"); +nhcarriganHeadersOpenGraphType.setAttribute("content", "website"); -const twitterCard = document.createElement("meta"); -twitterCard.setAttribute("name", "twitter:card"); -twitterCard.setAttribute("content", "summary_large_image"); -const twitterDomain = document.createElement("meta"); -twitterDomain.setAttribute("name", "twitter:domain"); -twitterDomain.setAttribute("content", hostname); -const twitterUrl = document.createElement("meta"); -twitterUrl.setAttribute("name", "twitter:url"); -twitterUrl.setAttribute("content", url); -const twitterTitle = document.createElement("meta"); -twitterTitle.setAttribute("name", "twitter:title"); -twitterTitle.setAttribute("content", title?.innerText ?? "NHCarrigan"); -const twitterDescription = document.createElement("meta"); -twitterDescription.setAttribute("name", "twitter:description"); -twitterDescription.setAttribute( +const nhcarriganHeadersTwitterCard = document.createElement("meta"); +nhcarriganHeadersTwitterCard.setAttribute("name", "twitter:card"); +nhcarriganHeadersTwitterCard.setAttribute("content", "summary_large_image"); +const nhcarriganHeadersTwitterDomain = document.createElement("meta"); +nhcarriganHeadersTwitterDomain.setAttribute("name", "twitter:domain"); +nhcarriganHeadersTwitterDomain.setAttribute( "content", - description?.getAttribute("content") - // eslint-disable-next-line stylistic/max-len -- big boi string - ?? "We are a software engineering and community management consulting firm.", + nhcarriganHeadersHostname, +); +const nhcarriganHeadersTwitterUrl = document.createElement("meta"); +nhcarriganHeadersTwitterUrl.setAttribute("name", "twitter:url"); +nhcarriganHeadersTwitterUrl.setAttribute("content", nhcarriganHeadersUrl); +const nhcarriganHeadersTwitterTitle = document.createElement("meta"); +nhcarriganHeadersTwitterTitle.setAttribute("name", "twitter:title"); +nhcarriganHeadersTwitterTitle.setAttribute( + "content", + nhcarriganHeadersTitle?.innerText ?? "NHCarrigan", +); +const nhcarriganHeadersTwitterDescription = document.createElement("meta"); +nhcarriganHeadersTwitterDescription.setAttribute("name", "twitter:description"); +nhcarriganHeadersTwitterDescription.setAttribute( + "content", + nhcarriganHeadersDescription?.getAttribute("content") + ?? "We are a software engineering and community management consulting firm.", +); +const nhcarriganHeadersTwitterImage = document.createElement("meta"); +nhcarriganHeadersTwitterImage.setAttribute("name", "twitter:image"); +nhcarriganHeadersTwitterImage.setAttribute( + "content", + "https://cdn.nhcarrigan.com/og-image.png", ); -const twitterImage = document.createElement("meta"); -twitterImage.setAttribute("name", "twitter:image"); -twitterImage.setAttribute("content", "https://cdn.nhcarrigan.com/og-image.png"); // #endregion // #region Favicon -const favicon = document.createElement("link"); -favicon.rel = "icon"; -favicon.type = "image/x-icon"; -favicon.href = "https://cdn.nhcarrigan.com/favicon/favicon.ico"; -const appleTouchIcon = document.createElement("link"); -appleTouchIcon.rel = "apple-touch-icon"; -appleTouchIcon.href = "https://cdn.nhcarrigan.com/favicon/apple-touch-icon.png"; -const smallIcon = document.createElement("link"); -smallIcon.rel = "icon"; -smallIcon.href = "https://cdn.nhcarrigan.com/favicon/favicon-16x16.png"; -const largeIcon = document.createElement("link"); -largeIcon.rel = "icon"; -largeIcon.href = "https://cdn.nhcarrigan.com/favicon/favicon-32x32.png"; +const nhcarriganHeadersFavicon = document.createElement("link"); +nhcarriganHeadersFavicon.rel = "icon"; +nhcarriganHeadersFavicon.type = "image/x-icon"; +nhcarriganHeadersFavicon.href + = "https://cdn.nhcarrigan.com/favicon/favicon.ico"; +const nhcarriganHeadersAppleTouchIcon = document.createElement("link"); +nhcarriganHeadersAppleTouchIcon.rel = "apple-touch-icon"; +nhcarriganHeadersAppleTouchIcon.href + = "https://cdn.nhcarrigan.com/favicon/apple-touch-icon.png"; +const nhcarriganHeadersSmallIcon = document.createElement("link"); +nhcarriganHeadersSmallIcon.rel = "icon"; +nhcarriganHeadersSmallIcon.href + = "https://cdn.nhcarrigan.com/favicon/favicon-16x16.png"; +const nhcarriganHeadersLargeIcon = document.createElement("link"); +nhcarriganHeadersLargeIcon.rel = "icon"; +nhcarriganHeadersLargeIcon.href + = "https://cdn.nhcarrigan.com/favicon/favicon-32x32.png"; // #endregion // #region Styles -const styles = document.createElement("style"); -styles.id = "nhcarrigan-global-styles"; -styles.innerHTML = ` +const nhcarriganHeadersStyles = document.createElement("style"); +nhcarriganHeadersStyles.id = "nhcarrigan-global-styles"; +nhcarriganHeadersStyles.innerHTML = ` @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.nhcarrigan.com/fonts/OpenDyslexicMono-Regular.otf') format('opentype'); @@ -249,8 +272,8 @@ a { // #region Components -const footer = document.createElement("footer"); -footer.innerHTML = ` +const nhcarriganHeadersFooter = document.createElement("footer"); +nhcarriganHeadersFooter.innerHTML = `