@redocly/theme 0.70.0-next.1 → 0.70.0-next.10

package/src/core/hooks/use-mcp-config.ts

@@ -1,61 +0,0 @@
-import { useMemo } from 'react';
-
-import { useThemeHooks } from './use-theme-hooks';
-import { IS_BROWSER } from '../utils/dom';
-import { DEFAULT_MCP_SERVER_NAME, MCP_ROUTE, PUBLIC_MCP_ROUTE } from '../constants';
-import { generateMCPDeepLink } from '../utils/mcp';
-import { withPathPrefix } from '../utils/urls';
-
-export type McpConfig = {
-  serverName: string;
-  origin: string;
-  serverUrl: string;
-  cursorUrl: string;
-  vscodeUrl: string;
-  isMcpDisabled: boolean;
-  isPublicEndpointPage: boolean;
-  alternateServerUrl?: string;
-};
-
-export function useMCPConfig(): McpConfig {
-  const { useMcpData, usePageData } = useThemeHooks();
-
-  const {
-    docs: { enabled, name, publicEndpoint },
-  } = useMcpData();
-  const pageSlug = usePageData()?.slug;
-
-  const origin = IS_BROWSER
-    ? window.location.origin
-    : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
-  const serverName = name || DEFAULT_MCP_SERVER_NAME;
-  const isPublicEndpointPage = pageSlug === withPathPrefix(PUBLIC_MCP_ROUTE);
-  const serverUrl = `${origin}${withPathPrefix(isPublicEndpointPage ? PUBLIC_MCP_ROUTE : MCP_ROUTE)}`;
-  const alternateServerUrl = isPublicEndpointPage
-    ? `${origin}${withPathPrefix(MCP_ROUTE)}`
-    : publicEndpoint
-      ? `${origin}${withPathPrefix(PUBLIC_MCP_ROUTE)}`
-      : undefined;
-  const isMcpDisabled = !enabled || false;
-
-  const cursorUrl = useMemo(
-    () => generateMCPDeepLink('cursor', { serverName, url: serverUrl }),
-    [serverName, serverUrl],
-  );
-
-  const vscodeUrl = useMemo(
-    () => generateMCPDeepLink('vscode', { serverName, url: serverUrl }),
-    [serverName, serverUrl],
-  );
-
-  return {
-    serverName,
-    origin,
-    serverUrl,
-    cursorUrl,
-    vscodeUrl,
-    isMcpDisabled,
-    isPublicEndpointPage,
-    alternateServerUrl,
-  };
-}

package/src/core/hooks/use-mobile-menu.ts

@@ -1,25 +0,0 @@
-import { useState } from 'react';
-import { useLocation } from 'react-router';
-
-import { useModalScrollLock } from './use-modal-scroll-lock';
-
-export function useMobileMenu(initialState = false) {
-  const location = useLocation();
-  const [isOpen, setIsOpen] = useState(initialState);
-  const locationKey = `${location.pathname}${location.hash}`;
-  const [prevLocationKey, setPrevLocationKey] = useState(locationKey);
-
-  if (isOpen && prevLocationKey !== locationKey) {
-    setPrevLocationKey(locationKey);
-    setIsOpen(false);
-  }
-  useModalScrollLock(isOpen);
-
-  const openMobileMenu = () => {
-    setPrevLocationKey(locationKey);
-    setIsOpen(true);
-  };
-  const closeMobileMenu = () => setIsOpen(false);
-
-  return { isOpen, openMobileMenu, closeMobileMenu };
-}

package/src/core/hooks/use-modal-scroll-lock.ts

@@ -1,56 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export function useModalScrollLock(isOpen: boolean): void {
-  const originalBodyStylesRef = useRef<{
-    overflow: string;
-    paddingRight: string;
-    scrollbarWidth: string | null;
-  } | null>(null);
-
-  useEffect(() => {
-    if (typeof window === 'undefined' || typeof document === 'undefined') {
-      return;
-    }
-
-    const { body, documentElement } = document;
-
-    const restoreOriginalBodyStyles = () => {
-      if (!originalBodyStylesRef.current) return;
-
-      const { overflow, paddingRight, scrollbarWidth } = originalBodyStylesRef.current;
-
-      body.style.overflow = overflow;
-      body.style.paddingRight = paddingRight;
-      if (scrollbarWidth) {
-        documentElement.style.setProperty('--modal-scrollbar-width', scrollbarWidth);
-      } else {
-        documentElement.style.removeProperty('--modal-scrollbar-width');
-      }
-
-      originalBodyStylesRef.current = null;
-    };
-
-    if (isOpen && !originalBodyStylesRef.current) {
-      originalBodyStylesRef.current = {
-        overflow: body.style.overflow,
-        paddingRight: body.style.paddingRight,
-        scrollbarWidth: documentElement.style.getPropertyValue('--modal-scrollbar-width') || null,
-      };
-
-      const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
-      body.style.overflow = 'hidden';
-
-      if (scrollbarWidth > 0) {
-        body.style.paddingRight = `${scrollbarWidth}px`;
-        documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
-      }
-    } else if (!isOpen && originalBodyStylesRef.current) {
-      restoreOriginalBodyStyles();
-    }
-
-    // Cleanup only if component unmounts while modal is open
-    return () => {
-      restoreOriginalBodyStyles();
-    };
-  }, [isOpen]);
-}

package/src/core/hooks/use-mount.ts

@@ -1,8 +0,0 @@
-import { useEffect } from 'react';
-
-export const useMount = (callback: () => void): void => {
-  useEffect(() => {
-    callback();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-};

package/src/core/hooks/use-navbar-height.ts

@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Location } from 'react-router';
-
-import { getNavbarElement } from '../utils/get-navbar-element';
-
-export type UseNavbarHeightReturnType = number;
-
-export function useNavbarHeight(location: Location): UseNavbarHeightReturnType {
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    const navbar = getNavbarElement();
-    setHeight((navbar && navbar.clientHeight) || 0);
-  }, [location.pathname]);
-
-  useEffect(() => {
-    window.requestAnimationFrame(() => {
-      const navbar = getNavbarElement();
-      setHeight((navbar && navbar.clientHeight) || 0);
-    });
-  }, []);
-
-  return height;
-}

package/src/core/hooks/use-outside-click.ts

@@ -1,34 +0,0 @@
-import { useEffect } from 'react';
-
-import type { RefObject } from 'react';
-
-type OutsideClickRef = RefObject<HTMLElement | null>;
-
-export function useOutsideClick(
-  refs: OutsideClickRef | OutsideClickRef[],
-  handler?: (event: MouseEvent | TouchEvent) => void,
-): void {
-  useEffect(() => {
-    const refList = Array.isArray(refs) ? refs : [refs];
-
-    const listener = (event: MouseEvent | TouchEvent) => {
-      if (!handler) return;
-
-      const target = event.target as Node;
-
-      const isInside = refList.some((ref) => ref.current && ref.current.contains(target));
-
-      if (!isInside) {
-        handler(event);
-      }
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [refs, handler]);
-}

package/src/core/hooks/use-page-actions.ts

@@ -1,352 +0,0 @@
-import { useMemo, useCallback } from 'react';
-
-import type { PageProps, UiAccessibleConfig } from '@redocly/config';
-import type { PageAction, MCPClientType, McpConnectionParams } from '../types';
-
-import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
-import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
-import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
-import { MarkdownFullIcon } from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
-import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
-import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
-
-import { useThemeHooks } from './use-theme-hooks';
-import { useThemeConfig } from './use-theme-config';
-import { useMCPConfig } from './use-mcp-config';
-import { ClipboardService } from '../utils/clipboard-service';
-import { IS_BROWSER } from '../utils/dom';
-import { generateMCPDeepLink } from '../utils/mcp';
-import {
-  addTrailingSlash,
-  combineUrls,
-  removeTrailingSlash,
-  withoutPathPrefix,
-} from '../utils/urls';
-import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
-
-const DEFAULT_ENABLED_ACTIONS = [
-  'copy',
-  'view',
-  'chatgpt',
-  'claude',
-  'docs-mcp-cursor',
-  'docs-mcp-vscode',
-] as const;
-
-export type PageActionType =
-  | 'copy'
-  | 'view'
-  | 'chatgpt'
-  | 'claude'
-  | 'docs-mcp-cursor'
-  | 'docs-mcp-vscode'
-  // Used in OpenAPI docs x-mcp
-  | 'mcp-cursor'
-  | 'mcp-vscode';
-
-export function usePageActions(
-  pageSlug: string,
-  mcpUrl?: string,
-  actions?: PageActionType[],
-): PageAction[] {
-  const { useTranslate, usePageData, usePageProps, usePageSharedData, useTelemetry } =
-    useThemeHooks();
-  const { translate } = useTranslate();
-  const themeConfig = useThemeConfig();
-  const pageProps = usePageProps();
-  const telemetry = useTelemetry();
-  const apiDocsSharedData = usePageSharedData<
-    { options: { excludeFromSearch: boolean } } | undefined
-  >('apiDocsStore');
-  const apiDocsExcludeFromSearch = apiDocsSharedData?.options?.excludeFromSearch;
-  const isApiDocsPage = Boolean(apiDocsSharedData);
-  const mcpConfig = useMCPConfig();
-
-  const { isPublic } = usePageData() || {};
-
-  const createMCPHandler = useCallback(
-    (clientType: MCPClientType, requiresMcpUrl: boolean = false) =>
-      (): PageAction => {
-        const config = requiresMcpUrl
-          ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
-          : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
-
-        const isDocsMcp = !requiresMcpUrl;
-
-        return createMCPAction({
-          clientType,
-          mcpConfig: config,
-          translate,
-          onClickCallback: isDocsMcp
-            ? () =>
-                telemetry.sendPageActionsClickedMessage([
-                  {
-                    ...getBaseDataAttributes('pageActions', 'button'),
-                    actionType: `docs-mcp-${clientType}` as const,
-                  },
-                ])
-            : undefined,
-        });
-      },
-    [mcpUrl, mcpConfig, translate, telemetry],
-  );
-
-  const result: PageAction[] = useMemo(() => {
-    const hideActionContext: ShouldHideActionContext = {
-      pageProps,
-      themeConfig,
-      apiDocsExcludeFromSearch,
-      isApiDocsPage,
-      isPublic,
-      mcpUrl,
-      isMcpDisabled: mcpConfig.isMcpDisabled,
-    };
-
-    const origin = IS_BROWSER
-      ? window.location.origin
-      : ((globalThis as { SSR_HOSTNAME?: string })['SSR_HOSTNAME'] ?? '');
-    const pathname = addTrailingSlash(pageSlug);
-    const isRoot = withoutPathPrefix(pathname) === '/';
-    const mdPageUrl = isRoot
-      ? combineUrls(origin, pathname, 'index.html.md')
-      : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
-
-    const actionHandlers: Record<PageActionType, () => PageAction> = {
-      'docs-mcp-cursor': createMCPHandler('cursor', false),
-      'docs-mcp-vscode': createMCPHandler('vscode', false),
-      'mcp-cursor': createMCPHandler('cursor', true),
-      'mcp-vscode': createMCPHandler('vscode', true),
-
-      copy: () => ({
-        buttonText: translate('page.actions.copyButtonText', 'Copy'),
-        title: translate('page.actions.copyTitle', 'Copy for LLM'),
-        description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
-        iconComponent: CopyIcon,
-        onClick: async () => {
-          try {
-            const result = await fetch(mdPageUrl);
-            if (result.status !== 200) {
-              return;
-            }
-            const text = await result.text();
-            ClipboardService.copyCustom(text);
-            telemetry.sendPageActionsClickedMessage([
-              {
-                ...getBaseDataAttributes('pageActions', 'button'),
-                actionType: 'copy',
-              },
-            ]);
-          } catch (error) {
-            console.error(error);
-          }
-        },
-      }),
-
-      view: () => ({
-        buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
-        title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
-        description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
-        iconComponent: MarkdownFullIcon,
-        link: mdPageUrl,
-        onClick: () => {
-          telemetry.sendPageActionsClickedMessage([
-            {
-              ...getBaseDataAttributes('pageActions', 'button'),
-              actionType: 'view',
-            },
-          ]);
-        },
-      }),
-
-      chatgpt: () => {
-        const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
-        return {
-          buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-          title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-          description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
-          iconComponent: ChatGptIcon,
-          link,
-          onClick: () => {
-            telemetry.sendPageActionsClickedMessage([
-              {
-                ...getBaseDataAttributes('pageActions', 'button'),
-                actionType: 'chatgpt',
-              },
-            ]);
-            window.location.href = link;
-          },
-        };
-      },
-
-      claude: () => {
-        const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
-        return {
-          buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-          title: translate('page.actions.claudeTitle', 'Open in Claude'),
-          description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-          iconComponent: ClaudeIcon,
-          link,
-          onClick: () => {
-            telemetry.sendPageActionsClickedMessage([
-              {
-                ...getBaseDataAttributes('pageActions', 'button'),
-                actionType: 'claude',
-              },
-            ]);
-            window.location.href = link;
-          },
-        };
-      },
-    };
-
-    return (themeConfig.navigation?.actions?.items || actions || DEFAULT_ENABLED_ACTIONS)
-      .filter((action) => !shouldHideAction(action, hideActionContext))
-      .map((action) => actionHandlers[action]());
-  }, [
-    pageProps,
-    themeConfig,
-    apiDocsExcludeFromSearch,
-    isApiDocsPage,
-    isPublic,
-    mcpUrl,
-    mcpConfig.isMcpDisabled,
-    pageSlug,
-    actions,
-    translate,
-    createMCPHandler,
-    telemetry,
-  ]);
-
-  return result;
-}
-
-function getExternalAiPromptLink(baseUrl: string, mdPageUrl: string): string {
-  const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-  const url = new URL(baseUrl);
-  url.searchParams.set('q', externalAiPrompt);
-  return url.toString();
-}
-
-type CreateMCPActionParams = {
-  clientType: MCPClientType;
-  mcpConfig: McpConnectionParams;
-  translate: (key: string, defaultValue: string) => string;
-  onClickCallback?: () => void;
-};
-
-function createMCPAction({
-  clientType,
-  mcpConfig,
-  translate,
-  onClickCallback,
-}: CreateMCPActionParams): PageAction {
-  const url = generateMCPDeepLink(clientType, mcpConfig);
-  const sharedProps = {
-    onClick: () => {
-      onClickCallback?.();
-      window.open(url, '_blank');
-    },
-  };
-
-  if (clientType === 'cursor') {
-    return {
-      ...sharedProps,
-      buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'),
-      title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'),
-      description: translate(
-        'page.actions.connectMcp.cursorDescription',
-        'Install MCP server on Cursor',
-      ),
-      iconComponent: CursorIcon,
-    };
-  }
-
-  return {
-    ...sharedProps,
-    buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
-    title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'),
-    description: translate(
-      'page.actions.connectMcp.vscodeDescription',
-      'Install MCP server on VS Code',
-    ),
-    iconComponent: VSCodeIcon,
-  };
-}
-
-type ShouldHideActionContext = {
-  pageProps: PageProps;
-  themeConfig: UiAccessibleConfig;
-  apiDocsExcludeFromSearch?: boolean;
-  isApiDocsPage: boolean;
-  isPublic?: boolean;
-  mcpUrl?: string;
-  isMcpDisabled: boolean;
-};
-
-function shouldHideAction(
-  action: PageActionType,
-  {
-    pageProps,
-    themeConfig,
-    apiDocsExcludeFromSearch,
-    isApiDocsPage,
-    isPublic,
-    mcpUrl,
-    isMcpDisabled,
-  }: ShouldHideActionContext,
-): boolean {
-  // Page actions are explicitly disabled in config
-  if (themeConfig.navigation?.actions?.hide) {
-    return true;
-  }
-
-  const actionDependsOnLlmsTxt = ['view', 'copy', 'chatgpt', 'claude'].includes(action);
-
-  if (actionDependsOnLlmsTxt) {
-    // Can't use any actions if search is globally disabled (markdown files are not generated)
-    if (themeConfig.search?.hide) {
-      return true;
-    }
-    // Can't use any actions if no markdown files are generated for LLMs
-    if (pageProps?.seo?.llmstxt?.hide) {
-      return true;
-    }
-
-    const isPageExcludedFromSearch =
-      pageProps?.frontmatter?.excludeFromSearch || (isApiDocsPage && apiDocsExcludeFromSearch);
-
-    if (isPageExcludedFromSearch) {
-      return true;
-    }
-  }
-
-  return shouldHideActionByType(action, { isPublic, mcpUrl, isMcpDisabled });
-}
-
-function shouldHideActionByType(
-  action: PageActionType,
-  {
-    isPublic,
-    mcpUrl,
-    isMcpDisabled,
-  }: Pick<ShouldHideActionContext, 'isPublic' | 'mcpUrl' | 'isMcpDisabled'>,
-): boolean {
-  switch (action) {
-    case 'chatgpt':
-    case 'claude':
-      return !isPublic;
-    case 'docs-mcp-cursor':
-    case 'docs-mcp-vscode':
-      return Boolean(mcpUrl) || isMcpDisabled;
-    case 'mcp-cursor':
-    case 'mcp-vscode':
-      return !mcpUrl;
-    case 'copy':
-    case 'view':
-      return false;
-    default: {
-      action satisfies never;
-      return true;
-    }
-  }
-}

package/src/core/hooks/use-page-versions.ts

@@ -1,20 +0,0 @@
-import { useThemeHooks } from './use-theme-hooks';
-
-export type PageVersion = {
-  active: boolean;
-  default: boolean;
-  label: string;
-  version: string;
-};
-
-export function usePageVersions(): PageVersion[] {
-  const { usePageVersions } = useThemeHooks();
-  const pageVersions = usePageVersions();
-
-  return pageVersions.versions.map((version) => ({
-    active: version.active,
-    default: version.default,
-    label: version.label,
-    version: version.version,
-  }));
-}

package/src/core/hooks/use-product-picker.ts

@@ -1,49 +0,0 @@
-import { useRef } from 'react';
-import { useNavigate } from 'react-router';
-
-import { getProductClassName } from '@redocly/theme/components/Product/utils';
-
-import { useThemeHooks } from './use-theme-hooks';
-import { withPathPrefix, generateBeforeAfterContext, getSafeClassName } from '../utils';
-
-export function useProductPicker() {
-  const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
-  const currentProduct = useCurrentProduct();
-  const products = useProducts();
-  const telemetry = useTelemetry();
-  const navigate = useNavigate();
-  const loadAndNavigate = useLoadAndNavigate();
-  // An open dropdown can fire a menu item's onAction from an earlier render, so `product.link`
-  // may be stale (e.g. after a locale switch); resolve the live product via a ref.
-  const productsRef = useRef(products);
-  productsRef.current = products;
-  function setProduct(product: typeof currentProduct) {
-    if (!product) return;
-    // match on `name` (locale-stable; link/slug are re-localized)
-    const freshProduct = productsRef.current.find((p) => p.name === product.name) ?? product;
-    telemetry.sendProductPickerChangedMessage([
-      ...generateBeforeAfterContext<'sendProductPickerChangedMessage'>(
-        'productPicker',
-        'dropdown',
-        { product: currentProduct?.slug || '' },
-        { product: freshProduct.slug },
-      ),
-    ]);
-    if (typeof document === 'undefined') return;
-
-    if (freshProduct.name) {
-      const root = document.documentElement;
-      Array.from(root.classList)
-        .filter((c) => c.startsWith('product-'))
-        .forEach((c) => root.classList.remove(c));
-      root.classList.add(getSafeClassName(getProductClassName(freshProduct.name)));
-    }
-
-    loadAndNavigate({ navigate, to: withPathPrefix(freshProduct.link) });
-  }
-  return {
-    currentProduct,
-    products,
-    setProduct,
-  };
-}