From 81c890471c850cf6793cd2027e0e8e3f67fc54e4 Mon Sep 17 00:00:00 2001 From: Neeldhara Misra Date: Tue, 23 Jun 2026 22:39:44 +0530 Subject: [PATCH] Make poetry blog minimal --- .../src/components/sections/blog-post.tsx | 84 +---------- sites/poetry/src/pages/[...slug].astro | 7 +- sites/poetry/src/pages/index.astro | 111 +++++++++++++- sites/poetry/src/styles/global.css | 137 ++++++++++++++++++ 4 files changed, 250 insertions(+), 89 deletions(-) diff --git a/sites/poetry/src/components/sections/blog-post.tsx b/sites/poetry/src/components/sections/blog-post.tsx index 84022db..4cb7aa9 100644 --- a/sites/poetry/src/components/sections/blog-post.tsx +++ b/sites/poetry/src/components/sections/blog-post.tsx @@ -1,9 +1,3 @@ -import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; -import { Badge } from "@/components/ui/badge"; -import { Button } from "@/components/ui/button"; -import { format } from "date-fns"; -import { Calendar, Clock, ArrowLeft, User } from "lucide-react"; - const BlogPost = ({ post, children, @@ -11,77 +5,15 @@ const BlogPost = ({ post: any; children: React.ReactNode; }) => { - const { title, authorName, image, pubDate, description, authorImage } = - post.data; + const { title } = post.data; + return ( - <> - {/* Hero section with gradient background and post info */} -
-
-
-

- {title} -

-

- {description} -

-
- -
- {/* Author info */} - {authorImage ? ( -
-
- ) : ( -
-
- -
-
- - {authorName || "Anonymous"} - - Author -
-
- )} - - {/* Date info */} -
-
- - {format(pubDate, "MMMM d, yyyy")} -
- -
- - 5 min read -
-
-
-
-
- - {/* Featured image */} - {image && ( -
-
- {title} -
-
- )} - - {/* Article content */} -
-
- {children} -
-
- +
+
+

{title}

+
{children}
+
+
); }; diff --git a/sites/poetry/src/pages/[...slug].astro b/sites/poetry/src/pages/[...slug].astro index ea2f2d7..5947d59 100644 --- a/sites/poetry/src/pages/[...slug].astro +++ b/sites/poetry/src/pages/[...slug].astro @@ -2,7 +2,6 @@ import { getCollection, render } from 'astro:content'; import DefaultLayout from '@/layouts/DefaultLayout.astro'; import { BlogPost } from '@/components/sections/blog-post'; -import NewsletterSignup from '@/components/sections/newsletter-signup'; import { ACTIVE_BLOG_SITE } from '@/blog-sites.js'; import { SITE_TITLE } from '@/consts'; @@ -19,11 +18,9 @@ const { Content } = await render(post); --- -
- +
+
- - diff --git a/sites/poetry/src/pages/index.astro b/sites/poetry/src/pages/index.astro index 8becdef..3ff54a0 100644 --- a/sites/poetry/src/pages/index.astro +++ b/sites/poetry/src/pages/index.astro @@ -3,21 +3,116 @@ import { getCollection } from 'astro:content'; import DefaultLayout from '@/layouts/DefaultLayout.astro'; import { SITE_TITLE, SITE_DESCRIPTION } from '@/consts'; import { ACTIVE_BLOG_SITE } from '@/blog-sites.js'; -import { BlogPosts } from '@/components/sections/blog-posts'; const posts = (await getCollection(ACTIVE_BLOG_SITE.key)).sort( (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(), ); + +const formatDate = new Intl.DateTimeFormat('en', { + month: 'short', + day: 'numeric', + year: 'numeric', + timeZone: 'UTC', +}); + +const poems = posts.map((post) => ({ + title: post.data.title, + description: post.data.description, + href: `/${post.id.replace(/\/index$/, '')}/`, + dateLabel: formatDate.format(post.data.pubDate), + searchText: `${post.data.title} ${post.data.description}`.toLowerCase(), +})); + +const recentPoems = poems.slice(0, 3); --- -
-
-
-

{ACTIVE_BLOG_SITE.title}

-

{ACTIVE_BLOG_SITE.description}

+
+
+ + +
+
+

{ACTIVE_BLOG_SITE.description}

+

{ACTIVE_BLOG_SITE.title}

+
+ + +
+ +
+
+

Recent

+
    + {recentPoems.map((poem) => ( +
  1. + + {poem.title} +
    2. + ))} +
+
+ +
+

All Poems

+
    + {poems.map((poem) => ( +
  1. + {poem.title} + +
    2. + ))} +
+ +
-
-
+ + + diff --git a/sites/poetry/src/styles/global.css b/sites/poetry/src/styles/global.css index a3cd166..9e479c2 100644 --- a/sites/poetry/src/styles/global.css +++ b/sites/poetry/src/styles/global.css @@ -293,6 +293,143 @@ @apply text-2xl font-semibold md:text-3xl lg:text-4xl; } + .poetry-post { + @apply max-w-2xl text-center; + } + + .poetry-post-title { + @apply mb-12 text-3xl font-semibold md:mb-16 md:text-4xl; + } + + .poetry-post-body { + @apply mx-auto max-w-xl text-center text-xl leading-loose text-foreground/80 md:text-2xl; + } + + .poetry-post-body :where(p) { + margin: 0 0 1.75em; + } + + .poetry-post-body :where(p:last-child) { + margin-bottom: 0; + } + + .poetry-post-body :where(a) { + text-decoration-line: underline; + text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); + text-underline-offset: 0.2em; + } + + .poetry-post-body :where(ul, ol) { + display: inline-block; + margin: 1.5em auto; + padding-left: 1.4em; + text-align: left; + } + + .poetry-post-body :where(blockquote) { + margin: 2em auto; + max-width: 32rem; + color: hsl(var(--muted-foreground)); + } + + .poetry-post-body :where(hr) { + display: none; + } + + .poetry-post-body :where(pre) { + margin-inline: auto; + text-align: left; + } + + .poetry-home { + @apply px-5 py-10 md:px-8 md:py-16 lg:py-20; + } + + .poetry-home-panel { + @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 { + @apply flex flex-col gap-6 border-b pb-8 md:flex-row md:items-end md:justify-between; + } + + .poetry-home-header h1 { + @apply mt-2 text-3xl font-semibold md:text-4xl; + } + + .poetry-home-kicker { + @apply max-w-xl text-base text-muted-foreground; + } + + .poetry-search { + @apply flex w-full max-w-sm items-center gap-2 rounded-full border bg-background/80 px-4 py-2 md:w-72; + } + + .poetry-search input { + @apply min-w-0 flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground/70; + } + + .poetry-search button { + @apply flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground; + } + + .poetry-search svg { + @apply h-5 w-5; + fill: none; + stroke: currentColor; + stroke-width: 1.8; + stroke-linecap: round; + stroke-linejoin: round; + } + + .poetry-home-grid { + @apply grid gap-12 pt-10 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.3fr)] md:gap-16; + } + + .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 { + @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 { + @apply text-muted-foreground/75; + } + + .poetry-recent a, + .poetry-archive a { + @apply font-semibold text-foreground decoration-muted-foreground/30 underline-offset-4 hover:underline; + } + + .poetry-archive li { + @apply flex items-baseline justify-between gap-8 border-t py-4; + } + + .poetry-archive li[hidden] { + display: none; + } + + .poetry-empty { + @apply border-t py-4 text-muted-foreground; + } + .blog-card-title-featured { @apply text-xl font-semibold md:text-2xl; }