RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Nicolhetti
2025-01-10 17:30:03 -03:00
committed by GitHub
parent 0c17603459
commit 8fc4675421
6 changed files with 50 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/about.vue
View File

@@ -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"

37
pages/blogs/index.vue
View File

@@ -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() {