- 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
45 lines
1.1 KiB
Plaintext
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>
|