blodemd 0.0.5 → 0.0.7

package/docs/components/docs/doc-header.tsx

@@ -0,0 +1,210 @@
+import type { SiteConfig } from "@repo/models";
+import Image from "next/image";
+import Link from "next/link";
+
+import { MobileNav } from "@/components/docs/mobile-nav";
+import { Search } from "@/components/ui/search";
+import { ThemeToggle } from "@/components/ui/theme-toggle";
+import type { NavEntry, NavTab } from "@/lib/navigation";
+import { isExternalHref, resolveHref, toDocHref } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const Dropdown = ({
+  label,
+  items,
+  basePath,
+}: {
+  label: string;
+  items: { label: string; url: string }[];
+  basePath: string;
+}) => {
+  if (!items.length) {
+    return null;
+  }
+  return (
+    <details className="relative">
+      <summary className="cursor-pointer rounded-full border border-border bg-background px-3 py-1.5 text-sm">
+        {label}
+      </summary>
+      <div className="absolute right-0 top-11 z-20 grid min-w-36 overflow-hidden rounded-xl border border-border bg-popover shadow-popover">
+        {items.map((item) => {
+          const href = resolveHref(item.url, basePath);
+          const isExternal = isExternalHref(item.url);
+
+          return (
+            <Link
+              className="px-3 py-2 hover:bg-accent"
+              href={href}
+              key={item.label}
+              rel={isExternal ? "noopener noreferrer" : undefined}
+              target={isExternal ? "_blank" : undefined}
+            >
+              {item.label}
+            </Link>
+          );
+        })}
+      </div>
+    </details>
+  );
+};
+
+const HeaderTabs = ({
+  tabs,
+  activeTabIndex = 0,
+  basePath,
+}: {
+  tabs: NavTab[];
+  activeTabIndex?: number;
+  basePath: string;
+}) => (
+  <nav
+    aria-label="Navigation tabs"
+    className="ml-4 hidden items-center gap-0.5 lg:flex"
+  >
+    {tabs.map((tab, index) => {
+      const isActive = index === activeTabIndex;
+      const href =
+        (tab.href ? resolveHref(tab.href, basePath) : undefined) ??
+        (tab.slugPrefix ? toDocHref(tab.slugPrefix, basePath) : undefined);
+
+      if (!href) {
+        return null;
+      }
+
+      const isExternal = Boolean(tab.href && isExternalHref(tab.href));
+
+      return (
+        <Link
+          className={cn(
+            "relative px-2.5 py-1.5 text-sm transition-colors",
+            isActive
+              ? "font-medium text-primary"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+          href={href}
+          key={tab.label}
+          rel={isExternal ? "noopener noreferrer" : undefined}
+          target={isExternal ? "_blank" : undefined}
+        >
+          {tab.label}
+          {isActive ? (
+            <span className="absolute inset-x-1 -bottom-3.5 h-0.5 rounded-full bg-primary" />
+          ) : null}
+        </Link>
+      );
+    })}
+  </nav>
+);
+
+// oxlint-disable-next-line eslint/complexity
+export const DocHeader = ({
+  config,
+  basePath,
+  tabs,
+  activeTabIndex,
+  nav = [],
+}: {
+  config: SiteConfig;
+  basePath: string;
+  tabs?: NavTab[] | null;
+  activeTabIndex?: number;
+  nav?: NavEntry[];
+}) => {
+  const globalLinks = config.navigation?.global?.links ?? [];
+  const versions = config.navigation?.versions ?? [];
+  const languages = config.navigation?.languages ?? [];
+  const [primaryVersion] = versions;
+  const [primaryLanguage] = languages;
+  const searchDisabled = config.features?.search === false;
+  const themeToggleDisabled = config.features?.themeToggle === false;
+
+  return (
+    <header className="sticky top-0 z-50 w-full bg-background">
+      <div className="container-wrapper px-4 lg:px-8">
+        <div className="flex h-(--header-height) items-center gap-2">
+          <MobileNav
+            activeTabIndex={activeTabIndex}
+            basePath={basePath}
+            className="flex lg:hidden"
+            entries={nav}
+            globalLinks={globalLinks}
+            tabs={tabs}
+          />
+          <Link
+            className="flex items-center gap-2.5"
+            href={toDocHref("index", basePath)}
+          >
+            {config.logo?.light ? (
+              <Image
+                alt={config.logo.alt ?? config.name}
+                className="dark:hidden"
+                data-logo="light"
+                height={32}
+                loading="eager"
+                src={config.logo.light}
+                unoptimized
+                width={140}
+              />
+            ) : null}
+            {config.logo?.dark ? (
+              <Image
+                alt={config.logo.alt ?? config.name}
+                className="hidden dark:inline-block"
+                data-logo="dark"
+                height={32}
+                loading="eager"
+                src={config.logo.dark}
+                unoptimized
+                width={140}
+              />
+            ) : null}
+            {config.logo?.light || config.logo?.dark ? null : (
+              <span className="text-xl font-bold">{config.name}</span>
+            )}
+          </Link>
+          {tabs?.length ? (
+            <HeaderTabs
+              activeTabIndex={activeTabIndex}
+              basePath={basePath}
+              tabs={tabs}
+            />
+          ) : null}
+          <nav
+            aria-label="External links"
+            className="ml-1 hidden items-center gap-0 text-sm text-muted-foreground lg:flex"
+          >
+            {globalLinks.map((link) => (
+              <a
+                className="rounded-lg px-2.5 py-1.5 transition-colors hover:bg-muted hover:text-foreground"
+                href={link.href}
+                key={link.label}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {link.label}
+              </a>
+            ))}
+          </nav>
+          <div className="ml-auto flex items-center gap-2 md:flex-1 md:justify-end">
+            {searchDisabled ? null : <Search basePath={basePath} />}
+            {primaryVersion ? (
+              <Dropdown
+                basePath={basePath}
+                items={versions}
+                label={primaryVersion.label}
+              />
+            ) : null}
+            {primaryLanguage ? (
+              <Dropdown
+                basePath={basePath}
+                items={languages}
+                label={primaryLanguage.label}
+              />
+            ) : null}
+            {themeToggleDisabled ? null : <ThemeToggle />}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

package/docs/components/docs/doc-shell.tsx

@@ -0,0 +1,313 @@
+import type { PageMode, SiteConfig } from "@repo/models";
+import { ChevronLeftIcon, ChevronRightIcon } from "blode-icons-react";
+import Link from "next/link";
+import Script from "next/script";
+import { Fragment } from "react";
+import type { ReactNode } from "react";
+
+import {
+  ContextualMenu,
+  ContextualTocItems,
+} from "@/components/docs/contextual-menu";
+import { CopyPageMenu } from "@/components/docs/copy-page-menu";
+import { DocHeader } from "@/components/docs/doc-header";
+import { DocSidebar } from "@/components/docs/doc-sidebar";
+import { DocToc } from "@/components/docs/doc-toc";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import type { NavEntry, NavTab } from "@/lib/navigation";
+import { toDocHref } from "@/lib/routes";
+import { themeStylesFromConfig } from "@/lib/theme";
+import type { TocItem } from "@/lib/toc";
+import { cn } from "@/lib/utils";
+
+const renderScripts = (
+  scripts?: string[],
+  strategy: "afterInteractive" | "lazyOnload" = "afterInteractive"
+) =>
+  scripts?.map((script) => (
+    <Script key={script} src={script} strategy={strategy} />
+  )) ?? null;
+
+const Breadcrumbs = ({
+  basePath,
+  breadcrumbs,
+}: {
+  basePath: string;
+  breadcrumbs: { label: string; path: string }[];
+}) => {
+  if (!breadcrumbs.length) {
+    return null;
+  }
+
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        {breadcrumbs.map((crumb, index) => {
+          const key = `${crumb.path || "current"}-${crumb.label}`;
+          const isLast = index === breadcrumbs.length - 1;
+          return (
+            <Fragment key={key}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink asChild>
+                    <Link href={toDocHref(crumb.path, basePath)}>
+                      {crumb.label}
+                    </Link>
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {!isLast && <BreadcrumbSeparator />}
+            </Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+// oxlint-disable-next-line eslint/complexity
+export const DocShell = ({
+  config,
+  nav,
+  prevPage,
+  nextPage,
+  toc,
+  content,
+  currentPath,
+  breadcrumbs,
+  pageTitle,
+  pageDescription,
+  anchors,
+  activeTabIndex,
+  basePath,
+  markdownHref,
+  rawContent,
+  tabs,
+  mode,
+  deprecated,
+  hideFooterPagination,
+}: {
+  config: SiteConfig;
+  nav: NavEntry[];
+  prevPage?: { title: string; path: string };
+  nextPage?: { title: string; path: string; description?: string };
+  toc: TocItem[];
+  content: ReactNode;
+  currentPath: string;
+  breadcrumbs: { label: string; path: string }[];
+  pageTitle: string;
+  pageDescription?: string;
+  anchors?: { label: string; href: string }[];
+  activeTabIndex?: number;
+  basePath: string;
+  markdownHref?: string;
+  rawContent?: string;
+  tabs?: NavTab[] | null;
+  mode?: PageMode;
+  deprecated?: boolean;
+  hideFooterPagination?: boolean;
+}) => {
+  const pageMode = mode ?? "default";
+  const isCustomMode = pageMode === "custom";
+  const showSidebar =
+    pageMode !== "custom" &&
+    pageMode !== "center" &&
+    Boolean((nav?.length ?? 0) || (anchors?.length ?? 0));
+  const { contextual } = config;
+  const contextualDisplay = contextual?.display ?? "header";
+  const hasToc =
+    pageMode !== "custom" &&
+    pageMode !== "wide" &&
+    pageMode !== "frame" &&
+    pageMode !== "center" &&
+    config.features?.rightToc !== false &&
+    config.features?.toc !== false &&
+    (toc.length > 0 || (contextual && contextualDisplay === "toc"));
+
+  const contextualTocItems =
+    contextual && contextualDisplay === "toc" && rawContent !== undefined ? (
+      <ContextualTocItems
+        content={rawContent}
+        options={contextual.options}
+        pagePath={currentPath}
+        title={pageTitle}
+      />
+    ) : null;
+
+  const headerContextualMenu =
+    contextual && contextualDisplay === "header" && rawContent !== undefined ? (
+      <ContextualMenu
+        content={rawContent}
+        options={contextual.options}
+        pagePath={currentPath}
+        title={pageTitle}
+      />
+    ) : null;
+
+  const innerContent = (
+    <div className="flex min-w-0 flex-1 flex-col">
+      <div className="h-(--top-spacing) shrink-0" />
+      {isCustomMode ? (
+        <main id="main-content">{content}</main>
+      ) : (
+        <main
+          className={cn(
+            "flex scroll-mt-24 items-stretch gap-1 px-4 lg:px-8",
+            !showSidebar && "mx-auto max-w-[960px]"
+          )}
+          id="main-content"
+        >
+          <div
+            className={cn(
+              "mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 py-6 text-neutral-800 lg:py-8 dark:text-neutral-300",
+              pageMode === "wide" ? "max-w-[60rem]" : "max-w-[40rem]"
+            )}
+          >
+            <div className="flex flex-col gap-2">
+              <Breadcrumbs basePath={basePath} breadcrumbs={breadcrumbs} />
+              <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between md:items-start">
+                  <h1 className="scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl">
+                    {pageTitle}
+                    {deprecated ? (
+                      <span className="ml-3 inline-flex translate-y-[-2px] items-center rounded-md bg-yellow-100 px-2 py-0.5 align-middle text-xs font-medium text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300">
+                        Deprecated
+                      </span>
+                    ) : null}
+                  </h1>
+                  {headerContextualMenu ??
+                    (rawContent === undefined &&
+                    markdownHref === undefined ? null : (
+                      <CopyPageMenu
+                        content={rawContent}
+                        contentUrl={markdownHref}
+                        title={pageTitle}
+                      />
+                    ))}
+                </div>
+                {pageDescription ? (
+                  <p className="text-[1.05rem] text-muted-foreground sm:text-balance sm:text-base md:max-w-[80%]">
+                    {pageDescription}
+                  </p>
+                ) : null}
+              </div>
+            </div>
+            <div className="grid gap-4.5 leading-relaxed [&_blockquote]:border-l-3 [&_blockquote]:border-primary [&_blockquote]:pl-3.5 [&_blockquote]:text-muted-foreground [&_h2]:mt-10 [&_h2]:mb-3 [&_h2]:text-2xl [&_h2]:font-bold [&_h3]:mt-8 [&_h3]:mb-2 [&_h3]:text-[1.375rem] [&_h3]:font-semibold [&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:text-base [&_h4]:font-semibold [&_ol]:list-decimal [&_ol]:pl-5 [&_table]:w-full [&_table]:border-collapse [&_table]:text-sm [&_td]:border-b [&_td]:border-border [&_td]:px-2.5 [&_td]:py-2 [&_td]:text-left [&_th]:border-b [&_th]:border-border [&_th]:px-2.5 [&_th]:py-2 [&_th]:text-left [&_ul]:list-disc [&_ul]:pl-5">
+              {content}
+            </div>
+            {!hideFooterPagination && (prevPage || nextPage) ? (
+              <nav
+                className="flex w-full rounded-2xl bg-muted/50 p-1 text-sm"
+                id="pagination"
+              >
+                {prevPage ? (
+                  <Link
+                    className="group flex items-center justify-between gap-1.5 pl-3 pr-6"
+                    href={toDocHref(prevPage.path, basePath)}
+                  >
+                    <ChevronLeftIcon
+                      aria-hidden="true"
+                      className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
+                    />
+                    <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
+                      Previous
+                    </span>
+                  </Link>
+                ) : null}
+                {nextPage ? (
+                  <Link
+                    className="group ml-auto flex w-full min-w-0 flex-1"
+                    href={toDocHref(nextPage.path, basePath)}
+                  >
+                    <div className="flex flex-1 items-center justify-end rounded-xl bg-background hover:ring-1 hover:ring-border sm:h-16">
+                      <div className="flex min-w-0 flex-col items-end justify-center px-5">
+                        <span className="text-right font-semibold text-foreground/80">
+                          {nextPage.title}
+                        </span>
+                        {nextPage.description ? (
+                          <span className="hidden w-full truncate text-right text-muted-foreground lg:block lg:w-72">
+                            {nextPage.description}
+                          </span>
+                        ) : null}
+                      </div>
+                      <div className="h-8 w-px bg-border/50" />
+                      <div className="flex items-center gap-1.5 pl-5 pr-3">
+                        <span className="font-medium tracking-tight text-muted-foreground group-hover:text-foreground">
+                          Next
+                        </span>
+                        <ChevronRightIcon
+                          aria-hidden="true"
+                          className="size-3 text-muted-foreground/50 group-hover:text-muted-foreground"
+                        />
+                      </div>
+                    </div>
+                  </Link>
+                ) : null}
+              </nav>
+            ) : null}
+          </div>
+          {hasToc ? (
+            <DocToc contextualItems={contextualTocItems} toc={toc} />
+          ) : null}
+        </main>
+      )}
+    </div>
+  );
+
+  return (
+    <div
+      className="min-h-screen font-sans"
+      data-has-dark-logo={config.logo?.dark ? "true" : "false"}
+      style={themeStylesFromConfig(config)}
+    >
+      <a
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm"
+        href="#main-content"
+      >
+        Skip to content
+      </a>
+      {renderScripts(config.scripts?.head)}
+      <DocHeader
+        activeTabIndex={activeTabIndex}
+        basePath={basePath}
+        config={config}
+        nav={nav}
+        tabs={tabs}
+      />
+      <div className="container-wrapper flex flex-1 flex-col">
+        {showSidebar ? (
+          <div
+            className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
+            style={
+              {
+                "--sidebar-width": "calc(var(--spacing) * 72)",
+              } as React.CSSProperties
+            }
+          >
+            <DocSidebar
+              anchors={anchors}
+              basePath={basePath}
+              currentPath={currentPath}
+              entries={nav}
+            />
+            {innerContent}
+          </div>
+        ) : (
+          <div className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:[--top-spacing:calc(var(--spacing)*4)]">
+            {innerContent}
+          </div>
+        )}
+      </div>
+      {renderScripts(config.scripts?.body, "lazyOnload")}
+    </div>
+  );
+};