@goodfellow-cms/registry 0.7.0 → 0.8.0

package/README.md

@@ -1,6 +1,6 @@
 # @goodfellow-cms/registry
 
-Goodfellow's block registry: blocks built with [shadcn/ui](https://ui.shadcn.com), which a site's admins add and remove on the admin panel's **Blocks** screen, with no developer. It's also the reference for anyone publishing a registry of Goodfellow blocks built with another component library.
+Goodfellow's block registry: blocks built with [shadcn/ui](https://ui.shadcn.com), and a few built with Tailwind alone for some sites only, which a site's admins add and remove on the admin panel's **Blocks** screen, with no developer. It's also the reference for anyone publishing a registry of Goodfellow blocks built with another component library.
 
 | Block | Category | Recommended |
 |---|---|---|
@@ -12,7 +12,19 @@ Goodfellow's block registry: blocks built with [shadcn/ui](https://ui.shadcn.com
 | Pricing table | Page sections | |
 | FAQ | Interactive | Yes |
 | Tabs | Interactive | Yes |
+| News feed | Page sections | |
+| Map | Page sections | |
+| Social links | Page sections | |
+| Panel | Page sections | |
 | Image carousel | Interactive | |
+| Slideshow with quick links | Interactive | |
+| Content with section links | Navigation | |
+| People | Page sections | |
+| Logos | Page sections | |
+| Numbers | Page sections | |
+| Timeline | Page sections | |
+| Countdown | Interactive | |
+| Comments | Interactive | |
 | Custom HTML | Advanced | |
 
 New sites made with `create-goodfellow` start with the recommended blocks unless the admin chooses "Built-in blocks only".
@@ -87,6 +99,7 @@ Registry blocks follow the same rules as any Goodfellow block (see [AGENTS.md](h
 - **One Client Component per interactive part.** Sites built with `goodfellow build` run each Client Component a block renders as its own small React app (an island), and islands don't share React context. Components whose parts talk to each other through context, as Radix's `Accordion`, `AccordionItem` and `AccordionContent` do, must all be put together inside one `"use client"` file, which the block renders with its content as props. See `site/blocks/installed/shadcn-faq/` here.
 - **Keep content in the page.** Hidden content, such as closed answers or other tabs, should still be in the HTML (Radix's `forceMount`, hidden with CSS), so search engines and visitors without JavaScript see it.
 - Prefer HTML and CSS where they're enough: a `<details>` element rather than a Client Component, since a page with a Client Component loads React.
+- **Say when a Client Component works with Preact**, with `export const worksWithPreact = true` in its `"use client"` file, once you've tried it there. Sites whose Client Components all say so run them with Preact's `preact/compat` instead of React, about a tenth of its size; one that doesn't keeps a site on React. Every interactive block here says so, and Goodfellow's tests try each with Preact.
 
 ### Letting a site use it
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodfellow-cms/registry",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Goodfellow's block registry: blocks built with shadcn/ui, which sites install from the admin panel.",
   "keywords": [
     "goodfellow",
@@ -28,8 +28,8 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@goodfellow-cms/core": "0.7.0",
-    "@goodfellow-cms/react": "0.7.0",
+    "@goodfellow-cms/core": "0.8.0",
+    "@goodfellow-cms/react": "0.8.0",
     "@puckeditor/core": "0.23.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",

package/r/comments.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comments",
+  "type": "registry:block",
+  "title": "Comments",
+  "description": "Comments on the page through Giscus, kept as GitHub Discussions; visitors sign in with GitHub to comment.",
+  "files": [
+    {
+      "path": "blocks/installed/comments/block.tsx",
+      "type": "registry:block",
+      "content": "import {\n  CONSENT_ACCEPT_ATTRIBUTE,\n  CONSENT_CODE_ATTRIBUTE,\n  CONSENT_PLACEHOLDER_ATTRIBUTE,\n  consentSource,\n} from \"@goodfellow-cms/core\";\nimport { classNameField, useParts, useSite, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport type { ReactNode } from \"react\";\nimport { GiscusFrame } from \"./giscus-frame\";\n\nexport interface CommentsProps {\n  heading: string;\n  /**\n   * Giscus's code from giscus.app, which names the repository and the\n   * discussions' category, for comments kept somewhere other than where Site\n   * Settings' Comments says; left empty, the block shows those.\n   */\n  code: string;\n  reactions: boolean;\n  /** Where the box for writing a comment is: above the comments or under them. */\n  input: \"top\" | \"bottom\";\n  className: string;\n}\n\n/** Giscus's script, from its own address, which loads its comments in a frame. */\nexport const GISCUS_SCRIPT = \"https://giscus.app/client.js\";\n\n/** What Giscus needs to know where a site's discussions are. */\nexport interface GiscusSettings {\n  repo: string;\n  repoId: string;\n  category: string;\n  categoryId: string;\n}\n\n/** The repository and category named in Giscus's code, if it names them as Giscus writes them. */\nexport function giscusSettings(code: string): GiscusSettings | undefined {\n  const attribute = (name: string) =>\n    new RegExp(`\\\\sdata-${name}\\\\s*=\\\\s*[\"']([^\"'<>]*)[\"']`, \"i\").exec(code)?.[1]?.replaceAll(\"&amp;\", \"&\").trim();\n  const repo = attribute(\"repo\");\n  const repoId = attribute(\"repo-id\");\n  const category = attribute(\"category\");\n  const categoryId = attribute(\"category-id\");\n  if (!repo || !/^[A-Za-z0-9-]+\\/[A-Za-z0-9._-]+$/.test(repo)) return undefined;\n  if (!repoId || !/^[A-Za-z0-9_-]+$/.test(repoId)) return undefined;\n  if (!categoryId || !/^[A-Za-z0-9_-]+$/.test(categoryId)) return undefined;\n  return { repo, repoId, category: category ?? \"\", categoryId };\n}\n\nconst escapeText = (text: string) =>\n  text.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c] as string);\n\nfunction CommentsView({\n  heading,\n  code,\n  reactions,\n  input,\n  className,\n  puck,\n}: CommentsProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const { settings, adminLink } = useSite();\n  const giscus = giscusSettings(code ?? \"\") ?? (code?.trim() ? undefined : settings.comments);\n  if (!giscus && !puck?.isEditing) return null;\n  // Pages are built on the server: in the browser, it's the editor or a preview, which never load Giscus.\n  const onSite = typeof document === \"undefined\" && !puck?.isEditing;\n  const frameClass = part(\"gf-comments-frame\", \"w-full\");\n  let body: ReactNode;\n  if (!giscus) {\n    const link = code?.trim() ? undefined : adminLink?.(\"comments-settings\");\n    const text = code?.trim()\n      ? \"This isn't Giscus's code. On giscus.app, choose the repository and category, then copy the code at the end of the page.\"\n      : \"Set up comments in Site settings' Comments to show them here.\";\n    body = (\n      <p className=\"rounded-lg bg-muted p-6 text-muted-foreground\">\n        {link ? (\n          <a {...link} className=\"underline underline-offset-2 hover:text-foreground\">\n            {text}\n          </a>\n        ) : (\n          text\n        )}\n      </p>\n    );\n  } else if (!onSite) {\n    body = (\n      <p className=\"rounded-lg bg-muted p-6 text-muted-foreground\">\n        Comments from {giscus.repo}'s discussions show here on the site.\n      </p>\n    );\n  } else {\n    const attributes: Record<string, string> = {\n      \"data-repo\": giscus.repo,\n      \"data-repo-id\": giscus.repoId,\n      \"data-category\": giscus.category,\n      \"data-category-id\": giscus.categoryId,\n      \"data-mapping\": \"pathname\",\n      \"data-strict\": \"1\",\n      \"data-reactions-enabled\": reactions === false ? \"0\" : \"1\",\n      \"data-emit-metadata\": \"0\",\n      \"data-input-position\": input === \"top\" ? \"top\" : \"bottom\",\n      \"data-theme\": settings.theme?.darkMode ? \"preferred_color_scheme\" : \"light\",\n      \"data-lang\": (settings.language ?? \"en\").split(\"-\")[0] ?? \"en\",\n      \"data-loading\": \"lazy\",\n    };\n    const consent = settings.consent;\n    if (consent) {\n      // Held back in a template for the consent script, which runs it where it is once the visitor agrees.\n      const script = `<script src=\"${GISCUS_SCRIPT}\" crossorigin=\"anonymous\" async${Object.entries(attributes)\n        .map(([name, value]) => ` ${name}=\"${escapeText(value)}\"`)\n        .join(\"\")}></script>`;\n      const words = consent.held.replaceAll(\"{site}\", consentSource(GISCUS_SCRIPT));\n      body = (\n        <div\n          // biome-ignore lint/security/noDangerouslySetInnerHtml: Giscus's script with escaped settings, held back until the visitor agrees\n          dangerouslySetInnerHTML={{\n            __html: `<div class=\"giscus ${escapeText(frameClass)}\"></div><template ${CONSENT_CODE_ATTRIBUTE}=\"body\">${script}</template><div class=\"gf-consent-placeholder gf-consent-inline\" ${CONSENT_PLACEHOLDER_ATTRIBUTE}=\"\"><p>${escapeText(words)}</p><button type=\"button\" ${CONSENT_ACCEPT_ATTRIBUTE}=\"content\">${escapeText(consent.show)}</button></div>`,\n          }}\n        />\n      );\n    } else {\n      body = <GiscusFrame script={GISCUS_SCRIPT} attributes={attributes} className={frameClass} />;\n    }\n  }\n  return (\n    <section className={part(\"gf-comments\", \"w-full\", className)}>\n      {heading && (\n        <h2 className={part(\"gf-comments-heading\", \"mb-6 font-heading text-2xl font-semibold\")}>{heading}</h2>\n      )}\n      {body}\n    </section>\n  );\n}\n\n/**\n * Comments on the page, kept as GitHub Discussions in a repository of their\n * own, through Giscus: visitors sign in with GitHub to comment. Where they're\n * kept is Site Settings' Comments (`content/site.json`'s `comments`), unless\n * the block is given Giscus's code for somewhere else.\n * Giscus loads only on the built site, never in the editor or previews, and\n * on a site that asks visitors before loading other sites' content, it waits\n * until they agree.\n */\nconst Comments: ComponentConfig<CommentsProps> = withParts(\n  {\n    label: \"Comments\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      code: {\n        type: \"textarea\",\n        label: \"Giscus's code, for comments kept elsewhere than Site settings says (optional)\",\n      },\n      reactions: {\n        type: \"radio\",\n        label: \"Reactions to the page\",\n        options: [\n          { value: true, label: \"Shown\" },\n          { value: false, label: \"Hidden\" },\n        ],\n      },\n      input: {\n        type: \"radio\",\n        label: \"Box for writing a comment\",\n        options: [\n          { value: \"bottom\", label: \"Under the comments\" },\n          { value: \"top\", label: \"Above the comments\" },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: { heading: \"Comments\", code: \"\", reactions: true, input: \"bottom\", className: \"\" },\n    render: (props) => <CommentsView {...props} />,\n  },\n  {\n    \"gf-comments\": \"Comments\",\n    \"gf-comments-heading\": \"Heading\",\n    \"gf-comments-frame\": \"Comments' frame\",\n  },\n);\n\nexport default withKeywords(Comments, [\"comments\", \"discussion\", \"giscus\", \"replies\", \"feedback\", \"github\"]);\n"
+    },
+    {
+      "path": "blocks/installed/comments/giscus-frame.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport { useEffect, useRef } from \"react\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/**\n * Giscus's comments, loaded once the page has: its script reads its settings\n * from its own attributes and puts the comments in the `.giscus` element.\n * Started again after moving to another page on a Next.js site, which keeps\n * the same document.\n */\nexport function GiscusFrame({\n  script,\n  attributes,\n  className,\n}: {\n  script: string;\n  attributes: Record<string, string>;\n  className: string;\n}) {\n  const box = useRef<HTMLDivElement>(null);\n  const settings = JSON.stringify(attributes);\n  useEffect(() => {\n    const container = box.current;\n    if (!container) return;\n    const element = document.createElement(\"script\");\n    element.src = script;\n    element.async = true;\n    element.crossOrigin = \"anonymous\";\n    for (const [name, value] of Object.entries(JSON.parse(settings) as Record<string, string>)) {\n      element.setAttribute(name, value);\n    }\n    container.after(element);\n    return () => {\n      element.remove();\n      container.replaceChildren();\n    };\n  }, [script, settings]);\n  return <div ref={box} className={`giscus ${className}`.trim()} />;\n}\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Interactive",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}

package/r/countdown.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "countdown",
+  "type": "registry:block",
+  "title": "Countdown",
+  "description": "The days, hours, minutes and seconds until a moment, in the site's time zone.",
+  "files": [
+    {
+      "path": "blocks/installed/countdown/block.tsx",
+      "type": "registry:block",
+      "content": "import { changesOn, isTimeZone, zonedInstant } from \"@goodfellow-cms/core\";\nimport { classNameField, useParts, useSite, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { CountdownClock } from \"./countdown-clock\";\n\nexport interface CountdownProps {\n  heading: string;\n  /** The day, as `YYYY-MM-DD`, and the time, as `HH:MM`, in the site's time zone. */\n  date: string;\n  time: string;\n  /** What it says once the moment has come. */\n  finished: string;\n  words: { days: string; hours: string; minutes: string; seconds: string };\n  className: string;\n}\n\n/** The moment, as an instant, from the day and time in the site's time zone, if they're ones. */\nexport function countdownInstant(date: string, time: string, timeZone: string | undefined): Date | undefined {\n  if (!/^\\d{4}-\\d{2}-\\d{2}$/.test(date.trim())) return undefined;\n  const clock = time.trim() || \"00:00\";\n  if (!/^([01]\\d|2[0-3]):[0-5]\\d$/.test(clock)) return undefined;\n  const instant = zonedInstant(`${date.trim()}T${clock}`, timeZone);\n  return Number.isNaN(instant.getTime()) ? undefined : instant;\n}\n\nfunction whenText(instant: Date, language: string | undefined, timeZone: string | undefined): string {\n  const options: Intl.DateTimeFormatOptions = {\n    dateStyle: \"full\",\n    timeStyle: \"short\",\n    ...(timeZone && isTimeZone(timeZone) && { timeZone }),\n  };\n  try {\n    return new Intl.DateTimeFormat(language || \"en\", options).format(instant);\n  } catch {\n    return new Intl.DateTimeFormat(\"en\", options).format(instant);\n  }\n}\n\nfunction CountdownView({\n  heading,\n  date,\n  time,\n  finished,\n  words,\n  className,\n  puck,\n}: CountdownProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const { settings } = useSite();\n  const instant = countdownInstant(date ?? \"\", time ?? \"\", settings.timeZone);\n  if (!instant) {\n    if (!puck?.isEditing) return null;\n    return (\n      <div className={part(\"gf-countdown\", \"rounded-lg bg-muted p-6 text-center text-muted-foreground\", className)}>\n        {date?.trim()\n          ? \"The day must be written as 2027-12-24, and the time as 18:00.\"\n          : \"Choose the day to count down to.\"}\n      </div>\n    );\n  }\n  // Pages are built again on the day, so once it has passed they say what's chosen without JavaScript too.\n  changesOn(date.trim());\n  const past = instant.getTime() <= Date.now();\n  const finishedClass = part(\"gf-countdown-finished\", \"font-heading text-2xl font-semibold text-primary\");\n  return (\n    <section className={part(\"gf-countdown\", \"flex w-full flex-col items-center gap-4 text-center\", className)}>\n      {heading && <h2 className={part(\"gf-countdown-heading\", \"font-heading text-3xl font-semibold\")}>{heading}</h2>}\n      {past ? (\n        <p className={finishedClass}>{finished}</p>\n      ) : (\n        <CountdownClock\n          until={instant.getTime()}\n          iso={instant.toISOString()}\n          when={whenText(instant, settings.language, settings.timeZone)}\n          finished={finished}\n          words={words}\n          classes={{\n            when: part(\"gf-countdown-when\", \"text-lg text-muted-foreground\"),\n            units: part(\"gf-countdown-units\", \"flex flex-wrap justify-center gap-3\"),\n            unit: part(\n              \"gf-countdown-unit\",\n              \"flex min-w-20 flex-col items-center rounded-lg border border-border bg-card px-4 py-3 text-card-foreground\",\n            ),\n            number: part(\"gf-countdown-number\", \"font-heading text-4xl font-bold tabular-nums\"),\n            label: part(\"gf-countdown-label\", \"text-sm text-muted-foreground\"),\n            finished: finishedClass,\n          }}\n        />\n      )}\n    </section>\n  );\n}\n\n/**\n * The days, hours, minutes and seconds until a moment, such as a festival or\n * an appeal's end, in the site's time zone. Without JavaScript it shows when\n * the moment is, and once it has come, what's chosen to say then.\n */\nconst Countdown: ComponentConfig<CountdownProps> = withParts(\n  {\n    label: \"Countdown\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      date: { type: \"text\", label: \"Day, such as 2027-12-24\", placeholder: \"2027-12-24\" },\n      time: { type: \"text\", label: \"Time, such as 18:00, in the site's time zone\", placeholder: \"18:00\" },\n      finished: { type: \"text\", label: \"What it says once the moment has come\", contentEditable: true },\n      words: {\n        type: \"object\",\n        label: \"Words under the numbers\",\n        objectFields: {\n          days: { type: \"text\", label: \"Days\" },\n          hours: { type: \"text\", label: \"Hours\" },\n          minutes: { type: \"text\", label: \"Minutes\" },\n          seconds: { type: \"text\", label: \"Seconds\" },\n        },\n      },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"Christmas is coming\",\n      date: \"\",\n      time: \"\",\n      finished: \"It's here!\",\n      words: { days: \"Days\", hours: \"Hours\", minutes: \"Minutes\", seconds: \"Seconds\" },\n      className: \"\",\n    },\n    render: (props) => <CountdownView {...props} />,\n  },\n  {\n    \"gf-countdown\": \"Countdown\",\n    \"gf-countdown-heading\": \"Heading\",\n    \"gf-countdown-when\": \"When, before it starts counting\",\n    \"gf-countdown-units\": \"Numbers\",\n    \"gf-countdown-unit\": \"Number with its word\",\n    \"gf-countdown-number\": \"Number\",\n    \"gf-countdown-label\": \"Word under the number\",\n    \"gf-countdown-finished\": \"What it says once the moment has come\",\n  },\n);\n\nexport default withKeywords(Countdown, [\"countdown\", \"timer\", \"launch\", \"event\", \"days until\", \"clock\"]);\n"
+    },
+    {
+      "path": "blocks/installed/countdown/countdown-clock.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\ninterface Words {\n  days: string;\n  hours: string;\n  minutes: string;\n  seconds: string;\n}\n\nconst UNITS = [\"days\", \"hours\", \"minutes\", \"seconds\"] as const;\n\nfunction left(until: number, now: number): Record<(typeof UNITS)[number], number> | undefined {\n  const seconds = Math.floor((until - now) / 1000);\n  if (seconds <= 0) return undefined;\n  return {\n    days: Math.floor(seconds / 86_400),\n    hours: Math.floor(seconds / 3600) % 24,\n    minutes: Math.floor(seconds / 60) % 60,\n    seconds: seconds % 60,\n  };\n}\n\n/**\n * The time left, counting down each second once the page has loaded. Before\n * then, and for visitors without JavaScript, it shows when the moment is,\n * which screen readers always read in place of the ticking numbers.\n */\nexport function CountdownClock({\n  until,\n  when,\n  iso,\n  finished,\n  words,\n  classes,\n}: {\n  until: number;\n  when: string;\n  iso: string;\n  finished: string;\n  words: Words;\n  classes: { when: string; units: string; unit: string; number: string; label: string; finished: string };\n}) {\n  const [now, setNow] = useState<number | undefined>(undefined);\n  useEffect(() => {\n    setNow(Date.now());\n    const timer = setInterval(() => setNow(Date.now()), 1000);\n    return () => clearInterval(timer);\n  }, []);\n  const time = (\n    <time dateTime={iso} className={now === undefined ? classes.when : \"sr-only\"}>\n      {when}\n    </time>\n  );\n  if (now === undefined) return time;\n  const remaining = left(until, now);\n  if (!remaining) return <p className={classes.finished}>{finished}</p>;\n  return (\n    <>\n      {time}\n      <div aria-hidden=\"true\" className={classes.units}>\n        {UNITS.map((unit) => (\n          <div key={unit} className={classes.unit}>\n            <span className={classes.number}>{String(remaining[unit]).padStart(unit === \"days\" ? 1 : 2, \"0\")}</span>\n            <span className={classes.label}>{words[unit]}</span>\n          </div>\n        ))}\n      </div>\n    </>\n  );\n}\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Interactive",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}

package/r/custom-html.json

@@ -8,23 +8,23 @@
     {
       "path": "blocks/installed/custom-html/block.tsx",
       "type": "registry:block",
-      "content": "import { classNameField, sanitizeHtml, useParts, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { HtmlPreview } from \"./html-preview\";\nimport { HtmlWithScripts } from \"./html-scripts\";\n\nexport interface CustomHtmlProps {\n  html: string;\n  sanitize: boolean;\n  className: string;\n}\n\n/**\n * HTML written by hand, such as a widget's embed code. It's made safe by\n * default: scripts, styles, frames, forms and inline styles are left out. Used\n * as it's written, it runs on the site, but in the editor it's only shown,\n * inside a sandboxed frame, where it can't reach the admin panel, and its\n * scripts don't run. On the site they run whenever its page is shown, also\n * after moving to it on a Next.js site.\n */\nconst CustomHtml: ComponentConfig<CustomHtmlProps> = withParts(\n  {\n    label: \"Custom HTML\",\n    fields: {\n      html: { type: \"textarea\", label: \"HTML\" },\n      sanitize: {\n        type: \"radio\",\n        label: \"Make it safe\",\n        options: [\n          { label: \"Yes: leave out scripts, styles and frames\", value: true },\n          { label: \"No: use it exactly as written\", value: false },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: { html: \"<p>Your HTML goes here.</p>\", sanitize: true, className: \"\" },\n    render: ({ html, sanitize, className: chosen, puck }) => {\n      const part = useParts();\n      const className = part(\"gf-custom-html\", undefined, chosen);\n      if (!sanitize && puck.isEditing) return <HtmlPreview html={html} className={className} />;\n      // Only HTML with scripts needs the browser's help, which loads React on the page.\n      if (!sanitize && /<script[\\s>]/i.test(html)) return <HtmlWithScripts html={html} className={className} />;\n      return (\n        <div\n          className={className}\n          // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized unless the editor chose to use it as written\n          dangerouslySetInnerHTML={{ __html: sanitize ? sanitizeHtml(html) : html }}\n        />\n      );\n    },\n  },\n  {\n    \"gf-custom-html\": \"Custom HTML\",\n  },\n);\n\nexport default CustomHtml;\n"
+      "content": "import {\n  CONSENT_ACCEPT_ATTRIBUTE,\n  CONSENT_CODE_ATTRIBUTE,\n  CONSENT_PLACEHOLDER_ATTRIBUTE,\n  type ConsentSettings,\n  consentSource,\n  endsHeldTemplate,\n} from \"@goodfellow-cms/core\";\nimport { classNameField, sanitizeHtml, useParts, useSite, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { HtmlPreview } from \"./html-preview\";\nimport { HtmlWithScripts } from \"./html-scripts\";\n\nexport interface CustomHtmlProps {\n  html: string;\n  sanitize: boolean;\n  className: string;\n}\n\n/** HTML that loads or runs something, which a site that asks visitors first holds back. */\nconst LOADS = /<(script|iframe|object|embed|link)[\\s>/]/i;\n\nconst escapeText = (text: string) =>\n  text.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\" })[c] as string);\n\n/**\n * HTML used as written, held back in a template for the consent script, with\n * a note and a button in its place, which the script hides once the visitor\n * agrees. It's all one element's HTML, so Next.js's React never looks inside\n * it, and leaves what the script adds there alone.\n */\nfunction heldHtml(html: string, consent: ConsentSettings): string {\n  const src = /\\ssrc\\s*=\\s*[\"']?((?:https?:)?\\/\\/[^\"'\\s>]+)/i.exec(html)?.[1];\n  const words = src\n    ? consent.held.replaceAll(\"{site}\", consentSource(src.startsWith(\"//\") ? `https:${src}` : src))\n    : consent.message;\n  return `<template ${CONSENT_CODE_ATTRIBUTE}=\"body\">${html}</template><div class=\"gf-consent-placeholder gf-consent-inline\" ${CONSENT_PLACEHOLDER_ATTRIBUTE}=\"\"><p>${escapeText(words)}</p><button type=\"button\" ${CONSENT_ACCEPT_ATTRIBUTE}=\"content\">${escapeText(consent.show)}</button></div>`;\n}\n\n/**\n * HTML written by hand, such as a widget's embed code. It's made safe by\n * default: scripts, styles, frames, forms and inline styles are left out. Used\n * as it's written, it runs on the site, but in the editor it's only shown,\n * inside a sandboxed frame, where it can't reach the admin panel, and its\n * scripts don't run. On the site they run whenever its page is shown, also\n * after moving to it on a Next.js site. On a site that asks visitors before\n * loading other sites' content, HTML that loads or runs anything waits until\n * they agree, as other sites' players do.\n */\nconst CustomHtml: ComponentConfig<CustomHtmlProps> = withParts(\n  {\n    label: \"Custom HTML\",\n    fields: {\n      html: { type: \"textarea\", label: \"HTML\" },\n      sanitize: {\n        type: \"radio\",\n        label: \"Make it safe\",\n        // HTML used as written runs on the site: on full-stack sites, only owners may choose it.\n        metadata: { owners: true },\n        options: [\n          { label: \"Yes: leave out scripts, styles and frames\", value: true },\n          { label: \"No: use it exactly as written\", value: false },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: { html: \"<p>Your HTML goes here.</p>\", sanitize: true, className: \"\" },\n    render: ({ html, sanitize, className: chosen, puck }) => {\n      const part = useParts();\n      const { settings } = useSite();\n      const className = part(\"gf-custom-html\", undefined, chosen);\n      if (!sanitize && puck.isEditing) return <HtmlPreview html={html} className={className} />;\n      // Where pages are built: the admin panel's previews render in the browser and show it at once.\n      const consent = typeof document === \"undefined\" ? settings.consent : undefined;\n      if (!sanitize && consent && LOADS.test(html)) {\n        // HTML that would end the template early would run before the visitor agrees, so it's made safe instead.\n        if (endsHeldTemplate(html)) {\n          // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized\n          return <div className={className} dangerouslySetInnerHTML={{ __html: sanitizeHtml(html) }} />;\n        }\n        return (\n          <div\n            className={className || undefined}\n            // biome-ignore lint/security/noDangerouslySetInnerHtml: the editor chose to use this HTML as written; it waits for the visitor's agreement\n            dangerouslySetInnerHTML={{ __html: heldHtml(html, consent) }}\n          />\n        );\n      }\n      // Only HTML with scripts needs the browser's help, which loads React on the page.\n      if (!sanitize && /<script[\\s>]/i.test(html)) return <HtmlWithScripts html={html} className={className} />;\n      return (\n        <div\n          className={className}\n          // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized unless the editor chose to use it as written\n          dangerouslySetInnerHTML={{ __html: sanitize ? sanitizeHtml(html) : html }}\n        />\n      );\n    },\n  },\n  {\n    \"gf-custom-html\": \"Custom HTML\",\n  },\n);\n\nexport default CustomHtml;\n"
     },
     {
       "path": "blocks/installed/custom-html/html-preview.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\n/**\n * Shows HTML as it was written, in the editor only: inside a frame sandboxed\n * with nothing allowed, so it can't reach the admin panel or the editor's\n * sign-in. Its scripts don't run there, since the editor runs only its own\n * scripts; they run on the published site. It has the page's styles, and\n * can be made taller by dragging its corner.\n */\nexport function HtmlPreview({ html, className }: { html: string; className: string }) {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const [styles, setStyles] = useState(\"\");\n\n  useEffect(() => {\n    const document = frame.current?.ownerDocument;\n    if (!document) return;\n    setStyles(\n      [...document.querySelectorAll('link[rel=\"stylesheet\"], style')].map((element) => element.outerHTML).join(\"\"),\n    );\n  }, []);\n\n  return (\n    <div className={className || undefined}>\n      <div style={{ height: 240, resize: \"vertical\", overflow: \"hidden\" }}>\n        <iframe\n          ref={frame}\n          title=\"Custom HTML\"\n          sandbox=\"\"\n          srcDoc={`<!doctype html><html><head><meta charset=\"utf-8\">${styles}</head><body style=\"margin:0\">${html}</body></html>`}\n          style={{ display: \"block\", width: \"100%\", height: \"100%\", border: 0 }}\n        />\n      </div>\n      <p className=\"mt-2 text-sm text-muted-foreground\">\n        Scripts don't run in the editor. They run on the published site.\n      </p>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/**\n * Shows HTML as it was written, in the editor only: inside a frame sandboxed\n * with nothing allowed, so it can't reach the admin panel or the editor's\n * sign-in. Its scripts don't run there, since the editor runs only its own\n * scripts; they run on the published site. It has the page's styles, and\n * can be made taller by dragging its corner.\n */\nexport function HtmlPreview({ html, className }: { html: string; className: string }) {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const [styles, setStyles] = useState(\"\");\n\n  useEffect(() => {\n    const document = frame.current?.ownerDocument;\n    if (!document) return;\n    setStyles(\n      [...document.querySelectorAll('link[rel=\"stylesheet\"], style')].map((element) => element.outerHTML).join(\"\"),\n    );\n  }, []);\n\n  return (\n    <div className={className || undefined}>\n      <div style={{ height: 240, resize: \"vertical\", overflow: \"hidden\" }}>\n        <iframe\n          ref={frame}\n          title=\"Custom HTML\"\n          sandbox=\"\"\n          srcDoc={`<!doctype html><html><head><meta charset=\"utf-8\">${styles}</head><body style=\"margin:0\">${html}</body></html>`}\n          style={{ display: \"block\", width: \"100%\", height: \"100%\", border: 0 }}\n        />\n      </div>\n      <p className=\"mt-2 text-sm text-muted-foreground\">\n        Scripts don't run in the editor. They run on the published site.\n      </p>\n    </div>\n  );\n}\n"
     },
     {
       "path": "blocks/installed/custom-html/html-scripts.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport { useEffect, useRef, useSyncExternalStore } from \"react\";\n\n/** Scripts that have already run, so a second pass (React's Strict Mode runs effects twice) doesn't run them again. */\nconst ran = new WeakSet<Element>();\n\nconst noSubscription = () => () => {};\n\n/** Runs a script that was put in the page as HTML, which browsers never run on their own. */\nfunction run(original: HTMLScriptElement): Promise<void> {\n  const script = document.createElement(\"script\");\n  for (const { name, value } of original.attributes) script.setAttribute(name, value);\n  script.text = original.text;\n  ran.add(script);\n  // An external script runs once it has loaded; the next one waits for it, as when the page is first opened.\n  const waits = Boolean(original.src) && !original.async && original.type !== \"module\";\n  const loaded = waits\n    ? new Promise<void>((resolve) => {\n        script.addEventListener(\"load\", () => resolve());\n        script.addEventListener(\"error\", () => resolve());\n      })\n    : Promise.resolve();\n  if (waits) script.async = false;\n  original.replaceWith(script);\n  return loaded;\n}\n\n/**\n * HTML with scripts, used as it was written. When the page is first opened\n * the browser runs its scripts; when it's shown without a new page load (moving\n * between pages on a Next.js site), this runs them, in order.\n */\nexport function HtmlWithScripts({ html, className }: { html: string; className: string }) {\n  const container = useRef<HTMLDivElement>(null);\n  // True when React takes over HTML the browser loaded with the page, whose scripts have already run.\n  const hydrating = useSyncExternalStore(\n    noSubscription,\n    () => false,\n    () => true,\n  );\n  const fromPage = useRef(hydrating);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: runs the scripts again whenever the HTML changes\n  useEffect(() => {\n    const scripts = [...(container.current?.querySelectorAll(\"script\") ?? [])].filter((script) => !ran.has(script));\n    if (fromPage.current) {\n      fromPage.current = false;\n      for (const script of scripts) ran.add(script);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      for (const script of scripts) {\n        if (cancelled) return;\n        await run(script);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [html]);\n\n  return (\n    <div\n      ref={container}\n      className={className || undefined}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: the editor chose to use this HTML as written\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { useEffect, useRef, useSyncExternalStore } from \"react\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/** Scripts that have already run, so a second pass (React's Strict Mode runs effects twice) doesn't run them again. */\nconst ran = new WeakSet<Element>();\n\nconst noSubscription = () => () => {};\n\n/** Runs a script that was put in the page as HTML, which browsers never run on their own. */\nfunction run(original: HTMLScriptElement): Promise<void> {\n  const script = document.createElement(\"script\");\n  for (const { name, value } of original.attributes) script.setAttribute(name, value);\n  script.text = original.text;\n  ran.add(script);\n  // An external script runs once it has loaded; the next one waits for it, as when the page is first opened.\n  const waits = Boolean(original.src) && !original.async && original.type !== \"module\";\n  const loaded = waits\n    ? new Promise<void>((resolve) => {\n        script.addEventListener(\"load\", () => resolve());\n        script.addEventListener(\"error\", () => resolve());\n      })\n    : Promise.resolve();\n  if (waits) script.async = false;\n  original.replaceWith(script);\n  return loaded;\n}\n\n/**\n * HTML with scripts, used as it was written. When the page is first opened\n * the browser runs its scripts; when it's shown without a new page load (moving\n * between pages on a Next.js site), this runs them, in order.\n */\nexport function HtmlWithScripts({ html, className }: { html: string; className: string }) {\n  const container = useRef<HTMLDivElement>(null);\n  // True when React takes over HTML the browser loaded with the page, whose scripts have already run.\n  const hydrating = useSyncExternalStore(\n    noSubscription,\n    () => false,\n    () => true,\n  );\n  const fromPage = useRef(hydrating);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: runs the scripts again whenever the HTML changes\n  useEffect(() => {\n    const scripts = [...(container.current?.querySelectorAll(\"script\") ?? [])].filter((script) => !ran.has(script));\n    if (fromPage.current) {\n      fromPage.current = false;\n      for (const script of scripts) ran.add(script);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      for (const script of scripts) {\n        if (cancelled) return;\n        await run(script);\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [html]);\n\n  return (\n    <div\n      ref={container}\n      className={className || undefined}\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: the editor chose to use this HTML as written\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Advanced",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/feed-list.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/logos.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "logos",
+  "type": "registry:block",
+  "title": "Logos",
+  "description": "A row of logos, such as sponsors or partners, each linking to its site.",
+  "files": [
+    {
+      "path": "blocks/installed/logos/block.tsx",
+      "type": "registry:block",
+      "content": "import {\n  classNameField,\n  mediaField,\n  SiteImage,\n  SiteLink,\n  useParts,\n  withKeywords,\n  withParts,\n} from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\ninterface Logo {\n  image: string;\n  name: string;\n  link: string;\n}\n\nexport interface LogosProps {\n  heading: string;\n  logos: Logo[];\n  size: \"small\" | \"medium\" | \"large\";\n  /** Whether the logos are gray until the pointer is over them, so their colors don't clash with the site's. */\n  gray: boolean;\n  className: string;\n}\n\nconst sizeClasses: Record<LogosProps[\"size\"], string> = {\n  small: \"h-8\",\n  medium: \"h-12\",\n  large: \"h-16\",\n};\n\nfunction LogosView({ heading, logos, size, gray, className, puck }: LogosProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const shown = (logos ?? []).filter((logo) => logo.image);\n  if (shown.length === 0) {\n    // Only editors see why there's nothing; visitors see nothing.\n    if (!puck?.isEditing) return null;\n    return (\n      <div className={part(\"gf-logos\", \"rounded-lg bg-muted p-6 text-center text-muted-foreground\", className)}>\n        Add logos from the media library.\n      </div>\n    );\n  }\n  const imageClass = part(\"gf-logos-image\", [\n    \"w-auto max-w-40 object-contain\",\n    sizeClasses[size] ?? sizeClasses.medium,\n    gray && \"opacity-70 grayscale transition hover:opacity-100 hover:grayscale-0\",\n  ]);\n  return (\n    <section className={part(\"gf-logos\", \"w-full\", className)}>\n      {heading && (\n        <h2 className={part(\"gf-logos-heading\", \"mb-6 text-center font-heading text-2xl font-semibold\")}>{heading}</h2>\n      )}\n      <ul className={part(\"gf-logos-list\", \"flex flex-wrap items-center justify-center gap-x-10 gap-y-6\")}>\n        {shown.map((logo, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: the same logo can be shown twice\n          <li key={index} className={part(\"gf-logos-logo\", \"flex items-center\")}>\n            {logo.link ? (\n              <SiteLink href={logo.link} className=\"inline-flex\">\n                <SiteImage src={logo.image} alt={logo.name} className={imageClass} />\n              </SiteLink>\n            ) : (\n              <SiteImage src={logo.image} alt={logo.name} className={imageClass} />\n            )}\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n}\n\n/** A row of logos, such as sponsors, partners or the organizations a site belongs to, each linking to its site. */\nconst Logos: ComponentConfig<LogosProps> = withParts(\n  {\n    label: \"Logos\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      logos: {\n        type: \"array\",\n        label: \"Logos\",\n        arrayFields: {\n          image: mediaField(\"Logo\"),\n          name: { type: \"text\", label: \"Whose logo it is, for screen readers\" },\n          link: { type: \"text\", label: \"Links to (optional)\" },\n        },\n        defaultItemProps: { image: \"\", name: \"\", link: \"\" },\n        getItemSummary: (logo, index) => logo.name || `Logo ${(index ?? 0) + 1}`,\n      },\n      size: {\n        type: \"radio\",\n        label: \"Size\",\n        options: [\n          { value: \"small\", label: \"Small\" },\n          { value: \"medium\", label: \"Medium\" },\n          { value: \"large\", label: \"Large\" },\n        ],\n      },\n      gray: {\n        type: \"radio\",\n        label: \"Colors\",\n        options: [\n          { value: false, label: \"The logos' own\" },\n          { value: true, label: \"Gray until pointed at\" },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: { heading: \"Our partners\", logos: [], size: \"medium\", gray: false, className: \"\" },\n    render: (props) => <LogosView {...props} />,\n  },\n  {\n    \"gf-logos\": \"Logos\",\n    \"gf-logos-heading\": \"Heading\",\n    \"gf-logos-list\": \"List\",\n    \"gf-logos-logo\": \"Logo\",\n    \"gf-logos-image\": \"Logo's picture\",\n  },\n);\n\nexport default withKeywords(Logos, [\"logos\", \"sponsors\", \"partners\", \"supporters\", \"clients\", \"members\"]);\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}

package/r/map.json

@@ -8,13 +8,13 @@
     {
       "path": "blocks/installed/map/block.tsx",
       "type": "registry:block",
-      "content": "import { classNameField, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface MapProps {\n  query: string;\n  title: string;\n  zoom: number;\n  height: number;\n  className: string;\n}\n\n/**\n * The map's address: Google Maps' own embed address, from the embed code its\n * Share button gives (or that address itself), or else a map of the address\n * or place, which needs no key. Nothing but Google Maps' embedded maps is shown.\n */\nexport function mapAddress(input: string, zoom: number): string | undefined {\n  const text = input.trim();\n  if (!text) return undefined;\n  const embedded = /<iframe\\b[^>]*\\bsrc=[\"']([^\"']+)[\"']/i.exec(text)?.[1]?.replaceAll(\"&amp;\", \"&\") ?? text;\n  if (/^https:\\/\\//i.test(embedded)) {\n    try {\n      const url = new URL(embedded);\n      return url.hostname === \"www.google.com\" && url.pathname === \"/maps/embed\" ? url.href : undefined;\n    } catch {\n      return undefined;\n    }\n  }\n  if (text.includes(\"<\")) return undefined;\n  const params = new URLSearchParams({ q: text, z: String(Math.min(21, Math.max(1, zoom || 15))), output: \"embed\" });\n  return `https://maps.google.com/maps?${params}`;\n}\n\nfunction MapView({ query, title, zoom, height, className, puck }: MapProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const src = mapAddress(query, zoom);\n  if (!src) {\n    // Only editors see why there's no map; visitors see nothing.\n    if (!puck?.isEditing) return null;\n    return (\n      <div className={part(\"gf-map\", \"rounded-lg bg-muted p-6 text-muted-foreground\", className)}>\n        {query.trim()\n          ? \"This isn't an address or Google Maps' embed code, so no map is shown.\"\n          : \"Enter an address to show a map.\"}\n      </div>\n    );\n  }\n  return (\n    <iframe\n      src={src}\n      title={title || \"Map\"}\n      loading=\"lazy\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      // Google's map needs its scripts and its own address; it can open Google Maps, but nothing else.\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n      className={part(\"gf-map\", \"w-full rounded-lg border border-border\", className)}\n      style={{ height: Math.max(200, height || 400) }}\n    />\n  );\n}\n\n/** A Google map of an address or place, which visitors can move around and open in Google Maps. No API key needed. */\nconst MapBlock: ComponentConfig<MapProps> = withParts(\n  {\n    label: \"Map\",\n    fields: {\n      query: {\n        type: \"textarea\",\n        label: \"Address or place, or the embed code from Google Maps' Share button\",\n        placeholder: \"1600 Pennsylvania Ave NW, Washington, DC\",\n      },\n      title: { type: \"text\", label: \"What the map shows, for screen readers\" },\n      zoom: { type: \"number\", label: \"Zoom, for an address (1 is the world, 21 a building)\", min: 1, max: 21 },\n      height: { type: \"number\", label: \"Height in pixels\", min: 200, max: 900 },\n      className: classNameField,\n    },\n    defaultProps: { query: \"\", title: \"Map\", zoom: 15, height: 400, className: \"\" },\n    render: (props) => <MapView {...props} />,\n  },\n  { \"gf-map\": \"Map\" },\n);\n\nexport default withKeywords(MapBlock, [\"map\", \"google maps\", \"address\", \"location\", \"directions\"]);\n"
+      "content": "import { ConsentFrame, classNameField, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface MapProps {\n  query: string;\n  title: string;\n  zoom: number;\n  height: number;\n  className: string;\n}\n\n/**\n * The map's address: Google Maps' own embed address, from the embed code its\n * Share button gives (or that address itself), or else a map of the address\n * or place, which needs no key. Nothing but Google Maps' embedded maps is shown.\n */\nexport function mapAddress(input: string, zoom: number): string | undefined {\n  const text = input.trim();\n  if (!text) return undefined;\n  const embedded = /<iframe\\b[^>]*\\bsrc=[\"']([^\"']+)[\"']/i.exec(text)?.[1]?.replaceAll(\"&amp;\", \"&\") ?? text;\n  if (/^https:\\/\\//i.test(embedded)) {\n    try {\n      const url = new URL(embedded);\n      return url.hostname === \"www.google.com\" && url.pathname === \"/maps/embed\" ? url.href : undefined;\n    } catch {\n      return undefined;\n    }\n  }\n  if (text.includes(\"<\")) return undefined;\n  const params = new URLSearchParams({ q: text, z: String(Math.min(21, Math.max(1, zoom || 15))), output: \"embed\" });\n  return `https://maps.google.com/maps?${params}`;\n}\n\nfunction MapView({ query, title, zoom, height, className, puck }: MapProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const src = mapAddress(query, zoom);\n  if (!src) {\n    // Only editors see why there's no map; visitors see nothing.\n    if (!puck?.isEditing) return null;\n    return (\n      <div className={part(\"gf-map\", \"rounded-lg bg-muted p-6 text-muted-foreground\", className)}>\n        {query.trim()\n          ? \"This isn't an address or Google Maps' embed code, so no map is shown.\"\n          : \"Enter an address to show a map.\"}\n      </div>\n    );\n  }\n  return (\n    // On a site that asks visitors before loading other sites' content, Google's map waits until they agree.\n    <ConsentFrame\n      box\n      src={src}\n      title={title || \"Map\"}\n      loading=\"lazy\"\n      referrerPolicy=\"no-referrer-when-downgrade\"\n      // Google's map needs its scripts and its own address; it can open Google Maps, but nothing else.\n      sandbox=\"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"\n      boxClassName={className}\n      className={part(\"gf-map\", \"w-full rounded-lg border border-border\")}\n      style={{ height: Math.max(200, height || 400) }}\n    />\n  );\n}\n\n/** A Google map of an address or place, which visitors can move around and open in Google Maps. No API key needed. */\nconst MapBlock: ComponentConfig<MapProps> = withParts(\n  {\n    label: \"Map\",\n    fields: {\n      query: {\n        type: \"textarea\",\n        label: \"Address or place, or the embed code from Google Maps' Share button\",\n        placeholder: \"1600 Pennsylvania Ave NW, Washington, DC\",\n      },\n      title: { type: \"text\", label: \"What the map shows, for screen readers\" },\n      zoom: { type: \"number\", label: \"Zoom, for an address (1 is the world, 21 a building)\", min: 1, max: 21 },\n      height: { type: \"number\", label: \"Height in pixels\", min: 200, max: 900 },\n      className: classNameField,\n    },\n    defaultProps: { query: \"\", title: \"Map\", zoom: 15, height: 400, className: \"\" },\n    render: (props) => <MapView {...props} />,\n  },\n  { \"gf-map\": \"Map\" },\n);\n\nexport default withKeywords(MapBlock, [\"map\", \"google maps\", \"address\", \"location\", \"directions\"]);\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/numbers.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "numbers",
+  "type": "registry:block",
+  "title": "Numbers",
+  "description": "A few numbers worth knowing, such as families served or years open, each with what it counts.",
+  "files": [
+    {
+      "path": "blocks/installed/numbers/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\ninterface NumberItem {\n  value: string;\n  label: string;\n  text: string;\n}\n\nexport interface NumbersProps {\n  heading: string;\n  items: NumberItem[];\n  look: \"plain\" | \"boxes\";\n  className: string;\n}\n\nconst lookClasses: Record<NumbersProps[\"look\"], string> = {\n  plain: \"\",\n  boxes: \"rounded-lg border border-border bg-card p-6 text-card-foreground\",\n};\n\n/** A few numbers worth knowing, such as families served or years open, each with what it counts. */\nconst NumbersBlock: ComponentConfig<NumbersProps> = withParts(\n  {\n    label: \"Numbers\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      items: {\n        type: \"array\",\n        label: \"Numbers\",\n        arrayFields: {\n          value: { type: \"text\", label: \"Number, such as 1,200 or 98%\" },\n          label: { type: \"text\", label: \"What it counts\" },\n          text: { type: \"text\", label: \"More words under it (optional)\" },\n        },\n        defaultItemProps: { value: \"100\", label: \"What it counts\", text: \"\" },\n        getItemSummary: (item) => [item.value, item.label].filter(Boolean).join(\" \") || \"Number\",\n      },\n      look: {\n        type: \"radio\",\n        label: \"Look\",\n        options: [\n          { value: \"plain\", label: \"Plain\" },\n          { value: \"boxes\", label: \"In boxes\" },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"\",\n      items: [\n        { value: \"150\", label: \"Years in the town\", text: \"\" },\n        { value: \"1,200\", label: \"Families\", text: \"\" },\n        { value: \"40\", label: \"Groups and ministries\", text: \"\" },\n      ],\n      look: \"plain\",\n      className: \"\",\n    },\n    render: ({ heading, items, look, className }) => {\n      const part = useParts();\n      return (\n        <section className={part(\"gf-numbers\", \"w-full\", className)}>\n          {heading && (\n            <h2 className={part(\"gf-numbers-heading\", \"mb-8 text-center font-heading text-3xl font-semibold\")}>\n              {heading}\n            </h2>\n          )}\n          {/* What each number counts is its term, so screen readers read \"Families: 1,200\". */}\n          <dl className={part(\"gf-numbers-list\", \"grid gap-6 sm:grid-cols-[repeat(auto-fit,minmax(12rem,1fr))]\")}>\n            {(items ?? []).map((item, index) => (\n              <div\n                // biome-ignore lint/suspicious/noArrayIndexKey: numbers can repeat\n                key={index}\n                className={part(\"gf-numbers-item\", [\n                  \"flex flex-col-reverse items-center gap-1 text-center\",\n                  lookClasses[look] ?? \"\",\n                ])}\n              >\n                <dt className={part(\"gf-numbers-label\", \"font-medium\")}>\n                  {item.label}\n                  {item.text && (\n                    <span className={part(\"gf-numbers-text\", \"mt-1 block text-sm font-normal text-muted-foreground\")}>\n                      {item.text}\n                    </span>\n                  )}\n                </dt>\n                <dd className={part(\"gf-numbers-value\", \"font-heading text-4xl font-bold text-primary\")}>\n                  {item.value}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        </section>\n      );\n    },\n  },\n  {\n    \"gf-numbers\": \"Numbers\",\n    \"gf-numbers-heading\": \"Heading\",\n    \"gf-numbers-list\": \"List\",\n    \"gf-numbers-item\": \"Number with its words\",\n    \"gf-numbers-value\": \"Number\",\n    \"gf-numbers-label\": \"What it counts\",\n    \"gf-numbers-text\": \"More words\",\n  },\n);\n\nexport default withKeywords(NumbersBlock, [\"numbers\", \"statistics\", \"stats\", \"facts\", \"figures\", \"counters\"]);\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}

package/r/panel.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/people.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "people",
+  "type": "registry:block",
+  "title": "People",
+  "description": "The people of an organization, such as its staff or council, each with a photo, their name, role and a few words.",
+  "files": [
+    {
+      "path": "blocks/installed/people/block.tsx",
+      "type": "registry:block",
+      "content": "import {\n  classNameField,\n  mediaField,\n  SiteImage,\n  SiteLink,\n  useParts,\n  withKeywords,\n  withParts,\n} from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\ninterface Person {\n  photo: string;\n  name: string;\n  role: string;\n  bio: string;\n  email: string;\n  link: string;\n}\n\nexport interface PeopleProps {\n  heading: string;\n  people: Person[];\n  columns: \"2\" | \"3\" | \"4\";\n  photos: \"round\" | \"square\";\n  className: string;\n}\n\nconst columnClasses: Record<PeopleProps[\"columns\"], string> = {\n  \"2\": \"sm:grid-cols-2\",\n  \"3\": \"sm:grid-cols-2 lg:grid-cols-3\",\n  \"4\": \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nconst photoClasses: Record<PeopleProps[\"photos\"], string> = {\n  round: \"rounded-full\",\n  square: \"rounded-lg\",\n};\n\n/** The people of an organization, such as its staff or council: each with a photo, their name, role and a few words. */\nconst People: ComponentConfig<PeopleProps> = withParts(\n  {\n    label: \"People\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      people: {\n        type: \"array\",\n        label: \"People\",\n        arrayFields: {\n          photo: mediaField(\"Photo\"),\n          name: { type: \"text\", label: \"Name\" },\n          role: { type: \"text\", label: \"Role, such as Parish secretary\" },\n          bio: { type: \"textarea\", label: \"A few words about them\" },\n          email: { type: \"text\", label: \"Email address (optional)\" },\n          link: { type: \"text\", label: \"Links to, such as their page (optional)\" },\n        },\n        defaultItemProps: { photo: \"\", name: \"Name\", role: \"Role\", bio: \"\", email: \"\", link: \"\" },\n        getItemSummary: (person) => person.name || \"Person\",\n      },\n      columns: {\n        type: \"radio\",\n        label: \"Across the page\",\n        options: [\n          { value: \"2\", label: \"2\" },\n          { value: \"3\", label: \"3\" },\n          { value: \"4\", label: \"4\" },\n        ],\n      },\n      photos: {\n        type: \"radio\",\n        label: \"Photos\",\n        options: [\n          { value: \"round\", label: \"Round\" },\n          { value: \"square\", label: \"Square\" },\n        ],\n      },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"Our team\",\n      people: [\n        { photo: \"\", name: \"Name\", role: \"Role\", bio: \"\", email: \"\", link: \"\" },\n        { photo: \"\", name: \"Name\", role: \"Role\", bio: \"\", email: \"\", link: \"\" },\n        { photo: \"\", name: \"Name\", role: \"Role\", bio: \"\", email: \"\", link: \"\" },\n      ],\n      columns: \"3\",\n      photos: \"round\",\n      className: \"\",\n    },\n    render: ({ heading, people, columns, photos, className }) => {\n      const part = useParts();\n      // A person's name is a heading one level under the block's, or level 2 without one.\n      const Name = heading ? \"h3\" : \"h2\";\n      return (\n        <section className={part(\"gf-people\", \"w-full\", className)}>\n          {heading && (\n            <h2 className={part(\"gf-people-heading\", \"mb-8 text-center font-heading text-3xl font-semibold\")}>\n              {heading}\n            </h2>\n          )}\n          <ul className={part(\"gf-people-list\", [\"grid gap-8\", columnClasses[columns] ?? columnClasses[\"3\"]])}>\n            {(people ?? []).map((person, index) => (\n              <li\n                // biome-ignore lint/suspicious/noArrayIndexKey: people can share a name\n                key={index}\n                className={part(\"gf-people-person\", \"flex flex-col items-center gap-2 text-center\")}\n              >\n                {person.photo ? (\n                  // The name is under it, so the photo needs no words of its own.\n                  <SiteImage\n                    src={person.photo}\n                    alt=\"\"\n                    aria-hidden=\"true\"\n                    className={part(\"gf-people-photo\", [\n                      \"mb-2 size-32 object-cover\",\n                      photoClasses[photos] ?? photoClasses.round,\n                    ])}\n                  />\n                ) : (\n                  <div\n                    aria-hidden=\"true\"\n                    className={part(\"gf-people-photo\", [\n                      \"mb-2 size-32 bg-muted\",\n                      photoClasses[photos] ?? photoClasses.round,\n                    ])}\n                  />\n                )}\n                <Name className={part(\"gf-people-name\", \"font-heading text-lg font-semibold\")}>\n                  {person.link ? (\n                    <SiteLink href={person.link} className=\"hover:underline\">\n                      {person.name}\n                    </SiteLink>\n                  ) : (\n                    person.name\n                  )}\n                </Name>\n                {person.role && (\n                  <p className={part(\"gf-people-role\", \"text-sm font-medium text-primary\")}>{person.role}</p>\n                )}\n                {person.bio && <p className={part(\"gf-people-bio\", \"text-muted-foreground\")}>{person.bio}</p>}\n                {person.email && (\n                  <SiteLink\n                    href={`mailto:${person.email.trim()}`}\n                    className={part(\"gf-people-email\", \"text-sm text-primary underline underline-offset-4\")}\n                  >\n                    {person.email.trim()}\n                  </SiteLink>\n                )}\n              </li>\n            ))}\n          </ul>\n        </section>\n      );\n    },\n  },\n  {\n    \"gf-people\": \"People\",\n    \"gf-people-heading\": \"Heading\",\n    \"gf-people-list\": \"List\",\n    \"gf-people-person\": \"Person\",\n    \"gf-people-photo\": \"Photo\",\n    \"gf-people-name\": \"Name\",\n    \"gf-people-role\": \"Role\",\n    \"gf-people-bio\": \"A few words\",\n    \"gf-people-email\": \"Email address\",\n  },\n);\n\nexport default withKeywords(People, [\n  \"team\",\n  \"staff\",\n  \"people\",\n  \"board\",\n  \"council\",\n  \"clergy\",\n  \"volunteers\",\n  \"about us\",\n]);\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}

package/r/registry.json

@@ -21,7 +21,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -45,7 +45,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -69,7 +69,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -92,7 +92,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -119,7 +119,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       }
     },
@@ -144,7 +144,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       }
     },
@@ -162,7 +162,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -181,7 +181,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -200,7 +200,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -219,7 +219,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -242,7 +242,7 @@
       "meta": {
         "goodfellow": {
           "category": "Interactive",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -261,7 +261,129 @@
       "meta": {
         "goodfellow": {
           "category": "Navigation",
-          "version": "0.7.0"
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "people",
+      "type": "registry:block",
+      "title": "People",
+      "description": "The people of an organization, such as its staff or council, each with a photo, their name, role and a few words.",
+      "files": [
+        {
+          "path": "blocks/installed/people/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "logos",
+      "type": "registry:block",
+      "title": "Logos",
+      "description": "A row of logos, such as sponsors or partners, each linking to its site.",
+      "files": [
+        {
+          "path": "blocks/installed/logos/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "numbers",
+      "type": "registry:block",
+      "title": "Numbers",
+      "description": "A few numbers worth knowing, such as families served or years open, each with what it counts.",
+      "files": [
+        {
+          "path": "blocks/installed/numbers/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "timeline",
+      "type": "registry:block",
+      "title": "Timeline",
+      "description": "Moments in order down a line, such as an organization's history or the steps of a plan.",
+      "files": [
+        {
+          "path": "blocks/installed/timeline/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "countdown",
+      "type": "registry:block",
+      "title": "Countdown",
+      "description": "The days, hours, minutes and seconds until a moment, in the site's time zone.",
+      "files": [
+        {
+          "path": "blocks/installed/countdown/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/countdown/countdown-clock.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "version": "0.8.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "comments",
+      "type": "registry:block",
+      "title": "Comments",
+      "description": "Comments on the page through Giscus, kept as GitHub Discussions; visitors sign in with GitHub to comment.",
+      "files": [
+        {
+          "path": "blocks/installed/comments/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/comments/giscus-frame.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -288,7 +410,7 @@
       "meta": {
         "goodfellow": {
           "category": "Advanced",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -315,7 +437,7 @@
         "goodfellow": {
           "category": "Interactive",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -342,7 +464,7 @@
         "goodfellow": {
           "category": "Interactive",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []
@@ -368,7 +490,7 @@
       "meta": {
         "goodfellow": {
           "category": "Interactive",
-          "version": "0.7.0"
+          "version": "0.8.0"
         }
       },
       "dependencies": []

package/r/section-links.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Navigation",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-call-to-action.json

@@ -19,7 +19,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-cards.json

@@ -19,7 +19,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-carousel.json

@@ -16,13 +16,13 @@
     {
       "path": "blocks/installed/shadcn-carousel/image-carousel.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport { SiteImage } from \"@goodfellow-cms/react\";\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from \"@/components/ui/carousel\";\n\n/** The pictures, one at a time, with previous and next buttons, and their parts' classes from the block. */\nexport function ImageCarousel({\n  slides,\n  loop,\n  classes,\n}: {\n  slides: Array<{ image: string; alt: string; caption: string }>;\n  loop: boolean;\n  classes: { image: string; caption: string };\n}) {\n  return (\n    <Carousel opts={{ loop }}>\n      <CarouselContent>\n        {slides.map((slide, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n          <CarouselItem key={index}>\n            <figure>\n              <SiteImage src={slide.image} alt={slide.alt} className={classes.image} />\n              {slide.caption && <figcaption className={classes.caption}>{slide.caption}</figcaption>}\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { SiteImage } from \"@goodfellow-cms/react\";\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from \"@/components/ui/carousel\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/** The pictures, one at a time, with previous and next buttons, and their parts' classes from the block. */\nexport function ImageCarousel({\n  slides,\n  loop,\n  classes,\n}: {\n  slides: Array<{ image: string; alt: string; caption: string }>;\n  loop: boolean;\n  classes: { image: string; caption: string };\n}) {\n  return (\n    <Carousel opts={{ loop }}>\n      <CarouselContent>\n        {slides.map((slide, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n          <CarouselItem key={index}>\n            <figure>\n              <SiteImage src={slide.image} alt={slide.alt} className={classes.image} />\n              {slide.caption && <figcaption className={classes.caption}>{slide.caption}</figcaption>}\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Interactive",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-faq.json

@@ -16,14 +16,14 @@
     {
       "path": "blocks/installed/shadcn-faq/faq-list.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\n\n/**\n * The questions, one open at a time, with their parts' classes from the block.\n * Closed answers stay in the page, hidden, rather than being left out.\n */\nexport function FaqList({\n  questions,\n  classes,\n}: {\n  questions: Array<{ question: string; answer: ReactNode }>;\n  classes: { question: string; trigger: string; answer: string };\n}) {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      {questions.map((item, index) => (\n        <AccordionItem\n          // biome-ignore lint/suspicious/noArrayIndexKey: questions have no ids of their own\n          key={index}\n          value={`question-${index}`}\n          className={classes.question}\n        >\n          <AccordionTrigger className={classes.trigger}>{item.question}</AccordionTrigger>\n          <AccordionContent forceMount>\n            <div className={classes.answer}>{item.answer}</div>\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/**\n * The questions, one open at a time, with their parts' classes from the block.\n * Closed answers stay in the page, hidden, rather than being left out.\n */\nexport function FaqList({\n  questions,\n  classes,\n}: {\n  questions: Array<{ question: string; answer: ReactNode }>;\n  classes: { question: string; trigger: string; answer: string };\n}) {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full\">\n      {questions.map((item, index) => (\n        <AccordionItem\n          // biome-ignore lint/suspicious/noArrayIndexKey: questions have no ids of their own\n          key={index}\n          value={`question-${index}`}\n          className={classes.question}\n        >\n          <AccordionTrigger className={classes.trigger}>{item.question}</AccordionTrigger>\n          <AccordionContent forceMount>\n            <div className={classes.answer}>{item.answer}</div>\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Interactive",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-hero.json

@@ -18,7 +18,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-notice.json

@@ -21,7 +21,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   }
 }

package/r/shadcn-pricing.json

@@ -22,7 +22,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   }
 }

package/r/shadcn-tabs.json

@@ -16,14 +16,14 @@
     {
       "path": "blocks/installed/shadcn-tabs/tabs-view.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\n/** The tabs, with every tab's content in the page and the others hidden, and their parts' classes from the block. */\nexport function TabsView({\n  tabs,\n  classes,\n}: {\n  tabs: Array<{ label: string; content: ReactNode }>;\n  classes: { list: string; tab: string; content: string };\n}) {\n  if (tabs.length === 0) return null;\n  return (\n    <Tabs defaultValue=\"tab-0\">\n      <TabsList className={classes.list}>\n        {tabs.map((tab, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: tabs have no ids of their own\n          <TabsTrigger key={index} value={`tab-${index}`} className={classes.tab}>\n            {tab.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((tab, index) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: tabs have no ids of their own\n        <TabsContent key={index} value={`tab-${index}`} forceMount className={classes.content}>\n          <div className=\"gf-prose\">{tab.content}</div>\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/** The tabs, with every tab's content in the page and the others hidden, and their parts' classes from the block. */\nexport function TabsView({\n  tabs,\n  classes,\n}: {\n  tabs: Array<{ label: string; content: ReactNode }>;\n  classes: { list: string; tab: string; content: string };\n}) {\n  if (tabs.length === 0) return null;\n  return (\n    <Tabs defaultValue=\"tab-0\">\n      <TabsList className={classes.list}>\n        {tabs.map((tab, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: tabs have no ids of their own\n          <TabsTrigger key={index} value={`tab-${index}`} className={classes.tab}>\n            {tab.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((tab, index) => (\n        // biome-ignore lint/suspicious/noArrayIndexKey: tabs have no ids of their own\n        <TabsContent key={index} value={`tab-${index}`} forceMount className={classes.content}>\n          <div className=\"gf-prose\">{tab.content}</div>\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Interactive",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/shadcn-testimonials.json

@@ -18,7 +18,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/slideshow-hero.json

@@ -13,13 +13,13 @@
     {
       "path": "blocks/installed/slideshow-hero/slideshow-pictures.tsx",
       "type": "registry:component",
-      "content": "\"use client\";\n\nimport { SiteImage } from \"@goodfellow-cms/react\";\nimport { useEffect, useState } from \"react\";\n\n/**\n * The pictures, fading from one to the next every few seconds, with a dot for\n * each and a button that stops them. They stop while the pointer is over them\n * or the keyboard is in them, and don't change by themselves at all for\n * visitors who ask for less motion.\n */\nexport function SlideshowPictures({\n  slides,\n  seconds,\n  words,\n  classes,\n}: {\n  slides: Array<{ image: string; alt: string }>;\n  seconds: number;\n  words: { pause: string; play: string; picture: string };\n  classes: { picture: string; controls: string; dot: string; pause: string };\n}) {\n  const [shown, setShown] = useState(0);\n  const [hovered, setHovered] = useState(false);\n  const [stopped, setStopped] = useState(false);\n  const [still, setStill] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setStill(query.matches);\n    const changed = () => setStill(query.matches);\n    query.addEventListener(\"change\", changed);\n    return () => query.removeEventListener(\"change\", changed);\n  }, []);\n\n  const moving = slides.length > 1 && !still && !stopped;\n  useEffect(() => {\n    if (!moving || hovered) return;\n    const timer = window.setInterval(\n      () => setShown((index) => (index + 1) % slides.length),\n      Math.max(2, seconds) * 1000,\n    );\n    return () => window.clearInterval(timer);\n  }, [moving, hovered, slides.length, seconds]);\n\n  return (\n    // biome-ignore lint/a11y/noStaticElementInteractions: it only notices the pointer and the keyboard in it, to stop the pictures; its buttons are what visitors use\n    <div\n      className=\"absolute inset-0\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => setHovered(true)}\n      onBlur={() => setHovered(false)}\n    >\n      {slides.map((slide, index) => (\n        <SiteImage\n          // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n          key={index}\n          src={slide.image}\n          alt={index === shown ? slide.alt : \"\"}\n          // Pictures not shown, and ones without a description, are only there to look at.\n          aria-hidden={index === shown && slide.alt ? undefined : true}\n          className={`${classes.picture} ${index === shown ? \"opacity-100\" : \"opacity-0\"}`}\n        />\n      ))}\n      {slides.length > 1 && (\n        <div className={classes.controls}>\n          {!still && (\n            <button type=\"button\" onClick={() => setStopped(!stopped)} className={classes.pause}>\n              {stopped ? words.play : words.pause}\n            </button>\n          )}\n          {slides.map((slide, index) => (\n            <button\n              // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n              key={index}\n              type=\"button\"\n              aria-label={`${words.picture} ${index + 1}${slide.alt ? `: ${slide.alt}` : \"\"}`}\n              aria-current={index === shown}\n              onClick={() => setShown(index)}\n              className={`${classes.dot} ${index === shown ? \"bg-white\" : \"bg-black/50 hover:bg-white/70\"}`}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { SiteImage } from \"@goodfellow-cms/react\";\nimport { useEffect, useState } from \"react\";\n\n/** Runs with Preact as well as React, so sites whose Client Components all do load Preact instead (see Islands). */\nexport const worksWithPreact = true;\n\n/**\n * The pictures, fading from one to the next every few seconds, with a dot for\n * each and a button that stops them. They stop while the pointer is over them\n * or the keyboard is in them, and don't change by themselves at all for\n * visitors who ask for less motion.\n */\nexport function SlideshowPictures({\n  slides,\n  seconds,\n  words,\n  classes,\n}: {\n  slides: Array<{ image: string; alt: string }>;\n  seconds: number;\n  words: { pause: string; play: string; picture: string };\n  classes: { picture: string; controls: string; dot: string; pause: string };\n}) {\n  const [shown, setShown] = useState(0);\n  const [hovered, setHovered] = useState(false);\n  const [stopped, setStopped] = useState(false);\n  const [still, setStill] = useState(false);\n\n  useEffect(() => {\n    const query = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setStill(query.matches);\n    const changed = () => setStill(query.matches);\n    query.addEventListener(\"change\", changed);\n    return () => query.removeEventListener(\"change\", changed);\n  }, []);\n\n  const moving = slides.length > 1 && !still && !stopped;\n  useEffect(() => {\n    if (!moving || hovered) return;\n    const timer = window.setInterval(\n      () => setShown((index) => (index + 1) % slides.length),\n      Math.max(2, seconds) * 1000,\n    );\n    return () => window.clearInterval(timer);\n  }, [moving, hovered, slides.length, seconds]);\n\n  return (\n    // biome-ignore lint/a11y/noStaticElementInteractions: it only notices the pointer and the keyboard in it, to stop the pictures; its buttons are what visitors use\n    <div\n      className=\"absolute inset-0\"\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => setHovered(true)}\n      onBlur={() => setHovered(false)}\n    >\n      {slides.map((slide, index) => (\n        <SiteImage\n          // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n          key={index}\n          src={slide.image}\n          alt={index === shown ? slide.alt : \"\"}\n          // Pictures not shown, and ones without a description, are only there to look at.\n          aria-hidden={index === shown && slide.alt ? undefined : true}\n          className={`${classes.picture} ${index === shown ? \"opacity-100\" : \"opacity-0\"}`}\n        />\n      ))}\n      {slides.length > 1 && (\n        <div className={classes.controls}>\n          {!still && (\n            <button type=\"button\" onClick={() => setStopped(!stopped)} className={classes.pause}>\n              {stopped ? words.play : words.pause}\n            </button>\n          )}\n          {slides.map((slide, index) => (\n            <button\n              // biome-ignore lint/suspicious/noArrayIndexKey: pictures have no ids of their own\n              key={index}\n              type=\"button\"\n              aria-label={`${words.picture} ${index + 1}${slide.alt ? `: ${slide.alt}` : \"\"}`}\n              aria-current={index === shown}\n              onClick={() => setShown(index)}\n              className={`${classes.dot} ${index === shown ? \"bg-white\" : \"bg-black/50 hover:bg-white/70\"}`}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Interactive",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/social-links.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.8.0"
     }
   },
   "dependencies": []

package/r/timeline.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "timeline",
+  "type": "registry:block",
+  "title": "Timeline",
+  "description": "Moments in order down a line, such as an organization's history or the steps of a plan.",
+  "files": [
+    {
+      "path": "blocks/installed/timeline/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\ninterface Moment {\n  when: string;\n  title: string;\n  text: string;\n}\n\nexport interface TimelineProps {\n  heading: string;\n  moments: Moment[];\n  className: string;\n}\n\n/** Moments in order down a line, such as an organization's history or the steps of a plan. */\nconst Timeline: ComponentConfig<TimelineProps> = withParts(\n  {\n    label: \"Timeline\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading\", contentEditable: true },\n      moments: {\n        type: \"array\",\n        label: \"Moments\",\n        arrayFields: {\n          when: { type: \"text\", label: \"When, such as 1902 or Spring 2027\" },\n          title: { type: \"text\", label: \"Title\" },\n          text: { type: \"textarea\", label: \"What happened\" },\n        },\n        defaultItemProps: { when: \"\", title: \"What happened\", text: \"\" },\n        getItemSummary: (moment) => [moment.when, moment.title].filter(Boolean).join(\": \") || \"Moment\",\n      },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"Our history\",\n      moments: [\n        { when: \"1902\", title: \"The first church is built\", text: \"\" },\n        { when: \"1958\", title: \"The school opens\", text: \"\" },\n        { when: \"2002\", title: \"A hundred years\", text: \"\" },\n      ],\n      className: \"\",\n    },\n    render: ({ heading, moments, className }) => {\n      const part = useParts();\n      const Title = heading ? \"h3\" : \"h2\";\n      return (\n        <section className={part(\"gf-timeline\", \"w-full\", className)}>\n          {heading && (\n            <h2 className={part(\"gf-timeline-heading\", \"mb-8 font-heading text-3xl font-semibold\")}>{heading}</h2>\n          )}\n          <ol className={part(\"gf-timeline-list\", \"relative space-y-8 border-l-2 border-border pl-8\")}>\n            {(moments ?? []).map((moment, index) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: moments can share a title\n              <li key={index} className={part(\"gf-timeline-moment\", \"relative\")}>\n                <span\n                  aria-hidden=\"true\"\n                  className={part(\n                    \"gf-timeline-dot\",\n                    \"absolute top-1.5 -left-[2.5625rem] size-4 rounded-full border-2 border-background bg-primary\",\n                  )}\n                />\n                {moment.when && (\n                  <p className={part(\"gf-timeline-when\", \"text-sm font-semibold text-primary\")}>{moment.when}</p>\n                )}\n                <Title className={part(\"gf-timeline-title\", \"font-heading text-xl font-semibold\")}>\n                  {moment.title}\n                </Title>\n                {moment.text && (\n                  <p className={part(\"gf-timeline-text\", \"mt-1 whitespace-pre-line text-muted-foreground\")}>\n                    {moment.text}\n                  </p>\n                )}\n              </li>\n            ))}\n          </ol>\n        </section>\n      );\n    },\n  },\n  {\n    \"gf-timeline\": \"Timeline\",\n    \"gf-timeline-heading\": \"Heading\",\n    \"gf-timeline-list\": \"Line\",\n    \"gf-timeline-moment\": \"Moment\",\n    \"gf-timeline-dot\": \"Dot\",\n    \"gf-timeline-when\": \"When\",\n    \"gf-timeline-title\": \"Title\",\n    \"gf-timeline-text\": \"What happened\",\n  },\n);\n\nexport default withKeywords(Timeline, [\"timeline\", \"history\", \"milestones\", \"steps\", \"events\", \"journey\"]);\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "version": "0.8.0"
+    }
+  },
+  "dependencies": []
+}