init post

src/components/Post.astro

@@ -0,0 +1,29 @@
+---
+import type { CollectionEntry } from "astro:content";
+interface Props {
+    post: CollectionEntry<"blog">;
+}
+const { post } = Astro.props;
+---
+
+<li id="post-container">
+    <h3>
+        <a href={`/blog/${post.slug}`}>
+            {post.data.title}
+        </a>
+    </h3>
+
+    <h4>
+        {post.data.summary}
+    </h4>
+</li>
+
+<style>
+    #post-container {
+        background-color: white;
+        display: grid;
+        grid-template-rows: auto auto;
+
+        padding: 1rem;
+    }
+</style>

src/components/PostList.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from "astro:content";
+import Post from "./Post.astro";
 
 // const blogEntries = (await getCollection("blog")).filter((data) => {
 //     const draft = (() => {
@@ -39,14 +40,19 @@ const blogEntries = (await getCollection("blog"))
     });
 ---
 
-<h1>Post List</h1>
+<h1>All posts</h1>
 
-<ul>
+<ul class="flex flex-col gap-3">
     {
-        blogEntries.map((item) => (
-            <li>
-                <a href={`/blog/${item.slug}`}>{item.slug}</a>
-            </li>
-        ))
+        blogEntries.map((item) => {
+            // console.log(item);
+            return <Post post={item} />;
+        })
     }
 </ul>
+
+<style>
+    h1 {
+        padding-bottom: 2rem;
+    }
+</style>

src/layouts/Base.astro

@@ -64,14 +64,21 @@ import NavBar from "../components/NavBar.astro";
     padding-bottom: 0.5rem;
   }
 
+  h3 {
+    font-weight: 800;
+    font-size: 1.2em;
+  }
+
   h1:hover,
-  h2:hover {
+  h2:hover,
+  h3:hover {
     text-decoration: underline;
   }
 
   a:hover {
     text-decoration: underline;
   }
+
 </style>
 
 <script is:inline>