mintlify 1.0.7 → 1.0.8

package/bin/mint/client/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,43 @@
+import { ReactNode, useContext } from "react";
+import { Accordion as GenericAccordion } from "@mintlify/components";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import AnalyticsContext from "@/analytics/AnalyticsContext";
+
+function Accordion({
+  title,
+  description,
+  defaultOpen = false,
+  icon,
+  children,
+}: {
+  title: string;
+  description?: string;
+  defaultOpen: boolean;
+  icon?: ReactNode | IconDefinition;
+  children: ReactNode;
+}) {
+  const analyticsMediator = useContext(AnalyticsContext);
+  const openAnalyticsListener = analyticsMediator.createEventListener('accordion_open');
+  const closeAnalyticsListener = analyticsMediator.createEventListener('accordion_close');
+
+  const onChange = (open: boolean) => {
+    if (open) {
+      openAnalyticsListener({ title });
+    } else {
+      closeAnalyticsListener({ title });
+    }
+  };
+
+  return (
+    <GenericAccordion 
+      title={title}
+      description={description}
+      defaultOpen={defaultOpen}
+      onChange={onChange}
+      icon={icon}>
+        {children}
+    </GenericAccordion>
+  );
+}
+
+export default Accordion;

package/bin/mint/client/src/components/Accordion/index.ts

@@ -0,0 +1,4 @@
+import Accordion from "./Accordion";
+import { AccordionGroup } from "@mintlify/components";
+
+export { Accordion, AccordionGroup }

package/bin/mint/client/src/components/ApiExample.tsx

@@ -0,0 +1,9 @@
+import { CodeGroup, CodeGroupProps } from './CodeGroup';
+
+export function RequestExample({ ...props }: CodeGroupProps) {
+  return <CodeGroup {...props} isSmallText />;
+}
+
+export function ResponseExample({ ...props }: CodeGroupProps) {
+  return <CodeGroup {...props} isSmallText />;
+}

package/bin/mint/client/src/components/Card.tsx

@@ -0,0 +1,51 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { Card as GenericCard } from '@mintlify/components';
+import Link from 'next/link';
+import { ReactNode, useState } from 'react';
+
+import { config } from '@/config';
+import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect';
+
+export function Card({
+  title,
+  icon,
+  color,
+  href,
+  children,
+}: {
+  title?: string;
+  icon?: ReactNode | IconDefinition;
+  color?: string;
+  href?: string;
+  children: React.ReactNode;
+}) {
+  const [isDarkMode, setIsDarkMode] = useState<boolean>();
+  useIsomorphicLayoutEffect(() => {
+    if (window.document.querySelector('html.dark')) {
+      setIsDarkMode(true);
+    }
+  }, []);
+
+  const activeConfigColor = isDarkMode ? config.colors?.light : config.colors?.primary;
+
+  const card = (
+    <GenericCard
+      title={title}
+      icon={icon}
+      iconColor={color || activeConfigColor}
+      hoverHighlightColour={href ? color || activeConfigColor : undefined}
+    >
+      {children}
+    </GenericCard>
+  );
+
+  if (href) {
+    return (
+      <Link href={href}>
+        <div>{card}</div>
+      </Link>
+    );
+  }
+
+  return card;
+}

package/bin/mint/client/src/components/CodeGroup.tsx

@@ -0,0 +1,132 @@
+import { Tab } from '@headlessui/react';
+import clsx from 'clsx';
+import { useState } from 'react';
+
+function TabAdornment({ className }: { className: string }) {
+  return <div className={clsx('pointer-events-none absolute inset-0', className)} />;
+}
+
+function TabItem({
+  children,
+  selectedIndex,
+  myIndex,
+  marker,
+}: {
+  children: any;
+  selectedIndex: number;
+  myIndex: number;
+  marker?: string;
+}) {
+  const isSelected = selectedIndex === myIndex;
+  const isBeforeSelected = selectedIndex === myIndex + 1;
+  const isAfterSelected = selectedIndex === myIndex - 1;
+
+  // A cap is the edge of a list of tabs that has a special border treatment
+  // The edges of a tab may be in one of three states:
+  // - null if selected
+  // - normal if it looks like a normal tab
+  // - capped if there's a solid rounded corner on that edge
+  const edges = {
+    leading: isSelected ? null : isAfterSelected ? 'capped' : 'normal',
+    trailing: isSelected ? null : isBeforeSelected ? 'capped' : 'normal',
+  };
+
+  return (
+    <Tab
+      className={clsx(
+        'flex items-center relative z-10 overflow-hidden px-4 py-1',
+        isSelected ? 'text-primary-light' : 'text-slate-400'
+      )}
+    >
+      <span className="z-10">{children}</span>
+
+      {marker === 'close' && (
+        <svg viewBox="0 0 4 4" className="ml-2.5 flex-none w-1 h-1 text-slate-500 overflow-visible">
+          <path d="M-1 -1L5 5M5 -1L-1 5" fill="none" stroke="currentColor" strokeLinecap="round" />
+        </svg>
+      )}
+
+      {marker === 'modified' && (
+        <div className="ml-2.5 flex-none w-1 h-1 rounded-full bg-current" />
+      )}
+
+      {/* Inactive tabs with optional edge caps */}
+      {!isSelected && (
+        <TabAdornment
+          className={clsx(
+            'bg-slate-700/50 border-y border-slate-500/30',
+            edges.leading === 'capped' && 'border-l rounded-tl',
+            edges.trailing === 'capped' && 'border-r rounded-tr'
+          )}
+        />
+      )}
+
+      {/* Divider between inactive tabs */}
+      {edges.trailing === 'normal' && (
+        <TabAdornment className="inset-y-px border-r border-slate-200/5 z-20" />
+      )}
+
+      {/* Active tab highlight bar */}
+      {isSelected && <TabAdornment className="border-b border-b-primary-light" />}
+    </Tab>
+  );
+}
+
+export type CodeGroupProps = { children: any; isSmallText?: boolean };
+
+/**
+ * Group multiple code blocks into a tabbed UI
+ *
+ * @param {object} props
+ * @param {CodeBlock[]} props.children
+ */
+export function CodeGroup({ children, isSmallText }: CodeGroupProps) {
+  let [selectedIndex, setSelectedIndex] = useState<number>(0);
+
+  if (!Array.isArray(children)) {
+    children = [children];
+  }
+
+  return (
+    <Tab.Group
+      as="div"
+      onChange={setSelectedIndex as any}
+      className="not-prose bg-slate-800 rounded-xl shadow-md"
+    >
+      <div className="flex">
+        <Tab.List className="flex text-slate-400 text-xs leading-6 overflow-hidden rounded-tl-xl pt-2">
+          {children.map((child: any, tabIndex: number) => (
+            <TabItem key={child.props.filename} myIndex={tabIndex} selectedIndex={selectedIndex}>
+              {child.props.filename}
+            </TabItem>
+          ))}
+        </Tab.List>
+        <div className="flex-auto flex pt-2 rounded-tr-xl overflow-hidden">
+          <div
+            className={clsx(
+              'flex-auto flex justify-end bg-slate-700/50 border-y border-slate-500/30 pr-4',
+              selectedIndex === children.length - 1 ? 'rounded-tl border-l' : ''
+            )}
+          />
+        </div>
+      </div>
+      <Tab.Panels className="flex overflow-auto">
+        {children.map((child: any) => (
+          <Tab.Panel
+            key={child.props.filename}
+            className={clsx(
+              'flex-none min-w-full p-5 text-slate-50 ligatures-none',
+              isSmallText ? 'text-xs leading-5' : 'text-sm leading-6'
+            )}
+          >
+            {child.props.children}
+          </Tab.Panel>
+        ))}
+      </Tab.Panels>
+    </Tab.Group>
+  );
+}
+
+export function SnippetGroup(props: CodeGroupProps) {
+  return <CodeGroup {...props} />;
+}

package/bin/mint/client/src/components/Editor.tsx

@@ -0,0 +1,12 @@
+import { TabBar } from '@/components/TabBar';
+
+export function Editor({ filename, children }: any) {
+  return (
+    <div className="mt-5 mb-8 first:mt-0 last:mb-0 pt-2 bg-slate-800 rounded-xl shadow-lg overflow-hidden dark:ring-1 dark:ring-white/10 dark:ring-inset">
+      <TabBar primary={{ name: filename, saved: true }} showTabMarkers={false} />
+      <div className="children:my-0 children:!shadow-none children:bg-transparent relative">
+        {children}
+      </div>
+    </div>
+  );
+}

package/bin/mint/client/src/components/Expandable.tsx

@@ -0,0 +1,40 @@
+import { ReactNode, useContext } from "react";
+import { Expandable as GenericExpandable } from "@mintlify/components";
+import AnalyticsContext from "@/analytics/AnalyticsContext";
+
+export function Expandable({
+  title,
+  defaultOpen = false,
+  onChange: onChangeProp,
+  children,
+}: {
+  title: string;
+  defaultOpen?: boolean;
+  onChange?: (open: boolean) => void;
+  children: ReactNode;
+}) {
+  const analyticsMediator = useContext(AnalyticsContext);
+  const openAnalyticsListener = analyticsMediator.createEventListener('expandable_open');
+  const closeAnalyticsListener = analyticsMediator.createEventListener('expandable_close');
+
+  const onChange = (open: boolean) => {
+    if (onChangeProp) {
+      onChangeProp(open);
+    }
+
+    if (open) {
+      openAnalyticsListener({ title });
+    } else {
+      closeAnalyticsListener({ title });
+    }
+  };
+
+  return (
+    <GenericExpandable
+      title={title}
+      onChange={onChange}
+      >
+        {children}
+    </GenericExpandable>
+  );
+}

package/bin/mint/client/src/components/Heading.tsx

@@ -0,0 +1,84 @@
+import clsx from 'clsx';
+import { useEffect, useContext, useState } from 'react';
+import { Rect, useRect } from 'react-use-rect';
+
+import { useTop } from '@/hooks/useTop';
+import { ContentsContext } from '@/layouts/ContentsLayout';
+
+type HeadingProps = {
+  level: string;
+  id: string;
+  children: any;
+  className?: string;
+  hidden?: boolean;
+  ignore?: boolean;
+  style?: Object;
+  nextElementDepth?: number | string;
+};
+
+export function Heading({
+  level,
+  id,
+  children,
+  className = '',
+  hidden = false,
+  ignore = false,
+  style = {},
+  nextElementDepth = -1,
+  ...props
+}: HeadingProps | any) {
+  let Component = `h${level}`;
+  const context: any = useContext(ContentsContext);
+  const [rect, setRect] = useState<Rect | null>(null);
+  const [rectRef] = useRect(setRect);
+  let top = useTop(rect);
+
+  // We cannot include context in the dependency array because it changes every render.
+  const hasContext = Boolean(context);
+  const registerHeading = context?.registerHeading;
+  const unregisterHeading = context?.unregisterHeading;
+  useEffect(() => {
+    if (!hasContext) return;
+    if (typeof top !== 'undefined') {
+      registerHeading(id, top);
+    }
+    return () => {
+      unregisterHeading(id);
+    };
+  }, [top, id, registerHeading, unregisterHeading, hasContext]);
+  return (
+    <Component
+      className={clsx('group flex whitespace-pre-wrap', className, {
+        '-ml-4 pl-4': !hidden,
+        'text-2xl sm:text-3xl': level === '1',
+        'mb-2 text-sm leading-6 text-primary font-semibold tracking-normal dark:text-primary-light':
+          level === '2' && nextElementDepth > level,
+      })}
+      id={id}
+      ref={rectRef}
+      style={{ ...(hidden ? { marginBottom: 0 } : {}), ...style }}
+      {...props}
+    >
+      {!hidden && (
+        <a
+          href={`#${id}`}
+          className="absolute -ml-10 flex items-center opacity-0 border-0 group-hover:opacity-100"
+          aria-label="Anchor"
+        >
+          &#8203;
+          <div className="w-6 h-6 text-slate-400 ring-1 ring-slate-900/5 rounded-md shadow-sm flex items-center justify-center hover:ring-slate-900/10 hover:shadow hover:text-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:shadow-none dark:ring-0">
+            <svg width="12" height="12" fill="none" aria-hidden="true">
+              <path
+                d="M3.75 1v10M8.25 1v10M1 3.75h10M1 8.25h10"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+        </a>
+      )}
+      <span className={hidden ? 'sr-only' : undefined}>{children}</span>
+    </Component>
+  );
+}

package/bin/mint/client/src/components/Param.tsx

@@ -0,0 +1,56 @@
+import { Param as GenericParam } from '@mintlify/components';
+
+export type ParamProps = {
+  query?: string;
+  path?: string;
+  body?: string;
+  children: any;
+  default?: string;
+  type?: string;
+  required?: boolean;
+  hidden?: boolean;
+
+  // Used to flow data to the API Playground
+  last?: boolean;
+  placeholder?: any;
+  enum?: string[];
+};
+
+// 9/8/2022 - Migrate everyone off Param
+export function Param(props: ParamProps) {
+  return <ParamField {...props} />;
+}
+
+// Also props: query, body, path
+export function ParamField({
+  query,
+  path,
+  body,
+  children,
+  default: defaultValue,
+  type,
+  required = false,
+  hidden = false,
+  last,
+  placeholder,
+  enum: enumValues,
+}: ParamProps) {
+  if (!query && !path && !body) {
+    return null;
+  }
+
+  const name = query || path || body;
+
+  return (
+    <GenericParam
+      name={name!}
+      defaultValue={defaultValue}
+      type={type}
+      required={required}
+      hidden={hidden}
+      nameClasses="text-primary dark:text-primary-light"
+    >
+      {children}
+    </GenericParam>
+  );
+}

package/bin/mint/client/src/components/Request.tsx

@@ -0,0 +1,19 @@
+import { getMethodTextColor } from '@/utils/brands';
+import clsx from 'clsx';
+
+// TO BE DEPRECATED after migrating Sieve
+export function RequestSimple({
+  method,
+  children,
+}: {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  children: React.ReactChild;
+}) {
+  const methodColor = getMethodTextColor(method);
+  return (
+    <div className="flex items-center space-x-4">
+      <div className={clsx('font-bold', methodColor)}>{method}</div>
+      <div className="flex-1 flex items-center font-mono">{children}</div>
+    </div>
+  );
+}

package/bin/mint/client/src/components/ResponseField.tsx

@@ -0,0 +1,33 @@
+import { Param as GenericParam } from '@mintlify/components';
+import { ReactNode } from 'react';
+
+// The API playground detects all Params to generate the playground fields,
+// so this cannot be replaced by the Param component even if the UI is the same.
+export function ResponseField({
+  name,
+  type,
+  hidden,
+  default: defaultValue,
+  required,
+  children,
+}: {
+  name: string;
+  type: string;
+  hidden?: boolean;
+  default?: string;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <GenericParam
+      name={name}
+      type={type}
+      hidden={hidden}
+      defaultValue={defaultValue}
+      required={required}
+      nameClasses="text-primary dark:text-primary-light"
+    >
+      {children}
+    </GenericParam>
+  );
+}

package/bin/mint/client/src/components/TabBar.tsx

@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import { ReactElement } from 'react';
+
+export function TabBar({
+  primary,
+  secondary = [],
+  showTabMarkers = true,
+  side,
+  translucent = false,
+  children,
+}: {
+  primary: { name: string; saved: boolean };
+  secondary?: { name: string; saved: boolean; open?: boolean; className: string }[];
+  showTabMarkers?: boolean;
+  side?: string;
+  translucent?: boolean;
+  children?: ReactElement;
+}) {
+  return (
+    <div className="flex text-slate-400 text-xs leading-6">
+      <div className="flex-none text-primary-light border-t border-b border-t-transparent border-b-primary-light px-4 py-1 flex items-center">
+        {primary.name}
+        {showTabMarkers &&
+          (primary.saved ? (
+            <svg
+              viewBox="0 0 4 4"
+              className="ml-2.5 flex-none w-1 h-1 text-slate-500 overflow-visible"
+            >
+              <path
+                d="M-1 -1L5 5M5 -1L-1 5"
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+              />
+            </svg>
+          ) : (
+            <div className="ml-2.5 flex-none w-1 h-1 rounded-full bg-current" />
+          ))}
+      </div>
+      <div
+        className={clsx(
+          'flex-auto flex items-center bg-slate-700/50 border border-slate-500/30',
+          side === 'left' ? 'rounded-tl lg:rounded-tr' : 'rounded-tl',
+          translucent && 'dark:bg-slate-800/50'
+        )}
+      >
+        {secondary.map(({ name, open = true, className }) => (
+          <div
+            key={name}
+            className={clsx('px-4 py-1 border-r border-slate-200/5', className, { italic: !open })}
+          >
+            {name}
+          </div>
+        ))}
+        {children && (
+          <div className="flex-auto flex items-center justify-end px-4 space-x-4">{children}</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/bin/mint/client/src/config.ts

@@ -0,0 +1,115 @@
+import {
+  AmplitudeConfigInterface,
+  FathomConfigInterface,
+  GoogleAnalyticsConfigInterface,
+  HotjarConfigInterface,
+  MixpanelConfigInterface,
+  PostHogConfigInterface,
+} from './analytics/AbstractAnalyticsImplementation';
+import configJSON from './mint.json';
+
+export const config: Config = configJSON;
+
+export type NavigationEntry = string | Navigation;
+
+export type Navigation = {
+  group: string;
+  pages: NavigationEntry[];
+};
+
+type Logo = string | { light: string; dark: string; href?: string };
+
+type NavbarLink = {
+  url: string;
+  type?: 'github' | 'link' | string;
+  name?: string;
+};
+
+export type TopbarCta = NavbarLink;
+
+type Anchor = {
+  name: string;
+  url: string;
+  icon?: string;
+  color?: string;
+  isDefaultHidden?: boolean;
+};
+
+// To deprecate array types
+type FooterSocial = {
+  type: string;
+  url: string;
+};
+
+type Analytics = {
+  amplitude?: AmplitudeConfigInterface;
+  fathom?: FathomConfigInterface;
+  ga4?: GoogleAnalyticsConfigInterface;
+  hotjar?: HotjarConfigInterface;
+  mixpanel?: MixpanelConfigInterface;
+  posthog?: PostHogConfigInterface;
+};
+
+type FooterSocials = Record<string, string>;
+
+export type Config = {
+  mintlify?: string;
+  name: string;
+  basePath?: string;
+  logo?: Logo;
+  favicon?: string;
+  openApi?: string;
+  api?: {
+    baseUrl?: string | string[];
+    auth?: {
+      method: string; // 'key', 'bearer', or 'basic'
+      name?: string;
+      inputPrefix?: string;
+    };
+  };
+  metadata?: any;
+  colors?: {
+    primary: string;
+    light?: string;
+    dark?: string;
+    ultraLight?: string;
+    ultraDark?: string;
+    background?: {
+      light?: string;
+      dark?: string;
+    };
+  };
+  topbarCtaButton?: NavbarLink;
+  topbarLinks?: NavbarLink[];
+  navigation?: Navigation[];
+  topAnchor?: {
+    name: string;
+  };
+  anchors?: Anchor[];
+  footerSocials?: FooterSocial[] | FooterSocials;
+  classes?: {
+    anchors?: string;
+    activeAnchors?: string;
+    topbarCtaButton?: string;
+    navigationItem?: string;
+    logo?: string;
+  };
+  backgroundImage?: string;
+  analytics?: Analytics;
+  __injected?: {
+    analytics?: Analytics;
+  };
+};
+
+export const findFirstNavigationEntry = (
+  group: Navigation,
+  target: string
+): NavigationEntry | undefined => {
+  return group.pages.find((page) => {
+    if (typeof page === 'string') {
+      return page.includes(target);
+    } else {
+      return findFirstNavigationEntry(page, target);
+    }
+  });
+};

package/bin/mint/client/src/css/bar-of-progress.css

@@ -0,0 +1,10 @@
+.bar-of-progress::after {
+  content: '';
+  display: block;
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px currentColor, 0 0 5px currentColor;
+  transform: rotate(3deg) translate(0, -4px);
+}