mintlify 1.0.7 → 1.0.9

package/bin/mint/client/src/ui/Header.tsx

@@ -0,0 +1,370 @@
+import { brands, regular } from '@fortawesome/fontawesome-svg-core/import.macro';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Dialog } from '@headlessui/react';
+import axios from 'axios';
+import clsx from 'clsx';
+import gh from 'github-url-to-object';
+import Link from 'next/link';
+import Router from 'next/router';
+import { useEffect, useState } from 'react';
+
+import { Logo } from '@/ui/Logo';
+import { SearchButton } from '@/ui/Search';
+import getLogoHref from '@/utils/getLogoHref';
+
+import { config, TopbarCta } from '../config';
+import { ThemeSelect, ThemeToggle } from './ThemeToggle';
+
+export function NavPopover({
+  display = 'md:hidden',
+  className,
+  ...props
+}: {
+  display: string;
+  className: string;
+}) {
+  let [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleRouteChange() {
+      setIsOpen(false);
+    }
+    Router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [isOpen]);
+
+  return (
+    <div className={clsx(className, display)} {...props}>
+      <button
+        type="button"
+        className="text-slate-500 w-8 h-8 flex items-center justify-center hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+        onClick={() => setIsOpen(true)}
+      >
+        <span className="sr-only">Navigation</span>
+        <svg width="24" height="24" fill="none" aria-hidden="true">
+          <path
+            d="M12 6v.01M12 12v.01M12 18v.01M12 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+      <Dialog
+        as="div"
+        className={clsx('fixed z-50 inset-0', display)}
+        open={isOpen}
+        onClose={setIsOpen}
+      >
+        <Dialog.Overlay className="fixed inset-0 bg-black/20 backdrop-blur-sm dark:bg-slate-900/80" />
+        <div className="fixed top-4 right-4 w-full max-w-xs bg-white rounded-lg shadow-lg p-6 text-base font-semibold text-slate-900 dark:bg-slate-800 dark:text-slate-400 dark:highlight-white/5">
+          <button
+            type="button"
+            className="absolute top-5 right-5 w-8 h-8 flex items-center justify-center text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+            onClick={() => setIsOpen(false)}
+          >
+            <span className="sr-only">Close navigation</span>
+            <svg viewBox="0 0 10 10" className="w-2.5 h-2.5 overflow-visible" aria-hidden="true">
+              <path
+                d="M0 0L10 10M10 0L0 10"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              />
+            </svg>
+          </button>
+          <ul className="space-y-6">
+            <NavItems />
+          </ul>
+          <div className="mt-6 pt-6 border-t border-slate-200 dark:border-slate-200/10">
+            <ThemeSelect />
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+}
+
+function GitHubCta({ button }: { button: TopbarCta }) {
+  const [repoData, setRepoData] = useState<{ stargazers_count: number; forks_count: number }>();
+
+  const github = gh(button.url);
+
+  useEffect(() => {
+    if (github == null) {
+      return;
+    }
+
+    axios.get(`https://api.github.com/repos/${github.user}/${github.repo}`).then(({ data }) => {
+      setRepoData(data);
+    });
+  }, [github]);
+
+  if (github == null) {
+    return null;
+  }
+
+  return (
+    <li className="cursor-pointer">
+      <Link href={button.url}>
+        <div className="group flex items-center space-x-3">
+          <FontAwesomeIcon className="h-6 w-6" icon={brands('github-square')} />
+          <div className="font-normal">
+            <div className="text-sm font-medium text-slate-700 group-hover:text-slate-900 dark:text-slate-300 dark:group-hover:text-slate-200">
+              {github.user}/{github.repo}
+            </div>
+            {repoData ? (
+              <div className="text-xs flex items-center space-x-2 text-slate-600 dark:text-slate-400 group-hover:text-slate-700 dark:group-hover:text-slate-300">
+                <span className="flex items-center space-x-1">
+                  <FontAwesomeIcon className="h-3 w-3" icon={regular('star')} />
+                  <span>{repoData.stargazers_count}</span>
+                </span>
+                <span className="flex items-center space-x-1">
+                  <FontAwesomeIcon className="h-3 w-3" icon={regular('code-fork')} />
+                  <span>{repoData.forks_count}</span>
+                </span>
+              </div>
+            ) : (
+              <div className="h-4" />
+            )}
+          </div>
+        </div>
+      </Link>
+    </li>
+  );
+}
+
+function TopBarCtaButton({ button }: { button: TopbarCta }) {
+  if (button.type === 'github') {
+    return <GitHubCta button={button} />;
+  }
+
+  return (
+    <li>
+      <Link href={button.url}>
+        <a
+          target="_blank"
+          className={clsx(
+            config.classes?.topbarCtaButton ||
+              'relative inline-flex items-center space-x-1 px-4 py-1 border border-transparent shadow-sm text-sm font-medium rounded-[0.3rem] text-white bg-primary-dark hover:bg-primary-ultradark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-primary-light'
+          )}
+        >
+          <span>{button.name}</span>
+          {!config.classes?.topbarCtaButton && (
+            <svg
+              className="h-2.5 text-white"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"
+            >
+              <path d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z" />
+            </svg>
+          )}
+        </a>
+      </Link>
+    </li>
+  );
+}
+
+export function NavItems() {
+  return (
+    <>
+      {config?.topbarLinks?.map((topbarLink) => (
+        <li key={topbarLink.name}>
+          <Link href={topbarLink.url}>
+            <a className="font-medium hover:text-primary dark:hover:text-primary-light">
+              {topbarLink.name}
+            </a>
+          </Link>
+        </li>
+      ))}
+      {config?.topbarCtaButton && <TopBarCtaButton button={config.topbarCtaButton} />}
+    </>
+  );
+}
+
+export function Header({
+  hasNav = false,
+  navIsOpen,
+  onNavToggle,
+  title,
+  section,
+}: {
+  hasNav: boolean;
+  navIsOpen: boolean;
+  onNavToggle: (toggle: boolean) => void;
+  title?: string;
+  section?: string;
+}) {
+  let [isOpaque, setIsOpaque] = useState(false);
+
+  useEffect(() => {
+    let offset = 50;
+    function onScroll() {
+      if (!isOpaque && window.scrollY > offset) {
+        setIsOpaque(true);
+      } else if (isOpaque && window.scrollY <= offset) {
+        setIsOpaque(false);
+      }
+    }
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, [isOpaque]);
+
+  return (
+    <>
+      <div
+        className={clsx(
+          'sticky top-0 w-full backdrop-blur flex-none transition-colors z-40 duration-500 lg:border-b lg:border-slate-900/5 dark:border-slate-50/[0.06] lg:z-50',
+          isOpaque
+            ? 'bg-background-light/90 supports-backdrop-blur:bg-background-light/90 dark:bg-background-dark/75'
+            : 'bg-transparent dark:bg-transparent'
+        )}
+      >
+        <div className="max-w-8xl mx-auto">
+          <div
+            className={clsx(
+              'py-4 border-b border-slate-900/10 lg:px-8 lg:border-0 dark:border-slate-300/10',
+              hasNav ? 'mx-4 lg:mx-0' : 'px-4'
+            )}
+          >
+            <div className="relative flex items-center">
+              <div className="flex-1">
+                <Link href={getLogoHref(config)}>
+                  <a
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      Router.push(getLogoHref(config));
+                    }}
+                  >
+                    <span className="sr-only">{config.name} home page</span>
+                    <Logo />
+                  </a>
+                </Link>
+              </div>
+              <div className="relative flex-none bg-white lg:w-64 xl:w-80 dark:bg-slate-900 pointer-events-auto rounded-md">
+                <SearchButton className="hidden w-full lg:flex items-center text-sm leading-6 text-slate-400 rounded-md ring-1 ring-slate-500/10 shadow-sm py-1.5 pl-2 pr-3 bg-slate-50 hover:ring-slate-900/20 dark:bg-slate-800 dark:highlight-white/5 dark:hover:bg-slate-700">
+                  {({ actionKey }: any) => (
+                    <>
+                      <svg
+                        width="24"
+                        height="24"
+                        fill="none"
+                        aria-hidden="true"
+                        className="mr-3 flex-none"
+                      >
+                        <path
+                          d="m19 19-3.5-3.5"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                        <circle
+                          cx="11"
+                          cy="11"
+                          r="6"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        />
+                      </svg>
+                      Search...
+                      {actionKey && (
+                        <span className="ml-auto flex-none text-xs font-semibold">
+                          {actionKey[0]}K
+                        </span>
+                      )}
+                    </>
+                  )}
+                </SearchButton>
+              </div>
+              <div className="flex-1 relative hidden lg:flex items-center ml-auto justify-end">
+                <nav className="text-sm leading-6 font-semibold text-slate-700 dark:text-slate-200">
+                  <ul className="flex space-x-8 items-center">
+                    <NavItems />
+                  </ul>
+                </nav>
+                <div className="flex items-center border-l border-slate-100 ml-6 pl-6 dark:border-slate-800">
+                  <ThemeToggle panelClassName="mt-8" />
+                </div>
+              </div>
+              <SearchButton className="ml-auto text-slate-500 w-8 h-8 -my-1 flex items-center justify-center hover:text-slate-600 lg:hidden dark:text-slate-400 dark:hover:text-slate-300">
+                <span className="sr-only">Search</span>
+                <svg
+                  width="24"
+                  height="24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="m19 19-3.5-3.5" />
+                  <circle cx="11" cy="11" r="6" />
+                </svg>
+              </SearchButton>
+              <NavPopover className="ml-2 -my-1" display="lg:hidden" />
+            </div>
+          </div>
+          {hasNav && (
+            <div className="flex items-center p-4 border-b border-slate-900/10 lg:hidden dark:border-slate-50/[0.06]">
+              <button
+                type="button"
+                onClick={() => onNavToggle(!navIsOpen)}
+                className="text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+              >
+                <span className="sr-only">Navigation</span>
+                <svg width="24" height="24">
+                  <path
+                    d="M5 6h14M5 12h14M5 18h14"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                  />
+                </svg>
+              </button>
+              {title && (
+                <ol className="ml-4 flex text-sm leading-6 whitespace-nowrap min-w-0">
+                  {section && (
+                    <li className="flex items-center">
+                      {section}
+                      <svg
+                        width="3"
+                        height="6"
+                        aria-hidden="true"
+                        className="mx-3 overflow-visible text-slate-400"
+                      >
+                        <path
+                          d="M0 0L3 3L0 6"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.5"
+                          strokeLinecap="round"
+                        />
+                      </svg>
+                    </li>
+                  )}
+                  <li className="font-semibold text-slate-900 truncate dark:text-slate-200">
+                    {title}
+                  </li>
+                </ol>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/bin/mint/client/src/ui/Logo.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+
+import { config } from '@/config';
+
+export function Logo() {
+  const className = clsx('w-auto h-7 relative', config.classes?.logo);
+  if (typeof config.logo === 'object' && config.logo !== null) {
+    return (
+      <>
+        <div className={clsx(className, 'block dark:hidden')}>
+          <Image
+            src={config?.logo.light}
+            alt="light logo"
+            layout="fill"
+            objectFit="contain"
+            objectPosition="left"
+          />
+        </div>
+        <div className={clsx(className, 'hidden dark:block')}>
+          <Image
+            src={config?.logo.dark}
+            alt="dark logo"
+            layout="fill"
+            objectFit="contain"
+            objectPosition="left"
+          />
+        </div>
+      </>
+    );
+  }
+  if (config?.logo) {
+    return (
+      <div className={clsx(className)}>
+        <Image
+          src={config?.logo}
+          alt="logo"
+          layout="fill"
+          objectFit="contain"
+          objectPosition="left"
+        />
+      </div>
+    );
+  }
+  if (config?.name) {
+    return (
+      <div
+        className={`inline-block text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200 ${className}`}
+      >
+        {config?.name}
+      </div>
+    );
+  }
+  return <></>;
+}

package/bin/mint/client/src/ui/PageHeader.tsx

@@ -0,0 +1,51 @@
+import { UserFeedback } from '@/layouts/UserFeedback';
+import { Api, ApiComponent } from '@/ui/Api';
+
+type PageHeaderProps = {
+  title?: string;
+  description?: string;
+  api?: string;
+  openapi?: string;
+  auth?: string;
+  section: string;
+  children: any;
+  apiComponents: ApiComponent[];
+};
+
+export function PageHeader({
+  title,
+  description,
+  section,
+  api,
+  auth,
+  children,
+  apiComponents,
+}: PageHeaderProps) {
+  if (!title && !description) return null;
+
+  return (
+    <header id="header" className="relative z-20">
+      <div>
+        <div className="flex">
+          <div className="flex-1">
+            {section && (
+              <p className="mb-2 text-sm leading-6 font-semibold text-primary dark:text-primary-light">
+                {section}
+              </p>
+            )}
+          </div>
+          <UserFeedback title="" />
+        </div>
+        <div className="flex items-center">
+          <h1 className="inline-block text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">
+            {title}
+          </h1>
+        </div>
+      </div>
+      {description && (
+        <p className="mt-2 text-lg text-slate-700 dark:text-slate-400">{description}</p>
+      )}
+      {api && <Api api={api} children={children} auth={auth} apiComponents={apiComponents} />}
+    </header>
+  );
+}