Files
Randify.pro/src/components/Breadcrumbs.astro
T
emil 25fd24d236 feat(blog+categories): Wave 3-5 — blog infrastructure, categories, content, navigation
- Install @astrojs/rss and setup content collections (blog + generators)
- Create BlogLayout with BlogPosting schema, article OG tags, prev/next nav
- Create blog post pages EN/RU ([slug].astro) with dynamic routing
- Create blog index pages EN/RU with post cards and filtering
- Create RSS feeds EN/RU with auto-discovery links
- Create generator category pages EN/RU (5 categories each)
- Add category navigation pills to homepage
- Create Breadcrumbs, RelatedGenerators, RelatedPosts components
- Add breadcrumbs to GeneratorLayout and BlogLayout
- Wire RelatedGenerators into GeneratorLayout
- Wire RelatedPosts into blog post pages
- Create 8 EN + 8 RU blog post templates with placeholder content
- Add blog link to LanguageSwitcher navigation
- Add category and blog translation keys
2026-05-14 03:19:06 +03:00

45 lines
1.1 KiB
Plaintext

---
interface BreadcrumbItem {
label: string;
href?: string;
}
interface Props {
items: BreadcrumbItem[];
}
const { items } = Astro.props;
---
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center gap-1.5 text-sm">
{
items.map((item, index) => {
const isLast = index === items.length - 1;
return (
<li class="flex items-center gap-1.5">
{index > 0 && (
<span class="text-zinc-600" aria-hidden="true">/</span>
)}
{isLast || !item.href ? (
<span
class="text-zinc-400"
aria-current={isLast ? "page" : undefined}
>
{item.label}
</span>
) : (
<a
href={item.href}
class="text-zinc-500 hover:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950 rounded"
>
{item.label}
</a>
)}
</li>
);
})
}
</ol>
</nav>