Blogs/blogs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify poetry archive page
Some checks are pending
Build / build (push) Waiting to run
Details

Browse source
This commit is contained in:
Neeldhara Misra 2026-06-23 23:03:24 +05:30
parent 81c890471c
commit f52af26f31
2 changed files with 13 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

34
sites/poetry/src/pages/index.astro
View file

@ -22,35 +22,24 @@ const poems = posts.map((post) => ({
dateLabel: formatDate.format(post.data.pubDate), dateLabel: formatDate.format(post.data.pubDate),
searchText: `${post.data.title} ${post.data.description}`.toLowerCase(), searchText: `${post.data.title} ${post.data.description}`.toLowerCase(),
})); }));
const recentPoems = poems.slice(0, 3);
--- ---
<DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}> <DefaultLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
<section class="poetry-home"> <section class="poetry-home">
<div class="poetry-home-panel"> <div class="poetry-home-panel">
<div class="poetry-home-chrome" aria-hidden="true">
<span></span>
<span></span>
<span></span>
</div>
<header class="poetry-home-header"> <header class="poetry-home-header">
<div> <h1>{ACTIVE_BLOG_SITE.title}</h1>
<p class="poetry-home-kicker">{ACTIVE_BLOG_SITE.description}</p>
<h1>{ACTIVE_BLOG_SITE.title}</h1>
</div>
<form class="poetry-search" data-poem-search-form role="search"> <form class="poetry-search" data-poem-search-form role="search">
<label class="sr-only" for="poem-search">Search poems</label> <label class="sr-only" for="poem-search">Search</label>
<input <input
id="poem-search" id="poem-search"
data-poem-search-input data-poem-search-input
type="search" type="search"
autocomplete="off" autocomplete="off"
placeholder="Search poems" placeholder="Search"
/> />
<button type="submit" aria-label="Search poems"> <button type="submit" aria-label="Search">
<svg viewBox="0 0 24 24" aria-hidden="true"> <svg viewBox="0 0 24 24" aria-hidden="true">
<circle cx="11" cy="11" r="6.5"></circle> <circle cx="11" cy="11" r="6.5"></circle>
<path d="m16 16 4 4"></path> <path d="m16 16 4 4"></path>
@ -60,20 +49,7 @@ const recentPoems = poems.slice(0, 3);
</header> </header>
<div class="poetry-home-grid"> <div class="poetry-home-grid">
<section class="poetry-recent" aria-labelledby="recent-poems"> <section class="poetry-archive" aria-label="Poem archive">
<h2 id="recent-poems">Recent</h2>
<ol>
{recentPoems.map((poem) => (
<li>
<time>{poem.dateLabel}</time>
<a href={poem.href}>{poem.title}</a>
</li>
))}
</ol>
</section>
<section class="poetry-archive" aria-labelledby="all-poems">
<h2 id="all-poems">All Poems</h2>
<ol data-poem-list> <ol data-poem-list>
{poems.map((poem) => ( {poems.map((poem) => (
<li data-poem-row data-search={poem.searchText}> <li data-poem-row data-search={poem.searchText}>

36
sites/poetry/src/styles/global.css
View file

@ -298,11 +298,11 @@
} }
.poetry-post-title { .poetry-post-title {
@apply mb-12 text-3xl font-semibold md:mb-16 md:text-4xl; @apply mb-8 text-2xl font-semibold md:mb-10 md:text-3xl;
} }
.poetry-post-body { .poetry-post-body {
@apply mx-auto max-w-xl text-center text-xl leading-loose text-foreground/80 md:text-2xl; @apply mx-auto max-w-xl text-center text-base leading-8 text-foreground/80 md:text-lg;
} }
.poetry-post-body :where(p) { .poetry-post-body :where(p) {
@ -349,24 +349,12 @@
@apply mx-auto max-w-5xl rounded-2xl border bg-card px-7 py-8 shadow-sm md:px-10 md:py-10; @apply mx-auto max-w-5xl rounded-2xl border bg-card px-7 py-8 shadow-sm md:px-10 md:py-10;
} }
.poetry-home-chrome {
@apply mb-12 flex gap-3;
}
.poetry-home-chrome span {
@apply block h-3 w-3 rounded-full bg-muted;
}
.poetry-home-header { .poetry-home-header {
@apply flex flex-col gap-6 border-b pb-8 md:flex-row md:items-end md:justify-between; @apply flex flex-col gap-6 border-b pb-8 md:flex-row md:items-end md:justify-between;
} }
.poetry-home-header h1 { .poetry-home-header h1 {
@apply mt-2 text-3xl font-semibold md:text-4xl; @apply text-3xl font-semibold md:text-4xl;
}
.poetry-home-kicker {
@apply max-w-xl text-base text-muted-foreground;
} }
.poetry-search { .poetry-search {
@ -391,33 +379,25 @@
} }
.poetry-home-grid { .poetry-home-grid {
@apply grid gap-12 pt-10 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.3fr)] md:gap-16; @apply pt-8;
} }
.poetry-recent h2,
.poetry-archive h2 {
@apply mb-6 text-sm font-semibold uppercase tracking-wider text-muted-foreground;
}
.poetry-recent ol,
.poetry-archive ol { .poetry-archive ol {
@apply m-0 list-none p-0; @apply m-0 list-none p-0;
} }
.poetry-recent li {
@apply grid grid-cols-[5.75rem_minmax(0,1fr)] gap-4 py-3;
}
.poetry-recent time,
.poetry-archive time { .poetry-archive time {
@apply text-muted-foreground/75; @apply text-muted-foreground/75;
} }
.poetry-recent a,
.poetry-archive a { .poetry-archive a {
@apply font-semibold text-foreground decoration-muted-foreground/30 underline-offset-4 hover:underline; @apply font-semibold text-foreground decoration-muted-foreground/30 underline-offset-4 hover:underline;
} }
.poetry-archive {
@apply ml-auto w-full max-w-3xl;
}
.poetry-archive li { .poetry-archive li {
@apply flex items-baseline justify-between gap-8 border-t py-4; @apply flex items-baseline justify-between gap-8 border-t py-4;
} }