release: v1.6.0

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [ ] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

Minor - My pull request introduces a new non-breaking feature.

Reviewed-on: #2
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

.gitea/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: Node.js CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    name: Lint and Test
+
+    steps:
+      - name: Checkout Source Files
+        uses: actions/checkout@v4
+
+      - name: Use Node.js v22
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Lint Source Files
+        run: pnpm run lint
+
+      - name: Verify Build
+        run: pnpm run build
+
+      - name: Run Tests
+        run: pnpm run test

.gitea/workflows/sonar.yml

@@ -0,0 +1,34 @@
+name: Code Analysis
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sonar:
+    name: SonarQube
+
+    steps:
+      - name: Checkout Source Files
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: SonarCube Scan
+        uses: SonarSource/sonarqube-scan-action@v4
+        timeout-minutes: 10
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: "https://quality.nhcarrigan.com"
+        with:
+          args: >
+            -Dsonar.sources=.
+            -Dsonar.projectKey=website-headers
+
+      - name: SonarQube Quality Gate check
+        uses: sonarsource/sonarqube-quality-gate-action@v1
+        with:
+          pollingTimeoutSec: 600
+        env:
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_HOST_URL: "https://quality.nhcarrigan.com"

.vscode/settings.json

@@ -2,5 +2,11 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["typescript"]
+  "eslint.validate": [
+    "typescript"
+  ],
+  "sonarlint.connectedMode.project": {
+    "connectionId": "nhcarrigan",
+    "projectKey": "nhcarrigan_website-headers"
+  }
 }

eslint.config.js

@@ -12,7 +12,8 @@ export default [
   },
   {
     rules: {
-      "no-console": "off"
+      "no-console": "off",
+      "max-lines": "off"
     }
   }
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "website-headers",
-  "version": "1.1.0",
+  "version": "1.6.0",
   "description": "",
   "main": "index.js",
   "type": "module",
@@ -11,7 +11,7 @@
     "build:watch": "tsc --watch",
     "lint": "eslint src --max-warnings 0",
     "start": "node --watch prod/develop.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "echo \"Error: no test specified\" && exit 0",
     "scan": "SONAR_TOKEN='op://Environment Variables - Development/SonarCloud/website-headers' op run -- sonar-scanner -Dsonar.organization=nhcarrigan -Dsonar.projectKey=nhcarrigan_website-headers -Dsonar.sources=. -Dsonar.host.url=https://sonarcloud.io"
   },
   "keywords": [],

src/index.ts

@@ -24,7 +24,7 @@ const body = document.querySelector("body");
 const title = document.querySelector("title");
 const description = document.querySelector(`meta[name="description"]`);
 
-const { href: url, hostname } = window.location;
+const { href: url, hostname, pathname } = window.location;
 
 // #endregion
 
@@ -112,8 +112,8 @@ styles.innerHTML = `
 }
 
 :root {
-  --foreground: #04624f;
+  --foreground: #2a0a18;
-  --background: #abfcecdd;
+  --background: #ffb6c1bb;
 }
 
 * {
@@ -152,20 +152,35 @@ main {
   width: 95%;
   max-width: 1080px;
   margin: auto;
-  margin-bottom: 100px;
+  margin-bottom: 105px;
   padding: 10px;
 }
 footer {
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   color: var(--foreground);
   background-color: var(--background);
   position: fixed;
   bottom: 0;
+  height: 95px;
+  padding: 0 10px;
+}
+#footer-inner-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   height: 75px;
-  padding-left: 100px;
+}
+#footer-badge-container {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  align-items: center;
+  justify-content: space-around;
+}
+#audio-theme-button, #theme-select-button {
+  background: none;
+  border: none;
+  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
+  color: var(--foreground);
 }
 a {
   color: unset;
@@ -175,18 +190,46 @@ a {
   display: flex;
   align-items: center;
 }
-#audio-theme-button {
+.is-dark {
-  background: none;
+  --foreground: #ffb6c1;
-  border: none;
+  --background: #2a0a18bb;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-  color: var(--foreground);
 }
-@media screen and (max-width: 600px) {
+@media screen and (prefers-reduced-motion) {
+  #footer-badge-container {
+    display: none;
+  }
+  footer, #footer-inner-container {
+    height: 75px;
+    justify-content: space-around;
+  }
+  main {
+    margin-bottom: 85px;
+  }
+}
+@media screen and (max-width: 1225px) {
+  #footer-badge-container {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  footer {
+    height: 120px;
+  }
+  main {
+    margin-bottom: 130px;
+  }
+}
+@media screen and (max-width: 625px) {
   #tree-nation-offset-website {
     display: none;
   }
-  footer {
+  #footer-badge-container {
-    padding-right: 100px;
+    display: none;
+  }
+  footer, #footer-inner-container {
+    height: 50px;
+    justify-content: space-around;
+  }
+  main {
+    margin-bottom: 60px;
   }
 }
 `;
@@ -197,14 +240,29 @@ a {
 
 const footer = document.createElement("footer");
 footer.innerHTML = `
+<div id="footer-badge-container">
+  <img src="https://cdn.nhcarrigan.com/blinkies/bigots.gif" alt="no bigots allowed"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/blm.gif" alt="black lives matter"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/miku.gif" alt="miku fan!!!"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/neuro.gif" alt="neurodivergent pride"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/palestine.gif" alt="free palestine"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/technomancer.gif" alt="technomancer"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/trans.gif" alt="trans rights!!!"/>
+  <img src="https://cdn.nhcarrigan.com/blinkies/ukraine.gif" alt="glory to ukraine"/>
+</div>
+<div id="footer-inner-container">
 <p>&copy; Naomi Carrigan</p>
 <a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
   <i class="fa-solid fa-comments"></i>
 </a>
+<button id="theme-select-button" type="button">
+  <i id="theme-select-icon" class="fa-solid fa-moon"></i>
+</button>
 <button id="audio-theme-button" type="button">
   <i class="fa-solid fa-play"></i>
 </button>
 <div id="tree-nation-offset-website"></div>
+</div>
 `;
 
 const videoOverlay = document.createElement("video");
@@ -221,6 +279,7 @@ videoOverlay.style.opacity = "0.25";
 videoOverlay.style.width = "100vw";
 videoOverlay.style.height = "100vh";
 videoOverlay.style.objectFit = "cover";
+videoOverlay.style.zIndex = "10000";
 
 // #endregion
 
@@ -249,17 +308,16 @@ const interval = setInterval(() => {
 `;
 const fontAwesome = document.createElement("script");
 fontAwesome.src = "https://kit.fontawesome.com/f949111719.js";
-const hubspot = document.createElement("script");
-hubspot.src = "https://js.hs-scripts.com/47086586.js";
-hubspot.async = true;
-hubspot.defer = true;
-hubspot.id = "hs-script-loader";
 const analytics = document.createElement("script");
 analytics.defer = true;
 analytics.setAttribute("domain", "nhcarrigan.com");
 analytics.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";
+analytics.setAttribute("event-domain", hostname);
+analytics.setAttribute("data-domain", "nhcarrigan.com");
+analytics.setAttribute("event-page", title?.innerText ?? "Unknown Page");
+analytics.setAttribute("event-path", pathname);
 const analytics2 = document.createElement("script");
 analytics2.innerHTML = `
 window.plausible = window.plausible ??
@@ -293,7 +351,6 @@ head?.appendChild(styles);
 
 head?.appendChild(treeNation);
 head?.appendChild(fontAwesome);
-head?.appendChild(hubspot);
 head?.appendChild(analytics);
 head?.appendChild(analytics2);
 
@@ -318,3 +375,110 @@ playButton?.addEventListener("click", () => {
     playButton.innerHTML = "<i class=\"fa-solid fa-pause\"></i>";
   }
 });
+
+// #endregion
+
+// #region Theme
+
+const themeButton = document.querySelector("#theme-select-button");
+const themeIcon = document.querySelector("#theme-select-icon");
+if (localStorage.getItem("theme") === "dark") {
+  themeIcon?.classList.remove("fa-moon");
+  themeIcon?.classList.add("fa-sun");
+  document.querySelector("html")?.classList.add("is-dark");
+}
+const toggleTheme = (): void => {
+  const currentTheme = localStorage.getItem("theme");
+  if (currentTheme === "dark") {
+    localStorage.setItem("theme", "light");
+    themeIcon?.classList.remove("fa-sun");
+    themeIcon?.classList.add("fa-moon");
+    document.querySelector("html")?.classList.remove("is-dark");
+    return;
+  }
+  localStorage.setItem("theme", "dark");
+  themeIcon?.classList.remove("fa-moon");
+  themeIcon?.classList.add("fa-sun");
+  document.querySelector("html")?.classList.add("is-dark");
+};
+themeButton?.addEventListener("click", toggleTheme);
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+if (prefersDark.matches && localStorage.getItem("theme") !== null) {
+  localStorage.setItem("theme", "dark");
+  themeIcon?.classList.remove("fa-moon");
+  themeIcon?.classList.add("fa-sun");
+  document.querySelector("html")?.classList.add("is-dark");
+}
+
+// #endregion
+
+// #region CTA
+
+const cta = document.createElement("dialog");
+cta.style.position = "fixed";
+cta.style.top = "50%";
+cta.style.left = "50%";
+cta.style.transform = "translate(-50%, -50%)";
+cta.style.padding = "10px";
+cta.style.borderRadius = "10px";
+cta.style.backgroundColor = "var(--background)";
+cta.style.color = "var(--foreground)";
+cta.style.textAlign = "center";
+cta.style.width = "95%";
+cta.style.maxWidth = "400px";
+cta.id = "community-cta";
+cta.innerHTML = `
+  <h1 autofocus>Hello~!</h1>
+  <div style="display: flex; justify-content: space-around; margin-bottom: 10px;">
+    <img src="https://cdn.nhcarrigan.com/profile.png" alt="Naomi Carrigan" style="width: 100px; height: 100px; border-radius: 50%;">
+    <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 modalBg = document.createElement("div");
+modalBg.style.zIndex = "4999";
+modalBg.style.position = "fixed";
+modalBg.style.top = "0";
+modalBg.style.left = "0";
+modalBg.style.width = "100vw";
+modalBg.style.height = "100vh";
+modalBg.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+modalBg.style.display = "none";
+modalBg.id = "modal-bg";
+const closeModal = (): void => {
+  cta.close();
+  modalBg.style.display = "none";
+};
+const handleModalClick = (event: MouseEvent): void => {
+  event.stopPropagation();
+  if (event.target === cta) {
+    closeModal();
+  }
+};
+const showModal = (): void => {
+  const lastShown = Number.parseInt(
+    localStorage.getItem("naomi-community-cta") ?? "0",
+    10,
+  );
+  const lastShownDate = new Date(lastShown);
+  const diff = Date.now() - lastShownDate.getTime();
+  console.table({ diff, lastShown, lastShownDate });
+  // We only want to show this once a week.
+  if (diff < 1000 * 60 * 60 * 24 * 7) {
+    return;
+  }
+  cta.showModal();
+  modalBg.style.display = "block";
+  modalBg.addEventListener("click", closeModal);
+  const closeButton = cta.querySelector("button");
+  closeButton?.addEventListener("click", closeModal);
+  cta.addEventListener("click", handleModalClick);
+  localStorage.setItem("naomi-community-cta", Date.now().toString());
+};
+
+body?.appendChild(cta);
+body?.appendChild(modalBg);
+showModal();