blodemd 0.0.5 → 0.0.6

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,207 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import type { ReactNode } from "react";
+
+import { getNavPageHref, getNavPageTitle } from "@/lib/navigation";
+import type { NavEntry, NavPage, NavTab } from "@/lib/navigation";
+import { toDocHref } from "@/lib/routes";
+import { cn } from "@/lib/utils";
+
+const MobileLink = ({
+  href,
+  onClose,
+  className,
+  children,
+  ...props
+}: {
+  href: string;
+  onClose: () => void;
+  className?: string;
+  children: ReactNode;
+} & Omit<React.ComponentProps<typeof Link>, "href" | "onClick">) => (
+  <Link
+    className={cn("flex items-center gap-2 text-2xl font-medium", className)}
+    href={href}
+    onClick={onClose}
+    {...props}
+  >
+    {children}
+  </Link>
+);
+
+export const MobileNav = ({
+  entries,
+  globalLinks,
+  basePath,
+  tabs,
+  activeTabIndex,
+}: {
+  entries: NavEntry[];
+  globalLinks: { label: string; href: string }[];
+  basePath: string;
+  tabs?: NavTab[] | null;
+  activeTabIndex?: number;
+}) => {
+  const [open, setOpen] = useState(false);
+  const handleClose = useCallback(() => setOpen(false), []);
+  const handleOpen = useCallback(() => setOpen(true), []);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener("keydown", handleKeydown);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  }, [open]);
+
+  const renderPageLink = (page: NavPage) => {
+    const href = getNavPageHref(page, basePath);
+    const isExternal = Boolean(page.url);
+
+    return (
+      <MobileLink
+        href={href}
+        key={page.path}
+        onClose={handleClose}
+        rel={isExternal ? "noopener noreferrer" : undefined}
+        target={isExternal ? "_blank" : undefined}
+      >
+        {getNavPageTitle(page)}
+      </MobileLink>
+    );
+  };
+
+  return (
+    <>
+      <button
+        aria-label="Toggle menu"
+        className="inline-flex size-8 items-center justify-center gap-2.5 rounded-md hover:bg-accent lg:hidden"
+        onClick={handleOpen}
+        type="button"
+      >
+        <div className="relative size-4">
+          <span className="absolute left-0 top-1 block h-0.5 w-4 bg-foreground" />
+          <span className="absolute left-0 top-2.5 block h-0.5 w-4 bg-foreground" />
+        </div>
+      </button>
+      {open ? (
+        <div className="fixed inset-0 z-50 lg:hidden">
+          <button
+            aria-label="Close menu"
+            className="absolute inset-0 bg-background/90 backdrop-blur-sm"
+            onClick={handleClose}
+            type="button"
+          />
+          <div className="relative flex h-full flex-col overflow-y-auto px-6 py-6">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-muted-foreground">
+                Navigation
+              </span>
+              <button
+                aria-label="Close menu"
+                className="inline-flex size-9 items-center justify-center rounded-full border border-border text-lg text-muted-foreground hover:bg-accent hover:text-foreground"
+                onClick={handleClose}
+                type="button"
+              >
+                X
+              </button>
+            </div>
+            <div className="mt-8 flex flex-col gap-12">
+              {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 ??
+                        (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}
+                          onClose={handleClose}
+                          rel={
+                            tab.href?.startsWith("http")
+                              ? "noopener noreferrer"
+                              : undefined
+                          }
+                          target={
+                            tab.href?.startsWith("http") ? "_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}
+                        onClose={handleClose}
+                        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>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};

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

package/docs/components/mdx/badge.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+const colorStyles: Record<string, string> = {
+  blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  gray: "bg-muted text-muted-foreground",
+  green: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
+  orange:
+    "bg-orange-100 text-orange-800 dark:bg-orange-900/40 dark:text-orange-300",
+  purple:
+    "bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-300",
+  red: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+  surface: "bg-card text-card-foreground",
+  white: "bg-white text-foreground dark:bg-white dark:text-black",
+  yellow:
+    "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300",
+};
+
+const strokeStyles: Record<string, string> = {
+  blue: "border-blue-300 text-blue-700 dark:border-blue-700 dark:text-blue-300",
+  gray: "border-border text-muted-foreground",
+  green:
+    "border-green-300 text-green-700 dark:border-green-700 dark:text-green-300",
+  orange:
+    "border-orange-300 text-orange-700 dark:border-orange-700 dark:text-orange-300",
+  purple:
+    "border-purple-300 text-purple-700 dark:border-purple-700 dark:text-purple-300",
+  red: "border-red-300 text-red-700 dark:border-red-700 dark:text-red-300",
+  surface: "border-border text-card-foreground",
+  white: "border-border text-foreground",
+  yellow:
+    "border-yellow-300 text-yellow-700 dark:border-yellow-700 dark:text-yellow-300",
+};
+
+const sizeStyles: Record<string, string> = {
+  lg: "px-3 py-1.5 text-sm",
+  md: "px-2.5 py-1 text-xs",
+  sm: "px-2 py-0.5 text-xs",
+  xs: "px-1.5 py-0.5 text-[10px]",
+};
+
+interface BadgeProps {
+  color?: string;
+  size?: "xs" | "sm" | "md" | "lg";
+  shape?: "rounded" | "pill";
+  icon?: ReactNode;
+  stroke?: boolean;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+export const Badge = ({
+  color = "gray",
+  size = "md",
+  shape = "rounded",
+  icon,
+  stroke = false,
+  disabled = false,
+  className,
+  children,
+}: BadgeProps) => (
+  <span
+    className={cn(
+      "inline-flex items-center gap-1 font-medium",
+      shape === "pill" ? "rounded-full" : "rounded-md",
+      stroke
+        ? cn("border bg-transparent", strokeStyles[color] ?? strokeStyles.gray)
+        : (colorStyles[color] ?? colorStyles.gray),
+      sizeStyles[size] ?? sizeStyles.md,
+      disabled && "opacity-50",
+      className
+    )}
+  >
+    {icon ? <span className="shrink-0">{icon}</span> : null}
+    {children}
+  </span>
+);

package/docs/components/mdx/callout.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+const variantStyles: Record<string, string> = {
+  check:
+    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
+  danger: "border-red-600 bg-red-100 dark:border-red-400 dark:bg-red-900",
+  info: "bg-card border-border",
+  note: "bg-card border-border",
+  success:
+    "border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900",
+  tip: "border-blue-600 bg-blue-100 dark:border-blue-400 dark:bg-blue-900",
+  warning:
+    "border-amber-600 bg-amber-100 dark:border-amber-400 dark:bg-amber-900",
+};
+
+interface CalloutProps {
+  type?: "info" | "success" | "warning" | "danger" | "note" | "tip" | "check";
+  title?: string;
+  icon?: ReactNode;
+  color?: string;
+  children: ReactNode;
+}
+
+export const Callout = ({
+  type = "info",
+  title,
+  icon,
+  color,
+  children,
+}: CalloutProps) => (
+  <div
+    data-slot="alert"
+    role="alert"
+    data-variant="default"
+    className={cn(
+      "relative grid grid-cols-[0_1fr] items-start gap-y-0.5 rounded-xl border px-4 py-3 text-sm text-surface-foreground",
+      "has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3",
+      "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+      "**:[code]:border md:-mx-1",
+      variantStyles[type]
+    )}
+    style={
+      color
+        ? {
+            backgroundColor: `${color}10`,
+            borderColor: color,
+          }
+        : undefined
+    }
+  >
+    {icon}
+    <div
+      data-slot="alert-description"
+      className="col-start-2 grid justify-items-start gap-1 text-sm text-foreground [&_p]:leading-relaxed"
+    >
+      {title ? <strong className="font-medium">{title}</strong> : null}
+      <div className="text-sm [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&_p]:leading-relaxed [&_p:not(:first-child)]:mt-6">
+        {children}
+      </div>
+    </div>
+  </div>
+);
+
+export const Note = ({ children }: { children: ReactNode }) => (
+  <Callout type="note">{children}</Callout>
+);
+
+export const Warning = ({ children }: { children: ReactNode }) => (
+  <Callout type="warning">{children}</Callout>
+);
+
+export const Info = ({ children }: { children: ReactNode }) => (
+  <Callout type="info">{children}</Callout>
+);
+
+export const Tip = ({ children }: { children: ReactNode }) => (
+  <Callout type="tip">{children}</Callout>
+);
+
+export const Check = ({ children }: { children: ReactNode }) => (
+  <Callout type="check">{children}</Callout>
+);
+
+export const Danger = ({ children }: { children: ReactNode }) => (
+  <Callout type="danger">{children}</Callout>
+);

package/docs/components/mdx/card.tsx

@@ -0,0 +1,104 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+interface CardProps {
+  title?: string;
+  icon?: ReactNode;
+  color?: string;
+  href?: string;
+  horizontal?: boolean;
+  img?: string;
+  cta?: string;
+  children?: ReactNode;
+}
+
+const CardInner = ({
+  title,
+  icon,
+  color,
+  horizontal,
+  img,
+  cta,
+  href,
+  children,
+}: CardProps) => (
+  <div
+    className={cn(
+      "group/card rounded-xl border border-border bg-card p-4 transition-colors",
+      href && "hover:border-primary/30 hover:bg-accent/50",
+      horizontal && "flex items-start gap-4"
+    )}
+  >
+    {img && !horizontal ? (
+      <div className="relative mb-3 aspect-video overflow-hidden rounded-lg">
+        <Image
+          alt={title ?? ""}
+          className="object-cover"
+          fill
+          sizes="(max-width: 768px) 100vw, 50vw"
+          src={img}
+          unoptimized
+        />
+      </div>
+    ) : null}
+    {icon ? (
+      <div
+        className="mb-3 flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground"
+        style={color ? { color } : undefined}
+      >
+        {icon}
+      </div>
+    ) : null}
+    <div className="min-w-0 flex-1">
+      {title ? (
+        <div className="mb-1 font-medium text-foreground">{title}</div>
+      ) : null}
+      {children ? (
+        <div className="text-sm text-muted-foreground [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+          {children}
+        </div>
+      ) : null}
+      {cta ? (
+        <div className="mt-2 text-sm font-medium text-primary">{cta}</div>
+      ) : null}
+    </div>
+    {href ? (
+      <svg
+        aria-hidden
+        className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-hover/card:translate-x-0.5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M5 12h14M12 5l7 7-7 7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    ) : null}
+  </div>
+);
+
+export const Card = (props: CardProps) => {
+  if (props.href) {
+    const isExternal = props.href.startsWith("http");
+    if (isExternal) {
+      return (
+        <a href={props.href} rel="noopener noreferrer" target="_blank">
+          <CardInner {...props} />
+        </a>
+      );
+    }
+    return (
+      <Link href={props.href}>
+        <CardInner {...props} />
+      </Link>
+    );
+  }
+  return <CardInner {...props} />;
+};

package/docs/components/mdx/code-block.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { CheckIcon, ClipboardIcon } from "blode-icons-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+import { getTextContent } from "./get-text-content";
+
+export const CodeBlock = ({
+  children,
+  className,
+  style,
+  tabIndex,
+  ...props
+}: ComponentPropsWithoutRef<"pre"> & {
+  children: ReactNode;
+}) => {
+  const [copied, setCopied] = useState(false);
+  const code = useMemo(() => getTextContent(children), [children]);
+
+  useEffect(() => {
+    if (copied) {
+      const timer = setTimeout(() => setCopied(false), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [copied]);
+
+  const handleCopy = useCallback(async () => {
+    if (!code) {
+      return;
+    }
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+  }, [code]);
+
+  const preStyle = style ? { ...style } : undefined;
+  if (preStyle) {
+    delete preStyle.backgroundColor;
+  }
+
+  return (
+    <figure data-rehype-pretty-code-figure="">
+      <pre
+        className={cn(
+          "no-scrollbar min-w-0 overflow-x-auto overflow-y-auto overscroll-y-auto overscroll-x-contain px-4 py-3.5 outline-none has-[[data-slot=tabs]]:p-0 has-[[data-highlighted-line]]:px-0 has-[[data-line-numbers]]:px-0",
+          className
+        )}
+        style={preStyle}
+        tabIndex={tabIndex ?? 0}
+        {...props}
+      >
+        <Button
+          className="absolute top-3 right-2 z-10 size-7 bg-code hover:opacity-100 focus-visible:opacity-100"
+          data-copied={copied}
+          data-slot="copy-button"
+          onClick={handleCopy}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <span className="sr-only">{copied ? "Copied" : "Copy"}</span>
+          {copied ? (
+            <CheckIcon aria-hidden="true" />
+          ) : (
+            <ClipboardIcon aria-hidden="true" />
+          )}
+        </Button>
+        {children}
+      </pre>
+    </figure>
+  );
+};