---
// 小平市公式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月30日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2116081390760632748") }],
  },
  {
    date: "10月30日",
    cat: "status",
    note: "こだいら健康ポイントのメンテナンスが終了し、サービス再開",
    links: [{ text: "こだいら健康ポイントの再開", url: X("2116077649739288685") }],
  },
  {
    date: "10月30日",
    cat: "event",
    note: "11月3日10:00〜15:00、中央エリアでドッグラン・スポーツ体験・オープンハウス",
    links: [{ text: "秋空のもと、遊んで・知ろう！in中央エリア", url: X("2116032350262030513") }],
  },
  {
    date: "10月30日",
    cat: "other",
    note: "11月1日・3日、休日歯科応急診療を実施。9:00〜17:00",
    links: [{ text: "休日歯科応急診療", url: X("2116017254144028910") }],
  },
  {
    date: "10月30日",
    cat: "other",
    note: "健康センター。準夜19:15〜22:15、休日9:00〜16:45",
    links: [{ text: "休日・準夜応急診療（内科・小児科）", url: X("2116017248812913002") }],
  },
  {
    date: "10月30日",
    cat: "status",
    note: "消防団指令システムの運用を10月29日13時から再開",
    links: [{ text: "消防団指令システムの運用再開", url: X("2116002164858655043") }],
  },
  {
    date: "10月30日",
    cat: "other",
    note: "近隣9市で魅力を発信。今回は東大和市を紹介",
    links: [{ text: "広域連携の取組（市のX）", url: X("2116002150191141054") }],
  },
  {
    date: "10月30日",
    cat: "meeting",
    note: "11月12日14:00から、福祉会館4階小ホール。定員5名（先着順）",
    links: [{ text: "介護保険運営協議会（市のX）", url: X("2115956857676444078") }],
  },
  {
    date: "10月29日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2115715266654908660") }],
  },
  {
    date: "10月29日",
    cat: "event",
    note: "市のイベント情報をLoGoフォームにまとめています",
    links: [
      { text: "イベント情報（市のX）", url: X("2115685066491781369") },
      { text: "LoGoフォームのイベント情報", url: "https://logoform.jp/procedure/exdH/2517" },
    ],
  },
  {
    date: "10月28日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2115360420273734000") }],
  },
  {
    date: "10月28日",
    cat: "status",
    note: "PHP脆弱性対応のメンテナンスでこだいら健康ポイントを停止中。10月31日から再開予定",
    links: [{ text: "こだいら健康ポイントのメンテナンス", url: X("2115355386522018145") }],
  },
  {
    date: "10月28日",
    cat: "other",
    note: "第二次教育振興基本計画の検証のため、無作為抽出のアンケートを実施。11月19日まで回答",
    links: [{ text: "教育に関するアンケート（市のX）", url: X("2115232083861987456") }],
  },
  {
    date: "10月27日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2114990490542321692") }],
  },
  {
    date: "10月27日",
    cat: "event",
    note: "10月28日22:00〜22:45、NHK総合「歴史探偵」で鈴木遺跡の出土品が放映",
    links: [{ text: "鈴木遺跡出土品のテレビ放映（市のX）", url: X("2114975384231911934") }],
  },
  {
    date: "10月27日",
    cat: "event",
    note: "農産物直売所を巡るデジタルスタンプラリーを開催中。詳細はこだいら観光まちづくり協会のホームページへ",
    links: [
      { text: "デジタルスタンプラリー（市のX）", url: X("2114960289330287050") },
      { text: "イベント詳細（こだいら観光まちづくり協会）", url: "https://kodaira-tourism.com/event/23117/" },
    ],
  },
  {
    date: "10月27日",
    cat: "event",
    note: "11月3日13:00〜14:30、小川パレット5階。当日0:30から受付、先着25名",
    links: [{ text: "市長タウンミーティング（市のX）", url: X("2114915001236398353") }],
  },
  {
    date: "10月27日",
    cat: "procedure",
    note: "木造住宅の耐震診断・改修、ブロック塀等の補助金申請を受付中",
    links: [{ text: "耐震診断・改修の補助金（市のX）", url: X("2114884788452495443") }],
  },
  {
    date: "10月26日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2114640677212402108") }],
  },
  {
    date: "10月26日",
    cat: "status",
    note: "PHPの脆弱性への対応が完了したWebサービスから順次再稼働",
    links: [{ text: "PHP脆弱性への対応について", url: X("2114637769213653444") }],
  },
  {
    date: "10月26日",
    cat: "status",
    note: "市立学校・学校給食センターのホームページを本日正午から再開",
    links: [
      { text: "学校ホームページの再開について", url: X("2114635960042623282") },
      { text: "詳細（LoGoフォーム）", url: "https://logoform.jp/form/exdH/1861824" },
    ],
  },
  {
    date: "10月26日",
    cat: "other",
    note: "市都民税・森林環境税（第3期）、国民健康保険税（第4期）の納期限は11月2日",
    links: [{ text: "今月の税（市のX）", url: X("2114597902068682825") }],
  },
  {
    date: "10月26日",
    cat: "other",
    note: "小川パレットのロゴマーク完成までの様子をYouTube・Instagramで公開",
    links: [
      { text: "小川パレットのロゴマーク（市のX）", url: X("2114522406362529861") },
      { text: "YouTube", url: "https://www.youtube.com/watch?v=aiUBM-ztbiA" },
    ],
  },
  {
    date: "10月26日",
    cat: "event",
    note: "11月1日（日）〜3日（火・祝）、小川パレットのオープニングイベントを開催",
    links: [{ text: "小川パレット オープニングイベント（市のX）", url: X("2114507305655959784") }],
  },
  {
    date: "10月25日",
    cat: "other",
    note: "10月25日18時07分、小平市の雷注意報を解除",
    links: [{ text: "気象警報・注意報（市のX）", url: X("2114282956797968734") }],
  },
  {
    date: "10月24日",
    cat: "other",
    note: "10月25日04時15分、小平市に雷注意報を発表",
    links: [{ text: "気象警報・注意報（市のX）", url: X("2114073709862637817") }],
  },
  {
    date: "10月23日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2113540936579879112") }],
  },
  {
    date: "10月23日",
    cat: "status",
    note: "PHPの対策が完了し、こだっこアプリのサービスを再開",
    links: [{ text: "こだっこアプリの再開", url: X("2113533380784476198") }],
  },
  {
    date: "10月23日",
    cat: "other",
    note: "西部出張所は10月30日（金）臨時休業。11月2日（月）から小川パレット内で業務開始",
    links: [{ text: "西部出張所の移転（市のX）", url: X("2113510734760186286") }],
  },
  {
    date: "10月23日",
    cat: "other",
    note: "10月25日（日）午前9時から午後5時まで。受診前に医療機関へ確認",
    links: [{ text: "休日歯科応急診療", url: X("2113465447488311714") }],
  },
  {
    date: "10月23日",
    cat: "other",
    note: "健康センター。準夜19:15〜22:15（年中無休）、休日9:00〜16:45",
    links: [{ text: "休日・準夜応急診療（内科・小児科）", url: X("2113465436037664796") }],
  },
  {
    date: "10月23日",
    cat: "event",
    note: "10月25日（日）、味の素スタジアムでFC東京vs水戸。小平の日ブースを設置",
    links: [{ text: "FC東京「小平の日」（市のX）", url: X("2113420142453678421") }],
  },
  {
    date: "10月22日",
    cat: "status",
    note: "PHPの脆弱性でWebサービスの一部が閲覧不可。緊急点検を実施",
    links: [{ text: "Webサービスの一時停止について", url: X("2113186095626351015") }],
  },
  {
    date: "10月22日",
    cat: "status",
    note: "緊急点検のため、市立学校・学校給食センターのホームページを停止",
    links: [
      { text: "学校ホームページの停止について", url: X("2113183575956926631") },
      { text: "詳細（LoGoフォーム）", url: "https://logoform.jp/form/exdH/1861824" },
    ],
  },
  {
    date: "10月22日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2113178545342095435") }],
  },
  {
    date: "10月22日",
    cat: "procedure",
    note: "都市計画マスタープランのパブリックコメントを11月1日まで延長",
    links: [
      { text: "意見募集（市のX）", url: X("2113163443574640688") },
      { text: "意見募集フォーム", url: "https://logoform.jp/form/exdH/1840919" },
    ],
  },
  {
    date: "10月22日",
    cat: "other",
    note: "近隣9市で魅力を発信。今回は武蔵村山市を紹介",
    links: [{ text: "広域連携の取組（市のX）", url: X("2113148348178031035") }],
  },
  {
    date: "10月22日",
    cat: "status",
    note: "PHPの脆弱性でこだっこアプリを一時停止。こだっこWEB予約は通常どおり",
    links: [{ text: "こだっこアプリの一時停止", url: X("2113118146596835498") }],
  },
  {
    date: "10月22日",
    cat: "meeting",
    note: "10月22日（木）午後2時から。追加の議事日程があり、傍聴できない案件も",
    links: [{ text: "教育委員会定例会（市のX）", url: X("2113118146605306218") }],
  },
  {
    date: "10月22日",
    cat: "other",
    note: "国民健康保険の40歳以上の特定健診は10月31日まで",
    links: [{ text: "特定健診の期限（市のX）", url: X("2113103051414524237") }],
  },
  {
    date: "10月22日",
    cat: "event",
    note: "10月24日（土）午前10時から午後2時、リサイクルセンター広場（雨天中止）",
    links: [{ text: "ごみゼロフリーマーケット（市のX）", url: X("2113057748812259523") }],
  },
  {
    date: "10月21日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2112829072816619872") }],
  },
  {
    date: "10月20日",
    cat: "status",
    note: "10月7日から発生している障害の状況。暫定サイトで一部の手続きが可能",
    links: [{ text: "ホームページの障害状況について", url: X("2112453768067604809") }],
  },
  {
    date: "10月20日",
    cat: "event",
    note: "市のイベント情報をLoGoフォームにまとめています",
    links: [
      { text: "イベント情報（市のX）", url: X("2112421345372127394") },
      { text: "LoGoフォームのイベント情報", url: "https://logoform.jp/procedure/exdH/2517" },
    ],
  },
  {
    date: "10月20日",
    cat: "other",
    note: "近隣9市で魅力を発信。今回は昭島市を紹介",
    links: [{ text: "広域連携の取組（市のX）", url: X("2112378284121952706") }],
  },
  {
    date: "10月20日",
    cat: "meeting",
    note: "10月22日（木）午後2時から、市役所5階505会議室。傍聴は当日午後1時40分から受付（定員20人）",
    links: [{ text: "教育委員会定例会（市のX）", url: X("2112363175307813138") }],
  },
  {
    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>