@stainless-api/docs 0.1.0-beta.12 → 0.1.0-beta.121

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/CHANGELOG.md +1012 -0
  2. package/eslint-suppressions.json +95 -0
  3. package/{eslint.config.js → eslint.config.ts} +0 -2
  4. package/locals.d.ts +17 -0
  5. package/package.json +57 -43
  6. package/playground-virtual-modules.d.ts +96 -0
  7. package/plugin/assets/languages/cli.svg +14 -0
  8. package/plugin/assets/languages/csharp.svg +1 -0
  9. package/plugin/assets/languages/php.svg +4 -0
  10. package/plugin/buildAlgoliaIndex.ts +40 -39
  11. package/plugin/components/MethodDescription.tsx +54 -0
  12. package/plugin/components/RequestBuilder/ParamEditor.tsx +55 -0
  13. package/plugin/components/RequestBuilder/SnippetStainlessIsland.tsx +107 -0
  14. package/plugin/components/RequestBuilder/index.tsx +40 -0
  15. package/plugin/components/RequestBuilder/props.ts +9 -0
  16. package/plugin/components/RequestBuilder/spec-helpers.ts +47 -0
  17. package/plugin/components/RequestBuilder/styles.css +67 -0
  18. package/plugin/components/SDKSelect.astro +18 -111
  19. package/plugin/components/SnippetCode.tsx +112 -70
  20. package/plugin/components/StainlessIslands.tsx +126 -0
  21. package/plugin/components/search/SearchAlgolia.astro +46 -29
  22. package/plugin/components/search/SearchIsland.tsx +61 -37
  23. package/plugin/generateAPIReferenceLink.ts +2 -2
  24. package/plugin/globalJs/ai-dropdown-options.ts +248 -0
  25. package/plugin/globalJs/code-snippets.ts +45 -16
  26. package/plugin/globalJs/copy.ts +115 -27
  27. package/plugin/globalJs/create-playground.shim.ts +3 -0
  28. package/plugin/globalJs/method-descriptions.ts +33 -0
  29. package/plugin/globalJs/navigation.ts +15 -33
  30. package/plugin/globalJs/playground-data.shim.ts +1 -0
  31. package/plugin/globalJs/playground-data.ts +14 -0
  32. package/plugin/globalJs/summary-selection-tweak.ts +29 -0
  33. package/plugin/helpers/generateDocsRoutes.ts +59 -0
  34. package/plugin/helpers/multiSpec.ts +8 -0
  35. package/plugin/index.ts +306 -142
  36. package/plugin/languages.ts +8 -2
  37. package/plugin/loadPluginConfig.ts +251 -107
  38. package/plugin/middlewareBuilder/stainlessMiddleware.d.ts +3 -1
  39. package/plugin/react/Routing.tsx +214 -143
  40. package/plugin/referencePlaceholderUtils.ts +18 -15
  41. package/plugin/replaceSidebarPlaceholderMiddleware.ts +39 -35
  42. package/plugin/routes/Docs.astro +71 -111
  43. package/plugin/routes/DocsStatic.astro +6 -5
  44. package/plugin/routes/Overview.astro +46 -22
  45. package/plugin/routes/markdown.ts +13 -12
  46. package/plugin/{cms → sidebar-utils}/sidebar-builder.ts +83 -63
  47. package/plugin/specs/FileCache.ts +99 -0
  48. package/plugin/specs/fetchSpecSSR.ts +27 -0
  49. package/plugin/specs/generateSpec.ts +112 -0
  50. package/plugin/specs/index.ts +137 -0
  51. package/plugin/specs/inputResolver.ts +148 -0
  52. package/plugin/{cms → specs}/worker.ts +82 -5
  53. package/plugin/vendor/preview.worker.docs.js +27234 -17991
  54. package/plugin/vendor/templates/cli.md +1 -0
  55. package/plugin/vendor/templates/go.md +4 -2
  56. package/plugin/vendor/templates/java.md +5 -1
  57. package/plugin/vendor/templates/kotlin.md +5 -1
  58. package/plugin/vendor/templates/node.md +4 -2
  59. package/plugin/vendor/templates/python.md +4 -2
  60. package/plugin/vendor/templates/ruby.md +4 -2
  61. package/plugin/vendor/templates/terraform.md +1 -1
  62. package/plugin/vendor/templates/typescript.md +3 -1
  63. package/resolveSrcFile.ts +10 -0
  64. package/scripts/vendor_deps.ts +5 -5
  65. package/shared/conditionalIntegration.ts +28 -0
  66. package/shared/getProsePages.ts +41 -0
  67. package/shared/getSharedLogger.ts +15 -0
  68. package/shared/terminalUtils.ts +3 -0
  69. package/shared/virtualModule.ts +54 -1
  70. package/src/content.config.ts +9 -0
  71. package/stl-docs/components/AIDropdown.tsx +63 -0
  72. package/stl-docs/components/AiChatIsland.tsx +14 -0
  73. package/stl-docs/components/{content-panel/ContentBreadcrumbs.tsx → ContentBreadcrumbs.tsx} +2 -2
  74. package/stl-docs/components/ContentPanel.astro +9 -0
  75. package/stl-docs/components/Footer.astro +89 -0
  76. package/stl-docs/components/Head.astro +20 -0
  77. package/stl-docs/components/Header.astro +3 -10
  78. package/stl-docs/components/PageFrame.astro +34 -0
  79. package/stl-docs/components/PageSidebar.astro +11 -0
  80. package/stl-docs/components/PageTitle.astro +82 -0
  81. package/stl-docs/components/StainlessLogo.svg +4 -0
  82. package/stl-docs/components/TableOfContents.astro +34 -0
  83. package/stl-docs/components/ThemeProvider.astro +36 -0
  84. package/stl-docs/components/ThemeSelect.astro +84 -146
  85. package/stl-docs/components/TwoColumnContent.astro +2 -0
  86. package/stl-docs/components/headers/DefaultHeader.astro +4 -6
  87. package/stl-docs/components/headers/StackedHeader.astro +8 -51
  88. package/stl-docs/components/icons/chat-gpt.tsx +2 -2
  89. package/stl-docs/components/icons/cursor.tsx +10 -0
  90. package/stl-docs/components/icons/gemini.tsx +19 -0
  91. package/stl-docs/components/icons/markdown.tsx +1 -1
  92. package/stl-docs/components/index.ts +1 -0
  93. package/stl-docs/components/mintlify-compat/Frame.astro +4 -4
  94. package/stl-docs/components/mintlify-compat/card.css +4 -4
  95. package/stl-docs/components/mintlify-compat/index.ts +2 -4
  96. package/stl-docs/components/nav-tabs/NavDropdown.astro +31 -75
  97. package/stl-docs/components/nav-tabs/NavTabs.astro +79 -81
  98. package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro +15 -7
  99. package/stl-docs/components/nav-tabs/buildNavLinks.ts +3 -2
  100. package/stl-docs/components/pagination/HomeLink.astro +10 -0
  101. package/stl-docs/components/pagination/Pagination.astro +177 -0
  102. package/stl-docs/components/pagination/PaginationLinkEmphasized.astro +22 -0
  103. package/stl-docs/components/pagination/PaginationLinkQuiet.astro +13 -0
  104. package/stl-docs/components/pagination/util.ts +71 -0
  105. package/stl-docs/components/scripts.ts +1 -0
  106. package/stl-docs/components/sidebars/BaseSidebar.astro +80 -2
  107. package/stl-docs/components/sidebars/SidebarWithComponents.tsx +10 -0
  108. package/stl-docs/components/sidebars/convertAstroSidebarToStl.tsx +62 -0
  109. package/stl-docs/disableCalloutSyntax.ts +36 -0
  110. package/stl-docs/fonts.ts +186 -0
  111. package/stl-docs/index.ts +178 -54
  112. package/stl-docs/loadStlDocsConfig.ts +64 -8
  113. package/stl-docs/proseDocSync.ts +314 -0
  114. package/stl-docs/proseMarkdown/proseMarkdownIntegration.ts +53 -0
  115. package/stl-docs/proseMarkdown/proseMarkdownMiddleware.ts +41 -0
  116. package/stl-docs/proseMarkdown/toMarkdown.ts +158 -0
  117. package/stl-docs/proseSearchIndexing.ts +222 -0
  118. package/stl-docs/tabsMiddleware.ts +14 -5
  119. package/styles/code.css +53 -49
  120. package/styles/links.css +2 -37
  121. package/styles/method-descriptions.css +36 -0
  122. package/styles/overrides.css +28 -46
  123. package/styles/page.css +230 -52
  124. package/styles/sdk_select.css +9 -6
  125. package/styles/search.css +11 -21
  126. package/styles/sidebar.css +28 -211
  127. package/styles/{variables.css → sl-variables.css} +4 -8
  128. package/styles/stldocs-variables.css +6 -0
  129. package/styles/toc.css +19 -8
  130. package/theme.css +11 -9
  131. package/tsconfig.json +1 -4
  132. package/virtual-module.d.ts +65 -8
  133. package/components/variables.css +0 -112
  134. package/plugin/cms/client.ts +0 -62
  135. package/plugin/cms/server.ts +0 -268
  136. package/plugin/globalJs/ai-dropdown.ts +0 -57
  137. package/stl-docs/components/APIReferenceAIDropdown.tsx +0 -58
  138. package/stl-docs/components/content-panel/ContentPanel.astro +0 -69
  139. package/stl-docs/components/content-panel/ProseAIDropdown.tsx +0 -55
  140. package/stl-docs/components/headers/SplashMobileMenuToggle.astro +0 -49
  141. package/stl-docs/components/mintlify-compat/Step.astro +0 -56
  142. package/stl-docs/components/mintlify-compat/Steps.astro +0 -15
  143. package/styles/fonts.css +0 -68
  144. /package/{plugin/assets → assets}/fonts/geist/OFL.txt +0 -0
  145. /package/{plugin/assets → assets}/fonts/geist/geist-italic-latin-ext.woff2 +0 -0
  146. /package/{plugin/assets → assets}/fonts/geist/geist-italic-latin.woff2 +0 -0
  147. /package/{plugin/assets → assets}/fonts/geist/geist-latin-ext.woff2 +0 -0
  148. /package/{plugin/assets → assets}/fonts/geist/geist-latin.woff2 +0 -0
  149. /package/{plugin/assets → assets}/fonts/geist/geist-mono-italic-latin-ext.woff2 +0 -0
  150. /package/{plugin/assets → assets}/fonts/geist/geist-mono-italic-latin.woff2 +0 -0
  151. /package/{plugin/assets → assets}/fonts/geist/geist-mono-latin-ext.woff2 +0 -0
  152. /package/{plugin/assets → assets}/fonts/geist/geist-mono-latin.woff2 +0 -0
@@ -1,34 +1,28 @@
1
1
  ---
2
- import LanguageSelect from "virtual:starlight/components/LanguageSelect";
3
- import Search from "virtual:starlight/components/Search";
4
- import SiteTitle from "virtual:starlight/components/SiteTitle";
2
+ import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
3
+ import Search from 'virtual:starlight/components/Search';
4
+ import SiteTitle from 'virtual:starlight/components/SiteTitle';
5
5
  import HeaderLinks from './HeaderLinks.astro';
6
- import { TABS } from "virtual:stl-docs-virtual-module";
7
- import ThemeSelect from "virtual:starlight/components/ThemeSelect";
8
- import SecondaryNavTabs from "../nav-tabs/SecondaryNavTabs.astro";
9
- import SplashMobileMenuToggle from "./SplashMobileMenuToggle.astro";
6
+ import ThemeSelect from 'virtual:starlight/components/ThemeSelect';
7
+ import SecondaryNavTabs from '../nav-tabs/SecondaryNavTabs.astro';
10
8
 
11
9
  interface Props {
12
10
  shouldRenderSearch?: boolean;
13
11
  }
14
12
 
15
13
  const { shouldRenderSearch } = Astro.props;
16
- const { hasSidebar } = Astro.locals.starlightRoute;
17
14
  ---
18
15
 
19
- <div class="header my-header">
16
+ <div class="header">
20
17
  <div class="left-group">
21
18
  <div class="title-wrapper sl-flex">
22
19
  <SiteTitle />
23
20
  </div>
24
21
  </div>
25
22
 
26
- <div class="stl-top-container">
27
- {shouldRenderSearch && <Search />}
28
- {!hasSidebar && <SplashMobileMenuToggle />}
29
- </div>
23
+ {shouldRenderSearch && <Search />}
30
24
 
31
- <div class={`sl-hidden md:sl-flex print:hidden right-group`}>
25
+ <div class="right-group">
32
26
  <ThemeSelect />
33
27
  <HeaderLinks />
34
28
  <LanguageSelect />
@@ -36,40 +30,3 @@ const { hasSidebar } = Astro.locals.starlightRoute;
36
30
  </div>
37
31
 
38
32
  <SecondaryNavTabs />
39
-
40
- <style is:inline>
41
- .stl-top-container {
42
- display: flex;
43
- flex-direction: row;
44
- align-items: center;
45
- justify-content: end;
46
- gap: 0.5rem;
47
- width: 100%;
48
- }
49
- @media (min-width: 50rem) {
50
- :root {
51
- --sl-nav-height: 80px;
52
- }
53
-
54
- header.header {
55
- display: flex;
56
- flex-direction: column;
57
- gap: 0.29rem;
58
- padding-bottom: 0;
59
- }
60
-
61
- .stl-top-container {
62
- justify-content: center;
63
- }
64
- }
65
- </style>
66
-
67
- {TABS.length === 0 && (
68
- <style is:inline>
69
- @media (min-width: 50rem) {
70
- :root {
71
- --sl-nav-height: 56px;
72
- }
73
- }
74
- </style>
75
- )}
@@ -1,10 +1,10 @@
1
1
  export function ChatGPTIcon() {
2
2
  return (
3
3
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
4
- <g clip-path="url(#clip0_2771_126147)">
4
+ <g clipPath="url(#clip0_2771_126147)">
5
5
  <path
6
6
  d="M14.853 6.54857C15.216 5.45907 15.091 4.26557 14.5105 3.27457C13.6375 1.75457 11.8825 0.972574 10.1685 1.34057C9.40596 0.481574 8.31046 -0.00692579 7.16196 7.42116e-05C5.40996 -0.00392579 3.85546 1.12407 3.31646 2.79107C2.19096 3.02157 1.21946 3.72607 0.650955 4.72457C-0.228545 6.24057 -0.0280446 8.15157 1.14696 9.45157C0.783955 10.5411 0.908955 11.7346 1.48946 12.7256C2.36246 14.2456 4.11746 15.0276 5.83146 14.6596C6.59346 15.5186 7.68946 16.0071 8.83796 15.9996C10.591 16.0041 12.146 14.8751 12.685 13.2066C13.8105 12.9761 14.782 12.2716 15.3505 11.2731C16.229 9.75707 16.028 7.84757 14.8535 6.54757L14.853 6.54857ZM8.83896 14.9541C8.13746 14.9551 7.45796 14.7096 6.91946 14.2601C6.94396 14.2471 6.98646 14.2236 7.01396 14.2066L10.2 12.3666C10.363 12.2741 10.463 12.1006 10.462 11.9131V7.42157L11.8085 8.19907C11.823 8.20607 11.8325 8.22007 11.8345 8.23607V11.9556C11.8325 13.6096 10.493 14.9506 8.83896 14.9541ZM2.39696 12.2026C2.04546 11.5956 1.91896 10.8841 2.03946 10.1936C2.06296 10.2076 2.10446 10.2331 2.13396 10.2501L5.31996 12.0901C5.48146 12.1846 5.68146 12.1846 5.84346 12.0901L9.73296 9.84407V11.3991C9.73396 11.4151 9.72646 11.4306 9.71396 11.4406L6.49346 13.3001C5.05896 14.1261 3.22696 13.6351 2.39746 12.2026H2.39696ZM1.55846 5.24807C1.90846 4.64007 2.46096 4.17507 3.11896 3.93357C3.11896 3.96107 3.11746 4.00957 3.11746 4.04357V7.72407C3.11646 7.91107 3.21646 8.08457 3.37896 8.17707L7.26846 10.4226L5.92196 11.2001C5.90846 11.2091 5.89146 11.2106 5.87646 11.2041L2.65546 9.34307C1.22396 8.51407 0.732955 6.68257 1.55796 5.24857L1.55846 5.24807ZM12.6215 7.82257L8.73196 5.57657L10.0785 4.79957C10.092 4.79057 10.109 4.78907 10.124 4.79557L13.345 6.65507C14.779 7.48357 15.2705 9.31807 14.442 10.7521C14.0915 11.3591 13.5395 11.8241 12.882 12.0661V8.27557C12.8835 8.08857 12.784 7.91557 12.622 7.82257H12.6215ZM13.9615 5.80557C13.938 5.79107 13.8965 5.76607 13.867 5.74907L10.681 3.90907C10.5195 3.81457 10.3195 3.81457 10.1575 3.90907L6.26796 6.15507V4.60007C6.26696 4.58407 6.27446 4.56857 6.28696 4.55857L9.50746 2.70057C10.942 1.87307 12.776 2.36557 13.603 3.80057C13.9525 4.40657 14.079 5.11607 13.9605 5.80557H13.9615ZM5.53596 8.57707L4.18896 7.79957C4.17446 7.79257 4.16496 7.77857 4.16296 7.76257V4.04307C4.16396 2.38707 5.50746 1.04507 7.16346 1.04607C7.86396 1.04607 8.54196 1.29207 9.08046 1.74007C9.05596 1.75307 9.01396 1.77657 8.98596 1.79357L5.79996 3.63357C5.63696 3.72607 5.53696 3.89907 5.53796 4.08657L5.53596 8.57607V8.57707ZM6.26746 7.00007L7.99996 5.99957L9.73246 6.99957V9.00007L7.99996 10.0001L6.26746 9.00007V7.00007Z"
7
- fill="var(--stl-ui-foreground)"
7
+ fill="currentColor"
8
8
  />
9
9
  </g>
10
10
  <defs>
@@ -0,0 +1,10 @@
1
+ export function CursorIcon() {
2
+ return (
3
+ <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 466.73 532.09">
4
+ <path
5
+ fill="currentColor"
6
+ d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
7
+ />
8
+ </svg>
9
+ );
10
+ }
@@ -0,0 +1,19 @@
1
+ export const GeminiIcon = () => (
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192" width="16" height="16">
3
+ <defs>
4
+ <clipPath id="clippath">
5
+ <path
6
+ d="M164.93 86.68c-13.56-5.84-25.42-13.84-35.6-24.01-10.17-10.17-18.18-22.04-24.01-35.6-2.23-5.19-4.04-10.54-5.42-16.02C99.45 9.26 97.85 8 96 8s-3.45 1.26-3.9 3.05c-1.38 5.48-3.18 10.81-5.42 16.02-5.84 13.56-13.84 25.43-24.01 35.6-10.17 10.16-22.04 18.17-35.6 24.01-5.19 2.23-10.54 4.04-16.02 5.42C9.26 92.55 8 94.15 8 96s1.26 3.45 3.05 3.9c5.48 1.38 10.81 3.18 16.02 5.42 13.56 5.84 25.42 13.84 35.6 24.01 10.17 10.17 18.18 22.04 24.01 35.6 2.24 5.2 4.04 10.54 5.42 16.02A4.03 4.03 0 0 0 96 184c1.85 0 3.45-1.26 3.9-3.05 1.38-5.48 3.18-10.81 5.42-16.02 5.84-13.56 13.84-25.42 24.01-35.6 10.17-10.17 22.04-18.18 35.6-24.01 5.2-2.24 10.54-4.04 16.02-5.42A4.03 4.03 0 0 0 184 96c0-1.85-1.26-3.45-3.05-3.9-5.48-1.38-10.81-3.18-16.02-5.42"
7
+ className="st0"
8
+ />
9
+ </clipPath>
10
+ </defs>
11
+ <g style={{ clipPath: 'url(#clippath)' }}>
12
+ <image
13
+ xlinkHref="data:image/webp;base64,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"
14
+ width={192}
15
+ height={192}
16
+ />
17
+ </g>
18
+ </svg>
19
+ );
@@ -3,7 +3,7 @@ export function MarkdownIcon() {
3
3
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
4
4
  <path
5
5
  d="M14.8447 3.33301C15.151 3.33301 15.4455 3.45527 15.6621 3.67188C15.8785 3.88844 16 4.18213 16 4.48828V12.0254C15.9997 12.3315 15.8777 12.6254 15.6611 12.8418C15.4446 13.0581 15.1508 13.1797 14.8447 13.1797H1.15527C0.848967 13.1797 0.55449 13.0584 0.337891 12.8418C0.121288 12.6252 0 12.3307 0 12.0244V4.48828C1.09706e-05 4.18213 0.121501 3.88844 0.337891 3.67188C0.554493 3.45527 0.848951 3.33301 1.15527 3.33301H14.8447ZM1.15527 4.10254C1.10457 4.10245 1.0537 4.11247 1.00684 4.13184C0.960202 4.15116 0.917554 4.17917 0.881836 4.21484C0.845984 4.2507 0.817213 4.29396 0.797852 4.34082C0.778601 4.38756 0.769447 4.43773 0.769531 4.48828V12.0254C0.76962 12.0759 0.779409 12.1262 0.798828 12.1729C0.81827 12.2196 0.846978 12.2621 0.882812 12.2979C0.918602 12.3335 0.961134 12.3616 1.00781 12.3809C1.05454 12.4001 1.10474 12.4102 1.15527 12.4102H14.8447C14.9467 12.4101 15.045 12.3699 15.1172 12.2979C15.1893 12.2258 15.2293 12.1274 15.2295 12.0254V4.48828C15.2296 4.43774 15.2204 4.38755 15.2012 4.34082C15.1819 4.29403 15.1529 4.25166 15.1172 4.21582C15.0814 4.17999 15.0389 4.15126 14.9922 4.13184C14.9455 4.11249 14.8952 4.10258 14.8447 4.10254H1.15527ZM5.38477 7.56348L6.92285 5.64062H8.46094V10.8721H6.92285V7.87109L5.38477 9.79492L3.8457 7.87109V10.8711H2.30762V5.63965H3.8457L5.38477 7.56348ZM12.6924 8.33301H14.2305L11.9229 10.8711L9.61523 8.33301H11.1533V5.64062H12.6924V8.33301Z"
6
- fill="#262626"
6
+ fill="currentColor"
7
7
  />
8
8
  </svg>
9
9
  );
@@ -0,0 +1 @@
1
+ export * from '@stainless-api/ui-primitives';
@@ -15,8 +15,8 @@ const { caption } = Astro.props;
15
15
  .stl-ui-mintlify-compat-frame {
16
16
  padding: 6px;
17
17
  border-radius: 10px;
18
- background-color: var(--sl-color-gray-7);
19
- border: 1px solid var(--sl-color-gray-6);
18
+ background-color: var(--stl-color-ui-background);
19
+ border: 1px solid var(--stl-color-border);
20
20
 
21
21
  .stl-ui-mintlify-compat-frame-content {
22
22
  border-radius: 8px;
@@ -27,8 +27,8 @@ const { caption } = Astro.props;
27
27
  text-align: center;
28
28
  padding-top: 12px;
29
29
  padding-bottom: 6px;
30
- font-size: var(--sl-text-body);
31
- color: var(--sl-color-gray-3);
30
+ font-size: var(--stl-typography-scale-base);
31
+ color: var(--stl-color-foreground-reduced);
32
32
  line-height: 100%;
33
33
  }
34
34
  }
@@ -1,10 +1,10 @@
1
1
  .stl-ui-mintlify-compat-card {
2
2
  border-radius: 12px;
3
3
  padding: 16px;
4
- font-size: var(--sl-text-body);
4
+ font-size: var(--stl-typography-scale-base);
5
5
  display: flex;
6
6
  gap: 8px;
7
- border: 1px solid var(--sl-color-hairline);
7
+ border: 1px solid var(--stl-color-border);
8
8
  flex-direction: column;
9
9
 
10
10
  .stl-ui-mintlify-compat-card-icon svg {
@@ -22,13 +22,13 @@
22
22
 
23
23
  .stl-ui-mintlify-compat-card-content {
24
24
  margin-top: 0;
25
- color: var(--sl-color-text-secondary);
25
+ color: var(--stl-color-foreground-reduced);
26
26
  }
27
27
  }
28
28
 
29
29
  a.stl-ui-mintlify-compat-card {
30
30
  text-decoration: none;
31
- color: var(--sl-color-text-secondary);
31
+ color: var(--stl-color-foreground-reduced);
32
32
 
33
33
  &:hover {
34
34
  border-color: var(--sl-color-accent);
@@ -3,13 +3,11 @@ import Tab from './Tab.astro';
3
3
  import Tabs from './Tabs.astro';
4
4
  import Frame from './Frame.astro';
5
5
  import Columns from './Columns.astro';
6
- import Steps from './Steps.astro';
7
- import Step from './Step.astro';
8
6
  import Accordion from './Accordion.astro';
9
7
  import AccordionGroup from './AccordionGroup.astro';
10
8
 
11
9
  export * from './callouts';
12
10
  export * from './Card';
13
11
 
14
- export { Tab, Tabs, Frame, Columns, Steps, Step, AccordionGroup, Accordion };
15
- export { Button } from '@stainless-api/ui-primitives';
12
+ export { Tab, Tabs, Frame, Columns, AccordionGroup, Accordion };
13
+ export { Button, Steps, Step } from '@stainless-api/ui-primitives';
@@ -1,81 +1,52 @@
1
1
  ---
2
- import {
3
- Dropdown,
4
- DropdownTrigger,
5
- DropdownMenu,
6
- DropdownItem,
7
- } from '@stainless-api/docs-ui/src/components/dropdown';
8
- import { Icon } from '@astrojs/starlight/components';
2
+ import { Dropdown } from '@stainless-api/docs/components';
9
3
  import { buildNavLinks } from './buildNavLinks';
10
-
11
- export interface Props {
12
- useHamburgerIcon?: boolean;
13
- }
14
-
15
- const { useHamburgerIcon = false } = Astro.props as Props;
16
- const BUTTON_ID = 'nav-dropdown-button';
4
+ import { ChevronsUpDownIcon } from 'lucide-react';
17
5
 
18
6
  const navLinks = buildNavLinks(Astro.locals.starlightRoute);
19
7
 
20
- const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
8
+ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]!).label;
21
9
  ---
22
10
 
23
- <div class="stldocs-root nav-dropdown-root">
24
- <Dropdown id="nav-dropdown">
25
- <DropdownTrigger
26
- className={`dropdown-toggle stldocs-button-tertiary nav-dropdown-button`}
27
- type="button"
28
- id={BUTTON_ID}
29
- aria-expanded="false"
30
- withChevron={!useHamburgerIcon}
31
- isIcon
32
- >
33
- {useHamburgerIcon ? <Icon name="bars" size="16px" /> : buttonText}
34
- </DropdownTrigger>
35
- <DropdownMenu className="dropdown-menu" position="below" aria-labelledby={BUTTON_ID}>
36
- {
37
- navLinks.map((item) => (
38
- <DropdownItem key={item.link} href={item.link} className="dropdown-item">
39
- {item.label}
40
- </DropdownItem>
41
- ))
42
- }
43
- </DropdownMenu>
44
- </Dropdown>
45
- </div>
11
+ <Dropdown id="nav-dropdown" className="nav-dropdown-root">
12
+ <Dropdown.Trigger>
13
+ <Dropdown.TriggerSelectedItem>{buttonText}</Dropdown.TriggerSelectedItem>
14
+ <Dropdown.TriggerIcon>
15
+ <ChevronsUpDownIcon size={16} />
16
+ </Dropdown.TriggerIcon>
17
+ </Dropdown.Trigger>
18
+ <Dropdown.Menu className="dropdown-menu">
19
+ {
20
+ navLinks.map((item) => (
21
+ <Dropdown.MenuItem
22
+ key={item.link}
23
+ href={item.link}
24
+ className="dropdown-item"
25
+ value={item.label}
26
+ isSelected={item.label === buttonText}
27
+ >
28
+ {item.label}
29
+ <Dropdown.MenuItemTemplate>{item.label}</Dropdown.MenuItemTemplate>
30
+ </Dropdown.MenuItem>
31
+ ))
32
+ }
33
+ </Dropdown.Menu>
34
+ </Dropdown>
46
35
 
47
36
  <script>
48
- import { initDropdown } from '@stainless-api/docs-ui/src/components/scripts/dropdown';
37
+ import { initDropdown } from '@stainless-api/docs/components/scripts';
49
38
  import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
50
39
 
51
40
  document.addEventListener(getPageLoadEvent(), () => {
52
41
  initDropdown({
53
- dropdownId: 'nav-dropdown',
54
- isFixed: true,
42
+ root: document.getElementById('nav-dropdown'),
55
43
  });
56
44
  });
57
45
  </script>
58
- <style is:global>
59
- .nav-dropdown-root .dropdown-menu.stldocs-dropdown-menu {
60
- display: none;
61
- position: fixed;
62
- z-index: 1000;
63
- width: 200px;
64
- margin: 0.125rem 0 0;
65
- font-size: 1rem;
66
- text-align: left;
67
- list-style: none;
68
- background-clip: padding-box;
69
- }
70
-
71
- .nav-dropdown-root .dropdown-menu.open {
72
- display: block;
73
- }
74
- </style>
75
46
 
76
47
  <style>
77
48
  :root {
78
- --menu-font-size: calc(var(--sl-text-body) * 0.9);
49
+ --menu-font-size: calc(var(--stl-typography-scale-base) * 0.9);
79
50
  }
80
51
 
81
52
  .dropdown {
@@ -83,24 +54,9 @@ const buttonText = (navLinks.find((item) => item.active) ?? navLinks[0]).label;
83
54
  }
84
55
 
85
56
  .dropdown-item {
86
- clear: both;
87
- color: var(--sl-color-text);
57
+ color: inherit;
88
58
  text-align: inherit;
89
59
  text-decoration: none;
90
60
  white-space: nowrap;
91
61
  }
92
-
93
- .dropdown-item:focus {
94
- color: #1e2125;
95
- background-color: #e9ecef;
96
- }
97
-
98
- .nav-dropdown-root {
99
- background-color: var(--sl-color-bg-nav);
100
- }
101
-
102
- .nav-dropdown-button {
103
- color: var(--sl-color-text);
104
- font-weight: 500;
105
- }
106
62
  </style>
@@ -7,80 +7,98 @@ import clsx from 'clsx';
7
7
  const navLinks = buildNavLinks(Astro.locals.starlightRoute);
8
8
  ---
9
9
 
10
- <div id="nav-links-container">
11
- <ul class="nav-links" id="nav-links-list">
12
- <li class="mobile-menu-item" data-mobile-only>
13
- <NavDropdown />
14
- </li>
15
- {
16
- navLinks.map((item) => (
17
- <li data-desktop-only>
18
- <Button
19
- href={item.link}
20
- className={clsx('nav-link')}
21
- variant={item.active ? 'accent-muted' : 'ghost'}
22
- >
23
- <span>{item.label}</span>
24
- </Button>
25
- </li>
26
- ))
27
- }
28
- </ul>
29
- <!-- The test container is used to measure the width of the nav links and see if they fit -->
30
- <!-- TODO: probably want to clean this up bc it's duplicated code -->
31
- <ul class="nav-links" id="nav-links-test-container">
32
- {
33
- navLinks.map((item) => (
34
- <li>
35
- <Button href={item.link} className={clsx('nav-link')} variant={item.active ? 'accent' : 'ghost'}>
36
- <span>{item.label}</span>
37
- </Button>
38
- </li>
39
- ))
40
- }
41
- </ul>
10
+ <div id="nav-links-container" class="nav-links-container">
11
+ <div class="desktop-nav-links-container">
12
+ <ul class="nav-links" id="nav-links-list">
13
+ {
14
+ navLinks.map((item) => (
15
+ <li data-desktop-only>
16
+ <Button
17
+ href={item.link}
18
+ className={clsx('nav-link')}
19
+ variant={item.active ? 'accent-muted' : 'ghost'}
20
+ >
21
+ <span>{item.label}</span>
22
+ </Button>
23
+ </li>
24
+ ))
25
+ }
26
+ </ul>
27
+ </div>
28
+ <div class="mobile-nav-dropdown" data-mobile-only>
29
+ <NavDropdown />
30
+ </div>
42
31
  </div>
43
32
 
44
33
  <script>
45
34
  import { getPageLoadEvent } from '../../../plugin/helpers/getPageLoadEvent';
46
35
 
47
- function getRequiredWidth() {
48
- const navLinksTestContainer = document.getElementById('nav-links-test-container');
49
- if (!navLinksTestContainer) return 1000000; // fallback to a large number
36
+ // We need to measure the nav links to see if they fit. We create an offscreen hidden clone for measurement.
37
+ function createOffscreenClone(element: HTMLElement): HTMLElement {
38
+ const clone = element.cloneNode(true) as HTMLElement;
39
+ clone.removeAttribute('id');
40
+ clone.id = 'cloned-nav-links-measurement';
41
+ clone.style.position = 'absolute';
42
+ clone.style.visibility = 'hidden';
43
+ clone.style.top = '0';
44
+ clone.style.left = '0';
45
+ clone.style.width = 'auto';
46
+ clone.style.whiteSpace = 'nowrap';
47
+ clone.style.pointerEvents = 'none';
48
+ clone.style.zIndex = '-9999';
49
+
50
+ clone.querySelectorAll('[data-desktop-only], [data-mobile-only]').forEach((el) => {
51
+ el.removeAttribute('data-desktop-only');
52
+ });
50
53
 
51
- const rw = navLinksTestContainer.scrollWidth;
52
- navLinksTestContainer.remove();
53
- return rw;
54
+ document.body.appendChild(clone);
55
+ return clone;
54
56
  }
55
57
 
56
58
  function initNavbar() {
57
- const masterContainer = document.getElementById('nav-links-container');
58
- if (!masterContainer) return;
59
+ const navLinksContainer = document.getElementById('nav-links-container');
60
+ if (!navLinksContainer) {
61
+ console.error(`NavTabs: #nav-links-container not found`);
62
+ return;
63
+ }
59
64
 
60
- const navLinksContainer = document.getElementById('nav-links-list');
61
- if (!navLinksContainer) return;
65
+ const navLinksList = document.getElementById('nav-links-list');
66
+ if (!navLinksList) {
67
+ console.error(`NavTabs: #nav-links-list not found`);
68
+ return;
69
+ }
70
+
71
+ const measurementClone = createOffscreenClone(navLinksList);
72
+ const requiredWidth = measurementClone.clientWidth;
62
73
 
63
- const requiredWidth = getRequiredWidth();
74
+ let currentMode: 'desktop' | 'mobile' | null = null;
64
75
 
65
76
  function checkIfFits() {
66
- if (!masterContainer) return;
67
77
  if (!navLinksContainer) return;
68
- const availableWidth = masterContainer.clientWidth;
69
- const canFit = availableWidth >= requiredWidth;
78
+
79
+ // 16px buffer helps it feel less crowded before switching modes
80
+ const bufferSpace = 16;
81
+ const availableWidth = navLinksContainer.clientWidth;
82
+ const canFit = availableWidth - bufferSpace >= requiredWidth;
70
83
 
71
84
  const mode = canFit ? 'desktop' : 'mobile';
72
85
 
73
- localStorage.setItem('stl-nav-links-mode', mode);
86
+ // Only update if mode actually changed
87
+ if (mode === currentMode) return;
88
+
89
+ currentMode = mode;
74
90
 
75
- document.documentElement.classList.remove('stl-nav-links-mode-desktop');
76
- document.documentElement.classList.remove('stl-nav-links-mode-mobile');
91
+ localStorage.setItem('stl-nav-links-mode', mode);
77
92
 
78
- document.documentElement.classList.add('stl-nav-links-mode-' + mode);
93
+ document.documentElement.classList.toggle('stl-nav-links-mode-desktop', mode === 'desktop');
94
+ document.documentElement.classList.toggle('stl-nav-links-mode-mobile', mode === 'mobile');
79
95
  }
80
96
 
81
- window.addEventListener('resize', () => {
97
+ const resizeObserver = new ResizeObserver(() => {
82
98
  checkIfFits();
83
99
  });
100
+
101
+ resizeObserver.observe(navLinksContainer);
84
102
  checkIfFits();
85
103
  }
86
104
 
@@ -109,55 +127,35 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
109
127
  </style>
110
128
 
111
129
  <style>
112
- /* :root {
113
- --menu-font-size: calc(var(--sl-text-body));
114
- } */
130
+ .nav-links-container {
131
+ flex-grow: 1;
132
+ margin-left: 1rem;
133
+ margin-right: 1rem;
134
+ }
115
135
 
116
- #nav-links-container {
117
- visibility: hidden;
136
+ .desktop-nav-links-container {
118
137
  display: flex;
119
138
  flex-grow: 1;
120
139
  justify-content: flex-start;
121
140
  overflow: hidden;
122
- margin-left: 1rem;
123
- margin-right: 1rem;
124
141
  }
125
142
 
126
143
  .nav-links {
127
144
  display: flex;
128
145
  list-style: none;
129
- gap: 0;
146
+ gap: 4px;
130
147
  padding: 0;
131
148
  margin: 0;
132
149
  white-space: nowrap;
133
150
  overflow: hidden;
134
151
  }
135
152
 
136
- #nav-links-test-container {
137
- position: absolute;
138
- top: 0;
139
- left: 0;
140
- visibility: hidden;
141
- }
142
-
143
- .nav-links li {
144
- display: flex;
145
- align-items: center;
146
- justify-content: center;
147
- }
148
-
149
- .nav-link {
150
- text-decoration: none;
151
- flex: 1;
152
-
153
- &.stl-ui-button--ghost:hover {
154
- color: var(--sl-color-text-accent);
155
- background-color: transparent;
156
- }
153
+ .mobile-nav-dropdown {
154
+ flex-grow: 1;
157
155
  }
158
156
 
159
157
  @media (min-width: 50rem) {
160
- #nav-links-container {
158
+ .desktop-nav-links-container {
161
159
  display: flex;
162
160
  visibility: visible;
163
161
  }
@@ -34,13 +34,7 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
34
34
  align-items: center;
35
35
  padding: 0;
36
36
  list-style: none;
37
- overflow-x: auto;
38
37
  margin-bottom: -1px;
39
- gap: 0.29rem;
40
- }
41
-
42
- .stl-active-secondary-link:hover {
43
- background-color: transparent;
44
38
  }
45
39
 
46
40
  li {
@@ -48,7 +42,21 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
48
42
  border-bottom: 2px solid transparent;
49
43
 
50
44
  &.active {
51
- border-color: var(--sl-color-text-accent);
45
+ border-color: var(--stl-color-accent-border-strong);
46
+ }
47
+
48
+ .stl-ui-button {
49
+ /* match sidebar. TODO: hoist sidebar variables to use those instead of hardcoding? */
50
+ border-width: 0;
51
+ padding: 8px 12px;
52
+ margin-inline: -12px;
53
+ }
54
+ /* cover for button’s negative margin */
55
+ &:not(:first-child) {
56
+ margin-inline-start: 12px;
57
+ }
58
+ &:not(:last-child) {
59
+ margin-inline-end: 12px;
52
60
  }
53
61
  }
54
62
  }
@@ -1,9 +1,10 @@
1
1
  import type { StarlightRouteData } from '@astrojs/starlight/route-data';
2
2
  import { TABS } from 'virtual:stl-docs-virtual-module';
3
+ import type { StarlightRouteWithStlDocs } from '../../tabsMiddleware';
3
4
 
4
5
  export function buildNavLinks(starlightRoute: StarlightRouteData) {
5
- // TODO: specify the type of Astro.locals.starlightRoute._stlDocs
6
- const activeTabIndex = starlightRoute._stlDocs?.activeTabIndex;
6
+ const routeData: StarlightRouteWithStlDocs = starlightRoute;
7
+ const activeTabIndex = routeData?._stlDocs?.activeTabIndex;
7
8
 
8
9
  const navLinks = TABS.map((item, index) => ({
9
10
  ...item,
@@ -0,0 +1,10 @@
1
+ ---
2
+ import { base } from 'astro:config/client';
3
+ import { HomeIcon } from 'lucide-react';
4
+ import PaginationLinkQuiet from './PaginationLinkQuiet.astro';
5
+ ---
6
+
7
+ <PaginationLinkQuiet href={base}>
8
+ <HomeIcon slot="icon" />
9
+ Home
10
+ </PaginationLinkQuiet>