- 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
29 lines
962 B
Plaintext
29 lines
962 B
Plaintext
Task 19: Create Breadcrumbs.astro Component — Evidence
|
|
=====================================================
|
|
|
|
1. File Created
|
|
---------------
|
|
Path: src/components/Breadcrumbs.astro
|
|
|
|
2. Component Specification
|
|
--------------------------
|
|
- Props interface: { items: Array<{ label: string, href?: string }> }
|
|
- Renders <nav aria-label="Breadcrumb"> containing <ol>
|
|
- Each item rendered as <li> with "/" separator between items
|
|
- Last item (no href or end of array): <span aria-current="page"> with text-zinc-400
|
|
- Items with href: <a> with text-zinc-500 hover:text-accent transition-colors and focus ring
|
|
- Tailwind styling: text-sm, muted zinc colors, accent hover state
|
|
|
|
3. Build Verification
|
|
---------------------
|
|
Command: npm run build
|
|
Result: PASS (64 pages built, 0 errors)
|
|
|
|
4. Example Usage
|
|
----------------
|
|
<Breadcrumbs items={[
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Gaming", href: "/generators/category/gaming/" },
|
|
{ label: "Dice Roller" }
|
|
]} />
|