@stainless-api/docs 0.1.0-beta.13 → 0.1.0-beta.131

package/plugin/react/Routing.tsx

@@ -1,147 +1,57 @@
 import * as React from 'react';
-import { marked } from 'marked';
-import hljs from 'highlight.js';
-import { createMarkdownProcessor, type MarkdownProcessor } from '@astrojs/markdown-remark';
-import remarkGfmAlerts from 'remark-github-alerts';
+import { getDocsLanguages } from '../helpers/multiSpec';
+
+import { astroMarkdownRenderText } from '../markdown';
+import { highlight } from '../markdown/highlighter';
 
 import type { MarkdownHeading } from 'astro';
-import type { StarlightRouteData } from '@astrojs/starlight/route-data';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import type { DocsLanguage } from '@stainless-api/docs-ui/src/routing';
+import type * as SDKJSON from '@stainless/sdk-json';
+import { LanguageNames, type DocsLanguage } from '@stainless-api/docs-ui/routing';
 
-import {
-  generateRouteList,
-  generateRoute,
-  parseStainlessPath,
-  walkTree,
-  SupportedLanguageSyntaxes,
-  getLanguageSnippet,
-} from '@stainless-api/docs-ui/src/routing';
+import { parseStainlessPath, getLanguageSnippet } from '@stainless-api/docs-ui/routing';
 
 import {
   DocsProvider,
   MarkdownProvider,
   NavigationProvider,
-  useSpec,
   type ContentPanelLayout,
-} from '@stainless-api/docs-ui/src/contexts';
+} from '@stainless-api/docs-ui/contexts';
 
-import { flatResources, getResourceFromSpec } from '@stainless-api/docs-ui/src/utils';
+import { flatResources, getResourceFromSpec } from '@stainless-api/docs-ui/utils';
 
 import {
   SDKMethod,
   SDKResource,
   type SDKRequestTitleProps,
   SDKBreadcrumbs,
-  Dropdown,
-  DropdownTrigger,
-  DropdownMenu,
-  DropdownItem,
   SDKIcon,
   SDKOverview,
   SDKLanguageBlock,
-} from '@stainless-api/docs-ui/src/components';
+} from '@stainless-api/docs-ui/components';
+
+import { Dropdown } from '@stainless-api/docs/components';
+
 import {
-  BASE_PATH,
-  EXCLUDE_LANGUAGES,
-  EXPAND_RESOURCES,
-  HIGHLIGHT_THEMES,
+  RESOLVED_API_REFERENCE_PATH,
   BREADCRUMB_CONFIG,
   PROPERTY_SETTINGS,
-  INCLUDE_AI_DROPDOWN_OPTIONS,
+  ENABLE_CONTEXT_MENU,
+  EXPERIMENTAL_COLLAPSIBLE_METHOD_DESCRIPTIONS,
+  MIDDLEWARE,
 } from 'virtual:stl-starlight-virtual-module';
-import style from '@stainless-api/docs-ui/src/style';
-import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
-import { SnippetCode, SnippetContainer, SnippetRequestContainer } from '../components/SnippetCode';
-import clsx from 'clsx';
+import style from '@stainless-api/docs-ui/style';
+import {
+  SnippetCode,
+  SnippetContainer,
+  SnippetButtons,
+  SnippetFooter,
+  SnippetResponse,
+} from '../components/SnippetCode';
 import type { StlStarlightMiddleware } from '../middlewareBuilder/stainlessMiddleware';
-import { ComponentProvider } from '@stainless-api/docs-ui/src/contexts/component';
-import { APIReferenceAIDropdown } from '../../stl-docs/components/APIReferenceAIDropdown';
-
-export function generateDocsRoutes(spec: SDKJSON.Spec) {
-  const paths = generateRouteList({
-    spec,
-    excludeLanguages: EXCLUDE_LANGUAGES as DocsLanguage[],
-  });
-  const readmes = Object.entries(spec.readme)
-    .filter(([language]) => language !== 'http')
-    .filter(([language]) => !EXCLUDE_LANGUAGES.includes(language as DocsLanguage))
-    .map(([language]) => ({
-      slug: language,
-      stainlessPath: null,
-      language: language as DocsLanguage,
-      title: 'Readme',
-      kind: 'readme',
-    }));
-
-  return [...paths, ...readmes].map(({ slug, stainlessPath, language, title, kind }) => {
-    return {
-      params: { slug },
-      props: { stainlessPath, language, title, kind },
-    };
-  });
-}
-
-function isResourceNonEmpty(resource: SDKJSON.Resource) {
-  return (
-    Object.keys(resource.methods ?? {}).length > 0 ||
-    Object.keys(resource.subresources ?? {}).length > 0 ||
-    Object.keys(resource.models ?? {}).length > 0
-  );
-}
-
-type SidebarEntry = StarlightRouteData['sidebar'][number];
-
-export function buildSidebar(
-  basePath: string,
-  language: DocsLanguage,
-  current: string,
-  spec: SDKJSON.Spec,
-  resources?: Record<string, SDKJSON.Resource>,
-  nested?: boolean,
-): StarlightRouteData['sidebar'] {
-  const totalRoutes = Array.from(walkTree(spec, false)).filter(
-    (item) => item.data.kind === 'http_method',
-  ).length;
-
-  return Object.values(resources ?? spec.resources ?? [])
-    .filter((resource) => isResourceNonEmpty(resource))
-    .sort((a, b) => (a.name.startsWith('$') === b.name.startsWith('$') ? 0 : a.name.startsWith('$') ? 1 : -1))
-    .map((resource) => {
-      const subs = buildSidebar(basePath, language, current, spec, resource.subresources, true);
-
-      const overview: SidebarEntry = {
-        type: 'link',
-        isCurrent: current === resource.stainlessPath,
-        attrs: { 'data-stldocs-overview': resource.name },
-        label: 'Overview',
-        href: generateRoute(basePath, language, resource.stainlessPath) ?? basePath,
-        badge: undefined,
-      };
-
-      const meths: SidebarEntry[] = Object.values(resource.methods ?? [])
-        .filter((method) => spec.decls?.[language]?.[method.stainlessPath])
-        .toSorted((first, second) => first.name.localeCompare(second.name))
-        .map((method) => ({
-          type: 'link',
-          isCurrent: current === method.stainlessPath,
-          attrs: { 'data-stldocs-method': method.httpMethod },
-          label: method.summary ?? method.name,
-          href: generateRoute(basePath, language, method.stainlessPath) ?? basePath,
-          badge: undefined,
-        }));
-
-      const shouldExpand = EXPAND_RESOURCES ?? totalRoutes < 20;
-
-      return {
-        type: 'group',
-        label: resource.title,
-        badge: undefined,
-        collapsed: !shouldExpand || nested === true,
-        entries: [...(resources ? [] : [overview]), ...meths, ...subs],
-      };
-    });
-}
+import { ComponentProvider } from '@stainless-api/docs-ui/contexts/component';
+import { AIDropdown } from '../../stl-docs/components/AIDropdown';
+import { ChevronsUpDownIcon } from 'lucide-react';
+import { MethodDescription } from '../components/MethodDescription';
 
 export function buildPageNavigation(resource: SDKJSON.Resource, depth: number = 2): MarkdownHeading[] {
   const output: MarkdownHeading[] = [{ depth, slug: resource.stainlessPath, text: resource.title }];
@@ -153,78 +63,68 @@ export function buildPageNavigation(resource: SDKJSON.Resource, depth: number =
   return [...output, ...subs];
 }
 
-function renderMarkdown(content: string) {
-  return marked.parse(content, { gfm: true }) as string;
-}
-
-async function highlight(content: string, language?: string) {
-  if (language === 'json') return hljs.highlight(content, { language }).value;
-  const highlighter = await astroHighlight();
-  return highlighter.codeToHtml(content, {
-    lang: language ?? 'javascript',
-    themes: HIGHLIGHT_THEMES || {},
-  });
-}
-
 export function SDKSelectReactComponent({
   selected,
   languages,
-  id,
   className,
+  ...rest
 }: {
   selected: DocsLanguage;
   languages: DocsLanguage[];
-  id: string;
   className?: string;
-}) {
+} & Omit<React.ComponentProps<'div'>, 'children'>) {
   return (
-    <Dropdown id={id} data-current-value={selected} className={className}>
-      <DropdownTrigger
-        className="dropdown-toggle"
-        type="button"
-        id="stldocs-snippet-title-button"
-        aria-expanded="false"
-        withChevron
-      >
-        <SDKIcon language={getLanguageSnippet(selected)} size={16} />
-        <span className={clsx('stl-snippet-dropdown-button-text', selected)}>{selected}</span>
-      </DropdownTrigger>
-      <DropdownMenu
+    <Dropdown data-current-value={selected} className={className} {...rest}>
+      <Dropdown.Trigger>
+        <Dropdown.TriggerSelectedItem>
+          <Dropdown.Icon>
+            <SDKIcon language={getLanguageSnippet(selected)} />
+          </Dropdown.Icon>
+          <span className="stl-snippet-dropdown-button-text">{LanguageNames[selected]}</span>
+        </Dropdown.TriggerSelectedItem>
+        <Dropdown.TriggerIcon>
+          <ChevronsUpDownIcon size={16} />
+        </Dropdown.TriggerIcon>
+      </Dropdown.Trigger>
+      <Dropdown.Menu
         className="dropdown-menu stl-sdk-select-dropdown-menu"
-        position="below"
-        aria-labelledby="stldocs-snippet-title-button"
+        aria-labelledby="stl-docs-snippet-title-button"
       >
         {languages.map((item) => (
-          <DropdownItem key={item} value={item} selected={item === selected}>
-            <div>
+          <Dropdown.MenuItem key={item} value={item} isSelected={item === selected}>
+            <Dropdown.Icon>
               <SDKIcon language={getLanguageSnippet(item)} size={16} />
-              <span className={clsx('stl-snippet-dropdown-button-text', item)}>{item}</span>
-            </div>
-          </DropdownItem>
+            </Dropdown.Icon>
+            <Dropdown.MenuItemText>{LanguageNames[item]}</Dropdown.MenuItemText>
+            <Dropdown.MenuItemTemplate>
+              <Dropdown.Icon>
+                <SDKIcon language={getLanguageSnippet(item)} size={16} />
+              </Dropdown.Icon>
+              <span className="stl-snippet-dropdown-button-text">{LanguageNames[item]}</span>
+            </Dropdown.MenuItemTemplate>
+          </Dropdown.MenuItem>
         ))}
-      </DropdownMenu>
+      </Dropdown.Menu>
     </Dropdown>
   );
 }
 
 function SDKRequestTitle({ snippetLanguage }: SDKRequestTitleProps) {
-  const spec = useSpec();
-
   const selected = snippetLanguage.split('.').at(0) as DocsLanguage;
-  const languages = (spec?.docs?.languages ?? ['http']).filter((lang) => !EXCLUDE_LANGUAGES.includes(lang));
+  const languages = getDocsLanguages();
 
   return (
     <SDKSelectReactComponent
       selected={selected || 'http'}
       languages={languages}
-      id="stldocs-snippet-select"
-      className="stl-sdk-select"
+      data-stldocs-snippet-select
+      className="stl-sdk-select stl-ui-not-prose"
     />
   );
 }
 
 export type SpecMetadata = [
-  'http' | 'node' | 'python' | 'go' | 'typescript' | 'terraform' | 'ruby' | 'java' | 'kotlin',
+  DocsLanguage,
   {
     repo_url?: string;
     code_url?: string;
@@ -234,15 +134,27 @@ export type SpecMetadata = [
   },
 ][];
 
+const componentOverrides = {
+  SDKRequestTitle,
+  SnippetCode,
+  SnippetContainer,
+  SnippetButtons,
+  SnippetFooter,
+  SnippetResponse,
+  ...(EXPERIMENTAL_COLLAPSIBLE_METHOD_DESCRIPTIONS ? { MethodDescription } : {}),
+  ...MIDDLEWARE.componentOverrides,
+} satisfies React.ComponentProps<typeof ComponentProvider>['components'];
+
 export function RenderLibraries({ metadata }: { metadata: SpecMetadata }) {
   return (
-    <ComponentProvider components={{}}>
+    <ComponentProvider components={componentOverrides}>
       {metadata.map(([language, data]) => (
         <SDKLanguageBlock
+          key={language}
           language={language}
           version={data.version || ''}
           install={data.install || ''}
-          links={{ repo: data.repo_url || '#', docs: `${BASE_PATH}/${language}` }}
+          links={{ repo: data.repo_url || '#', docs: `${RESOLVED_API_REFERENCE_PATH}/${language}` }}
         />
       ))}
     </ComponentProvider>
@@ -254,16 +166,9 @@ export function RenderSpecOverview({ spec, language }: { spec: SDKJSON.Spec; lan
 
   return (
     <DocsProvider spec={spec} language={language ?? 'node'}>
-      <ComponentProvider
-        components={{
-          SDKRequestTitle,
-          SnippetCode,
-          SnippetContainer,
-          SnippetRequestContainer,
-        }}
-      >
-        <NavigationProvider basePath={BASE_PATH}>
-          <MarkdownProvider render={renderMarkdown} highlight={highlight}>
+      <ComponentProvider components={componentOverrides}>
+        <NavigationProvider basePath={RESOLVED_API_REFERENCE_PATH}>
+          <MarkdownProvider render={astroMarkdownRenderText} highlight={highlight}>
             <div className={style.Overview}>
               {resources
                 .filter(({ resource }) => !resource.name.startsWith('$'))
@@ -303,57 +208,44 @@ export function RenderSpec({
   const parsed = parseStainlessPath(path);
   const resource = getResourceFromSpec(path, spec);
 
-  if (!resource || !parsed) return null;
+  if (!resource || !parsed) {
+    console.warn(`Could not find resource or parsed path for '${path}'`);
+    return null;
+  }
 
   return (
     <DocsProvider
-      spec={spec as SDKJSON.Spec}
+      spec={spec}
       language={language ?? 'node'}
       settings={{
         contentPanelLayout,
         properties: PROPERTY_SETTINGS,
       }}
     >
-      <ComponentProvider
-        components={{
-          SDKRequestTitle,
-          SnippetCode,
-          SnippetContainer,
-          SnippetRequestContainer,
-        }}
-      >
-        <NavigationProvider basePath={BASE_PATH} selectedPath={path}>
-          <MarkdownProvider render={renderMarkdown} highlight={highlight}>
-            {kind === 'http_method' ? (
+      <ComponentProvider components={componentOverrides}>
+        <NavigationProvider basePath={RESOLVED_API_REFERENCE_PATH} selectedPath={path}>
+          <MarkdownProvider render={astroMarkdownRenderText} highlight={highlight}>
+            {
               <div className="stldocs-root stl-ui-not-prose">
                 <div className="stl-page-nav-container">
                   <SDKBreadcrumbs
-                    spec={spec as SDKJSON.Spec}
+                    spec={spec}
                     currentPath={currentPath}
-                    basePath={BASE_PATH}
+                    basePath={RESOLVED_API_REFERENCE_PATH}
                     config={BREADCRUMB_CONFIG}
                   />
-                  {INCLUDE_AI_DROPDOWN_OPTIONS && <APIReferenceAIDropdown />}
+                  {ENABLE_CONTEXT_MENU && <AIDropdown />}
                 </div>
-                <SDKMethod
-                  method={resource.methods[parsed.method]}
-                  transformRequestSnippet={transformRequestSnippet}
-                />
-              </div>
-            ) : (
-              <div className="stldocs-root stl-ui-not-prose">
-                <div className="stl-page-nav-container">
-                  <SDKBreadcrumbs
-                    spec={spec as SDKJSON.Spec}
-                    currentPath={currentPath}
-                    basePath={BASE_PATH}
-                    config={BREADCRUMB_CONFIG}
+                {kind === 'http_method' ? (
+                  <SDKMethod
+                    method={resource.methods[parsed.method!]!}
+                    transformRequestSnippet={transformRequestSnippet}
                   />
-                  {INCLUDE_AI_DROPDOWN_OPTIONS && <APIReferenceAIDropdown />}
-                </div>
-                <SDKOverview resource={resource} />
+                ) : (
+                  <SDKOverview resource={resource} />
+                )}
               </div>
-            )}
+            }
           </MarkdownProvider>
         </NavigationProvider>
       </ComponentProvider>
@@ -361,18 +253,6 @@ export function RenderSpec({
   );
 }
 
-export function RenderMethod({ path }: { path: string }) {
-  const spec = useSpec();
-  if (!spec) return null;
-
-  const parsed = parseStainlessPath(path);
-  const resource = getResourceFromSpec(path, spec);
-  if (!resource || !parsed) return null;
-
-  const meth = resource.methods[parsed.method];
-  return <SDKMethod method={meth} />;
-}
-
 export async function getReadmeContent(spec: SDKJSON.Spec, language: DocsLanguage) {
   const repoUrl = spec.metadata?.[language]?.repo_url;
 
@@ -389,48 +269,3 @@ export async function getReadmeContent(spec: SDKJSON.Spec, language: DocsLanguag
 
   return spec.readme[language];
 }
-
-// Astro's markdown processor is a singleton
-// Need to cache it instead of instanting per request
-let astroMarkdownProcessor: MarkdownProcessor;
-async function astroMarkdown() {
-  if (!astroMarkdownProcessor) {
-    astroMarkdownProcessor = await createMarkdownProcessor({
-      gfm: true,
-      remarkPlugins: [remarkGfmAlerts],
-      shikiConfig: {
-        themes: HIGHLIGHT_THEMES,
-      },
-    });
-  }
-
-  return astroMarkdownProcessor;
-}
-
-let astroShikiHighlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
-async function astroHighlight() {
-  if (!astroShikiHighlighter) {
-    astroShikiHighlighter = await createHighlighter({
-      themes: ['github-light', 'github-dark'],
-      langs: SupportedLanguageSyntaxes,
-    });
-  }
-
-  return astroShikiHighlighter;
-}
-
-export async function astroMarkdownRender(content: string) {
-  const md = await astroMarkdown();
-  const output = await md.render(content);
-
-  // Map GFM callouts to the closest Starlight equivalent
-  output.code = output.code
-    .replaceAll('markdown-alert-caution', 'markdown-alert-danger')
-    .replaceAll('markdown-alert-warning', 'markdown-alert-caution')
-    .replaceAll('markdown-alert-important', 'markdown-alert-caution')
-    .replaceAll('markdown-alert-title', 'starlight-aside__title')
-    .replaceAll('markdown-alert-', 'starlight-aside--')
-    .replaceAll('markdown-alert', 'starlight-aside');
-
-  return output;
-}

package/plugin/referencePlaceholderUtils.ts

@@ -25,23 +25,26 @@ type SidebarConfigEntry = Exclude<StarlightConfig['sidebar'], undefined>[number]
 
 export function getAPIReferencePlaceholderItemFromSidebarConfig(
   sidebar: SidebarConfigEntry[],
-): SidebarConfigEntry | null {
-  for (const item of sidebar) {
-    if (typeof item === 'string') {
-      continue;
-    }
-    if ('items' in item) {
-      const found = getAPIReferencePlaceholderItemFromSidebarConfig(item.items);
-      if (found) {
-        return found;
+): SidebarConfigEntry[] {
+  const items: SidebarConfigEntry[] = [];
+
+  function recursiveGetPlaceholderItems(entries: SidebarConfigEntry[]) {
+    for (const item of entries) {
+      if (typeof item === 'string') {
+        continue;
+      }
+      if ('attrs' in item && item.attrs?.about === INTERNAL_REFERENCE_ENTRY_MARKER) {
+        items.push(item);
+      }
+      if ('items' in item) {
+        recursiveGetPlaceholderItems(item.items);
       }
-    }
-    if ('attrs' in item && item.attrs?.about === INTERNAL_REFERENCE_ENTRY_MARKER) {
-      return item;
     }
   }
 
-  return null;
+  recursiveGetPlaceholderItems(sidebar);
+
+  return items;
 }
 
 type SidebarEntry = StarlightRouteData['sidebar'][number];
@@ -58,7 +61,7 @@ function recursiveGetPlaceholderItems(
   items: PlaceholderItemResult[],
 ): PlaceholderItemResult[] {
   for (let i = 0; i < sidebar.length; i++) {
-    const entry = sidebar[i];
+    const entry = sidebar[i]!;
     if ('attrs' in entry && entry.attrs?.about === INTERNAL_REFERENCE_ENTRY_MARKER) {
       items.push({
         index: i,

package/plugin/replaceSidebarPlaceholderMiddleware.ts

@@ -1,54 +1,58 @@
-import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
+import { defineRouteMiddleware, StarlightRouteData } from '@astrojs/starlight/route-data';
 
-import { cmsClient } from './cms/client';
-import { BASE_PATH } from 'virtual:stl-starlight-virtual-module';
+import { RESOLVED_API_REFERENCE_PATH } from 'virtual:stl-starlight-virtual-module';
 import { getAPIReferencePlaceholderItems } from './referencePlaceholderUtils';
-import { getMethodFromSDKJSON, recursiveReplacePlaceholderItems } from './generateAPIReferenceLink';
-import { forceGenerateRoute } from './cms/sidebar-builder';
-import { parseRoute } from '@stainless-api/docs-ui/src/routing';
+import { parseRoute } from '@stainless-api/docs-ui/routing';
+import path from 'path';
+import { sidebars } from 'virtual:stl-starlight-reference-sidebars';
 
 // this fn is loaded in the plugin via addRouteMiddleware
 
-export const onRequest = defineRouteMiddleware(async (context) => {
+type SidebarEntry = StarlightRouteData['sidebar'][number];
+
+const removeTrailingSlash = (value: string) => (value.endsWith('/') ? value.slice(0, -1) : value);
+
+function markCurrentItems(sidebar: SidebarEntry[], currentSlug: string) {
+  // IMPORTANT: we need to clone the sidebar to avoid mutating the original sidebar
+  const mutableSidebarInstance = structuredClone(sidebar);
+  const normalizedCurrentSlug = removeTrailingSlash(currentSlug);
+
+  function recursiveMarkCurrent(entries: SidebarEntry[]) {
+    for (const entry of entries) {
+      if (entry.type === 'link') {
+        entry.isCurrent = removeTrailingSlash(entry.href) === normalizedCurrentSlug;
+      }
+      if (entry.type === 'group') {
+        recursiveMarkCurrent(entry.entries);
+      }
+    }
+  }
+  recursiveMarkCurrent(mutableSidebarInstance);
+
+  return mutableSidebarInstance;
+}
+
+export const onRequest = defineRouteMiddleware((context) => {
   // if using content collection schema, use: context.locals.starlightRoute.entry.data.stainlessStarlight
   // this worked without collections but relied on hijacking starlightRoute: context.props.frontmatter.stainlessStarlight
-
-  const slug = `/${context.locals.starlightRoute.id}`; // same as .slug but not deprecated
+  const slug = path.posix.join(import.meta.env.BASE_URL ?? '', `/${context.locals.starlightRoute.id}`); // same as .slug but not deprecated
 
   context.locals.starlightRoute._stlStarlight = {
-    basePath: BASE_PATH,
+    basePath: RESOLVED_API_REFERENCE_PATH,
   };
 
   const apiReferencePlaceholderItems = getAPIReferencePlaceholderItems(context.locals.starlightRoute.sidebar);
 
-  const spec = await cmsClient.getSpec();
-
-  const { language, stainlessPath } = parseRoute(BASE_PATH, slug);
-
-  // This is probably temporary, but it fills in functionality needed for Mintlify imports
-  recursiveReplacePlaceholderItems(context.locals.starlightRoute.sidebar, (entry, { endpoint, label }) => {
-    const method = getMethodFromSDKJSON(spec, endpoint);
-
-    const route = forceGenerateRoute({
-      basePath: BASE_PATH,
-      stainlessPath: method.stainlessPath,
-      language,
-    });
-    entry.href = route;
-    entry.isCurrent = method.stainlessPath === stainlessPath;
-    if (!label) {
-      entry.label = method.summary ?? method.name;
-    }
-    entry.attrs['data-stldocs-method'] = method.httpMethod;
-  });
+  const { language } = parseRoute(RESOLVED_API_REFERENCE_PATH, slug);
 
   for (const item of apiReferencePlaceholderItems) {
-    const entries = await cmsClient.buildSidebar({
-      basePath: BASE_PATH,
-      currentSlug: slug,
-      sidebarId: item.sidebarId,
-    });
+    const entries = sidebars.find((sb) => sb.id === item.sidebarId && sb.language === language)?.entries;
+    if (!entries) {
+      throw new Error(`Expected sidebar entries for sidebar ID ${item.sidebarId} and language ${language}`);
+    }
 
     item.group.splice(item.index, 1, ...entries);
   }
+
+  context.locals.starlightRoute.sidebar = markCurrentItems(context.locals.starlightRoute.sidebar, slug);
 });