add binkies and status.cafe integration

website/assets/style.css

@@ -17,9 +17,10 @@ a {
 .order {
   display: grid;
   grid-template-areas:
-    "one   two"
+    "details   skills"
-    "one    four"
+    "details    donations"
-    "three   five";
+    "status     binkies"
+    "stickers   blog";
   grid-gap: 5px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: repeat(25vh, 6);
@@ -65,51 +66,64 @@ h6 {
   margin: 0;
   padding: 0;
 }
-.one {
+.details {
-  grid-area: one;
+  grid-area: details;
 }
-.two {
+.donations {
-  grid-area: two;
+  grid-area: donations;
 }
-.three {
+.status {
-  grid-area: three;
+  grid-area: status;
+}
+.stickers {
+  grid-area: stickers;
   display: flex;
   flex-direction: column;
   max-height: 75vh;
   gap: 20px;
 }
-.three > img,
+.stickers > img,
-.three > video {
+.stickers > video {
   object-fit: scale-down;
   height: 100%;
 }
-.four {
+.skills {
-  grid-area: four;
+  grid-area: skills;
 }
-.five {
+.binkies {
-  grid-area: five;
+  grid-area: binkies;
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}
+.blog {
+  grid-area: blog;
   max-height: 75vh;
 }
 
 @media only screen and (max-width: 600px) {
   .order {
     grid-template-areas:
-      "one  "
+      "details  "
-      "four "
+      "status"
-      "two  "
+      "skills "
-      "five "
+      "donations  "
-      "five "
+      "blog "
-      "three";
+      "blog "
+      "binkies"
+      "stickers";
     grid-template-columns: 1fr;
   }
   body {
     scrollbar-width: auto !important;
   }
-  .three {
+  .stickers {
     flex-direction: row;
     max-height: auto;
   }
-  .five {
+  .blog {
     max-height: unset;
   }
   .giscus-outer {

website/index.html

@@ -1,6 +1,56 @@
 __TEMPLATE_HEAD__
 
 <script type="module" src="scripts/blog.js"></script>
+<script type="module">
+    function timeAgo(input) {
+        const date = (input instanceof Date) ? input : new Date(input);
+        const formatter = new Intl.RelativeTimeFormat('en');
+        const ranges = [
+            ['years', 3600 * 24 * 365],
+            ['months', 3600 * 24 * 30],
+            ['weeks', 3600 * 24 * 7],
+            ['days', 3600 * 24],
+            ['hours', 3600],
+            ['minutes', 60],
+            ['seconds', 1],
+        ];
+        const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+
+        for (const [rangeType, rangeVal] of ranges) {
+            if (rangeVal < Math.abs(secondsElapsed)) {
+                const delta = secondsElapsed / rangeVal;
+                return formatter.format(Math.round(delta), rangeType);
+            }
+        }
+    }
+
+    const req = await fetch("https://status.cafe/users/sophie.atom");
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(await req.text(), "text/xml");
+    const latestEntryRaw = doc.querySelector("feed > entry");
+    const latestEntry = {
+        username: doc.querySelector("feed > author > name").textContent,
+        status: latestEntryRaw.querySelector("content").textContent,
+        title: latestEntryRaw.querySelector("title").textContent,
+        updated: new Date(latestEntryRaw.querySelector("updated").textContent)
+    }
+    latestEntry.emoji = latestEntry.title.slice(latestEntry.username.length).slice(0, -Math.min(latestEntry.status.length, 53)).trim()
+    const statusElement = document.getElementById("status");
+    const h2 = document.createElement("h2");
+    const a = document.createElement("a");
+    const p = document.createElement("p");
+
+    a.href = "https://status.cafe/users/" + latestEntry.username;
+    a.innerText = latestEntry.emoji + " " + latestEntry.username;
+    h2.appendChild(a);
+    h2.innerHTML += " - " + timeAgo(latestEntry.updated);
+
+    p.style.textAlign = "end";
+    p.innerText = latestEntry.status;
+
+    statusElement.appendChild(h2);
+    statusElement.appendChild(p);
+</script>
 <script>
     window.addEventListener("load", () => {
         const stickers = document.getElementById("stickers");
@@ -19,7 +69,7 @@ __TEMPLATE_HEAD__
 
 <body class="repeating-bg">
     <div class="order">
-        <div class="paper one">
+        <div class="paper details">
             <h1><span class="emoji">☹️☹️☹️</span>.ovh</h1>
             <p>I'm Latvian, 17. My name's Sophie <small>meows a lot</small>. I love listening to music.</p>
 
@@ -32,6 +82,7 @@ __TEMPLATE_HEAD__
                 <br>
                 Interact: Any person ever
             </p>
+            <h2>contact</h2>
             <p>Contact me at <a href="https://matrix.to/#/@yourfriend:bark.lgbt">matrix</a>, <a
                     href="https://discord.com/users/845374523263811614">discord</a>, <a
                     href="https://github.com/fucksophie">github (view projects here)</a>, <a
@@ -43,8 +94,15 @@ __TEMPLATE_HEAD__
                     106, 97, 64,
                     100, 117, 99, 107, 46, 99, 111, 109]))</span></p>
             <a href="assets/key.txt">Signing PGP key downloadable here.</a>
+
+            <h2>Include my 88x31 into your website!</h2>
+            <pre>
+&lt;a href="https://sad.ovh"&gt;
+&lt;img src="https://sad.ovh/assets/binkies/sadovh.png"&gt;
+&lt;/a&gt;
+            </pre>
         </div>
-        <div class="paper two">
+        <div class="paper donations">
             <h1>donations</h1>
             <ul>
                 <li>BTC <strong>bc1q83jdukjn4a2qm0rmn9tqcfkcq60la22lqy2shx</strong>
@@ -63,7 +121,7 @@ __TEMPLATE_HEAD__
                 </li>
             </ul>
         </div>
-        <div class="paper four">
+        <div class="paper skills">
             <h1>Skills</h1>
             <!--replace this with Code::Stats once I've actually gotten some time on there-->
             <ul>
@@ -75,8 +133,17 @@ __TEMPLATE_HEAD__
                 <li>9 years of Java development. Mostly Minecraft plugins and MC related projects.</li>
             </ul>
         </div>
-        <div class="paper five" id="root"></div>
+        <div class="paper blog" id="root"></div>
-        <div class="paper three" id="stickers"></div>
+        <div class="paper stickers" id="stickers"></div>
+        <div class="paper status" id="status"></div>
+        <div class="paper binkies">
+            <a href="https://sad.ovh">
+                <img src="/assets/binkies/sadovh.png">
+            </a>
+            <a href="https://oon.nz/">
+                <img src="/assets/binkies/onzecki.png">
+            </a>
+        </div>
 
     </div>
 </body>

website/templates/head.html

@@ -24,3 +24,4 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="scripts/oneko.js"></script>
+    <link rel="icon" type="image/x-icon" href="/assets/favicon.png">