diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/KodairaNews.astro | 407 |
1 files changed, 407 insertions, 0 deletions
diff --git a/src/components/KodairaNews.astro b/src/components/KodairaNews.astro new file mode 100644 index 0000000..ffe1b89 --- /dev/null +++ b/src/components/KodairaNews.astro @@ -0,0 +1,407 @@ +--- +// 小平市公式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> |