aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/starlight/Breadcrumbs.astro
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/starlight/Breadcrumbs.astro')
-rw-r--r--src/components/starlight/Breadcrumbs.astro83
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>