diff options
| -rw-r--r-- | src/components/organisms/KeywordsList.astro | 11 | ||||
| -rw-r--r-- | src/pages/blog/keywords/index.astro | 47 |
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> |