mintlify 1.1.4 → 1.1.6

package/bin/mint/client/src/hooks/useActionKey.ts

@@ -1,20 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control'];
-const ACTION_KEY_APPLE = ['⌘', 'Command'];
-
-export function useActionKey() {
-  let [actionKey, setActionKey] = useState<string[]>();
-
-  useEffect(() => {
-    if (typeof navigator !== 'undefined') {
-      if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
-        setActionKey(ACTION_KEY_APPLE);
-      } else {
-        setActionKey(ACTION_KEY_DEFAULT);
-      }
-    }
-  }, []);
-
-  return actionKey;
-}

package/bin/mint/client/src/hooks/useIsomorphicLayoutEffect.ts

@@ -1,3 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react'
-
-export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/bin/mint/client/src/hooks/useMedia.ts

@@ -1,27 +0,0 @@
-// https://github.com/streamich/react-use/blob/master/src/useMedia.ts
-import { useState, useEffect } from 'react';
-
-export function useMedia(query: string, defaultState = false) {
-  const [state, setState] = useState(defaultState);
-
-  useEffect(() => {
-    let mounted = true;
-    const mql = window.matchMedia(query);
-    const onChange = () => {
-      if (!mounted) {
-        return;
-      }
-      setState(!!mql.matches);
-    };
-
-    mql.addListener(onChange);
-    setState(mql.matches);
-
-    return () => {
-      mounted = false;
-      mql.removeListener(onChange);
-    };
-  }, [query]);
-
-  return state;
-}

package/bin/mint/client/src/hooks/usePrevNext.ts

@@ -1,34 +0,0 @@
-import { useRouter } from 'next/router';
-import { useContext } from 'react';
-
-import { SidebarContext } from '@/layouts/SidebarLayout';
-import { PageContext, GroupPage, isGroup, flattenGroupPages } from '@/metadata';
-
-const getFirstNonGroupPage = (groupPage?: GroupPage): PageContext | null => {
-  if (groupPage == null) {
-    return null;
-  }
-
-  if (isGroup(groupPage)) {
-    return getFirstNonGroupPage(groupPage.pages[0]);
-  }
-
-  return groupPage;
-};
-
-export function usePrevNext() {
-  let router = useRouter();
-  let { nav } = useContext(SidebarContext);
-  let pages: PageContext[] = nav.reduce(
-    (acc: PageContext[], currentGroup: { pages: PageContext[] }) => {
-      return acc.concat(...flattenGroupPages(currentGroup.pages));
-    },
-    []
-  );
-
-  let pageIndex = pages.findIndex((page) => page?.href === router.pathname);
-  return {
-    prev: pageIndex > -1 ? getFirstNonGroupPage(pages[pageIndex - 1]) : undefined,
-    next: pageIndex > -1 ? getFirstNonGroupPage(pages[pageIndex + 1]) : undefined,
-  };
-}

package/bin/mint/client/src/hooks/useTop.ts

@@ -1,15 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Rect } from 'react-use-rect';
-
-export function useTop(rect: Rect | null) {
-  let [top, setTop] = useState<number>();
-  let rectTop = rect ? rect.top : undefined;
-  useEffect(() => {
-    if (typeof rectTop === 'undefined') return;
-    let newTop = rectTop + window.pageYOffset;
-    if (newTop !== top) {
-      setTop(newTop);
-    }
-  }, [rectTop, top]);
-  return top;
-}

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

@@ -1,33 +0,0 @@
-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

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

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

@@ -1,173 +0,0 @@
-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

@@ -1,256 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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>
-    </>
-  );
-}