Skip to content

Commit 8fc4675

Browse files
NicolhettinurRiyad
Nicolhetti
and
nurRiyad
authored
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>
1 parent 0c17603 commit 8fc4675

File tree

6 files changed

+50
-27
lines changed

6 files changed

+50
-27
lines changed

‎components/footer/developer.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { footerData } from '~/data'
2+
import { footerData, socialLinks } from '~/data'
33
</script>
44

55
<template>
@@ -12,31 +12,31 @@ import { footerData } from '~/data'
1212
</p>
1313
<div class="my-3 space-x-3 pb-3">
1414
<NuxtLink
15-
to="https://github.com/nurRiyad"
15+
:to="socialLinks.githubLink"
1616
target="_blank"
1717
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
1818
aria-label="Github"
1919
>
2020
<Icon name="fa:github" size="1em" />
2121
</NuxtLink>
2222
<NuxtLink
23-
to="https://www.linkedin.com/in/nur-riyad/"
23+
:to="socialLinks.linkedinLink"
2424
target="_blank"
2525
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
2626
aria-label="LinkedIn"
2727
>
2828
<Icon name="fa:linkedin-square" size="1em" />
2929
</NuxtLink>
3030
<NuxtLink
31-
to="https://twitter.com/qdnvubp"
31+
:to="socialLinks.twitterLink"
3232
target="_blank"
3333
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
3434
aria-label="Twitter"
3535
>
3636
<Icon name="fa:twitter-square" size="1em" />
3737
</NuxtLink>
3838
<NuxtLink
39-
to="https://stackoverflow.com/users/16781395/nur-riyad"
39+
:to="socialLinks.stackoverflowLink"
4040
target="_blank"
4141
class="p-2 bg-gray-300 text-gray-800 rounded-md dark:bg-sky-700 dark:text-[#F1F2F4]"
4242
aria-label="StackOverflow"

‎data/index.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ export const seoData = {
4848
mailAddress: 'asadnurriyad@gmail.com',
4949
}
5050

51+
export const socialLinks = {
52+
githubLink: 'https://github.com/nurRiyad',
53+
linkedinLink: 'https://www.linkedin.com/in/nur-riyad/',
54+
twitterLink: 'https://twitter.com/qdnvubp',
55+
stackoverflowLink: 'https://stackoverflow.com/users/16781395/nur-riyad',
56+
}
57+
5158
export const siteMetaData = [
5259
{
5360
name: 'description',

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"@vueuse/nuxt": "^10.9.0",
3232
"eslint-config-prettier": "^9.1.0",
3333
"feed": "^4.2.2",
34+
"fuse.js": "^7.0.0",
3435
"nuxt": "^3.14.159",
3536
"nuxt-icon": "^0.6.8",
3637
"nuxt-og-image": "^3.0.0-rc.38",

‎pages/about.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { aboutPage, footerData, navbarData } from '~/data'
2+
import { aboutPage, footerData, navbarData, socialLinks } from '~/data'
33
44
useHead({
55
title: 'About',
@@ -31,31 +31,31 @@ defineOgImageComponent('About', {
3131

3232
<div class="my-3 space-x-2 md:space-x-3 pb-10">
3333
<NuxtLink
34-
to="https://github.com/nurRiyad"
34+
:to="socialLinks.githubLink"
3535
target="_blank"
3636
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]"
3737
aria-label="Github"
3838
>
3939
<Icon name="fa:github" size="1em" />
4040
</NuxtLink>
4141
<NuxtLink
42-
to="https://www.linkedin.com/in/nur-riyad/"
42+
:to="socialLinks.linkedinLink"
4343
target="_blank"
4444
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]"
4545
aria-label="LinkedIn"
4646
>
4747
<Icon name="fa:linkedin-square" size="1em" />
4848
</NuxtLink>
4949
<NuxtLink
50-
to="https://twitter.com/qdnvubp"
50+
:to="socialLinks.twitterLink"
5151
target="_blank"
5252
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]"
5353
aria-label="Twitter"
5454
>
5555
<Icon name="fa:twitter-square" size="1em" />
5656
</NuxtLink>
5757
<NuxtLink
58-
to="https://stackoverflow.com/users/16781395/nur-riyad"
58+
:to="socialLinks.stackoverflowLink"
5959
target="_blank"
6060
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]"
6161
aria-label="StackOverflow"

‎pages/blogs/index.vue

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<script lang="ts" setup>
2+
import Fuse from 'fuse.js'
3+
24
const { data } = await useAsyncData('home', () => queryContent('/blogs').sort({ _id: -1 }).find())
35
46
const elementPerPage = ref(5)
@@ -23,26 +25,28 @@ const formattedData = computed(() => {
2325
)
2426
})
2527
28+
const fuse = computed(() => {
29+
return new Fuse(formattedData.value, {
30+
keys: ['title', 'description'],
31+
threshold: 0.4,
32+
includeScore: false,
33+
})
34+
})
35+
2636
const searchData = computed(() => {
27-
return (
28-
formattedData.value.filter((data) => {
29-
const lowerTitle = data.title.toLocaleLowerCase()
30-
if (lowerTitle.search(searchTest.value) !== -1) return true
31-
else return false
32-
}) || []
33-
)
37+
if (!searchTest.value.trim()) {
38+
return formattedData.value
39+
}
40+
41+
const results = fuse.value.search(searchTest.value)
42+
return results.map((result) => result.item)
3443
})
3544
3645
const paginatedData = computed(() => {
37-
return (
38-
searchData.value.filter((data, idx) => {
39-
const startInd = (pageNumber.value - 1) * elementPerPage.value
40-
const endInd = pageNumber.value * elementPerPage.value - 1
46+
const startInd = (pageNumber.value - 1) * elementPerPage.value
47+
const endInd = pageNumber.value * elementPerPage.value
4148
42-
if (idx >= startInd && idx <= endInd) return true
43-
else return false
44-
}) || []
45-
)
49+
return searchData.value.slice(startInd, endInd)
4650
})
4751
4852
function onPreviousPageClick() {
@@ -51,8 +55,7 @@ function onPreviousPageClick() {
5155
5256
const totalPage = computed(() => {
5357
const ttlContent = searchData.value.length || 0
54-
const totalPage = Math.ceil(ttlContent / elementPerPage.value)
55-
return totalPage
58+
return Math.ceil(ttlContent / elementPerPage.value)
5659
})
5760
5861
function onNextPageClick() {

‎pnpm-lock.yaml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)