feat(projects): load projects from content/

app/components/Projects/BottomScreen/BottomScreen.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Projects from "./Projects.vue";
+
+const store = useProjectsStore();
+
+store.$reset();
+await store.loadProjects();
 </script>
 
 <template>

app/components/Projects/BottomScreen/Projects.vue

@@ -1,10 +1,7 @@
 <script setup lang="ts">
-// TODO: handle mouse wheel
-
 import gsap from "gsap";
 import SELECTOR_IMAGE from "/assets/images/projects/bottom-screen/selector.webp";
 import PROJECT_SQUARE_IMAGE from "/assets/images/projects/bottom-screen/project-square.webp";
-import { useKeyDown } from "~/composables/useKeyDown";
 
 const store = useProjectsStore();
 
@@ -68,7 +65,7 @@ useRender((ctx) => {
 
   ctx.font = "10px NDS10";
 
-  const lines = store.projects[store.currentProject]!.description.split("\n");
+  const lines = store.projects[store.currentProject]!.description.split("\\n");
   const textY = lines.length === 1 ? 35 : 28;
   for (let i = 0; i < lines.length; i += 1) {
     const { actualBoundingBoxRight: width } = ctx.measureText(lines[i]!);

app/stores/projects.ts

@@ -1,67 +1,15 @@
-import PIHKAAL_ME_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.webp";
-import TLOCK_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/tlock.webp";
-import SIMPLE_QR_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/simple-qr.webp";
-import LILOU_CAT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lilou.cat.webp";
-import LBF_BOT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lbf-bot.webp";
-import RAYLIB_SPEENDRUNS_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.webp";
-import SP3WEB_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/s3pweb.webp";
-import BIOBLEUD_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/biobleud.webp";
+// import PIHKAAL_ME_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.webp";
+// import TLOCK_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/tlock.webp";
+// import SIMPLE_QR_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/simple-qr.webp";
+// import LILOU_CAT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lilou.cat.webp";
+// import LBF_BOT_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/lbf-bot.webp";
+// import RAYLIB_SPEENDRUNS_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.webp";
+// import SP3WEB_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/s3pweb.webp";
+// import BIOBLEUD_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/biobleud.webp";
 
 export const useProjectsStore = defineStore("projects", {
   state: () => ({
-    // prettier-ignore
-    projects: [
-      {
-        description: "pihkaal.me - my personal website",
-        thumbnail: PIHKAAL_ME_THUMBNAIL,
-        url: "https://pihkaal.me",
-      },
-      {
-        description: "tlock - fully customizable and cross-\nplatform terminal based clock",
-        thumbnail: TLOCK_THUMBNAIL,
-        url: "https://github.com/pihkaal/tlock",
-      },
-      {
-        description: "Simple QR - Simple QR code generator\nwith straightforward API",
-        thumbnail: SIMPLE_QR_THUMBNAIL,
-        url: "https://simple-qr.com",
-      },
-      {
-        description: "lilou.cat - My cat's website",
-        thumbnail: LILOU_CAT_THUMBNAIL,
-        url: "https://lilou.cat",
-      },
-      {
-        description: "LBF Bot - Custom Discord bot for\na gaming group",
-        thumbnail: LBF_BOT_THUMBNAIL,
-        url: "https://github.com/pihkaal/lbf-bot",
-      },
-      {
-        description: "Raylib Speedruns - Collection of simple\nRaylib setups in multiple languages",
-        thumbnail: RAYLIB_SPEENDRUNS_THUMBNAIL,
-        url: "https://github.com/pihkaal/raylib-speedruns",
-      },
-      {
-        description: "S3P Map Editor - Web based map editor\nspecialized for trucks",
-        thumbnail: SP3WEB_THUMBNAIL,
-        url: null,
-      },
-      {
-        description: "S3P Eramba Visualizer - Eramba\nasset visualization",
-        thumbnail: SP3WEB_THUMBNAIL,
-        url: null,
-      },
-      {
-        description: "S3P Incident Engine - Automated\nalerts to Jira",
-        thumbnail: SP3WEB_THUMBNAIL,
-        url: null,
-      },
-      {
-        description: "Biobleud - Automated Excel imports\nfor an ERP system",
-        thumbnail: BIOBLEUD_THUMBNAIL,
-        url: null,
-      },
-    ] satisfies {
+    projects: [] as {
       description: string;
       thumbnail: string;
       url: string | null;
@@ -70,6 +18,14 @@ export const useProjectsStore = defineStore("projects", {
   }),
 
   actions: {
+    async loadProjects() {
+      const { data: projects } = await useAsyncData("projects", () =>
+        queryCollection("projects").order("order", "ASC").all(),
+      );
+      if (!projects.value) throw "Cannot load projects";
+      this.projects = projects.value;
+    },
+
     visitProject() {
       const url = this.projects[this.currentProject]!.url;
       if (url) navigateTo(url, { external: true, open: { target: "_blank" } });