@stainless-api/docs 0.1.0-beta.75 → 0.1.0-beta.76

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.76
+
+### Patch Changes
+
+- 5a6d886: fix searchbar styles
+- d79718a: should use base url when resolving pagefind
+
 ## 0.1.0-beta.75
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.75",
+  "version": "0.1.0-beta.76",
   "publishConfig": {
     "access": "public"
   },
@@ -40,7 +40,7 @@
     "@astrojs/markdown-remark": "^6.3.10",
     "@astrojs/react": "^4.4.2",
     "@stainless-api/sdk": "0.1.0-alpha.19",
-    "astro-expressive-code": "^0.41.3",
+    "astro-expressive-code": "^0.41.5",
     "cheerio": "^1.1.2",
     "clsx": "^2.1.1",
     "dotenv": "17.2.3",
@@ -65,7 +65,7 @@
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
     "@markdoc/markdoc": "^0.5.4",
-    "@types/node": "24.10.4",
+    "@types/node": "24.10.8",
     "@types/react": "19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.3",

package/plugin/components/SnippetCode.tsx

@@ -184,31 +184,6 @@ export function SnippetContainer({ children, signature }: SnippetContainerProps)
   );
 }
 
-export function CondensibleSnippetCode({
-  content,
-  language,
-  signature,
-  highlighted,
-}: SnippetCodeProps & { signature: string; highlighted: string; language: string }) {
-  const ranges = getCollapsedRanges(content, language, signature);
-  const html = condensedShikiHtmlFull(highlighted, language, ranges);
-  const offset = getCounterOffset(ranges);
-
-  return (
-    <div
-      className={clsx(style.SnippetCode, 'stl-snippet-code-is-collapsed')}
-      data-snippet-expanded-offset={offset}
-    >
-      <pre className={style.SnippetCodeContent} data-stldocs-copy-content>
-        <code
-          className={language === 'json' ? 'snippet-json' : 'snippet'}
-          dangerouslySetInnerHTML={{ __html: html }}
-        />
-      </pre>
-    </div>
-  );
-}
-
 export function SnippetButtons({ content }: { content: string }) {
   void content;
   const language = useLanguage();
@@ -226,6 +201,7 @@ export function SnippetButtons({ content }: { content: string }) {
     </>
   );
 }
+
 export function SnippetCode({ content, signature, language: forcedLanguage }: SnippetCodeProps) {
   const lang = useLanguage();
   const language = forcedLanguage || lang;
@@ -245,13 +221,8 @@ export function SnippetCode({ content, signature, language: forcedLanguage }: Sn
     <div
       className={clsx(style.SnippetCode, isCollapsible && 'stl-snippet-code-is-collapsed')}
       data-snippet-expanded-offset={offset}
-    >
-      <pre className={style.SnippetCodeContent} data-stldocs-copy-content>
-        <code
-          className={(language as string) === 'json' ? 'snippet-json' : 'snippet'}
-          dangerouslySetInnerHTML={{ __html: highlighted }}
-        />
-      </pre>
-    </div>
+      data-stldocs-copy-content
+      dangerouslySetInnerHTML={{ __html: highlighted }}
+    />
   );
 }

package/plugin/components/search/SearchIsland.tsx

@@ -15,6 +15,7 @@ import {
 import { ComponentProvider } from '@stainless-api/docs-ui/contexts/component';
 import { SearchProvider } from '@stainless-api/docs-search/context';
 import type { SearchSettings } from '@stainless-api/docs-search/types';
+import path from 'path';
 
 let $$highlighter: HighlighterGeneric<BundledLanguage, BundledTheme> | null = null;
 async function getHighlighter() {
@@ -89,10 +90,14 @@ export function DocsSearch({ settings, currentPath }: { settings: SearchSettings
   const markdownRenderer = React.use(createMarkdownRenderer());
   const { stainlessPath, language } = parseRoute(BASE_PATH, currentPath);
   // eslint-disable-next-line turbo/no-undeclared-env-vars
-  const pageFind = import.meta.env.DEV ? undefined : '/pagefind/pagefind.js';
+  const pageFind = import.meta.env.DEV
+    ? undefined
+    : path.posix.join(import.meta.env.BASE_URL, '/pagefind/pagefind.js');
 
-  function handleSelect(path: string) {
-    const url = path.startsWith('/') ? path : generateRoute(BASE_PATH, language, path);
+  function handleSelect(selectedPath: string) {
+    const url = selectedPath.startsWith('/')
+      ? selectedPath
+      : generateRoute(BASE_PATH, language, selectedPath);
     if (url) window.location.href = url;
   }
 

package/plugin/routes/Docs.astro

@@ -73,21 +73,10 @@ if (readme) {
           transformRequestSnippet={MIDDLEWARE.transformRequestSnippet}
         />
 
+        {/* TODO: we should not set inline styles here? */}
         <style
           is:inline
           set:text={`
-          #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;
@@ -110,21 +99,6 @@ if (readme) {
               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;
             }

package/styles/code.css

@@ -52,14 +52,16 @@
 }
 
 .stl-snippet-expand-button {
-  display: none;
-
-  position: relative;
+  position: absolute;
   left: 50%;
-  transform: translateX(-50%);
-  bottom: 12px;
+  transform: translateX(-50%) translateY(-50%);
   cursor: pointer;
   height: auto;
+  z-index: 100;
+
+  &:not(.stl-snippet-collapsible .stl-snippet-expand-button) {
+    display: none;
+  }
 
   &.stl-ui-button {
     background-color: var(--stl-color-background);
@@ -87,13 +89,6 @@
 }
 
 .stl-snippet-collapsible {
-  .stl-snippet-expand-button {
-    display: block;
-    margin-bottom: -23px;
-    /* Prevent clipping of the button with the container below */
-    z-index: 100;
-  }
-
   .stl-snippet-code-is-collapsed {
     .hidden {
       display: none;

package/styles/search.css

@@ -60,6 +60,7 @@ site-search {
       width: 100%;
       max-width: 30rem;
       justify-content: start;
+      padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
 
       > :last-child {
         margin-inline-start: auto;