pihkaal/lilou-cat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: move image to component

Browse Source
This commit is contained in:
Pihkaal
2024-10-17 19:24:38 +02:00
parent 2aab5070a2
commit 0bde85fd8f
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app.vue
View File

@@ -1,12 +1,3 @@
<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> <template>
<main <main
class="h-[100vh] items-center justify-center p-5 flex flex-col space-y-4 bg-[#fa86c4]" class="h-[100vh] items-center justify-center p-5 flex flex-col space-y-4 bg-[#fa86c4]"
@@ -18,7 +9,7 @@ const imagePath = `/lilou/${image}`;
> >
✨ Lilou ✨ ✨ Lilou ✨
</h1> </h1>
<img class="w-full max-w-[50vh]" :src="imagePath" alt="Lilou" /> <RandomImage />
<h1 <h1
class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white" class="text-4xl md:text-5xl lg:text-6xl font-serif text-white dark:text-white"
> >

12
components/RandomImage.vue Normal file
View File

@@ -0,0 +1,12 @@
<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>