add /random page

src/components/Header.astro

@@ -8,6 +8,8 @@
     <a href="/projects">/projects</a>
     <span class="divider">|</span>
     <a href="/blog">/blog</a>
+    <span class="divider">|</span>
+    <a href="/random">/random</a>
 </nav>
 
 <style>

src/components/Profile.astro

@@ -32,6 +32,6 @@ const { path } = Astro.props;
 
     #profile p {
         margin-top: -0.5em;
-        color: var(--surface-5);
+        color: var(--ctp-macchiato-overlay2);
     }
 </style>

src/components/WorkInProgress.astro

@@ -0,0 +1,19 @@
+---
+---
+<p>work in progress<span id="wip">...</span></p>
+
+<script>
+    const element = document.getElementById("wip");
+    let iteration = 3;
+
+    setInterval(() => {
+        if (!element) {
+            return;
+        } else if (iteration > 5) {
+            iteration = 0;
+        }
+
+        element.textContent = ".".repeat(iteration > 3 ? 3 : iteration);
+        iteration++;
+    }, 250);
+</script>

src/components/cards/Card.astro

@@ -25,7 +25,6 @@ const { title, description, url } = Astro.props;
         justify-content: center;
 
         padding: 1em;
-        background-color: var(--mantle);
         border: 2px solid var(--surface-3);
     }
 

src/components/chat/Chat.astro

@@ -1,2 +1,102 @@
 ---
 ---
+<div id="chat">
+    <p>
+        <b>chat</b>
+        <noscript>
+            <span id="noscript">javascript required sorry :(</span>
+        </noscript>
+    </p>
+
+    <ul id="history"></ul>
+    <input type="text" placeholder="send a message..." autofocus>
+</div>
+
+<script>
+    const input = document.querySelector(`#chat input[type="text"]`) as HTMLInputElement;
+    const history = document.querySelector("#history") as HTMLUListElement;
+    const username = "mudkip";
+
+    if (!input || !history) {
+        console.error("could not find chat elements");
+    }
+
+    input.addEventListener("keydown", (event: KeyboardEvent) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            const value = input.value.trim();
+
+            if (!value) {
+                return;
+            }
+
+            const element = document.createElement("li");
+
+            const usernameElement = document.createElement("span");
+            usernameElement.textContent = "<" + username + ">";
+            usernameElement.style.color = "var(--ctp-macchiato-green)";
+            usernameElement.style.fontSize = "inherit";
+            element.appendChild(usernameElement);
+
+            const messageElement = document.createTextNode(" " + value);
+            element.appendChild(messageElement);
+
+            history.appendChild(element);
+            input.value = "";
+        }
+    });
+</script>
+
+<style>
+    @keyframes blink {
+        0% {
+            opacity: 1;
+        }
+
+        50% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    #chat {
+        border: 2px solid var(--surface-3);
+        padding: 1em;
+    }
+
+    #noscript {
+        font-size: inherit;
+        color: var(--ctp-macchiato-red);
+        animation: blink 1.5s infinite;
+    }
+
+    #history {
+        margin: 2em 0;
+        list-style: none;
+        word-wrap: break-word;
+        overflow-y: auto;
+        max-height: 20em;
+    }
+
+    input {
+        padding: 0.5em;
+        box-sizing: border-box;
+        width: 100%;
+
+        font-family: Terminus, monospace;
+        font-size: 1.2em;
+
+        border: none;
+        outline: none;
+
+        background: var(--surface-3);
+        color: var(--text);
+    }
+
+    input::placeholder {
+        color: var(--ctp-macchiato-overlay1);
+    }
+</style>

src/pages/about.astro

@@ -1,22 +1,7 @@
 ---
 import Page from "@layouts/Page.astro";
+import WorkInProgress from "@components/WorkInProgress.astro";
 ---
 <Page title="about">
-    <p>work in progress<span id="wip">...</span></p>
-</Page>
-
-<script>
-    const element = document.getElementById("wip");
-    let iteration = 3;
-
-    setInterval(() => {
-        if (!element) {
-            return;
-        } else if (iteration > 5) {
-            iteration = 0;
-        }
-
-        element.textContent = ".".repeat(iteration > 3 ? 3 : iteration);
-        iteration++;
-    }, 250);
-</script>
+    <WorkInProgress />
+</Page>

src/pages/random.astro

@@ -0,0 +1,10 @@
+---
+import Chat from "@components/chat/Chat.astro"
+import WorkInProgress from "@components/WorkInProgress.astro"
+import Page from "@layouts/Page.astro"
+---
+<Page title="random">
+    <WorkInProgress />
+    <div style="margin: 1em 0"></div>
+    <Chat />
+</Page>

src/style.css

@@ -74,11 +74,6 @@ h1 {
     margin: 0.5em 0;
 }
 
-h2 {
-    font-size: 1.5em;
-    margin: 0.4em 0;
-}
-
 p, a, li, span {
     font-size: 1.2em;
 }