diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-18 23:19:10 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-18 23:19:10 +0900 |
| commit | 5bc1e63756cae6974430f1e6cf1a4d5e88f5b9cc (patch) | |
| tree | 46ab1a541403d680fe1719da941d7702159fd453 /src/components/starlight/Breadcrumbs.astro | |
Initial commit
Diffstat (limited to 'src/components/starlight/Breadcrumbs.astro')
| -rw-r--r-- | src/components/starlight/Breadcrumbs.astro | 83 |
1 files changed, 83 insertions, 0 deletions
diff --git a/src/components/starlight/Breadcrumbs.astro b/src/components/starlight/Breadcrumbs.astro new file mode 100644 index 0000000..3ab3281 --- /dev/null +++ b/src/components/starlight/Breadcrumbs.astro @@ -0,0 +1,83 @@ +--- +import config from 'virtual:starlight/user-config'; + +const route = Astro.locals.starlightRoute; +const base = config.base || ''; +const slug = route.entry?.slug || route.id || ''; +const parts = slug.split('/').filter(Boolean); + +// Build breadcrumb trail +const breadcrumbs: { label: string; href: string }[] = []; +let currentPath = ''; +for (let i = 0; i < parts.length; i++) { + currentPath += '/' + parts[i]; + breadcrumbs.push({ + label: labelMap(parts[i]) || parts[i], + href: base + currentPath + '/', + }); +} + +// Replace last breadcrumb label with page title +if (breadcrumbs.length > 0) { + breadcrumbs[breadcrumbs.length - 1].label = route.entry?.data?.title || breadcrumbs[breadcrumbs.length - 1].label; +} + +function labelMap(segment: string): string | null { + const map: Record<string, string> = { + 'ippan-situmon': '一般質問', + 'gian-tou': '議案等', + 'hattatu': '発達関連', + 'blog': 'ふらっとブログ', + 'r7d': '令和7年度', 'r6d': '令和6年度', 'r5d': '令和5年度', 'r4d': '令和4年度', + 'r3d': '令和3年度', 'r2d': '令和2年度', 'r1d': '令和元年度', + '6gatu': '6月定例会', '9gatu': '9月定例会', + '12gatu': '12月定例会', '3gatu': '3月定例会', + }; + return map[segment] || null; +} +--- + +{breadcrumbs.length > 0 && ( + <nav class="breadcrumbs" aria-label="パンくず"> + <ol> + <li><a href="/">ホーム</a></li> + {breadcrumbs.map((crumb, i) => ( + <li> + {i < breadcrumbs.length - 1 ? ( + <a href={crumb.href}>{crumb.label}</a> + ) : ( + <span>{crumb.label}</span> + )} + </li> + ))} + </ol> + </nav> +)} + +<style> + .breadcrumbs ol { + list-style: none; + padding: 0; + margin: 0 0 0.5rem; + font-size: 0.85rem; + color: var(--sl-color-gray-3); + line-height: 1.6; + } + .breadcrumbs li { + display: inline; + } + .breadcrumbs li:not(:last-child)::after { + content: '›'; + margin: 0 0.25rem; + } + .breadcrumbs a { + text-decoration: none; + color: var(--sl-color-gray-3); + } + .breadcrumbs a:hover { + color: var(--sl-color-accent); + } + .breadcrumbs span { + color: var(--sl-color-text); + } +</style> |
