{title}
{title}
{
const { items, persist = false, class: className, ...attrs } = Astro.props;
const hash = sidebarHash(items);
type LazyGroup = Extract & { _lazyKey?: string };
+type IconItem = { icon?: string };
---
![]({withBase("/images/icons/icon-mcp.svg")}){kind=icon}
{
const { items, persist = false, class: className, ...attrs } = Astro.props;
const hash = sidebarHash(items);
type LazyGroup = Extract & { _lazyKey?: string }
) : item.type === "external" ? (
-
) : (
-
),
)}
diff --git a/src/components/ui/sidebar/SidebarChildren.astro b/src/components/ui/sidebar/SidebarChildren.astro
index 6612c2a95..399e4b27c 100644
--- a/src/components/ui/sidebar/SidebarChildren.astro
+++ b/src/components/ui/sidebar/SidebarChildren.astro
@@ -13,6 +13,7 @@ interface Props {
const { items } = Astro.props;
type LazyGroup = Extract & { _lazyKey?: string };
+type IconItem = { icon?: string };
---
-
@@ -31,9 +32,9 @@ type LazyGroup = Extract
diff --git a/src/components/ui/tabs/Tabs.astro b/src/components/ui/tabs/Tabs.astro
index e5c356fa0..b633764d8 100644
--- a/src/components/ui/tabs/Tabs.astro
+++ b/src/components/ui/tabs/Tabs.astro
@@ -8,6 +8,8 @@
* For manual control: TabsList, TabsTrigger, TabsContent.
*/
import { cn } from "@/lib/cn";
+import { nextTabId } from "@/lib/tab-id";
+import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";
import type { HTMLAttributes } from "astro/types";
import TabsList from "./TabsList.astro";
@@ -17,6 +19,68 @@ interface Props extends HTMLAttributes<"div"> {
}
const { syncKey, class: className, ...attrs } = Astro.props;
+const tabsId = nextTabId(Astro.locals);
+
+let renderedContent = await Astro.slots.render("default");
+
+const decodeAttribute = (value: string) => value.replace(
+ /&(?:quot|amp|lt|gt|#39|#x[0-9a-f]+|#\d+);/gi,
+ (entity) => {
+ const named: Record = {
+ """: '"', "&": "&", "<": "<", ">": ">", "'": "'",
+ };
+ const normalized = entity.toLowerCase();
+ if (named[normalized]) return named[normalized];
+ const numeric = normalized.startsWith("&#x")
+ ? Number.parseInt(normalized.slice(3, -1), 16)
+ : Number.parseInt(normalized.slice(2, -1), 10);
+ return Number.isFinite(numeric) ? String.fromCodePoint(numeric) : entity;
+ },
+);
+const readAttribute = (attributes: string, name: string) => {
+ const match = attributes.match(new RegExp(`(?:^|\\s)${name}="([^"]*)"`));
+ return match ? decodeAttribute(match[1] ?? "") : undefined;
+};
+
+const tabs: Array<{ label: string; icon?: string; panelId: string }> = [];
+let panelIndex = 0;
+let divDepth = 0;
+renderedContent = renderedContent.replace(
+ /<\/?div\b[^>]*>/g,
+ (tag) => {
+ if (tag.startsWith(" 0 && !/(?:^|\s)hidden(?:\s|=|$)/.test(rawAttributes) && "hidden",
+ ].filter(Boolean).join(" ");
+ return additions ? tag.slice(0, -1) + ` ${additions}>` : tag;
+ },
+);
+
+const triggerClass = "inline-flex shrink-0 cursor-pointer items-center gap-2 px-4 py-2 text-sm font-medium leading-6 whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground aria-selected:text-primary focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]";
+const isImageIcon = (icon: string) =>
+ icon.startsWith("/") ||
+ icon.startsWith("data:");
---
-
+ {tabs.map((tab, index) => (
+
+ ))}
+
diff --git a/src/components/ui/tabs/tabs.client.ts b/src/components/ui/tabs/tabs.client.ts
index b80e2df0e..e93520eb2 100644
--- a/src/components/ui/tabs/tabs.client.ts
+++ b/src/components/ui/tabs/tabs.client.ts
@@ -4,14 +4,9 @@ import { mount, initTabs } from "@cloudflare/nimbus-docs/client";
const TRIGGER_CLASS =
"inline-flex shrink-0 cursor-pointer items-center gap-2 px-4 py-2 text-sm font-medium leading-6 whitespace-nowrap text-muted-foreground transition-colors hover:text-foreground aria-selected:text-primary focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-[-2px]";
-const MINTLIFY_ICON_CDN =
- "https://d3gk2c5xim1je2.cloudfront.net/fontawesome/v7.2.0";
-
function appendIcon(button: HTMLButtonElement, icon: string): void {
const isImage =
icon.startsWith("/") ||
- icon.startsWith("http://") ||
- icon.startsWith("https://") ||
icon.startsWith("data:");
if (isImage) {
const image = document.createElement("img");
@@ -23,21 +18,9 @@ function appendIcon(button: HTMLButtonElement, icon: string): void {
return;
}
- // Bare names are Mintlify Font Awesome icons, not relative image paths.
- // Match Mintlify's masked-icon treatment so they inherit each tab's active
- // or inactive text colour. AWS is the only branded tab icon in the source.
- const family = icon === "aws" ? "brands" : "regular";
- const url = `${MINTLIFY_ICON_CDN}/${family}/${encodeURIComponent(icon)}.svg`;
- const mask = document.createElement("span");
- mask.setAttribute("aria-hidden", "true");
- mask.className = "block h-4 w-4 shrink-0";
- mask.style.backgroundColor = "currentColor";
- mask.style.setProperty(
- "-webkit-mask",
- `url("${url}") center / contain no-repeat`,
- );
- mask.style.mask = `url("${url}") center / contain no-repeat`;
- button.append(mask);
+ // Named icons are normally rendered into the initial HTML. If a custom
+ // integration supplies panels only at runtime, keep its label usable
+ // without introducing a runtime dependency on an external icon service.
}
let counter = 0;
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 7483b9d37..21a7f8cb3 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -4,11 +4,13 @@ import "@fontsource-variable/jetbrains-mono";
import "../styles/globals.css";
import "../styles/prose.css";
import { ClientRouter } from "astro:transitions";
+import SpeedInsights from "@vercel/speed-insights/astro";
import { config } from "virtual:nimbus/config";
import { getCollectionLlmsUrl, getVersionStatus } from "@cloudflare/nimbus-docs";
import AgentDirective from "@/components/AgentDirective.astro";
import InkeepSearch from "@/components/InkeepSearch";
import NimbusHead from "@/components/NimbusHead.astro";
+import { inlinePublicIcon } from "@/lib/build-icon";
import type { BasePageProps } from "@cloudflare/nimbus-docs/types";
export interface Alternate { hreflang: string; href: string }
@@ -51,6 +53,7 @@ const llmsIndexPath = collection
const llmsUrl = Astro.site
? new URL(llmsIndexPath, Astro.site).href
: llmsIndexPath;
+const projectLogo = inlinePublicIcon("/images/logo.svg");
---
@@ -222,7 +225,7 @@ const llmsUrl = Astro.site
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={projectLogo}
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?"
data-mcp-enabled="false"
@@ -235,9 +238,11 @@ const llmsUrl = Astro.site
+
-