Styled everything and build the skeleton

cyperpunk.de/src/pages/index.astro

@@ -2,11 +2,20 @@
 import Base from "../layouts/Base.astro";
 import Topbar from "../components/Topbar.astro";
 import Sidebar from "../components/Sidebar.astro";
+import { getCollection } from 'astro:content';
+
+const posts = await getCollection('posts', ({ data }) => data.published === true);
+posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
 <Base title="home">
   <Topbar slot="topbar" />
   <Sidebar slot="sidebar" />
 
-  <h1>hello world</h1>
+  {posts.map((post) => (
+    <div class="p-4 mb-3 rounded-lg bg-ctp-surface">
+      <a href={`/posts/${post.id}`} class="text-ctp-accent">{post.data.title}</a>
+      <p class="text-ctp-subtext text-xs">{post.data.date.toDateString()}</p>
+    </div>
+  ))}
 </Base>