Add JXL decoder and test page
This commit is contained in:
parent
983ae3ae80
commit
6e55b498f8
8 changed files with 80 additions and 0 deletions
3
src/components/jxl-loader.astro
Normal file
3
src/components/jxl-loader.astro
Normal 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>
|
43
src/layouts/BaseLayoutJxl.astro
Normal file
43
src/layouts/BaseLayoutJxl.astro
Normal 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>
|
31
src/pages/jxl-testing.astro
Normal file
31
src/pages/jxl-testing.astro
Normal 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>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue