diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/organisms/KeywordsList.astro | 51 | ||||
| -rw-r--r-- | src/pages/blog/keywords/index.astro | 6 |
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 |