feat(projects): render preview in top screen, also prepare for markdown rendering

app/components/Projects/TopScreen/Background.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/projects/top-screen/background.webp";
+
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/StatusBar.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
+import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
+import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
+import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
+
+const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
+  useImages(
+    STATUS_BAR_IMAGE,
+    GBA_DISPLAY_IMAGE,
+    STARTUP_MODE_IMAGE,
+    BATTERY_IMAGE,
+  );
+
+useRender((ctx) => {
+  const TEXT_Y = 11;
+
+  //ctx.translate(0, store.isIntro ? store.intro.statusBarY : 0);
+
+  //ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
+  ctx.drawImage(statusBarImage!, 0, 0);
+
+  ctx.fillStyle = "#ffffff";
+  ctx.font = "7px NDS7";
+
+  // username
+  ctx.fillText("pihkaal", 3, TEXT_Y);
+
+  // time + date
+  const fillNumberCell = (value: number, cellX: number, offset: number) => {
+    const text = value.toFixed().padStart(2, "0");
+    const { actualBoundingBoxRight: width } = ctx.measureText(text);
+
+    const x = cellX * 16;
+    ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
+  };
+
+  const now = new Date();
+
+  fillNumberCell(now.getHours(), 9, 1);
+  if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
+    ctx.fillText(":", 159, TEXT_Y);
+  }
+  fillNumberCell(now.getMinutes(), 10, -1);
+
+  fillNumberCell(now.getDate(), 11, 1);
+  ctx.fillText("/", 190, TEXT_Y);
+  fillNumberCell(now.getMonth() + 1, 12, -1);
+
+  // icons
+  ctx.drawImage(gbaDisplayImage!, 210, 2);
+  ctx.drawImage(startupModeImage!, 226, 2);
+  ctx.drawImage(batteryImage!, 242, 4);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,5 +1,103 @@
 <script setup lang="ts">
-defineOptions({
+import Background from "./Background.vue";
-  render: () => null,
+import StatusBar from "./StatusBar.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 />
+</template>

app/stores/projects.ts

@@ -1,18 +1,70 @@
-// import PIHKAAL_ME_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/pihkaal.me.webp";
+import type { MarkdownRoot } from "@nuxt/content";
-// 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";
+type MarkdownBody = (
-// 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";
+      type: "h1" | "p";
-// import RAYLIB_SPEENDRUNS_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/raylib-speedruns.webp";
+      text: string;
-// import SP3WEB_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/s3pweb.webp";
+    }
-// import BIOBLEUD_THUMBNAIL from "/assets/images/projects/bottom-screen/thumbnails/biobleud.webp";
+  | {
+      type: "img";
+      image: HTMLImageElement;
+    }
+)[];
+
+const createImage = (src: string): HTMLImageElement => {
+  // TODO: how to cleanup ?
+  const img = document.createElement("img");
+  img.src = src;
+  return img;
+};
+
+// TODO: move to utils or smth maybe
+const simplifyMarkdownAST = (root: MarkdownRoot) => {
+  const body: MarkdownBody = [];
+  for (const node of root.value) {
+    if (Array.isArray(node)) {
+      const [type, props, value] = node;
+      console.log("--------------");
+      console.log(`type = ${type}`);
+      console.log(`props = ${JSON.stringify(props)}`);
+      console.log(`value = ${value}`);
+
+      switch (type) {
+        case "h1":
+        case "p": {
+          if (typeof value !== "string")
+            throw `Unsupported node value for '${type}': '${value}'`;
+          body.push({ type, text: value });
+          break;
+        }
+
+        case "img": {
+          if (typeof props["src"] !== "string")
+            throw `Unsupported type or missing node prop "src" for '${type}': '${JSON.stringify(props)}'`;
+          body.push({ type, image: createImage(props.src) });
+          break;
+        }
+
+        default: {
+          throw `Unsupported '${type}'`;
+        }
+      }
+    } else {
+      throw `Unsupported node kind 'string'`;
+    }
+  }
+
+  return body;
+};
 
 export const useProjectsStore = defineStore("projects", {
   state: () => ({
     projects: [] as {
       description: string;
       thumbnail: string;
+      preview: HTMLImageElement;
       url: string | null;
+      body: MarkdownBody;
     }[],
     currentProject: 0,
   }),
@@ -23,7 +75,18 @@ export const useProjectsStore = defineStore("projects", {
         queryCollection("projects").order("order", "ASC").all(),
       );
       if (!projects.value) throw "Cannot load projects";
-      this.projects = projects.value;
+
+      this.projects = [];
+
+      for (const project of projects.value) {
+        this.projects.push({
+          description: project.description,
+          thumbnail: project.thumbnail,
+          preview: createImage(project.preview),
+          url: project.url,
+          body: simplifyMarkdownAST(project.body),
+        });
+      }
     },
 
     visitProject() {

app/utils/canvas.ts

@@ -0,0 +1,57 @@
+export const fillTextCentered = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+): number => {
+  const measure = ctx.measureText(text);
+  const textX = Math.floor(x + width / 2 - measure.actualBoundingBoxRight / 2);
+  const textY =
+    measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+  ctx.fillText(text, textX, y + textY);
+  return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
+};
+
+export const fillTextWordWrapped = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  lineHeight?: number,
+): number => {
+  const words = text.split(" ");
+  let line = "";
+  let currentY = y;
+  let lineCount = 0;
+
+  const height =
+    lineHeight ||
+    ctx.measureText("M").actualBoundingBoxAscent +
+      ctx.measureText("M").actualBoundingBoxDescent;
+
+  currentY += height;
+
+  for (let i = 0; i < words.length; i++) {
+    const testLine = line + (line ? " " : "") + words[i];
+    const metrics = ctx.measureText(testLine);
+    const testWidth = metrics.width;
+
+    if (testWidth > width && line) {
+      ctx.fillText(line, x, currentY);
+      line = words[i]!;
+      currentY += height;
+      lineCount++;
+    } else {
+      line = testLine;
+    }
+  }
+
+  if (line) {
+    ctx.fillText(line, x, currentY);
+    lineCount++;
+  }
+
+  return lineCount * height;
+};

content.config.ts

@@ -10,6 +10,7 @@ export default defineContentConfig({
         description: z.string(),
         url: z.url().nullable(),
         thumbnail: z.string(),
+        preview: z.string(),
         order: z.number(),
       }),
     }),

content/projects/biobleud.md

@@ -2,5 +2,6 @@
 description: Biobleud - Automated Excel imports\nfor an ERP system
 url: null
 thumbnail: /images/projects/biobleud.webp
+preview: /images/biobleud-game.png
 order: 100
 ---

content/projects/pihkaal-me.md

@@ -4,3 +4,11 @@ url: https://pihkaal.me
 thumbnail: /images/projects/pihkaal-me.webp
 order: 10
 ---
+
+# pihkaal.me
+
+My personal website has evolved significantly over time. It began as a recreation of my Arch Linux + Hyprland setup, featuring Neovim, Cava, Spotify Player, and Waybar.
+
+Now, it's designed to resemble a Nintendo DS, my first gaming console and a gift from my mother that holds special meaning to me.
+
+I started with just a few games like Mario Kart and Professor Layton. Eventually, I got an R4 card which opened up a whole new world of possibilities.

content/projects/raylib-speedruns.md

@@ -4,3 +4,5 @@ url: https://github.com/pihkaal/raylib-speedruns
 thumbnail: /images/projects/raylib-speedruns.webp
 order: 60
 ---
+
+# Raylib Speedruns

content/projects/s3p-eramba-visualizer.md

@@ -4,3 +4,5 @@ url: null
 thumbnail: /images/projects/s3pweb.webp
 order: 80
 ---
+
+# S3P Eramba Visualizer

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@nuxt/content": "^3.8.2",
+    "@nuxtjs/mdc": "^0.18.4",
     "@pinia/nuxt": "0.11.3",
     "better-sqlite3": "^12.4.1",
     "gsap": "^3.13.0",