Add Marko framework support (marko-virtual) to the site

[defunkt-dev]

Summary

Registers Marko as a supported framework on tanstack.com so the new TanStack Virtual Marko adapter (@tanstack/marko-virtual) is surfaced across the site: the framework picker, per-framework docs routing, the libraries-by-framework pages, and the Virtual landing/branding.

The Marko docs, sidebar config, and example apps already live in the Virtual repo (TanStack/virtual#1156, merged). This PR is the website-side work that makes them reachable, plus a couple of small fixes for Marko's file conventions that surfaced while testing.

Changes

Framework registration + branding

• src/libraries/types.ts — add 'marko' to the Framework union (the single source of truth every other spot keys off).
• src/libraries/frameworks.tsx — add the Marko entry to frameworkOptions (logo, label, cyan accent matching the Marko mark).
• src/libraries/libraries.ts — add 'marko' to the Virtual library's frameworks and mention it in the description.
• src/libraries/virtual.tsx — mention Marko in the landing description.
• src/utils/npm-packages.ts — add a marko entry to frameworkMeta (required by the exhaustive Record<Framework, …>).
• src/utils/llms.ts — add a marko entry to frameworkLabels (same reason).
• src/images/marko-logo.svg — the official Marko mark (icon-only, from marko-js/branding), matching the other framework logos in the picker.

Fixes for Marko's conventions (found while testing)

• src/utils/repo-path.ts — allow + in repo path segments. Marko Run names files with a leading + (+page.marko, +layout.marko, +handler.js); without this, every Marko example failed path validation with "invalid path" in the example source viewer.
• src/components/FileExplorer.tsx + src/images/file-icons/marko.svg — show a Marko icon for .marko files in the Code Explorer tree (previously the generic text icon).
• src/components/markdown/codeBlock.shared.tsx — map .marko → html for syntax highlighting. @tanstack/highlight ships no Marko grammar, so html gives reasonable coloring for the tag/attribute-heavy example files. Partial by design: Marko-specific syntax such as <let/>, tag parameters |{ }|, and ${} interpolation isn't tokenized specially.

How to test

With the Virtual repo available (sibling checkout in dev, or remote docs), on the Virtual section:

• Marko appears in the framework dropdown with its logo; /libraries/marko lists Virtual.
• Getting Started → "Marko Virtual" renders the adapter doc.
• The Examples tab loads for Marko (fixed, variable, dynamic, grid, infinite-scroll, smooth-scroll, window).
• .marko files show the Marko icon in the Code Explorer tree and are syntax-highlighted.

Notes / follow-ups (not in this repo)

• @tanstack/marko-virtual isn't published to npm yet, so the interactive CodeSandbox/StackBlitz sandboxes for the Marko examples don't boot (the example package.jsons use workspace:*, and there's nothing on npm to install). Once the package is published, the Marko examples should be pinned to that version like the other frameworks. Tracked in the Virtual repo.
• The shared docs/installation.md in the Virtual repo has no Marko section, so installation#marko (the framework tile target) lands with no anchor to scroll to. A one-section addition there closes that gap.

Screenshots

Summary by CodeRabbit

• New Features

  • Added support for Marko across the app, including framework selection, labeling, metadata, and library descriptions.
  • Marko files now show a dedicated file icon, and code highlighting falls back appropriately for Marko files.

• Bug Fixes

  • Updated repository path validation to allow + characters in individual path segments.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds Marko as a supported framework: extends the Framework type union, framework metadata maps (labels, colors, logos), file icon detection, code block language fallback to HTML, and updates library descriptions/framework lists to include Marko. Separately, updates repo path segment regex to allow the + character.

Changes

Marko Framework Addition

Layer / File(s)	Summary
Framework type and metadata src/libraries/types.ts, src/utils/llms.ts, src/utils/npm-packages.ts	Adds 'marko' to the Framework union type and adds Marko entries to frameworkLabels and frameworkMeta with display name and color.
Library descriptions and framework lists src/libraries/libraries.ts, src/libraries/virtual.tsx	Updates the virtual library's description and frameworks array, and virtualProject's description text, to mention Marko.
Icons, logos, and code highlighting fallback src/components/FileExplorer.tsx, src/libraries/frameworks.tsx, src/components/markdown/codeBlock.shared.tsx	Adds Marko file icon and framework logo, extends getFileIconPath and frameworkOptions for Marko, and adds an early html fallback for .marko files in code block language detection.

Repo Path Segment Validation

Layer / File(s)	Summary
Repo path regex update src/utils/repo-path.ts	Updates REPO_PATH_SEGMENT_PATTERN to allow + within path segments.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

A hop, a skip, a Marko sprig,
New icons bloom, my whiskers twig 🐰
Frameworks grow like carrot rows,
HTML fallback where the grammar goes.
A '+' sign sneaks through path's tight door—
Nibble, nibble, ship some more! 🥕

🚥 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding Marko framework support, including marko-virtual, across the site.
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.

✨ 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.}

[coderabbitai]

🧹 Nitpick comments (1)

src/utils/repo-path.ts (1)

3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add test coverage for the + character.

The regex change enabling + in path segments (for +page.marko) isn't covered by tests/repo-path.test.ts. Consider adding an assertion like isValidRepoPath('examples/marko/dynamic/src/routes/+page.marko') to lock in this behavior.

🤖 Prompt for 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.

In `@src/utils/repo-path.ts` at line 3, Add test coverage for the repo path
segment regex change by updating tests/repo-path.test.ts to assert that a path
containing a leading + segment is accepted, using isValidRepoPath with a case
like examples/marko/dynamic/src/routes/+page.marko. This will lock in the
behavior introduced by REPO_PATH_SEGMENT_PATTERN and ensure the + character
remains valid in repo path segments.

🤖 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.

Nitpick comments:
In `@src/utils/repo-path.ts`:
- Line 3: Add test coverage for the repo path segment regex change by updating
tests/repo-path.test.ts to assert that a path containing a leading + segment is
accepted, using isValidRepoPath with a case like
examples/marko/dynamic/src/routes/+page.marko. This will lock in the behavior
introduced by REPO_PATH_SEGMENT_PATTERN and ensure the + character remains valid
in repo path segments.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5804b446-becd-4c4b-9f0e-cd60b1ca94b0

📥 Commits

Reviewing files that changed from the base of the PR and between 96aaa51 and 02fc95a.

⛔ Files ignored due to path filters (2)

• src/images/file-icons/marko.svg is excluded by !**/*.svg
• src/images/marko-logo.svg is excluded by !**/*.svg

📒 Files selected for processing (9)

• src/components/FileExplorer.tsx
• src/components/markdown/codeBlock.shared.tsx
• src/libraries/frameworks.tsx
• src/libraries/libraries.ts
• src/libraries/types.ts
• src/libraries/virtual.tsx
• src/utils/llms.ts
• src/utils/npm-packages.ts
• src/utils/repo-path.ts