@stainless-api/docs 0.1.0-beta.14 → 0.1.0-beta.16

package/stl-docs/proseMarkdown/toMarkdown.ts

@@ -0,0 +1,158 @@
+import { unified } from 'unified';
+import rehypeParse from 'rehype-parse';
+import rehypeRemark from 'rehype-remark';
+import remarkGfm from 'remark-gfm';
+import remarkStringify from 'remark-stringify';
+import { HTMLElement, parse } from 'node-html-parser';
+
+type PaginationLink = {
+  href: string;
+  label: string;
+};
+
+type PaginationItems = {
+  prev: PaginationLink | null;
+  next: PaginationLink | null;
+};
+
+function parsePaginationLink(footer: HTMLElement, rel: 'next' | 'prev'): PaginationLink | null {
+  const link = footer.querySelector(`.pagination-links a[rel="${rel}"]`);
+  if (!link) {
+    return null;
+  }
+
+  const title = link.querySelector('.link-title');
+  if (!title) {
+    return null;
+  }
+
+  const href = link.getAttribute('href');
+  if (!href) {
+    return null;
+  }
+
+  return {
+    href,
+    label: title.text,
+  };
+}
+
+function isRelativeLink(href: string) {
+  return href.startsWith('/');
+}
+
+function hasExtension(href: string) {
+  return href.includes('.');
+}
+
+function removeTrailingSlash(href: string) {
+  return href.replace(/\/$/, '');
+}
+
+function makeMarkdownLinks(el: HTMLElement) {
+  el.querySelectorAll('a').forEach((a) => {
+    const href = a.getAttribute('href');
+    if (!href) {
+      return a;
+    }
+
+    if (isRelativeLink(href) && !hasExtension(href)) {
+      if (href === '/') {
+        a.setAttribute('href', '/index.md');
+      } else {
+        a.setAttribute('href', `${removeTrailingSlash(href)}/index.md`);
+      }
+    }
+    return a;
+  });
+}
+
+function removeHiddenElements(el: HTMLElement) {
+  const hiddenSelectors = ['.sl-anchor-link'];
+  for (const selector of hiddenSelectors) {
+    const hiddenElements = el.querySelectorAll(selector);
+    for (const hiddenElement of hiddenElements) {
+      hiddenElement.remove();
+    }
+  }
+}
+
+export async function toMarkdown(html: string) {
+  const root = parse(html);
+
+  const mainEl = root.querySelector('main');
+
+  if (!mainEl) {
+    return null;
+  }
+
+  makeMarkdownLinks(mainEl);
+
+  const footer = mainEl.querySelector('footer');
+
+  const markdownContentEl = mainEl.querySelector('.sl-markdown-content');
+  if (!markdownContentEl) {
+    return null;
+  }
+
+  removeHiddenElements(markdownContentEl);
+
+  const articleContent = markdownContentEl.innerHTML;
+
+  const paginationLinks: PaginationItems = {
+    prev: null,
+    next: null,
+  };
+
+  if (footer) {
+    paginationLinks.prev = parsePaginationLink(footer, 'prev');
+    paginationLinks.next = parsePaginationLink(footer, 'next');
+  }
+
+  let md = (
+    await unified()
+      .use(rehypeParse, { fragment: true }) // parse HTML
+      .use(rehypeRemark) // rehype (HTML) -> remark (MD AST)
+      .use(remarkGfm) // tables, strikethrough, autolinks, etc.
+      .use(remarkStringify, {
+        fences: true,
+        bullet: '-',
+        listItemIndent: 'one',
+        rule: '-',
+      })
+      .process(articleContent)
+  ).toString();
+
+  const title = root.querySelector('title')?.textContent;
+  const description = root.querySelector('meta[name="description"]')?.attributes.content;
+  const lastUpdated = root.querySelector('.meta time')?.attributes.datetime;
+
+  // let htmlUrl = url.toString().replace('.md', '');
+  // if (htmlUrl.endsWith('/index')) {
+  //   htmlUrl = htmlUrl.replace('/index', '');
+  // }
+
+  md = [
+    '---',
+    `title: ${title}`,
+    description ? `description: ${description}` : [],
+    lastUpdated ? `lastUpdated: ${lastUpdated}` : [],
+    // `source_url:`,
+    // `  html: ${htmlUrl}`,
+    // `  md: ${url.toString()}`,
+    '---\n',
+    md,
+  ]
+    .flat()
+    .join('\n');
+
+  if (paginationLinks.prev) {
+    md += `\n\n[Previous](${paginationLinks.prev.href})`;
+  }
+
+  if (paginationLinks.next) {
+    md += `\n\n[Next](${paginationLinks.next.href})`;
+  }
+
+  return md;
+}

package/styles/code.css

@@ -125,11 +125,6 @@
   line-height: 100%;
   font-size: var(--sl-text-body-sm);
   color: var(--sl-color-text);
-  text-transform: capitalize;
-
-  &.http {
-    text-transform: uppercase;
-  }
 }
 
 :root[data-theme='light'] {

package/styles/page.css

@@ -9,7 +9,6 @@
   }
 }
 
-
 .page {
   position: relative;
   max-width: var(--sl-page-max-width);
@@ -27,6 +26,10 @@
   }
 }
 
+:root {
+  --sl-mobile-toc-height: 4rem;
+}
+
 @media (min-width: 50rem) {
   /* on desktop, adjust sidebar so that its _text content_ aligns with the page left edge.
    * padding (visible on hover) bleeds out beyond the page left edge, covered by --stl-ui-page-padding-inline */
@@ -56,11 +59,35 @@
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1rem 0 0 1rem;
+  padding: 1rem 0 0 0;
+  flex-wrap: wrap;
+}
+
+.stl-page-nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0 0 0;
   flex-wrap: wrap;
 }
-@media (min-width: 50em) {
+
+.stldocs-root .stl-page-nav-container {
+  padding: 1rem 0 0 var(--stldocs-content-padding);
+}
+
+@media (min-width: 50rem) {
   :root[data-has-sidebar] {
-    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 1rem);
+    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 2rem);
+  }
+
+  .stldocs-root .stl-page-nav-container {
+    padding: 1rem 0 0 0;
+  }
+}
+
+@media (min-width: 72rem) {
+  :root {
+    --sl-mobile-toc-height: 0rem;
   }
 }

package/virtual-module.d.ts

@@ -18,7 +18,6 @@ declare module 'virtual:stl-starlight-virtual-module' {
   export const PROPERTY_SETTINGS: PropertySettingsType;
   export const MIDDLEWARE: StlStarlightMiddleware;
   export const SEARCH: StainlessStarlightUserConfig['search'];
-  export const INCLUDE_AI_DROPDOWN_OPTIONS: boolean;
 }
 
 declare module 'virtual:stl-docs-virtual-module' {
@@ -41,5 +40,7 @@ declare module 'virtual:stl-docs-virtual-module' {
   export const SPLIT_TABS_ENABLED: boolean;
   export const HEADER_LAYOUT: 'default' | 'stacked';
   export const ENABLE_CLIENT_ROUTER: boolean;
-  export const INCLUDE_AI_DROPDOWN_OPTIONS: 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');
-  }
-}

package/stl-docs/components/APIReferenceAIDropdown.tsx

@@ -1,58 +0,0 @@
-import { DropdownButton } from '@stainless-api/ui-primitives';
-import { CopyIcon } from 'lucide-react';
-import { ChatGPTIcon } from './icons/chat-gpt';
-import { ClaudeIcon } from './icons/claude';
-import { MarkdownIcon } from './icons/markdown';
-
-export function AIDropdownOptions() {
-  return (
-    <>
-      <DropdownButton.MenuItem value="claude" isExternalLink>
-        <DropdownButton.MenuItemIcon>
-          <ClaudeIcon />
-        </DropdownButton.MenuItemIcon>
-        <DropdownButton.MenuItemText subtle>
-          Open in
-          <strong> Claude</strong>
-        </DropdownButton.MenuItemText>
-      </DropdownButton.MenuItem>
-      <DropdownButton.MenuItem value="chat-gpt" isExternalLink>
-        <DropdownButton.MenuItemIcon>
-          <ChatGPTIcon />
-        </DropdownButton.MenuItemIcon>
-        <DropdownButton.MenuItemText subtle>
-          Open in
-          <strong> ChatGPT</strong>
-        </DropdownButton.MenuItemText>
-      </DropdownButton.MenuItem>
-    </>
-  );
-}
-
-export function APIReferenceAIDropdown() {
-  return (
-    <DropdownButton id="ai-dropdown-button">
-      <DropdownButton.PrimaryAction>
-        <CopyIcon size={16} />
-        <DropdownButton.PrimaryActionText>Copy Markdown</DropdownButton.PrimaryActionText>
-      </DropdownButton.PrimaryAction>
-      <DropdownButton.Trigger />
-      <DropdownButton.Menu>
-        <AIDropdownOptions />
-        <hr />
-        <DropdownButton.MenuItem value="copy-as-markdown" isExternalLink>
-          <DropdownButton.MenuItemIcon>
-            <CopyIcon size={16} />
-          </DropdownButton.MenuItemIcon>
-          <DropdownButton.MenuItemText>Copy Markdown</DropdownButton.MenuItemText>
-        </DropdownButton.MenuItem>
-        <DropdownButton.MenuItem value="view-as-markdown" isExternalLink>
-          <DropdownButton.MenuItemIcon>
-            <MarkdownIcon />
-          </DropdownButton.MenuItemIcon>
-          <DropdownButton.MenuItemText>View as Markdown</DropdownButton.MenuItemText>
-        </DropdownButton.MenuItem>
-      </DropdownButton.Menu>
-    </DropdownButton>
-  );
-}

package/stl-docs/components/content-panel/ProseAIDropdown.tsx

@@ -1,55 +0,0 @@
-import { DropdownButton } from '@stainless-api/ui-primitives';
-import { AIDropdownOptions } from '../APIReferenceAIDropdown';
-import type { StarlightRouteData } from '@astrojs/starlight/route-data';
-import { ClaudeIcon } from '../icons/claude';
-
-const sidebarHasEntry = (sidebarEntry: StarlightRouteData['sidebar'], currentPath?: string) => {
-  if (!currentPath) return false;
-  const normalizePath = (path: string) => {
-    return path.endsWith('/') ? path : path + '/';
-  };
-
-  const normalizedCurrent = normalizePath(currentPath);
-
-  for (const entry of sidebarEntry) {
-    if (entry.type === 'link') {
-      const normalizedHref = normalizePath(entry.href);
-      if (normalizedHref === normalizedCurrent) {
-        return true;
-      }
-    } else if (entry.type === 'group') {
-      const hasInGroup = sidebarHasEntry(entry.entries, currentPath);
-      if (hasInGroup) return true;
-    }
-  }
-
-  return false;
-};
-
-export function ProseAIDropdown({
-  currentPath,
-  sidebarEntry,
-}: {
-  currentPath: string;
-  sidebarEntry: StarlightRouteData['sidebar'];
-}) {
-  // Hide if there is no associated sidebar entry. This applies to pages like the 404 page.
-  const hasEntry = sidebarHasEntry(sidebarEntry, currentPath);
-
-  if (!hasEntry) {
-    return null;
-  }
-
-  return (
-    <DropdownButton id="prose-ai-dropdown-button">
-      <DropdownButton.PrimaryAction>
-        <ClaudeIcon />
-        Open in Claude
-      </DropdownButton.PrimaryAction>
-      <DropdownButton.Trigger />
-      <DropdownButton.Menu>
-        <AIDropdownOptions />
-      </DropdownButton.Menu>
-    </DropdownButton>
-  );
-}