diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Updates.astro | 20 |
1 files changed, 19 insertions, 1 deletions
diff --git a/src/components/Updates.astro b/src/components/Updates.astro index 47278fe..9b6862d 100644 --- a/src/components/Updates.astro +++ b/src/components/Updates.astro @@ -1,7 +1,7 @@ --- import updates from "../data/updates.json"; -type Update = { date: string; title: string; url: string; group: string }; +type Update = { date: string; title: string; url: string; group: string; kind: "new" | "update" }; const initial = Number(Astro.props.limit ?? 5); const step = Number(Astro.props.step ?? 10); @@ -27,6 +27,9 @@ function toJapaneseDate(iso: string): string { {items.map((u, index) => ( <li hidden={index >= initial}> <time datetime={u.date}>{toJapaneseDate(u.date)}</time> + <span class:list={["updates-kind", u.kind === "update" ? "is-update" : "is-new"]}> + {u.kind === "update" ? "更新" : "新規"} + </span> {u.group && <span class="updates-group">{u.group}</span>} <a href={u.url}>{u.title}</a> </li> @@ -104,6 +107,21 @@ function toJapaneseDate(iso: string): string { font-variant-numeric: tabular-nums; flex-shrink: 0; } + .updates-kind { + font-size: 0.75rem; + border-radius: 3px; + padding: 0.05rem 0.35rem; + flex-shrink: 0; + } + /* 新規公開は目立たせ、更新は控えめにする */ + .updates-kind.is-new { + color: var(--sl-color-accent-high); + background: var(--sl-color-accent-low); + } + .updates-kind.is-update { + color: var(--sl-color-gray-2); + background: var(--sl-color-gray-6); + } .updates-group { font-size: 0.75rem; color: var(--sl-color-gray-2); |