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

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.15
+
+### Patch Changes
+
+- e35360f: include ui-primitive packages
+- Updated dependencies [e35360f]
+  - @stainless-api/docs-ui@0.1.0-beta.12
+  - @stainless-api/ui-primitives@0.1.0-beta.13
+
+## 0.1.0-beta.14
+
+### Patch Changes
+
+- a529fd4: fix: site title height
+- Updated dependencies [a529fd4]
+  - @stainless-api/docs-ui@0.1.0-beta.11
+  - @stainless-api/ui-primitives@0.1.0-beta.12
+
 ## 0.1.0-beta.13
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.13",
+  "version": "0.1.0-beta.15",
   "publishConfig": {
     "access": "public"
   },
@@ -27,7 +27,8 @@
     "./stainless-docs/mintlify-compat": "./stl-docs/components/mintlify-compat/index.ts",
     "./theme": "./theme.css",
     "./mintlify-compat.css": "./styles/mintlify-compat.css",
-    "./font-imports": "./styles/fonts.css"
+    "./font-imports": "./styles/fonts.css",
+    "./components": "./stl-docs/components/index.ts"
   },
   "keywords": [],
   "author": "",
@@ -56,8 +57,8 @@
     "shiki": "^3.9.2",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.0",
-    "@stainless-api/docs-ui": "0.1.0-beta.10",
-    "@stainless-api/ui-primitives": "0.1.0-beta.11"
+    "@stainless-api/ui-primitives": "0.1.0-beta.13",
+    "@stainless-api/docs-ui": "0.1.0-beta.12"
   },
   "devDependencies": {
     "@markdoc/markdoc": "^0.5.2",

package/plugin/index.ts

@@ -165,24 +165,6 @@ async function stlStarlightAstroIntegration(
           prerender: command === 'build',
         });
 
-        // Remove starlight callout syntax in favor of our own callout component
-        // updateConfig always deeply merges arrays so we need to mutate remarkPlugins directly
-        // in order to remove plugins that starlight added
-        astroConfig.markdown.remarkPlugins = astroConfig.markdown.remarkPlugins.filter((plugin, i, arr) => {
-          if (typeof plugin !== 'function') return true;
-          // remove:
-          // 1. remarkDirective plugin
-          if (plugin.name === 'remarkDirective') return false;
-          // 2. directly followed by remarkAsides plugin (inner function named 'attacher')
-          if (plugin.name === 'attacher') {
-            const prev = arr[i - 1];
-            if (typeof prev === 'function' && prev.name === 'remarkDirective') return false;
-          }
-          // 3. remarkDirectivesRestoration plugin
-          if (plugin.name === 'remarkDirectivesRestoration') return false;
-          return true;
-        });
-
         updateConfig({
           vite: {
             ssr: {

package/plugin/react/Routing.tsx

@@ -7,7 +7,7 @@ import remarkGfmAlerts from 'remark-github-alerts';
 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 { LanguageNames, type DocsLanguage } from '@stainless-api/docs-ui/src/routing';
 
 import {
   generateRouteList,
@@ -182,23 +182,23 @@ export function SDKSelectReactComponent({
       <DropdownTrigger
         className="dropdown-toggle"
         type="button"
-        id="stldocs-snippet-title-button"
+        id="stl-docs-snippet-title-button"
         aria-expanded="false"
         withChevron
       >
         <SDKIcon language={getLanguageSnippet(selected)} size={16} />
-        <span className={clsx('stl-snippet-dropdown-button-text', selected)}>{selected}</span>
+        <span className="stl-snippet-dropdown-button-text">{LanguageNames[selected]}</span>
       </DropdownTrigger>
       <DropdownMenu
         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>
               <SDKIcon language={getLanguageSnippet(item)} size={16} />
-              <span className={clsx('stl-snippet-dropdown-button-text', item)}>{item}</span>
+              <span className="stl-snippet-dropdown-button-text">{LanguageNames[item]}</span>
             </div>
           </DropdownItem>
         ))}

package/stl-docs/components/Header.astro

@@ -46,6 +46,8 @@ const shouldRenderSearch = !!(
       padding: 0.25rem;
       margin: -0.25rem;
       min-width: 0;
+      /* Max height should match button height */
+      max-height: 32px;
     }
 
     .default-tabs-container {

package/stl-docs/components/index.ts

@@ -0,0 +1,2 @@
+export * from '@stainless-api/ui-primitives';
+export * from '@stainless-api/ui-primitives/scripts';

package/stl-docs/disableCalloutSyntax.ts

@@ -0,0 +1,36 @@
+import type { AstroIntegration } from 'astro';
+import type { StarlightPlugin } from '@astrojs/starlight/types';
+
+export const disableCalloutSyntaxAstroIntegration = {
+  name: 'stl-starlight-remove-callout-syntax',
+  hooks: {
+    'astro:config:setup': ({ config: astroConfig }) => {
+      // Remove starlight callout syntax in favor of our own callout component
+      // updateConfig always deeply merges arrays so we need to mutate remarkPlugins directly
+      // in order to remove plugins that starlight added
+      astroConfig.markdown.remarkPlugins = astroConfig.markdown.remarkPlugins.filter((plugin, i, arr) => {
+        if (typeof plugin !== 'function') return true;
+        // remove:
+        // 1. remarkDirective plugin
+        if (plugin.name === 'remarkDirective') return false;
+        // 2. directly followed by remarkAsides plugin (inner function named 'attacher')
+        if (plugin.name === 'attacher') {
+          const prev = arr[i - 1];
+          if (typeof prev === 'function' && prev.name === 'remarkDirective') return false;
+        }
+        // 3. remarkDirectivesRestoration plugin
+        if (plugin.name === 'remarkDirectivesRestoration') return false;
+        return true;
+      });
+    },
+  },
+} satisfies AstroIntegration;
+
+export const disableCalloutSyntaxStarlightPlugin = {
+  name: 'stl-starlight-remove-callout-syntax',
+  hooks: {
+    'config:setup': ({ addIntegration }) => {
+      addIntegration(disableCalloutSyntaxAstroIntegration);
+    },
+  },
+} satisfies StarlightPlugin;

package/stl-docs/index.ts

@@ -1,6 +1,8 @@
 import starlight from '@astrojs/starlight';
 import react from '@astrojs/react';
+import type { StarlightPlugin } from '@astrojs/starlight/types';
 import { stainlessStarlight } from '../plugin';
+import { disableCalloutSyntaxStarlightPlugin } from './disableCalloutSyntax';
 
 import type { AstroIntegration } from 'astro';
 
@@ -40,21 +42,27 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
   }
 
   type ComponentOverrides = StarlightConfigDefined['components'];
-  const plugins = [...config.starlightCompat.plugins];
-
   const componentOverrides: ComponentOverrides = {
     Sidebar: '@stainless-api/docs/BaseSidebar',
     Header: '@stainless-api/docs/Header',
     ThemeSelect: '@stainless-api/docs/ThemeSelect',
     ContentPanel: '@stainless-api/docs/ContentPanel',
     TableOfContents: '@stainless-api/docs/TableOfContents',
+
+    ...(config.apiReference !== null && {
+      Sidebar: '@stainless-api/docs/SDKSelectSidebar',
+      Search: '@stainless-api/docs/Search',
+    }),
   };
 
-  if (config.apiReference !== null) {
-    componentOverrides.Sidebar = '@stainless-api/docs/SDKSelectSidebar';
-    componentOverrides.Search = '@stainless-api/docs/Search';
-    plugins.unshift(stainlessStarlight(config.apiReference));
-  }
+  const plugins: StarlightPlugin[] = [
+    // Disable starlight callout syntax in favor of our own component
+    disableCalloutSyntaxStarlightPlugin,
+    // API reference
+    config.apiReference !== null && stainlessStarlight(config.apiReference),
+    // pass through plugins from user
+    ...config.starlightCompat.plugins,
+  ].filter(Boolean);
 
   // TODO: re-add once we figure out what to do with the client router
   // if (config.enableClientRouter) {

package/styles/code.css

@@ -125,11 +125,6 @@
   line-height: 100%;
   font-size: var(--sl-text-body-sm);
   color: var(--sl-color-text);
-  text-transform: capitalize;
-
-  &.http {
-    text-transform: uppercase;
-  }
 }
 
 :root[data-theme='light'] {