hd-garden 0.8.0 → 0.8.2

package/app/components/garden/GardenBlock.tsx

@@ -16,6 +16,7 @@ import {
   GardenUnknown,
 } from "./blocks";
 import { GardenFile } from "./GardenFile";
+import { GardenChoice, GardenList, GardenRelations } from "./patterns";
 
 export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
   const lang = useUiLang();
@@ -45,6 +46,12 @@ export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
     case "file":
       // Post bodies render file cards on the server (MarkdownArticle); this path has no Markdown preview.
       return <GardenFile props={props} lang={lang} />;
+    case "relations":
+      return <GardenRelations props={props} />;
+    case "list":
+      return <GardenList props={props} />;
+    case "choice":
+      return <GardenChoice props={props} />;
     default:
       return <GardenUnknown name={String(block.name)} />;
   }

package/app/components/garden/GardenFile.tsx

@@ -1,5 +1,5 @@
 // Server component: the card for `garden file`. Only the 预览 control is a client island.
-import { ui, type UiLang } from "../../lib/i18n";
+import { siteLang, ui, type UiLang } from "../../lib/i18n";
 import { blockFiles, fileMeta } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph, safeFileHref } from "./file-icons";
 import { FilePreview, type PreviewFile } from "./FilePreview";
@@ -22,7 +22,7 @@ const PREVIEWS = new Set(["md", "html", "pdf"]);
 
 export function GardenFile({ props, lang }: { props: Record<string, unknown>; lang?: UiLang }) {
   const t = ui(lang);
-  const block = blockFiles(props) as { layout?: string; title?: string; files: FileEntry[] };
+  const block = blockFiles(props, lang ?? siteLang) as { layout?: string; title?: string; files: FileEntry[] };
   const files = block.files.filter((file) => safeFileHref(file.url));
   if (!files.length) return null;
   const group = block.layout === "group";

package/app/components/garden/RefDemo.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { Children, isValidElement, useEffect, useRef, useState, type ReactNode } from "react";
+
+const LABELS = {
+  zh: { preview: "效果", code: "代码", tabs: "示例视图" },
+  en: { preview: "Preview", code: "Code", tabs: "Example view" },
+} as const;
+
+// Examples on screen right now; while any is visible on a narrow screen the
+// floating contents button steps aside so it never covers code.
+const visible = new Set<Element>();
+const sync = () => document.documentElement.classList.toggle("ref-demo-in", visible.size > 0);
+
+/** Code on the left and the real block on the right; tabs below 1024px. */
+export function RefDemo({ children, lang = "zh", name }: { children?: ReactNode; lang?: "zh" | "en"; name?: string }) {
+  const t = LABELS[lang];
+  const [tab, setTab] = useState<"v" | "c">("v");
+  const ref = useRef<HTMLDivElement>(null);
+  const [code, preview] = Children.toArray(children).filter(isValidElement);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) visible.add(entry.target);
+        else visible.delete(entry.target);
+      }
+      sync();
+    });
+    io.observe(el);
+    return () => {
+      io.disconnect();
+      visible.delete(el);
+      sync();
+    };
+  }, []);
+
+  const tabButton = (id: "v" | "c", label: string) => (
+    <button type="button" role="tab" aria-selected={tab === id} data-t={id} onClick={() => setTab(id)}>
+      {label}
+    </button>
+  );
+
+  return (
+    <div className="ref-demo" ref={ref} data-tab={tab} data-name={name}>
+      <div className="ref-tabs" role="tablist" aria-label={t.tabs}>
+        {tabButton("v", t.preview)}
+        {tabButton("c", t.code)}
+      </div>
+      <div className="ref-pane" data-p="c" data-off={tab !== "c" ? "" : undefined}>
+        <p className="ref-pane-h">{t.code}</p>
+        {code}
+      </div>
+      <div className="ref-pane" data-p="v" data-off={tab !== "v" ? "" : undefined}>
+        <p className="ref-pane-h">{t.preview}</p>
+        {preview}
+      </div>
+    </div>
+  );
+}

package/app/components/garden/blocks.tsx

@@ -10,6 +10,15 @@ import { compileUiBlock } from "../../../ui/core/compile.mjs";
 import { splitCompareLine } from "../../../ui/garden/compare-line.mjs";
 import { RuntimeLangProvider, UiErrorCard, UiFigure, type Diagnostic, type UiPayload } from "../../../ui/react";
 import { FullscreenFrame, SandboxFrame } from "./chrome";
+import { SourceMark, VerdictIcon } from "./patterns";
+
+const BASE_PATH = (process.env.NEXT_PUBLIC_BASE_PATH ?? "").replace(/\/+$/u, "");
+
+/** A `/public` path (`/images/a.svg`) gets the site's basePath in front. */
+function publicSrc(src: string) {
+  if (!BASE_PATH || !src.startsWith("/") || src.startsWith("//") || src.startsWith(`${BASE_PATH}/`)) return src;
+  return `${BASE_PATH}${src}`;
+}
 
 function Rich({ text }: { text: string }) {
   return (
@@ -33,15 +42,16 @@ function SourceChip({ source }: { source: unknown }) {
     if (item && typeof item === "object" && "url" in item) {
       const url = String((item as { url?: unknown }).url ?? "");
       const site = String((item as { site?: unknown }).site ?? hostOf(url));
-      return { url, site };
+      const icon = (item as { icon?: unknown }).icon;
+      return { url, site, icon: typeof icon === "string" ? icon : undefined };
     }
     return null;
-  }).filter((item): item is { url: string; site: string } => Boolean(item?.url));
+  }).filter((item): item is { url: string; site: string; icon?: string } => Boolean(item?.url));
   if (!list.length) return null;
   return (
-    <span className="g-srcs">
+    <span className={list.length > 1 ? "g-srcs is-multi" : "g-srcs"}>
       <a className="g-src ext" href={list[0].url} target="_blank" rel="noopener noreferrer">
-        <span className="g-src-ic" aria-hidden="true">{[...list[0].site][0] || "·"}</span>
+        <SourceMark href={list[0].url} icon={list[0].icon} />
         <span>{list[0].site}</span>
       </a>
       {list.length > 1 ? <span className="g-src-more">+{list.length - 1}</span> : null}
@@ -54,22 +64,36 @@ function itemsOf(props: Record<string, unknown>) {
 }
 
 export function GardenCard({ props }: { props: Record<string, unknown> }) {
+  if (Array.isArray(props.cards)) {
+    return (
+      <div className="g-entities">
+        {props.cards.map((card, index) => (
+          <GardenCardItem key={index} props={(card ?? {}) as Record<string, unknown>} row />
+        ))}
+      </div>
+    );
+  }
+  return <GardenCardItem props={props} />;
+}
+
+function GardenCardItem({ props, row = false }: { props: Record<string, unknown>; row?: boolean }) {
   const url = typeof props.url === "string" ? props.url : "";
   const title = String(props.title ?? url);
   const description = typeof props.description === "string" ? props.description : typeof props.text === "string" ? props.text : "";
   const points = Array.isArray(props.points) ? props.points : Array.isArray(props.items) ? props.items : [];
   return (
-    <article className="g-entity">
+    <article className={`g-entity${row ? " g-entity-row" : ""}`}>
       {typeof props.image === "string" ? (
         <div className="g-entity-img">
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={props.image} alt={String(props.alt ?? title)} />
+          <img src={publicSrc(props.image)} alt={String(props.alt ?? title)} />
         </div>
       ) : null}
       <div className="g-entity-b">
         <h4 className="g-entity-t">{url ? <a className="ext" href={url} target="_blank" rel="noopener noreferrer"><Rich text={title} /></a> : <Rich text={title} />}</h4>
         {typeof props.meta === "string" ? <p className="g-entity-m"><Rich text={props.meta} /></p> : null}
         {description ? <p><Rich text={description} /> <SourceChip source={props.source} /></p> : null}
+        {typeof props.takeaway === "string" ? <p className="g-entity-k"><Rich text={props.takeaway} /></p> : null}
       </div>
       {points.length ? (
         <ol className="g-entity-list">
@@ -119,8 +143,31 @@ function CompareLine({ line }: { line: string }) {
   );
 }
 
+function verdictOf(entry: unknown) {
+  if (!entry || typeof entry !== "object") return "";
+  const value = String((entry as Record<string, unknown>).verdict ?? "").trim().toLowerCase();
+  return value === "good" || value === "bad" ? value : "";
+}
+
 export function GardenCompare({ props }: { props: Record<string, unknown> }) {
   const items = Array.isArray(props.items) ? props.items as unknown[] : [];
+  if (items.some((entry) => verdictOf(entry))) {
+    return (
+      <div className="g-verdicts" role="group">
+        {items.map((entry, index) => {
+          const item = (entry && typeof entry === "object" ? entry : { text: String(entry ?? "") }) as Record<string, unknown>;
+          const verdict = verdictOf(item);
+          const texts = item.text == null ? [] : Array.isArray(item.text) ? item.text : [item.text];
+          return (
+            <section className={`g-verdict${verdict ? ` is-${verdict}` : ""}`} key={index}>
+              <h4><VerdictIcon verdict={verdict} /><Rich text={String(item.title ?? "")} /></h4>
+              {texts.map((paragraph, paragraphIndex) => <p key={paragraphIndex}><Rich text={String(paragraph)} /></p>)}
+            </section>
+          );
+        })}
+      </div>
+    );
+  }
   return (
     <div className="g-compare" role="group">
       {items.map((entry, index) => {
@@ -128,7 +175,8 @@ export function GardenCompare({ props }: { props: Record<string, unknown> }) {
           return <section className="g-cmp" key={index}><CompareLine line={String(entry)} /></section>;
         }
         if (!entry || typeof entry !== "object") return null;
-        const { title, text, ...rest } = entry as Record<string, unknown>;
+        const { title, text, verdict: _verdict, ...rest } = entry as Record<string, unknown>;
+        void _verdict;
         const texts = text == null ? [] : Array.isArray(text) ? text : [text];
         return (
           <section className="g-cmp" key={index}>
@@ -316,7 +364,7 @@ export function GardenFigure({ props, children }: { props: Record<string, unknow
       {typeof props.image === "string" ? (
         <div className="fig-card">
           {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={props.image} alt={String(props.alt ?? props.caption ?? "")} />
+          <img src={publicSrc(props.image)} alt={String(props.alt ?? props.caption ?? "")} />
         </div>
       ) : null}
       {typeof props.mermaid === "string" ? <pre className="code"><code>{props.mermaid}</code></pre> : null}