feat: index page

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>

1 files changed, 81 insertions, 0 deletions

diff --git a/src/components/templates/SimplePostList.astro b/src/components/templates/SimplePostList.astro
new file mode 100644
index 0000000..0ec33e3
--- /dev/null
+++ b/src/components/templates/SimplePostList.astro
@@ -0,0 +1,81 @@
+---
+import Date from "@components/organisms/Date.astro";
+import KeywordsList from "@components/organisms/KeywordsList.astro";
+import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
+import type { Original } from "@lib/collection/schemas";
+import type { z } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+
+interface Props {
+  posts: (CollectionEntry<"blog"> & { data: z.infer<typeof Original> })[];
+}
+
+const { posts } = Astro.props;
+---
+<ol>
+  {
+    await Promise.all(posts.map(async (post) => {
+      const { id, data } = post;
+      const { title, description, lang, keywords } = data;
+      const { name, email, entity } = await getFirstUserID(post);
+      const display = name ?? email ?? entity;
+      return (
+      <li>
+        <article>
+          <h3><a href={`/blog/read/${id}`}>{title}</a></h3>
+          {
+            description &&
+          description.split("\n\n").map((paragraph) => (
+              <p class="small">{paragraph}</p>
+            ))
+          }
+
+          <footer class="small">
+            <Date
+              date={getLastUpdate(post)}
+              locales={lang}
+              options={{
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              }}
+            />{display}
+            <KeywordsList {keywords} />
+          </footer>
+        </article>
+      </li>
+    );
+    }))
+  }
+</ol>
+
+<style>
+  ol {
+    margin-inline-start: calc(var(--size-7) * 1em);
+    margin-block: calc(var(--size-7) * 1em);
+    & > li {
+      margin-block-start: calc(var(--size-2) * 1em);
+      & > article {
+        padding-inline-end: calc(var(--size-9) * 1em);
+
+        & > p:not(:first-of-type) {
+          margin-block-start: 1.5em;
+        }
+
+        & > footer {
+          display: flex;
+          flex-direction: column;
+          gap: calc(var(--size-1) * 1em);
+        }
+      }
+    }
+  }
+
+  @media (width >= 40rem) {
+    ol > li > article > footer {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+</style>