Merge remote-tracking branch 'origin/preview'

.vscode/settings.json

@@ -1,4 +1,50 @@
 {
-  // Enable ESlint flat config support
-  "eslint.useFlatConfig": true
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
 }

components/dashboard/Counters.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
 import NumberFlow from '@number-flow/vue'
+import { Flame, MousePointerClick, Users } from 'lucide-vue-next'
 
 const defaultData = Object.freeze({
   visits: 0,

components/dashboard/links/Editor.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { z } from 'zod'
-import { useForm } from 'vee-validate'
+import { DependencyType } from '@/components/ui/auto-form/interface'
+import { LinkSchema, nanoid } from '@/schemas/link'
 import { toTypedSchema } from '@vee-validate/zod'
 import { Shuffle, Sparkles } from 'lucide-vue-next'
+import { useForm } from 'vee-validate'
 import { toast } from 'vue-sonner'
-import { DependencyType } from '@/components/ui/auto-form/interface'
-import { LinkSchema, nanoid } from '@/schemas/link'
+import { z } from 'zod'
 
 const props = defineProps({
   link: {

components/dashboard/links/Index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { Loader } from 'lucide-vue-next'
 import { useInfiniteScroll } from '@vueuse/core'
+import { Loader } from 'lucide-vue-next'
 
 const links = ref([])
 const limit = 24
@@ -80,7 +80,7 @@ function updateLinkList(link, type) {
       v-if="!isLoading && listComplete"
       class="flex items-center justify-center text-sm"
     >
-      No more
+      No more links
     </div>
     <div
       v-if="listError"

components/dashboard/links/Link.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { CalendarPlus2, Copy, CopyCheck, Eraser, Hourglass, Link as LinkIcon, QrCode, SquareChevronDown, SquarePen } from 'lucide-vue-next'
 import { useClipboard } from '@vueuse/core'
-import { toast } from 'vue-sonner'
+import { CalendarPlus2, Copy, CopyCheck, Eraser, Hourglass, Link as LinkIcon, QrCode, SquareChevronDown, SquarePen } from 'lucide-vue-next'
 import { parseURL } from 'ufo'
+import { toast } from 'vue-sonner'
 import QRCode from './QRCode.vue'
 
 const props = defineProps({
@@ -23,7 +23,7 @@ function getLinkHost(url) {
 }
 
 const shortLink = computed(() => `${origin}/${props.link.slug}`)
-const linkIcon = computed(() => `https://unavatar.io/${getLinkHost(props.link.url)}?fallback=https://sink.cool/sink.png`)
+const linkIcon = computed(() => `https://unavatar.io/${getLinkHost(props.link.url)}?fallback=https://sink.cool/icon.png`)
 
 const { copy, copied } = useClipboard({ source: shortLink.value, copiedDuring: 400 })
 
@@ -44,11 +44,13 @@ function updateLink(link, type) {
           <AvatarImage
             :src="linkIcon"
             alt="@radix-vue"
+            loading="lazy"
           />
           <AvatarFallback>
             <img
-              src="/sink.png"
+              src="/icon.png"
               alt="Sink"
+              loading="lazy"
             >
           </AvatarFallback>
         </Avatar>

components/dashboard/links/Search.vue

@@ -63,7 +63,7 @@ onMounted(() => {
     </Button>
     <Dialog :open="isOpen" @update:open="isOpen = !isOpen">
       <DialogContent class="overflow-hidden p-0 shadow-lg">
-        <Command v-model:searchTerm="searchTerm" v-model="selectedLink" class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command v-model:search-term="searchTerm" v-model="selectedLink" class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           <CommandInput placeholder="Type to search..." />
           <CommandList>
             <CommandEmpty v-if="searchTerm">

components/dashboard/metrics/List.vue

@@ -30,7 +30,7 @@ defineProps({
       </div>
     </div>
     <VList
-      v-slot="metric"
+      v-slot="{ item: metric }"
       :data="metrics"
       :style="{ height: '342px' }"
     >

components/dashboard/metrics/Locations.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { VisSingleContainer, VisTopoJSONMap, VisTopoJSONMapSelectors } from '@unovis/vue'
 import { ChartTooltip } from '@/components/ui/chart'
+import { VisSingleContainer, VisTopoJSONMap, VisTopoJSONMapSelectors } from '@unovis/vue'
 
 const id = inject('id')
 const startAt = inject('startAt')

components/dashboard/metrics/name/Icon.vue

@@ -1,4 +1,13 @@
 <script setup>
+import {
+  Globe,
+  Laptop,
+  MonitorCheck,
+  Smartphone,
+  Tablet,
+  Terminal,
+} from 'lucide-vue-next'
+
 // https://vue3-simple-icons.wyatt-herkamp.dev/
 import {
   AndroidIcon,
@@ -20,23 +29,14 @@ import {
   SamsungIcon,
   UbuntuIcon,
   VivoIcon,
-  WeChatIcon,
   WearOsIcon,
+  WeChatIcon,
+  XiaomiIcon,
   // WindowsIcon,
   XIcon,
-  XiaomiIcon,
   YandexCloudIcon,
 } from 'vue3-simple-icons'
 
-import {
-  Globe,
-  Laptop,
-  MonitorCheck,
-  Smartphone,
-  Tablet,
-  Terminal,
-} from 'lucide-vue-next'
-
 defineProps({
   name: {
     type: String,

components/dashboard/metrics/name/Referer.vue

@@ -17,11 +17,13 @@ defineProps({
       <AvatarImage
         :src="`https://unavatar.io/${name}?fallback=false`"
         alt="@radix-vue"
+        loading="lazy"
       />
       <AvatarFallback>
         <img
-          src="/sink.png"
+          src="/icon.png"
           alt="Sink"
+          loading="lazy"
         >
       </AvatarFallback>
     </Avatar>

components/home/Hero.vue

@@ -1,7 +1,7 @@
 <script setup>
+import heroImg from '@/assets/images/hero.svg?raw'
 import { AreaChart } from 'lucide-vue-next'
 import { GitHubIcon } from 'vue3-simple-icons'
-import heroImg from '@/assets/images/hero.svg?raw'
 
 const { title, description, github } = useAppConfig()
 </script>

components/home/Twitter.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { XIcon } from 'vue3-simple-icons'
 import { ArrowRight } from 'lucide-vue-next'
+import { XIcon } from 'vue3-simple-icons'
 
 const { twitter } = useAppConfig()
 </script>

components/login/index.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { AlertCircle } from 'lucide-vue-next'
-import { z } from 'zod'
 import { toast } from 'vue-sonner'
+import { z } from 'zod'
 
 const LoginSchema = z.object({
   token: z.string().describe('SiteToken'),

docs/configuration.md

@@ -43,3 +43,11 @@ Default prompt:
 ```txt
 You are a URL shortening assistant, please shorten the URL provided by the user into a SLUG. The SLUG information must come from the URL itself, do not make any assumptions. A SLUG is human-readable and should not exceed three words and can be validated using regular expressions {slugRegex} . Only the best one is returned, the format must be JSON reference {"slug": "example-slug"}
 ```
+
+## `NUXT_CASE_SENSITIVE`
+
+Set URL case sensitivity.
+
+## `NUXT_LIST_QUERY_LIMIT`
+
+Set the maximum query data volume for the Metric list.

docs/faqs.md

@@ -42,3 +42,7 @@ However, you can disable this feature by setting the `NUXT_CASE_SENSITIVE` envir
 ### What happens when `NUXT_CASE_SENSITIVE` is `true`?
 
 Newly generated links will be case-sensitive, treating `MyLink` and `mylink` as distinct. Randomly generated slugs will include both uppercase and lowercase characters, offering a larger pool of unique combinations (but not user-friendly that why we default to non-case-sensitive).
+
+## 7. Why does the Metric list only show the top 500 data entries?
+
+To improve query performance, we have limited the amount of data. If you need to query more data, you can adjust it through `NUXT_LIST_QUERY_LIMIT`.

nuxt.config.ts

@@ -1,6 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
 
   modules: [
     '@nuxthub/core',
@@ -9,11 +8,31 @@ export default defineNuxtConfig({
     '@nuxtjs/tailwindcss',
     '@nuxtjs/color-mode',
   ],
+  devtools: { enabled: true },
 
   colorMode: {
     classSuffix: '',
   },
 
+  runtimeConfig: {
+    siteToken: 'SinkCool',
+    redirectStatusCode: '301',
+    linkCacheTtl: 60,
+    redirectWithQuery: false,
+    homeURL: '',
+    cfAccountId: '',
+    cfApiToken: '',
+    dataset: 'sink',
+    aiModel: '@cf/meta/llama-3.1-8b-instruct',
+    aiPrompt: `You are a URL shortening assistant, please shorten the URL provided by the user into a SLUG. The SLUG information must come from the URL itself, do not make any assumptions. A SLUG is human-readable and should not exceed three words and can be validated using regular expressions {slugRegex} . Only the best one is returned, the format must be JSON reference {"slug": "example-slug"}`,
+    caseSensitive: false,
+    listQueryLimit: 500,
+    public: {
+      previewMode: '',
+      slugDefaultLength: '6',
+    },
+  },
+
   routeRules: {
     '/': {
       prerender: true,
@@ -26,6 +45,15 @@ export default defineNuxtConfig({
     },
   },
 
+  compatibilityDate: '2024-07-08',
+
+  nitro: {
+    experimental: {
+      // Enable Server API documentation within NuxtHub
+      openAPI: true,
+    },
+  },
+
   hub: {
     ai: true,
     analytics: true,
@@ -41,31 +69,4 @@ export default defineNuxtConfig({
       standalone: false,
     },
   },
-
-  nitro: {
-    experimental: {
-      // Enable Server API documentation within NuxtHub
-      openAPI: true,
-    },
-  },
-
-  runtimeConfig: {
-    siteToken: 'SinkCool',
-    redirectStatusCode: '301',
-    linkCacheTtl: 60,
-    redirectWithQuery: false,
-    homeURL: '',
-    cfAccountId: '',
-    cfApiToken: '',
-    dataset: 'sink',
-    aiModel: '@cf/meta/llama-3.1-8b-instruct',
-    aiPrompt: `You are a URL shortening assistant, please shorten the URL provided by the user into a SLUG. The SLUG information must come from the URL itself, do not make any assumptions. A SLUG is human-readable and should not exceed three words and can be validated using regular expressions {slugRegex} . Only the best one is returned, the format must be JSON reference {"slug": "example-slug"}`,
-    caseSensitive: false,
-    public: {
-      previewMode: '',
-      slugDefaultLength: '6',
-    },
-  },
-
-  compatibilityDate: '2024-07-08',
 })