@stainless-api/docs 0.1.0-beta.11 → 0.1.0-beta.110

package/plugin/routes/Docs.astro

@@ -1,79 +1,78 @@
 ---
-import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
-import { cmsClient } from "../cms/client";
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import { getReadmeContent, buildPageNavigation, RenderSpec, astroMarkdownRender } from '../react/Routing';
+import { getResourceFromSpec } from '@stainless-api/docs-ui/utils';
+import { parseRoute, parseStainlessPath } from '@stainless-api/docs-ui/routing';
 import {
-  getReadmeContent,
-  generateDocsRoutes,
-  buildPageNavigation,
-  RenderSpec,
-  astroMarkdownRender,
-} from "../react/Routing";
-import { getResourceFromSpec } from "@stainless-api/docs-ui/src/utils";
-import { BASE_PATH, CONTENT_PANEL_LAYOUT,MIDDLEWARE } from "virtual:stl-starlight-virtual-module";
+  CONTENT_PANEL_LAYOUT,
+  MIDDLEWARE,
+  EXPERIMENTAL_REQUEST_BUILDER,
+  RESOLVED_API_REFERENCE_PATH,
+} from 'virtual:stl-starlight-virtual-module';
+import { generateDocsRoutes } from '../helpers/generateDocsRoutes';
+import { StainlessIslands } from '../components/StainlessIslands';
+import { getSDKJSONInSSR } from '../specs/fetchSpecSSR';
 
+const language = parseRoute(RESOLVED_API_REFERENCE_PATH, Astro.url.pathname)?.language;
 
-const spec = await cmsClient.getSpec();
-const routes = generateDocsRoutes(spec);
+const spec = await getSDKJSONInSSR(language);
 
-const route = routes.find((r) => r.params.slug === Astro.params.slug);
+export type Props = Awaited<ReturnType<typeof generateDocsRoutes>>[number]['props'] | Record<string, never>;
 
-if (!route) {
-  throw new Error("No such route");
-}
+const props =
+  'language' in Astro.props
+    ? // In prod, we pass the props down to this page
+      Astro.props
+    : // In the dev server, we skip the DocsStatic wrapper so we need to find the props ourselves
+      generateDocsRoutes(spec).find((r) => r.params.slug === Astro.params.slug)?.props;
+if (!props) throw new Error(`Could not find a route for slug '${Astro.params.slug}'`);
+
+// PageTitle override will skip rendering the default Starlight title
+Astro.locals._stlStarlightPage = {
+  skipRenderingStarlightTitle: props.kind === 'readme' ? false : true,
+};
 
-const readmeContent = await getReadmeContent(spec, route.props.language);
-const readme =
-  route.props.kind === "readme"
-    ? await astroMarkdownRender(readmeContent ?? "")
-    : null;
+const readmeContent = await getReadmeContent(spec, props.language);
+const readme = props.kind === 'readme' ? await astroMarkdownRender(readmeContent ?? '') : null;
 
-const resource = route.props.stainlessPath
-  ? getResourceFromSpec(route.props.stainlessPath, spec)
-  : null;
+const resource = props.stainlessPath ? getResourceFromSpec(props.stainlessPath, spec) : null;
 
 const pageNav =
-  route.props.kind === "resource" && resource
+  props.kind === 'resource' && resource
     ? buildPageNavigation(resource)
-    : route.props.kind === "readme" && readme?.metadata
+    : props.kind === 'readme' && readme?.metadata
       ? readme?.metadata.headings
       : [];
 
-const props = route.props;
+Astro.locals.language = props.language;
 
+// Use first heading in README as page title
 if (readme) {
   const repo = spec.metadata?.[props.language]?.code_url;
-  readme.code = readme.code.replace(
-    /<a href="(?!(?:https?:\/\/|\/\/))([^"]+)"/g,
-    `<a href="${repo}/$1"`);
-  props.title = readme.metadata.headings[0].text ?? "Overview";
+  readme.code = readme.code.replace(/<a href="(?!(?:https?:\/\/|\/\/))([^"]+)"/g, `<a href="${repo}/$1"`);
+  props.title = readme.metadata.headings[0]!.text ?? 'Overview';
 }
 
+// use summary for the page title of method pages
+if (props.kind === 'http_method' && props.stainlessPath) {
+  const parsed = parseStainlessPath(props.stainlessPath);
+  const resource = getResourceFromSpec(props.stainlessPath, spec);
+  if (parsed?.method && resource?.methods[parsed.method]) {
+    const method = resource.methods[parsed.method];
+    props.title = method?.summary ?? method?.title ?? props.title;
+  }
+}
 ---
 
-
 <StarlightPage
   headings={pageNav}
   frontmatter={{
-    title: props?.title,
-    head: [
-      {
-        tag: "link",
-        attrs: {
-          rel: "alternate",
-          type: "text/markdown",
-          href: `${BASE_PATH}/${Astro.params.slug}.md`
-        }
-      }
-    ],
+    title: props.title,
     pagefind: false,
-    tableOfContents: ["resource", "readme"].includes(props.kind)
-      ? { maxHeadingLevel: 6 }
-      : false,
-    // @ts-ignore
-    stainlessStarlight: {
-      basePath: BASE_PATH,
-      ...props,
-    },
+    tableOfContents:
+      props.kind === 'readme' || (props.kind === 'resource' && props.language !== 'terraform')
+        ? { maxHeadingLevel: 6 }
+        : false,
   }}
 >
   {
@@ -88,76 +87,36 @@ if (readme) {
           contentPanelLayout={CONTENT_PANEL_LAYOUT}
           transformRequestSnippet={MIDDLEWARE.transformRequestSnippet}
         />
-
-        <style is:inline>
-          #stldocs-snippet-title {
-            display: flex;
-            gap: 5px;
-          }
-
-          .stldocs-snippet-code:not(.stldocs-snippet-response .stldocs-snippet-code) {
-            padding: 0 !important;
-            
-            .astro-code {
-              padding: 1rem;
-            }
-          }
-
-
-          [data-has-sidebar]:not([data-has-toc]) .sl-container {
-            max-width: 1428px;
-          }
-
-          .content-panel:nth-of-type(1) {
-            display: none;
-          }
-          .content-panel:nth-of-type(2) .stl-page-nav-container {
-            display: none;
-          }
-
-          .content-panel:nth-of-type(2) .stldocs-root .stl-page-nav-container {
-            display: flex;
-          }
-        </style>
       </div>
     ) : (
       <>
         <Fragment set:html={readme?.code} />
-        <style is:inline>
-          .sl-markdown-content h1:first-of-type {
-            display: none;
-          }
-
-          .sl-markdown-content img {
-            display: inline-block;
-            vertical-align: text-bottom;
-          }
-
-          .sl-markdown-content .octicon {
-            margin-right: 0.2rem;
-            overflow: visible !important;
-            -webkit-mask: var(--oct-icon) no-repeat;
-            mask: var(--oct-icon) no-repeat;
-            -webkit-mask-size: 100% 100%;
-            mask-size: 100% 100%;
-            background-color: currentColor;
-            color: inherit;
-            display: inline-block;
-            vertical-align: text-bottom;
-            width: 1em;
-            height: 1em;
-          }
-
-          .sl-markdown-content code {
-            white-space: pre-wrap;
-          }
-        </style>
+        <style
+          is:inline
+          set:text={`
+            .sl-markdown-content h1:first-of-type {
+              display: none;
+            }
+
+            .sl-markdown-content img {
+              display: inline-block;
+              vertical-align: text-bottom;
+            }
+
+            .sl-markdown-content code {
+              white-space: pre-wrap;
+            }
+          `}
+        />
       </>
     )
   }
 </StarlightPage>
 
+{EXPERIMENTAL_REQUEST_BUILDER && <StainlessIslands client:load />}
+
 <script src="../globalJs/navigation.ts"></script>
 <script src="../globalJs/copy.ts"></script>
 <script src="../globalJs/tooltip.ts"></script>
 <script src="../globalJs/code-snippets.ts"></script>
+<script src="../globalJs/method-descriptions.ts"></script>

package/plugin/routes/DocsStatic.astro

@@ -1,14 +1,15 @@
 ---
 import type { GetStaticPaths } from 'astro';
 import Docs from './Docs.astro';
-import { cmsClient } from '../cms/client';
-import { generateDocsRoutes } from '../react/Routing';
+import { generateAllDocsRoutes } from '../helpers/generateDocsRoutes';
 
 export const getStaticPaths = (async () => {
-  const spec = await cmsClient.getSpec();
-  const routes = generateDocsRoutes(spec);
+  const routes = await generateAllDocsRoutes();
   return routes;
 }) satisfies GetStaticPaths;
+
+export type Props = Awaited<ReturnType<typeof getStaticPaths>>[number]['props'];
+const props = Astro.props;
 ---
 
-<Docs />
+<Docs {...props} />

package/plugin/routes/Overview.astro

@@ -1,17 +1,36 @@
 ---
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
-import { BASE_PATH, EXCLUDE_LANGUAGES } from 'virtual:stl-starlight-virtual-module';
-import { cmsClient } from '../cms/client';
-import type { DocsLanguage } from '@stainless-api/docs-ui/src/routing';
+import { EXCLUDE_LANGUAGES } from 'virtual:stl-starlight-virtual-module';
 import { RenderLibraries, RenderSpecOverview, type SpecMetadata } from '../react/Routing';
+import { getSDKJSONInSSR } from '../specs/fetchSpecSSR';
+import { api } from 'virtual:stainless-apis-manifest';
 
-const spec = await cmsClient.getSpec();
+const spec = await getSDKJSONInSSR('http');
 
-const languages: DocsLanguage[] = spec.docs!.languages ?? ['http'];
-const metadata = languages
-  .filter((language) => !['http', 'terraform'].includes(language) && spec.metadata[language])
-  .filter((language) => !EXCLUDE_LANGUAGES.includes(language))
-  .map((language) => [language, spec.metadata[language]]) as SpecMetadata;
+const langTargets = api.languages
+  .map((l) => l.language)
+  .filter((l) => !EXCLUDE_LANGUAGES.includes(l))
+  .filter((l) => l !== 'http');
+
+const langsWithSpecs = await Promise.all(
+  langTargets.map(async (language) => {
+    const spec = await getSDKJSONInSSR(language);
+    return {
+      language,
+      spec,
+    };
+  }),
+);
+
+const metadata: SpecMetadata = langsWithSpecs.map(({ language, spec }) => [
+  language,
+  spec.metadata[language]!,
+]);
+
+// PageTitle override will skip rendering the default Starlight title
+Astro.locals._stlStarlightPage = {
+  hasMarkdownRoute: false,
+};
 ---
 
 <StarlightPage
@@ -19,22 +38,26 @@ const metadata = languages
     title: 'API Reference',
     pagefind: false,
     tableOfContents: false,
-    stainlessStarlight: {
-      basePath: BASE_PATH,
-      language: 'http',
-    },
   }}
 >
-  <h3>Libraries</h3>
+  <div class="stl-overview">
+    {
+      metadata.length > 0 && (
+        <>
+          <h3>Libraries</h3>
 
-  <div class="stldocs-root language-blocks stl-ui-not-prose not-content">
-    <RenderLibraries metadata={metadata} />
-  </div>
+          <div class="stldocs-root language-blocks stl-ui-not-prose not-content">
+            <RenderLibraries metadata={metadata} />
+          </div>
+        </>
+      )
+    }
 
-  <h3>API Overview</h3>
+    <h3>API Overview</h3>
 
-  <div class="stldocs-root api-overview stl-ui-not-prose">
-    <RenderSpecOverview spec={spec} language="http" />
+    <div class="stldocs-root api-overview stl-ui-not-prose">
+      <RenderSpecOverview spec={spec} language="http" />
+    </div>
   </div>
 </StarlightPage>
 
@@ -46,7 +69,8 @@ const metadata = languages
     margin-top: 2rem;
 
     .stldocs-language-block {
-      width: 350px;
+      width: 0;
+      flex: 1 1 350px;
     }
   }
 

package/plugin/routes/markdown.ts

@@ -1,13 +1,14 @@
 import type { APIRoute, GetStaticPaths } from 'astro';
-import { cmsClient } from '../cms/client';
-import { generateDocsRoutes, getReadmeContent } from '../react/Routing';
-import { getResourceFromSpec } from '@stainless-api/docs-ui/src/utils';
+import { getReadmeContent } from '../react/Routing';
+import { getResourceFromSpec } from '@stainless-api/docs-ui/utils';
 
-import { renderMarkdown } from '@stainless-api/docs-ui/src/markdown';
+import { renderMarkdown } from '@stainless-api/docs-ui/markdown';
 
-import { parseStainlessPath, type DocsLanguage } from '@stainless-api/docs-ui/src/routing';
-import type { EnvironmentType } from '@stainless-api/docs-ui/src/markdown/utils';
+import { parseStainlessPath, type DocsLanguage } from '@stainless-api/docs-ui/routing';
+import type { EnvironmentType } from '@stainless-api/docs-ui/markdown/utils';
 import { PROPERTY_SETTINGS, MIDDLEWARE } from 'virtual:stl-starlight-virtual-module';
+import { generateAllDocsRoutes } from '../helpers/generateDocsRoutes';
+import { getSDKJSONInSSR } from '../specs/fetchSpecSSR';
 
 type RouteProps = {
   stainlessPath: string;
@@ -16,17 +17,17 @@ type RouteProps = {
 };
 
 export const getStaticPaths = (async () => {
-  const spec = await cmsClient.getSpec();
-  return generateDocsRoutes(spec);
+  const paths = await generateAllDocsRoutes();
+  return paths;
 }) satisfies GetStaticPaths;
 
 export const GET: APIRoute<RouteProps> = async ({ props }) => {
-  const spec = await cmsClient.getSpec();
+  const spec = await getSDKJSONInSSR(props.language);
 
   if (props.kind === 'readme') {
     const readmeContent = await getReadmeContent(spec, props.language);
     return new Response(readmeContent, {
-      headers: { 'Content-Type': 'text/markdown' },
+      headers: { 'Content-Type': 'text/plain' },
     });
   }
 
@@ -47,11 +48,11 @@ export const GET: APIRoute<RouteProps> = async ({ props }) => {
     },
   };
 
-  const target = props.kind === 'http_method' && parsed?.method ? resource.methods[parsed.method] : resource;
+  const target = props.kind === 'http_method' && parsed?.method ? resource.methods[parsed.method]! : resource;
   const output = renderMarkdown(env, target);
 
   return new Response(output, {
-    headers: { 'Content-Type': 'text/markdown' },
+    headers: { 'Content-Type': 'text/plain' },
   });
 };
 

package/plugin/{cms → sidebar-utils}/sidebar-builder.ts

@@ -1,7 +1,20 @@
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import { generateRoute, walkTree, type DocsLanguage } from '@stainless-api/docs-ui/src/routing';
+import type * as SDKJSON from '@stainless/sdk-json';
+import { generateRoute, walkTree, type DocsLanguage } from '@stainless-api/docs-ui/routing';
 import type { StarlightRouteData } from '@astrojs/starlight/route-data';
 
+function makeMethodOrResourceKey(entry: SDKJSON.Method | SDKJSON.Resource): string {
+  if (entry.kind === 'http_method') {
+    if (entry.endpoint && entry.endpoint !== '') {
+      return entry.endpoint;
+    }
+    return entry.stainlessPath;
+  }
+  if (entry.kind === 'resource') {
+    return entry.stainlessPath;
+  }
+  throw new Error(`Unknown entry kind ${JSON.stringify(entry)}`);
+}
+
 function isResourceNonEmpty(resource: SDKJSON.Resource) {
   return (
     Object.keys(resource.methods ?? {}).length > 0 ||
@@ -119,23 +132,12 @@ export type GeneratedSidebarConfig = {
   ) => ReferenceSidebarConfigItem[] | void;
 };
 
-function countKeys(obj?: Record<string, any>) {
-  let o = obj ?? {};
-  return Object.keys(o).length;
-}
-
-function getMethodDeclForLanguage(entry: SDKJSON.Method, spec: SDKJSON.Spec, language: DocsLanguage) {
-  const decls = spec.decls[language] ?? {};
-  const decl = decls[entry.stainlessPath];
-  if (decl !== undefined) {
-    if ('ident' in decl) {
-      return decl;
-    }
-  }
-  return null;
+function countKeys(obj?: Record<string, unknown>) {
+  return Object.keys(obj ?? {}).length;
 }
 
-type MethodDecl = Exclude<ReturnType<typeof getMethodDeclForLanguage>, null>;
+type HasIdent<T> = T extends { ident: unknown } ? T : never;
+type MethodDecl = HasIdent<SDKJSON.LanguageDeclNodes[SDKJSON.SpecLanguage]>;
 
 function makeAPIOverviewPage(): UserSidebarAPIOverviewPage {
   return {
@@ -166,7 +168,7 @@ function pullOutSharedModelsResource(resources: SDKJSON.Resource[]): {
 }
 
 export class SidebarConfigItemsBuilder {
-  private getMethodDeclForLanguage(entry: SDKJSON.Method) {
+  private getMethodDeclForLanguage(entry: SDKJSON.Method): MethodDecl | null {
     const decls = this.spec.decls[this.language] ?? {};
     const decl = decls[entry.stainlessPath];
     if (decl !== undefined) {
@@ -177,11 +179,15 @@ export class SidebarConfigItemsBuilder {
     return null;
   }
 
+  private isWebhookResource(resource: SDKJSON.Resource): boolean {
+    return resource.stainlessPath === '(resource) webhooks';
+  }
+
   private toResourceOverviewPage(entry: SDKJSON.Resource): UserSidebarResourceOverviewPage {
     return {
       kind: 'resource_overview_page',
-      label: 'Overview',
-      key: entry.configRef,
+      label: this.isWebhookResource(entry) ? 'Events' : 'Overview',
+      key: makeMethodOrResourceKey(entry),
       badge: undefined,
       metadata: {
         subResourceCount: countKeys(entry.subresources),
@@ -195,7 +201,7 @@ export class SidebarConfigItemsBuilder {
     return {
       kind: 'method_page',
       label: entry.title,
-      key: entry.endpoint,
+      key: makeMethodOrResourceKey(entry),
       badge: undefined,
       metadata: {
         deprecated: Boolean(entry.deprecated),
@@ -208,16 +214,10 @@ export class SidebarConfigItemsBuilder {
     };
   }
 
-  private sortByLabel<T extends UserSidebarConfigItem>(items: T[]) {
-    // sorts in place
-    items.sort((a, b) => {
-      return a.label.localeCompare(b.label);
-    });
-  }
-
   private generateResourceGroup(resource: SDKJSON.Resource, collapsed: boolean): ReferenceSidebarGroup {
     const entries: ReferenceSidebarConfigItem[] = [];
-    if (!this.options?.excludeResourceOverviewPages) {
+    // even if we aren't generating resource overview pages, we want to generate them for webhooks
+    if (!this.options?.excludeResourceOverviewPages || this.isWebhookResource(resource)) {
       entries.push(this.toResourceOverviewPage(resource));
     }
     const methods = Object.values(resource.methods ?? {});
@@ -228,7 +228,6 @@ export class SidebarConfigItemsBuilder {
         methodPages.push(this.toMethodPage(m, langDecl));
       }
     }
-    this.sortByLabel(methodPages);
     entries.push(...methodPages);
 
     const subresources = Object.values(resource.subresources ?? {});
@@ -238,14 +237,13 @@ export class SidebarConfigItemsBuilder {
         subresourceGroups.push(this.generateResourceGroup(sub, true));
       }
     }
-    this.sortByLabel(subresourceGroups);
     entries.push(...subresourceGroups);
 
     return {
       kind: 'group',
       badge: undefined,
       label: resource.title,
-      resourceGroupKey: resource.configRef,
+      resourceGroupKey: makeMethodOrResourceKey(resource),
       entries,
       collapsed,
     };
@@ -253,7 +251,7 @@ export class SidebarConfigItemsBuilder {
 
   public generateItems(): ReferenceSidebarConfigItem[] {
     const resourceMap = this.spec.resources;
-    let { resources, sharedModelsResource } = pullOutSharedModelsResource(Object.values(resourceMap ?? {}));
+    const { resources, sharedModelsResource } = pullOutSharedModelsResource(Object.values(resourceMap ?? {}));
 
     const entries: ReferenceSidebarConfigItem[] = resources.filter(isResourceNonEmpty).map((r) => {
       return this.generateResourceGroup(r, false);
@@ -276,35 +274,24 @@ export class SidebarConfigItemsBuilder {
   ) {}
 }
 
-export function walkSidebarConfigItems(
-  sidebar: ReferenceSidebarConfigItem[],
-  fn: (item: ReferenceSidebarConfigItem) => void,
-) {
-  for (const item of sidebar) {
-    fn(item);
-    if (item.kind === 'group') {
-      walkSidebarConfigItems(item.entries, fn);
-    }
-  }
-}
-
 type SidebarEntry = StarlightRouteData['sidebar'][number];
 
 // This allows us to be a bit more forgiving to the user.
 // As long as they don't modify the key, we can still find the item.
+
 function getResourceOrMethod(spec: SDKJSON.Spec, endpointOrConfigRef: string) {
   for (const entry of walkTree(spec, false)) {
-    if (entry.data.kind === 'resource' && entry.data.configRef === endpointOrConfigRef) {
-      return entry;
+    if (entry.data.kind === 'model') {
+      continue;
     }
-    if (entry.data.kind === 'http_method' && entry.data.endpoint === endpointOrConfigRef) {
+    if (makeMethodOrResourceKey(entry.data) === endpointOrConfigRef) {
       return entry;
     }
   }
   return null;
 }
 
-export function forceGenerateRoute({
+function forceGenerateRoute({
   basePath,
   stainlessPath,
   language,
@@ -325,19 +312,17 @@ export type BuildSidebarParams = {
   currentSlug: string;
 };
 
-type ToStarlightSidebarParams = BuildSidebarParams & {
+type ToStarlightSidebarParams = {
+  basePath: string;
   spec: SDKJSON.Spec;
   entries: ReferenceSidebarConfigItem[];
-  currentStainlessPath: string;
   currentLanguage: DocsLanguage;
 };
 
 export function toStarlightSidebar({
   basePath,
-  currentSlug,
   spec,
   entries,
-  currentStainlessPath,
   currentLanguage,
 }: ToStarlightSidebarParams): SidebarEntry[] {
   const starlightEntries: SidebarEntry[] = [];
@@ -350,7 +335,7 @@ export function toStarlightSidebar({
         type: 'link',
         href: readmeSlug,
         label: entry.label,
-        isCurrent: currentSlug === readmeSlug,
+        isCurrent: false,
         badge: entry.badge,
         attrs: {
           'data-stldocs-overview': 'readme',
@@ -369,14 +354,12 @@ export function toStarlightSidebar({
         language: currentLanguage,
       });
 
-      const isCurrent = resourceOrMethod.data.stainlessPath === currentStainlessPath;
-
       if (resourceOrMethod.data.kind === 'http_method') {
         starlightEntries.push({
           type: 'link',
           href: route,
           label: entry.label,
-          isCurrent,
+          isCurrent: false,
           badge: entry.badge,
           attrs: {
             'data-stldocs-method': resourceOrMethod.data.httpMethod,
@@ -387,7 +370,7 @@ export function toStarlightSidebar({
           type: 'link',
           href: route,
           label: entry.label,
-          isCurrent,
+          isCurrent: false,
           badge: entry.badge,
           attrs: {
             // TODO: @Ryan: is data.name unique? This is what we used before so I'm not changing, but I am curious.
@@ -398,14 +381,20 @@ export function toStarlightSidebar({
         throw new Error(`Unknown entry kind ${JSON.stringify(entry)}`);
       }
     } else if (entry.kind === 'group') {
+      // Skip pushing the group if if the resource it represents is not available in the current language.
+      // This occurs when SDK generation for the current language is skipped in the Stainless config for that resource.
+      if (entry.resourceGroupKey) {
+        const resourceOrMethod = getResourceOrMethod(spec, entry.resourceGroupKey);
+        if (resourceOrMethod?.data?.kind === 'resource' && !resourceOrMethod?.data?.[currentLanguage]) {
+          continue;
+        }
+      }
       starlightEntries.push({
         type: 'group',
         label: entry.label,
         entries: toStarlightSidebar({
           basePath,
-          currentSlug,
           spec,
-          currentStainlessPath,
           entries: entry.entries,
           currentLanguage,
         }),