@estation/create-cms-site 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CMSPreviewListener } from "@/components/cms-preview-listener";
|
|
2
2
|
import { Navigation } from "@/components/Navigation";
|
|
3
|
+
import { Breadcrumbs } from "@/components/Breadcrumbs";
|
|
3
4
|
import { Footer } from "@/components/Footer";
|
|
4
5
|
import { HreflangTags } from "@/components/HreflangTags";
|
|
5
6
|
import { getLocaleDir, isValidLocale } from "@/lib/types";
|
|
@@ -29,6 +30,7 @@ export default async function LocaleLayout({
|
|
|
29
30
|
</head>
|
|
30
31
|
<body className="antialiased">
|
|
31
32
|
<Navigation locale={locale} />
|
|
33
|
+
<Breadcrumbs />
|
|
32
34
|
<main>{children}</main>
|
|
33
35
|
<Footer />
|
|
34
36
|
<CMSPreviewListener />
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { usePathname } from "next/navigation";
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Breadcrumbs component for website pages.
|
|
7
|
+
* Auto-generates breadcrumb trail from the URL path.
|
|
8
|
+
*
|
|
9
|
+
* Examples:
|
|
10
|
+
* /en → (hidden — homepage)
|
|
11
|
+
* /en/about-us → Home > About Us
|
|
12
|
+
* /en/partners → Home > Partners
|
|
13
|
+
* /en/partners/york → Home > Partners > York
|
|
14
|
+
*/
|
|
15
|
+
export function Breadcrumbs() {
|
|
16
|
+
const pathname = usePathname();
|
|
17
|
+
if (!pathname) return null;
|
|
18
|
+
|
|
19
|
+
// Split path: /en/partners/york → ["en", "partners", "york"]
|
|
20
|
+
const segments = pathname.split("/").filter(Boolean);
|
|
21
|
+
|
|
22
|
+
// First segment is locale — skip it
|
|
23
|
+
const locale = segments[0] || "en";
|
|
24
|
+
const pathSegments = segments.slice(1);
|
|
25
|
+
|
|
26
|
+
// Don't show breadcrumbs on homepage
|
|
27
|
+
if (pathSegments.length === 0) return null;
|
|
28
|
+
|
|
29
|
+
// Build breadcrumb items
|
|
30
|
+
const crumbs: { label: string; href: string }[] = [
|
|
31
|
+
{ label: "Home", href: `/${locale}` },
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
let currentPath = `/${locale}`;
|
|
35
|
+
for (const segment of pathSegments) {
|
|
36
|
+
currentPath += `/${segment}`;
|
|
37
|
+
// Convert slug to display name: "about-us" → "About Us", "york" → "York"
|
|
38
|
+
const label = segment
|
|
39
|
+
.split("-")
|
|
40
|
+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
41
|
+
.join(" ");
|
|
42
|
+
crumbs.push({ label, href: currentPath });
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<nav aria-label="Breadcrumb" className="px-6 py-3">
|
|
47
|
+
<ol className="flex items-center gap-1.5 text-sm text-gray-500">
|
|
48
|
+
{crumbs.map((crumb, idx) => (
|
|
49
|
+
<li key={crumb.href} className="flex items-center gap-1.5">
|
|
50
|
+
{idx > 0 && (
|
|
51
|
+
<span className="text-gray-300" aria-hidden="true">/</span>
|
|
52
|
+
)}
|
|
53
|
+
{idx === crumbs.length - 1 ? (
|
|
54
|
+
<span className="text-gray-900 font-medium">{crumb.label}</span>
|
|
55
|
+
) : (
|
|
56
|
+
<a
|
|
57
|
+
href={crumb.href}
|
|
58
|
+
className="hover:text-gray-700 hover:underline transition-colors"
|
|
59
|
+
>
|
|
60
|
+
{crumb.label}
|
|
61
|
+
</a>
|
|
62
|
+
)}
|
|
63
|
+
</li>
|
|
64
|
+
))}
|
|
65
|
+
</ol>
|
|
66
|
+
</nav>
|
|
67
|
+
);
|
|
68
|
+
}
|