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>
nurRiyad · Jan 10, 2025 · 8fc4675 · 8fc4675
1 parent 0c17603
commit 8fc4675
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 27 deletions.
diff --git 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,31 +12,31 @@ 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"
       >
         <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"
       >
         <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"
       >
         <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"

diff --git 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',

diff --git 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",

diff --git 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,31 +31,31 @@ 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"
               >
                 <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"
               >
                 <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"
               >
                 <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"

diff --git 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() {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml