feat: keywords

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

2 files changed, 42 insertions, 16 deletions

diff --git a/src/components/organisms/KeywordsList.astro b/src/components/organisms/KeywordsList.astro
index 44c5641..3a1cd20 100644
--- a/src/components/organisms/KeywordsList.astro
+++ b/src/components/organisms/KeywordsList.astro
@@ -6,12 +6,12 @@ interface Props {
 const { keywords } = Astro.props;
 ---
 
-<p>
+<p role="list">
   {
     keywords.map((x) => (
-      <span><a href={`/blog/keywords/${x}`}>#<b itemprop="keywords">{
-            x
-          }</b></a></span>
+      <span role="listitem"><a href={`/blog/keywords/${x}`}>#<b
+            itemprop="keywords"
+          >{x}</b></a></span>
     ))
   }
 </p>
@@ -19,10 +19,11 @@ const { keywords } = Astro.props;
 <style>
   p {
     display: flex;
-    flex-direction: row-reverse;
+    justify-content: flex-end;
     flex-wrap: wrap;
     gap: calc(var(--size-0) * 1em);
     margin-block: calc(var(--size-0) * 1em);
+    margin-inline: auto;
 
     & > * > * {
       border-radius: calc(infinity * 1px);
diff --git a/src/pages/blog/keywords/index.astro b/src/pages/blog/keywords/index.astro
index 255fbf4..8830af3 100644
--- a/src/pages/blog/keywords/index.astro
+++ b/src/pages/blog/keywords/index.astro
@@ -1,21 +1,46 @@
 ---
 import { getCollection } from "astro:content";
 import Base from "@layouts/Base.astro";
+import KeywordsList from "@components/organisms/KeywordsList.astro";
 
-const title = "Keywords";
-const description = "Keywords";
+const title = "Palavras-Chave";
+const description = "Palavras-Chave";
 
 const blogs = await getCollection("blog");
-let keywords = [
-  ...new Set([
-    ...blogs.flatMap(({ data }) => [...(data.keywords ?? [])]),
-  ]),
-];
+
+const map: Map<string, number> = new Map();
+for (const { data } of blogs) {
+  if (!("keywords" in data)) {
+    continue;
+  }
+
+  for (const k of data.keywords) {
+    const n = map.get(k) ?? 0;
+    map.set(k, n + 1);
+  }
+}
+
+let keywords = Array.from(map.entries()).sort(([, a], [, b]) => b - a).map((
+  [x],
+) => x);
 ---
 
 <Base {title} {description} {keywords}>
-  <h1>Keywords</h1>
-  <ul>
-    {keywords.map((k) => <li><a href={`/blog/keywords/${k}`}>{k}</a></li>)}
-  </ul>
+  <main
+    itemprop="mainContentOfPage"
+    itemscope
+    itemtype="https://schema.org/WebPageElement"
+  >
+    <h2 itemprop="name description">Palavras-Chave</h2>
+    <div>
+      <KeywordsList {keywords} />
+    </div>
+  </main>
 </Base>
+
+<style>
+  div {
+    display: flex;
+    margin-inline: auto;
+  }
+</style>