feat: show a breadcrumb trail on recipe pages - #272
Merged
Conversation
Google prefers BreadcrumbList markup to match a visible trail. #265 added the markup; recipe pages only had a "Back to Recipe Gallery" link, which is not a trail and gave no route to the homepage. - Nav renders <nav aria-label="Breadcrumb"> with SweetAlert2 / Recipe Gallery. The current page is the <h1> below, so it is not repeated. - showBackToRecipeGalleryLink renamed to showBreadcrumbs (2 call sites). The gallery index and 404 still pass false, so their layout is unchanged. - the centring offset moves from a bare `a` selector onto .breadcrumbs: with more than one link in the trail, the old rule would have applied to each of them. - IconArrowLeft is deleted, now unused: the trail supersedes the back-arrow link it was added for. Also improves internal linking, which #256 flagged: every recipe page now links to the homepage as well as the gallery. Part of #255 and #256 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
limonte
added a commit
that referenced
this pull request
Aug 5, 2026
The breadcrumb trail added in #272 rendered broken: styles.scss had a bare `nav { ... }` rule for the sidebar, so it applied to the breadcrumb <nav> too. Three rules matched it: nav position: fixed; top: 0; flex-direction: column; ... nav a display: flex; padding; border-bottom; border-left; ... nav a::before content: '›' So the trail was pinned to the top-left of the viewport, its two links stacked vertically, each with a '›' prefix and sidebar borders. The selector encoded an assumption that the sidebar is the only <nav> on the page. Fixed at the root rather than by piling on overrides: - `nav` -> `.sidebar-nav`, and `.sidebar nav` -> `.sidebar .sidebar-nav` for the Swal popup variant - Sidebar() renders <nav className="sidebar-nav mobile-hidden"> Declarations are untouched: the diff renames selectors only, so the sidebar's styling is byte-identical in both render paths. Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes the caveat left on #255 and the "no breadcrumbs / weak internal linking" point in #256.
Why
#265 added
BreadcrumbListJSON-LD to all 21 recipe pages, but Google prefers that markup to correspond to a visible trail. Recipe pages only had a "← Back to Recipe Gallery" link — not a trail, and it gave no route to the homepage.Changes
Navnow renders, on recipe pages:as
<nav aria-label="Breadcrumb">. The current page isn't repeated in the trail because it's the<h1>immediately below — the JSON-LD still carries all three levels, which is the normal pairing.showBackToRecipeGalleryLink→showBreadcrumbs(2 call sites). The gallery index and the 404 page still passfalse, so their layout is unchanged — a lone "SweetAlert2" crumb would have added nothing there and would have shifted their centred search box.aselector onto.breadcrumbs. This one matters:.recipe-gallery-top-nav a { margin-right: 20em }existed to keep the search box centred against a single back-link. With two links in the trail it would have applied to each, pushing the search box off-screen.IconArrowLeftdeleted — added in perf: replace Font Awesome with inline SVG icons #271 for the back-arrow, now unused. Removing it rather than leaving dead code.Verification
['SweetAlert2', 'Recipe Gallery', 'Colored Toasts'], and the visible trail isSweetAlert2 / Recipe Galleryplus the<h1>as the current page..recipe-gallery-top-nav .breadcrumbs { margin-right: 20em }is in the emitted CSS and the old bare-arule is gone — confirmed by grepping the built stylesheet, since that was the layout-regression risk.aria-hidden, so screen readers hear the two links without the slash.IconArrowLeftreference remains anywhere.bun run lintandbun run buildpass.Side benefit
Every recipe page now links to the homepage as well as the gallery, which is the internal-linking weakness #256 called out — 21 pages previously linked only sideways to the gallery.
Worth a look after deploy
The top nav on any recipe page at desktop and mobile widths, since the search-box centring depends on that moved margin. Verified by CSS reasoning, not by rendering.
🤖 Generated with Claude Code