mintlify 1.1.3 → 1.1.4

package/bin/mint/client/rehype/withLayouts.js

@@ -0,0 +1,113 @@
+import { getEsmNode } from '../remark/utils.js';
+
+const withLayouts = () => {
+  return (tree) => {
+    const importNode = getEsmNode(
+      `import { ContentsLayout as _Default } from '@/layouts/ContentsLayout'`
+    );
+    tree.children.unshift(importNode);
+    tree.children.push({
+      type: 'mdxjsEsm',
+      value: `export default (props) => <_Default {...props} tableOfContents={tableOfContents} apiComponents={apiComponents}>{props.children}</_Default>`,
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          body: [
+            {
+              type: 'ExportDefaultDeclaration',
+              declaration: {
+                type: 'ArrowFunctionExpression',
+                async: false,
+                expression: true,
+                generator: false,
+                id: null,
+                body: {
+                  type: 'JSXElement',
+                  children: [
+                    {
+                      type: 'JSXExpressionContainer',
+                      expression: {
+                        type: 'MemberExpression',
+                        computed: false,
+                        optional: false,
+                        object: {
+                          name: 'props',
+                          type: 'Identifier',
+                        },
+                        property: {
+                          name: 'children',
+                          type: 'Identifier',
+                        },
+                      },
+                    },
+                  ],
+                  closingElement: {
+                    type: 'JSXClosingElement',
+                    name: {
+                      type: 'JSXIdentifier',
+                      name: '_Default',
+                    },
+                  },
+                  openingElement: {
+                    type: 'JSXOpeningElement',
+                    selfClosing: false,
+                    name: {
+                      type: 'JSXIdentifier',
+                      name: '_Default',
+                    },
+                    attributes: [
+                      {
+                        type: 'JSXSpreadAttribute',
+                        argument: {
+                          type: 'Identifier',
+                          name: 'props',
+                        },
+                      },
+                      {
+                        type: 'JSXAttribute',
+                        name: {
+                          type: 'JSXIdentifier',
+                          name: 'tableOfContents',
+                        },
+                        value: {
+                          type: 'JSXExpressionContainer',
+                          expression: {
+                            type: 'Identifier',
+                            name: 'tableOfContents',
+                          },
+                        },
+                      },
+                      {
+                        type: 'JSXAttribute',
+                        name: {
+                          type: 'JSXIdentifier',
+                          name: 'apiComponents',
+                        },
+                        value: {
+                          type: 'JSXExpressionContainer',
+                          expression: {
+                            type: 'Identifier',
+                            name: 'apiComponents',
+                          },
+                        },
+                      },
+                    ],
+                  },
+                },
+                params: [
+                  {
+                    type: 'Identifier',
+                    name: 'props',
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    });
+  };
+};
+
+export default withLayouts;

package/bin/mint/client/rehype/withLinkRoles.js

@@ -0,0 +1,13 @@
+import visit from 'unist-util-visit';
+
+const withLinkRoles = () => {
+  return (tree) => {
+    visit(tree, 'element', (element) => {
+      if (['ol', 'ul'].includes(element.tagName)) {
+        element.properties.role = 'list';
+      }
+    });
+  };
+};
+
+export default withLinkRoles;

package/bin/mint/client/rehype/withRawComponents.js

@@ -0,0 +1,13 @@
+import { fromHtml } from 'hast-util-from-html';
+import visit from 'unist-util-visit';
+
+const withRawComponents = () => {
+  return (tree) => {
+    visit(tree, 'raw', (raw, i, parent) => {
+      const rawAst = fromHtml(raw.value, { fragment: true });
+      parent.children[i] = rawAst;
+    });
+  };
+};
+
+export default withRawComponents;

package/bin/mint/client/rehype/withStaticProps.js

@@ -0,0 +1,25 @@
+import { parse } from 'acorn';
+
+const withStaticProps = (map) => {
+  return function transformer(tree) {
+    tree.children.push({
+      type: 'mdxjsEsm',
+      data: {
+        estree: parse(
+          `
+          export const getStaticProps = async () => {
+            return {
+              props: ${map},
+            }
+          }`,
+          {
+            sourceType: 'module',
+            ecmaVersion: 2020,
+          }
+        ),
+      },
+    });
+  };
+};
+
+export default withStaticProps;

package/bin/mint/client/rehype/withSyntaxHighlighting.js

@@ -0,0 +1,60 @@
+import { toString } from 'hast-util-to-string';
+import { refractor } from 'refractor';
+import docker from 'refractor/lang/docker.js';
+import jsx from 'refractor/lang/jsx.js';
+import protobuf from 'refractor/lang/protobuf.js';
+import visit from 'unist-util-visit';
+
+refractor.register(jsx);
+refractor.register(docker);
+refractor.register(protobuf);
+
+const withSyntaxHighlighting = (options) => {
+  options = options || {};
+
+  if (options.alias) {
+    refractor.alias(options.alias);
+  }
+
+  return (tree) => {
+    visit(tree, 'element', visitor);
+  };
+
+  function visitor(node, _, parent) {
+    if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
+      return;
+    }
+
+    const lang = getLanguage(node);
+
+    if (lang === null) {
+      return;
+    }
+
+    let result;
+    try {
+      parent.properties.className = (parent.properties.className || []).concat('language-' + lang);
+      result = refractor.highlight(toString(node), lang);
+      node.children = result.children;
+    } catch (err) {
+      if (options.ignoreMissing && /Unknown language/.test(err.message)) {
+        return;
+      }
+      throw err;
+    }
+  }
+};
+
+function getLanguage(node) {
+  const className = node.properties.className || [];
+
+  for (const classListItem of className) {
+    if (classListItem.slice(0, 9) === 'language-') {
+      return classListItem.slice(9).toLowerCase();
+    }
+  }
+
+  return null;
+}
+
+export default withSyntaxHighlighting;

package/bin/mint/client/remark/utils.js

@@ -0,0 +1,369 @@
+import * as acorn from 'acorn';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { mdxJsxFromMarkdown } from 'mdast-util-mdx-jsx';
+import { mdxjsEsmFromMarkdown } from 'mdast-util-mdxjs-esm';
+import { mdxJsx } from 'micromark-extension-mdx-jsx';
+import { mdxjsEsm } from 'micromark-extension-mdxjs-esm';
+import Prism from 'prismjs';
+import loadLanguages from 'prismjs/components/index.js';
+import redent from 'redent';
+
+loadLanguages();
+
+const HTML_TAG =
+  /<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi;
+const PSEUDO_CLASSES = [
+  'active',
+  'any-link',
+  'blank',
+  'checked',
+  'current',
+  'default',
+  'defined',
+  'dir',
+  'disabled',
+  'drop',
+  'empty',
+  'enabled',
+  'first',
+  'first-child',
+  'first-of-type',
+  'fullscreen',
+  'future',
+  'focus',
+  'focus-visible',
+  'focus-within',
+  'has',
+  'host',
+  'host',
+  'host-context',
+  'hover',
+  'indeterminate',
+  'in-range',
+  'invalid',
+  'is',
+  'lang',
+  'last-child',
+  'last-of-type',
+  'left',
+  'link',
+  'local-link',
+  'not',
+  'nth-child',
+  'nth-col',
+  'nth-last-child',
+  'nth-last-col',
+  'nth-last-of-type',
+  'nth-of-type',
+  'only-child',
+  'only-of-type',
+  'optional',
+  'out-of-range',
+  'past',
+  'picture-in-picture',
+  'placeholder-shown',
+  'read-only',
+  'read-write',
+  'required',
+  'right',
+  'root',
+  'scope',
+  'state',
+  'target',
+  'target-within',
+  'user-invalid',
+  'valid',
+  'visited',
+  'where',
+];
+
+Prism.hooks.add('wrap', (env) => {
+  if (env.type === 'atrule') {
+    const content = env.content.replace(HTML_TAG, '');
+    if (content.startsWith('@apply')) {
+      env.classes.push('atapply');
+    }
+  } else if (env.type === 'pseudo-class') {
+    if (!new RegExp(`^::?(${PSEUDO_CLASSES.join('|')})`).test(env.content)) {
+      env.classes = env.classes.filter((x) => x !== 'pseudo-class');
+    }
+  }
+});
+
+Prism.hooks.add('after-tokenize', ({ language, tokens }) => {
+  if (language === 'css') {
+    fixSelectorEscapeTokens(tokens);
+  }
+});
+
+export function fixSelectorEscapeTokens(tokens) {
+  for (let token of tokens) {
+    if (typeof token === 'string') continue;
+    if (token.type !== 'selector') continue;
+    for (let i = 0; i < token.content.length; i++) {
+      if (token.content[i] === '\\' && token.content[i - 1]?.type === 'class') {
+        token.content[i] = new Prism.Token('punctuation', token.content[i]);
+        token.content[i + 1].type = 'class';
+      }
+    }
+  }
+}
+
+export const createMdxJsxAttribute = (key, value) => {
+  return {
+    type: 'mdxJsxAttribute',
+    name: key,
+    value,
+  };
+};
+
+export const tomdxJsxFlowElement = (input) => {
+  const tree = fromMarkdown(input, {
+    extensions: [mdxJsx({ acorn: acorn, addResult: true })],
+    mdastExtensions: [mdxJsxFromMarkdown()],
+  });
+  return tree.children[0];
+};
+
+export const getEsmNode = (input) => {
+  const tree = fromMarkdown(input, {
+    extensions: [mdxjsEsm({ acorn, addResult: true })],
+    mdastExtensions: [mdxjsEsmFromMarkdown],
+  });
+  return tree.children[0];
+};
+
+export function addImportString(tree, jsx) {
+  tree.children.unshift(getEsmNode(jsx));
+}
+
+export function addImport(tree, mod, name) {
+  const jsx = `import { ${name} as _${name} } from '${mod}'`;
+  tree.children.unshift(getEsmNode(jsx));
+  return `_${name}`;
+}
+
+export function addDefaultImport(tree, mod, name) {
+  const jsx = `import _${name} from '${mod}'`;
+  tree.children.unshift(getEsmNode(jsx));
+  return `_${name}`;
+}
+
+export function addExport(tree, name, value) {
+  const jsx = `export const ${name} = ${JSON.stringify(value)}`;
+  tree.children.push(getEsmNode(jsx));
+}
+
+function hasLineHighlights(code) {
+  return code.split('\n').some((line) => line === '' || /^[> ] /.test(line));
+}
+
+export function highlightCode(code, prismLanguage) {
+  const isDiff = prismLanguage.startsWith('diff-');
+  const language = isDiff ? prismLanguage.substr(5) : prismLanguage;
+  const grammar = Prism.languages[language];
+  if (!grammar) {
+    console.warn(`Unrecognised language: ${prismLanguage}`);
+    return Prism.util.encode(code);
+  }
+
+  let addedLines = [];
+  let removedLines = [];
+  if (isDiff) {
+    code = code.replace(/(?:^[+\- ] |^[+-]$)/gm, (match, offset) => {
+      let line = code.substr(0, offset).split('\n').length - 1;
+      if (match.startsWith('+')) {
+        addedLines.push(line);
+      } else if (match.startsWith('-')) {
+        removedLines.push(line);
+      }
+      return '';
+    });
+  }
+
+  let highlightedLines = [];
+
+  if (hasLineHighlights(code)) {
+    let match;
+    let re = /^>/m;
+    while ((match = re.exec(code)) !== null) {
+      let line = code.substr(0, match.index).split('\n').length - 1;
+      highlightedLines.push(line);
+      code = code.substr(0, match.index) + ' ' + code.substr(match.index + 1);
+    }
+    code = redent(code);
+  }
+
+  function stringify(line, className) {
+    let empty = line.every((token) => token.empty);
+
+    if (!className && empty) {
+      return '\n';
+    }
+
+    let commonTypes = [];
+    for (let i = 0; i < line.length; i++) {
+      let token = line[i];
+      if (i === 0) {
+        commonTypes.push(...token.types);
+      } else {
+        commonTypes = commonTypes.filter((type) => token.types.includes(type));
+      }
+    }
+    if (commonTypes.length) {
+      for (let i = 0; i < line.length; i++) {
+        let token = line[i];
+        token.types = token.types.filter((type) => !commonTypes.includes(type));
+      }
+    }
+
+    let lineClassName = ['token', ...commonTypes, className].filter(Boolean).join(' ');
+
+    if (empty) {
+      return `<span class="${lineClassName}">\n</span>`;
+    }
+
+    return `<span class="${lineClassName}">${line
+      .map((token) =>
+        token.types.length
+          ? `<span class="token ${token.types.join(' ')}">${token.content}</span>`
+          : token.content
+      )
+      .join('')}\n</span>`;
+  }
+
+  if (highlightedLines.length && language !== 'demo') {
+    let lines = normalizeTokens(Prism.util.encode(Prism.tokenize(code, grammar)));
+
+    code = lines
+      .map((line, index) =>
+        stringify(
+          line,
+          `block${
+            highlightedLines.includes(index)
+              ? ' -mx-5 pr-5 border-l-4 border-primary-light bg-primary-light/[0.15]'
+              : ''
+          }`
+        )
+      )
+      .join('');
+  } else {
+    code = Prism.highlight(code, grammar, prismLanguage);
+  }
+
+  return language === 'html'
+    ? code.replace(
+        /\*\*(.*?)\*\*/g,
+        (_, text) => `<span class="code-highlight bg-code-highlight">${text}</span>`
+      )
+    : code;
+}
+
+// https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/utils/normalizeTokens.js
+
+const newlineRe = /\r\n|\r|\n/;
+
+// Empty lines need to contain a single empty token, denoted with { empty: true }
+function normalizeEmptyLines(line) {
+  if (line.length === 0) {
+    line.push({
+      types: ['plain'],
+      content: '',
+      empty: true,
+    });
+  } else if (line.length === 1 && line[0].content === '') {
+    line[0].empty = true;
+  }
+}
+
+function appendTypes(types, add) {
+  const typesSize = types.length;
+  if (typesSize > 0 && types[typesSize - 1] === add) {
+    return types;
+  }
+
+  return types.concat(add);
+}
+
+// Takes an array of Prism's tokens and groups them by line, turning plain
+// strings into tokens as well. Tokens can become recursive in some cases,
+// which means that their types are concatenated. Plain-string tokens however
+// are always of type "plain".
+// This is not recursive to avoid exceeding the call-stack limit, since it's unclear
+// how nested Prism's tokens can become
+export function normalizeTokens(tokens) {
+  const typeArrStack = [[]];
+  const tokenArrStack = [tokens];
+  const tokenArrIndexStack = [0];
+  const tokenArrSizeStack = [tokens.length];
+
+  let i = 0;
+  let stackIndex = 0;
+  let currentLine = [];
+
+  const acc = [currentLine];
+
+  while (stackIndex > -1) {
+    while ((i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]) {
+      let content;
+      let types = typeArrStack[stackIndex];
+
+      const tokenArr = tokenArrStack[stackIndex];
+      const token = tokenArr[i];
+
+      // Determine content and append type to types if necessary
+      if (typeof token === 'string') {
+        types = stackIndex > 0 ? types : ['plain'];
+        content = token;
+      } else {
+        types = appendTypes(types, token.type);
+        if (token.alias) {
+          types = appendTypes(types, token.alias);
+        }
+
+        content = token.content;
+      }
+
+      // If token.content is an array, increase the stack depth and repeat this while-loop
+      if (typeof content !== 'string') {
+        stackIndex++;
+        typeArrStack.push(types);
+        tokenArrStack.push(content);
+        tokenArrIndexStack.push(0);
+        tokenArrSizeStack.push(content.length);
+        continue;
+      }
+
+      // Split by newlines
+      const splitByNewlines = content.split(newlineRe);
+      const newlineCount = splitByNewlines.length;
+
+      currentLine.push({ types, content: splitByNewlines[0] });
+
+      // Create a new line for each string on a new line
+      for (let i = 1; i < newlineCount; i++) {
+        normalizeEmptyLines(currentLine);
+        acc.push((currentLine = []));
+        currentLine.push({ types, content: splitByNewlines[i] });
+      }
+    }
+
+    // Decreate the stack depth
+    stackIndex--;
+    typeArrStack.pop();
+    tokenArrStack.pop();
+    tokenArrIndexStack.pop();
+    tokenArrSizeStack.pop();
+  }
+
+  normalizeEmptyLines(currentLine);
+  return acc;
+}
+
+export function simplifyToken(token) {
+  if (typeof token === 'string') return token;
+  return [
+    token.type,
+    Array.isArray(token.content) ? token.content.map(simplifyToken) : token.content,
+  ];
+}

package/bin/mint/client/remark/withFrames.js

@@ -0,0 +1,55 @@
+import { addImport, tomdxJsxFlowElement } from './utils.js';
+
+const withFrames = () => {
+  return (tree) => {
+    let preTree = { children: [] };
+    let componentName;
+
+    tree.children = tree.children.map((node, index) => {
+      // Start of horizontal block: -- block
+      if (
+        node.type === 'paragraph' &&
+        node.children.length === 1 &&
+        node.children[0].value === '-- block'
+      ) {
+        node.type = 'jsx';
+        node.value = `<div className='grid md:grid-cols-2 md:gap-8'><div>`;
+      }
+
+      // Start a new column: -- column
+      if (
+        node.type === 'paragraph' &&
+        node.children.length === 1 &&
+        node.children[0].value === '-- column'
+      ) {
+        node.type = 'jsx';
+        node.value = `</div><div>`;
+      }
+
+      // End of horizontal block: -- /block
+      if (
+        node.type === 'paragraph' &&
+        node.children.length === 1 &&
+        node.children[0].value === '-- /block'
+      ) {
+        node.type = 'jsx';
+        node.value = `</div></div>`;
+      }
+
+      if (node.type === 'mdxJsxFlowElement' && (node.name === 'Example' || node.name === 'Frame')) {
+        if (!componentName) {
+          componentName = addImport(preTree, '@mintlify/components', 'Frame');
+        }
+        node.name = componentName;
+      }
+      if (node.type === 'jsx') {
+        node = tomdxJsxFlowElement(node.value);
+      }
+      return node;
+    });
+
+    tree.children = [...preTree.children, ...tree.children];
+  };
+};
+
+export default withFrames;

package/bin/mint/client/remark/withImportsInjected.js

@@ -0,0 +1,36 @@
+import { addImportString } from './utils.js';
+
+const imports = `
+import { Accordion, AccordionGroup } from '@/components/Accordion'
+import { Heading } from '@/components/Heading'
+import { CodeGroup, SnippetGroup } from '@/components/CodeGroup'
+import { RequestSimple } from '@/components/Request'
+import { RequestExample, ResponseExample } from '@/components/ApiExample'
+import { Param, ParamField } from '@/components/Param'
+import { Card } from '@/components/Card'
+import { ResponseField } from '@/components/ResponseField'
+import { Expandable } from '@/components/Expandable'
+import { CardGroup, Info, Warning, Note, Tip, Check } from '@mintlify/components'
+import { Tabs, Tab } from '@mintlify/components'
+import { Tooltip } from '@mintlify/components'
+import { solid, regular, light, thin, duotone, brands } from '@fortawesome/fontawesome-svg-core/import.macro'
+`;
+
+const withImportsInjected = () => {
+  return (tree) => {
+    tree.children = tree.children.filter((node) => {
+      return (
+        (node.type === 'import' && !node.value?.includes('@/components/')) || node.type !== 'import'
+      );
+    });
+
+    imports
+      .trim()
+      .split('\n')
+      .forEach((importLine) => {
+        addImportString(tree, importLine);
+      });
+  };
+};
+
+export default withImportsInjected;