2.0.0

.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"

index.html

@@ -5,6 +5,25 @@
   <main>
     <h1>Test</h1>
     <p>Just a demo page.</p>
+    <div>
+      Pokem ipsum dolor sit amet Red Natu Misdreavus Marowak Kyogre Deoxys. Glitch City Rampardos Giovanni Heatran Turtwig Scratch Lileep. Sunt in culpa Regirock Deerling Togekiss Shaymin Serperior Reshiram. Normal Gurdurr Probopass Ampharos The Power Of One Vigoroth Pichu. Mirror Move Delibird Slowking Nurse Joy Cherrim Vanillish Hippowdon.
+
+Gold Maractus Feebas Thunder Badge blast off at the speed of light Mareep Ice. Rock Ditto Pachirisu Glaceon Vulpix Teleport Qwilfish. Fuchsia City Pidgeot Leaf Green Stantler Electric Hidden Machine Goldeen. Bulbasaur Swadloon Sandslash Beldum Serperior Burmy Deoxys. Charmander Pokemon The Movie 2000 excepteur sint occaecat cupidatat non proident Pokemon The Movie 2000 Cubchoo Magnemite Pansage.
+
+Lorem ipsum dolor sit amet S.S. Anne Haxorus Lapras Dark Baltoy Kingler. Fog Badge Jolteon Accelgor Purugly Chikorita Probopass Glalie. Poison Sting Braviary Alakazam Darkrai Kricketune Toxicroak Cofagrigus. Razor Leaf Mew Pokemon 4Ever a wild Pokemon appeared Staravia Timburr Beheeyem. Teleport Dusclops Timburr Houndour Nidorino Haxorus Pignite.
+
+Thundershock Porygon lorem ipsum dolor sit amet Roserade Wobbuffet Moltres Venonat. Splash Parasect Piplup Rotom Razor Leaf Rotom Persian. Viridian City Ghost Tail Whip Smoochum Gurdurr Giratina Tyranitar. Misty Slowking Cubchoo Ciccino Flaaffy Crustle Dratini. Celadon Department Store Purugly Clamperl Kricketot Lanturn Wurmple Cyndaquil.
+
+Glacier Badge Magikarp used Splash Nidoran Smoochum Bidoof Regirock Mewtwo. Sed do eiusmod tempor incididunt Volcarona Yanmega Probopass Weepinbell Marowak Hitmonchan. Charmeleon Johto Garbodor Octillery Soda Pop Liepard Mantine. Plain Badge Watchog Baltoy Zephyr Badge Cleffa Pokemon The Movie 2000 Whiscash. Mewtwo Strikes Back Ice Virizion prepare for trouble Azumarill Darumaka Snorlax. 
+
+Electric Golurk Alakazam lorem ipsum dolor sit amet Plain Badge Lotad Poliwhirl. Dragon Rage Kabuto Rotom Ponyta Golurk Vigoroth Seadra. Mewtwo Strikes Back Braviary Patrat Poison Kakuna Tropius Technical Machine. Thundershock Jigglypuff Pikachu Ampharos Ambipom Ditto Elgyem. Fire Red Lillipup Breloom Cranidos Squirtle Skiploom I wanna be the very best.
+
+Vermilion City Minccino Prinplup Gothitelle Thundurus searching far and wide Golbat. Blue Magcargo Honchkrow Delcatty Mawile Gigalith Nidorina. Fuchsia City Youngster wants to fight Patrat Pidgeot Conkeldurr Pokemon Fan Club Chairman Magneton. Teleport Ditto Woobat Mandibuzz Eelektross Burnt Berry Rhydon. Dark Ash Mr. Mime Musharna Mew Bidoof Volcano Badge.
+
+Brock Ash's mother Kricketot Hariyama Metagross Crawdaunt Marshtomp. Charizard Breloom Maractus Servine Burnt Berry Gothita Treecko. Leaf Green Squirtle Drilbur Tynamo Remoraid Trapinch Scolipede. Team Rocket Leech Seed Torchic Foongus Mirror Move Grovyle Clefable. Velit esse cillum dolore eu fugiat nulla pariatur Cloyster Feebas Carvanha Leech Life Pidgeot Venomoth.
+
+Yellow Purrloin Nurse Joy Voltorb Mienfoo Voltorb Tail Whip. Sed do eiusmod tempor incididunt Bidoof Oddish Spheal Jirachi Garchomp Liepard. Storm Badge Shelgon Musharna Flareon Terrakion Shedinja Marowak. Charmeleon Bonsly Wigglytuff Regice Mantyke Ash Ketchum Marsh Badge. Silver Forretress Tynamo Masquerain Tangrowth Igglybuff Clamperl. 
+    </div>
   </main>
 </body>
 <script src="./prod/index.js"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "website-headers",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "",
   "main": "index.js",
   "type": "module",

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
 
@@ -42,7 +42,7 @@ openGraphDescription.setAttribute("property", "og:description");
 openGraphDescription.setAttribute(
   "content",
   description?.getAttribute("content")
-    // eslint-disable-next-line stylistic/max-len
+  // eslint-disable-next-line stylistic/max-len -- big boi string
     ?? "We are a software engineering and community management consulting firm.",
 );
 const openGraphImage = document.createElement("meta");
@@ -75,7 +75,7 @@ twitterDescription.setAttribute("name", "twitter:description");
 twitterDescription.setAttribute(
   "content",
   description?.getAttribute("content")
-    // eslint-disable-next-line stylistic/max-len
+  // eslint-disable-next-line stylistic/max-len -- big boi string
     ?? "We are a software engineering and community management consulting firm.",
 );
 const twitterImage = document.createElement("meta");
@@ -112,8 +112,8 @@ styles.innerHTML = `
 }
 
 :root {
-  --foreground: #04624f;
-  --background: #abfcecdd;
+  --foreground: #2a0a18;
+  --background: #ffb6c1bb;
 }
 
 * {
@@ -152,14 +152,11 @@ main {
   width: 95%;
   max-width: 1080px;
   margin: auto;
-  margin-bottom: 100px;
+  margin-bottom: 85px;
   padding: 10px;
 }
 footer {
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   color: var(--foreground);
   background-color: var(--background);
   position: fixed;
@@ -167,6 +164,24 @@ footer {
   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;
+}
+#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;
   cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
@@ -175,16 +190,21 @@ a {
   display: flex;
   align-items: center;
 }
-#audio-theme-button {
-  background: none;
-  border: none;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-  color: var(--foreground);
+.is-dark {
+  --foreground: #ffb6c1;
+  --background: #2a0a18bb;
 }
-@media screen and (max-width: 600px) {
+@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;
+  }
 }
 `;
 
@@ -194,32 +214,21 @@ a {
 
 const footer = document.createElement("footer");
 footer.innerHTML = `
-<p>&copy; Naomi Carrigan</p>
+<div id="footer-inner-container">
+<p>&copy; <a href="https://nhcarrigan.com" target="_blank">Naomi Carrigan</a></p>
 <a href="https://chat.nhcarrigan.com" target="_blank" rel="noreferrer">
   <i class="fa-solid fa-comments"></i>
 </a>
-<button id="audio-theme-button" type="button">
-  <i class="fa-solid fa-play"></i>
+<button id="theme-select-button" type="button">
+  <i id="theme-select-icon" class="fa-solid fa-moon"></i>
 </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>
 `;
 
-const videoOverlay = document.createElement("video");
-videoOverlay.autoplay = true;
-videoOverlay.loop = true;
-videoOverlay.muted = true;
-videoOverlay.playsInline = true;
-videoOverlay.src = "https://cdn.nhcarrigan.com/overlay.webm";
-videoOverlay.style.pointerEvents = "none";
-videoOverlay.style.position = "fixed";
-videoOverlay.style.top = "0";
-videoOverlay.style.left = "0";
-videoOverlay.style.opacity = "0.25";
-videoOverlay.style.width = "100vw";
-videoOverlay.style.height = "100vh";
-videoOverlay.style.objectFit = "cover";
-videoOverlay.style.zIndex = "10000";
-
 // #endregion
 
 // #region Scripts
@@ -253,6 +262,10 @@ 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 ??
@@ -260,6 +273,12 @@ function() {
   (window.plausible.q = window.plausible.q ?? []).push(arguments) 
 }
 `;
+const googleAdsense = document.createElement("script");
+googleAdsense.async = true;
+googleAdsense.src
+  // eslint-disable-next-line stylistic/max-len -- big boi string
+  = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3569924701890974";
+googleAdsense.setAttribute("crossorigin", "anonymous");
 
 // #endregion
 
@@ -288,9 +307,9 @@ head?.appendChild(treeNation);
 head?.appendChild(fontAwesome);
 head?.appendChild(analytics);
 head?.appendChild(analytics2);
+head?.appendChild(googleAdsense);
 
 body?.appendChild(footer);
-body?.appendChild(videoOverlay);
 body?.appendChild(treeNationBottom);
 // #endregion
 
@@ -313,6 +332,40 @@ playButton?.addEventListener("click", () => {
 
 // #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");
@@ -331,7 +384,7 @@ 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%;">
+    <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>