@stainless-api/docs 0.1.0-beta.0

package/styles/sidebar.css

@@ -0,0 +1,168 @@
+@layer stainless {
+  .sidebar-pane {
+    border-inline-end: 1px solid var(--sl-color-hairline-light);
+    background-color: var(--sl-color-bg);
+  }
+
+  .sidebar-content {
+    li a[aria-current='page'] {
+      background-color: unset;
+      color: var(--sl-color-text-accent);
+
+      span {
+        font-weight: normal;
+      }
+    }
+
+    li {
+      margin-top: 0;
+    }
+
+    .group-label span,
+    li a span {
+      font-size: var(--sl-text-sm);
+      line-height: 150%;
+    }
+
+    summary {
+      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
+      padding-right: 4px;
+    }
+
+    .top-level > li:first-child > a,
+    .top-level li:first-child details > summary {
+      padding-top: 0;
+    }
+
+    li a {
+      position: relative;
+      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
+    }
+
+    details > summary > svg {
+      opacity: 0.5;
+    }
+
+    details[open] > summary > svg {
+      opacity: 1;
+    }
+
+    a.large span {
+      font-weight: 400;
+      color: var(--sl-color-gray-2);
+
+      &:hover {
+        color: var(--sl-color-white);
+      }
+    }
+
+    a.large[aria-current='page'] span {
+      color: var(--sl-color-text-accent);
+    }
+
+    .stl-mobile-only-sidebar-item-last {
+      border-bottom: 1px solid var(--sl-color-hairline-light);
+      padding-bottom: 1rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .stl-sdk-select {
+    .dropdown-toggle {
+      width: 100%;
+    }
+  }
+
+  [data-stldocs-method] {
+    display: flex;
+    gap: 0.6rem;
+  }
+
+  [data-stldocs-method]::before {
+    content: '';
+    min-width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    text-align: center;
+    margin-top: 1px;
+  }
+
+  [aria-current='page']::after {
+    content: '';
+    position: absolute;
+    /* Shift left accounting for sidebar item padding - current item width. Sidebar border width is not a variable, it's always set to 1px */
+    left: calc(-1 * var(--sl-sidebar-item-padding-inline) - 1px);
+    top: 10%;
+    height: 80%;
+    width: 2px;
+    background-color: var(--sl-color-text-accent);
+  }
+
+  .stl-mobile-only-sidebar-item[aria-current='page']::after {
+    background-color: transparent;
+  }
+
+  /* CSS is the only way to customize the Starlight sidebar, so the SVGs have to be here. */
+
+  :root[data-theme='dark'] {
+    [data-stldocs-method='get']::before {
+      background-color: var(--sl-color-green-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(74, 194, 107)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
+    }
+
+    [data-stldocs-method='post']::before {
+      background-color: var(--sl-color-blue-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(84, 174, 255)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
+    }
+
+    [data-stldocs-method='patch']::before,
+    [data-stldocs-method='put']::before {
+      background-color: var(--sl-color-orange-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(251, 143, 68)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
+    }
+
+    [data-stldocs-method='delete']::before {
+      background-color: var(--sl-color-red-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(248, 89, 92)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+    }
+  }
+
+  :root[data-theme='light'] {
+    [data-stldocs-method='get']::before {
+      background-color: var(--sl-color-green-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(31, 124, 58)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
+    }
+
+    [data-stldocs-method='post']::before {
+      background-color: var(--sl-color-blue-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(9, 105, 218)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
+    }
+
+    [data-stldocs-method='patch']::before,
+    [data-stldocs-method='put']::before {
+      background-color: var(--sl-color-orange-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(210, 86, 1)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
+    }
+
+    [data-stldocs-method='delete']::before {
+      background-color: var(--sl-color-red-low);
+      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(207, 34, 46)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
+    }
+  }
+
+  .stl-sidebar-header-links {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column-reverse;
+  }
+
+  @media (min-width: 50rem) {
+    .stl-mobile-only-sidebar-item {
+      display: none;
+    }
+
+    .stl-sidebar-header-links {
+      display: none;
+    }
+  }
+}

package/styles/toc.css

@@ -0,0 +1,42 @@
+@layer stainless {
+  .right-sidebar-panel {
+    nav > ul {
+      padding-top: 0;
+      border-left: 1px solid var(--sl-color-hairline-light);
+    }
+    ul ul {
+      padding-top: 0;
+    }
+
+    ul > li > a {
+      --pad-inline: 1rem;
+      font-weight: 400;
+      color: var(--sl-color-text);
+      padding-block: 0.32rem;
+      color: var(--sl-color-text-secondary);
+      position: relative;
+
+      &[aria-current='true'] {
+        color: var(--sl-color-text-accent);
+
+        &::after {
+          content: '';
+          position: absolute;
+          height: 100%;
+          width: 2px;
+          background-color: var(--sl-color-text-accent);
+          left: -1px;
+          top: 0;
+        }
+      }
+    }
+
+    h2 {
+      color: var(--stldocs-color-text-secondary);
+      font-size: var(--stldocs-font-size-small);
+      line-height: 150%;
+      text-decoration: none;
+      font-weight: 400;
+    }
+  }
+}

package/styles/variables.css

@@ -0,0 +1,18 @@
+:root {
+  --sl-color-bg-table-row: #ffffff0a;
+  --sl-button-border-radius: 8px;
+  --sl-text-body-sm: 0.86rem;
+  --sl-content-width: 52rem;
+  --sl-nav-pad-y: 0.5rem;
+  --sl-nav-height: 56px;
+  --sl-sidebar-width: 19rem;
+  --sl-button-size: 32px;
+  --sl-button-padding-x: 0.75rem;
+  --sl-button-padding-y: 0.5rem;
+  --sl-button-icon-offset: 0.2rem;
+  --sl-menu-button-size: var(--sl-button-size);
+
+  --sl-nav-gap: 0.5rem;
+  --sl-icon-color: var(--sl-color-text);
+  --sl-page-max-width: unset;
+}

package/theme.css

@@ -0,0 +1,15 @@
+@layer starlight.base, starlight.reset, starlight.core, starlight.content, starlight.components, starlight.utils;
+@layer starlight, docs-ui, stl-ui, stainless;
+
+@import './styles/fonts.css';
+@import './styles/variables.css';
+@import './styles/links.css';
+@import './styles/sidebar.css';
+@import './styles/search.css';
+@import './styles/toc.css';
+@import './styles/page.css';
+@import './styles/overrides.css';
+@import './styles/code.css';
+@import './styles/sdk_select.css';
+@import '@stainless-api/ui-primitives/styles.css';
+@import './styles/mintlify-compat.css';

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [
+    ".astro/*",
+    "node_modules/@astrojs/starlight/**/*.d.ts",
+    "**/*",
+    ".stl-docs/**/*",
+    "./plugin/**/*"
+  ],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "paths": {
+      "~/*": ["../../../stainless/legacy-dir-root/*"]
+    },
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}

package/virtual-module.d.ts

@@ -0,0 +1,43 @@
+declare module 'virtual:stl-starlight-virtual-module' {
+  import type { CreateShikiHighlighterOptions } from '@astrojs/markdown-remark';
+  import type { PropertySettingsType } from '@stainless-api/docs-ui/src/contexts';
+  import type { StlStarlightMiddleware } from '@stainless-api/docs/plugin/MiddlewareTypes';
+  import type { StainlessStarlightUserConfig } from './plugin/loadPluginConfig';
+
+  export const BASE_PATH: string;
+  export const CMS_PORT: number;
+  export const EXCLUDE_LANGUAGES: string[];
+  export const DEFAULT_LANGUAGE: string;
+  export const BREADCRUMB_CONFIG: {
+    includeCurrentPage?: boolean;
+  } | null;
+  export const EXPAND_RESOURCES: boolean;
+  export const HIGHLIGHT_THEMES: CreateShikiHighlighterOptions['themes'];
+  export const CONTENT_PANEL_LAYOUT: 'double-pane' | 'single-pane';
+  export const EXPERIMENTAL_COLLAPSIBLE_SNIPPETS: boolean | undefined;
+  export const PROPERTY_SETTINGS: PropertySettingsType;
+  export const MIDDLEWARE: StlStarlightMiddleware;
+  export const SEARCH: StainlessStarlightUserConfig['search'];
+}
+
+declare module 'virtual:stl-stl-starlight-virtual-module' {
+  import type { ButtonVariant } from '@stainless-api/ui-primitives';
+  import type { AnchorHTMLAttributes } from 'react';
+
+  type Tab = {
+    label: string;
+    link: string;
+    hidden?: boolean;
+  };
+
+  export const HEADER_LINKS: {
+    label: string;
+    link: string;
+    variant?: ButtonVariant;
+    attrs?: AnchorHTMLAttributes<HTMLAnchorElement>;
+  }[];
+  export const TABS: Tab[];
+  export const SPLIT_TABS_ENABLED: boolean;
+  export const HEADER_LAYOUT: 'default' | 'stacked';
+  export const ENABLE_CLIENT_ROUTER: boolean;
+}