From cf85f107245fd40f7b453d30790a8649eb972083 Mon Sep 17 00:00:00 2001
From: Valentin Popov <valentin@popov.link>
Date: Tue, 17 Sep 2024 22:27:55 +0000
Subject: [PATCH] Update launch configuration and enhance PostSummary component
 layout

---
 .vscode/launch.json              |  2 +-
 astro.config.mjs                 |  4 ++-
 src/components/PostSummary.astro | 50 ++++++++++++++------------------
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index d642209..64aca51 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -2,7 +2,7 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "command": "./node_modules/.bin/astro dev",
+      "command": "./node_modules/.bin/astro dev --host 0.0.0.0",
       "name": "Development server",
       "request": "launch",
       "type": "node-terminal"
diff --git a/astro.config.mjs b/astro.config.mjs
index 1f6c4c2..9317308 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,7 +6,9 @@ import sitemap from "@astrojs/sitemap";
 export default defineConfig({
 	site: "https://popov.link",
 	output: "hybrid",
-	adapter: cloudflare(),
+	adapter: cloudflare({
+		imageService: "compile",
+	}),
 	integrations: [sitemap()],
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
diff --git a/src/components/PostSummary.astro b/src/components/PostSummary.astro
index 2f98130..59d7683 100644
--- a/src/components/PostSummary.astro
+++ b/src/components/PostSummary.astro
@@ -7,45 +7,39 @@ type Props = {
 };
 
 const { post } = Astro.props;
+const { remarkPluginFrontmatter } = await post.render();
+const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
 ---
 
 <style lang="scss">
 	@import "../scss/_variables.scss";
 
-	/* Post */
-	.post {
+	a {
+		color: $colorText;
+		display: block;
 		padding-bottom: 3rem;
 	}
 
-	.link {
-		color: $colorText;
+	h2 {
+		color: $colorBlossom;
+		font-size: 1.25em;
+		margin: 0.5em 0;
 	}
 
-	/* Meta */
-	.meta {
-		padding-bottom: 1.5rem;
-	}
-
-	.date {
+	div {
+		font-size: $fontSizeBase * 0.75;
 		opacity: 0.5;
 	}
-
-	.tag {
-		display: none;
-	}
 </style>
 
-<article class="post">
-	<h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2>
-	<div class="meta">
-		<time class="date" datetime={post.data.pubDate.toISOString()}>
-			{dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")}
-		</time>
-		<ul class="tag">
-			<li><a href="#">tag1</a></li>
-			<li><a href="#">tag2</a></li>
-		</ul>
-	</div>
-	<p>{post.data.description}</p>
-	<a href={`/blog/${post.slug}`}>Read More</a>
-</article>
+<a href={`/blog/${post.slug}`}>
+	<article>
+		<div>
+			<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
+			<span>•</span>
+			<span>{remarkPluginFrontmatter.minutesRead}</span>
+		</div>
+		<h2>{post.data.title}</h2>
+		<p>{post.data.description}</p>
+	</article>
+</a>