modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(readme): use picture element for theme-aware logo (#545)

Browse source 
* fix(readme): use picture element for theme-aware logo

The #gh-light-mode-only / #gh-dark-mode-only URL fragments only work
on github.com. On npm, VS Code preview, and other markdown renderers
both img tags render, showing two stacked logos.

Switch to <picture> with prefers-color-scheme, which GitHub recommends
and which degrades gracefully to a single logo elsewhere.

* ci: add Cloudflare Pages preview for docs PRs

Deploys a per-PR preview of the TypeDoc site to Cloudflare Pages project
mcp-ext-apps-docs-preview when docs, src JSDoc, README, or typedoc config
change. Uses the shared modelcontextprotocol/actions composite action that
injects noindex headers, posts a sticky PR comment with preview URLs, and
cleans up deployments on PR close. Fork PRs are skipped (no secret access).

* fix(docs): sync README logo with TypeDoc theme switcher

The README <picture> logo uses prefers-color-scheme, which only follows
the OS setting. TypeDoc's theme switcher sets data-theme on <html>, so
manually picking Light/Dark would show the wrong logo (e.g. white logo
on light background if OS is dark but user picked Light).

Rewrite the <picture> in the generated docs into two class-tagged <img>s
via the mcpstyle plugin, and hide the inactive one via CSS keyed on both
data-theme (explicit selection) and prefers-color-scheme (OS mode). The
README source is unchanged so GitHub/npm still get <picture>.

Also: prettier normalized mcp-theme.css (tabs to spaces, quote style).
This commit is contained in:
Den Delimarsky 2026-03-10 17:33:40 +00:00 • committed by GitHub
commit a870456893
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 190 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

14
scripts/typedoc-plugin-mcpstyle.mjs
View file

@ -4,6 +4,9 @@
* - Moves custom.css to load last so overrides win the cascade
* - Replaces breadcrumbs with the document group name (e.g. "Security")
* - Marks the current sidebar nav link for CSS highlighting
* - Rewrites the README <picture> logo to a pair of theme-tagged <img>s so
* the logo follows the TypeDoc theme switcher (data-theme), not just the
* OS prefers-color-scheme media query
*/
import { Renderer } from "typedoc";
@ -38,6 +41,17 @@ export function load(app) {
);
}
// The README logo uses <picture> with prefers-color-scheme, which follows
// the OS setting and ignores the TypeDoc theme switcher (data-theme attr).
// Rewrite it as two <img> tags — CSS in mcp-theme.css picks the correct
// one based on both data-theme and prefers-color-scheme (for "OS" mode).
page.contents = page.contents.replace(
/<picture>\s*<source media="\(prefers-color-scheme: dark\)" srcset="([^"]+)">\s*<source media="\(prefers-color-scheme: light\)" srcset="([^"]+)">\s*<img src="[^"]+"([^>]*)>\s*<\/picture>/,
(_, darkSrc, lightSrc, imgAttrs) =>
`<img src="${lightSrc}"${imgAttrs} class="mcp-logo-light">` +
`<img src="${darkSrc}"${imgAttrs} class="mcp-logo-dark">`,
);
// Inject script to mark the current sidebar nav link with a "current" class.
// TypeDoc does not natively add this class for document pages.
// The sidebar is populated asynchronously from compressed navigation data,