From 5153e2deef5eca5ccdcab7280fc32e3251ce08cd Mon Sep 17 00:00:00 2001
From: BuyMyMojo <hello+git@buymymojo.net>
Date: Fri, 4 Apr 2025 22:53:37 +1100
Subject: [PATCH] Move friend buttons to front page&re-encode images

Thanks specifically to @LeNooby09 for borking your website and making my
website have a borked image >:3
---
 astro.config.mjs                |  52 +++++++---
 src/components/FriendLink.astro |   4 +-
 src/components/NavHeader.astro  |   2 +-
 src/pages/friends.astro         |  98 +------------------
 src/pages/index.astro           | 165 ++++++++++++++++++++++++++++----
 5 files changed, 189 insertions(+), 132 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index d82865b..9a5e30b 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,10 +1,10 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
-import { remarkModifiedTime } from './remark-modified-time.mjs';
+import { defineConfig } from "astro/config";
+import { remarkModifiedTime } from "./remark-modified-time.mjs";
 
 import preact from "@astrojs/preact";
 import tailwind from "@astrojs/tailwind";
-import node from '@astrojs/node';
+import node from "@astrojs/node";
 
 import icon from "astro-icon";
 
@@ -12,23 +12,47 @@ import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
-  output: process.env.DOCKER_BUILD ? 'server' : 'static',
-  site: "https://aria.coffee",
-  integrations: [preact(), tailwind(), icon(), mdx()],
+    output: process.env.DOCKER_BUILD ? "server" : "static",
+    site: "https://aria.coffee",
+    integrations: [preact(), tailwind(), icon(), mdx()],
 
-  image: {
-    domains: ["buymymojo.net", "aria.coffee", "github.com", "githubusercontent.com", "avatars.githubusercontent.com", "camo.githubusercontent.com", "user-images.githubusercontent.com", "private-user-images.githubusercontent.com"],
-  },
-  markdown: {
-    remarkPlugins: [remarkModifiedTime],
-  },
+    image: {
+        domains: [
+            "buymymojo.net",
+            "aria.coffee",
+            "github.com",
+            "githubusercontent.com",
+            "avatars.githubusercontent.com",
+            "camo.githubusercontent.com",
+            "user-images.githubusercontent.com",
+            "private-user-images.githubusercontent.com",
+            "alyxia.dev",
+            "nanoshinono.me",
+            "ata.moe",
+            "buh.moe",
+            "hayden.moe",
+            "onz.ee",
+            "notnite.com",
+            "erisdump.neocities.org",
+            "espi.me",
+            "alula.me",
+            "sapphic.moe",
+            "calayucu.com",
+            "meow-d.github.io",
+            "girlthi.ng",
+            "lenooby09.tech",
+            "ackwell.au",
+        ],
+    },
+    markdown: {
+        remarkPlugins: [remarkModifiedTime],
+    },
 });
 
-
 // Bellow is for when dedicated server is wanted?
 
 // ,
 //
 //   adapter: node({
 //     mode: "standalone",
-//   })
\ No newline at end of file
+//   })
diff --git a/src/components/FriendLink.astro b/src/components/FriendLink.astro
index f924fe8..1b2820d 100644
--- a/src/components/FriendLink.astro
+++ b/src/components/FriendLink.astro
@@ -1,9 +1,9 @@
 ---
-import { Image } from "astro:assets";
+import { Image, Picture } from "astro:assets";
 
 const { name, image, target } = Astro.props;
 ---
-<a href={`${target}`} target="_blank"><Image src={image} width={88} height={31} alt={`${name}`} class="flex" /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="max" decoding="async" loading="lazy" formats={['webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
diff --git a/src/components/NavHeader.astro b/src/components/NavHeader.astro
index 60a4ccd..49afc3e 100644
--- a/src/components/NavHeader.astro
+++ b/src/components/NavHeader.astro
@@ -44,7 +44,7 @@ const optimizedBackgroundLQ = await getImage({
     | <a href="/" class="nav-btn">Home</a> |
     <a href="/blog" class="nav-btn">Blog</a> |
     <a href="/about" class="nav-btn">About</a> |
-    <a href="/friends" class="nav-btn">Friends</a> |
+    <!-- <a href="/friends" class="nav-btn">Friends</a> | -->
     <a href="/directory" class="nav-btn">Other Pages</a> |
     <a href="/portfolio" class="nav-btn">Portfolio</a> |
     </p>
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
index 218b2e1..9cee44d 100644
--- a/src/pages/friends.astro
+++ b/src/pages/friends.astro
@@ -9,103 +9,7 @@ const description = "All of Aria's friends with 88x31 buttons for you to click o
 ---
 
 <BaseLayout pageTitle={pageTitle}>
-    <Partition>
-        <h1 class="text-2xl">These are cool people!!</h1>
-        <br />
-        <div class="flex outline-dotted p-5 flex-wrap justify-center">
-            <FriendLink
-                name="Alyxia"
-                image="https://alyxia.dev/static/img/88x31/self.png"
-                target="https://alyxia.dev"
-            />
-            <div class="outline-dashed flex outline-3 mx-1">
-                <FriendLink
-                    name="Prefetcher"
-                    image="https://nanoshinono.me/prefetcher.gif"
-                    target="https://nanoshinono.me/"
-                />
-                <FriendLink
-                    name="Ata"
-                    image="https://ata.moe/88x31.png"
-                    target="https://ata.moe"
-                />
-            </div>
-            <FriendLink
-                name="Amemoia"
-                image="https://buh.moe/resources/buttons/88x31.gif"
-                target="https://buh.moe/"
-            />
-            <FriendLink
-                name="Hayden"
-                image="https://hayden.moe/88x31/hayden.png"
-                target="https://hayden.moe/"
-            />
-            <FriendLink
-                name="Onzecki"
-                image="https://onz.ee/assets/88x31s/png/onzecki.png"
-                target="https://onz.ee/"
-            />
-            <FriendLink
-                name="NotNite"
-                image="https://notnite.com/buttons/notnite.png"
-                target="https://notnite.com/"
-            />
-            <FriendLink
-                name="0x5066"
-                image="https://erisdump.neocities.org/buttons/88x31_1.gif"
-                target="https://erisdump.neocities.org"
-            />
-            <FriendLink
-                name="Espi"
-                image="https://espi.me/img/webring/espi.png"
-                target="https://www.espi.me"
-            />
-            <FriendLink
-                name="Alula"
-                image="https://alula.me/webring/alula.png"
-                target="https://alula.me/"
-            />
-            <FriendLink
-                name="Sapphic"
-                image="https://sapphic.moe/buttons/friends/sapphic.png"
-                target="https://sapphic.moe/"
-            />
-            <FriendLink
-                name="Miyuko"
-                image="https://calayucu.com/button-88x31.png"
-                target="https://calayucu.com"
-            />
-            <FriendLink
-                name="meow_d"
-                image="https://meow-d.github.io/assets/images/buttons/meow_d.webp"
-                target="https://meow-d.github.io/"
-            />
-            <div class="outline-dashed flex outline-3 mx-1">
-                <FriendLink
-                        name="~thermia"
-                        image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
-                        target="https://girlthi.ng/~thermia/"
-                />
-                <FriendLink
-                        name="girlthi.ng"
-                        image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
-                        target="https://girlthi.ng/"
-                />
-            </div>
-            <FriendLink
-                name="LeNooby 09"
-                image="https://lenooby09.tech/88x31/88x31.png"
-                target="https://lenooby09.tech"
-            />
-            <FriendLink
-                name="Ackwell"
-                image="https://ackwell.au/assets/88x31/ackwell-coil.png"
-                target="https://ackwell.au"
-            />
-        </div>
-        <br />
-        <a href="/other buttons">Extra 88x31 buttons!</a>
-    </Partition>
+    
     <Partition>
         <h2>My badge:</h2>
         <div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d5b0159..273a7f4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,14 +4,15 @@ import Partition from "../components/Partition.astro";
 import Greeting from "../components/Greeting";
 import Social from "../components/Social.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
+import FriendLink from "../components/FriendLink.astro";
 const pageTitle = "Aria";
 
 const currentDate = new Date();
 const ariaBirthDate = new Date("2002-05-07");
-	
+
 const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
-	
-const age = seconds/31556952;
+
+const age = seconds / 31556952;
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -19,8 +20,12 @@ const age = seconds/31556952;
         <main>
             <h1 class="text-4xl">Welcome!~</h1>
             <p>
-                I'm Aria, a <span class="tooltip">{Math.floor(age)}<span class="tooltiptext"><nobr>{age.toFixed(8)} years to be exact!</nobr></span></span> year old software developer and electronics
-                repair tech out of rural <span style="color: #D4F7CF;"
+                I'm Aria, a <span class="tooltip"
+                    >{Math.floor(age)}<span class="tooltiptext"
+                        ><nobr>{age.toFixed(8)} years to be exact!</nobr></span
+                    ></span
+                > year old software developer and electronics repair tech out of
+                rural <span style="color: #D4F7CF;"
                     >Australia <span
                         class="backdrop-brightness-200 px-1 text-2xl rounded"
                         >🇦🇺</span
@@ -30,29 +35,153 @@ const age = seconds/31556952;
         </main>
     </Partition>
     <Partition>
-        <Greeting client:load messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]} />
+        <Greeting
+            client:load
+            messages={["Yo", "Hallo", "Ayo", "Hiya", "You're cute"]}
+        />
     </Partition>
     <Partition>
         <h1>Socials:</h1>
         <Social />
     </Partition>
+    <Partition>
+        <h1 class="text-2xl">These are cool people!!</h1>
+        <br />
+        <div class="flex outline-dotted p-5 flex-wrap justify-center">
+            <FriendLink
+                name="Alyxia"
+                image="https://alyxia.dev/static/img/88x31/self.png"
+                target="https://alyxia.dev"
+            />
+            <div class="outline-dashed flex outline-3 mx-1">
+                <FriendLink
+                    name="Prefetcher"
+                    image="https://nanoshinono.me/prefetcher.gif"
+                    target="https://nanoshinono.me/"
+                />
+                <FriendLink
+                    name="Ata"
+                    image="https://ata.moe/88x31.png"
+                    target="https://ata.moe"
+                />
+            </div>
+            <FriendLink
+                name="Amemoia"
+                image="https://buh.moe/resources/buttons/88x31.gif"
+                target="https://buh.moe/"
+            />
+            <FriendLink
+                name="Hayden"
+                image="https://hayden.moe/88x31/hayden.png"
+                target="https://hayden.moe/"
+            />
+            <FriendLink
+                name="Onzecki"
+                image="https://onz.ee/assets/88x31s/png/onzecki.png"
+                target="https://onz.ee/"
+            />
+            <FriendLink
+                name="NotNite"
+                image="https://notnite.com/buttons/notnite.png"
+                target="https://notnite.com/"
+            />
+            <FriendLink
+                name="0x5066"
+                image="https://erisdump.neocities.org/buttons/88x31_1.gif"
+                target="https://erisdump.neocities.org"
+            />
+            <FriendLink
+                name="Espi"
+                image="https://espi.me/img/webring/espi.png"
+                target="https://www.espi.me"
+            />
+            <FriendLink
+                name="Alula"
+                image="https://alula.me/webring/alula.png"
+                target="https://alula.me/"
+            />
+            <FriendLink
+                name="Sapphic"
+                image="https://sapphic.moe/buttons/friends/sapphic.png"
+                target="https://sapphic.moe/"
+            />
+            <FriendLink
+                name="Miyuko"
+                image="https://calayucu.com/button-88x31.png"
+                target="https://calayucu.com"
+            />
+            <FriendLink
+                name="meow_d"
+                image="https://meow-d.github.io/assets/images/buttons/meow_d.webp"
+                target="https://meow-d.github.io/"
+            />
+            <div class="outline-dashed flex outline-3 mx-1">
+                <FriendLink
+                    name="~thermia"
+                    image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
+                    target="https://girlthi.ng/~thermia/"
+                />
+                <FriendLink
+                    name="girlthi.ng"
+                    image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
+                    target="https://girlthi.ng/"
+                />
+            </div>
+            <FriendLink
+                name="LeNooby 09"
+                image="https://lenooby09.tech/88x31/88x31.png"
+                target="https://lenooby09.tech"
+            />
+            <FriendLink
+                name="Ackwell"
+                image="https://ackwell.au/assets/88x31/ackwell-coil.png"
+                target="https://ackwell.au"
+            />
+        </div>
+        <br />
+        <a href="/other buttons">Extra 88x31 buttons!</a>
+    </Partition>
+    <Partition>
+        <h2>My badge:</h2>
+        <div class="flex w-fit h-fit" style="background-color: #FFFCBC;">
+            <a href="https://aria.coffee/" target="_blank">
+                <img
+                    alt="Aria"
+                    src="https://aria.coffee/static/img/buttons/aria.gif"
+                    style="min-width: 88px; width: 176px; min-height: 31px; height: 62px; image-rendering: pixelated;"
+                />
+            </a>
+        </div>
+        <br />
+        <p>Code:</p>
+        <label>
+            <textarea
+                onclick="this.select()"
+                readonly
+                cols="60"
+                rows="2"
+                class="rounded backdrop-brightness-0"
+                style="background-color: black;"
+                >&lt;img src="https://aria.coffee/static/img/buttons/aria.gif"
+                alt="Aria" style="image-rendering: pixelated;" /&gt;</textarea
+            >
+        </label>
+    </Partition>
     <script>
         setInterval(() => {
-        	const currentDate = new Date();
-			const ariaBirthDate = new Date("2002-05-07");
-	
-			const seconds = (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
-	
-			const age = seconds/31556952;
-	
-			const ageElem = document.querySelector('.tooltip');
+            const currentDate = new Date();
+            const ariaBirthDate = new Date("2002-05-07");
+
+            const seconds =
+                (currentDate.getTime() - ariaBirthDate.getTime()) / 1000;
+
+            const age = seconds / 31556952;
+
+            const ageElem = document.querySelector(".tooltip");
 
             ageElem!.outerHTML = `<span class="tooltip">${Math.floor(age)}<span class="tooltiptext"><nobr>${age.toFixed(8)} years to be exact!</nobr></span></span>`;
         }, 1000);
     </script>
 
-<style is:inline>
-
-    </style>
+    <style is:inline></style>
 </BaseLayout>
-