feat: allow a number alongside the keyword

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

1 files changed, 37 insertions, 14 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>