stable images

components/SynthCard.vue

@@ -8,6 +8,7 @@ import SynthFav from './SynthFav.vue';
 const props = defineProps({
   off: { type: Boolean, default: false },
   title: { type: String, default: '' },
+  slug: { type: String, default: '' },
   description: { type: String, default: '' },
   cover: { type: String, default: '' },
   url: { type: String, default: '' },
@@ -50,7 +51,7 @@ button.flex.flex-col.text-left.relative.min-h-50.card.p-0.bg-light-300.shadow-lg
     :key="title"
     height="200"
     width="1000"
-    :src="`/cover/${title.toLowerCase().split(' ').join('-')}.webp`" 
+    :src="`/cover/${slug}.webp`" 
     :alt="`${title} illustration`")
   .flex-1 
   .p-4.flex.items-center.justify-between.w-full

components/SynthList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, onMounted, ref } from 'vue';
 import { useForm } from "../composables/useForm.js";
-import { data } from "../synths.data";
+import { data } from "../db/synths.data";
 import SynthCard from "./SynthCard.vue";
 import { SlickList, SlickItem } from "vue-slicksort";
 

db/downloadCovers.js

@@ -0,0 +1,38 @@
+import download from 'image-downloader'
+
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import fs from 'node:fs'
+
+
+export async function downloadCovers(records = [], {
+  field = 'cover',
+  folder = '',
+  query = 'quality=70&width=1000&format=webp'
+} = options) {
+
+  const dirname = path.dirname(fileURLToPath(import.meta.url));
+  let dest = path.resolve(dirname, '../public/', folder)
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+  const urls = []
+
+  for (let r of records) {
+    if (!r?.[field]) continue
+    let filePath = path.resolve(dest, `${r.slug}.webp`)
+    if (fs.existsSync(filePath)) continue
+    let url = `https://db.chromatone.center/assets/${r[field]}?${query}&download`
+    urls.push({ url, slug: r.slug, dest: filePath })
+  }
+
+  const chunkSize = 5;
+  for (let i = 0; i < urls.length; i += chunkSize) {
+    const chunk = urls.slice(i, i + chunkSize);
+    await Promise.all(chunk.map(rec => {
+      console.log('downloading file:', rec.slug + '.webp')
+      return download.image(rec)
+    }));
+  }
+
+}

db/synths.data.js

@@ -0,0 +1,17 @@
+import { useItems } from '../composables/useItems.js';
+import { downloadCovers } from './downloadCovers.js';
+
+export default {
+  async load() {
+
+    const records = await useItems('synths', {
+      sort: ['sort', 'id'], limit: -1, filter: { status: { '_eq': 'published' } }
+    });
+
+    downloadCovers(records, {
+      folder: 'cover'
+    })
+
+    return records
+  }
+}