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 posts: Post[] = [
  {
    date: "10月16日",
    cat: "other",
    note: "西部市民センターでの回収は10月29日で終了",
    links: [{ text: "小川パレット4階に資源物回収ボックスを設置（11月4日から）", url: X("2110974023261683919") }],
  },
  {
    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",
    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",
    note: "10月10日から12日にも同じ内容のポスト",
    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月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>
  <fieldset class="kd-news-filter">
    <legend class="kd-news-legend">分類で絞る</legend>
    {
      CATS.map((c) => (
        <label class="kd-news-chip">
          <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}>
            {p.date}{" "}
            {p.links.map((l, i) => (
              <>
                {i > 0 && "／"}
                <a href={l.url}>{l.text}</a>
              </>
            ))}
            {p.note && `（${p.note}）`}
          </li>
        ))
      }
    </ul>
  </div>

  <p class="kd-news-none" data-kd-news-none hidden>該当するポストはありません。</p>
</div>

<style>
  .kd-news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    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 {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    cursor: pointer;
  }
  .kd-news-chip input {
    margin: 0;
  }
  .kd-news-chip:has(input:checked) {
    font-weight: 700;
  }
  .kd-news-count {
    margin-left: 0.25rem;
    font-size: 0.75em;
    opacity: 0.7;
  }
  .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-inline-start: 1.3rem;
  }
  .kd-news-list li {
    margin-bottom: 0.35rem;
    line-height: 1.6;
  }
  .kd-news-list li:last-child {
    margin-bottom: 0;
  }
  .kd-news-list li.is-hidden {
    display: none;
  }
  .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>