nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed search below content + light editor and search

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-14 08:56:40 +02:00
parent 0050de7ea6
commit 20089fb507
4 changed files with 81 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/react/Search.tsx
+28 -23
View File
@@ -128,9 +128,10 @@ export default function Search() {
<button
type="button"
onClick={() => setOpen(true)}
aria-label={`Search posts (${isMac ? '⌘' : 'Ctrl'}+K)`}
aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60"
className="text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors flex items-center gap-2 px-2 py-1 hover:bg-[var(--surface0)]/60 font-display italic"
style={{ borderRadius: 1 }}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -147,7 +148,7 @@ export default function Search() {
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
<kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
<span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
</kbd>
</button>
@@ -157,18 +158,22 @@ export default function Search() {
className="fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
role="dialog"
aria-modal="true"
aria-label="Search posts"
aria-label="Search the catalogue"
onClick={() => setOpen(false)}
>
<div
className="absolute inset-0 bg-crust/70 backdrop-blur-md"
className="absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
aria-hidden="true"
/>
<div
className="relative w-full max-w-xl bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
className="relative w-full max-w-xl bg-[var(--rosewater)] 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(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
}}
onClick={e => e.stopPropagation()}
>
<div className="flex items-center gap-3 px-4 py-3 border-b border-surface1">
<div className="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"
@@ -179,7 +184,7 @@ export default function Search() {
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-subtext0 shrink-0"
className="text-[var(--mauve)] shrink-0"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
@@ -191,25 +196,25 @@ export default function Search() {
value={query}
onChange={e => setQuery(e.target.value)}
onKeyDown={onInputKey}
placeholder="Search posts…"
placeholder="Search the catalogue…"
aria-label="Search query"
className="flex-1 bg-transparent outline-none text-base text-text placeholder:text-subtext0"
className="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-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
<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-8 text-center text-sm text-subtext0">Loading…</div>
<div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">Fetching the catalogue…</div>
)}
{error && (
<div className="px-4 py-8 text-center text-sm text-red">{error}</div>
<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-8 text-center text-sm text-subtext0">
{query ? 'No posts match.' : 'No posts.'}
<div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">
{query ? 'No works match.' : 'The catalogue is empty.'}
</div>
)}
{!loading && !error && results.length > 0 && (
@@ -224,20 +229,20 @@ export default function Search() {
onClick={() => navigate(p.slug)}
className={`px-4 py-3 cursor-pointer border-l-2 transition-colors ${
active
? 'bg-surface0 border-mauve'
: 'border-transparent hover:bg-surface0/60'
? '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-medium truncate ${active ? 'text-mauve' : 'text-lavender'}`}>
<div className={`font-display italic truncate text-lg ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`}>
{title}
</div>
<time className="text-[10px] text-subtext0 shrink-0" dateTime={p.date}>
<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-subtext1 line-clamp-1 mt-0.5">{p.excerpt}</div>
<div className="text-xs text-[var(--subtext1)] line-clamp-1 mt-0.5 font-sans italic">{p.excerpt}</div>
)}
</li>
);
@@ -246,14 +251,14 @@ export default function Search() {
)}
</div>
<div className="flex items-center justify-between px-4 py-2 border-t border-surface1 text-[10px] text-subtext0 bg-crust/40">
<div className="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 rounded border border-surface1 bg-surface0/60">↑↓</kbd>
<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 rounded border border-surface1 bg-surface0/60">↵</kbd>
<kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↵</kbd>
open
</span>
</div>