Improve search functionality with Fuse.js for better accuracy and UX (#76)

* Improve search functionality with Fuse.js * Centralized social media links in `data/index.ts` * Fix formatting Signed-off-by: nurRiyad <asadnurriyad@gmail.com> * Update dependency Signed-off-by: nurRiyad <asadnurriyad@gmail.com> * Fix formatting Signed-off-by: nurRiyad <asadnurriyad@gmail.com> --------- Signed-off-by: nurRiyad <asadnurriyad@gmail.com> Co-authored-by: nurRiyad <asadnurriyad@gmail.com>
2025-01-10 17:30:03 -03:00
parent 0c17603459
commit 8fc4675421
6 changed files with 50 additions and 27 deletions
--- a/components/footer/developer.vue
+++ b/components/footer/developer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { footerData } from '~/data'
+import { footerData, socialLinks } from '~/data'
 </script>

 <template>
@@ -12,7 +12,7 @@ import { footerData } from '~/data'
    </p>
    <div class="my-3 space-x-3 pb-3">
      <NuxtLink
-        to="https://github.com/nurRiyad"
+        :to="socialLinks.githubLink"
        target="_blank"
        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
        aria-label="Github"
@@ -20,7 +20,7 @@ import { footerData } from '~/data'
        <Icon name="fa:github" size="1em" />
      </NuxtLink>
      <NuxtLink
-        to="https://www.linkedin.com/in/nur-riyad/"
+        :to="socialLinks.linkedinLink"
        target="_blank"
        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
        aria-label="LinkedIn"
@@ -28,7 +28,7 @@ import { footerData } from '~/data'
        <Icon name="fa:linkedin-square" size="1em" />
      </NuxtLink>
      <NuxtLink
-        to="https://twitter.com/qdnvubp"
+        :to="socialLinks.twitterLink"
        target="_blank"
        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
        aria-label="Twitter"
@@ -36,7 +36,7 @@ import { footerData } from '~/data'
        <Icon name="fa:twitter-square" size="1em" />
      </NuxtLink>
      <NuxtLink
-        to="https://stackoverflow.com/users/16781395/nur-riyad"
+        :to="socialLinks.stackoverflowLink"
        target="_blank"
        class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
        aria-label="StackOverflow"
--- a/data/index.ts
+++ b/data/index.ts
@@ -48,6 +48,13 @@ export const seoData = {
  mailAddress: 'asadnurriyad@gmail.com',
 }

+export const socialLinks = {
+  githubLink: 'https://github.com/nurRiyad',
+  linkedinLink: 'https://www.linkedin.com/in/nur-riyad/',
+  twitterLink: 'https://twitter.com/qdnvubp',
+  stackoverflowLink: 'https://stackoverflow.com/users/16781395/nur-riyad',
+}
+
 export const siteMetaData = [
  {
    name: 'description',
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
    "@vueuse/nuxt": "^10.9.0",
    "eslint-config-prettier": "^9.1.0",
    "feed": "^4.2.2",
+    "fuse.js": "^7.0.0",
    "nuxt": "^3.14.159",
    "nuxt-icon": "^0.6.8",
    "nuxt-og-image": "^3.0.0-rc.38",
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { aboutPage, footerData, navbarData } from '~/data'
+import { aboutPage, footerData, navbarData, socialLinks } from '~/data'

 useHead({
  title: 'About',
@@ -31,7 +31,7 @@ defineOgImageComponent('About', {

            <div class="my-3 space-x-2 md:space-x-3 pb-10">
              <NuxtLink
-                to="https://github.com/nurRiyad"
+                :to="socialLinks.githubLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                aria-label="Github"
@@ -39,7 +39,7 @@ defineOgImageComponent('About', {
                <Icon name="fa:github" size="1em" />
              </NuxtLink>
              <NuxtLink
-                to="https://www.linkedin.com/in/nur-riyad/"
+                :to="socialLinks.linkedinLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                aria-label="LinkedIn"
@@ -47,7 +47,7 @@ defineOgImageComponent('About', {
                <Icon name="fa:linkedin-square" size="1em" />
              </NuxtLink>
              <NuxtLink
-                to="https://twitter.com/qdnvubp"
+                :to="socialLinks.twitterLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                aria-label="Twitter"
@@ -55,7 +55,7 @@ defineOgImageComponent('About', {
                <Icon name="fa:twitter-square" size="1em" />
              </NuxtLink>
              <NuxtLink
-                to="https://stackoverflow.com/users/16781395/nur-riyad"
+                :to="socialLinks.stackoverflowLink"
                target="_blank"
                class="px-2 py-1 lg:px-3 lg:py-2 bg-gray-300 text-gray-800 rounded-md dark:bg-slate-700 dark:text-[#F1F2F4]"
                aria-label="StackOverflow"
--- a/pages/blogs/index.vue
+++ b/pages/blogs/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import Fuse from 'fuse.js'
+
 const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())

 const elementPerPage = ref(5)
@@ -23,26 +25,28 @@ const formattedData = computed(() => {
  )
 })

+const fuse = computed(() => {
+  return new Fuse(formattedData.value, {
+    keys: ['title', 'description'],
+    threshold: 0.4,
+    includeScore: false,
+  })
+})
+
 const searchData = computed(() => {
-  return (
-    formattedData.value.filter((data) => {
-      const lowerTitle = data.title.toLocaleLowerCase()
-      if (lowerTitle.search(searchTest.value) !== -1) return true
-      else return false
-    }) || []
-  )
+  if (!searchTest.value.trim()) {
+    return formattedData.value
+  }
+
+  const results = fuse.value.search(searchTest.value)
+  return results.map((result) => result.item)
 })

 const paginatedData = computed(() => {
-  return (
-    searchData.value.filter((data, idx) => {
-      const startInd = (pageNumber.value - 1) * elementPerPage.value
-      const endInd = pageNumber.value * elementPerPage.value - 1
+  const startInd = (pageNumber.value - 1) * elementPerPage.value
+  const endInd = pageNumber.value * elementPerPage.value

-      if (idx >= startInd && idx <= endInd) return true
-      else return false
-    }) || []
-  )
+  return searchData.value.slice(startInd, endInd)
 })

 function onPreviousPageClick() {
@@ -51,8 +55,7 @@ function onPreviousPageClick() {

 const totalPage = computed(() => {
  const ttlContent = searchData.value.length || 0
-  const totalPage = Math.ceil(ttlContent / elementPerPage.value)
-  return totalPage
+  return Math.ceil(ttlContent / elementPerPage.value)
 })

 function onNextPageClick() {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,6 +55,9 @@ importers:
      feed:
        specifier: ^4.2.2
        version: 4.2.2
+      fuse.js:
+        specifier: ^7.0.0
+        version: 7.0.0
      nuxt:
        specifier: ^3.14.159
        version: 3.14.159(@parcel/watcher@2.5.0)(@types/node@22.9.0)(eslint@9.14.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.4)(terser@5.36.0)(typescript@5.6.3)(vite@5.4.10(@types/node@22.9.0)(terser@5.36.0))
@@ -4228,6 +4231,13 @@ packages:
        integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==,
      }

+  fuse.js@7.0.0:
+    resolution:
+      {
+        integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==,
+      }
+    engines: { node: '>=10' }
+
  gauge@3.0.2:
    resolution:
      {
@@ -11785,6 +11795,8 @@ snapshots:

  function-bind@1.1.2: {}

+  fuse.js@7.0.0: {}
+
  gauge@3.0.2:
    dependencies:
      aproba: 2.0.0