Initial commit

src/pages/blog/index.astro

@@ -0,0 +1,99 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+
+const posts = (await getCollection("blog")).sort(
+    (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) =>
+        b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Layout title="System Logs" showScroll={true}>
+    <main>
+        <section>
+            <ul>
+                {
+                    posts.map((post: any) => (
+                        <li>
+                            <a href={`/blog/${post.slug}/`}>
+                                <span class="date">
+                                    [
+                                    {post.data.pubDate
+                                        .toISOString()
+                                        .slice(0, 10)}
+                                    ]
+                                </span>
+                                <span class="title">{post.data.title}</span>
+                                <span class="desc">
+                                    // {post.data.description}
+                                </span>
+                            </a>
+                        </li>
+                    ))
+                }
+            </ul>
+        </section>
+
+        <footer>
+            <p>END OF STREAM</p>
+        </footer>
+    </main>
+</Layout>
+
+<style>
+    main {
+        width: 960px;
+        max-width: calc(100% - 2em);
+        margin: 0 auto;
+        padding: 2em 0;
+    }
+
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    li {
+        margin-bottom: 1rem;
+        border-left: 2px solid transparent;
+        transition: border-left-color 0.2s;
+    }
+
+    li:hover {
+        border-left-color: var(--text-color);
+    }
+
+    a {
+        display: block;
+        text-decoration: none;
+        padding: 5px 10px;
+        color: var(--text-color);
+        font-family: var(--font-mono);
+    }
+
+    .date {
+        color: rgba(255, 103, 0, 0.6);
+        margin-right: 1rem;
+    }
+
+    .title {
+        font-weight: bold;
+        margin-right: 1rem;
+    }
+
+    .desc {
+        color: rgba(255, 103, 0, 0.4);
+        font-style: italic;
+    }
+
+    a:hover .title {
+        text-decoration: underline;
+    }
+
+    footer {
+        margin-top: 4rem;
+        text-align: center;
+        opacity: 0.3;
+        font-size: 0.8rem;
+    }
+</style>