docs: fix sidebar overflow at mid-width viewports and add a favicon (#2426)

docs/.vitepress/config.mts

@@ -30,6 +30,8 @@ export default defineConfig({
     title: 'MCP TypeScript SDK',
     description: 'The TypeScript SDK implementation of the Model Context Protocol specification.',
     base: '/v2/',
+    // VitePress does not base-prefix head hrefs, so /v2/ is spelled out here.
+    head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/v2/favicon.svg' }]],
     srcExclude: ['v1/**', '_meta/**', 'behavior-surface-pins.md'],
     sitemap: { hostname: `${siteUrl}/` },
     markdown: {

docs/.vitepress/theme/custom.css

@@ -13,9 +13,16 @@
  * which forces horizontal scrolling on most of our ~100-column code blocks.
  * Let the layout breathe and the column grow so typical snippets fit;
  * genuinely long lines still scroll inside their own block.
+ *
+ * Clamped to the viewport because the default theme's `(min-width: 1440px)`
+ * rules size the sidebar and nav title as
+ * `calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + ...)`, which goes
+ * negative on viewports narrower than the max width: the sidebar collapses
+ * and the site title spills over the search bar. With the clamp, those rules
+ * resolve to their stock sub-1440px values on narrower viewports instead.
  */
 :root {
-    --vp-layout-max-width: 1680px;
+    --vp-layout-max-width: min(100vw, 1680px);
 }
 
 /* !important: the default rule is a scoped component style ([data-v-…]), which

docs/public/favicon.svg

@@ -0,0 +1,11 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="180" height="180" rx="24" fill="black"/>
+<mask id="mask0_246_1229" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="7" y="7" width="166" height="166">
+<path d="M173 7H7V173H173V7Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_246_1229)">
+<path d="M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23" stroke="white" stroke-width="11.0667" stroke-linecap="round"/>
+<path d="M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257" stroke="white" stroke-width="11.0667" stroke-linecap="round"/>
+<path d="M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025" stroke="white" stroke-width="11.0667" stroke-linecap="round"/>
+</g>
+</svg>

docs/v1/.vitepress/config.mts

@@ -24,6 +24,9 @@ export default defineConfig({
     title: 'MCP TypeScript SDK (v1)',
     description: 'Documentation for v1.x of the MCP TypeScript SDK.',
     base: '/',
+    // The favicon is copied into content/public/ by scripts/build-docs-site.sh
+    // (content/ is generated; the committed source is docs/public/favicon.svg).
+    head: [['link', { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }]],
     sitemap: { hostname: 'https://ts.sdk.modelcontextprotocol.io' },
     srcDir: 'content',
     markdown: {

scripts/build-docs-site.sh

@@ -99,6 +99,10 @@ npx typedoc --options typedoc.v1-site.json
 cp docs/*.md "$V1_CONTENT/"
 cp README.md "$V1_CONTENT/index.md"
 
+# The v1 site serves the shared favicon at its own root (see docs/v1/.vitepress/config.mts).
+mkdir -p "$V1_CONTENT/public"
+cp "$REPO_ROOT/docs/public/favicon.svg" "$V1_CONTENT/public/favicon.svg"
+
 # Rewrite links that don't resolve on the site:
 # - source files -> GitHub
 # - README links into docs/ -> site-local pages (docs/*.md sit next to index.md in content/)