From 529609ded4363d95a238d9e80c2c3ab0c08519f9 Mon Sep 17 00:00:00 2001
From: YouHaveTrouble <youhavetrouble@youhavetrouble.me>
Date: Wed, 9 Oct 2024 20:35:30 +0200
Subject: [PATCH] add classic styled view counter

---
 src/components/ViewCounter.astro | 58 ++++++++++++++++++++++++++++++++
 src/pages/index.astro            | 11 +++---
 2 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ViewCounter.astro

diff --git a/src/components/ViewCounter.astro b/src/components/ViewCounter.astro
new file mode 100644
index 0000000..03415c3
--- /dev/null
+++ b/src/components/ViewCounter.astro
@@ -0,0 +1,58 @@
+<div class="view-counter">
+  <div data-viewcount>
+    <span>?</span>
+  </div>
+  <div>unique visitors</div>
+</div>
+
+<style lang="scss" is:global>
+  .view-counter {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-block: 1rem;
+    width: max-content;
+    text-align: center;
+
+    [data-viewcount] {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 1;
+      gap: 0.2rem;
+      padding: 0.25rem;
+      font-size: 1.25rem;
+      span {
+        display: inline-block;
+        background: black;
+        color: white;
+        padding: 0.5ch;
+        font-family: monospace;
+      }
+    }
+
+  }
+
+</style>
+
+<script>
+
+  updateViewCount();
+
+  async function updateViewCount() {
+    const viewCounter = document.querySelector("[data-viewcount]");
+    if (!viewCounter) return;
+    const result = await fetch("https://youhavetrouble-view_counter.web.val.run").catch(() => null);
+    if (result === null) return;
+    const json = await result.json();
+    const rawCount = json.count;
+    const chars = rawCount.toString();
+    viewCounter.innerHTML = "";
+    for (let i = 0; i < chars.length; i++) {
+      const span = document.createElement("span");
+      span.textContent = chars[i];
+      viewCounter.appendChild(span);
+    }
+  }
+
+</script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1dcb9ad..726f72f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,6 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
+import ViewCounter from "../components/ViewCounter.astro";
 
 const title = 'Home';
 const description = 'My little corner of the internet.';
@@ -16,6 +17,9 @@ const permalink = Astro?.site?.href ?? '/';
           <span>My online status:</span>
           <span id="online-status">Unknown</span><span id="online-game"></span>
         </div>
+        <div class="wrap">
+          <ViewCounter />
+        </div>
       </div>
     </div>
     <div class="hero-socials">
@@ -66,9 +70,7 @@ const permalink = Astro?.site?.href ?? '/';
 <script>
   let task = -1;
 
-  document.addEventListener('astro:page-load', () => {
-    updateOnlineStatus();
-  });
+  updateOnlineStatus();
 
   async function updateOnlineStatus() {
     clearTimeout(task);
@@ -161,10 +163,11 @@ const permalink = Astro?.site?.href ?? '/';
         text-decoration: none;
         border-width: 1px;
         border-style: solid;
-        border-color: transparent;
+        border-color: rgba(255, 255, 255, 0);
         padding: 0.5rem;
         gap: 0.25rem;
         border-radius: 0.25rem;
+        transition: border-color 0.2s, color 0.2s;
 
         &:hover {
           color: var(--text-main);