From 203985915cc853f26c96bb4ecbb54fff0dcf7b56 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 17 Oct 2024 20:00:06 +0200
Subject: [PATCH] refactor: get random image from api

---
 app.vue                    |  8 +++++++-
 components/RandomImage.vue | 12 ------------
 server/api/index.ts        | 10 ++++++++++
 3 files changed, 17 insertions(+), 13 deletions(-)
 delete mode 100644 components/RandomImage.vue
 create mode 100644 server/api/index.ts

diff --git a/app.vue b/app.vue
index 42886d8..6f9819a 100644
--- a/app.vue
+++ b/app.vue
@@ -9,11 +9,17 @@
     >
       ✨ Lilou ✨
     </h1>
-    <RandomImage />
+    <img
+      class="w-full max-w-[50vh]"
+      src="http://localhost:3000/api"
+      alt="Lilou"
+    />
     <h1
       class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
     >
       ✨ Lilou ✨
     </h1>
+
+    <Glitters />
   </main>
 </template>
diff --git a/components/RandomImage.vue b/components/RandomImage.vue
deleted file mode 100644
index 64249ca..0000000
--- a/components/RandomImage.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { resolve } from "path";
-import { readdir } from "fs/promises";
-
-const images = await readdir(resolve("public", "lilou"));
-const image = images[Math.floor(Math.random() * images.length)];
-const imagePath = `/lilou/${image}`;
-</script>
-
-<template>
-  <img class="w-full max-w-[50vh]" :src="imagePath" alt="Lilou" >
-</template>
diff --git a/server/api/index.ts b/server/api/index.ts
new file mode 100644
index 0000000..ea6b8da
--- /dev/null
+++ b/server/api/index.ts
@@ -0,0 +1,10 @@
+import { resolve } from "path";
+import { readdir, readFile } from "fs/promises";
+
+export default defineEventHandler(async () => {
+  const images = await readdir(resolve("public", "lilou"));
+  const imageName = images[Math.floor(Math.random() * images.length)];
+  const image = await readFile(resolve("public", "lilou", imageName));
+
+  return image;
+});