rewrite badges to allow public directory, add badge

This commit is contained in:
Reid 2024-08-21 23:26:26 -07:00
parent 2f9d7650d4
commit e84ca61785
Signed by: reidlab
GPG key ID: DAF5EAF6665839FD
3 changed files with 24 additions and 4 deletions

BIN
public/88x31.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 B

View file

@ -18,10 +18,23 @@ const { badges } = Astro.props;
<div class="badges">
{badges.map((badge) => {
// probably could be a lot cleaner, but i dont care
if (!images[badge.imagePath]) throw new Error(`"${badge.imagePath}" does not exist in glob for wildcard in badges`);
if (badge.href !== undefined) return <a href={badge.href} target="_blank" rel="noreferrer noopener"><Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy"/></a>;
else return <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy"/>;
// hopefully we can dedupe this sometime....
const isTreatedAsPublic = images[badge.imagePath] === undefined;
const hasHref = badge.href !== undefined;
return <>
{hasHref ? <a href={badge.href} target="_blank" rel="noreferrer noopener">
{isTreatedAsPublic
? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
: <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy" width="88" height="31"/>
}
</a> : <>
{isTreatedAsPublic
? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
: <Image src={images[badge.imagePath]()} alt={badge.alt} title={badge.title} quality={100} loading="lazy" width="88" height="31"/>
}
</>}
</>;
})}
</div>
<style>
@ -30,6 +43,7 @@ const { badges } = Astro.props;
flex-wrap: wrap;
justify-content: center;
gap: .2em;
image-rendering: pixelated;
margin-top: 1.25em;
margin-bottom: 1.25em;

View file

@ -14,6 +14,12 @@ import Badges from "../components/Badges.astro";
</Card>
<Card title="buttons">
<Badges badges={[
{
imagePath: "/88x31.gif",
alt: "CLI prompt displaying 'reidlab'",
title: "my button! feel free to use or hotlink",
href: "/"
},
{
imagePath: "../assets/badges/blinchik.gif",
alt: "blinchik",