init

src/components/Badges.astro

@@ -0,0 +1,42 @@
+---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+
+const images = import.meta.glob<{ default: ImageMetadata }>("../assets/badges/*.*");
+
+interface Props {
+    badges: {
+        href?: string,
+        title?: string,
+        alt: string,
+        imagePath: string
+    }[]
+}
+
+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"/>;
+    })}
+</div>
+<style>
+    .badges {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: .2em;
+
+        margin-top: 1.25em;
+        margin-bottom: 1.25em;
+
+        & a {
+            width: 88px;
+            height: 31px;
+        }
+    }
+</style>