278 lines
10 KiB
TypeScript
278 lines
10 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { getPosts } from '../../lib/api';
|
|
import { type SiteMode, copy } from '../../lib/siteMode';
|
|
|
|
interface Post {
|
|
slug: string;
|
|
date: string;
|
|
title?: string;
|
|
excerpt?: string;
|
|
tags: string[];
|
|
draft: boolean;
|
|
reading_time: number;
|
|
}
|
|
|
|
function formatSlug(slug: string) {
|
|
if (!slug) return '';
|
|
return slug
|
|
.split('-')
|
|
.map(w => w.charAt(0).toUpperCase() + w.slice(1))
|
|
.join(' ');
|
|
}
|
|
|
|
function formatDate(date: string) {
|
|
return new Date(date).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
});
|
|
}
|
|
|
|
export default function Search({ mode = 'atelier' }: { mode?: SiteMode }) {
|
|
const c = copy(mode);
|
|
const [open, setOpen] = useState(false);
|
|
const [query, setQuery] = useState('');
|
|
const [posts, setPosts] = useState<Post[] | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeIdx, setActiveIdx] = useState(0);
|
|
const [isMac, setIsMac] = useState(false);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
const listRef = useRef<HTMLUListElement>(null);
|
|
|
|
useEffect(() => {
|
|
setIsMac(/Mac|iPhone|iPad|iPod/i.test(navigator.userAgent));
|
|
}, []);
|
|
|
|
// Global Cmd/Ctrl+K + Esc listener
|
|
useEffect(() => {
|
|
function onKey(e: KeyboardEvent) {
|
|
const mod = isMac ? e.metaKey : e.ctrlKey;
|
|
if (mod && e.key.toLowerCase() === 'k') {
|
|
e.preventDefault();
|
|
setOpen(o => !o);
|
|
} else if (e.key === 'Escape' && open) {
|
|
setOpen(false);
|
|
}
|
|
}
|
|
window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [open, isMac]);
|
|
|
|
// Lazy fetch posts on first open
|
|
useEffect(() => {
|
|
if (!open || posts !== null || loading) return;
|
|
setLoading(true);
|
|
getPosts()
|
|
.then(p => setPosts(p as Post[]))
|
|
.catch(e => setError(e instanceof Error ? e.message : 'Failed to load'))
|
|
.finally(() => setLoading(false));
|
|
}, [open, posts, loading]);
|
|
|
|
// Focus input on open
|
|
useEffect(() => {
|
|
if (open) {
|
|
setQuery('');
|
|
setActiveIdx(0);
|
|
requestAnimationFrame(() => inputRef.current?.focus());
|
|
}
|
|
}, [open]);
|
|
|
|
// Lock body scroll when open
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const prev = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
return () => { document.body.style.overflow = prev; };
|
|
}, [open]);
|
|
|
|
const results = useMemo(() => {
|
|
if (!posts) return [];
|
|
const q = query.trim().toLowerCase();
|
|
if (!q) return posts;
|
|
return posts.filter(p => {
|
|
const hay = `${p.title || formatSlug(p.slug)} ${p.excerpt || ''} ${p.tags?.join(' ') || ''}`.toLowerCase();
|
|
return hay.includes(q);
|
|
});
|
|
}, [posts, query]);
|
|
|
|
// Reset active index when results change
|
|
useEffect(() => {
|
|
setActiveIdx(0);
|
|
}, [query, posts]);
|
|
|
|
function navigate(slug: string) {
|
|
window.location.href = `/posts/${encodeURIComponent(slug)}`;
|
|
}
|
|
|
|
function onInputKey(e: React.KeyboardEvent<HTMLInputElement>) {
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
setActiveIdx(i => Math.min(i + 1, Math.max(0, results.length - 1)));
|
|
} else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
setActiveIdx(i => Math.max(i - 1, 0));
|
|
} else if (e.key === 'Enter' && results[activeIdx]) {
|
|
e.preventDefault();
|
|
navigate(results[activeIdx].slug);
|
|
}
|
|
}
|
|
|
|
// Scroll active result into view
|
|
useEffect(() => {
|
|
if (!open || !listRef.current) return;
|
|
const el = listRef.current.children[activeIdx] as HTMLElement | undefined;
|
|
el?.scrollIntoView({ block: 'nearest' });
|
|
}, [activeIdx, open]);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => setOpen(true)}
|
|
aria-label={`${c.searchAria} (${isMac ? '⌘' : 'Ctrl'}+K)`}
|
|
className="topbar-control tc-collapse-md kbd-tip-host"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
<span className="tc-label">Search</span>
|
|
<span className="kbd-tip" aria-hidden="true">
|
|
<kbd>{isMac ? '⌘' : 'Ctrl'}</kbd>
|
|
<kbd>K</kbd>
|
|
</span>
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className="search-overlay fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={c.searchAria}
|
|
onClick={() => setOpen(false)}
|
|
>
|
|
<div
|
|
className="search-backdrop absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
|
|
aria-hidden="true"
|
|
/>
|
|
<div
|
|
className="search-panel relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
|
|
style={{
|
|
borderRadius: 2,
|
|
boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
|
|
}}
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<div className="search-bar flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-[var(--mauve)] shrink-0"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="m21 21-4.3-4.3" />
|
|
</svg>
|
|
<input
|
|
ref={inputRef}
|
|
type="search"
|
|
value={query}
|
|
onChange={e => setQuery(e.target.value)}
|
|
onKeyDown={onInputKey}
|
|
placeholder={`${c.searchPlaceholder}`}
|
|
aria-label="Search query"
|
|
className="search-input flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
|
|
/>
|
|
<kbd className="text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
|
|
Esc
|
|
</kbd>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{loading && (
|
|
<div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">{c.searchFetching}</div>
|
|
)}
|
|
{error && (
|
|
<div className="px-4 py-8 text-center text-sm text-[var(--red)] font-display italic">{error}</div>
|
|
)}
|
|
{!loading && !error && posts && results.length === 0 && (
|
|
<div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">
|
|
{query ? c.searchNoMatch : c.searchEmpty}
|
|
</div>
|
|
)}
|
|
{!loading && !error && results.length > 0 && (
|
|
<ul ref={listRef} className="search-list py-1">
|
|
{results.map((p, i) => {
|
|
const title = p.title || formatSlug(p.slug);
|
|
const active = i === activeIdx;
|
|
return (
|
|
<li
|
|
key={p.slug}
|
|
onMouseEnter={() => setActiveIdx(i)}
|
|
onClick={() => navigate(p.slug)}
|
|
className={`search-result px-4 py-3 cursor-pointer border-l-2 transition-colors ${
|
|
active
|
|
? 'search-result--active bg-[var(--surface0)] border-[var(--mauve)]'
|
|
: 'border-transparent hover:bg-[var(--surface0)]/60'
|
|
}`}
|
|
>
|
|
<div className="flex items-baseline justify-between gap-3">
|
|
<div className={`font-display italic truncate text-lg leading-tight pr-2 flex items-baseline gap-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
|
|
<span className="truncate">{title}</span>
|
|
{p.draft && (
|
|
<span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
|
|
{c.draftShort}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<time className="text-[10px] font-sans uppercase tracking-[0.18em] text-[var(--subtext0)] shrink-0" dateTime={p.date}>
|
|
{formatDate(p.date)}
|
|
</time>
|
|
</div>
|
|
{p.excerpt && (
|
|
<div className="text-xs text-[var(--subtext1)] line-clamp-1 mt-0.5 font-sans italic">{p.excerpt}</div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
<div className="search-foot flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
|
|
<div className="flex items-center gap-3">
|
|
<span className="flex items-center gap-1">
|
|
<kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↑↓</kbd>
|
|
navigate
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↵</kbd>
|
|
open
|
|
</span>
|
|
</div>
|
|
<span>{results.length} {results.length === 1 ? 'result' : 'results'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|