@stainless-api/docs 0.1.0-beta.98 → 1.0.0-beta.140

package/stl-docs/components/headers/StackedHeader.astro

@@ -3,32 +3,26 @@ import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
 import Search from 'virtual:starlight/components/Search';
 import SiteTitle from 'virtual:starlight/components/SiteTitle';
 import HeaderLinks from './HeaderLinks.astro';
-import { TABS } from 'virtual:stl-docs-virtual-module';
 import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
 import SecondaryNavTabs from '../nav-tabs/SecondaryNavTabs.astro';
-import SplashMobileMenuToggle from './SplashMobileMenuToggle.astro';
 
-interface Props {
+type Props = {
   shouldRenderSearch?: boolean;
-}
+};
 
 const { shouldRenderSearch } = Astro.props;
-const { hasSidebar } = Astro.locals.starlightRoute;
 ---
 
-<div class="header my-header">
+<div class="header">
   <div class="left-group">
     <div class="title-wrapper sl-flex">
       <SiteTitle />
     </div>
   </div>
 
-  <div class="stl-top-container">
-    {shouldRenderSearch && <Search />}
-    {!hasSidebar && <SplashMobileMenuToggle />}
-  </div>
+  {shouldRenderSearch && <Search />}
 
-  <div class={`sl-hidden md:sl-flex print:hidden right-group`}>
+  <div class="right-group">
     <ThemeSelect />
     <HeaderLinks />
     <LanguageSelect />
@@ -36,45 +30,3 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 </div>
 
 <SecondaryNavTabs />
-
-<style is:inline>
-  .stl-top-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: end;
-    gap: 0.5rem;
-    width: 100%;
-  }
-  @media (min-width: 50rem) {
-    :root {
-      --sl-nav-height: 88px;
-    }
-
-    header.header {
-      display: flex;
-      flex-direction: column;
-      gap: 0.29rem;
-      padding-bottom: 0;
-    }
-
-    .stl-top-container {
-      justify-content: center;
-    }
-  }
-</style>
-
-{
-  TABS.length === 0 && (
-    <style
-      is:inline
-      set:text={`
-        @media (min-width: 50rem) {
-          :root {
-            --sl-nav-height: 56px;
-          }
-        }
-      `}
-    />
-  )
-}

package/stl-docs/components/mintlify-compat/Accordion.astro

@@ -1,8 +1,8 @@
 ---
-export interface Props {
+type Props = {
   title: string;
   children: astroHTML.JSX.Children;
-}
+};
 
 const { title } = Astro.props;
 

package/stl-docs/components/mintlify-compat/AccordionGroup.astro

@@ -1,9 +1,5 @@
 ---
 import { Accordion as StainlessAccordion } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <StainlessAccordion.Group>

package/stl-docs/components/mintlify-compat/Columns.astro

@@ -1,9 +1,9 @@
 ---
 import clsx from 'clsx';
 
-export interface Props {
+type Props = {
   cols: number;
-}
+};
 
 const { cols } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/Frame.astro

@@ -1,7 +1,7 @@
 ---
-export interface Props {
+type Props = {
   caption?: string;
-}
+};
 
 const { caption } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/Tab.astro

@@ -1,9 +1,9 @@
 ---
 import { TabItem } from '@astrojs/starlight/components';
 
-export interface Props {
+type Props = {
   title: string;
-}
+};
 
 const { title } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/callouts/Callout.astro

@@ -1,10 +1,10 @@
 ---
 import { Callout as StainlessCallout, type CalloutVariant } from '@stainless-api/ui-primitives';
 
-export interface Props {
+type Props = {
   variant?: CalloutVariant;
   children: astroHTML.JSX.Children;
-}
+};
 
 const { variant } = Astro.props;
 ---

package/stl-docs/components/mintlify-compat/callouts/Check.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="success">

package/stl-docs/components/mintlify-compat/callouts/Danger.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="danger">

package/stl-docs/components/mintlify-compat/callouts/Info.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="info">

package/stl-docs/components/mintlify-compat/callouts/Note.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="note">

package/stl-docs/components/mintlify-compat/callouts/Tip.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="tip">

package/stl-docs/components/mintlify-compat/callouts/Warning.astro

@@ -1,9 +1,5 @@
 ---
 import { Callout } from '@stainless-api/ui-primitives';
-
-export interface Props {
-  children: astroHTML.JSX.Children;
-}
 ---
 
 <Callout variant="warning">

package/stl-docs/components/nav-tabs/NavDropdown.astro

@@ -1,29 +1,33 @@
 ---
-import { Dropdown } from '@stainless-api/docs/components';
-import { buildNavLinks } from './buildNavLinks';
 import { ChevronsUpDownIcon } from 'lucide-react';
+import { Dropdown } from '@stainless-api/docs/components';
 
-const navLinks = buildNavLinks(Astro.locals.starlightRoute);
+import type { NavLink } from './buildNavLinks';
 
-const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]!).label;
+type Props = {
+  links: NavLink[];
+  currentItem: NavLink | null;
+};
 ---
 
 <Dropdown id="nav-dropdown" className="nav-dropdown-root">
   <Dropdown.Trigger>
-    <Dropdown.TriggerSelectedItem>{buttonText}</Dropdown.TriggerSelectedItem>
+    <Dropdown.TriggerSelectedItem>
+      {Astro.props.currentItem ? Astro.props.currentItem.label : 'Navigation'}
+    </Dropdown.TriggerSelectedItem>
     <Dropdown.TriggerIcon>
       <ChevronsUpDownIcon size={16} />
     </Dropdown.TriggerIcon>
   </Dropdown.Trigger>
   <Dropdown.Menu className="dropdown-menu">
     {
-      navLinks.map((item) => (
+      Astro.props.links.map((item) => (
         <Dropdown.MenuItem
           key={item.link}
           href={item.link}
           className="dropdown-item"
           value={item.label}
-          isSelected={item.label === buttonText}
+          isSelected={item.active}
         >
           {item.label}
           <Dropdown.MenuItemTemplate>{item.label}</Dropdown.MenuItemTemplate>
@@ -39,6 +43,7 @@ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]!).label;
 
   document.addEventListener(getPageLoadEvent(), () => {
     initDropdown({
+      initialValue: null,
       root: document.getElementById('nav-dropdown'),
     });
   });

package/stl-docs/components/nav-tabs/NavTabs.astro

@@ -5,6 +5,8 @@ import NavDropdown from './NavDropdown.astro';
 import clsx from 'clsx';
 
 const navLinks = buildNavLinks(Astro.locals.starlightRoute);
+
+const currentItem = navLinks.find((item) => item.active) ?? null;
 ---
 
 <div id="nav-links-container" class="nav-links-container">
@@ -26,7 +28,7 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
     </ul>
   </div>
   <div class="mobile-nav-dropdown" data-mobile-only>
-    <NavDropdown />
+    {navLinks.length > 0 && <NavDropdown links={navLinks} currentItem={currentItem} />}
   </div>
 </div>
 
@@ -90,8 +92,8 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
 
       localStorage.setItem('stl-nav-links-mode', mode);
 
-      document.documentElement.classList.remove('stl-nav-links-mode-desktop', 'stl-nav-links-mode-mobile');
-      document.documentElement.classList.add('stl-nav-links-mode-' + mode);
+      document.documentElement.classList.toggle('stl-nav-links-mode-desktop', mode === 'desktop');
+      document.documentElement.classList.toggle('stl-nav-links-mode-mobile', mode === 'mobile');
     }
 
     const resizeObserver = new ResizeObserver(() => {

package/stl-docs/components/nav-tabs/buildNavLinks.ts

@@ -13,3 +13,5 @@ export function buildNavLinks(starlightRoute: StarlightRouteData) {
 
   return navLinks;
 }
+
+export type NavLink = ReturnType<typeof buildNavLinks>[number];

package/stl-docs/components/pagination/Pagination.astro

@@ -52,11 +52,14 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
   .pagination-links {
     --stl-ui-pagination-padding: 8px;
     --stl-ui-pagination-border-radius-inner: var(--stl-ui-layout-border-radius-sml);
+    --stl-ui-pagination-border-radius-outer: calc(
+      var(--stl-ui-pagination-border-radius-inner) + var(--stl-ui-pagination-padding)
+    );
 
     padding: var(--stl-ui-pagination-padding);
     background-color: var(--stl-color-faint-background);
     border: 1px solid var(--stl-color-border);
-    border-radius: calc(var(--stl-ui-pagination-border-radius-inner) + var(--stl-ui-pagination-padding));
+    border-radius: var(--stl-ui-pagination-border-radius-outer);
 
     font-size: var(--stl-typography-scale-sm);
     letter-spacing: normal;
@@ -64,7 +67,6 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
     display: flex;
     gap: 8px;
 
-    margin-bottom: 2rem;
     color: inherit; /* stl-ui-not-prose sets color: initial */
 
     a {

package/stl-docs/components/pagination/PaginationLinkEmphasized.astro

@@ -1,10 +1,10 @@
 ---
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 const { href, direction } = Astro.props;
-export interface Props {
+type Props = {
   href: string;
   direction: 'prev' | 'next';
-}
+};
 ---
 
 <a href={href} class="pagination-links__link pagination-links__link--emphasized">

package/stl-docs/components/pagination/PaginationLinkQuiet.astro

@@ -1,8 +1,8 @@
 ---
 const { href } = Astro.props;
-export interface Props {
+type Props = {
   href: string;
-}
+};
 ---
 
 <a href={href} class="pagination-links__link pagination-links__button pagination-links__link--quiet">

package/stl-docs/components/pagination/util.ts

@@ -2,10 +2,10 @@ import type { StarlightRouteData } from '@astrojs/starlight/route-data';
 import { getCollection } from 'astro:content';
 
 export type SidebarEntry = StarlightRouteData['sidebar'][number];
-export type SidebarLink = Extract<SidebarEntry, { type: 'link' }>;
-export type SidebarGroup = Extract<SidebarEntry, { type: 'group' }>;
+type SidebarLink = Extract<SidebarEntry, { type: 'link' }>;
+type SidebarGroup = Extract<SidebarEntry, { type: 'group' }>;
 
-export const flattenSidebar = (sidebar: SidebarEntry[]): SidebarLink[] =>
+const flattenSidebar = (sidebar: SidebarEntry[]): SidebarLink[] =>
   sidebar.flatMap((e) => (e.type === 'group' ? flattenSidebar(e.entries) : e));
 
 function findParentOfSidebarEntry(sidebar: SidebarEntry[], targetEntry: SidebarEntry): SidebarGroup | null {

package/stl-docs/components/sidebars/BaseSidebar.astro

@@ -3,9 +3,80 @@ import HeaderLinks from '../headers/HeaderLinks.astro';
 import { SidebarWithComponents } from './SidebarWithComponents';
 import SidebarPersister from '@astrojs/starlight/components/SidebarPersister.astro';
 import { convertAstroSidebarToStl } from './convertAstroSidebarToStl';
+import { StlSidebarEntry, StlSidebarGroup, StlSidebarLink } from '@stainless-api/docs-ui/components';
+import { LINK_GROUP_TITLES_TO_OVERVIEW_PAGES } from 'virtual:stl-docs-virtual-module';
 
 const { sidebar } = Astro.locals.starlightRoute;
-const stlSidebar = convertAstroSidebarToStl(sidebar);
+
+let stlSidebar = convertAstroSidebarToStl(sidebar);
+
+function extractOverviewPage(entry: StlSidebarGroup): {
+  overviewLink: StlSidebarLink | null;
+  remainingEntries: StlSidebarEntry[];
+} {
+  let overviewLink: StlSidebarLink | null = null;
+
+  const withoutOverview = entry.entries.filter((e) => {
+    if (e.type !== 'link') {
+      return true;
+    }
+    const overviewAttr = e.attrs?.['data-stldocs-overview'];
+    if (!overviewAttr) {
+      return true;
+    }
+    overviewLink = e;
+    return false;
+  });
+
+  return {
+    overviewLink,
+    remainingEntries: withoutOverview,
+  };
+}
+
+function linkGroupTitleToOverviewPages(sidebar: StlSidebarEntry[]): StlSidebarEntry[] {
+  return sidebar.map((entry) => {
+    if (entry.type === 'group') {
+      const { overviewLink, remainingEntries } = extractOverviewPage(entry);
+
+      // group only contained an overview link
+      if (overviewLink && remainingEntries.length === 0) {
+        return {
+          ...overviewLink,
+          label: entry.label, // keep the group label
+        };
+      }
+
+      // set the group target to the overview link target
+
+      let target = entry.target;
+      let isCurrent = entry.isCurrent;
+      let collapsed = entry.collapsed;
+      if (overviewLink) {
+        target = overviewLink.target;
+        isCurrent = overviewLink.isCurrent;
+        if (isCurrent) {
+          collapsed = false;
+        }
+      }
+
+      return {
+        ...entry,
+        entries: linkGroupTitleToOverviewPages(remainingEntries),
+        target,
+        isCurrent,
+        collapsed,
+      };
+    } else {
+      return entry;
+    }
+  });
+}
+
+// Since Terraform only renders the top level resource, we don't need to link group titles to overview pages.
+if (LINK_GROUP_TITLES_TO_OVERVIEW_PAGES === true && Astro.locals.language !== 'terraform') {
+  stlSidebar = linkGroupTitleToOverviewPages(stlSidebar);
+}
 ---
 
 <div class="stl-sidebar-header-links">

package/stl-docs/disableCalloutSyntax.ts

@@ -1,7 +1,7 @@
 import type { AstroIntegration } from 'astro';
 import type { StarlightPlugin } from '@astrojs/starlight/types';
 
-export const disableCalloutSyntaxAstroIntegration = {
+const disableCalloutSyntaxAstroIntegration = {
   name: 'stl-starlight-remove-callout-syntax',
   hooks: {
     'astro:config:setup': ({ config: astroConfig }) => {

package/stl-docs/fonts.ts

@@ -3,11 +3,11 @@ import type { Defined } from './loadStlDocsConfig';
 import { fontProviders } from 'astro/config';
 import type { FontPreloadFilter } from 'astro:assets';
 
-type AstroFontConfigEntry = Defined<AstroConfig['experimental']['fonts']>[number];
+type AstroFontConfigEntry = Defined<AstroConfig['fonts']>[number];
 
 // Apply Omit to each member of the union while preserving union structure
 type PreloadFilter = { preload?: FontPreloadFilter };
-export type StlDocsFontConfigEntry = (AstroFontConfigEntry extends infer T
+type StlDocsFontConfigEntry = (AstroFontConfigEntry extends infer T
   ? T extends unknown
     ? Omit<T, 'cssVariable'>
     : never
@@ -165,19 +165,19 @@ export function flattenFonts(fonts: StlDocsFontConfig | undefined): AstroFontCon
     fontConfigs.push({
       ...fonts.primary,
       cssVariable: '--stl-typography-font' as const,
-    } as AstroFontConfigEntry);
+    });
   }
   if (fonts.heading) {
     fontConfigs.push({
       ...fonts.heading,
       cssVariable: '--stl-typography-font-heading' as const,
-    } as AstroFontConfigEntry);
+    });
   }
   if (fonts.mono) {
     fontConfigs.push({
       ...fonts.mono,
       cssVariable: '--stl-typography-font-mono' as const,
-    } as AstroFontConfigEntry);
+    });
   }
   if (fonts.additional) {
     fontConfigs.push(...fonts.additional.map((font) => font as AstroFontConfigEntry));