blodemd 0.0.5 → 0.0.6

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

@@ -0,0 +1,192 @@
+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 { toDocHref } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const Dropdown = ({
+  label,
+  items,
+}: {
+  label: string;
+  items: { label: string; url: 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) => (
+          <Link
+            className="px-3 py-2 hover:bg-accent"
+            href={item.url}
+            key={item.label}
+          >
+            {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 ??
+        (tab.slugPrefix ? toDocHref(tab.slugPrefix, basePath) : undefined);
+
+      if (!href) {
+        return null;
+      }
+
+      const isExternal = tab.href?.startsWith("http");
+
+      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-6">
+        <div className="flex h-(--header-height) items-center">
+          <MobileNav
+            activeTabIndex={activeTabIndex}
+            basePath={basePath}
+            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="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 items={versions} label={primaryVersion.label} />
+            ) : null}
+            {primaryLanguage ? (
+              <Dropdown items={languages} label={primaryLanguage.label} />
+            ) : null}
+            {themeToggleDisabled ? null : <ThemeToggle />}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};

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

@@ -0,0 +1,289 @@
+import type { PageMode, SiteConfig } from "@repo/models";
+import { ArrowLeftIcon, ArrowRightIcon } 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 { Button } from "@/components/ui/button";
+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 };
+  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 px-4 py-6 text-neutral-800 md:px-0 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="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
+                {prevPage ? (
+                  <Button asChild size="sm" variant="secondary">
+                    <Link href={toDocHref(prevPage.path, basePath)}>
+                      <ArrowLeftIcon aria-hidden="true" />
+                      {prevPage.title}
+                    </Link>
+                  </Button>
+                ) : null}
+                {nextPage ? (
+                  <Button
+                    asChild
+                    className="ml-auto"
+                    size="sm"
+                    variant="secondary"
+                  >
+                    <Link href={toDocHref(nextPage.path, basePath)}>
+                      {nextPage.title}
+                      <ArrowRightIcon aria-hidden="true" />
+                    </Link>
+                  </Button>
+                ) : 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 px-6">
+        {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>
+  );
+};

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

@@ -0,0 +1,206 @@
+import { normalizePath } from "@repo/common";
+import { ArrowUpRightIcon } from "blode-icons-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { getNavPageHref, getNavPageTitle } from "@/lib/navigation";
+import type { NavEntry, NavPage } from "@/lib/navigation";
+import { toDocHref } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const MENU_BUTTON_CLASS =
+  "relative flex min-h-[30px] items-center gap-2 overflow-visible rounded-md border border-transparent px-2 text-[0.8rem] font-medium transition-colors hover:bg-accent/70 hover:text-foreground";
+
+const NavIcon = ({ icon }: { icon: string }) => {
+  if (icon.startsWith("http") || icon.startsWith("/")) {
+    return (
+      <Image
+        alt=""
+        className="size-4 shrink-0"
+        height={16}
+        src={icon}
+        unoptimized
+        width={16}
+      />
+    );
+  }
+  return (
+    <span className="size-4 shrink-0 text-center text-[10px] leading-4 text-muted-foreground">
+      {icon.slice(0, 2)}
+    </span>
+  );
+};
+
+const NavPageLink = ({
+  item,
+  basePath,
+  isActive,
+}: {
+  item: NavPage;
+  basePath: string;
+  isActive: boolean;
+}) => {
+  const displayTitle = getNavPageTitle(item);
+
+  const linkContent = (
+    <>
+      {item.icon ? <NavIcon icon={item.icon} /> : null}
+      <span className={item.deprecated ? "line-through opacity-60" : undefined}>
+        {displayTitle}
+      </span>
+      {item.tag ? (
+        <span className="ml-auto shrink-0 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium leading-none text-primary">
+          {item.tag}
+        </span>
+      ) : null}
+      {item.deprecated && !item.tag ? (
+        <span className="ml-auto shrink-0 rounded bg-yellow-100 px-1.5 py-0.5 text-[10px] font-medium leading-none text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300">
+          Deprecated
+        </span>
+      ) : null}
+      {item.url ? (
+        <ArrowUpRightIcon
+          aria-hidden="true"
+          className="ml-auto size-3 shrink-0 text-muted-foreground"
+        />
+      ) : null}
+    </>
+  );
+
+  const className = cn(
+    MENU_BUTTON_CLASS,
+    isActive && "border-accent bg-accent text-foreground"
+  );
+
+  if (item.url) {
+    return (
+      <a
+        className={className}
+        href={item.url}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {linkContent}
+      </a>
+    );
+  }
+
+  return (
+    <Link className={className} href={getNavPageHref(item, basePath)}>
+      {linkContent}
+    </Link>
+  );
+};
+
+const Section = ({
+  title,
+  children,
+  paddedTop = false,
+}: {
+  title?: string;
+  children: React.ReactNode;
+  paddedTop?: boolean;
+}) => (
+  <section
+    className={cn(
+      "relative flex w-full min-w-0 flex-col p-2",
+      paddedTop && "pt-6"
+    )}
+  >
+    {title ? (
+      <div className="mb-2 px-2 font-medium text-muted-foreground text-xs">
+        {title}
+      </div>
+    ) : null}
+    <div className="w-full text-sm">{children}</div>
+  </section>
+);
+
+export const DocSidebar = ({
+  entries,
+  currentPath,
+  anchors,
+  basePath,
+}: {
+  entries: NavEntry[];
+  currentPath: string;
+  anchors?: { label: string; href: string }[];
+  basePath: string;
+}) => {
+  const activePath = normalizePath(currentPath);
+  const isActive = (path: string) => normalizePath(path) === activePath;
+
+  return (
+    <aside
+      className="sticky top-[calc(var(--header-height)+0.6rem)] z-30 hidden h-[calc(100svh-10rem)] w-[calc(var(--spacing)*56)] shrink-0 flex-col overscroll-none bg-transparent lg:flex"
+      aria-label="Documentation navigation"
+    >
+      <div className="h-9" />
+      <div className="absolute top-8 z-10 h-8 w-full shrink-0 bg-gradient-to-b from-background via-background/80 to-background/50 blur-xs" />
+      <div className="absolute top-12 right-2 bottom-0 hidden h-full w-px bg-gradient-to-b from-transparent via-border to-transparent lg:flex" />
+      <div className="no-scrollbar mx-auto flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2">
+        {anchors?.length ? (
+          <Section paddedTop title="Pinned">
+            <ul className="space-y-1">
+              {anchors.map((anchor) => (
+                <li key={anchor.href}>
+                  <a
+                    className={cn(MENU_BUTTON_CLASS, "text-foreground")}
+                    href={
+                      anchor.href.startsWith("http")
+                        ? anchor.href
+                        : toDocHref(anchor.href, basePath)
+                    }
+                  >
+                    {anchor.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </Section>
+        ) : null}
+        {entries.map((entry, index) => {
+          if (entry.type === "page") {
+            return (
+              <Section
+                key={entry.path}
+                paddedTop={index === 0 && !anchors?.length}
+              >
+                <ul>
+                  <li>
+                    <NavPageLink
+                      basePath={basePath}
+                      isActive={isActive(entry.path)}
+                      item={entry}
+                    />
+                  </li>
+                </ul>
+              </Section>
+            );
+          }
+
+          return (
+            <Section
+              key={entry.title}
+              paddedTop={index === 0 && !anchors?.length}
+              title={entry.title}
+            >
+              <ul className="space-y-0.5">
+                {entry.items.map((item) => (
+                  <li key={item.path}>
+                    <NavPageLink
+                      basePath={basePath}
+                      isActive={isActive(item.path)}
+                      item={item}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </Section>
+          );
+        })}
+        <div className="sticky -bottom-1 z-10 h-16 shrink-0 bg-gradient-to-t from-background via-background/80 to-background/50 blur-xs" />
+      </div>
+    </aside>
+  );
+};