@stainless-api/docs 0.1.0-beta.3 → 0.1.0-beta.30

package/styles/sidebar.css

@@ -1,168 +1,239 @@
-@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;
+/* reset starlight styles */
+@layer starlight.core {
+  .sidebar .sidebar-pane .sidebar-content {
+    * {
+      all: revert-layer;
+      &::before,
+      &::after {
+        all: revert-layer;
       }
     }
+  }
+}
 
-    li {
-      margin-top: 0;
-    }
-
-    .group-label span,
-    li a span {
-      font-size: var(--sl-text-sm);
-      line-height: 150%;
-    }
+.sidebar {
+  --stl-sidebar-item-padding-inline: 12px;
+  --stl-sidebar-item-padding-block: 6px;
+  --stl-sidebar-indent: 12px;
+  font-size: var(--stl-ui-type-scale-text-sm);
+}
 
-    summary {
-      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
-      padding-right: 4px;
-    }
+.sidebar-pane {
+  border-inline-end: 1px solid var(--sl-color-hairline-light);
+}
 
-    .top-level > li:first-child > a,
-    .top-level li:first-child details > summary {
-      padding-top: 0;
-    }
+.sidebar-content {
+  ul,
+  summary {
+    list-style-type: none;
+  }
 
-    li a {
-      position: relative;
-      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
-    }
+  /* collapsible sections */
+  details > summary {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
 
-    details > summary > svg {
-      opacity: 0.5;
+    .caret {
+      margin-left: auto;
+      margin-right: -4px;
+      opacity: 0.65;
+      transition:
+        opacity 0.1s ease-out,
+        transform 0.1s ease-out;
     }
+  }
+  details[open] > summary .caret {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
 
-    details[open] > summary > svg {
-      opacity: 1;
+  /* list items */
+  summary,
+  li {
+    margin: 0;
+    border-radius: 8px;
+  }
+  summary,
+  li a {
+    cursor: pointer;
+    padding: var(--stl-sidebar-item-padding-block) var(--stl-sidebar-item-padding-inline);
+    &:hover,
+    &[aria-current='page'] {
+      color: var(--stl-ui-foreground);
     }
-
-    a.large span {
-      font-weight: 400;
-      color: var(--sl-color-gray-2);
-
-      &:hover {
-        color: var(--sl-color-white);
-      }
+  }
+  .stl-sdk-select .stldocs-dropdown-trigger {
+    /* dropdown should match link padding, accounting for 1px border */
+    padding: calc(var(--stl-sidebar-item-padding-block) - 1px)
+      calc(var(--stl-sidebar-item-padding-inline) - 1px);
+  }
+  li a {
+    color: var(--stl-ui-foreground-secondary);
+    font-weight: 400;
+    display: flex;
+    text-decoration: none;
+    span {
+      font-weight: inherit;
     }
 
-    a.large[aria-current='page'] span {
-      color: var(--sl-color-text-accent);
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--stl-ui-foreground-secondary);
     }
-
-    .stl-mobile-only-sidebar-item-last {
-      border-bottom: 1px solid var(--sl-color-hairline-light);
-      padding-bottom: 1rem;
-      margin-bottom: 0.5rem;
+    &[aria-current='page'] {
+      font-weight: 500;
     }
   }
-
-  .stl-sdk-select {
-    .dropdown-toggle {
-      width: 100%;
-    }
+  li:has(> a:is(:hover, [aria-current='page'])),
+  summary:hover {
+    background-color: var(--stl-ui-muted-background);
   }
 
-  [data-stldocs-method] {
-    display: flex;
-    gap: 0.6rem;
+  /* nested list items have flat left edge */
+  ul ul :is(summary, li) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
-
-  [data-stldocs-method]::before {
-    content: '';
-    min-width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    text-align: center;
-    margin-top: 1px;
+  ul {
+    padding: 0;
   }
-
-  [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);
+  ul ul li {
+    border-inline-start: 1px solid var(--stl-ui-border-muted);
+    margin-inline-start: var(--stl-sidebar-indent);
+    &:has(> a[aria-current='page']) {
+      border-inline-start: 2px solid var(--stl-ui-foreground-accent);
+      & > a {
+        margin-left: -1px;
+      }
+    }
   }
 
-  .stl-mobile-only-sidebar-item[aria-current='page']::after {
-    background-color: transparent;
-  }
+  /* Method & resource icons */
 
-  /* CSS is the only way to customize the Starlight sidebar, so the SVGs have to be here. */
+  a[data-stldocs-method],
+  a[data-stldocs-resource] {
+    --stl-ui-sidebar-icon-size-outer: 18px;
+    --stl-ui-sidebar-icon-margin: 8px;
+  }
+  a[data-stldocs-method] {
+    --stl-ui-sidebar-icon-size-inner: 16px;
+    --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-swatch-gray-white);
 
-  :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='get'] {
+      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-green-base);
+      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-green-faint);
+      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-green-muted);
     }
-
-    [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='post'] {
+      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-blue-base);
+      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-blue-faint);
+      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-blue-muted);
     }
-
-    [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='patch'],
+    &[data-stldocs-method='put'] {
+      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-orange-base);
+      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-orange-faint);
+      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-orange-muted);
     }
-
-    [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>');
+    &[data-stldocs-method='delete'] {
+      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-red-base);
+      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-red-faint);
+      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-red-muted);
     }
-  }
 
-  :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='get'] {
+      --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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='post'],
+    &[data-stldocs-method='put'],
+    &[data-stldocs-method='patch'] {
+      --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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'] {
+      --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></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>');
-    }
+  a[data-stldocs-resource] {
+    /* not yet implemented in markup */
+    --stl-ui-sidebar-icon-color: var(--stl-ui-foreground-muted);
+    --stl-ui-sidebar-icon-color-faint: var(--stl-ui-muted-background);
+    --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-inverse-foreground);
+    --stl-ui-sidebar-icon-size-inner: 14px;
+    --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>');
   }
 
-  .stl-sidebar-header-links {
+  a[data-stldocs-method],
+  a[data-stldocs-resource] {
     display: flex;
-    gap: 1rem;
-    flex-direction: column-reverse;
+    gap: var(--stl-ui-sidebar-icon-margin);
+    align-items: center;
+    position: relative;
+
+    &::before,
+    &::after {
+      content: '';
+      width: var(--stl-ui-sidebar-icon-size-outer);
+      height: var(--stl-ui-sidebar-icon-size-outer);
+      display: block;
+    }
+    &::before {
+      border-radius: 4px;
+      background-color: var(--stl-ui-sidebar-icon-color-faint);
+      flex: 0 0 auto;
+    }
+    /* yuck (we can clean this up once we are changing sidebar markup) */
+    &::after {
+      background-color: var(--stl-ui-sidebar-icon-color);
+      mask-image: var(--stl-ui-sidebar-icon-url);
+      mask-size: var(--stl-ui-sidebar-icon-size-inner) var(--stl-ui-sidebar-icon-size-inner);
+      mask-repeat: no-repeat;
+      mask-position: center;
+      position: absolute;
+      left: var(--stl-sidebar-item-padding-inline);
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    &:hover {
+      &::before {
+        background-color: var(--stl-ui-sidebar-icon-color-muted);
+      }
+    }
+    &[aria-current='page'] {
+      &::before {
+        background-color: var(--stl-ui-sidebar-icon-color);
+      }
+      &::after {
+        background-color: var(--stl-ui-sidebar-icon-color-inverse);
+      }
+    }
   }
+}
 
-  @media (min-width: 50rem) {
-    .stl-mobile-only-sidebar-item {
-      display: none;
-    }
+.sidebar-content .stl-mobile-only-sidebar-item-last {
+  margin-bottom: 2rem;
+  position: relative;
+}
 
-    .stl-sidebar-header-links {
-      display: none;
-    }
+.stl-sdk-select .dropdown-toggle {
+  width: 100%;
+}
+
+.stl-sidebar-header-links {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column-reverse;
+}
+
+@media (min-width: 50rem) {
+  .stl-mobile-only-sidebar-item,
+  li:has(> .stl-mobile-only-sidebar-item) {
+    display: none;
+  }
+
+  .stl-sidebar-header-links {
+    display: none;
   }
 }

package/styles/toc.css

@@ -1,42 +1,46 @@
-@layer stainless {
-  .right-sidebar-panel {
-    nav > ul {
-      padding-top: 0;
-      border-left: 1px solid var(--sl-color-hairline-light);
-    }
-    ul ul {
-      padding-top: 0;
-    }
+.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;
+  ul > li > a {
+    --pad-inline: 1rem;
+    font-weight: 400;
+    padding-block: 0.32rem;
+    color: var(--sl-color-text-secondary);
+    position: relative;
+
+    &:hover {
+      text-decoration: underline;
       color: var(--sl-color-text);
-      padding-block: 0.32rem;
-      color: var(--sl-color-text-secondary);
-      position: relative;
+      text-decoration-color: var(--sl-color-text-tertiary);
+    }
 
-      &[aria-current='true'] {
-        color: var(--sl-color-text-accent);
+    &[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;
-        }
+      &::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;
-    }
+  h2 {
+    color: var(--stldocs-color-text-secondary);
+    font-size: var(--stldocs-font-size-small);
+    line-height: 150%;
+    text-decoration: none;
+    font-weight: 400;
   }
 }

package/theme.css

@@ -1,5 +1,5 @@
 @layer starlight.base, starlight.reset, starlight.core, starlight.content, starlight.components, starlight.utils;
-@layer starlight, docs-ui, stl-ui, stainless;
+@layer starlight;
 
 @import './styles/fonts.css';
 @import './styles/variables.css';
@@ -13,3 +13,11 @@
 @import './styles/sdk_select.css';
 @import '@stainless-api/ui-primitives/styles.css';
 @import './styles/mintlify-compat.css';
+
+@import '@stainless-api/docs-ui/src/styles/resets.css';
+@import '@stainless-api/docs-ui/src/styles/primitives.css';
+@import '@stainless-api/docs-ui/src/styles/main.css';
+@import '@stainless-api/docs-ui/src/styles/snippets.css';
+@import '@stainless-api/docs-ui/src/styles/search.css';
+
+@import './components/variables.css';

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict",
+  "extends": "../../tsconfig.base.json",
   "include": [
     ".astro/*",
     "node_modules/@astrojs/starlight/**/*.d.ts",
@@ -7,11 +7,8 @@
     ".stl-docs/**/*",
     "./plugin/**/*"
   ],
-  "exclude": ["dist"],
+  "exclude": ["dist", "**/preview.worker.docs.js"],
   "compilerOptions": {
-    "paths": {
-      "~/*": ["../../../stainless/legacy-dir-root/*"]
-    },
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }

package/virtual-module.d.ts

@@ -18,9 +18,10 @@ declare module 'virtual:stl-starlight-virtual-module' {
   export const PROPERTY_SETTINGS: PropertySettingsType;
   export const MIDDLEWARE: StlStarlightMiddleware;
   export const SEARCH: StainlessStarlightUserConfig['search'];
+  export const ENABLE_CONTEXT_MENU: boolean;
 }
 
-declare module 'virtual:stl-stl-starlight-virtual-module' {
+declare module 'virtual:stl-docs-virtual-module' {
   import type { ButtonVariant } from '@stainless-api/ui-primitives';
   import type { AnchorHTMLAttributes } from 'react';
 
@@ -40,4 +41,7 @@ declare module 'virtual:stl-stl-starlight-virtual-module' {
   export const SPLIT_TABS_ENABLED: boolean;
   export const HEADER_LAYOUT: 'default' | 'stacked';
   export const ENABLE_CLIENT_ROUTER: boolean;
+  export const API_REFERENCE_BASE_PATH: string | null;
+  export const ENABLE_PROSE_MARKDOWN_RENDERING: boolean;
+  export const ENABLE_CONTEXT_MENU: boolean;
 }

package/plugin/globalJs/ai-dropdown.ts

@@ -1,57 +0,0 @@
-export const copyCurrentPageAsMarkdown = async () => {
-  const currentUrl = new URL(window.location.href);
-  const markdownUrl = `${currentUrl.origin}${currentUrl.pathname}.md`;
-
-  try {
-    const response = await fetch(markdownUrl);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
-    }
-    const markdown = await response.text();
-    await navigator.clipboard.writeText(markdown);
-    console.log('Markdown copied to clipboard');
-  } catch (error) {
-    console.error('There has been a problem with your fetch operation:', error);
-  }
-};
-
-export function onSelectAIOption(value: string, makeMarkdownLink: boolean = true) {
-  if (value === 'copy-markdown') {
-    copyCurrentPageAsMarkdown();
-  }
-  if (value === 'view-as-markdown') {
-    const currentUrl = new URL(window.location.href);
-    const markdownUrl = `${currentUrl.origin}${currentUrl.pathname}.md`;
-    window.open(markdownUrl, '_blank');
-  }
-
-  if (value === 'chat-gpt') {
-    const currentUrl = new URL(window.location.href);
-    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
-
-    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
-
-    const chatGptUrl = `https://chatgpt.com/?hints=search&prompt=${encodeURIComponent(prompt)}`;
-    window.open(chatGptUrl, '_blank');
-  }
-
-  if (value === 'claude') {
-    const currentUrl = new URL(window.location.href);
-    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
-
-    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
-
-    const claudeUrl = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
-    window.open(claudeUrl, '_blank');
-  }
-
-  if (value === 'cursor') {
-    const currentUrl = new URL(window.location.href);
-    const llmUrl = makeMarkdownLink ? `${currentUrl.origin}${currentUrl.pathname}.md` : currentUrl.href;
-
-    const prompt = `Read from ${llmUrl} so I can ask questions about it.`;
-
-    const cursorUrl = `https://www.cursor.so/?prompt=${encodeURIComponent(prompt)}`;
-    window.open(cursorUrl, '_blank');
-  }
-}