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/organisms/KeywordsList.astro | 11 +++++++++--
 src/components/organisms/RelativeTime.astro | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 src/components/organisms/RelativeTime.astro

(limited to 'src/components/organisms')

diff --git a/src/components/organisms/KeywordsList.astro b/src/components/organisms/KeywordsList.astro
index d3b9e7f..44c5641 100644
--- a/src/components/organisms/KeywordsList.astro
+++ b/src/components/organisms/KeywordsList.astro
@@ -7,7 +7,13 @@ const { keywords } = Astro.props;
 ---
 
 <p>
-  {keywords.map((x) => <span>#<b itemprop="keywords">{x}</b></span>)}
+  {
+    keywords.map((x) => (
+      <span><a href={`/blog/keywords/${x}`}>#<b itemprop="keywords">{
+            x
+          }</b></a></span>
+    ))
+  }
 </p>
 
 <style>
@@ -16,8 +22,9 @@ const { keywords } = Astro.props;
     flex-direction: row-reverse;
     flex-wrap: wrap;
     gap: calc(var(--size-0) * 1em);
+    margin-block: calc(var(--size-0) * 1em);
 
-    & > * {
+    & > * > * {
       border-radius: calc(infinity * 1px);
       background-color: color-mix(
         in srgb,
diff --git a/src/components/organisms/RelativeTime.astro b/src/components/organisms/RelativeTime.astro
new file mode 100644
index 0000000..13d531d
--- /dev/null
+++ b/src/components/organisms/RelativeTime.astro
@@ -0,0 +1,19 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { getRelativeTimeUnit } from "@utils/datetime";
+
+interface Props {
+  date: Date;
+  locales: Intl.LocalesArgument;
+  options: Intl.RelativeTimeFormatOptions;
+  itemprop: HTMLAttributes<"time">["itemprop"];
+}
+
+const { date, locales, options } = Astro.props;
+
+const format = new Intl.RelativeTimeFormat(locales, options).format(
+  ...getRelativeTimeUnit(date),
+);
+---
+
+{format}
-- 
cgit v1.2.3