website-headers/src/index.ts

/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

// #region Version
const nhcarriganHeadersVersion = "{{ version }}";
console.log(`
========================================
Loading NHCarrigan library v${nhcarriganHeadersVersion}.
Copyright (c) ${new Date().getFullYear().
  toString()} NHCarrigan
Changelog: https://codeberg.org/nhcarrigan/website-headers/releases
Licensed under our public license: https://docs.nhcarrigan.com/legal/license
Questions? Contact us at https://docs.nhcarrigan.com/about/contact
========================================
`);
// #endregion

// #region Query Selectors
const nhcarriganHeadersHead = document.querySelector("head");
const nhcarriganHeadersBody = document.querySelector("body");
const nhcarriganHeadersTitle = document.querySelector("title");
const nhcarriganHeadersDescription = document.querySelector(
  `meta[name="description"]`,
);

const {
  href: nhcarriganHeadersUrl,
  hostname: nhcarriganHeadersHostname,
  pathname: nhcarriganHeadersPathname,
} = window.location;

// #endregion

// #region Metadata and Open Graph

/**
 * The title and description are set by each website. This should
 * only load things like open graph data and favicons.
 */
const nhcarriganHeadersOpenGraphTitle = document.createElement("meta");
nhcarriganHeadersOpenGraphTitle.setAttribute("property", "og:title");
nhcarriganHeadersOpenGraphTitle.setAttribute(
  "content",
  nhcarriganHeadersTitle?.innerText ?? "NHCarrigan",
);
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 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 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",
  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",
);

// #endregion

// #region Favicon

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 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');
}

:root {
  --foreground: #2a0a18;
  --background: #ffb6c1bb;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'OpenDyslexic', monospace;
  cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
  min-height: 100vh;
  min-width: 100vw;
}
body::before {
  background: url(https://cdn.nhcarrigan.com/background.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  z-index: -1;
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  pointer-events: none;
}
main {
  color: var(--foreground);
  background-color: var(--background);
  text-align: center;
  border-radius: 10px;
  width: 95%;
  max-width: 1080px;
  margin: auto;
  margin-bottom: 85px;
  padding: 10px;
}
footer {
  width: 100%;
  color: var(--foreground);
  background-color: var(--background);
  position: fixed;
  bottom: 0;
  height: 75px;
  padding: 0 10px;
}
#footer-inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
}
#footer-badge-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  justify-content: space-around;
}
#show-socials-button, #theme-select-button {
  background: none;
  border: none;
  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
  color: var(--foreground);
  font-size: 1rem;
  font-family: 'OpenDyslexic', monospace;
}
#show-socials-button > i, #theme-select-button > i {
  font-size: 1.5rem;
}
a {
  color: unset;
  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
}
#tree-nation-offset-website {
  display: flex;
  align-items: center;
}
#social-list {
  position: absolute;
  bottom: 75px;
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 400px;
  padding: 10px;
  background-color: var(--background);
  color: var(--foreground);
  border-radius: 10px;
  border: 1px solid var(--foreground);
  display: none;
  z-index: 1000;
}
.social-list-item {
  padding: 10px;
}
.social-list-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
.social-list-divider {
  border: 0.5px solid var(--foreground);
}
.social-list-item:hover {
  background-color: var(--foreground);
  color: var(--background);
}
.is-dark {
  --foreground: #ffb6c1;
  --background: #2a0a18bb;
}
@media screen and (max-width: 625px) {
  #tree-nation-offset-website {
    display: none;
  }
  footer, #footer-inner-container {
    height: 50px;
    justify-content: space-around;
  }
  main {
    margin-bottom: 60px;
  }
}
`;

// #endregion

// #region Components

const nhcarriganHeadersFooter = document.createElement("footer");
nhcarriganHeadersFooter.innerHTML = `
<div id="footer-inner-container">
<p>&copy; <a href="https://nhcarrigan.com" target="_blank">Naomi Carrigan</a></p>
<button id="show-socials-button" type="button">
  <i class="fa-solid fa-share-nodes"></i> Connect with Us
</button>
<button id="theme-select-button" type="button">
  <i id="theme-select-icon" class="fa-solid fa-moon"></i> Toggle Theme
</button>
<a href="https://buy.stripe.com/cN24iTfqu1j6b3afZ2" target="_blank" rel="noreferrer">
  <img src="https://cdn.nhcarrigan.com/donate.png" alt="Donate" style="width: 70px; height: 70px;">
</a>
<div id="tree-nation-offset-website"></div>
</div>
<div id="social-list">
  <div class="social-list-item">
    <a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-discord"></i><span>Join our Discord~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://forum.nhcarrigan.com" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-discourse"></i><span>Sign up for our forum~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://git.nhcarrigan.com" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-git-alt"></i><span>Check out our source code~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://bsky.app/profile/nhcarrigan.com" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-bluesky"></i><span>Follow us on Bluesky~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://www.linkedin.com/company/nhcarrigan" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-linkedin"></i><span>Connect with us on LinkedIn~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://www.reddit.com/r/nhcarrigan/" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-reddit"></i><span>Join our subreddit~!</span>
    </a>
  </div>
  <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://www.youtube.com/@naomilgbt" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-youtube"></i><span>Subscribe to our YouTube~!</span>
    </a>
  </div>
    <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://twitch.tv/naomilgbt" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-twitch"></i><span>Subscribe to our Twitch~!</span>
    </a>
  </div>
    <hr class="social-list-divider" />
  <div class="social-list-item">
    <a href="https://x.com/nhcarrigan1" target="_blank" rel="noreferrer">
      <i class="fa-brands fa-twitter"></i><span>We are even on Twitter~!</span>
    </a>
  </div>
</div>
`;
// #region Scripts

const nhcarriganHeadersTreeNation = document.createElement("script");
nhcarriganHeadersTreeNation.src
  = "https://widgets.tree-nation.com/js/widgets/v1/widgets.min.js?v=1.0";
const nhcarriganHeadersTreeNationBottom = document.createElement("script");
nhcarriganHeadersTreeNationBottom.defer = true;
nhcarriganHeadersTreeNationBottom.async = true;
nhcarriganHeadersTreeNationBottom.innerHTML = `
const interval = setInterval(() => {
  const tree = document.querySelector("#tree-nation-offset-website");
  if (!tree) {
    console.log("DOM has not hydrated yet, cannot load TreeNation badge.");
    return;
  }
  TreeNationOffsetWebsite({
    code: "a17464e0cd351220",
    lang: "en",
    theme: "dark",
  }).render("#tree-nation-offset-website");
  clearInterval(interval);
}, 1000);
`;
const nhcarriganHeadersFontAwesome = document.createElement("script");
nhcarriganHeadersFontAwesome.src = "https://kit.fontawesome.com/f949111719.js";
const nhcarriganHeadersAnalytics = document.createElement("script");
nhcarriganHeadersAnalytics.defer = true;
nhcarriganHeadersAnalytics.setAttribute("domain", "nhcarrigan.com");
nhcarriganHeadersAnalytics.src
  // eslint-disable-next-line stylistic/max-len
  = "https://analytics.nhcarrigan.com/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js";
nhcarriganHeadersAnalytics.setAttribute(
  "event-domain",
  nhcarriganHeadersHostname,
);
nhcarriganHeadersAnalytics.setAttribute("data-domain", "nhcarrigan.com");
nhcarriganHeadersAnalytics.setAttribute(
  "event-page",
  nhcarriganHeadersTitle?.innerText ?? "Unknown Page",
);
nhcarriganHeadersAnalytics.setAttribute(
  "event-path",
  nhcarriganHeadersPathname,
);
const nhcarriganHeadersAnalytics2 = document.createElement("script");
nhcarriganHeadersAnalytics2.innerHTML = `
window.plausible = window.plausible ??
function() { 
  (window.plausible.q = window.plausible.q ?? []).push(arguments) 
}
`;
const nhcarriganHeadersGoogleAdsense = document.createElement("script");
nhcarriganHeadersGoogleAdsense.async = true;
nhcarriganHeadersGoogleAdsense.src
  // eslint-disable-next-line stylistic/max-len -- big boi string
  = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3569924701890974";
nhcarriganHeadersGoogleAdsense.setAttribute("crossorigin", "anonymous");

// #endregion

// #region Inject Elements

nhcarriganHeadersHead?.appendChild(nhcarriganHeadersOpenGraphTitle);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersOpenGraphDescription);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersOpenGraphImage);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersOpenGraphUrl);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersOpenGraphType);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterCard);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterDomain);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterUrl);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterTitle);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterDescription);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTwitterImage);

nhcarriganHeadersHead?.appendChild(nhcarriganHeadersFavicon);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersAppleTouchIcon);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersSmallIcon);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersLargeIcon);

nhcarriganHeadersHead?.appendChild(nhcarriganHeadersStyles);

nhcarriganHeadersHead?.appendChild(nhcarriganHeadersTreeNation);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersFontAwesome);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersAnalytics);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersAnalytics2);
nhcarriganHeadersHead?.appendChild(nhcarriganHeadersGoogleAdsense);

nhcarriganHeadersBody?.appendChild(nhcarriganHeadersFooter);
nhcarriganHeadersBody?.appendChild(nhcarriganHeadersTreeNationBottom);
// #endregion

// #region Theme

const nhcarriganHeadersThemeButton = document.querySelector(
  "#theme-select-button",
);
const nhcarriganHeadersThemeIcon = document.querySelector("#theme-select-icon");
if (localStorage.getItem("theme") === "dark") {
  nhcarriganHeadersThemeIcon?.classList.remove("fa-moon");
  nhcarriganHeadersThemeIcon?.classList.add("fa-sun");
  document.querySelector("html")?.classList.add("is-dark");
}
const nhcarriganHeadersToggleTheme = (): void => {
  const nhcarriganHeadersCurrentTheme = localStorage.getItem("theme");
  if (nhcarriganHeadersCurrentTheme === "dark") {
    localStorage.setItem("theme", "light");
    nhcarriganHeadersThemeIcon?.classList.remove("fa-sun");
    nhcarriganHeadersThemeIcon?.classList.add("fa-moon");
    document.querySelector("html")?.classList.remove("is-dark");
    return;
  }
  localStorage.setItem("theme", "dark");
  nhcarriganHeadersThemeIcon?.classList.remove("fa-moon");
  nhcarriganHeadersThemeIcon?.classList.add("fa-sun");
  document.querySelector("html")?.classList.add("is-dark");
};
nhcarriganHeadersThemeButton?.addEventListener(
  "click",
  nhcarriganHeadersToggleTheme,
);
const nhcarriganHeadersPrefersDark = window.matchMedia(
  "(prefers-color-scheme: dark)",
);
if (
  nhcarriganHeadersPrefersDark.matches
  && localStorage.getItem("theme") !== null
) {
  localStorage.setItem("theme", "dark");
  nhcarriganHeadersThemeIcon?.classList.remove("fa-moon");
  nhcarriganHeadersThemeIcon?.classList.add("fa-sun");
  document.querySelector("html")?.classList.add("is-dark");
}

// #endregion

// #region Social Toggle
const nhcarriganHeadersShowSocialsButton
  = document.querySelector<HTMLButtonElement>("#show-socials-button");
const nhcarriganHeadersSocialList
  = document.querySelector<HTMLDivElement>("#social-list");
const nhcarriganHeadersToggleSocials = (): void => {
  if (!nhcarriganHeadersSocialList) {
    throw new Error("Social list element not found.");
  }
  if (nhcarriganHeadersSocialList.style.display === "block") {
    nhcarriganHeadersSocialList.style.display = "none";
    nhcarriganHeadersShowSocialsButton?.setAttribute("aria-expanded", "false");
    nhcarriganHeadersShowSocialsButton?.setAttribute(
      "aria-label",
      "Show Socials",
    );
    return;
  }
  nhcarriganHeadersSocialList.style.display = "block";
  nhcarriganHeadersShowSocialsButton?.setAttribute("aria-expanded", "true");
  nhcarriganHeadersShowSocialsButton?.setAttribute(
    "aria-label",
    "Hide Socials",
  );
};
nhcarriganHeadersShowSocialsButton?.addEventListener(
  "click",
  nhcarriganHeadersToggleSocials,
);

// #region CTA

const nhcarriganHeadersCta = document.createElement("dialog");
nhcarriganHeadersCta.style.position = "fixed";
nhcarriganHeadersCta.style.top = "50%";
nhcarriganHeadersCta.style.left = "50%";
nhcarriganHeadersCta.style.transform = "translate(-50%, -50%)";
nhcarriganHeadersCta.style.padding = "10px";
nhcarriganHeadersCta.style.borderRadius = "10px";
nhcarriganHeadersCta.style.backgroundColor = "var(--background)";
nhcarriganHeadersCta.style.color = "var(--foreground)";
nhcarriganHeadersCta.style.textAlign = "center";
nhcarriganHeadersCta.style.width = "95%";
nhcarriganHeadersCta.style.maxWidth = "400px";
nhcarriganHeadersCta.id = "community-cta";
nhcarriganHeadersCta.innerHTML = `
  <h1 autofocus>Hello~!</h1>
  <div style="display: flex; justify-content: space-around; margin-bottom: 10px;">
    <img src="https://cdn.nhcarrigan.com/logo.png" alt="NHCarrigan Logo" style="width: 100px; height: 100px;">
    <p>
      Consider joining our community so you can keep up to date on all of our latest activities!
    </p>
  </div>
  <a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer" style="padding: 10px; background: var(--foreground); color: var(--background); outline: none">Okay, take me there~!</a>
`;

const nhcarriganHeadersModalBg = document.createElement("div");
nhcarriganHeadersModalBg.style.zIndex = "4999";
nhcarriganHeadersModalBg.style.position = "fixed";
nhcarriganHeadersModalBg.style.top = "0";
nhcarriganHeadersModalBg.style.left = "0";
nhcarriganHeadersModalBg.style.width = "100vw";
nhcarriganHeadersModalBg.style.height = "100vh";
nhcarriganHeadersModalBg.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
nhcarriganHeadersModalBg.style.display = "none";
nhcarriganHeadersModalBg.id = "modal-bg";
const nhcarriganHeadersCloseModal = (): void => {
  nhcarriganHeadersCta.close();
  nhcarriganHeadersModalBg.style.display = "none";
};
const nhcarriganHeadersHandleModalClick = (event: MouseEvent): void => {
  event.stopPropagation();
  if (event.target === nhcarriganHeadersCta) {
    nhcarriganHeadersCloseModal();
  }
};
const nhcarriganHeadersShowModal = (): void => {
  const nhcarriganHeadersLastShown = Number.parseInt(
    localStorage.getItem("naomi-community-cta") ?? "0",
    10,
  );
  const nhcarriganHeadersLastShownDate = new Date(nhcarriganHeadersLastShown);
  const nhcarriganHeadersDiff
    = Date.now() - nhcarriganHeadersLastShownDate.getTime();
  console.table({
    diff:          nhcarriganHeadersDiff,
    lastShown:     nhcarriganHeadersLastShown,
    lastShownDate: nhcarriganHeadersLastShownDate,
  });
  // We only want to show this once a week.
  if (nhcarriganHeadersDiff < 1000 * 60 * 60 * 24 * 7) {
    return;
  }
  nhcarriganHeadersCta.showModal();
  nhcarriganHeadersModalBg.style.display = "block";
  nhcarriganHeadersModalBg.addEventListener(
    "click",
    nhcarriganHeadersCloseModal,
  );
  const nhcarriganHeadersCloseButton
    = nhcarriganHeadersCta.querySelector("button");
  nhcarriganHeadersCloseButton?.addEventListener(
    "click",
    nhcarriganHeadersCloseModal,
  );
  nhcarriganHeadersCta.addEventListener(
    "click",
    nhcarriganHeadersHandleModalClick,
  );
  localStorage.setItem("naomi-community-cta", Date.now().toString());
};

nhcarriganHeadersBody?.appendChild(nhcarriganHeadersCta);
nhcarriganHeadersBody?.appendChild(nhcarriganHeadersModalBg);
nhcarriganHeadersShowModal();