aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/KodairaNews.astro257
1 files changed, 242 insertions, 15 deletions
diff --git a/src/components/KodairaNews.astro b/src/components/KodairaNews.astro
index ffe1b89..a8a0d5c 100644
--- a/src/components/KodairaNews.astro
+++ b/src/components/KodairaNews.astro
@@ -21,6 +21,18 @@ const CATS: { id: CatId | "all"; label: string }[] = [
const X = (id: string) => `https://twitter.com/kodaira_tokyo/status/${id}`;
+const X_ACCOUNT = "https://twitter.com/kodaira_tokyo";
+const X_LOGO =
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>';
+
+const LABEL: Record<CatId, string> = {
+ status: "障害・復旧",
+ procedure: "手続き・申請",
+ meeting: "審議会・議会",
+ event: "イベント・募集",
+ other: "その他",
+};
+
const posts: Post[] = [
{
date: "10月16日",
@@ -272,11 +284,20 @@ const countOf = (id: CatId | "all") =>
---
<div class="kd-news" data-kodaira-news>
+ <header class="kd-news-head">
+ <span class="kd-news-x" set:html={X_LOGO}></span>
+ <span class="kd-news-head-text">
+ <strong>小平市公式X</strong>
+ <span class="kd-news-handle">@kodaira_tokyo</span>
+ </span>
+ <a class="kd-news-follow" href={X_ACCOUNT} rel="noopener">Xで見る</a>
+ </header>
+
<fieldset class="kd-news-filter">
<legend class="kd-news-legend">分類で絞る</legend>
{
CATS.map((c) => (
- <label class="kd-news-chip">
+ <label class={`kd-news-chip kd-news-chip--${c.id}`}>
<input type="radio" name="kd-news-cat" value={c.id} checked={c.id === "all"} />
<span>
{c.label}
@@ -293,15 +314,20 @@ const countOf = (id: CatId | "all") =>
<ul class="kd-news-list">
{
posts.map((p) => (
- <li data-cat={p.cat}>
- {p.date}{" "}
- {p.links.map((l, i) => (
- <>
- {i > 0 && "／"}
- <a href={l.url}>{l.text}</a>
- </>
- ))}
- {p.note && `（${p.note}）`}
+ <li data-cat={p.cat} class={`kd-news-item kd-news-item--${p.cat}`}>
+ <span class={`kd-news-badge kd-news-badge--${p.cat}`}>{LABEL[p.cat]}</span>
+ <span class="kd-news-date">{p.date}</span>
+ <span class="kd-news-body">
+ {p.links.map((l, i) => (
+ <>
+ {i > 0 && "／"}
+ <a href={l.url} rel="noopener">
+ {l.text}
+ </a>
+ </>
+ ))}
+ {p.note && `（${p.note}）`}
+ </span>
</li>
))
}
@@ -312,10 +338,65 @@ const countOf = (id: CatId | "all") =>
</div>
<style>
+ .kd-news-head {
+ display: flex;
+ align-items: center;
+ gap: 0.65rem;
+ margin: 0 0 0.7rem;
+ padding: 0.6rem 0.85rem;
+ border: 1px solid var(--sl-color-gray-5);
+ border-radius: 10px;
+ background: var(--sl-color-bg-sidebar);
+ }
+ .kd-news-x {
+ display: inline-flex;
+ flex: none;
+ align-items: center;
+ justify-content: center;
+ width: 1.9rem;
+ height: 1.9rem;
+ border-radius: 50%;
+ background: var(--sl-color-text);
+ color: var(--sl-color-bg);
+ }
+ .kd-news-x :global(svg) {
+ width: 1.05rem;
+ height: 1.05rem;
+ display: block;
+ }
+ .kd-news-head-text {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ line-height: 1.25;
+ }
+ .kd-news-head-text strong {
+ font-size: 0.95rem;
+ }
+ .kd-news-handle {
+ font-size: 0.78rem;
+ opacity: 0.7;
+ }
+ .kd-news-follow {
+ flex: none;
+ margin-left: auto;
+ padding: 0.3rem 0.75rem;
+ border: 1px solid var(--sl-color-gray-5);
+ border-radius: 999px;
+ color: var(--sl-color-text-accent);
+ font-size: 0.82rem;
+ font-weight: 700;
+ text-decoration: none;
+ white-space: nowrap;
+ }
+ .kd-news-follow:hover {
+ background: var(--sl-color-accent-low);
+ }
+
.kd-news-filter {
display: flex;
flex-wrap: wrap;
- gap: 0.4rem 1rem;
+ gap: 0.4rem;
align-items: center;
margin: 0 0 0.5rem;
padding: 0.5rem 0.8rem;
@@ -328,23 +409,90 @@ const countOf = (id: CatId | "all") =>
opacity: 0.7;
}
.kd-news-chip {
+ position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
- font-size: 0.85rem;
+ padding: 0.18rem 0.65rem;
+ border: 1px solid var(--sl-color-gray-5);
+ border-radius: 999px;
+ font-size: 0.82rem;
cursor: pointer;
}
.kd-news-chip input {
+ position: absolute;
+ width: 1px;
+ height: 1px;
margin: 0;
+ opacity: 0;
}
.kd-news-chip:has(input:checked) {
font-weight: 700;
}
+ .kd-news-chip:has(input:focus-visible) {
+ outline: 2px solid var(--sl-color-accent);
+ outline-offset: 2px;
+ }
.kd-news-count {
- margin-left: 0.25rem;
+ margin-left: 0.15rem;
font-size: 0.75em;
opacity: 0.7;
}
+ .kd-news-chip--all:has(input:checked) {
+ color: var(--sl-color-text-accent);
+ border-color: currentColor;
+ background: var(--sl-color-accent-low);
+ }
+ .kd-news-chip--status:has(input:checked) {
+ color: #b3261e;
+ border-color: #f2b8b5;
+ background: #fce8e6;
+ }
+ .kd-news-chip--procedure:has(input:checked) {
+ color: #0b57d0;
+ border-color: #a8c7fa;
+ background: #e8f0fe;
+ }
+ .kd-news-chip--meeting:has(input:checked) {
+ color: #6a1b9a;
+ border-color: #ce93d8;
+ background: #f3e5f5;
+ }
+ .kd-news-chip--event:has(input:checked) {
+ color: #1b5e20;
+ border-color: #a5d6a7;
+ background: #e8f5e9;
+ }
+ .kd-news-chip--other:has(input:checked) {
+ color: #455a64;
+ border-color: #b0bec5;
+ background: #eceff1;
+ }
+ :global([data-theme="dark"]) .kd-news-chip--status:has(input:checked) {
+ color: #ffb4ab;
+ border-color: rgba(255, 180, 171, 0.45);
+ background: rgba(255, 180, 171, 0.14);
+ }
+ :global([data-theme="dark"]) .kd-news-chip--procedure:has(input:checked) {
+ color: #a8c7fa;
+ border-color: rgba(168, 199, 250, 0.45);
+ background: rgba(168, 199, 250, 0.14);
+ }
+ :global([data-theme="dark"]) .kd-news-chip--meeting:has(input:checked) {
+ color: #ce93d8;
+ border-color: rgba(206, 147, 216, 0.45);
+ background: rgba(206, 147, 216, 0.16);
+ }
+ :global([data-theme="dark"]) .kd-news-chip--event:has(input:checked) {
+ color: #a5d6a7;
+ border-color: rgba(165, 214, 167, 0.45);
+ background: rgba(165, 214, 167, 0.14);
+ }
+ :global([data-theme="dark"]) .kd-news-chip--other:has(input:checked) {
+ color: #cfd8dc;
+ border-color: rgba(207, 216, 220, 0.4);
+ background: rgba(207, 216, 220, 0.12);
+ }
.kd-news-hint {
margin: 0 0 0.4rem;
font-size: 0.8rem;
@@ -361,18 +509,97 @@ const countOf = (id: CatId | "all") =>
}
.kd-news-list {
margin: 0;
- padding-inline-start: 1.3rem;
+ padding: 0;
+ list-style: none;
}
.kd-news-list li {
- margin-bottom: 0.35rem;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ gap: 0.45rem;
+ margin-bottom: 0.5rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px dashed var(--sl-color-gray-6, var(--sl-color-gray-5));
line-height: 1.6;
}
.kd-news-list li:last-child {
margin-bottom: 0;
+ padding-bottom: 0;
+ border-bottom: none;
}
.kd-news-list li.is-hidden {
display: none;
}
+ .kd-news-badge {
+ flex: none;
+ padding: 0.1rem 0.45rem;
+ border: 1px solid transparent;
+ border-radius: 999px;
+ font-size: 0.68rem;
+ font-weight: 700;
+ line-height: 1.5;
+ white-space: nowrap;
+ }
+ .kd-news-date {
+ flex: none;
+ font-size: 0.78rem;
+ opacity: 0.75;
+ font-variant-numeric: tabular-nums;
+ }
+ .kd-news-body {
+ flex: 1 1 12rem;
+ min-width: 0;
+ }
+ .kd-news-badge--status {
+ color: #b3261e;
+ background: #fce8e6;
+ border-color: #f2b8b5;
+ }
+ .kd-news-badge--procedure {
+ color: #0b57d0;
+ background: #e8f0fe;
+ border-color: #a8c7fa;
+ }
+ .kd-news-badge--meeting {
+ color: #6a1b9a;
+ background: #f3e5f5;
+ border-color: #ce93d8;
+ }
+ .kd-news-badge--event {
+ color: #1b5e20;
+ background: #e8f5e9;
+ border-color: #a5d6a7;
+ }
+ .kd-news-badge--other {
+ color: #455a64;
+ background: #eceff1;
+ border-color: #b0bec5;
+ }
+ :global([data-theme="dark"]) .kd-news-badge--status {
+ color: #ffb4ab;
+ background: rgba(255, 180, 171, 0.14);
+ border-color: rgba(255, 180, 171, 0.4);
+ }
+ :global([data-theme="dark"]) .kd-news-badge--procedure {
+ color: #a8c7fa;
+ background: rgba(168, 199, 250, 0.14);
+ border-color: rgba(168, 199, 250, 0.4);
+ }
+ :global([data-theme="dark"]) .kd-news-badge--meeting {
+ color: #ce93d8;
+ background: rgba(206, 147, 216, 0.16);
+ border-color: rgba(206, 147, 216, 0.4);
+ }
+ :global([data-theme="dark"]) .kd-news-badge--event {
+ color: #a5d6a7;
+ background: rgba(165, 214, 167, 0.14);
+ border-color: rgba(165, 214, 167, 0.4);
+ }
+ :global([data-theme="dark"]) .kd-news-badge--other {
+ color: #cfd8dc;
+ background: rgba(207, 216, 220, 0.12);
+ border-color: rgba(207, 216, 220, 0.35);
+ }
.kd-news-none {
margin: 0.5rem 0 0;
font-size: 0.85rem;
generated by cgit v1.3.1 (git 2.54.0) at 2026-10-20 06:32:25 +0000