joshbairstow/jb-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(blog): render search input, empty-state, hidden utility

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Bairstow 2026-06-02 01:10:27 +10:00
parent 5ac622e576
commit d7dc22d0c8
2 changed files with 98 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/components/molecules/BlogSearch.astro
View file

@ -1,3 +1,82 @@
---
// Stub — real implementation lands in Task 4.
// Light client-side filter for the blog archive.
// Reads [data-search] attributes on rows + the featured article, hides
// non-matches, collapses empty year heads, toggles a no-results message.
// Filter script is added in Task 5; this file ships markup + styles only.
---
<div class="bsearch">
<input
type="search"
class="bsearch__input"
aria-label="Search posts"
placeholder="Search the journal…"
autocomplete="off"
spellcheck="false"
/>
<span class="bsearch__hint" aria-hidden="true">Esc to clear</span>
</div>
<style>
.bsearch {
display: flex;
align-items: baseline;
gap: 14px;
padding: clamp(14px, 2.4vh, 22px) 0;
border-top: 1px solid var(--hairline-on-dark);
border-bottom: 1px solid var(--hairline-on-dark);
}
:global(body:not(.dark)) .bsearch {
border-top-color: var(--hairline);
border-bottom-color: var(--hairline);
}
.bsearch__input {
flex: 1;
max-width: 28ch;
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
padding: 6px 0;
font-family: var(--font-mono);
font-size: 13px;
color: var(--fg-on-dark-1);
letter-spacing: 0.02em;
outline: none;
transition: border-color var(--dur-base) var(--ease-out);
}
:global(body:not(.dark)) .bsearch__input {
color: var(--fg-1);
}
.bsearch__input::placeholder {
color: var(--fg-on-dark-3);
}
:global(body:not(.dark)) .bsearch__input::placeholder {
color: var(--fg-3);
}
.bsearch__input:focus {
border-bottom-color: var(--accent);
}
.bsearch__hint {
font-family: var(--font-mono);
font-size: 11px;
color: var(--fg-on-dark-3);
letter-spacing: 0.06em;
opacity: 0;
transition: opacity var(--dur-base) var(--ease-out);
}
:global(body:not(.dark)) .bsearch__hint {
color: var(--fg-3);
}
.bsearch:focus-within .bsearch__hint {
opacity: 1;
}
@media (max-width: 800px) {
.bsearch__input {
max-width: none;
}
.bsearch__hint {
display: none;
}
}
</style>

18
src/pages/blog/index.astro
View file

@ -78,6 +78,8 @@ for (const post of posts) {
</p>
</header>
<BlogSearch />
{
featured && (
<article class="feature" data-featured data-search={searchTextById.get(featured.id) ?? ""}>
@ -125,6 +127,10 @@ for (const post of posts) {
))
}
</section>
<p class="empty" data-empty hidden aria-live="polite">
No entries match "<span data-empty-query></span>".
</p>
</BaseLayout>
<style>
@ -258,4 +264,16 @@ for (const post of posts) {
.feature { grid-template-columns: 1fr; }
.feature .img { order: -1; aspect-ratio: 16 / 9; }
}
.is-hidden { display: none !important; }
.empty {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--fg-on-dark-3);
margin: clamp(28px, 5vh, 52px) 0 0;
font-feature-settings: "onum" 1;
}
:global(body:not(.dark)) .empty { color: var(--fg-3); }
</style>