blodemd 0.0.5 → 0.0.7

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

@@ -0,0 +1,211 @@
+import { normalizePath } from "@repo/common";
+import { ArrowUpRightIcon } from "blode-icons-react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { DocIcon } from "@/components/icons/doc-icon";
+import { getNavPageHref, getNavPageTitle } from "@/lib/navigation";
+import type { NavEntry, NavPage } from "@/lib/navigation";
+import { isExternalHref, 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 (
+    <DocIcon
+      className="size-4 shrink-0 text-muted-foreground"
+      icon={icon}
+      size={16}
+    />
+  );
+};
+
+const NavPageLink = ({
+  item,
+  basePath,
+  isActive,
+}: {
+  item: NavPage;
+  basePath: string;
+  isActive: boolean;
+}) => {
+  const displayTitle = getNavPageTitle(item);
+  const href = getNavPageHref(item, basePath);
+  const isExternal = Boolean(item.url && isExternalHref(item.url));
+
+  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}
+      {isExternal ? (
+        <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 (isExternal) {
+    return (
+      <a
+        className={className}
+        href={href}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        {linkContent}
+      </a>
+    );
+  }
+
+  return (
+    <Link className={className} href={href}>
+      {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>
+  );
+};

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+
+import type { TocItem } from "@/lib/toc";
+
+export const DocToc = ({
+  toc,
+  contextualItems,
+}: {
+  toc: TocItem[];
+  contextualItems?: ReactNode;
+}) => {
+  if (!toc.length && !contextualItems) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label="Table of contents"
+      className="sticky top-[calc(var(--header-height,4rem)+1px)] z-30 ml-auto hidden h-[90svh] w-56 shrink-0 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex"
+    >
+      <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
+        <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
+          {toc.length > 0 ? (
+            <>
+              <p className="sticky top-0 h-6 bg-background font-medium text-muted-foreground text-xs">
+                On This Page
+              </p>
+              {toc.map((item) => (
+                <a
+                  className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground data-[depth=3]:pl-4 data-[depth=4]:pl-6"
+                  data-depth={item.level}
+                  href={`#${item.id}`}
+                  key={item.id}
+                >
+                  {item.title}
+                </a>
+              ))}
+            </>
+          ) : null}
+          {contextualItems}
+        </div>
+      </div>
+    </nav>
+  );
+};

package/docs/components/docs/mobile-nav.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { getNavPageHref, getNavPageTitle } from "@/lib/navigation";
+import type { NavEntry, NavPage, NavTab } from "@/lib/navigation";
+import { isExternalHref, resolveHref, toDocHref } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const MobileLink = ({
+  href,
+  onOpenChange,
+  className,
+  children,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Link> & {
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+  className?: string;
+}) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(event);
+      onOpenChange?.(false);
+    },
+    [onClick, onOpenChange]
+  );
+
+  return (
+    <Link
+      className={cn("flex items-center gap-2 text-2xl font-medium", className)}
+      href={href}
+      onClick={handleClick}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export const MobileNav = ({
+  entries,
+  globalLinks,
+  basePath,
+  tabs,
+  activeTabIndex,
+  className,
+}: {
+  entries: NavEntry[];
+  globalLinks: { label: string; href: string }[];
+  basePath: string;
+  tabs?: NavTab[] | null;
+  activeTabIndex?: number;
+  className?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+
+  const renderPageLink = (page: NavPage) => {
+    const href = getNavPageHref(page, basePath);
+    const isExternal = Boolean(page.url && isExternalHref(page.url));
+
+    return (
+      <MobileLink
+        href={href}
+        key={page.path}
+        onOpenChange={setOpen}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        target={isExternal ? "_blank" : undefined}
+      >
+        {getNavPageTitle(page)}
+      </MobileLink>
+    );
+  };
+
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger asChild>
+        <Button
+          className={cn(
+            "extend-touch-target !p-0 h-8 touch-manipulation items-center justify-start gap-2.5 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
+            className
+          )}
+          variant="ghost"
+        >
+          <div className="relative flex h-8 w-4 items-center justify-center">
+            <div className="relative size-4">
+              <span
+                className={cn(
+                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
+                  open ? "top-[0.4rem] -rotate-45" : "top-1"
+                )}
+              />
+              <span
+                className={cn(
+                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
+                  open ? "top-[0.4rem] rotate-45" : "top-2.5"
+                )}
+              />
+            </div>
+            <span className="sr-only">Toggle Menu</span>
+          </div>
+          <span className="flex h-8 items-center text-lg font-medium leading-none">
+            Menu
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        alignOffset={-16}
+        className="no-scrollbar h-(--available-height) w-(--available-width) overflow-y-auto rounded-none border-none bg-background/90 p-0 shadow-none backdrop-blur duration-100 data-open:animate-none!"
+        side="bottom"
+        sideOffset={14}
+      >
+        <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
+          {tabs?.length ? (
+            <div className="flex flex-col gap-4">
+              <div className="text-sm font-medium text-muted-foreground">
+                Sections
+              </div>
+              <div className="flex flex-col gap-3">
+                {tabs.map((tab, index) => {
+                  const href =
+                    (tab.href ? resolveHref(tab.href, basePath) : undefined) ??
+                    (tab.slugPrefix
+                      ? toDocHref(tab.slugPrefix, basePath)
+                      : undefined);
+                  if (!href) {
+                    return null;
+                  }
+                  const isActive = index === activeTabIndex;
+
+                  return (
+                    <MobileLink
+                      className={isActive ? "text-primary" : ""}
+                      href={href}
+                      key={tab.label}
+                      onOpenChange={setOpen}
+                      rel={
+                        tab.href && isExternalHref(tab.href)
+                          ? "noopener noreferrer"
+                          : undefined
+                      }
+                      target={
+                        tab.href && isExternalHref(tab.href)
+                          ? "_blank"
+                          : undefined
+                      }
+                    >
+                      {tab.label}
+                    </MobileLink>
+                  );
+                })}
+              </div>
+            </div>
+          ) : null}
+          {globalLinks.length > 0 ? (
+            <div className="flex flex-col gap-4">
+              <div className="text-sm font-medium text-muted-foreground">
+                Menu
+              </div>
+              <div className="flex flex-col gap-3">
+                {globalLinks.map((link) => (
+                  <MobileLink
+                    href={link.href}
+                    key={link.label}
+                    onOpenChange={setOpen}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                  >
+                    {link.label}
+                  </MobileLink>
+                ))}
+              </div>
+            </div>
+          ) : null}
+          {entries.map((entry) => {
+            if (entry.type === "page") {
+              return renderPageLink(entry);
+            }
+
+            return (
+              <div className="flex flex-col gap-4" key={entry.title}>
+                <div className="text-sm font-medium text-muted-foreground">
+                  {entry.title}
+                </div>
+                <div className="flex flex-col gap-3">
+                  {entry.items.map((item) => renderPageLink(item))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/docs/components/icons/doc-icon.tsx

@@ -0,0 +1,96 @@
+import ArrowRightIcon from "blode-icons-react/icons/arrow-right";
+import ArrowUpRightIcon from "blode-icons-react/icons/arrow-up-right";
+import CheckIcon from "blode-icons-react/icons/check";
+import CodeIcon from "blode-icons-react/icons/code";
+import ConsoleIcon from "blode-icons-react/icons/console";
+import FlagIcon from "blode-icons-react/icons/flag-1";
+import FolderAddRightIcon from "blode-icons-react/icons/folder-add-right";
+import GlobusIcon from "blode-icons-react/icons/globus";
+import ImacIcon from "blode-icons-react/icons/imac";
+import InfoIcon from "blode-icons-react/icons/info";
+import KeyIcon from "blode-icons-react/icons/key";
+import LockIcon from "blode-icons-react/icons/lock";
+import MagnifyingGlassIcon from "blode-icons-react/icons/magnifying-glass";
+import PlayIcon from "blode-icons-react/icons/play";
+import PuzzleIcon from "blode-icons-react/icons/puzzle";
+import RocketIcon from "blode-icons-react/icons/rocket";
+import SparkleIcon from "blode-icons-react/icons/sparkle";
+import StarIcon from "blode-icons-react/icons/star";
+import TriangleExclamationIcon from "blode-icons-react/icons/triangle-exclamation";
+import type { ComponentType, ReactElement, SVGProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+type IconComponent = ComponentType<SVGProps<SVGSVGElement>>;
+interface DocIconProps {
+  icon: string;
+  color?: string;
+  size?: number;
+  className?: string;
+}
+
+const DOC_ICON_MAP: Record<string, IconComponent> = {
+  "alert-triangle": TriangleExclamationIcon,
+  "arrow-right": ArrowRightIcon,
+  check: CheckIcon,
+  code: CodeIcon,
+  "external-link": ArrowUpRightIcon,
+  flag: FlagIcon,
+  "folder-plus": FolderAddRightIcon,
+  globe: GlobusIcon,
+  info: InfoIcon,
+  key: KeyIcon,
+  lock: LockIcon,
+  monitor: ImacIcon,
+  play: PlayIcon,
+  puzzle: PuzzleIcon,
+  rocket: RocketIcon,
+  search: MagnifyingGlassIcon,
+  sparkles: SparkleIcon,
+  star: StarIcon,
+  terminal: ConsoleIcon,
+};
+
+const getIconComponent = (icon: string): IconComponent | null =>
+  DOC_ICON_MAP[icon.trim().toLowerCase()] ?? null;
+
+export const DocIcon = ({
+  icon,
+  color,
+  size = 16,
+  className,
+}: DocIconProps): ReactElement => {
+  const IconComponent = getIconComponent(icon);
+
+  if (!IconComponent) {
+    return (
+      <span
+        aria-hidden
+        className={cn(
+          "inline-flex items-center justify-center font-medium uppercase leading-none",
+          className
+        )}
+        style={{
+          color: color ?? undefined,
+          fontSize: Math.max(10, Math.round(size * 0.55)),
+          height: size,
+          width: size,
+        }}
+      >
+        {icon.slice(0, 2)}
+      </span>
+    );
+  }
+
+  return (
+    <IconComponent
+      aria-hidden
+      className={cn("shrink-0", className)}
+      style={{
+        color: color ?? undefined,
+        height: size,
+        width: size,
+      }}
+    />
+  );
+};

package/docs/components/mdx/accordion.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface AccordionProps {
+  title: string;
+  description?: string;
+  defaultOpen?: boolean;
+  id?: string;
+  icon?: ReactNode;
+  children: ReactNode;
+}
+
+export const Accordion = ({
+  title,
+  description,
+  defaultOpen = false,
+  id,
+  icon,
+  children,
+}: AccordionProps) => {
+  const [open, setOpen] = useState(defaultOpen);
+  const anchorId = id ?? title.toLowerCase().replaceAll(/\s+/g, "-");
+
+  const toggle = useCallback(() => setOpen((prev) => !prev), []);
+
+  return (
+    <div className="border-b border-border last:border-b-0" id={anchorId}>
+      <button
+        aria-expanded={open}
+        className="flex w-full items-center gap-3 py-4 text-left"
+        onClick={toggle}
+        type="button"
+      >
+        {icon ? (
+          <span className="flex size-5 shrink-0 items-center justify-center text-muted-foreground">
+            {icon}
+          </span>
+        ) : null}
+        <div className="min-w-0 flex-1">
+          <div className="font-medium">{title}</div>
+          {description ? (
+            <div className="mt-0.5 text-sm text-muted-foreground">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        <svg
+          aria-hidden
+          className={cn(
+            "size-4 shrink-0 text-muted-foreground transition-transform duration-200",
+            open && "rotate-180"
+          )}
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          viewBox="0 0 24 24"
+        >
+          <path d="m6 9 6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+      </button>
+      <div
+        className={cn(
+          "grid transition-[grid-template-rows] duration-200",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="pb-4 text-sm text-muted-foreground">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const AccordionGroup = ({ children }: { children: ReactNode }) => (
+  <div className="my-4 divide-y divide-border rounded-xl border border-border px-4">
+    {children}
+  </div>
+);