docusaurus-plugin-mcp-server 0.5.0 → 0.6.0

package/dist/theme/index.d.mts

@@ -9,7 +9,7 @@ interface McpInstallButtonProps {
     serverUrl?: string;
     /** Server name. If not provided, uses plugin configuration. */
     serverName?: string;
-    /** Button label (default: "Install MCP") */
+    /** Button label (default: "Install docs MCP") */
     label?: string;
     /** Optional className for styling */
     className?: string;
@@ -18,6 +18,7 @@ interface McpInstallButtonProps {
 }
 /**
  * A dropdown button component for installing MCP servers in various AI tools.
+ * Uses Docusaurus/Infima CSS classes for consistent theming.
  *
  * @example
  * ```tsx

package/dist/theme/index.d.ts

@@ -9,7 +9,7 @@ interface McpInstallButtonProps {
     serverUrl?: string;
     /** Server name. If not provided, uses plugin configuration. */
     serverName?: string;
-    /** Button label (default: "Install MCP") */
+    /** Button label (default: "Install docs MCP") */
     label?: string;
     /** Optional className for styling */
     className?: string;
@@ -18,6 +18,7 @@ interface McpInstallButtonProps {
 }
 /**
  * A dropdown button component for installing MCP servers in various AI tools.
+ * Uses Docusaurus/Infima CSS classes for consistent theming.
  *
  * @example
  * ```tsx

package/dist/theme/index.js

@@ -4,9 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 var browser = require('@gleanwork/mcp-config-schema/browser');
+var IconCopy = require('@theme/Icon/Copy');
+var IconSuccess = require('@theme/Icon/Success');
 var useGlobalData = require('@docusaurus/useGlobalData');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var IconCopy__default = /*#__PURE__*/_interopDefault(IconCopy);
+var IconSuccess__default = /*#__PURE__*/_interopDefault(IconSuccess);
+
 // src/theme/McpInstallButton.tsx
 function createDocsRegistryOptions(config) {
   return {
@@ -40,10 +47,107 @@ function useMcpRegistry() {
   }, [pluginData?.serverUrl, pluginData?.serverName]);
   return result;
 }
+function IconMcp({ size = 16 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 170 195",
+      width: size,
+      height: size,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M25 97.8528L92.8823 29.9706C102.255 20.598 117.451 20.598 126.823 29.9706C136.196 39.3431 136.196 54.5391 126.823 63.9117L75.5581 115.177",
+            stroke: "currentColor",
+            strokeWidth: "12",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M76.2653 114.47L126.823 63.9117C136.196 54.5391 151.392 54.5391 160.765 63.9117L161.118 64.2652C170.491 73.6378 170.491 88.8338 161.118 98.2063L99.7248 159.6C96.6006 162.724 96.6006 167.789 99.7248 170.913L112.331 183.52",
+            stroke: "currentColor",
+            strokeWidth: "12",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M109.853 46.9411L59.6482 97.1457C50.2757 106.518 50.2757 121.714 59.6482 131.087C69.0208 140.459 84.2168 140.459 93.5894 131.087L143.794 80.8822",
+            stroke: "currentColor",
+            strokeWidth: "12",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function IconChevron({ isOpen }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      style: {
+        display: "block",
+        transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+        transition: "transform var(--ifm-transition-fast)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M2.5 4.5L6 8L9.5 4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          fill: "none"
+        }
+      )
+    }
+  );
+}
+function IconExternalLink() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { display: "block", marginLeft: "4px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M3.5 3C3.22386 3 3 3.22386 3 3.5C3 3.77614 3.22386 4 3.5 4H7.29289L3.14645 8.14645C2.95118 8.34171 2.95118 8.65829 3.14645 8.85355C3.34171 9.04882 3.65829 9.04882 3.85355 8.85355L8 4.70711V8.5C8 8.77614 8.22386 9 8.5 9C8.77614 9 9 8.77614 9 8.5V3.5C9 3.22386 8.77614 3 8.5 3H3.5Z"
+    }
+  ) });
+}
+function CodeBlock({
+  code,
+  isMultiline = false,
+  isCopied,
+  onCopy
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mcp-code-block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mcp-code-block__content", children: isMultiline ? /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "mcp-code-block__pre", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) }) : /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "mcp-code-block__copy",
+        onClick: onCopy,
+        title: isCopied ? "Copied!" : "Copy to clipboard",
+        "aria-label": isCopied ? "Copied" : "Copy to clipboard",
+        children: isCopied ? /* @__PURE__ */ jsxRuntime.jsx(IconSuccess__default.default, { className: "mcp-code-block__icon mcp-code-block__icon--success" }) : /* @__PURE__ */ jsxRuntime.jsx(IconCopy__default.default, { className: "mcp-code-block__icon" })
+      }
+    )
+  ] });
+}
 function McpInstallButton({
   serverUrl: serverUrlProp,
   serverName: serverNameProp,
-  label = "Install MCP",
+  label = "Install docs MCP",
   className = "",
   clients: clientsProp
 }) {
@@ -82,10 +186,13 @@ function McpInstallButton({
     return null;
   }
   const clientConfigs = react.useMemo(() => {
+    let clients;
     if (clientsProp) {
-      return clientsProp.map((id) => registry.getConfig(id)).filter((c) => c !== void 0);
+      clients = clientsProp.map((id) => registry.getConfig(id)).filter((c) => c !== void 0);
+    } else {
+      clients = registry.getNativeHttpClients();
     }
-    return registry.getNativeHttpClients();
+    return clients.sort((a, b) => a.displayName.localeCompare(b.displayName));
   }, [registry, clientsProp]);
   const copyToClipboard = react.useCallback(async (text, clientId) => {
     try {
@@ -98,196 +205,244 @@ function McpInstallButton({
   }, []);
   const getConfigForClient = react.useCallback(
     (clientId) => {
-      const builder = registry.createBuilder(clientId);
-      const clientConfig = builder.buildConfiguration({
-        transport: "http",
-        serverUrl: config.serverUrl,
-        serverName: config.serverName
-      });
-      return JSON.stringify(clientConfig, null, 2);
+      try {
+        const builder = registry.createBuilder(clientId);
+        const clientConfig = builder.buildConfiguration({
+          transport: "http",
+          serverUrl: config.serverUrl,
+          serverName: config.serverName
+        });
+        return JSON.stringify(clientConfig, null, 2);
+      } catch {
+        return null;
+      }
     },
     [registry, config.serverUrl, config.serverName]
   );
   const getCommandForClient = react.useCallback(
     (clientId) => {
-      const builder = registry.createBuilder(clientId);
-      const cliStatus = builder.supportsCliInstallation();
-      if (!cliStatus.supported) {
+      try {
+        const builder = registry.createBuilder(clientId);
+        const cliStatus = builder.supportsCliInstallation();
+        if (!cliStatus.supported) {
+          return null;
+        }
+        return builder.buildCommand({
+          transport: "http",
+          serverUrl: config.serverUrl,
+          serverName: config.serverName
+        });
+      } catch {
         return null;
       }
-      return builder.buildCommand({
-        transport: "http",
-        serverUrl: config.serverUrl,
-        serverName: config.serverName
-      });
     },
     [registry, config.serverUrl, config.serverName]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: `mcp-install-button ${className}`, style: styles.container, children: [
+  const dropdownClasses = [
+    "dropdown",
+    "dropdown--right",
+    isOpen ? "dropdown--show" : "",
+    "mcp-install-dropdown",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownClasses, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        className: "button button--primary mcp-install-dropdown__button",
         onClick: () => setIsOpen(!isOpen),
-        style: styles.button,
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         children: [
-          label,
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.caret, children: isOpen ? "\u25B2" : "\u25BC" })
+          /* @__PURE__ */ jsxRuntime.jsx(IconMcp, { size: 16 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { isOpen })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.dropdown, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.dropdownHeader, children: "Choose your AI tool:" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "dropdown__menu mcp-install-dropdown__menu", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "mcp-install-dropdown__header", children: "Choose your AI tool:" }),
       clientConfigs.map((client) => {
         const command = getCommandForClient(client.id);
-        const config2 = getConfigForClient(client.id);
+        const clientConfig = getConfigForClient(client.id);
         const isCopied = copiedClient === client.id;
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.clientSection, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.clientHeader, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles.clientName, children: client.displayName }) }),
-          command ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.codeBlock, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("code", { style: styles.code, children: command }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => copyToClipboard(command, client.id),
-                style: styles.copyButton,
-                title: "Copy to clipboard",
-                children: isCopied ? "\u2713" : "\u{1F4CB}"
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles.codeBlock, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("pre", { style: styles.pre, children: /* @__PURE__ */ jsxRuntime.jsx("code", { style: styles.code, children: config2 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => copyToClipboard(config2, client.id),
-                style: styles.copyButton,
-                title: "Copy to clipboard",
-                children: isCopied ? "\u2713" : "\u{1F4CB}"
-              }
-            )
+        if (!command && !clientConfig) {
+          return null;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "mcp-install-dropdown__item", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mcp-install-dropdown__client-header", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mcp-install-dropdown__client-name", children: client.displayName }),
+            command && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "badge badge--success", children: "CLI" })
           ] }),
-          client.localConfigNotes && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.notes, children: client.localConfigNotes })
+          command ? /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock,
+            {
+              code: command,
+              isCopied,
+              onCopy: () => copyToClipboard(command, client.id)
+            }
+          ) : clientConfig ? /* @__PURE__ */ jsxRuntime.jsx(
+            CodeBlock,
+            {
+              code: clientConfig,
+              isMultiline: true,
+              isCopied,
+              onCopy: () => copyToClipboard(clientConfig, client.id)
+            }
+          ) : null,
+          client.localConfigNotes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mcp-install-dropdown__notes", children: client.localConfigNotes })
         ] }, client.id);
       }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("li", { className: "mcp-install-dropdown__footer", children: /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
         {
           href: "https://modelcontextprotocol.io/",
           target: "_blank",
           rel: "noopener noreferrer",
-          style: styles.learnMore,
-          children: "Learn more about MCP \u2192"
+          className: "mcp-install-dropdown__learn-more",
+          children: [
+            "Learn more about MCP",
+            /* @__PURE__ */ jsxRuntime.jsx(IconExternalLink, {})
+          ]
         }
       ) })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        .mcp-install-dropdown {
+          --mcp-dropdown-width: 520px;
+          /* Always use dark code blocks for consistency across themes */
+          --mcp-code-bg: #1e1e1e;
+          --mcp-code-color: #e5e7eb;
+        }
+
+        .mcp-install-dropdown__button {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        .mcp-install-dropdown__menu {
+          width: var(--mcp-dropdown-width);
+          padding: 0;
+          top: calc(100% + 0.25rem);
+        }
+
+        .mcp-install-dropdown__header {
+          padding: 0.75rem 1rem;
+          font-size: var(--ifm-font-size-small);
+          font-weight: var(--ifm-font-weight-semibold);
+          color: var(--ifm-color-secondary-darkest);
+          background-color: var(--ifm-background-color);
+          border-bottom: 1px solid var(--ifm-toc-border-color);
+        }
+
+        .mcp-install-dropdown__item {
+          padding: 0.875rem 1rem;
+          border-bottom: 1px solid var(--ifm-toc-border-color);
+        }
+
+        .mcp-install-dropdown__client-header {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          margin-bottom: 0.625rem;
+        }
+
+        .mcp-install-dropdown__client-name {
+          font-weight: var(--ifm-font-weight-semibold);
+          color: var(--ifm-font-color-base);
+        }
+
+        .mcp-install-dropdown__notes {
+          margin: 0.5rem 0 0;
+          font-size: var(--ifm-font-size-small);
+          color: var(--ifm-color-secondary-darkest);
+          line-height: 1.4;
+        }
+
+        .mcp-install-dropdown__footer {
+          padding: 0.75rem 1rem;
+          text-align: center;
+          background-color: var(--ifm-background-color);
+        }
+
+        .mcp-install-dropdown__learn-more {
+          display: inline-flex;
+          align-items: center;
+          font-size: var(--ifm-font-size-small);
+          font-weight: var(--ifm-font-weight-semibold);
+          color: var(--ifm-color-primary);
+          text-decoration: none;
+        }
+
+        .mcp-install-dropdown__learn-more:hover {
+          color: var(--ifm-color-primary-dark);
+          text-decoration: none;
+        }
+
+        /* Code block styles */
+        .mcp-code-block {
+          display: flex;
+          border-radius: var(--ifm-code-border-radius, 0.25rem);
+          overflow: hidden;
+        }
+
+        .mcp-code-block__content {
+          flex: 1;
+          background-color: var(--mcp-code-bg);
+          padding: 0.75rem 1rem;
+          overflow-x: auto;
+        }
+
+        .mcp-code-block__content code {
+          font-family: var(--ifm-font-family-monospace);
+          font-size: var(--ifm-code-font-size);
+          color: var(--mcp-code-color);
+          background: none;
+          padding: 0;
+          border: none;
+          white-space: nowrap;
+        }
+
+        .mcp-code-block__pre {
+          margin: 0;
+          background: none;
+          max-height: 120px;
+          overflow-y: auto;
+        }
+
+        .mcp-code-block__pre code {
+          white-space: pre;
+        }
+
+        .mcp-code-block__copy {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 2.75rem;
+          background-color: var(--ifm-color-gray-800, #374151);
+          border: none;
+          cursor: pointer;
+          color: var(--ifm-color-gray-400, #9ca3af);
+          transition: background-color var(--ifm-transition-fast);
+        }
+
+        .mcp-code-block__copy:hover {
+          background-color: var(--ifm-color-gray-700, #4b5563);
+        }
+
+        .mcp-code-block__icon {
+          width: 16px;
+          height: 16px;
+          display: block;
+        }
+
+        .mcp-code-block__icon--success {
+          color: var(--ifm-color-success, #22c55e);
+        }
+      ` })
   ] });
 }
-var styles = {
-  container: {
-    position: "relative",
-    display: "inline-block"
-  },
-  button: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "6px",
-    padding: "8px 16px",
-    fontSize: "14px",
-    fontWeight: 500,
-    color: "#fff",
-    backgroundColor: "#5B4DC7",
-    border: "none",
-    borderRadius: "6px",
-    cursor: "pointer",
-    transition: "background-color 0.2s"
-  },
-  caret: {
-    fontSize: "10px"
-  },
-  dropdown: {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    marginTop: "8px",
-    width: "380px",
-    maxHeight: "70vh",
-    overflowY: "auto",
-    backgroundColor: "#fff",
-    borderRadius: "8px",
-    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
-    zIndex: 1e3
-  },
-  dropdownHeader: {
-    padding: "12px 16px",
-    fontSize: "13px",
-    fontWeight: 600,
-    color: "#666",
-    borderBottom: "1px solid #eee"
-  },
-  clientSection: {
-    padding: "12px 16px",
-    borderBottom: "1px solid #eee"
-  },
-  clientHeader: {
-    display: "flex",
-    alignItems: "center",
-    marginBottom: "8px"
-  },
-  clientName: {
-    fontSize: "14px",
-    fontWeight: 600,
-    color: "#333"
-  },
-  codeBlock: {
-    position: "relative",
-    backgroundColor: "#f6f8fa",
-    borderRadius: "6px",
-    padding: "10px 40px 10px 12px"
-  },
-  pre: {
-    margin: 0,
-    fontSize: "12px",
-    lineHeight: 1.4,
-    overflow: "auto",
-    maxHeight: "120px"
-  },
-  code: {
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-    fontSize: "12px",
-    color: "#24292f",
-    whiteSpace: "pre-wrap",
-    wordBreak: "break-all"
-  },
-  copyButton: {
-    position: "absolute",
-    top: "8px",
-    right: "8px",
-    padding: "4px 8px",
-    fontSize: "14px",
-    backgroundColor: "transparent",
-    border: "none",
-    cursor: "pointer",
-    opacity: 0.6,
-    transition: "opacity 0.2s"
-  },
-  notes: {
-    marginTop: "8px",
-    fontSize: "11px",
-    color: "#666",
-    fontStyle: "italic"
-  },
-  footer: {
-    padding: "12px 16px",
-    textAlign: "center"
-  },
-  learnMore: {
-    fontSize: "12px",
-    color: "#5B4DC7",
-    textDecoration: "none"
-  }
-};
 var McpInstallButton_default = McpInstallButton;
 
 exports.McpInstallButton = McpInstallButton;