Match Mintlify accordion styling

_site/customizations/kapa-init.js

@@ -54,7 +54,7 @@
       'data-website-id': '5df6cc2b-732e-44e4-b789-aec81b70fe46',
       'data-project-name': 'ClickHouse',
       'data-project-color': '#151515',
-      'data-project-logo': 'https://avatars.githubusercontent.com/u/54801242?s=200&v=4',
+      'data-project-logo': '/docs/images/logo.svg',
       'data-modal-disclaimer': 'This is a custom LLM for ClickHouse with access to all developer documentation, open GitHub Issues, YouTube videos, and resolved StackOverflow posts. Please note that answers are generated by AI and may not be fully accurate, so please use your best judgement.',
       'data-modal-example-questions': 'How to speed up queries?,How to use materialized views?',
       // Disable the MCP install dropdown/tab in the Kapa widget header.
@@ -80,4 +80,4 @@
       console.log('An error occurred while trying to load the Kapa.ai widget:', e);
     }
   }
-})();
+})();

_site/styles.css

@@ -1715,11 +1715,6 @@ button.rounded-xl {
    ClickPipes Page Styling
    ============================================ */
 
-/* Dark mode image swap for ClickPipes icons */
-:is(.dark) .product-item img[src*="clickpipes-light.svg"] {
-    content: url("https://ch-docs-product-selector.s3.eu-central-1.amazonaws.com/clickpipes-dark.svg") !important;
-}
-
 /* Kafka nav-group icon is a solid black SVG (fill:#000); invert it to white in
    dark mode so it doesn't disappear against the dark sidebar. Single asset, no
    light/dark swap. */

ar/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

bin/gen-homepage-react.ts

@@ -9,10 +9,13 @@
  */
 import fs from "node:fs";
 import path from "node:path";
+import { inlinePublicIcon } from "../src/lib/build-icon.ts";
 
 const root = process.cwd();
 const locales = ["en", "ar", "es", "fr", "ja", "ko", "pt-BR", "ru", "zh"];
 const outputDir = path.join(root, "src", "generated", "homepage");
+const mcpIcon = inlinePublicIcon("/images/icons/icon-mcp.svg");
+const mcpMask = /<span\s+aria-hidden="true"\s+className="shrink-0 w-\[15px\] h-\[15px\] bg-current ch-mcp-icon"\s+style=\{\{\s+WebkitMaskImage: `url\(\$\{assetBase\}\/images\/icons\/icon-mcp\.svg\)`,\s+maskImage: `url\(\$\{assetBase\}\/images\/icons\/icon-mcp\.svg\)`,\s+\}\}\s+\/>/g;
 
 function sourcePath(locale: string): string {
   return locale === "en" ? path.join(root, "index.mdx") : path.join(root, locale, "index.mdx");
@@ -56,7 +59,18 @@ function render(locale: string): string {
     .replaceAll(
       "typeof window !== 'undefined' && window.location.pathname.startsWith('/docs') ? '/docs' : ''",
       assetBaseExpression,
+    )
+    .replace(
+      mcpMask,
+      `<img src={${JSON.stringify(mcpIcon)}} alt="" aria-hidden="true" className="shrink-0 w-3.5 h-3.5 bg-transparent" />`,
+    )
+    .replace(
+      /(export const McpLink = \(\{ children \}\) => \{\r?\n)\s+const assetBase = [^\r\n]+;\r?\n/,
+      "$1",
     );
+  if (rewrittenDefinitions.includes("ch-mcp-icon")) {
+    throw new Error(`Could not replace the homepage MCP icon in ${file}`);
+  }
   return `// Generated from ${path.relative(root, file)}; do not edit.\n`
     + `import * as React from "react";\n`
     + `import { useEffect, useRef, useState } from "react";\n\n`

bin/gen-sidebar.ts

@@ -64,8 +64,8 @@ const tabs = (lang.tabs ?? []) as Obj[];
 
 // ---------------------------------------------------------------- labels
 type NavBadge = { text: string; variant: "success" | "info" | "warning" | "danger" | "note" };
-const labelCache = new Map<string, { label: string; exists: boolean; badge?: NavBadge }>();
-function pageInfo(page: string): { label: string; exists: boolean; badge?: NavBadge } {
+const labelCache = new Map<string, { label: string; exists: boolean; badge?: NavBadge; icon?: string; hidden?: boolean }>();
+function pageInfo(page: string): { label: string; exists: boolean; badge?: NavBadge; icon?: string; hidden?: boolean } {
   const cached = labelCache.get(page);
   if (cached) return cached;
   // Locale nav references are `es/...`; strip the locale so files resolve.
@@ -81,6 +81,8 @@ function pageInfo(page: string): { label: string; exists: boolean; badge?: NavBa
   const file = localizedFile ?? englishFile;
   let label = rel.split("/").pop() ?? rel;
   let badge: NavBadge | undefined;
+  let icon: string | undefined;
+  let hidden = false;
   if (file) {
     const src = fs.readFileSync(file, "utf8");
     const m = src.match(/^---\r?\n([\s\S]*?)\r?\n---/);
@@ -89,6 +91,8 @@ function pageInfo(page: string): { label: string; exists: boolean; badge?: NavBa
         const fm = (parseYaml(m[1]) ?? {}) as Record<string, unknown>;
         const st = fm.sidebarTitle ?? fm.title;
         if (typeof st === "string" && st.trim()) label = st.trim();
+        if (typeof fm.icon === "string" && fm.icon.trim()) icon = fm.icon.trim();
+        hidden = fm.hidden === true;
         if (typeof fm.openapi === "string") {
           const method = fm.openapi.match(/\b(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\s+\//i)?.[1]?.toLowerCase() as HttpMethod | undefined;
           if (method) badge = { text: method.toUpperCase(), variant: apiMethodVariant(method) };
@@ -98,7 +102,7 @@ function pageInfo(page: string): { label: string; exists: boolean; badge?: NavBa
       }
     }
   }
-  const info = { label, exists: Boolean(file), badge };
+  const info = { label, exists: Boolean(file), badge, icon, hidden };
   labelCache.set(page, info);
   return info;
 }
@@ -196,7 +200,7 @@ function noteOrder(groupPath: string, pages: string[]) {
 
 // ---------------------------------------------------------------- conversion
 type NimbusItem =
-  | { label: string; link: string; badge?: NavBadge }
+  | { label: string; link: string; badge?: NavBadge; icon?: string; hidden?: boolean }
   | { label: string; items: NimbusItem[]; collapsed?: boolean; segment?: string; landing?: string; icon?: string };
 
 function convertPages(pages: Json[], groupPath: string): NimbusItem[] {
@@ -223,7 +227,7 @@ function convertPages(pages: Json[], groupPath: string): NimbusItem[] {
       const info = pageInfo(p);
       if (!info.exists) missing.push(`${groupPath}: ${p}`);
       seenPages.add(p);
-      out.push({ label: info.label, link: pageLink(p), badge: info.badge });
+      out.push({ label: info.label, link: pageLink(p), badge: info.badge, icon: info.icon, hidden: info.hidden || undefined });
       continue;
     }
     if (p && typeof p === "object") {

bin/prepare-public.ts

@@ -111,11 +111,15 @@ fs.mkdirSync(output, { recursive: true });
 
 if (scope.remotePreview) {
   materialize(path.join(root, "public", "favicon.svg"), path.join(output, "favicon.svg"));
+  materialize(path.join(root, "images", "logo.svg"), path.join(output, "images", "logo.svg"));
   materialize(path.join(root, "images", "icons"), path.join(output, "images", "icons"));
 } else {
   for (const entry of fs.readdirSync(path.join(root, "public"))) {
+    if (entry === "images" || entry === "img") continue;
     materialize(path.join(root, "public", entry), path.join(output, entry));
   }
+  materialize(path.join(root, "images"), path.join(output, "images"));
+  materialize(path.join(root, "img"), path.join(output, "img"));
 }
 
 for (const remote of manifest.remotes) {

es/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

fr/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

index.mdx

@@ -14,8 +14,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

ja/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

ko/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

package.json

@@ -32,12 +32,14 @@
     "@cloudflare/nimbus-docs": "0.13.1",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@iconify-json/fa6-brands": "^1.2.6",
     "@iconify-json/fa6-solid": "^1.2.4",
     "@iconify-json/ph": "^1.2.0",
     "@inkeep/cxkit-react": "^0.5.119",
     "@readme/httpsnippet": "11.4.0",
     "@scalar/openapi-parser": "0.28.12",
     "@vercel/connect": "^2.0.2",
+    "@vercel/speed-insights": "^2.0.0",
     "astro": "~7.3.2",
     "clsx": "^2.1.1",
     "mermaid": "^11.17.2",

pt-BR/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

ru/index.mdx

@@ -15,8 +15,9 @@ export const localizeHref = (href) => {
 
 export const withDocsBase = (href) => {
     if (!href || !href.startsWith('/')) return href;
+    const canonicalHref = href.replace(/\/index(?=[?#]|$)/, '');
     const base = typeof window === 'undefined' || window.location.pathname.startsWith('/docs') ? '/docs' : '';
-    return base + href;
+    return base + canonicalHref;
 };
 
 export const navigateTo = (event, href) => {

snippets/components/RunnableCode/RunnableCode.jsx

@@ -35,7 +35,7 @@ export const RunnableCode = ({ children, run = false, showStats = true }) => {
 
   useEffect(() => {
     if (codeRef.current) {
-      const block = codeRef.current.querySelector('.code-block');
+      const block = codeRef.current.querySelector('.code-block, .nb-code-figure');
       if (block) {
         block.style.marginBottom = '0';
         block.style.marginTop = '0';
@@ -222,26 +222,16 @@ export const RunnableCode = ({ children, run = false, showStats = true }) => {
   };
 
   return (
-    <div className="not-prose" style={{ margin: '1rem 0', width: '100%', boxSizing: 'border-box', contain: 'inline-size' }}>
+    <div className="not-prose ch-runnable-code">
 
       {/* Code display + action bar */}
       <div>
-        <div ref={codeRef}>
+        <div ref={codeRef} className="ch-runnable-code__source">
           {children}
         </div>
 
         {/* Action bar */}
-        <div style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          padding: '6px 12px',
-          backgroundColor: headerBg,
-          borderWidth: '0 1px 1px 1px',
-          borderStyle: 'solid',
-          borderColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(11,11,11,0.1)',
-          borderRadius: '0 0 4px 4px',
-        }}>
+        <div className="ch-runnable-code__actions">
           <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
             {results && (
               <button
@@ -409,4 +399,4 @@ export const RunnableCode = ({ children, run = false, showStats = true }) => {
       )}
     </div>
   );
-};
+};