path: root/src/components/KodairaNews.astro

---
// 小平市公式X（@kodaira_tokyo）の主なポスト（ホームページ停止後）。
// 分類（ラジオボタン）での絞り込みは利用者の端末で実行する。
type CatId = "status" | "procedure" | "meeting" | "event" | "other";

type Post = {
  date: string;
  cat: CatId;
  note?: string;
  links: { text: string; url: string }[];
};

const CATS: { id: CatId | "all"; label: string }[] = [
  { id: "all", label: "すべて" },
  { id: "status", label: "障害・復旧" },
  { id: "procedure", label: "手続き・申請" },
  { id: "meeting", label: "審議会・議会" },
  { id: "event", label: "イベント・募集" },
  { id: "other", label: "その他" },
];

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月20日",
    cat: "other",
    note: "市報こだいら10月20日号が発行されました（1面は小川パレットのオープン）。電子版も公開されています",
    links: [
      { text: "市報こだいら10月20日号（市のX）", url: X("2112332973588500591") },
      { text: "市報こだいら電子版", url: "https://www.catapoke.com/search/?keyword=%E5%B0%8F%E5%B9%B3%E5%B8%82" },
    ],
  },
  {
    date: "10月19日",
    cat: "other",
    note: "ふるさと納税ポータルサイト「ふるさとチョイス」が使用できないため、当面は窓口または現金書留で受け付け",
    links: [{ text: "クラウドファンディングの寄附方法の変更", url: X("2112139194940199015") }],
  },
  {
    date: "10月19日",
    cat: "status",
    note: "暫定サイトに「市からのお知らせ」「イベント情報」「電子申請一覧」「申請書ダウンロード」などのカテゴリ",
    links: [{ text: "ホームページの障害状況について", url: X("2112091386333868246") }],
  },
  {
    date: "10月19日",
    cat: "other",
    note: "市役所西通り、10月19日・20日の午後10時から午前6時まで夜間通行止め（雨天順延）",
    links: [{ text: "道路工事情報", url: X("2112015882972971208") }],
  },
  {
    date: "10月18日",
    cat: "event",
    note: "あかしあ通りと周辺道路の交通規制は午後4時30分に解除",
    links: [{ text: "市民まつりは終了しました", url: X("2111717666654507344") }],
  },
  {
    date: "10月18日",
    cat: "event",
    note: "午前9時30分から午後4時30分まで",
    links: [{ text: "小平市民まつり（本日開催）", url: X("2111593570079850757") }],
  },
  {
    date: "10月16日",
    cat: "status",
    note: "暫定サイトに「市からのお知らせ」などのカテゴリを新設",
    links: [{ text: "ホームページの障害状況について", url: X("2111004215736987651") }],
  },
  {
    date: "10月16日",
    cat: "other",
    note: "小平市医師会応急診療所（健康センター内）",
    links: [{ text: "休日・準夜応急診療（内科・小児科）", url: X("2110989835242807378") }],
  },
  {
    date: "10月16日",
    cat: "other",
    note: "10月18日（日）、鈴木歯科医院",
    links: [{ text: "休日歯科応急診療", url: X("2110989118792417309") }],
  },
  {
    date: "10月16日",
    cat: "other",
    note: "西部市民センターでの回収は10月29日で終了",
    links: [{ text: "小川パレット4階に資源物回収ボックスを設置（11月4日から）", url: X("2110974023261683919") }],
  },
  {
    date: "10月16日",
    cat: "other",
    note: "気象庁が午後0時36分に発表、午後0時48分に取り消し",
    links: [{ text: "緊急地震速報の取り消しについて", url: X("2110949503562097094") }],
  },
  {
    date: "10月16日",
    cat: "meeting",
    links: [{ text: "審議会などの日程（社会教育委員の会議、10月22日）", url: X("2110890970531479837") }],
  },
  {
    date: "10月16日",
    cat: "meeting",
    links: [{ text: "福祉のまちづくり推進協議会（10月29日）", url: X("2110883424890499458") }],
  },
  {
    date: "10月15日",
    cat: "status",
    note: "データセンター事業者から外部へのデータ流出はないとの調査結果",
    links: [{ text: "ホームページの障害状況について", url: X("2110644150542672090") }],
  },
  {
    date: "10月15日",
    cat: "status",
    note: "10月7日からの障害の調査状況",
    links: [{ text: "市ホームページのシステム障害に関する調査状況について", url: X("2110542852698890478") }],
  },
  {
    date: "10月15日",
    cat: "event",
    note: "会場周辺で交通規制",
    links: [{ text: "小平市民まつり（10月18日開催）", url: X("2110536132467229078") }],
  },
  {
    date: "10月15日",
    cat: "event",
    links: [{ text: "小平市民まつり 姉妹都市・北海道小平町の物産販売", url: X("2110543681245900869") }],
  },
  {
    date: "10月15日",
    cat: "event",
    note: "申込みは電話またはメールで、10月21日まで",
    links: [
      { text: "パークレンジャーと行く 秋のこだいら生きもの調査隊（10月24日）", url: X("2110535182407393475") },
    ],
  },
  {
    date: "10月15日",
    cat: "event",
    note: "申込み期限を10月21日に延長",
    links: [{ text: "秋の生きもの調査イベント（10月24日）", url: X("2110521034357031149") }],
  },
  {
    date: "10月14日",
    cat: "status",
    note: "10月7日からの障害の状況",
    links: [{ text: "ホームページの障害状況について", url: X("2110279448344019045") }],
  },
  {
    date: "10月14日",
    cat: "status",
    links: [{ text: "消防団指令システム等への不正アクセスについて", url: X("2110256791045152934") }],
  },
  {
    date: "10月14日",
    cat: "event",
    links: [
      { text: "都市計画マスタープラン（素案）のパブリックコメント", url: X("2110203942923608538") },
    ],
  },
  {
    date: "10月14日",
    cat: "meeting",
    links: [{ text: "広聴広報特別委員会（10月20日）の中継", url: X("2110188846684004405") }],
  },
  {
    date: "10月14日",
    cat: "meeting",
    note: "定員10名、当日受付",
    links: [{ text: "第4回地域自立支援協議会全体会（10月27日）", url: X("2110173751912579398") }],
  },
  {
    date: "10月14日",
    cat: "procedure",
    links: [{ text: "不動産公売のお知らせ", url: X("2110158645304422537") }],
  },
  {
    date: "10月13日",
    cat: "status",
    links: [{ text: "ホームページの障害状況について", url: X("2109917062839877729") }],
  },
  {
    date: "10月13日",
    cat: "procedure",
    note: "申込み先の案内",
    links: [{ text: "検診・予防接種などの申込み方法", url: X("2109834007407923444") }],
  },
  {
    date: "10月13日",
    cat: "procedure",
    note: "市ホームページが閲覧できないため、申請先の案内",
    links: [
      { text: "産後ケア事業", url: X("2109818905875062866") },
      { text: "転入された妊婦の方へ", url: X("2109818906185793879") },
      { text: "家事育児サポーター・多胎児サポート", url: X("2109818908290994548") },
    ],
  },
  {
    date: "10月13日",
    cat: "procedure",
    note: "様式のダウンロード",
    links: [{ text: "令和9年度学童クラブ申込み関係様式", url: X("2109811363392704948") }],
  },
  {
    date: "10月13日",
    cat: "procedure",
    note: "申請書のダウンロード",
    links: [{ text: "税に関係する主要な申請書", url: X("2109803806875701532") }],
  },
  {
    date: "10月12日",
    cat: "status",
    note: "10月10日と同じ内容",
    links: [{ text: "ホームページの障害状況について", url: X("2109554664014512600") }],
  },
  {
    date: "10月11日",
    cat: "status",
    note: "10月10日と同じ内容",
    links: [{ text: "ホームページの障害状況について", url: X("2109192276916191496") }],
  },
  {
    date: "10月10日",
    cat: "status",
    note: "10月11日・12日も同じ内容・同じ画像",
    links: [{ text: "ホームページの障害状況について", url: X("2108829895032025319") }],
  },
  {
    date: "10月9日",
    cat: "status",
    links: [{ text: "ホームページの障害状況について", url: X("2108489987809595738") }],
  },
  {
    date: "10月9日",
    cat: "meeting",
    note: "傍聴できます",
    links: [{ text: "多文化共生推進基本方針検討委員会（10月21日）", url: X("2108492666874769624") }],
  },
  {
    date: "10月9日",
    cat: "meeting",
    note: "傍聴できます",
    links: [{ text: "第4回小平市障がい者計画等検討委員会（10月19日）", url: X("2108490154092483060") }],
  },
  {
    date: "10月9日",
    cat: "other",
    links: [{ text: "小平市防災マップアプリのご紹介", url: X("2108477174449836108") }],
  },
  {
    date: "10月9日",
    cat: "other",
    links: [
      { text: "障がい者虐待に関する通報・相談", url: X("2108471275308106185") },
      { text: "障がい者の緊急時受入れの相談", url: X("2108471275744113133") },
    ],
  },
  {
    date: "10月9日",
    cat: "other",
    links: [{ text: "休日歯科応急診療（10月11日・12日）", url: X("2108459951199055997") }],
  },
  {
    date: "10月9日",
    cat: "status",
    links: [{ text: "システム障害に伴う臨時案内ページ（暫定ページ）の開設", url: X("2108444851142340669") }],
  },
  {
    date: "10月9日",
    cat: "procedure",
    links: [
      { text: "国立・都立・私立の小・中学校に通学する場合の手続き（区域外就学届）", url: X("2108429751731835342") },
    ],
  },
  {
    date: "10月9日",
    cat: "meeting",
    note: "傍聴できます",
    links: [
      {
        text: "小平市立中学校部活動地域連携・地域移行推進委員会（10月29日）",
        url: X("2108439818292371964"),
      },
    ],
  },
  {
    date: "10月9日",
    cat: "meeting",
    links: [{ text: "決算特別委員会（10月13日から16日）の中継", url: X("2108424718566994015") }],
  },
  {
    date: "10月9日",
    cat: "other",
    links: [{ text: "小平ごみ分別アプリのご紹介", url: X("2108422203159220651") }],
  },
  {
    date: "10月9日",
    cat: "procedure",
    note: "市ホームページが閲覧できないため、予約先の案内",
    links: [
      { text: "妊娠届・母子健康手帳の交付・マタニティサポート面談", url: X("2108361803965329485") },
    ],
  },
  {
    date: "10月9日",
    cat: "procedure",
    note: "様式のダウンロード",
    links: [{ text: "令和9年度保育園等入園申込み関係様式", url: X("2108354256675721622") }],
  },
  {
    date: "10月9日",
    cat: "event",
    note: "締切を延長",
    links: [{ text: "令和9年4月採用 常勤職員募集", url: X("2108346706509042051") }],
  },
  {
    date: "10月8日",
    cat: "procedure",
    links: [{ text: "粗大ごみ収集のインターネットでの申込み", url: X("2108074917950521598") }],
  },
  {
    date: "10月8日",
    cat: "event",
    links: [{ text: "居住支援セミナー（10月23日）", url: X("2107999416145817791") }],
  },
  {
    date: "10月8日",
    cat: "status",
    links: [{ text: "ホームページの障害に関するお詫び", url: X("2107976770385224041") }],
  },
  {
    date: "10月7日",
    cat: "event",
    links: [{ text: "民生委員の活動と役割の説明会（10月22日）", url: X("2107712532588962007") }],
  },
  {
    date: "10月7日",
    cat: "procedure",
    links: [{ text: "粗大ごみの申込み（電話での受付）", url: X("2107702037605748761") }],
  },
  {
    date: "10月7日",
    cat: "meeting",
    links: [{ text: "都市計画マスタープラン全体構想特別委員会の中継", url: X("2107635373212115134") }],
  },
  {
    date: "10月7日",
    cat: "status",
    links: [{ text: "市ホームページ閲覧障害のお知らせ", url: X("2107618767085896063") }],
  },
];

const countOf = (id: CatId | "all") =>
  id === "all" ? posts.length : posts.filter((p) => p.cat === id).length;
---

<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 kd-news-chip--${c.id}`}>
          <input type="radio" name="kd-news-cat" value={c.id} checked={c.id === "all"} />
          <span>
            {c.label}
            <span class="kd-news-count">{countOf(c.id)}</span>
          </span>
        </label>
      ))
    }
  </fieldset>

  <p class="kd-news-hint">枠内はスクロールできます。分類を選ぶと、その分類のポストだけを表示します。</p>

  <div class="kd-news-scroll">
    <ul class="kd-news-list">
      {
        posts.map((p) => (
          <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>
        ))
      }
    </ul>
  </div>

  <p class="kd-news-none" data-kd-news-none hidden>該当するポストはありません。</p>
</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;
    align-items: center;
    margin: 0 0 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--sl-color-hairline, #ccc);
    border-radius: 8px;
  }
  .kd-news-legend {
    padding: 0 0.2rem;
    font-size: 0.8em;
    opacity: 0.7;
  }
  .kd-news-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    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.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;
    opacity: 0.75;
  }
  .kd-news-scroll {
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.7rem 1rem;
    border: 1px solid var(--sl-color-gray-5);
    border-radius: 8px;
    background: var(--sl-color-bg-sidebar);
    overscroll-behavior: contain;
  }
  .kd-news-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .kd-news-list li {
    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;
    opacity: 0.75;
  }
</style>

<script>
  document.querySelectorAll("[data-kodaira-news]").forEach((root) => {
    const radios = Array.from(
      root.querySelectorAll<HTMLInputElement>('input[name="kd-news-cat"]'),
    );
    const items = Array.from(root.querySelectorAll<HTMLLIElement>("[data-cat]"));
    const none = root.querySelector("[data-kd-news-none]");

    const apply = () => {
      const value = radios.find((r) => r.checked)?.value ?? "all";
      let shown = 0;
      items.forEach((li) => {
        const ok = value === "all" || li.dataset.cat === value;
        li.classList.toggle("is-hidden", !ok);
        if (ok) shown += 1;
      });
      if (none) {
        none.hidden = shown !== 0;
      }
    };

    radios.forEach((r) => r.addEventListener("change", apply));
    apply();
  });
</script>