aria/aria.coffee
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

fix(index): fix avif animated iamges not being usable

Browse source
This commit is contained in:
aria 2025-06-01 21:36:16 +10:00
parent ff45976e1f
commit 1c5be72e77
Signed by: aria
SSH key fingerprint: SHA256:WqtcVnDMrv1lnUlNah5k31iywFUI/DV+5yHzCTO4Vds
3 changed files with 37 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/FriendLinkLowAnimated.astro Normal file
View file

@ -0,0 +1,16 @@
---
import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
width: 176px;
min-height: 31px;
height: 62px;
padding: 4px;
}
</style>

16
src/components/FriendLinkMidAnimated.astro Normal file
View file

@ -0,0 +1,16 @@
---
import { Image, Picture } from "astro:assets";
const { name, image, target } = Astro.props;
---
<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
<style>
img {
image-rendering: pixelated;
min-width: 88px;
width: 176px;
min-height: 31px;
height: 62px;
padding: 4px;
}
</style>

8
src/pages/index.astro
View file

@ -7,6 +7,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
import FriendLink from "../components/FriendLinkHigh.astro";
import FriendLinkMid from "../components/FriendLinkMid.astro";
import FriendLinkLow from "../components/FriendLinkLow.astro";
import FriendLinkLowAnimated from "../components/FriendLinkLowAnimated.astro";
import FriendLinkMidAnimated from "../components/FriendLinkMidAnimated.astro";
const pageTitle = "Aria";
const currentDate = new Date();
@ -93,7 +95,7 @@ const age = seconds / 31556952;
image="https://notnite.com/buttons/notnite.png"
target="https://notnite.com/"
/>
<FriendLinkLow
<FriendLinkLowAnimated
name="0x5066"
image="https://erisdump.neocities.org/buttons/88x31_2.gif"
target="https://erisdump.neocities.org"
@ -124,12 +126,12 @@ const age = seconds / 31556952;
target="https://meow-d.github.io/"
/>
<div class="outline-dashed flex outline-3 mx-1">
<FriendLink
<FriendLinkMidAnimated
name="~thermia"
image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
target="https://girlthi.ng/~thermia/"
/>
<FriendLink
<FriendLinkMidAnimated
name="girlthi.ng"
image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
target="https://girlthi.ng/"