From 842b17f493e4aa7b426180e5f5661ba0f13d96a9 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 8 Jan 2023 19:39:31 -0500
Subject: [PATCH] Improve blog design

---
 src/components/blog/Headline.astro             | 10 ++++++++++
 src/components/blog/List.astro                 |  2 +-
 src/components/blog/ListItem.astro             |  6 +++---
 src/components/blog/Title.astro                |  8 --------
 src/pages/[...blog]/[...page].astro            |  8 +++++---
 src/pages/[...blog]/[category]/[...page].astro |  4 ++--
 src/pages/[...blog]/[tag]/[...page].astro      |  4 ++--
 7 files changed, 23 insertions(+), 19 deletions(-)
 create mode 100644 src/components/blog/Headline.astro
 delete mode 100644 src/components/blog/Title.astro

diff --git a/src/components/blog/Headline.astro b/src/components/blog/Headline.astro
new file mode 100644
index 0000000..20d54f2
--- /dev/null
+++ b/src/components/blog/Headline.astro
@@ -0,0 +1,10 @@
+---
+const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
+---
+
+<header class="mb-8 md:mb-16 text-center">
+	<h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading">
+		{title}
+	</h1>
+	{subtitle && <div class="mt-2 md:mt-3 text-lg md:text-xl max-w-2xl mx-auto" set:html={subtitle} />}
+</header>
diff --git a/src/components/blog/List.astro b/src/components/blog/List.astro
index 994aece..3093d91 100644
--- a/src/components/blog/List.astro
+++ b/src/components/blog/List.astro
@@ -12,7 +12,7 @@ const { posts } = Astro.props;
 <ul>
 	{
 		posts.map((post) => (
-			<li class="mb-10 md:mb-16">
+			<li class="mb-12 md:mb-20">
 				<Item post={post} />
 			</li>
 		))
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 70db6da..a3a2ad3 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -23,7 +23,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 	{
 		image && (
 			<a class="relative block group" href={link ?? 'javascript:void(0)'}>
-				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
+				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
 					{image && (
 						<Picture
 							src={image}
@@ -40,11 +40,11 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 	}
 	<div>
 		<header>
-			<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
+			<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading">
 				{
 					link ? (
 						<a
-							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+							class="hover:text-primary-600 hover:underline hover:underline-offset-4 hover:decoration-1 hover:decoration-dotted transition ease-in duration-200"
 							href={link}
 						>
 							{post.title}
diff --git a/src/components/blog/Title.astro b/src/components/blog/Title.astro
deleted file mode 100644
index a54655c..0000000
--- a/src/components/blog/Title.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
----
-
-<header>
-	<h1 class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading">
-		<slot />
-	</h1>
-</header>
diff --git a/src/pages/[...blog]/[...page].astro b/src/pages/[...blog]/[...page].astro
index 76e37f5..8424d74 100644
--- a/src/pages/[...blog]/[...page].astro
+++ b/src/pages/[...blog]/[...page].astro
@@ -3,7 +3,7 @@ import { SITE, BLOG } from '~/config.mjs';
 
 import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
@@ -29,8 +29,10 @@ const meta = {
 ---
 
 <Layout {meta}>
-	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<Title>News and tutorials about AstroWind</Title>
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
+		<Headline subtitle="A statically generated blog example with news, tutorials, resources and other interesting content related to AstroWind">
+			Blog
+		</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>
diff --git a/src/pages/[...blog]/[category]/[...page].astro b/src/pages/[...blog]/[category]/[...page].astro
index 32585e1..fe859bf 100644
--- a/src/pages/[...blog]/[category]/[...page].astro
+++ b/src/pages/[...blog]/[category]/[...page].astro
@@ -3,7 +3,7 @@ import { SITE, BLOG } from '~/config.mjs';
 
 import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
@@ -42,7 +42,7 @@ const meta = {
 
 <Layout meta={meta}>
 	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<Title>Category {category}</Title>
+		<Headline>Category {category}</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>
diff --git a/src/pages/[...blog]/[tag]/[...page].astro b/src/pages/[...blog]/[tag]/[...page].astro
index dc1eea9..ea271d0 100644
--- a/src/pages/[...blog]/[tag]/[...page].astro
+++ b/src/pages/[...blog]/[tag]/[...page].astro
@@ -7,7 +7,7 @@ import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
 import { TAG_BASE } from '~/utils/permalinks';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
@@ -42,7 +42,7 @@ const meta = {
 
 <Layout meta={meta}>
 	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<Title>Tag: {tag}</Title>
+		<Headline>Tag: {tag}</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>