mintlify 1.1.1 → 1.1.2

package/bin/mint/client/src/icons/CopyToClipboard.tsx

@@ -0,0 +1,33 @@
+export const CopyToClipboard = () => (
+  <span className="copy-to-clipboard z-10 flex absolute right-5">
+    <svg
+      className="top-5 h-5 fill-slate-500 hover:fill-slate-300 cursor-pointer"
+      viewBox="0 0 20 20"
+    >
+      <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+      <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+    </svg>
+    <div className="tooltip hidden absolute bottom-full left-1/2 mb-3.5 pb-1 -translate-x-1/2">
+      <div
+        className="relative bg-primary-dark text-white text-xs leading-6 font-medium px-1.5 rounded-lg"
+        data-reach-alert="true"
+      >
+        Copied
+        <svg
+          aria-hidden="true"
+          width="16"
+          height="6"
+          viewBox="0 0 16 6"
+          className="text-primary-dark absolute top-full left-1/2 -mt-px -ml-2"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M15 0H1V1.00366V1.00366V1.00371H1.01672C2.72058 1.0147 4.24225 2.74704 5.42685 4.72928C6.42941 6.40691 9.57154 6.4069 10.5741 4.72926C11.7587 2.74703 13.2803 1.0147 14.9841 1.00371H15V0Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </div>
+    </div>
+  </span>
+);

package/bin/mint/client/src/index.d.ts

@@ -0,0 +1 @@
+declare module '*.jpg';

package/bin/mint/client/src/layouts/ApiSupplemental.tsx

@@ -0,0 +1,173 @@
+import axios from 'axios';
+import parse from 'html-react-parser';
+import React from 'react';
+import { useState, useEffect } from 'react';
+
+import { RequestExample, ResponseExample } from '@/components/ApiExample';
+import { Editor } from '@/components/Editor';
+import { Component } from '@/enums/components';
+import { CopyToClipboard } from '@/icons/CopyToClipboard';
+import { getOpenApiOperationMethodAndEndpoint } from '@/utils/getOpenApiContext';
+
+const responseHasExample = (response: any) => {
+  return (
+    response?.content &&
+    response?.content.hasOwnProperty('application/json') &&
+    response?.content['application/json']?.examples &&
+    response?.content['application/json']?.examples.hasOwnProperty(['example-1']) &&
+    response?.content['application/json']?.examples['example-1']?.value
+  );
+};
+
+type ApiComponent = {
+  type: string;
+  children: { filename: string; html: string }[];
+};
+
+export function ApiSupplemental({
+  apiComponents,
+  openapi,
+}: {
+  apiComponents: ApiComponent[];
+  openapi?: string;
+}) {
+  // Response and Request Examples from MDX
+  const [mdxRequestExample, setMdxRequestExample] = useState<JSX.Element | undefined>(undefined);
+  const [mdxResponseExample, setMdxResponseExample] = useState<JSX.Element | undefined>(undefined);
+  useEffect(() => {
+    const requestComponentSkeleton = apiComponents.find((apiComponent) => {
+      return apiComponent.type === Component.RequestExample;
+    });
+
+    const responseComponentSkeleton = apiComponents.find((apiComponent) => {
+      return apiComponent.type === Component.ResponseExample;
+    });
+
+    const htmlToReactComponent = (html: string) => {
+      // Convert newlines to breaks to be properly parsed
+      // return parse(html.replaceAll('\n', '<br />'));
+      return parse(html);
+    };
+
+    const request: JSX.Element | undefined = requestComponentSkeleton && (
+      <RequestExample
+        children={requestComponentSkeleton.children.map((child) => {
+          return <Editor filename={child.filename}>{htmlToReactComponent(child.html)}</Editor>;
+        })}
+      />
+    );
+
+    setMdxRequestExample(request);
+
+    const response: JSX.Element | undefined = responseComponentSkeleton && (
+      <ResponseExample
+        children={responseComponentSkeleton.children.map((child) => {
+          return <Editor filename={child.filename}>{htmlToReactComponent(child.html)}</Editor>;
+        })}
+      />
+    );
+
+    setMdxResponseExample(response);
+  }, [apiComponents]);
+  // Open API generated response examples
+  const [openApiResponseExamples, setOpenApiResponseExamples] = useState<string[]>([]);
+  const [highlightedExamples, setHighlightedExamples] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (openapi == null) {
+      return;
+    }
+    const { operation } = getOpenApiOperationMethodAndEndpoint(openapi);
+    if (operation?.responses != null) {
+      const responseExamplesOpenApi = Object.values(operation?.responses)
+        .map((resp: any) => {
+          if (responseHasExample(resp)) {
+            return resp?.content['application/json']?.examples['example-1']?.value;
+          }
+          return '';
+        })
+        .filter((example) => example !== '');
+      if (responseExamplesOpenApi != null) {
+        setOpenApiResponseExamples(responseExamplesOpenApi);
+      }
+    }
+  }, [openapi]);
+
+  useEffect(() => {
+    if (openApiResponseExamples.length > 0) {
+      const highlightPromises = openApiResponseExamples.map((example) => {
+        return axios.post('/api/syntax-highlighted-json', {
+          json: example,
+        });
+      });
+      Promise.all(highlightPromises).then((responses) => {
+        const highlightedExamples = responses.map((response) => response.data.highlightedJson);
+        setHighlightedExamples(highlightedExamples);
+      });
+    }
+  }, [openApiResponseExamples]);
+
+  useEffect(() => {
+    // Hacky approach to wait 1ms until document loads
+    setTimeout(() => {
+      document.querySelectorAll('.copy-to-clipboard').forEach((item) => {
+        item.addEventListener(
+          'click',
+          () => {
+            const codeElement = item.nextSibling;
+            if (!codeElement || !window.getSelection) {
+              return;
+            }
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(codeElement);
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+
+            navigator.clipboard.writeText(selection?.toString() || '');
+
+            const tooltip = item.getElementsByClassName('tooltip')[0];
+            tooltip.classList.remove('hidden');
+            setTimeout(() => {
+              tooltip.classList.add('hidden');
+            }, 2000);
+          },
+          true
+        );
+      });
+    }, 50);
+  }, []);
+
+  const ResponseExampleChild = ({ code }: { code: any }) => (
+    <pre className="language-json">
+      <CopyToClipboard />
+      <code
+        className="language-json"
+        dangerouslySetInnerHTML={{
+          __html: code,
+        }}
+      />
+    </pre>
+  );
+
+  return (
+    <div className="space-y-6 pb-6">
+      {mdxRequestExample}
+      {/* TODO - Make it so that you can see both the openapi and response example in 1 view if they're both defined */}
+      {highlightedExamples.length === 0 && mdxResponseExample}
+      {highlightedExamples.length > 0 && (
+        <ResponseExample
+          children={{
+            props: {
+              filename: 'Response Example',
+              children: highlightedExamples.map((code, i) => {
+                if (code === '') return null;
+                return <ResponseExampleChild code={code} key={`example-${i}`} />;
+              }),
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/bin/mint/client/src/layouts/ContentsLayout.tsx

@@ -0,0 +1,256 @@
+import { MDXProvider } from '@mdx-js/react';
+import clsx from 'clsx';
+import { useState, useEffect, createContext, Fragment, useCallback, useContext } from 'react';
+
+import { Heading } from '@/components/Heading';
+import { usePrevNext } from '@/hooks/usePrevNext';
+import { SidebarContext } from '@/layouts/SidebarLayout';
+import { Footer } from '@/ui/Footer';
+import { PageHeader } from '@/ui/PageHeader';
+
+import { ApiSupplemental } from './ApiSupplemental';
+import { OpenApiContent } from './OpenApiContent';
+
+type Section = {
+  title: string;
+  slug: string;
+  depth: number;
+  children: any;
+};
+
+export const ContentsContext = createContext(undefined);
+
+function TableOfContents({ tableOfContents, currentSection }: any) {
+  let sidebarContext = useContext(SidebarContext);
+  let isMainNav = Boolean(sidebarContext);
+
+  function closeNav() {
+    if (isMainNav && sidebarContext) {
+      sidebarContext.setNavIsOpen(false);
+    }
+  }
+
+  function isActive(section: Section) {
+    if (section.slug === currentSection) {
+      return true;
+    }
+    if (!section.children) {
+      return false;
+    }
+    return section.children.findIndex(isActive) > -1;
+  }
+
+  let pageHasSubsections = tableOfContents.some((section: Section) => section.children.length > 0);
+
+  return (
+    <>
+      <ul className="text-slate-700 text-sm leading-6">
+        {tableOfContents.map((section: Section) => {
+          let prevDepth = section.depth;
+          let prevMargin = 0;
+          return (
+            <Fragment key={section.slug}>
+              <li>
+                <a
+                  href={`#${section.slug}`}
+                  onClick={closeNav}
+                  className={clsx(
+                    'block py-1',
+                    pageHasSubsections ? 'font-medium' : '',
+                    isActive(section)
+                      ? 'font-medium text-primary dark:text-primary-light'
+                      : 'hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
+                  )}
+                >
+                  {section.title}
+                </a>
+              </li>
+              {section.children.map((subsection: Section) => {
+                if (subsection.depth - prevDepth >= 1) {
+                  prevMargin += 4;
+                }
+                prevDepth = subsection.depth;
+                return (
+                  <li className={`ml-${prevMargin}`} key={subsection.slug}>
+                    <a
+                      href={`#${subsection.slug}`}
+                      onClick={closeNav}
+                      className={clsx(
+                        'group flex items-start py-1 whitespace-pre-wrap',
+                        isActive(subsection)
+                          ? 'text-primary dark:text-primary-light'
+                          : 'text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300'
+                      )}
+                    >
+                      {subsection.title}
+                    </a>
+                  </li>
+                );
+              })}
+            </Fragment>
+          );
+        })}
+      </ul>
+    </>
+  );
+}
+
+function useTableOfContents(tableOfContents: Section[]) {
+  let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.slug);
+  let [headings, setHeadings] = useState<any[]>([]);
+
+  const registerHeading = useCallback((id: string, top: string) => {
+    setHeadings((headings: any) => [
+      ...headings.filter((h: { id: string }) => id !== h.id),
+      { id, top },
+    ]);
+  }, []);
+
+  const unregisterHeading = useCallback((id: string) => {
+    setHeadings((headings) => headings.filter((h) => id !== h.id));
+  }, []);
+
+  useEffect(() => {
+    if (tableOfContents.length === 0 || headings.length === 0) return;
+    function onScroll() {
+      let style = window.getComputedStyle(document.documentElement);
+      let scrollMt = parseFloat(style.getPropertyValue('--scroll-mt').match(/[\d.]+/)?.[0] ?? '0');
+      let fontSize = parseFloat(style.fontSize.match(/[\d.]+/)?.[0] ?? '16');
+      scrollMt = scrollMt * fontSize;
+
+      let sortedHeadings = headings.concat([]).sort((a, b) => a.top - b.top);
+      let top = window.pageYOffset + scrollMt + 1;
+      let current = sortedHeadings[0].id;
+      for (let i = 0; i < sortedHeadings.length; i++) {
+        if (top >= sortedHeadings[i].top) {
+          current = sortedHeadings[i].id;
+        }
+      }
+      setCurrentSection(current);
+    }
+    window.addEventListener('scroll', onScroll, {
+      capture: true,
+      passive: true,
+    });
+    onScroll();
+    return () => {
+      window.removeEventListener('scroll', onScroll, {
+        capture: true,
+        passive: true,
+      } as any);
+    };
+  }, [headings, tableOfContents]);
+
+  useEffect(() => {
+    document.querySelectorAll('.copy-to-clipboard').forEach((item) => {
+      item.addEventListener('click', () => {
+        const codeElement = item.nextSibling;
+        if (!codeElement || !window.getSelection) {
+          return;
+        }
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(codeElement);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
+        navigator.clipboard.writeText(selection?.toString() || '');
+
+        const tooltip = item.getElementsByClassName('tooltip')[0];
+        tooltip.classList.remove('hidden');
+        setTimeout(() => {
+          tooltip.classList.add('hidden');
+        }, 2000);
+      });
+    });
+  }, []);
+
+  return { currentSection, registerHeading, unregisterHeading };
+}
+
+export type Meta = {
+  title?: string;
+  description?: string;
+  sidebarTitle?: string;
+  auth?: string;
+  api?: string;
+  openapi?: string;
+  size?: 'wide';
+};
+
+type ContentsLayoutProps = {
+  children: any;
+  meta: Meta;
+  tableOfContents: any;
+  section: string;
+  apiComponents: any;
+};
+
+export function ContentsLayout({
+  children,
+  meta,
+  tableOfContents,
+  section,
+  apiComponents,
+}: ContentsLayoutProps) {
+  const toc = [...tableOfContents];
+
+  const { currentSection, registerHeading, unregisterHeading } = useTableOfContents(toc);
+  let { prev, next } = usePrevNext();
+
+  const hasApiSupplementalComponents = apiComponents.some(
+    (component: any) => component.type === 'ResponseExample' || component.type === 'RequestExample'
+  );
+
+  const isWideSize = meta.size === 'wide';
+
+  return (
+    <div
+      className={clsx(
+        'relative max-w-3xl mx-auto pt-10 xl:max-w-none xl:ml-0',
+        hasApiSupplementalComponents
+          ? 'xl:pr-12 xl:mr-[28rem]'
+          : isWideSize
+          ? 'xl:pr-20 xl:mr-[12rem]'
+          : 'xl:pr-20 xl:mr-[18rem]'
+      )}
+    >
+      <PageHeader
+        title={meta.title}
+        description={meta.description}
+        api={meta.api}
+        openapi={meta.openapi}
+        auth={meta.auth}
+        section={section}
+        children={children}
+        apiComponents={apiComponents}
+      />
+      <ContentsContext.Provider value={{ registerHeading, unregisterHeading } as any}>
+        <div id="content-wrapper" className="relative z-20 prose prose-slate mt-8 dark:prose-dark">
+          <MDXProvider components={{ Heading }}>{children}</MDXProvider>
+        </div>
+      </ContentsContext.Provider>
+
+      {meta.openapi && <OpenApiContent openapi={meta.openapi} auth={meta.auth} />}
+
+      <Footer previous={prev} next={next} hasBottomPadding={!hasApiSupplementalComponents} />
+      <div
+        className={clsx(
+          'z-10 hidden xl:block pr-8',
+          hasApiSupplementalComponents
+            ? 'w-[30rem] absolute top-[7.6rem] left-full h-full'
+            : 'fixed pl-8 w-[21rem] top-[3.8rem] bottom-0 right-[max(0px,calc(50%-45rem))] py-10 overflow-auto'
+        )}
+      >
+        {!hasApiSupplementalComponents && toc.length > 0 && !isWideSize && (
+          <TableOfContents tableOfContents={toc} currentSection={currentSection} meta={meta} />
+        )}
+        {hasApiSupplementalComponents && (
+          <div className="sticky top-[6rem] left-0">
+            <ApiSupplemental openapi={meta.openapi} apiComponents={apiComponents} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/bin/mint/client/src/layouts/DocumentationLayout.tsx

@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router';
+import { ReactNode } from 'react';
+
+import { config } from '@/config';
+import { SidebarLayout } from '@/layouts/SidebarLayout';
+import { documentationNav } from '@/metadata';
+import { Title } from '@/ui/Title';
+import { slugToTitle } from '@/utils/slugToTitle';
+
+import { Meta } from './ContentsLayout';
+
+export function DocumentationLayout({
+  isMdx,
+  navIsOpen,
+  setNavIsOpen,
+  meta,
+  children,
+}: {
+  isMdx: boolean;
+  navIsOpen: boolean;
+  setNavIsOpen: any;
+  meta: Meta;
+  slug?: string;
+  children: ReactNode;
+}) {
+  const router = useRouter();
+
+  if (!isMdx) {
+    return <>{children}</>;
+  }
+
+  const defaultTitle = slugToTitle(router.pathname);
+
+  return (
+    <>
+      <Title suffix={router.pathname === '/' ? '' : config.name}>
+        {meta.sidebarTitle || meta.title || defaultTitle}
+      </Title>
+      <SidebarLayout nav={documentationNav} navIsOpen={navIsOpen} setNavIsOpen={setNavIsOpen}>
+        {children}
+      </SidebarLayout>
+    </>
+  );
+}