mintlify 1.1.6 → 1.1.8

package/bin/mint/client/src/analytics/implementations/mixpanel.ts

@@ -0,0 +1,52 @@
+import * as Sentry from '@sentry/nextjs';
+
+import {
+  AbstractAnalyticsImplementation,
+  ConfigInterface,
+} from '@/analytics/AbstractAnalyticsImplementation';
+
+export default class MixpanelAnalytics extends AbstractAnalyticsImplementation {
+  initialized = false;
+
+  // Store events to submit after the library is loaded.
+  waitTracking: { name: string; properties: object }[] = [];
+  mixpanel = {
+    track: (name: string, properties: object) => this.waitTracking.push({ name, properties }),
+  } as any;
+
+  init(implementationConfig: ConfigInterface) {
+    if (implementationConfig.projectToken && process.env.NODE_ENV === 'production') {
+      // Dynamic import reduces our First Load JS by 18 kB
+      import('mixpanel-browser')
+        .then((_mixpanel) => {
+          if (!this.initialized) {
+            // Get default module export
+            const mixpanelLib = _mixpanel.default;
+            mixpanelLib.init(implementationConfig.projectToken, {
+              secure_cookie: true,
+            });
+
+            this.initialized = true;
+            this.mixpanel = mixpanelLib;
+
+            this.waitTracking.forEach((event) => {
+              this.mixpanel.track(event.name, event.properties);
+            });
+          }
+        })
+        .catch((e) => {
+          Sentry.captureException(e);
+        });
+    } else {
+      // Stop storing events, we don't need them because the library will not be loaded.
+      this.mixpanel.track = (_name: string, _properties: object) => {};
+    }
+  }
+
+  createEventListener(eventName: string) {
+    const captureFunc = async function capture(this: MixpanelAnalytics, eventProperties: object) {
+      this.mixpanel.track(eventName, eventProperties);
+    };
+    return captureFunc.bind(this);
+  }
+}

package/bin/mint/client/src/analytics/implementations/posthog.ts

@@ -0,0 +1,37 @@
+import Router from 'next/router';
+import posthog from 'posthog-js';
+
+import {
+  AbstractAnalyticsImplementation,
+  ConfigInterface,
+} from '@/analytics/AbstractAnalyticsImplementation';
+
+export default class PostHogAnalytics extends AbstractAnalyticsImplementation {
+  initialized = false;
+
+  init(implementationConfig: ConfigInterface) {
+    if (implementationConfig.apiKey && !this.initialized) {
+      this.initialized = true;
+      // apiHost only has to be passed in if the user is self-hosting PostHog
+      posthog.init(implementationConfig.apiKey, {
+        api_host: implementationConfig.apiHost || 'https://app.posthog.com',
+        loaded: (posthogInstance) => {
+          if (process.env.NODE_ENV !== 'production') posthogInstance.opt_out_capturing();
+        },
+      });
+
+      // Track page views
+      const handleRouteChange = () => posthog.capture('$pageview');
+      Router.events.on('routeChangeComplete', handleRouteChange);
+    }
+  }
+
+  createEventListener(eventName: string) {
+    if (this.initialized) {
+      return async function capture(eventProperties: object) {
+        posthog.capture(eventName, eventProperties);
+      };
+    }
+    return async function doNothing(_: object) {};
+  }
+}

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>
+  );
+}