content collections for badges and projects

.editorconfig

@@ -5,5 +5,5 @@ end_of_line = lf
 indent_style = space
 indent_size = 4
 
-[*.nix]
+[{*.nix,*.yml}]
 indent_size = 2

eslint.config.mjs

@@ -4,6 +4,7 @@ import typescriptEslint from "typescript-eslint";
 export default [
     {
         ignores: [
+            "**/.astro",
             "**/dist/*",
             "**/result/*",
             "**/node_modules/*"
@@ -13,8 +14,9 @@ export default [
     ...eslintPluginAstro.configs.recommended,
     {
         rules: {
-            quotes: ["error", "double"],
+            "quotes": ["error", "double"],
-            semi: ["error", "always"],
+            "semi": ["error", "always"],
+            "comma-dangle": ["error", "never"],
 
             "@typescript-eslint/no-unused-vars": [
                 "error",
@@ -23,6 +25,6 @@ export default [
                     argsIgnorePattern: "^_"
                 }
             ]
-        },
+        }
     }
 ];

src/components/Badges.astro

@@ -1,37 +1,25 @@
 ---
-import { Image } from "astro:assets";
+import { getEntry } from "astro:content";
-import type { ImageMetadata } from "astro";
 
-const images = import.meta.glob<{ default: ImageMetadata }>("../assets/badges/*.*");
+const badges = await getEntry("badges", "badges");
-
-interface Props {
-    badges: {
-        href?: string,
-        title?: string,
-        alt: string,
-        imagePath: string
-    }[]
-}
-
-const { badges } = Astro.props;
 ---
 
 <div class="badges">
-    {badges.map((badge) => {
+    {badges.data.map((badge) => {
-        // hopefully we can dedupe this sometime....
-        const isTreatedAsPublic = images[badge.imagePath] === undefined;
         const hasHref = badge.href !== undefined;
 
+        // ugh.
+        // i wish we could dedupe this, but im not sure how
         return <>
             {hasHref ? <a href={badge.href} target="_blank" rel="noreferrer noopener">
-                {isTreatedAsPublic
+                {typeof badge.path !== "string"
-                    ? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    ? <img src={badge.path.src} 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"/>
+                    : <img src={badge.path} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </a> : <>
-                {isTreatedAsPublic
+                {typeof badge.path !== "string"
-                    ? <img src={badge.imagePath} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
+                    ? <img src={badge.path.src} 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"/>
+                    : <img src={badge.path} alt={badge.alt} title={badge.title} loading="lazy" decoding="async" width="88" height="31"/>
                 }
             </>}
         </>;

src/components/Projects.astro

@@ -1,21 +1,13 @@
 ---
-interface Props {
+import { getEntry } from "astro:content";
-    projects: {
-        name: string,
-        description: string,
-        date: Date,
-        dateVisual?: string,
-        links: string[]
-    }[]
-}
 
-const { projects } = Astro.props;
+const projects = await getEntry("projects", "projects");
 
 let lastYear = 0;
 ---
 
 <div>
-    {projects.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
+    {projects.data.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
         const isNewYear = project.date.getFullYear() !== lastYear;
         lastYear = project.date.getFullYear();
 

src/content/badges/badges.yml

@@ -0,0 +1,62 @@
+- path: /88x31.gif
+  alt: CLI prompt displaying 'reidlab'
+  title: my button! feel free to use or hotlink
+  href: /
+- path: ./img/blinchik.gif
+  alt: blinchik
+  title: best site on the internet!
+  href: https://yugoslavia.best
+- path: ./img/poweredbybob.gif
+  alt: powered by bob
+- path: ./img/miku.gif
+  alt: this site is miku approved
+- path: ./img/paws.gif
+  alt: made with my own two paws
+- path: ./img/nixos.png
+  alt: powered by nixos
+  title: free me from this prison
+  href: https://nixos.org
+- path: ./img/notitg.png
+  alt: notitg
+  title: play notitg!
+  href: https://noti.tg
+- path: ./img/kriswheretfarewe.png
+  alt: kris where tf are we
+- path: ./img/showmeyourheart.gif
+  alt: final fantasy geometry dash
+  title: ▼▼  ▼▼  »  ▲▲▲▲   ▲▲▲▲  ‹  ▼▼  ▼▼  ›  ▲▲▲  ▲▲▲
+  href: https://gdbrowser.com/76767195
+- path: ./img/acab.gif
+  alt: all cops are bastards
+- path: ./img/w3cbad.gif
+  alt: w3c approved bad html markup
+- path: ./img/internetarchive.gif
+  alt: internet archive
+  href: https://archive.org
+- path: ./img/animeisgay.gif
+  alt: anime is gay as hell but i approve
+- path: ./img/halflife.gif
+  alt: half life
+  title: gorgon freeman....
+- path: ./img/vscode.png
+  alt: made with with vscode
+  href: https://code.visualstudio.com/
+- path: ./img/oat100.gif
+  alt: i got 100% on.zone
+  href: https://oat.zone
+- path: ./img/oat.gif
+  alt: oat.zone
+  title: cool person!
+  href: https://oat.zone
+- path: ./img/tidalwave.gif
+  alt: tidal wave geometry dash
+  title: <<<TIDAL<<<<<<\n>>>>>>>WAVE>>>
+  href: https://gdbrowser.com/86407629
+- path: ./img/singasongaboutlife.gif
+  alt: sing a song about life
+  title: sing a song about life
+  href: https://vyletpony.com/music
+- path: ./img/slugcat.png
+  alt: slug cat
+  title: Slug ca
+  href: https://rainworldgame.com/

src/content/config.ts

@@ -0,0 +1,30 @@
+import { z, defineCollection } from "astro:content";
+
+// some of these schemas are a bit Weird but,
+// i find it easier to have it in one array instead of several files
+
+const projectsCollection = defineCollection({
+    type: "data",
+    schema: z.array(z.object({
+        name: z.string(),
+        description: z.string(),
+        date: z.date(),
+        dateVisual: z.string().optional(),
+        links: z.string().array()
+    }))
+});
+
+const badgesCollection = defineCollection({
+    type: "data",
+    schema: ({ image }) => z.array(z.object({
+        path: image().or(z.string()),
+        alt: z.string(),
+        href: z.string().optional(),
+        title: z.string().optional()
+    }))
+});
+
+export const collections = {
+    projects: projectsCollection,
+    badges: badgesCollection
+};

src/content/projects/projects.yml

@@ -0,0 +1,11 @@
+- name: "lastfmpris"
+  description: "a rust application to scrobble your currently playing song on last.fm with mpris"
+  date: 2024-08-22
+  links: 
+    - "https://git.reidlab.pink/reidlab/lastfmpris"
+- name: reidlab.pink
+  description: this website!
+  date: 2024-07-04
+  links:
+    - https://reidlab.pink
+    - https://git.reidlab.pink/reidlab/website

src/env.d.ts

@@ -1 +1,5 @@
+// this file is automatically generated. shut up eslint
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />

src/pages/projects.astro

@@ -2,7 +2,8 @@
 import Layout from "../layouts/Layout.astro";
 
 import Card from "../components/Card.astro";
-/* funny import/export conflict if we don't do this :( */
+// funny import/export conflict if we don't do this :( 
+// unfortunate...
 import ProjectsList from "../components/Projects.astro";
 ---
 
@@ -10,26 +11,6 @@ import ProjectsList from "../components/Projects.astro";
     <Card title="projects">
         <p>unfortunately, at the moment, i don't have too much interesting things for you to see. eventually when i get my shit together, you'll see more and more things appear on here</p>
         <p>as always, my socials and contacts are on the left or top side of the screen for you to access if you wanna poke around in my git repositories</p>
-        <ProjectsList
+        <ProjectsList/>
-            projects={[
-                {
-                    name: "reidlab.pink",
-                    description: "this website!",
-                    date: new Date(2024, 6, 14),
-                    links: [
-                        "https://reidlab.pink",
-                        "https://git.reidlab.pink/reidlab/website"
-                    ]
-                },
-                {
-                    name: "lastfmpris",
-                    description: "a rust application to scrobble your currently playing song on last.fm with mpris",
-                    date: new Date(2024, 7, 22),
-                    links: [
-                        "https://git.reidlab.pink/reidlab/lastfmpris"
-                    ]
-                }
-            ]}
-        />
     </Card>
 </Layout>