feat: allow a number alongside the keyword

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

2 files changed, 39 insertions, 18 deletions

diff --git a/src/components/organisms/KeywordsList.astro b/src/components/organisms/KeywordsList.astro
index be9a38c..5519865 100644
--- a/src/components/organisms/KeywordsList.astro
+++ b/src/components/organisms/KeywordsList.astro
@@ -1,6 +1,6 @@
 ---
 interface Props {
-  keywords: string[];
+  keywords: (string | [string, number])[];
 }
 
 const { keywords } = Astro.props;
@@ -8,11 +8,17 @@ const { keywords } = Astro.props;
 
 <p role="list">
   {
-    keywords.map((x, i) => (
-      <>{i > 0 && " "}<span role="listitem"><a href={`/blog/keywords/${x}`}>#<b
-              itemprop="keywords"
-            >{x}</b></a></span></>
-    ))
+    keywords.map((x, i) => {
+      let keyword = typeof x === "string" ? x : x[0];
+      let n = typeof x === "string" ? undefined : x[1];
+      return (
+      <>{i > 0 && " "}<span role="listitem">{
+            n !== undefined && <samp class="number mute">{n}</samp>
+          }{" "}<a href={`/blog/keywords/${keyword}`}>#<b itemprop="keywords">{
+              keyword
+            }</b></a></span></>
+    );
+    })
   }
 </p>
 
@@ -24,16 +30,33 @@ const { keywords } = Astro.props;
     gap: calc(var(--size-0) * 1em);
     margin-block: calc(var(--size-0) * 1em);
     margin-inline: auto;
+  }
+
+  [role="listitem"] {
+    border-radius: calc(infinity * 1px);
+    background-color: color-mix(
+      in srgb,
+      var(--color-active) 10%,
+      transparent
+    );
+    padding-inline: calc(var(--size-2) * 1em);
+    display: flex;
+    align-items: center;
+    gap: calc(var(--size-4) * 1ch);
 
-    & > * > * {
-      border-radius: calc(infinity * 1px);
-      background-color: color-mix(
-        in srgb,
-        var(--color-active) 10%,
-        transparent
-      );
+    & * {
       color: var(--color-active);
-      padding-inline: calc(var(--size-2) * 1em);
     }
   }
+
+  .number {
+    display: inline-block;
+    min-width: 1rem;
+    max-width: 1rem;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-active);
+    color: var(--color-background) !important;
+    text-align: center;
+    margin-block: calc(var(--size-0) * 1em);
+  }
 </style>
diff --git a/src/pages/blog/keywords/index.astro b/src/pages/blog/keywords/index.astro
index 8830af3..1b3b62c 100644
--- a/src/pages/blog/keywords/index.astro
+++ b/src/pages/blog/keywords/index.astro
@@ -20,12 +20,10 @@ for (const { data } of blogs) {
   }
 }
 
-let keywords = Array.from(map.entries()).sort(([, a], [, b]) => b - a).map((
-  [x],
-) => x);
+let keywords = Array.from(map.entries()).sort(([, a], [, b]) => b - a);
 ---
 
-<Base {title} {description} {keywords}>
+<Base {title} {description} keywords={keywords.map(([x]) => x)}>
   <main
     itemprop="mainContentOfPage"
     itemscope