rewrite badges to allow public directory, add badge
This commit is contained in:
parent
2f9d7650d4
commit
e84ca61785
3 changed files with 24 additions and 4 deletions
BIN
public/88x31.gif
Normal file
BIN
public/88x31.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 358 B |
|
@ -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;
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue