feat(site): update catalog and modal navigation

[mrdankuta]

Update lesson links to route through internal readers where available and
add external GitHub source links to improve interface usability.

What this PR does

Makes lesson titles clickable links to the internal lesson viewer instead of redirecting to GitHub, while preserving GitHub access through secondary links.

Kind of change

• New lesson
• Fix to an existing lesson
• Translation
• New output (prompt, skill, agent, MCP server)
• Docs / website / tooling

Checklist

Most checklist items don't apply since this is a site-wide UX change, not a lesson:

• Code runs without errors with the listed dependencies
• No comments in code files (docs explain, code is self-explanatory)
• Built from scratch first, then shown with a framework (for new lessons)
• Lesson folder matches LESSON_TEMPLATE.md structure
• ROADMAP.md row for the lesson is a markdown link ([Name](phases/...)), not bare text
• One lesson per commit (atomic per-lesson rule)
• Tested locally / code output matches what docs/en.md claims

Additional checks:

• Changes are scoped to site files only (site/app.js, site/catalog.html, site/style.css)
• Backward compatible — lessons without lessonPath still link to GitHub as before
• Visual hierarchy preserved — primary action (read lesson) is prominent, secondary action (view source) is subtle

Phase / lesson

Not applicable — site-wide UX improvement affecting the lesson modal and catalog page.

Notes for reviewer

Problem: Users clicking lesson titles in the modal and catalog were redirected to GitHub instead of the on-site lesson viewer (lesson.html?path=...), even though the viewer already existed.

Solution:

• Modal (site/app.js): Lesson title now links to the internal viewer. The former "Read"/"Review" button is now a "GitHub" link that opens the source repo in a new tab.
• Catalog (site/catalog.html): Lesson names link to the internal viewer. A small ↗ icon next to each name opens the GitHub source in a new tab.
• Styling (site/style.css + inline in catalog.html): Secondary GitHub links use reduced opacity (0.5–0.6) that increases on hover, making them clearly subordinate to the primary title link.

Files changed:

File	Change
site/app.js	Modal lesson title → internal viewer; "Read" button → "GitHub" external link
site/catalog.html	Catalog lesson name → internal viewer; added ↗ GitHub icon link
site/style.css	Added .modal-lesson-github styles for the secondary button

No breaking changes: Fallback behavior is preserved — lessons without a parseable lessonPath still link to GitHub directly.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0ab74da9-0fa7-41c7-8153-269d1a0e5cba

📥 Commits

Reviewing files that changed from the base of the PR and between 6a5df6d and aa0ada8.

📒 Files selected for processing (1)

• site/app.js

🚧 Files skipped from review as they are similar to previous changes (1)

• site/app.js

---

📝 Walkthrough

Walkthrough

Lesson name links in both the modal (app.js) and catalog (catalog.html) now route to lesson.html?path=... when a phases/.../... path can be regex-extracted from l.url. A secondary GitHub source link is appended when both the path and original URL are present. New CSS rules style these GitHub links in both surfaces.

Changes

Internal Lesson Link Routing

Layer / File(s)	Summary
Path extraction and modal link logic site/catalog.html, site/app.js	catalog.html row-building now extracts lessonPath via regex from l.url and stores it in each row object. app.js modal now derives lessonPath and routes the lesson name anchor to lesson.html?path=lessonPath; the actionHtml is replaced with a GitHub source link shown only when both l.url and lessonPath exist.
Catalog rendering and GitHub link styling site/catalog.html, site/style.css	The catalog Lesson column renders an internal lesson.html?path= link when lessonPath exists and appends a catalog-github-link anchor when r.url is also present. CSS adds base and hover styles for .catalog-github-link and .modal-lesson .modal-lesson-github with muted default opacity and --blueprint color on hover.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(site): update catalog and modal navigation' clearly and specifically describes the main change—updating navigation in catalog and modal components to route through internal viewers instead of GitHub.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, explaining the problem, solution, affected files, and backward compatibility considerations in detail.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@site/app.js`:
- Line 244: The lessonPath variable is being concatenated directly into the URL
query parameter without encoding, which can produce malformed links for
non-URL-safe characters. In the line where the anchor tag is created with the
lesson.html link, wrap the lessonPath variable with encodeURIComponent() before
concatenating it into the href attribute to properly encode the query parameter
value and align with the existing pattern used in cmdpalette.js.
- Around line 248-250: The code is rendering an `<a>` tag without an `href`
attribute when there is no destination URL, which is semantically incorrect.
Replace the `<a>` and `</a>` tags in the else block (where html is concatenated
with escapeHtml(l.name)) with non-interactive `<span>` and `</span>` tags to
properly represent non-linked text without misleading link semantics.

In `@site/catalog.html`:
- Line 444: The GitHub link element with class "catalog-github-link" contains
only the visual icon character (↗) without an accessible label for screen
readers. Add an aria-label attribute to the anchor tag to provide a meaningful
description of the link's action (such as "View source on GitHub") so that
assistive technology users understand the purpose of this icon-only link.
- Line 442: The r.lessonPath parameter in the query string on the line that
constructs the href for lesson.html is not URL-encoded. Apply URL encoding to
r.lessonPath by wrapping it with encodeURIComponent() before concatenating it
into the href URL string. This ensures special characters in the path are
properly escaped for safe URL transmission, similar to how r.name is already
escaped with escapeHtml for HTML safety.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8c8ab618-852d-4ade-953d-112abb71c610

📥 Commits

Reviewing files that changed from the base of the PR and between 574a5d6 and 9af804c.

📒 Files selected for processing (3)

• site/app.js
• site/catalog.html
• site/style.css