chore: update

Author: zyyv

nuxt.config.ts

@@ -2,7 +2,6 @@ export default defineNuxtConfig({
   devServer: {
     port: 1111,
   },
-
   modules: [
     '@vueuse/nuxt',
     '@unocss/nuxt',

package.json

@@ -29,20 +29,21 @@
   "dependencies": {
     "blurhash": "^2.0.5",
     "dayjs": "^1.11.13",
-    "unsplash-js": "^7.0.19"
+    "unsplash-js": "^7.0.19",
+    "vue-flow-layout": "^0.1.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "3.7.3",
-    "@iconify-json/akar-icons": "^1.2.0",
-    "@iconify-json/carbon": "^1.2.1",
-    "@iconify-json/fluent-emoji": "^1.2.0",
-    "@iconify-json/logos": "^1.2.0",
-    "@iconify-json/ri": "^1.2.0",
+    "@antfu/eslint-config": "3.8.0",
+    "@iconify-json/akar-icons": "^1.2.1",
+    "@iconify-json/carbon": "^1.2.4",
+    "@iconify-json/fluent-emoji": "^1.2.1",
+    "@iconify-json/logos": "^1.2.3",
+    "@iconify-json/ri": "^1.2.2",
     "@iconify/utils": "^2.1.33",
     "@types/fs-extra": "^11.0.4",
-    "@unocss/nuxt": "^0.63.1",
+    "@unocss/nuxt": "^0.63.6",
     "@vueuse/nuxt": "^11.1.0",
-    "eslint": "^9.11.1",
+    "eslint": "^9.13.0",
     "esno": "^4.8.0",
     "fs-extra": "^11.2.0",
     "lint-staged": "^15.2.10",
@@ -52,8 +53,8 @@
     "postcss-import": "^16.1.0",
     "postcss-url": "^10.1.3",
     "simple-git-hooks": "^2.11.1",
-    "typescript": "5.6.2",
-    "unocss-preset-useful": "^0.6.0"
+    "typescript": "5.6.3",
+    "unocss-preset-useful": "^0.7.0"
   },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"

pages/images.vue

@@ -1,9 +1,40 @@
 <script lang="ts" setup>
+import { FlowLayout } from 'vue-flow-layout'
+
 const { data } = await useFetch('/api/images')
 </script>
 
 <template>
-  <div class="w-70% mxa">
-    <ImgBlurHash v-for="src in data" :key="src.id" w-100 :src="src.urls.raw" :blurhash="src.blur_hash" />
-  </div>
+  <FlowLayout
+    :cols="4"
+    :gap="10"
+    class="w-80% mxa children-has-[img:hover]:blur-sm hover-children-has-[img:hover]:blur-none"
+  >
+    <div
+      v-for="src in data"
+      :key="src.id"
+      of-hidden
+      class="group trans"
+    >
+      <ImgBlurHash
+        :src="src.urls.raw"
+        :blurhash="src.blur_hash"
+        w-100 trans
+        style="margin: -5px -10px -10px -5px;"
+        group-hover="scale-110"
+      />
+      <div pa inset-0 op-0 group-hover-op-100>
+        <p>
+          {{ src.user.last_name }} {{ src.user.first_name }}
+        </p>
+        <p line-clamp-1>
+          {{ src.description }}
+        </p>
+      </div>
+    </div>
+  </FlowLayout>
 </template>
+
+<style scoped>
+
+</style>