hd-garden 0.3.0

package/app/components/TableOfContents.tsx

@@ -0,0 +1,433 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { List, X } from "@phosphor-icons/react";
+
+type Heading = { depth: number; text: string; id: string };
+
+type TocNode = Heading & { children: TocNode[] };
+
+const nestHeadings = (headings: Heading[]) => {
+  const roots: TocNode[] = [];
+  const stack: TocNode[] = [];
+
+  for (const heading of headings) {
+    const node: TocNode = { ...heading, children: [] };
+    while (stack.at(-1) && stack.at(-1)!.depth >= heading.depth) {
+      stack.pop();
+    }
+
+    const parent = stack.at(-1);
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+    stack.push(node);
+  }
+
+  return roots;
+};
+
+const getCssScrollPaddingTop = () => {
+  const value = window.getComputedStyle(document.documentElement).scrollPaddingTop;
+  const offset = Number.parseFloat(value);
+  return Number.isFinite(offset) ? offset : 0;
+};
+
+const getScrollPaddingTop = () => {
+  const header = document.querySelector(".site-header");
+  const headerBottom = header?.getBoundingClientRect().bottom ?? 0;
+  if (headerBottom > 8) return headerBottom + 8;
+  return Math.min(24, getCssScrollPaddingTop());
+};
+
+const getReadingProbe = () => {
+  const anchorStop = getScrollPaddingTop() + 1;
+  return Math.max(
+    anchorStop,
+    Math.min(window.innerHeight * 0.45, anchorStop + 240),
+  );
+};
+
+const getHashHeadingId = () => {
+  const hash = window.location.hash.slice(1);
+  try {
+    return decodeURIComponent(hash);
+  } catch {
+    return hash;
+  }
+};
+
+const isLaidOutImage = (image: HTMLImageElement) =>
+  image.complete && image.naturalHeight > 0;
+
+const layoutRootFor = (target: Element) =>
+  target.closest("article.post-article, article.series-article, main") ?? document.body;
+
+const precedingImages = (target: Element) =>
+  Array.from(layoutRootFor(target).querySelectorAll("img")).filter((image) =>
+    Boolean(
+      image.compareDocumentPosition(target) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ),
+  );
+
+const wakeLazyImage = (image: HTMLImageElement) => {
+  if (isLaidOutImage(image)) return;
+  image.loading = "eager";
+};
+
+const prefetchHeadingLayout = (id: string) => {
+  const target = document.getElementById(id);
+  if (!target) return;
+  for (const image of precedingImages(target)) wakeLazyImage(image);
+};
+
+const scrollToHeading = (id: string) => {
+  const target = document.getElementById(id);
+  if (!target) return;
+
+  const top = Math.max(
+    0,
+    window.scrollY + target.getBoundingClientRect().top - getScrollPaddingTop(),
+  );
+  if (Math.abs(top - window.scrollY) <= 1) return;
+
+  // `scrollBy({ behavior })` can still animate or stack with later
+  // corrections and send the heading off-screen. Write scrollTop after
+  // forcing `scroll-behavior: auto`.
+  const html = document.documentElement;
+  const previousBehavior = html.style.scrollBehavior;
+  html.style.scrollBehavior = "auto";
+  html.scrollTop = top;
+  html.style.scrollBehavior = previousBehavior;
+};
+
+export function TableOfContents({
+  headings,
+  label = "本篇目录",
+}: {
+  headings: Heading[];
+  label?: string;
+}) {
+  const [activeId, setActiveId] = useState(headings[0]?.id);
+  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const panelId = useId();
+  const listId = useId();
+  const listRef = useRef<HTMLOListElement>(null);
+  const mobileTriggerRef = useRef<HTMLButtonElement>(null);
+  const mobileCloseRef = useRef<HTMLButtonElement>(null);
+  const restoreMobileTriggerFocusRef = useRef(false);
+  const anchorCleanupRef = useRef<(() => void) | undefined>(undefined);
+  const tree = nestHeadings(headings);
+
+  const closeMobileToc = useCallback((restoreFocus = false) => {
+    restoreMobileTriggerFocusRef.current = restoreFocus;
+    setMobileOpen(false);
+  }, []);
+
+  const alignHeadingToAnchor = useCallback((id: string) => {
+    scrollToHeading(id);
+  }, []);
+
+  const trackAnchorLayout = useCallback(
+    (id: string) => {
+      anchorCleanupRef.current?.();
+      const target = document.getElementById(id);
+      if (!target) return;
+
+      let frame = 0;
+      let timeout = 0;
+      const layoutRoot = layoutRootFor(target);
+      const pendingImages = precedingImages(target).filter(
+        (image) => !isLaidOutImage(image),
+      );
+      for (const image of pendingImages) wakeLazyImage(image);
+
+      const scheduleAlignment = () => {
+        if (frame) window.cancelAnimationFrame(frame);
+        frame = window.requestAnimationFrame(() => {
+          frame = 0;
+          if (getHashHeadingId() === id) {
+            alignHeadingToAnchor(id);
+          }
+        });
+      };
+      function realign() {
+        scheduleAlignment();
+      }
+      const resizeObserver = new ResizeObserver(realign);
+
+      const cleanup = () => {
+        if (frame) window.cancelAnimationFrame(frame);
+        if (timeout) window.clearTimeout(timeout);
+        resizeObserver.disconnect();
+        for (const image of pendingImages) {
+          image.removeEventListener("load", realign);
+          image.removeEventListener("error", realign);
+        }
+        window.removeEventListener("wheel", cleanup);
+        window.removeEventListener("touchstart", cleanup);
+        window.removeEventListener("pointerdown", cleanup);
+        window.removeEventListener("keydown", cleanup);
+        if (anchorCleanupRef.current === cleanup) {
+          anchorCleanupRef.current = undefined;
+        }
+      };
+
+      for (const image of pendingImages) {
+        image.addEventListener("load", realign);
+        image.addEventListener("error", realign);
+      }
+      window.addEventListener("wheel", cleanup, { passive: true });
+      window.addEventListener("touchstart", cleanup, { passive: true });
+      window.addEventListener("pointerdown", cleanup, { passive: true });
+      window.addEventListener("keydown", cleanup);
+      timeout = window.setTimeout(cleanup, 8_000);
+      anchorCleanupRef.current = cleanup;
+      scheduleAlignment();
+      window.requestAnimationFrame(() => {
+        if (anchorCleanupRef.current === cleanup) {
+          resizeObserver.observe(layoutRoot);
+        }
+      });
+    },
+    [alignHeadingToAnchor],
+  );
+
+  useEffect(() => {
+    let frame = 0;
+    const updateActiveHeading = () => {
+      frame = 0;
+      const readingProbe = getReadingProbe();
+      const visibleHeadings = headings
+        .map((heading) => ({
+          id: heading.id,
+          top: document.getElementById(heading.id)?.getBoundingClientRect().top,
+        }))
+        .filter((heading): heading is { id: string; top: number } => heading.top !== undefined);
+      const reachedPageEnd =
+        window.scrollY + window.innerHeight >=
+        document.documentElement.scrollHeight - 2;
+      const current = reachedPageEnd
+        ? visibleHeadings.at(-1)?.id
+        : visibleHeadings.filter((heading) => heading.top <= readingProbe).at(-1)
+            ?.id ?? visibleHeadings[0]?.id;
+
+      if (current) setActiveId((previous) => (previous === current ? previous : current));
+    };
+    const scheduleUpdate = () => {
+      if (!frame) frame = window.requestAnimationFrame(updateActiveHeading);
+    };
+
+    updateActiveHeading();
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    return () => {
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, [headings]);
+
+  useEffect(() => {
+    history.scrollRestoration = "manual";
+    const syncHashAnchor = () => {
+      const id = getHashHeadingId();
+      if (!headings.some((heading) => heading.id === id)) return;
+      setActiveId(id);
+      trackAnchorLayout(id);
+    };
+
+    syncHashAnchor();
+    window.addEventListener("hashchange", syncHashAnchor);
+    return () => {
+      window.removeEventListener("hashchange", syncHashAnchor);
+      anchorCleanupRef.current?.();
+    };
+  }, [headings, trackAnchorLayout]);
+
+  useEffect(() => {
+    if (mobileOpen || !restoreMobileTriggerFocusRef.current) return;
+    restoreMobileTriggerFocusRef.current = false;
+    mobileTriggerRef.current?.focus({ preventScroll: true });
+  }, [mobileOpen]);
+
+  useEffect(() => {
+    if (!mobileOpen) return;
+    const mobileQuery = window.matchMedia("(max-width: 900px)");
+    if (!mobileQuery.matches) return;
+
+    const previousOverflow = document.body.style.overflow;
+    mobileCloseRef.current?.focus({ preventScroll: true });
+    const focusFrame = window.requestAnimationFrame(() => {
+      mobileCloseRef.current?.focus({ preventScroll: true });
+    });
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") closeMobileToc(true);
+    };
+    const handleViewportChange = () => {
+      if (!mobileQuery.matches) setMobileOpen(false);
+    };
+
+    document.body.style.overflow = "hidden";
+    window.addEventListener("keydown", handleKeyDown);
+    mobileQuery.addEventListener("change", handleViewportChange);
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", handleKeyDown);
+      mobileQuery.removeEventListener("change", handleViewportChange);
+    };
+  }, [closeMobileToc, mobileOpen]);
+
+  useEffect(() => {
+    if (!activeId) return;
+    if (!mobileOpen && window.matchMedia("(max-width: 900px)").matches) return;
+    const list = listRef.current;
+    const activeItem = list?.querySelector<HTMLElement>(
+      '[aria-current="location"]',
+    );
+    if (!list || !activeItem) return;
+
+    const edge = 10;
+    const listBounds = list.getBoundingClientRect();
+    const itemBounds = activeItem.getBoundingClientRect();
+    let nextTop: number | undefined;
+
+    if (itemBounds.top < listBounds.top + edge) {
+      nextTop = Math.max(0, list.scrollTop + itemBounds.top - listBounds.top - edge);
+    } else if (itemBounds.bottom > listBounds.bottom - edge) {
+      nextTop = list.scrollTop + itemBounds.bottom - listBounds.bottom + edge;
+    }
+
+    if (nextTop !== undefined) {
+      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      list.scrollTo({ top: nextTop, behavior: reduceMotion ? "auto" : "smooth" });
+    }
+  }, [activeId, collapsedSections, mobileOpen]);
+
+  const toggleSection = (id: string) => {
+    setCollapsedSections((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const navigateToHeading = (event: MouseEvent<HTMLAnchorElement>, id: string) => {
+    event.preventDefault();
+    const hash = encodeURIComponent(id);
+    window.history.pushState(
+      null,
+      "",
+      `${window.location.pathname}${window.location.search}#${hash}`,
+    );
+    setActiveId(id);
+    closeMobileToc();
+    trackAnchorLayout(id);
+  };
+
+  const renderNode = (node: TocNode, path: number[]): ReactNode => {
+    const collapsed = collapsedSections.has(node.id);
+    const childListId = `${listId}-${path.join("-")}`;
+
+    return (
+      <li
+        key={node.id}
+        className={`toc-section toc-depth-${node.depth}${activeId === node.id ? " active" : ""}`}
+      >
+        <div className="toc-item-row">
+          <a
+            href={`#${node.id}`}
+            onClick={(event) => navigateToHeading(event, node.id)}
+            onPointerEnter={() => prefetchHeadingLayout(node.id)}
+            onFocus={() => prefetchHeadingLayout(node.id)}
+            aria-current={activeId === node.id ? "location" : undefined}
+          >
+            {node.text}
+          </a>
+          {node.children.length > 0 ? (
+            <button
+              className="toc-section-toggle"
+              type="button"
+              aria-controls={childListId}
+              aria-expanded={!collapsed}
+              aria-label={`${collapsed ? "展开" : "收起"}「${node.text}」的子目录`}
+              onClick={() => toggleSection(node.id)}
+            >
+              <span aria-hidden="true">{collapsed ? "+" : "−"}</span>
+            </button>
+          ) : null}
+        </div>
+        {node.children.length > 0 ? (
+          <ol id={childListId} className="toc-sublist" hidden={collapsed}>
+            {node.children.map((child, index) => renderNode(child, [...path, index]))}
+          </ol>
+        ) : null}
+      </li>
+    );
+  };
+
+  if (!headings.length) return null;
+
+  const activeHeading = headings.find((heading) => heading.id === activeId);
+
+  return (
+    <>
+      <button
+        ref={mobileTriggerRef}
+        className="toc-mobile-trigger"
+        type="button"
+        aria-controls={panelId}
+        aria-expanded={mobileOpen}
+        aria-label={`打开${label}${activeHeading ? `，当前章节：${activeHeading.text}` : ""}`}
+        tabIndex={mobileOpen ? -1 : 0}
+        data-mobile-open={mobileOpen}
+        onClick={() => setMobileOpen(true)}
+      >
+        <List size={17} weight="bold" aria-hidden="true" />
+        <span>目录</span>
+      </button>
+      <button
+        className="toc-mobile-backdrop"
+        type="button"
+        aria-label={`关闭${label}`}
+        tabIndex={mobileOpen ? 0 : -1}
+        data-mobile-open={mobileOpen}
+        onClick={() => closeMobileToc(true)}
+      />
+      <aside
+        className="toc"
+        id={panelId}
+        aria-label={label}
+        data-mobile-open={mobileOpen}
+      >
+        <div className="toc-header">
+          <p>{label}</p>
+          <button
+            ref={mobileCloseRef}
+            className="toc-mobile-close"
+            type="button"
+            aria-label={`关闭${label}`}
+            onClick={() => closeMobileToc(true)}
+          >
+            <X size={18} aria-hidden="true" />
+          </button>
+        </div>
+        <ol id={listId} ref={listRef} className="toc-list">
+          {tree.map((node, index) => renderNode(node, [index]))}
+        </ol>
+      </aside>
+    </>
+  );
+}

package/app/components/ThoughtCard.tsx

@@ -0,0 +1,242 @@
+import Link from "next/link";
+import {
+  ArrowUpRight,
+  ImageSquare,
+  LinkSimple,
+  MusicNotes,
+  SquaresFour,
+  VideoCamera,
+} from "@phosphor-icons/react/ssr";
+import {
+  type ContentEntry,
+  type MediaItem,
+  formatDate,
+} from "../lib/content";
+import { githubUrl, siteConfig } from "../site.config";
+import { MarkdownArticle } from "./MarkdownArticle";
+
+const icons = {
+  image: ImageSquare,
+  audio: MusicNotes,
+  video: VideoCamera,
+  link: LinkSimple,
+  text: LinkSimple,
+};
+
+type MediaGroup =
+  | { type: "images"; items: MediaItem[] }
+  | { type: "audio" | "video" | "link"; item: MediaItem };
+
+function groupMedia(items: MediaItem[]) {
+  return items.reduce<MediaGroup[]>((groups, item) => {
+    if (item.type === "image") {
+      const previous = groups.at(-1);
+      if (previous?.type === "images") {
+        previous.items.push(item);
+      } else {
+        groups.push({ type: "images", items: [item] });
+      }
+      return groups;
+    }
+    groups.push({ type: item.type, item });
+    return groups;
+  }, []);
+}
+
+function videoMime(src: string, explicit?: string) {
+  if (explicit) return explicit;
+  const extension = new URL(src, "https://local.invalid").pathname
+    .split(".")
+    .at(-1)
+    ?.toLowerCase();
+  if (extension === "webm") return "video/webm";
+  if (extension === "ogg" || extension === "ogv") return "video/ogg";
+  return "video/mp4";
+}
+
+export function ThoughtCard({
+  thought,
+  showPermalink = true,
+}: {
+  thought: ContentEntry;
+  showPermalink?: boolean;
+}) {
+  const media = Array.isArray(thought.media) ? thought.media : [];
+  const isMixed = media.length > 1;
+  const Icon = isMixed ? SquaresFour : icons[thought.mediaType ?? "text"];
+  const mediaGroups = groupMedia(media);
+
+  return (
+    <article id={thought.slug} className="thought-card h-entry">
+      <Link className="u-url sr-only" href={`/thoughts/${thought.slug}`}>
+        {thought.title} 永久链接
+      </Link>
+      <a
+        className="p-author h-card sr-only"
+        href={githubUrl}
+        rel="author"
+      >
+        {siteConfig.author.name}
+      </a>
+      <header>
+        <span className="thought-kind">
+          <Icon size={16} />
+          {isMixed
+            ? `混合记录 · ${media.length} 个附件`
+            : thought.mediaType === "image"
+            ? "一张照片"
+            : thought.mediaType === "audio"
+              ? "一段声音"
+              : thought.mediaType === "video"
+                ? "一段影像"
+                : thought.mediaType === "link"
+                  ? "一个链接"
+                  : "随想"}
+        </span>
+        <time className="dt-published" dateTime={thought.date}>
+          {formatDate(thought.date, true)}
+        </time>
+      </header>
+
+      <h2 className="p-name">{thought.title}</h2>
+      <div className="e-content">
+        <MarkdownArticle content={thought.content} />
+      </div>
+
+      {mediaGroups.length > 0 && (
+        <div className="thought-media-stack">
+          {mediaGroups.map((group, groupIndex) => {
+            if (group.type === "images") {
+              return (
+                <div
+                  className={`thought-gallery thought-gallery-${Math.min(group.items.length, 3)}`}
+                  key={`images-${groupIndex}`}
+                  aria-label={`${group.items.length} 张照片`}
+                >
+                  {group.items.map((item, index) => (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      key={`${item.src}-${index}`}
+                      className="thought-image u-photo"
+                      src={item.src}
+                      alt={item.alt ?? `${thought.title} · 照片 ${index + 1}`}
+                      loading="lazy"
+                    />
+                  ))}
+                </div>
+              );
+            }
+            if (group.type === "audio") {
+              return (
+                <div className="audio-embed" key={`${group.item.src}-${groupIndex}`}>
+                  <MusicNotes size={28} />
+                  <div>
+                    <strong>{group.item.title ?? `当前播放 · ${thought.title}`}</strong>
+                    <audio
+                      className="u-audio"
+                      controls
+                      preload="none"
+                      src={group.item.src}
+                    >
+                      你的浏览器不支持音频播放。
+                    </audio>
+                  </div>
+                </div>
+              );
+            }
+            if (group.type === "video") {
+              return (
+                <video
+                  className="thought-video u-video"
+                  controls
+                  preload="metadata"
+                  poster={group.item.poster}
+                  key={`${group.item.src}-${groupIndex}`}
+                >
+                  <source
+                    src={group.item.src}
+                    type={videoMime(group.item.src, group.item.mime)}
+                  />
+                </video>
+              );
+            }
+            return (
+              <Link
+                className="link-embed u-bookmark-of"
+                href={group.item.src}
+                target="_blank"
+                rel="noopener noreferrer"
+                key={`${group.item.src}-${groupIndex}`}
+              >
+                <span>
+                  <small>{new URL(group.item.src).hostname}</small>
+                  <strong>{group.item.title ?? group.item.src}</strong>
+                  {group.item.description && <p>{group.item.description}</p>}
+                </span>
+                <ArrowUpRight size={22} />
+              </Link>
+            );
+          })}
+        </div>
+      )}
+
+      {!Array.isArray(thought.media) && thought.mediaType === "image" && thought.media && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          className="thought-image u-photo"
+          src={thought.media}
+          alt={thought.mediaAlt ?? thought.title}
+          loading="lazy"
+        />
+      )}
+      {!Array.isArray(thought.media) && thought.mediaType === "audio" && thought.media && (
+        <div className="audio-embed">
+          <MusicNotes size={28} />
+          <div>
+            <strong>当前播放 · {thought.title}</strong>
+            <audio
+              className="u-audio"
+              controls
+              preload="none"
+              src={thought.media}
+            >
+              你的浏览器不支持音频播放。
+            </audio>
+          </div>
+        </div>
+      )}
+      {!Array.isArray(thought.media) && thought.mediaType === "video" && thought.media && (
+        <video
+          className="thought-video u-video"
+          controls
+          preload="metadata"
+          poster={thought.poster}
+        >
+          <source src={thought.media} type={videoMime(thought.media)} />
+        </video>
+      )}
+      {!Array.isArray(thought.media) && thought.mediaType === "link" && thought.media && (
+        <Link
+          className="link-embed u-bookmark-of"
+          href={thought.media}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span>
+            <small>{new URL(thought.media).hostname}</small>
+            <strong>{thought.linkTitle}</strong>
+            <p>{thought.linkDescription}</p>
+          </span>
+          <ArrowUpRight size={22} />
+        </Link>
+      )}
+
+      {showPermalink && (
+        <Link className="thought-permalink" href={`/thoughts/${thought.slug}`}>
+          永久链接
+          <ArrowUpRight size={15} />
+        </Link>
+      )}
+    </article>
+  );
+}