bump

components/MainPage.vue

@@ -7,7 +7,7 @@ import { SlickList, SlickItem } from "vue-slicksort";
 import { useElementVisibility, useStorage, useTransition } from '@vueuse/core';
 import { version } from '../package.json'
 
-const list = useStorage(`synths-${version}`, data)
+const list = ref(data)
 
 function isOff(n) {
   return !isAccessGranted.value && n > 5
@@ -37,14 +37,15 @@ SlickList.flex.flex-wrap.items-stretch.gap-4.md-gap-6.m-2.lg-m-8(
   SlickItem.flex(
     style="flex: 1 1 240px"
     v-for="(synth,s) in list" 
-    :key="synth.title"
+    :key="synth.id"
     :index="s")
-    SynthCard.card.p-0.bg-light-300.shadow-lg.flex.flex-col.dark-bg-dark-300.-hover-translate-y-2px.transition.hover-shadow-xl.rounded-xl.overflow-hidden.relative( 
+    SynthCard( 
       :style="{opacity: isOff(s) ? 0.8 : 1}"
       :title="synth.title"
       :description="synth.description"
       :img="synth.img"
       :url="synth.url"
+      :key="synth.id"
       :off="isOff(s)")
 .mx-auto.p-4.max-w-75ch.dark-text-light-200.text-center.line-height-loose.text-md.intro.md-text-lg.pt-16
   slot

components/SynthCard.vue

@@ -40,19 +40,20 @@ function click() {
 </script>
 
 <template lang='pug'>
-button.flex.flex-col.text-left.relative.min-h-50(
+button.flex.flex-col.text-left.relative.min-h-50.card.p-0.bg-light-300.shadow-lg.flex.flex-col.dark-bg-dark-300.-hover-translate-y-2px.transition.hover-shadow-xl.rounded-xl.overflow-hidden.relative(
   @click="click")
   img(
+    :key="title"
     height="200"
     width="1000"
     :src="`/img/${title.toLowerCase().split(' ').join('-')}.webp`" 
     :alt="`${title} illustration`")
   .flex-1 
-  .p-4.flex.items-center.justify-between
+  .p-4.flex.items-center.justify-between.w-full
     .text-md.font-bold.flex.items-center.gap-2.flex-1
-      .p-0 {{ title }}
-      .flex-1
+      .flex-1 {{ title }}
       .w-2.h-2.rounded-full.shadow-inset(
+        v-if="checkAvailability"
         :class="{'bg-green-500': online === true, 'bg-red-500':online === false}"
         )
       ClientOnly

package.json

@@ -14,20 +14,20 @@
 	"author": "",
 	"license": "MIT",
 	"dependencies": {
-		"@unocss/reset": "0.53.5",
+		"@unocss/reset": "0.53.6",
 		"@vueuse/core": "10.2.1",
 		"vue": "3.3.4",
 		"vue-slicksort": "^2.0.5"
 	},
 	"devDependencies": {
-		"yaml": "2.3.1",
 		"@directus/sdk": "10.3.5",
-		"@unocss/extractor-pug": "0.53.5",
-		"@vue/language-plugin-pug": "^1.8.5",
+		"@unocss/extractor-pug": "0.53.6",
+		"@vue/language-plugin-pug": "^1.8.6",
 		"image-downloader": "4.3.0",
 		"pug": "3.0.2",
-		"unocss": "0.53.5",
-		"vitepress": "1.0.0-beta.5",
-		"vitepress-pages": "2.0.0"
+		"unocss": "0.53.6",
+		"vitepress": "1.0.0-beta.6",
+		"vitepress-pages": "2.0.0",
+		"yaml": "2.3.1"
 	}
 }