@stainless-api/docs 0.1.0-beta.2 → 0.1.0-beta.20

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/stl-docs/tabsMiddleware.ts

@@ -1,7 +1,7 @@
 import type { StarlightRouteData } from '@astrojs/starlight/route-data';
 import { defineRouteMiddleware } from '@astrojs/starlight/route-data';
 
-import { SPLIT_TABS_ENABLED, TABS } from 'virtual:stl-stl-starlight-virtual-module';
+import { SPLIT_TABS_ENABLED, TABS } from 'virtual:stl-docs-virtual-module';
 import clsx from 'clsx';
 
 // this fn is loaded in the plugin via addRouteMiddleware
@@ -58,7 +58,7 @@ function getTabIndexForSlug(
   match: 'exact' | 'prefix';
 } | null {
   // ↓ exact match eg. slug = "/blog" and there is a link containing "/blog"
-  let tab = linksByTab.get(slug);
+  const tab = linksByTab.get(slug)!;
   if (typeof tab === 'string') {
     return {
       match: 'exact',
@@ -88,13 +88,19 @@ function getNonSplitLinksByTab() {
   const linksByTab = new Map<string, string>();
 
   for (let i = 0; i < TABS.length; i++) {
-    const tab = TABS[i];
+    const tab = TABS[i]!;
     linksByTab.set(tab.link, String(i));
   }
 
   return linksByTab;
 }
 
+export interface StarlightRouteWithStlDocs extends StarlightRouteData {
+  _stlDocs?: {
+    activeTabIndex: number;
+  };
+}
+
 export const onRequest = defineRouteMiddleware(async (context) => {
   // if using content collection schema, use: context.locals.starlightRoute.entry.data.stainlessStarlight
   // this worked without collections but relied on hijacking starlightRoute: context.props.frontmatter.stainlessStarlight
@@ -143,7 +149,8 @@ export const onRequest = defineRouteMiddleware(async (context) => {
   }
 
   // We store the active tab index so we can use it in our nav tabs component
-  context.locals.starlightRoute._stlStarlight = {
+  const routeData: StarlightRouteWithStlDocs = context.locals.starlightRoute;
+  routeData._stlDocs = {
     activeTabIndex: activeTabIndex.index,
   };
 
@@ -179,5 +186,6 @@ export const onRequest = defineRouteMiddleware(async (context) => {
 
   matchingGroup?.entries.unshift(...mobileLinks);
 
+  (context.locals._stlStarlightPage ??= {}).fullSidebar = context.locals.starlightRoute.sidebar;
   context.locals.starlightRoute.sidebar = matchingGroup.entries;
 });

package/styles/code.css

@@ -1,72 +1,90 @@
-@layer stainless {
-  .expressive-code {
-    .frame {
-      --code-background: var(--sl-color-bg-inline-code);
-    }
+.expressive-code {
+  .frame {
+    --code-background: var(--sl-color-bg-inline-code);
+  }
 
-    figure.frame {
-      box-shadow: none;
+  figure.frame {
+    box-shadow: none;
+  }
+
+  figure,
+  pre {
+    border-radius: var(--sl-button-border-radius);
+    border-color: var(--sl-color-hairline);
+  }
+
+  .frame.has-title:not(.is-terminal),
+  .frame.is-terminal {
+    figcaption {
+      border-radius: var(--sl-button-border-radius) var(--sl-button-border-radius) 0 0;
+      border-color: var(--sl-color-hairline);
     }
 
-    figure,
     pre {
-      border-radius: var(--sl-button-border-radius);
+      border-radius: 0 0 var(--sl-button-border-radius) var(--sl-button-border-radius);
       border-color: var(--sl-color-hairline);
     }
+  }
 
-    .frame.has-title:not(.is-terminal),
-    .frame.is-terminal {
-      figcaption {
-        border-radius: var(--sl-button-border-radius) var(--sl-button-border-radius) 0 0;
-        border-color: var(--sl-color-hairline);
-      }
-
-      pre {
-        border-radius: 0 0 var(--sl-button-border-radius) var(--sl-button-border-radius);
-        border-color: var(--sl-color-hairline);
-      }
+  .frame.has-title:not(.is-terminal) {
+    figcaption span:first-child {
+      border-top-left-radius: var(--sl-button-border-radius);
     }
 
-    .frame.has-title:not(.is-terminal) {
-      figcaption span:first-child {
-        border-top-left-radius: var(--sl-button-border-radius);
-      }
-
-      .header::before {
-        border-color: var(--sl-color-hairline);
-      }
+    .header::before {
+      border-color: var(--sl-color-hairline);
+    }
 
-      .title::after {
-        bottom: -1px;
-        top: unset;
-      }
+    .title::after {
+      bottom: -1px;
+      top: unset;
     }
   }
+}
 
-  .astro-code {
-    border-radius: var(--sl-button-border-radius);
-    border-color: var(--sl-color-hairline);
-  }
+.astro-code {
+  border-radius: var(--sl-button-border-radius);
+  border-color: var(--sl-color-hairline);
+}
+
+.stl-snippet-request-container {
+  position: relative;
+}
+
+.stl-snippet-expand-button {
+  display: none;
 
-  .stl-snippet-request-container {
-    position: relative;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 12px;
+  cursor: pointer;
+  height: auto;
+}
+
+.stl-snippet-code-is-expanded {
+  .ellipsis {
+    display: none;
   }
+}
 
+.stl-snippet-collapsible {
   .stl-snippet-expand-button {
-    display: none;
+    display: block;
+    margin-bottom: -23px;
+    /* Prevent clipping of the button with the container below */
+    z-index: 100;
+  }
 
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 12px;
-    background-color: var(--stldocs-color-bg-inline-code);
-    cursor: pointer;
-    font-weight: 500;
-    line-height: 100%;
-    font-size: var(--stldocs-font-size-body-sm);
-    font-family: var(--stldocs-font);
-    padding: 4px 7px 4px 7px;
-    height: auto;
+  .stl-snippet-code-is-collapsed {
+    .hidden {
+      display: none;
+      opacity: 0;
+    }
+
+    .leading-ws {
+      display: none;
+    }
   }
 
   .stl-snippet-code-is-expanded {
@@ -74,116 +92,86 @@
       display: none;
     }
   }
+}
 
-  .stl-snippet-collapsible {
-    .stl-snippet-expand-button {
-      display: block;
-      margin-bottom: -23px;
-      /* Prevent clipping of the button with the container below */
-      z-index: 100;
+.stldocs-root {
+  .stl-snippets-non-collapsible {
+    .shiki {
+      counter-reset: codeblock-line 0 !important;
     }
 
-    .stl-snippet-code-is-collapsed {
+    .stldocs-snippet {
       .hidden {
-        display: none;
-        opacity: 0;
+        display: inline;
+        opacity: 1;
       }
 
       .leading-ws {
-        display: none;
+        display: inline;
       }
-    }
 
-    .stl-snippet-code-is-expanded {
       .ellipsis {
         display: none;
       }
     }
   }
+}
 
-  .stldocs-root {
-    .stl-snippets-non-collapsible {
-      .shiki {
-        counter-reset: codeblock-line 0 !important;
-      }
-
-      .stldocs-snippet {
-        .hidden {
-          display: inline;
-          opacity: 1;
-        }
-
-        .leading-ws {
-          display: inline;
-        }
-
-        .ellipsis {
-          display: none;
-        }
-      }
-    }
-  }
+.stldocs-root .stl-snippet-dropdown-button-text,
+.stl-snippet-dropdown-button-text {
+  font-weight: 500;
+  font-style: normal;
+  font-family: var(--stldocs-font);
+  line-height: 100%;
+  font-size: var(--sl-text-body-sm);
+  color: var(--sl-color-text);
+}
 
-  .stl-snippet-dropdown-button-text {
-    font-weight: 500;
-    font-style: normal;
-    font-family: var(--stldocs-font);
-    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'] {
+  .astro-code,
+  .astro-code span {
+    background-color: var(--sl-color-bg-inline-code) !important;
   }
 
-  :root[data-theme='light'] {
+  .stldocs-snippet-response-pane {
+    .shiki,
+    .shiki span,
     .astro-code,
     .astro-code span {
       background-color: var(--sl-color-bg-inline-code) !important;
     }
-
-    .stldocs-snippet-response-pane {
-      .shiki,
-      .shiki span,
-      .astro-code,
-      .astro-code span {
-        background-color: var(--sl-color-bg-inline-code) !important;
-      }
-    }
   }
+}
 
-  :root[data-theme='dark'] {
-    /* 
+:root[data-theme='dark'] {
+  /* 
     Need to use important to override inline variables. This is the
     recommended pattern in the shiki docs.
 
     https://shiki.style/guide/dual-themes#query-based-dark-mode
    */
+  .shiki,
+  .shiki span,
+  .astro-code,
+  .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--sl-color-bg) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  .astro-code,
+  .astro-code span {
+    background-color: var(--sl-color-bg-inline-code) !important;
+  }
+
+  .stldocs-snippet-response-pane {
     .shiki,
     .shiki span,
-    .astro-code,
-    .astro-code span {
-      color: var(--shiki-dark) !important;
-      background-color: var(--sl-color-bg) !important;
-      font-style: var(--shiki-dark-font-style) !important;
-      font-weight: var(--shiki-dark-font-weight) !important;
-      text-decoration: var(--shiki-dark-text-decoration) !important;
-    }
-
     .astro-code,
     .astro-code span {
       background-color: var(--sl-color-bg-inline-code) !important;
     }
-
-    .stldocs-snippet-response-pane {
-      .shiki,
-      .shiki span,
-      .astro-code,
-      .astro-code span {
-        background-color: var(--sl-color-bg-inline-code) !important;
-      }
-    }
   }
 }

package/styles/fonts.css

@@ -5,7 +5,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist';
@@ -13,7 +15,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-italic-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist';
@@ -21,7 +25,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
   font-family: 'Geist';
@@ -29,10 +35,11 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-italic-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 
-
 /* Geist Mono */
 @font-face {
   font-family: 'Geist Mono';
@@ -40,7 +47,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-mono-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist Mono';
@@ -48,7 +57,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-mono-italic-latin.woff2) format('woff2-variations');
-  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
   font-family: 'Geist Mono';
@@ -56,7 +67,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-mono-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 @font-face {
   font-family: 'Geist Mono';
@@ -64,5 +77,7 @@
   font-display: swap;
   font-weight: 100 900;
   src: url(../plugin/assets/fonts/geist/geist-mono-italic-latin-ext.woff2) format('woff2-variations');
-  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
+    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

package/styles/links.css

@@ -1,51 +1,12 @@
-@layer stainless {
-  .sl-link-card {
-    box-shadow: none;
-    border-radius: var(--sl-button-border-radius);
-    padding: 1.5rem;
-    margin-top: 16px;
-  }
-
-  .sl-link-card:hover {
-    transition: 0.3s;
-    border: 1px solid var(--sl-color-accent-high);
-    background-color: var(--sl-color-accent-low);
-  }
-
-  .pagination-links {
-    margin-bottom: 2rem;
-
-    > a {
-      border-radius: var(--sl-button-border-radius);
-      border: 1px solid transparent;
-      box-shadow: none;
-      max-width: 90%;
-      text-decoration: none;
-
-      svg {
-        margin-top: 0;
-        transform: translateY(6px);
-      }
-    }
-
-    > a:hover {
-      transition: 0.3s;
-      border: 1px solid var(--sl-color-accent-high);
-      background-color: var(--sl-color-accent-low);
-      box-shadow: none;
-    }
-
-    /* if only one pagination direction */
-    > a:first-child:nth-last-child(1) {
-      max-width: 45%;
-    }
-
-    > a[rel='next'] {
-      margin-left: auto;
-    }
+.sl-link-card {
+  box-shadow: none;
+  border-radius: var(--sl-button-border-radius);
+  padding: 1.5rem;
+  margin-top: 16px;
+}
 
-    > a[rel='prev'] {
-      margin-right: auto;
-    }
-  }
+.sl-link-card:hover {
+  transition: 0.3s;
+  border: 1px solid var(--sl-color-accent-high);
+  background-color: var(--sl-color-accent-low);
 }