feat: add fuzzy post search
This commit is contained in:
opencode
237
components/blog/PostSearch.tsx
Normal file
237
components/blog/PostSearch.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import { PostCard } from './PostCard'
|
||||
|
||||
type SearchPost = {
|
||||
slug: string
|
||||
title: string
|
||||
date: string
|
||||
excerpt: string
|
||||
tags: string[]
|
||||
author: string | null
|
||||
coverImage: string | null
|
||||
readingTime: number
|
||||
}
|
||||
|
||||
type TagFilter = {
|
||||
slug: string
|
||||
label: string
|
||||
count: number
|
||||
}
|
||||
|
||||
type ScoredPost = {
|
||||
post: SearchPost
|
||||
score: number
|
||||
index: number
|
||||
}
|
||||
|
||||
interface PostSearchProps {
|
||||
posts: SearchPost[]
|
||||
}
|
||||
|
||||
const normalizeSearchText = (value: string): string =>
|
||||
value
|
||||
.normalize('NFKD')
|
||||
.replace(/[\u0300-\u036f]/g, '')
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
|
||||
const tagToClientSlug = (tag: string): string =>
|
||||
normalizeSearchText(tag)
|
||||
.replace(/\+/g, ' plus ')
|
||||
.replace(/#/g, ' sharp ')
|
||||
.replace(/[\\/]+/g, ' ')
|
||||
.replace(/[^\p{L}\p{N}]+/gu, '-')
|
||||
.replace(/-{2,}/g, '-')
|
||||
.replace(/^-|-$/g, '')
|
||||
|
||||
const getOrderedCharacterScore = (field: string, query: string): number => {
|
||||
if (!query) return 0
|
||||
|
||||
let queryIndex = 0
|
||||
let gaps = 0
|
||||
let lastMatchIndex = -1
|
||||
|
||||
for (let fieldIndex = 0; fieldIndex < field.length && queryIndex < query.length; fieldIndex += 1) {
|
||||
if (field[fieldIndex] !== query[queryIndex]) continue
|
||||
|
||||
if (lastMatchIndex >= 0) gaps += fieldIndex - lastMatchIndex - 1
|
||||
lastMatchIndex = fieldIndex
|
||||
queryIndex += 1
|
||||
}
|
||||
|
||||
if (queryIndex !== query.length) return 0
|
||||
|
||||
return Math.max(1, 80 - gaps - Math.max(0, field.length - query.length) * 0.05)
|
||||
}
|
||||
|
||||
const scoreField = (field: string, query: string, weight: number): number => {
|
||||
if (!field || !query) return 0
|
||||
|
||||
if (field === query) return 1000 * weight
|
||||
if (field.startsWith(query)) return 700 * weight + query.length
|
||||
if (field.includes(query)) return 500 * weight + query.length
|
||||
|
||||
return getOrderedCharacterScore(field, query) * weight
|
||||
}
|
||||
|
||||
const scorePost = (post: SearchPost, query: string): number => {
|
||||
if (!query) return 0
|
||||
|
||||
const fields = [
|
||||
[post.title, 1.4],
|
||||
[post.slug, 1.1],
|
||||
[post.excerpt, 0.8],
|
||||
[post.author ?? '', 0.75],
|
||||
[post.tags.join(' '), 1],
|
||||
] as const
|
||||
|
||||
return fields.reduce(
|
||||
(score, [field, weight]) => score + scoreField(normalizeSearchText(field), query, weight),
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
const getTagFilters = (posts: SearchPost[]): TagFilter[] => {
|
||||
const tags = new Map<string, TagFilter>()
|
||||
|
||||
posts.forEach((post) => {
|
||||
const postTags = new Set<string>()
|
||||
|
||||
post.tags.forEach((tag) => {
|
||||
const slug = tagToClientSlug(tag)
|
||||
if (!slug || postTags.has(slug)) return
|
||||
|
||||
postTags.add(slug)
|
||||
const existing = tags.get(slug)
|
||||
|
||||
if (existing) {
|
||||
existing.count += 1
|
||||
if (tag.localeCompare(existing.label) < 0) existing.label = tag
|
||||
return
|
||||
}
|
||||
|
||||
tags.set(slug, { slug, label: tag, count: 1 })
|
||||
})
|
||||
})
|
||||
|
||||
return Array.from(tags.values()).sort(
|
||||
(a, b) => a.label.localeCompare(b.label) || a.slug.localeCompare(b.slug)
|
||||
)
|
||||
}
|
||||
|
||||
export function PostSearch({ posts }: PostSearchProps) {
|
||||
const [query, setQuery] = useState('')
|
||||
const [selectedTag, setSelectedTag] = useState<string | null>(null)
|
||||
|
||||
const tagFilters = useMemo(() => getTagFilters(posts), [posts])
|
||||
const normalizedQuery = normalizeSearchText(query)
|
||||
|
||||
const results = useMemo(() => {
|
||||
const scoredPosts = posts.reduce<ScoredPost[]>((matches, post, index) => {
|
||||
if (selectedTag && !post.tags.some((tag) => tagToClientSlug(tag) === selectedTag)) {
|
||||
return matches
|
||||
}
|
||||
|
||||
const score = scorePost(post, normalizedQuery)
|
||||
if (normalizedQuery && score <= 0) return matches
|
||||
|
||||
matches.push({ post, score, index })
|
||||
return matches
|
||||
}, [])
|
||||
|
||||
return scoredPosts
|
||||
.sort((a, b) => b.score - a.score || a.index - b.index)
|
||||
.map(({ post }) => post)
|
||||
}, [normalizedQuery, posts, selectedTag])
|
||||
|
||||
if (posts.length === 0) {
|
||||
return <p className="text-ink-soft">No posts yet.</p>
|
||||
}
|
||||
|
||||
const hasFilters = Boolean(normalizedQuery || selectedTag)
|
||||
const selectedTagLabel = tagFilters.find((tag) => tag.slug === selectedTag)?.label
|
||||
|
||||
return (
|
||||
<section aria-labelledby="posts-search-heading" className="space-y-8">
|
||||
<div className="space-y-5 rounded-xl border border-border bg-surface/30 p-4 sm:p-5">
|
||||
<div className="space-y-2">
|
||||
<label id="posts-search-heading" htmlFor="post-search" className="block text-sm font-medium text-ink">
|
||||
Search posts
|
||||
</label>
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<input
|
||||
id="post-search"
|
||||
type="search"
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search title, excerpt, tag, author, or slug"
|
||||
className="min-w-0 flex-1 rounded-lg border border-border bg-canvas px-3 py-2 text-sm text-ink outline-none transition-colors placeholder:text-ink-soft/70 focus:border-accent focus:ring-2 focus:ring-accent/20"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setQuery('')}
|
||||
disabled={!query}
|
||||
className="rounded-lg border border-border px-3 py-2 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Clear search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tagFilters.length > 0 && (
|
||||
<div className="space-y-2" aria-label="Filter posts by tag">
|
||||
<p className="text-sm font-medium text-ink">Filter by tag</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tagFilters.map((tag) => {
|
||||
const isSelected = selectedTag === tag.slug
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tag.slug}
|
||||
type="button"
|
||||
aria-pressed={isSelected}
|
||||
onClick={() => setSelectedTag(isSelected ? null : tag.slug)}
|
||||
className="rounded-full border border-border bg-canvas px-3 py-1 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent aria-pressed:border-accent aria-pressed:bg-accent/10 aria-pressed:text-accent"
|
||||
>
|
||||
{tag.label} <span className="font-mono text-ink-soft/70">{tag.count}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-col gap-2 text-sm text-ink-soft sm:flex-row sm:items-center sm:justify-between">
|
||||
<p aria-live="polite">
|
||||
{results.length} {results.length === 1 ? 'post' : 'posts'} found
|
||||
{selectedTagLabel ? ` in ${selectedTagLabel}` : ''}
|
||||
</p>
|
||||
{hasFilters && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setQuery('')
|
||||
setSelectedTag(null)
|
||||
}}
|
||||
className="self-start rounded-lg border border-border px-3 py-1.5 text-sm text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent sm:self-auto"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{results.length > 0 ? (
|
||||
<div className="space-y-12">
|
||||
{results.map((post, index) => (
|
||||
<PostCard key={post.slug} {...post} index={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-ink-soft">No posts match your search.</p>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user