From c530d30a74bb521b1c22f0e2a468d9b69c6a2e8e Mon Sep 17 00:00:00 2001
From: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
Date: Mon, 21 Jul 2025 00:37:34 -0300
Subject: feat: blog listing style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
---
 src/components/templates/SimplePostList.astro | 91 +++++++++++++++++++--------
 1 file changed, 64 insertions(+), 27 deletions(-)

(limited to 'src/components/templates/SimplePostList.astro')

diff --git a/src/components/templates/SimplePostList.astro b/src/components/templates/SimplePostList.astro
index 164b32b..6d05a1f 100644
--- a/src/components/templates/SimplePostList.astro
+++ b/src/components/templates/SimplePostList.astro
@@ -1,25 +1,45 @@
 ---
 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 {
+  getFirstUserID,
+  getLastUpdate,
+  getTranslationOriginal,
+  isMicro,
+  isTranslation,
+} from "@lib/collection/helpers";
 import type { CollectionEntry } from "astro:content";
 
 interface Props {
-  posts: (CollectionEntry<"blog"> & { data: z.infer<typeof Original> })[];
+  posts: CollectionEntry<"blog">[];
+  small?: boolean;
+  dateOptions?: Intl.DateTimeFormatOptions;
 }
 
-const { posts } = Astro.props;
+const {
+  posts,
+  small = false,
+  dateOptions = { year: "numeric", month: "long", day: "numeric" },
+} = Astro.props;
 ---
-<ol>
+<ol class:list={{ "remove-nums": !small }}>
   {
-    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 (
+    await Promise.all(
+      posts.map(
+        async (post) => {
+          const { id, data } = post;
+          const { title, lang } = data;
+          const description = isMicro(post)
+            ? post.rendered?.html
+            : ("description" in data ? data.description : undefined);
+          const keywords = isTranslation(post)
+            ? await getTranslationOriginal(post).then((x) =>
+              x?.data?.keywords
+            )
+            : ("keywords" in data ? data.keywords : undefined);
+          const { name, email, entity } = await getFirstUserID(post);
+          const display = name ?? email ?? entity;
+          return (
       <li>
         <article
           itemprop="blogPost"
@@ -29,36 +49,39 @@ const { posts } = Astro.props;
           <h3>
             <a href={`/blog/read/${id}`} itemprop="headline name">{title}</a>
           </h3>
-          <div itemprop="abstract">
-            {
-              description &&
-                description.split("\n\n").map((paragraph) => (
-                <p class="small">{paragraph}</p>
-              ))
-            }
-          </div>
+          {
+            description && (
+              <div itemprop="abstract">
+                {
+                  isMicro(post)
+                    ? <Fragment set:html={description} />
+                  : description.split("\n\n").map((
+                    paragraph,
+                  ) => <p class:list={{ small }}>{paragraph}</p>)
+                }
+              </div>
+            )
+          }
 
           <footer class="small">
             <Date
               date={getLastUpdate(post)}
               locales={lang}
-              options={{
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              }}
+              options={dateOptions}
               itemprop="dateModified"
             /><span
               itemprop="author"
               itemscope
               itemtype="https://schema.org/Person"
             ><span itemprop="alternateName">{display}</span></span>
-            <KeywordsList {keywords} />
+            {Array.isArray(keywords) && <KeywordsList {keywords} />}
           </footer>
         </article>
       </li>
     );
-    }))
+        },
+      ),
+    )
   }
 </ol>
 
@@ -82,6 +105,20 @@ const { posts } = Astro.props;
         }
       }
     }
+
+    & > li:not(:first-of-type) {
+      border-block-start: 1px solid var(--color-dark);
+    }
+  }
+
+  ol.remove-nums {
+    margin-inline-start: 0;
+    & > li {
+      margin-inline-end: calc(var(--size-7) * 1em);
+      & > article {
+        padding-inline-end: 0;
+      }
+    }
   }
 
   @media (width >= 40rem) {
-- 
cgit v1.2.3