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

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>