2 files changed, 28 insertions, 2 deletions
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}