Merge branch 'master' into dev

components/dashboard/Counters.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
+import NumberFlow from '@number-flow/vue'
 
 const defaultData = Object.freeze({
   visits: 0,
@@ -46,15 +47,7 @@ onBeforeUnmount(() => {
         <MousePointerClick class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visits }" :value="counters.visits" />
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visits }"
-        >
-          {{ formatNumber(counters.visits) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
       </CardContent>
     </Card>
     <Card>
@@ -65,15 +58,7 @@ onBeforeUnmount(() => {
         <Users class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.visitors }" :value="counters.visitors" />
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.visitors }"
-        >
-          {{ formatNumber(counters.visitors) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          +90
-        </p> -->
       </CardContent>
     </Card>
     <Card>
@@ -84,15 +69,7 @@ onBeforeUnmount(() => {
         <Flame class="w-4 h-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
-        <div
+        <NumberFlow class="text-2xl font-bold" :class="{ 'blur-md opacity-60': !counters.referers }" :value="counters.referers" />
-          class="text-2xl font-bold"
-          :class="{ 'blur-lg': !counters.referers }"
-        >
-          {{ formatNumber(counters.referers) }}
-        </div>
-        <!-- <p class="text-xs text-muted-foreground">
-          -20
-        </p> -->
       </CardContent>
     </Card>
   </div>

components/dashboard/links/Index.vue

@@ -6,23 +6,37 @@ const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
+let listError = false
 
 async function getLinks() {
-  const data = await useAPI('/api/link/list', {
+  try {
-    query: {
+    const data = await useAPI('/api/link/list', {
-      limit,
+      query: {
-      cursor,
+        limit,
-    },
+        cursor,
-  })
+      },
-  links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
+    })
-  cursor = data.cursor
+    links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
-  listComplete = data.list_complete
+    cursor = data.cursor
+    listComplete = data.list_complete
+    listError = false
+  }
+  catch (error) {
+    console.error(error)
+    listError = true
+  }
 }
 
 const { isLoading } = useInfiniteScroll(
   document,
   getLinks,
-  { distance: 150, interval: 1000, canLoadMore: () => !listComplete },
+  {
+    distance: 150,
+    interval: 1000,
+    canLoadMore: () => {
+      return !listError && !listComplete
+    },
+  },
 )
 
 function updateLinkList(link, type) {
@@ -46,7 +60,7 @@ function updateLinkList(link, type) {
       <DashboardNav class="flex-1">
         <DashboardLinksEditor @update:link="updateLinkList" />
       </DashboardNav>
-      <DashboardLinksSearch />
+      <LazyDashboardLinksSearch />
     </div>
     <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <DashboardLinksLink
@@ -68,5 +82,14 @@ function updateLinkList(link, type) {
     >
       No more
     </div>
+    <div
+      v-if="listError"
+      class="flex items-center justify-center text-sm"
+    >
+      Loading links failed,
+      <Button variant="link" @click="getLinks">
+        Try again
+      </Button>
+    </div>
   </main>
 </template>

components/dashboard/links/Search.vue

@@ -8,7 +8,7 @@ const isOpen = ref(false)
 const searchTerm = ref('')
 const selectedLink = ref(null)
 
-const links = await useAPI('/api/link/search')
+const links = ref([])
 
 const { results: filteredLinks } = useFuse(searchTerm, links, {
   fuseOptions: {
@@ -37,6 +37,14 @@ function selectLink(link) {
     query: { slug: link.slug },
   })
 }
+
+async function getLinks() {
+  links.value = await useAPI('/api/link/search')
+}
+
+onMounted(() => {
+  getLinks()
+})
 </script>
 
 <template>
@@ -73,7 +81,7 @@ function selectLink(link) {
                     </div>
                   </div>
                   <Badge v-if="link.item?.comment" variant="secondary">
-                    <div class="w-24 truncate">
+                    <div class="max-w-24 truncate">
                       {{ link.item?.comment }}
                     </div>
                   </Badge>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sink",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "private": true,
   "packageManager": "pnpm@9.7.1",
   "engines": {
@@ -21,6 +21,7 @@
     "lint-staged": "lint-staged"
   },
   "dependencies": {
+    "@number-flow/vue": "^0.3.3",
     "@unovis/ts": "^1.4.4",
     "@unovis/vue": "^1.4.4",
     "@vee-validate/zod": "^4.13.2",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@number-flow/vue':
+        specifier: ^0.3.3
+        version: 0.3.3(vue@3.4.38(typescript@5.4.5))
       '@unovis/ts':
         specifier: ^1.4.4
         version: 1.4.4
@@ -1228,6 +1231,11 @@ packages:
     resolution: {integrity: sha512-54voNDBobGdMl3BUXSu7UaDh1P85PGHWlJ5e0XhPugo1JulOyCtp2I+5ri4wplGDJ8QGwPEQW7/x3yTLU7yF1A==}
     engines: {node: '>=16.14.0'}
 
+  '@number-flow/vue@0.3.3':
+    resolution: {integrity: sha512-yjuTRzwBUqh4rMZYSXG3/0Bv3YuLLUD3TIh7y7qXYCtorUyYP4/fPocVfrCh2TBlAu/jgci7BtvwC0IFnbNUtw==}
+    peerDependencies:
+      vue: ^3
+
   '@nuxt/devalue@2.0.2':
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
 
@@ -3245,6 +3253,9 @@ packages:
       jiti:
         optional: true
 
+  esm-env@1.2.1:
+    resolution: {integrity: sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==}
+
   espree@10.1.0:
     resolution: {integrity: sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -4265,6 +4276,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  number-flow@0.4.2:
+    resolution: {integrity: sha512-YLN73/m8BUU4r/6mq9zqLdpFKt3LSPPRectOECheA9jtNWF4PP8EIz0+Z1giqu/x9nS86KnKwwouLXXiqnjhQQ==}
+
   nuxi@3.12.0:
     resolution: {integrity: sha512-6vRdiXTw9SajEQOUi6Ze/XaIXzy1q/sD5UqHQSv3yqTu7Pot5S7fEihNXV8LpcgLz+9HzjVt70r7jYe7R99c2w==}
     engines: {node: ^16.10.0 || >=18.0.0}
@@ -6800,6 +6814,12 @@ snapshots:
       '@nodelib/fs.scandir': 3.0.0
       fastq: 1.17.1
 
+  '@number-flow/vue@0.3.3(vue@3.4.38(typescript@5.4.5))':
+    dependencies:
+      esm-env: 1.2.1
+      number-flow: 0.4.2
+      vue: 3.4.38(typescript@5.4.5)
+
   '@nuxt/devalue@2.0.2': {}
 
   '@nuxt/devtools-kit@1.3.9(magicast@0.3.4)(rollup@4.18.0)(vite@5.4.1(@types/node@20.12.11)(terser@5.31.0))':
@@ -9364,6 +9384,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  esm-env@1.2.1: {}
+
   espree@10.1.0:
     dependencies:
       acorn: 8.12.1
@@ -10498,6 +10520,10 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  number-flow@0.4.2:
+    dependencies:
+      esm-env: 1.2.1
+
   nuxi@3.12.0:
     optionalDependencies:
       fsevents: 2.3.3

server/api/link/search.get.ts

@@ -14,7 +14,7 @@ export default eventHandler(async (event) => {
     while (true) {
       const { keys, list_complete, cursor } = await KV.list({
         prefix: `link:`,
-        limit: 1,
+        limit: 1000,
         cursor: finalCursor,
       })