feat: mock images

components/ImgBlurHash.vue

@@ -39,6 +39,12 @@ function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
 }
 
 onMounted(() => {
+  // Decode the blurhash if available
+  if (props.blurhash) {
+    const pixels = decode(props.blurhash, 32, 32)
+    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
+  }
+
   // Create a temporary image to check when the image has loaded
   const img = document.createElement('img')
   img.onload = () => {
@@ -52,12 +58,6 @@ onMounted(() => {
   setTimeout(() => {
     isLoaded.value = true
   }, 3000)
-
-  // Decode the blurhash if available
-  if (props.blurhash) {
-    const pixels = decode(props.blurhash, 32, 32)
-    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
-  }
 })
 </script>
 

components/nav/NavHeader.vue

@@ -9,6 +9,7 @@ const routes = reactive<Menu[]>([
   { path: '/posts', icon: 'i-ri-blogger-line' },
   { path: '/projects', icon: 'i-ri-dashboard-line' },
   { path: '/talks', icon: 'i-ri-file-ppt-line' },
+  { path: '/images', icon: 'i-ri-image-line' },
 ])
 
 const route = useRoute()

package.json

@@ -28,7 +28,8 @@
   },
   "dependencies": {
     "blurhash": "^2.0.5",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "unsplash-js": "^7.0.19"
   },
   "devDependencies": {
     "@antfu/eslint-config": "3.7.1",
@@ -45,6 +46,7 @@
     "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "lint-staged": "^15.2.10",
+    "node-fetch": "^3.3.2",
     "nuxt": "3.13.2",
     "octokit": "^4.0.2",
     "postcss-import": "^16.1.0",

pages/images.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 const { data } = await useFetch('/api/images')
-
-console.log(data.value)
 </script>
 
 <template>