diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/SanpiAllTable.astro | 52 | ||||
| -rw-r--r-- | src/components/SanpiChart.astro | 2 | ||||
| -rw-r--r-- | src/components/SanpiPagination.astro | 93 | ||||
| -rw-r--r-- | src/components/starlight/Footer.astro | 40 |
4 files changed, 185 insertions, 2 deletions
diff --git a/src/components/SanpiAllTable.astro b/src/components/SanpiAllTable.astro new file mode 100644 index 0000000..bd0f131 --- /dev/null +++ b/src/components/SanpiAllTable.astro @@ -0,0 +1,52 @@ +--- +// 全期間の議案賛否一覧。年度別ページの表から安竹洋平の列だけを取り出し、 +// 市側の議案・議員提出の議案・請願に分けて表示する。 +import { computeSanpiBills, type BillType } from "@/utils/sanpiStats"; + +interface Props { + type: BillType; +} + +const { type } = Astro.props; +const rows = computeSanpiBills().filter((row) => row.type === type); + +const PASS = ["可決", "認定", "採択", "同意", "承認"]; +const STOP = ["否決", "不採択"]; + +function kekkaClass(result: string): string { + if (STOP.some((key) => result.includes(key))) return "stop"; + if (PASS.some((key) => result.includes(key))) return "pass"; + return ""; +} +--- + +<table> + <thead> + <tr> + <th>議案</th> + <th>年度</th> + <th>定例会</th> + <th>議決結果</th> + <th><span class="sanpi-me">安竹</span></th> + </tr> + </thead> + <tbody> + { + rows.map((row) => ( + <tr> + <td>{row.title}</td> + <td> + <a href={row.yearHref}>{row.year}</a> + </td> + <td>{row.session}</td> + <td> + <span class={`sanpi-kekka ${kekkaClass(row.result)}`}>{row.result}</span> + </td> + <td> + <span class="sanpi-me">{row.me}</span> + </td> + </tr> + )) + } + </tbody> +</table> diff --git a/src/components/SanpiChart.astro b/src/components/SanpiChart.astro index 7bc4174..643eafa 100644 --- a/src/components/SanpiChart.astro +++ b/src/components/SanpiChart.astro @@ -15,7 +15,7 @@ const rows = computeSanpiStats(); <ul class="sanpi-chart-list"> {rows.map(({ label, yes, no, yesPct, noPct, me }) => ( <li class="sanpi-chart-item"> - <span class="sanpi-chart-label" style={me ? "font-weight: 700" : undefined}> + <span class="sanpi-chart-label" title={label} style={me ? "font-weight: 700" : undefined}> {label} </span> <span class="sanpi-chart-bar" title={`賛成${yes}件／反対${no}件`}> diff --git a/src/components/SanpiPagination.astro b/src/components/SanpiPagination.astro new file mode 100644 index 0000000..294ad76 --- /dev/null +++ b/src/components/SanpiPagination.astro @@ -0,0 +1,93 @@ +--- +// 年度別の賛否一覧ページの末尾に、前年度・次年度へのリンクを +// Starlight のページネーションと同じ見た目で表示する。 +// 年度別ページはサイドバーに登録していないため、Starlight 標準の +// Pagination では前後関係が決まらない。ここで明示的にリンクを渡す。 +import { Icon } from "@astrojs/starlight/components"; + +interface Link { + href: string; + label: string; +} + +interface Props { + prev?: Link; + next?: Link; +} + +const { prev, next } = Astro.props; +--- + +{ + (prev || next) && ( + <div class="pagination-links print:hidden" dir="ltr"> + {prev && ( + <a href={prev.href} rel="prev"> + <Icon name="left-arrow" size="1.5rem" /> + <span> + {Astro.locals.t("page.previousLink")} + <br /> + <span class="link-title">{prev.label}</span> + </span> + </a> + )} + {next && ( + <a href={next.href} rel="next"> + <Icon name="right-arrow" size="1.5rem" /> + <span> + {Astro.locals.t("page.nextLink")} + <br /> + <span class="link-title">{next.label}</span> + </span> + </a> + )} + </div> + ) +} + +<style> + @layer starlight.core { + .pagination-links { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); + gap: 1rem; + } + + a { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0.5rem; + width: 100%; + flex-basis: calc(50% - 0.5rem); + flex-grow: 1; + border: 1px solid var(--sl-color-gray-5); + border-radius: 0.5rem; + padding: 1rem; + text-decoration: none; + color: var(--sl-color-gray-2); + box-shadow: var(--sl-shadow-md); + overflow-wrap: anywhere; + } + + [rel="next"] { + justify-content: end; + text-align: end; + flex-direction: row-reverse; + } + + a:hover { + border-color: var(--sl-color-gray-2); + } + + .link-title { + color: var(--sl-color-white); + font-size: var(--sl-text-2xl); + line-height: var(--sl-line-height-headings); + } + + svg { + flex-shrink: 0; + } + } +</style> diff --git a/src/components/starlight/Footer.astro b/src/components/starlight/Footer.astro index 65a61ce..63470a4 100644 --- a/src/components/starlight/Footer.astro +++ b/src/components/starlight/Footer.astro @@ -3,6 +3,7 @@ import Pagination from 'virtual:starlight/components/Pagination'; import config from 'virtual:starlight/user-config'; import { Icon } from '@astrojs/starlight/components'; import SocialShare from '../SocialShare.astro'; +import SanpiPagination from '../SanpiPagination.astro'; import { shareCaption } from '../../utils/share-caption'; const route = Astro.locals.starlightRoute; @@ -32,6 +33,37 @@ function toJapaneseDateTime(date: Date): string { } const lastUpdated = route.lastUpdated; + +// 年度別の賛否一覧はサイドバーに登録していないため、Starlight 標準の +// 前後ページは決まらない。URL から年度を判定し、前年度・次年度を渡す。 +const SANPI_YEARS = [ + { key: 'r1d', label: '令和元年度の賛否一覧' }, + { key: 'r2d', label: '令和2年度の賛否一覧' }, + { key: 'r3d', label: '令和3年度の賛否一覧' }, + { key: 'r4d', label: '令和4年度の賛否一覧' }, + { key: 'r5d', label: '令和5年度の賛否一覧' }, + { key: 'r6d', label: '令和6年度の賛否一覧' }, + { key: 'r7d', label: '令和7年度の賛否一覧' }, + { key: 'r8d', label: '令和8年度の賛否一覧' }, +]; +const sanpiMatch = Astro.url.pathname.match(/^\/sanpi\/(r\d+d)\/?$/); +const sanpiIndex = sanpiMatch + ? SANPI_YEARS.findIndex((year) => year.key === sanpiMatch[1]) + : -1; +const sanpiPrev = + sanpiIndex > 0 + ? { + href: `/sanpi/${SANPI_YEARS[sanpiIndex - 1].key}/`, + label: SANPI_YEARS[sanpiIndex - 1].label, + } + : undefined; +const sanpiNext = + sanpiIndex >= 0 && sanpiIndex < SANPI_YEARS.length - 1 + ? { + href: `/sanpi/${SANPI_YEARS[sanpiIndex + 1].key}/`, + label: SANPI_YEARS[sanpiIndex + 1].label, + } + : undefined; --- <footer class="sl-flex"> @@ -55,7 +87,13 @@ const lastUpdated = route.lastUpdated; ) } </div> - <Pagination /> + { + sanpiIndex >= 0 ? ( + <SanpiPagination prev={sanpiPrev} next={sanpiNext} /> + ) : ( + <Pagination /> + ) + } { config.credits && ( |