From bd27bbb073465be77e4e752e6bf9bc4cf5e84c60 Mon Sep 17 00:00:00 2001
From: João Augusto Costa Branco Marado Torres <torres.dev@disroot.org>
Date: Sun, 27 Jul 2025 12:34:14 -0300
Subject: feat: styling microblogs
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/MicroBlog.astro   | 66 +++++++++++++++++++++++-------
 src/components/templates/PrevNextNav.astro | 13 +++---
 2 files changed, 60 insertions(+), 19 deletions(-)

(limited to 'src/components/templates')

diff --git a/src/components/templates/MicroBlog.astro b/src/components/templates/MicroBlog.astro
index 88321dc..713e7eb 100644
--- a/src/components/templates/MicroBlog.astro
+++ b/src/components/templates/MicroBlog.astro
@@ -1,12 +1,17 @@
 ---
 import Date from "@components/organisms/Date.astro";
+import RelativeTime from "@components/organisms/RelativeTime.astro";
 import KeywordsList from "@components/organisms/KeywordsList.astro";
 import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
-import type { Micro, MicroEntry } from "@lib/collection/schemas";
+import type { MicroEntry } from "@lib/collection/schemas";
+import { getRelativeTimeUnit } from "@utils/datetime";
 
-interface Props extends MicroEntry {}
+interface Props {
+  micro: MicroEntry;
+  seeAll?: boolean;
+}
 
-const micro = Astro.props;
+const { micro, seeAll = false } = Astro.props;
 const { id, data, rendered } = micro;
 const { title, lang, keywords } = data;
 const date = getLastUpdate(micro);
@@ -20,6 +25,7 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
   itemprop="blogPost"
   itemscope
   itemtype="https://schema.org/BlogPosting"
+  style={`--rows: ${seeAll ? 3 : 2};`}
 >
   <header>
     <h3 class="title">
@@ -36,35 +42,49 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
         itemscope
         itemtype="https://schema.org/Person"
       ><span itemprop="alternateName">{first} {last}</span></span>
-      <span class="small">· <Date
+      <span class="small"
+      >· <Date
           {date}
           locales={lang}
           options={{ month: "short", day: "numeric" }}
           itemprop="dateModified"
-        /></span>
+        /> (<RelativeTime
+          {date}
+          locales={lang}
+          options={{
+            style: "short",
+            numeric: "auto",
+          }}
+        />)</span>
     </div>
+    <span class="lang mute">{lang}</span>
   </header>
   <div class="content small">
     <div {lang} itemprop="articleBody text">
       <Fragment set:html={rendered?.html} />
     </div>
     <footer>
+      <a href={`/blog/read/${id}`}>Ver mais...</a>
       <div class="keywords"><KeywordsList {keywords} /></div>
     </footer>
   </div>
-  <aside>
-    <small><a href="/blog/micro/1">Ver todos os microposts</a></small>
-  </aside>
+  {
+    seeAll && (
+      <aside>
+        <small><a href="/blog/micro/1">Ver todos os microposts</a></small>
+      </aside>
+    )
+  }
 </article>
 
 <style>
   article {
-    border-radius: calc(var(--size-1) * 1em);
+    --rows: 2 border-radius: calc(var(--size-1) * 1em);
     box-shadow: 0 0 calc(var(--size-1) * 1em) var(--color-light);
     padding: calc(var(--size-4) * 1em);
     display: grid;
-    grid-template-rows: repeat(3, auto);
-    grid-template-columns: calc(var(--size-9) * 1em) auto;
+    grid-template-rows: repeat(var(--rows), auto);
+    grid-template-columns: calc(var(--size-9) * 1em) repeat(2, auto);
     gap: calc(var(--size-1) * 1em);
 
     & > header {
@@ -73,7 +93,7 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
 
     & > aside {
       grid-row: 3 / 4;
-      grid-column: 1 / 3;
+      grid-column: 1 / 4;
       border-block-start: 1px solid #e7e7e7;
       padding-block-start: calc(var(--size-1) * 1em);
     }
@@ -93,7 +113,8 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
       color: #fff;
       font-weight: 950;
       font-size: smaller;
-      border-radius: calc(infinity * 1px);
+      /* border-radius: calc(infinity * 1px); */
+      border-radius: calc(var(--size-3) * 1em);
       text-align: center;
       text-transform: uppercase;
     }
@@ -102,15 +123,32 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
   .title {
     display: none;
   }
+
+  .lang {
+    grid-row: 1/2;
+    grid-column: 3 / 4;
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+  }
+
   .content {
     grid-row: 2/3;
-    grid-column: 2 / 3;
+    grid-column: 2 / 4;
     & > [lang] > :global(*:first-child) {
       margin-block-start: 0;
     }
     & > [lang] > :global(*:last-child) {
       margin-block-end: 0;
     }
+
+    & > footer {
+      display: flex;
+      gap: 1em;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: baseline;
+    }
   }
 
   .keywords {
diff --git a/src/components/templates/PrevNextNav.astro b/src/components/templates/PrevNextNav.astro
index fe8bd8d..f60a4cd 100644
--- a/src/components/templates/PrevNextNav.astro
+++ b/src/components/templates/PrevNextNav.astro
@@ -1,21 +1,23 @@
 ---
 interface Props {
+  first?: string | URL;
   previous?: string | URL;
   next?: string | URL;
+  last?: string | URL;
   label?: string;
 }
 
-const { next, previous, label } = Astro.props;
+const { first, next, previous, last, label } = Astro.props;
 ---
 
 {
-  (next || previous) && (
+  (first || next || previous || last) && (
     <nav>
+      {first && <p><a href={Astro.props.first}>Primeiro</a></p>}
       {
         previous && (
           <p>
-            &lt; <a rel="prev" href={`/blog/${Astro.props.previous}`}
-            >Anterior</a>
+            &lt; <a rel="prev" href={Astro.props.previous}>Anterior</a>
           </p>
         )
       }
@@ -23,10 +25,11 @@ const { next, previous, label } = Astro.props;
       {
         next && (
           <p>
-            <a rel="next" href={`/blog/${Astro.props.next}`}>Próximo</a> &gt;
+            <a rel="next" href={Astro.props.next}>Próximo</a> &gt;
           </p>
         )
       }
+      {last && <p><a href={Astro.props.last}>Último</a></p>}
     </nav>
   )
 }
-- 
cgit v1.2.3