feat(projects): load preview image in component instead of doing it in the store

app/components/Projects/TopScreen/Previews.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const store = useProjectsStore();
+
+const projectPreviews = ref<HTMLImageElement[]>([]);
+
+onMounted(() => {
+  console.log(store.projects);
+  projectPreviews.value = useImages(...store.projects.map((x) => x.preview));
+});
+
+useRender((ctx) => {
+  const project = store.projects[store.currentProject];
+  if (!project) return;
+
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+
+  const preview = projectPreviews.value[store.currentProject];
+  if (!preview) return;
+
+  const x = (256 - preview.width) / 2;
+  const y = (192 - preview.height) / 2 + 10;
+  ctx.translate(x, y);
+
+  ctx.fillStyle = "#a6a6a6";
+  ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+  ctx.fillStyle = "#000000";
+  ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+  ctx.shadowBlur = 10;
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+
+  ctx.drawImage(preview, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,103 +1,15 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import StatusBar from "./StatusBar.vue";
+import Previews from "./Previews.vue";
 
 const store = useProjectsStore();
-
-useRender((ctx) => {
-  const project = store.projects[store.currentProject];
-  if (!project) return;
-
-  ctx.font = "10px NDS10";
-  ctx.fillStyle = "#000000";
-
-  const preview = store.projects[store.currentProject]?.preview;
-  if (!preview) return;
-  try {
-    const x = (256 - preview.width) / 2;
-    const y = (192 - preview.height) / 2 + 10;
-    ctx.translate(x, y);
-
-    ctx.fillStyle = "#a6a6a6";
-    ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
-    ctx.fillStyle = "#000000";
-    ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
-
-    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-    ctx.shadowBlur = 10;
-    ctx.shadowOffsetX = 2;
-    ctx.shadowOffsetY = 2;
-
-    ctx.drawImage(preview, 0, 0);
-  } catch {
-    // NOTE: this is needed because not all projects have previews yet
-  }
-  return;
-
-  /*
-   * NOTE: following code is markdown renderer
-
-  let penY = 20;
-  const SPACE_Y = 6;
-
-  for (const node of project.body) {
-    switch (node.type) {
-      case "h1": {
-        ctx.font = "10px NDS10";
-        penY += fillTextCentered(ctx, node.text, 0, penY, 256);
-        break;
-      }
-
-      case "p": {
-        ctx.font = "10px NDS10";
-        penY += fillTextWordWrapped(ctx, node.text, 10, penY, 236) - 6;
-        break;
-      }
-
-      case "img": {
-        const x = 10 + 236 / 2 - node.image.width / 2;
-
-        if (1) {
-          ctx.fillStyle = "#000000";
-          ctx.fillRect(
-            x - 2,
-            penY - 2,
-            node.image.width + 4,
-            node.image.height + 4,
-          );
-          ctx.fillStyle = "#ffffff";
-          ctx.fillRect(
-            x - 1,
-            penY - 1,
-            node.image.width + 2,
-            node.image.height + 2,
-          );
-        } else {
-          ctx.fillStyle = "#7d7d7d";
-          ctx.fillRect(
-            x - 1,
-            penY - 1,
-            node.image.width + 2,
-            node.image.height + 2,
-          );
-        }
-
-        ctx.drawImage(node.image, x, penY);
-        penY += node.image.height;
-        break;
-      }
-
-      default:
-        throw new Error("not implemented");
-    }
-    penY += SPACE_Y;
-    }
-    */
-});
 </script>
 
 <template>
   <Background />
 
   <StatusBar />
+
+  <Previews v-if="!store.loading" />
 </template>

app/stores/projects.ts

@@ -62,15 +62,17 @@ export const useProjectsStore = defineStore("projects", {
     projects: [] as {
       description: string;
       thumbnail: string;
-      preview: HTMLImageElement;
+      preview: string;
       url: string | null;
       body: MarkdownBody;
     }[],
     currentProject: 0,
+    loading: true,
   }),
 
   actions: {
     async loadProjects() {
+      this.loading = true;
       const { data: projects } = await useAsyncData("projects", () =>
         queryCollection("projects").order("order", "ASC").all(),
       );
@@ -84,11 +86,13 @@ export const useProjectsStore = defineStore("projects", {
         this.projects.push({
           description: project.description,
           thumbnail: `/images/projects/thumbnails/${id}.webp`,
-          preview: createImage(`/images/projects/previews/${id}.webp`),
+          preview: `/images/projects/previews/${id}.webp`,
           url: project.url,
           body: simplifyMarkdownAST(project.body),
         });
       }
+
+      this.loading = false;
     },
 
     visitProject() {