Commit 8e5c0d1

@@ -0,0 +1,29 @@
+#import "/src/contents/_lib/lib.typ" as kp
+#show: kp.post-template.with(toc: false)
+
+Kerplunk is a static blog site generator built with
+#link("https://docs.astro.build")[Astro] and #link("https://typst.app")[Typst].
+
+= Installation
+
+To get started with Kerplunk, follow these steps:
+
++ Clone the repository:
+  ```sh
+  git clone https://git.trin.one/HPCesia/kerplunk.git --recurisve
+  cd kerplunk
+  ```
++ Install dependencies:
+  ```sh
+  deno install
+  ```
++ Configure your site by editing the `src/config.ts` file
+  to set your site's metadata and preferences.
++ Start the development server:
+  ```sh
+  deno run dev
+  ```
++ Build for production:
+  ```sh
+  deno run build
+  ```

@@ -1,6 +1,22 @@
 ---
+import { getCollection } from "astro:content";
+
 import BaseLayout from "@/layouts/BaseLayout.astro";
+import PostsList from "@/components/widgets/PostsList.astro";
+import "@/styles/article/index.scss";
+
+import Article from "@/contents/home.typ";
+
+const posts = await getCollection("posts");
+const sortedPosts = posts.sort(
+  (a, b) => Temporal.ZonedDateTime.compare(b.data.date, a.data.date),
+);
 ---
-<BaseLayout title="Astro">
-  <h1>Astro</h1>
+<BaseLayout title="Kerplunk">
+  <article>
+    <h1>Kerplunk</h1>
+    <Article />
+    <h2 id="recent-posts">Recent Posts</h2>
+    <PostsList posts={sortedPosts.slice(0, 4)} />
+  </article>
 </BaseLayout>