force the jxl loader code to point to the root dir of aria.coffee

README.md

@@ -11,9 +11,11 @@ Example URL: `https://github.com/BuyMyMojo/aria.coffee/` - Notice the trailing `
 On dev machine:
 
 ```sh
-pnpm run build && rm -r ./dist-new && mv ./dist ./dist-new && croc send ./dist-new
+pnpm run build && rm -r ./dist-new && mv ./dist ./dist-new && croc send --zip ./dist-new
 ```
 
+The `--zip` is required as there is some file name somewhere that croc doesn't like so putting in a zip fixes this.
+
 on server:
 
 ```sh

package.json

@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/mdx": "^4.1.0",
-    "@astrojs/node": "^9.1.2",
+    "@astrojs/mdx": "^4.2.1",
+    "@astrojs/node": "^9.1.3",
     "@astrojs/preact": "^4.0.5",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^5.1.5",
-    "astro": "^5.4.2",
+    "astro": "^5.5.3",
     "astro-icon": "^1.1.5",
     "dayjs": "^1.11.13",
     "preact": "^10.26.4",
@@ -28,6 +28,6 @@
     "@iconify-json/meteor-icons": "^1.2.1",
     "@iconify-json/tabler": "^1.2.17",
     "@tailwindcss/typography": "^0.5.16",
-    "vite": "^6.2.1"
+    "vite": "^6.2.2"
   }
 }

public/jxl.min.js

@@ -0,0 +1 @@
+!function(){"use strict";let e={useCache:!0,imageType:"png"},a,t={};function s(s,i,n,r){let l=s.dataset.jxlSrc;if(i instanceof Blob)c(s,URL.createObjectURL(i),n,r);else if("OffscreenCanvas"in window){let d=new OffscreenCanvas(i.width,i.height);t[l].postMessage({canvas:d,imgData:i,imageType:e.imageType},[d]),t[l].addEventListener("message",t=>{t.data.url&&t.data.blob&&(c(s,t.data.url,n,r),e.useCache&&a&&a.put(l,new Response(t.data.blob)))})}else{let g=document.createElement("canvas");g.width=i.width,g.height=i.height,g.getContext("2d").putImageData(i,0,0),g.toBlob(t=>{c(s,URL.createObjectURL(t),n,r),e.useCache&&a&&a.put(l,new Response(t))},"image/"+e.imageType)}}function c(a,t,s,c){s?a.style.backgroundImage='url("'+t+'")':c?(a.srcset=t,a.type="image/"+e.imageType):a.src=t}async function i(c,i,n){let r=c.dataset.jxlSrc=i?getComputedStyle(c).backgroundImage.slice(5,-2):n?c.srcset:c.currentSrc;if(i||n||(c.srcset="",c.src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="),e.useCache){try{a=a||await caches.open("jxl")}catch(l){}let d=a&&await a.match(r);if(d){let g=await d.blob();requestAnimationFrame(()=>s(c,g,i,n));return}}let o=await fetch(r),u=await o.arrayBuffer();t[r]=new Worker("https://aria.coffee/jxl_dec.js"),t[r].postMessage({jxlSrc:r,image:u}),t[r].addEventListener("message",e=>e.data.imgData&&requestAnimationFrame(()=>s(c,e.data.imgData,i,n)))}new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{e instanceof HTMLImageElement&&e.src.endsWith(".jxl")?e.onerror=()=>i(e,!1,!1):e instanceof HTMLSourceElement&&e.srcset.endsWith(".jxl")?i(e,!1,!0):e instanceof Element&&getComputedStyle(e).backgroundImage.endsWith('.jxl")')&&i(e,!0,!1)}))).observe(document.documentElement,{subtree:!0,childList:!0})}();

src/components/Footer.astro

@@ -5,18 +5,20 @@ import { Icon } from "astro-icon/components";
 import { execSync } from "node:child_process";
 
 const commitURL = import.meta.env.PUBLIC_COMMIT === "" ? "" : `${import.meta.env.PUBLIC_REPOURL}commit/${execSync(`git log -1 --pretty="format:%H"`)}`;
-const COMMIT = import.meta.env.PUBLIC_COMMIT === "" ? "Docker Build!" : `<a href=${commitURL}>${execSync(`git log -1 --pretty="format:%h"`)}</a>`;
+const COMMIT = import.meta.env.PUBLIC_COMMIT === "" ? "Docker Build!" : `<a href=${commitURL} target="_blank">${execSync(`git log -1 --pretty="format:%h"`)}</a>`;
 ---
 
 <hr class="h-1" style="" />
 <footer class="flexcol">
     <div class="flexrow">
-        <p>
+        <p class="text-center">
             | <a href="https://github.com/BuyMyMojo/aria.coffee" target="_blank"
-                > <Icon name="mdi:source-branch" class={"svg-inline"}/>Source Code</a
+                > <Icon name="mdi:source-branch" class={"svg-inline"}/>Source</a
             > - Commit:<Fragment set:html={COMMIT} /> | <a href="https://aria.coffee/rss.xml" target="_blank"
                 > <Icon name="mdi:rss" class={"svg-inline"}/>RSS Feed</a
-            > |
+            > | <span class="tooltip"><a href="/special_blog"
+            > <Icon name="mdi:rss" class={"svg-inline"}/>blog for robots!</a
+        > <span class="tooltiptext"><nobr>AI Honeypot~</nobr></span></span> |
         </p>
     </div>
     <div class="flex">

src/components/NavHeader.astro

@@ -45,7 +45,7 @@ const optimizedBackgroundLQ = await getImage({
     <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="/other buttons" class="nav-btn">Moar 88x31</a> |
+    <a href="/directory" class="nav-btn">Other Pages</a> |
     <a href="/portfolio" class="nav-btn">Portfolio</a> |
     </p>
 </Partition>

src/components/Social.astro

@@ -15,7 +15,7 @@ import { Icon } from "astro-icon/components";
         <a href={bsky} class="p-1" target="_blank"
             ><Icon name="meteor-icons:bluesky" class={"svg-inline"} /> Bluesky</a
         > - <button id="bskypid"
-            >@femgo.buymymojo.net (Click to copy DID)</button
+            >@aria.coffee (Click to copy DID)</button
         >
     </li>
     <li>

src/components/jxl-loader.astro

@@ -0,0 +1,3 @@
+<link rel="prefetch" href="https://aria.coffee/jxl_dec.js" fetchpriority="high">
+<link rel="prefetch" href="https://aria.coffee/jxl_dec.wasm" fetchpriority="high">
+<script src="https://aria.coffee/jxl.min.js" type="text/javascript"></script>

src/layouts/BaseLayoutJxl.astro

@@ -0,0 +1,43 @@
+---
+import Favicon from "../components/Favicon.astro";
+import Footer from "../components/Footer.astro";
+import NavHeader from "../components/NavHeader.astro";
+import "../styles/aria.css";
+import EmbedCode from "../components/EmbedCode.astro";
+import JxlLoader from "../components/jxl-loader.astro";
+
+const { pageTitle, description = "Aria's little corner of the web" } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <Favicon />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="generator" content={Astro.generator} />
+        <meta name="description" content={description}>
+        <title>{pageTitle}</title>
+        <EmbedCode pageTitle={pageTitle} description={description} />
+
+        <link rel="preconnect" href="https://transring.neocities.org" />
+        <link rel="dns-prefetch" href="https://transring.neocities.org" />
+        <link rel="preload" as="script" href="https://transring.neocities.org/ring.js">
+        <link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/button.png">
+        <link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/left.png">
+        <link rel="preload" as="image" href="https://transring.neocities.org/widget/trans/right.png">
+
+        <JxlLoader />
+
+        <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="Aria's blog"
+            href={new URL("rss.xml", Astro.site)}
+        />
+    </head>
+    <body>
+      <NavHeader />
+      <slot />
+      <Footer />
+    </body>
+</html>

src/pages/directory.astro

@@ -0,0 +1,20 @@
+---
+import Partition from "../components/Partition.astro";
+
+import BaseLayout from "../layouts/BaseLayout.astro";
+const pageTitle = "A bunch of other pages!";
+
+---
+
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-4xl font-bold">{pageTitle}</h1>
+        <p>Here are some other pages I have for various reasons!</p>
+
+        <ul class=" list-disc px-8">
+            <li><a href="/jxl-testing">JpegXL Decoder Test</a></li>
+            <li><a href="/other buttons">Extra 88x31 buttons</a></li>
+        </ul>
+    </Partition>
+</BaseLayout>
+

src/pages/friends.astro

@@ -103,6 +103,8 @@ const description = "All of Aria's friends with 88x31 buttons for you to click o
                 target="https://ackwell.au"
             />
         </div>
+        <br />
+        <a href="/other buttons">Extra 88x31 buttons!</a>
     </Partition>
     <Partition>
         <h2>My badge:</h2>

src/pages/index.astro

@@ -5,6 +5,13 @@ import Greeting from "../components/Greeting";
 import Social from "../components/Social.astro";
 import BaseLayout from "../layouts/BaseLayout.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;
 ---
 
 <BaseLayout pageTitle={pageTitle}>
@@ -12,7 +19,7 @@ const pageTitle = "Aria";
         <main>
             <h1 class="text-4xl">Welcome!~</h1>
             <p>
-                I'm Aria, a 22 year old software developer and electronics
+                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"
@@ -29,4 +36,23 @@ const pageTitle = "Aria";
         <h1>Socials:</h1>
         <Social />
     </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');
+
+            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>
 </BaseLayout>
+

src/pages/jxl-testing.astro

@@ -0,0 +1,31 @@
+---
+import Partition from "../components/Partition.astro";
+
+import BaseLayoutJxl from "../layouts/BaseLayoutJxl.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+const pageTitle = "Testing JpegXL support!";
+
+---
+
+<BaseLayoutJxl pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-4xl font-bold">{pageTitle}</h1>
+    </Partition>
+    <Partition>
+        <h2 class="text-3xl font-bold">About</h2>
+        <p>I found <a href="https://github.com/niutech/jxl.js" target="_blank">this</a> neat snippet of code for adding </p>
+    </Partition>
+    <Partition>
+        <h3 class="text-2xl text-center font-bold">PNG:</h2>
+        <img src="/static/img/sites/avatar.png" />
+    </Partition>
+    <Partition>
+        <h3 class="text-2xl text-center font-bold">AVIF:</h2>
+        <img src="/static/img/sites/avatar.avif" />
+    </Partition>
+    <Partition>
+        <h3 class="text-2xl text-center font-bold">JXL:</h2>
+        <img src="/static/img/sites/avatar.jxl" />
+    </Partition>
+</BaseLayoutJxl>
+

src/pages/special_blog.astro

@@ -0,0 +1,18 @@
+---
+import FriendLink from "../components/FriendLink.astro";
+import "../styles/aria.css";
+import Partition from "../components/Partition.astro";
+import BaseLayout from "../layouts/BaseLayout.astro";
+
+const pageTitle = "Aria's friends";
+const description = "All of Aria's friends with 88x31 buttons for you to click on!!";
+---
+
+<BaseLayout pageTitle={pageTitle}>
+    <Partition>
+        <h1 class="text-2xl">You should not be here!!</h1>
+        <p>If you can see this page then something has gone a little silly!</p><br />
+        <p>There should be an <a href="https://zadzmo.org/code/nepenthes/" target="_blank">AI honey pot</a> on this page instead of this text!</p><br />
+        <p><a href="https://web.archive.org/web/2/https://zadzmo.org/code/nepenthes/" target="_blank">AI honey pot archive link just to be safe</a></p>
+    </Partition>
+</BaseLayout>

src/styles/aria.css

@@ -13,7 +13,7 @@
 		format("opentype"), url("/static/fonts/comic shanns 2.ttf")
 		format("truetype"); */
 	font-display: swap;
-	}
+}
 
 @font-face {
 	font-family: "Comic Mono";
@@ -72,7 +72,7 @@ a {
 }
 
 a:hover {
-	text-decoration-color: #F5A8B7;
+	text-decoration-color: #f5a8b7;
 	transition: text-decoration-color 0.25s;
 }
 
@@ -132,3 +132,34 @@ a:hover {
 	height: 1em;
 	vertical-align: -0.125em;
 }
+
+.tooltip {
+	position: relative;
+	display: inline-block;
+	text-decoration: underline 2px;
+	text-underline-offset: 2px;
+	text-decoration-color: #fff;
+}
+
+.tooltip:hover {
+	text-decoration-color: #f5a8b7;
+	transition: text-decoration-color 0.25s;
+}
+
+.tooltip .tooltiptext {
+	visibility: hidden;
+	width: auto;
+	background-color: black;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 0;
+
+	/* Position the tooltip */
+	position: absolute;
+	z-index: 1;
+}
+
+.tooltip:hover .tooltiptext {
+	visibility: visible;
+}