Add JXL decoder and test page

This commit is contained in:
Aria 2025-03-19 08:19:25 +11:00
parent 983ae3ae80
commit 6e55b498f8
Signed by untrusted user who does not match committer: aria
GPG key ID: 19AB7AA462B8AB3B
8 changed files with 80 additions and 0 deletions

View file

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

View file

@ -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>

View file

@ -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>