@goodfellow-cms/registry 0.7.0 → 0.9.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,7 +1,7 @@
 {
   "name": "@goodfellow-cms/registry",
-  "version": "0.7.0",
-  "description": "Goodfellow's block registry: blocks built with shadcn/ui, which sites install from the admin panel.",
+  "version": "0.9.0",
+  "description": "Goodfellow CMS's block registry: blocks built with shadcn/ui, which sites install from the admin panel.",
   "keywords": [
     "goodfellow",
     "cms",
@@ -13,6 +13,10 @@
   ],
   "homepage": "https://goodfellow-cms.github.io/goodfellow-cms/docs/block-registries",
   "bugs": "https://github.com/goodfellow-cms/goodfellow-cms/issues",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/goodfellow-cms"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -28,8 +32,8 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "@goodfellow-cms/core": "0.7.0",
-    "@goodfellow-cms/react": "0.7.0",
+    "@goodfellow-cms/core": "0.9.0",
+    "@goodfellow-cms/react": "0.9.0",
     "@puckeditor/core": "0.23.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",

package/r/comments.json

@@ -0,0 +1,36 @@
+{
+  "$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, where visitors sign in with GitHub to comment, through Disqus, or through the site owner's own Garrul.",
+  "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  type CommentsPlace,\n  consentSource,\n  disqusEmbedUrl,\n  disqusShortname,\n  garrulAddress,\n  garrulEmbedUrl,\n  garrulSlug,\n  isDisqus,\n  isGarrul,\n  type SiteCommentsPlace,\n  type SiteSettings,\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 { DisqusFrame, type DisqusPage } from \"./disqus-frame\";\nimport { GarrulFrame } from \"./garrul-frame\";\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, Disqus's code or shortname, or Garrul's code or\n   * address, for comments kept\n   * somewhere other than where Site Settings' Comments says; left empty, the\n   * block shows those.\n   */\n  code: string;\n  /** Giscus's reactions to the page, offered only for Giscus: Disqus and Garrul have their own settings. */\n  reactions: boolean;\n  /** Where Giscus's box for writing a comment is: above the comments or under them. Offered only for Giscus. */\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\n/**\n * What `DisqusFrame` does, as a script of its own, for a site that asks\n * visitors first: held back in a template until they agree, then run where it\n * is by the consent script. `<` is escaped, so nothing in it can end it.\n */\nexport function disqusLoader({ script, identifier, url }: DisqusPage): string {\n  const json = (value: unknown) => JSON.stringify(value).replace(/</g, \"\\\\u003c\");\n  return `(function(){var w=window,c=function(){this.page.identifier=${identifier ? json(identifier) : \"location.pathname\"};this.page.url=${url ? json(url) : \"location.href\"}};if(w.DISQUS){w.DISQUS.reset({reload:true,config:c});return}w.disqus_config=c;var s=document.createElement(\"script\");s.src=${json(script)};s.async=true;s.setAttribute(\"data-timestamp\",String(Date.now()));document.head.appendChild(s)})();`;\n}\n\n/**\n * Names Garrul's thread by the browser's address, as `garrulSlug()` does,\n * where the block can't know the page (in a Next.js layout), for a site that\n * asks visitors first.\n */\nexport function garrulSlugScript(): string {\n  return `(function(){var e=document.getElementById(\"garrul\");if(e&&!e.dataset.slug)e.dataset.slug=location.pathname.replace(/[^a-zA-Z0-9_\\\\-./]/g,\"-\").slice(0,200)||\"/\"})();`;\n}\n\n/** The page's full address, where the site has a Site address. */\nfunction pageUrl(siteUrl: string | undefined, path: string): string | undefined {\n  if (!siteUrl) return undefined;\n  return `${siteUrl.replace(/\\/+$/, \"\")}${path === \"/\" ? \"/\" : path}`;\n}\n\n/**\n * Where the block's comments are: what its code names, Giscus's, Disqus's or\n * Garrul's, else Site settings' place. Code that's none of theirs names\n * nothing, so a mistake shows in the editor rather than other comments.\n */\nexport function commentsPlace(code: string | undefined, settings: Pick<SiteSettings, \"comments\">) {\n  const pasted = code?.trim() ?? \"\";\n  if (!pasted) return settings.comments;\n  const giscus = giscusSettings(pasted);\n  if (giscus) return giscus;\n  const disqus = disqusShortname(pasted);\n  if (disqus) return { disqus };\n  const garrul = garrulAddress(pasted);\n  return garrul ? { garrul } : undefined;\n}\n\n/** Whether the comments are Giscus's, whose reactions and box for writing the block's settings choose. */\nfunction isGiscus(place: SiteCommentsPlace | undefined): place is CommentsPlace {\n  return place !== undefined && !isDisqus(place) && !isGarrul(place);\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, path, pages, entry } = useSite();\n  const pasted = code?.trim() ?? \"\";\n  const place: SiteCommentsPlace | undefined = commentsPlace(code, settings);\n  if (!place && !puck?.isEditing) return null;\n  // Pages are built on the server: in the browser, it's the editor or a preview, which never load comments.\n  const onSite = typeof document === \"undefined\" && !puck?.isEditing;\n  const frameClass = part(\"gf-comments-frame\", \"w-full\");\n  const consent = settings.consent;\n  /** Another site's script, held back until the visitor agrees, beside the placeholder that asks. */\n  const held = (frame: string, script: string, from: string) => (\n    <div\n      // biome-ignore lint/security/noDangerouslySetInnerHtml: the service's script with escaped settings, held back until the visitor agrees\n      dangerouslySetInnerHTML={{\n        __html: `${frame}<template ${CONSENT_CODE_ATTRIBUTE}=\"body\">${script}</template><div class=\"gf-consent-placeholder gf-consent-inline\" ${CONSENT_PLACEHOLDER_ATTRIBUTE}=\"\"><p>${escapeText((consent?.held ?? \"\").replaceAll(\"{site}\", consentSource(from)))}</p><button type=\"button\" ${CONSENT_ACCEPT_ATTRIBUTE}=\"content\">${escapeText(consent?.show ?? \"\")}</button></div>`,\n      }}\n    />\n  );\n  let body: ReactNode;\n  if (!place) {\n    const link = pasted ? undefined : adminLink?.(\"comments-settings\");\n    const text = pasted\n      ? \"This isn't Giscus's, Disqus's or Garrul's code. On giscus.app, choose the repository and category, then copy the code at the end of the page; or paste Disqus's code or its site's shortname, or Garrul's code or its address.\"\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        {isDisqus(place)\n          ? `Comments from Disqus, for its site ${place.disqus}, show here on the site.`\n          : isGarrul(place)\n            ? `Comments from Garrul, at ${place.garrul}, show here on the site.`\n            : `Comments from ${place.repo}'s discussions show here on the site.`}\n      </p>\n    );\n  } else if (isDisqus(place)) {\n    const page: DisqusPage = {\n      script: disqusEmbedUrl(place.disqus),\n      identifier: path || undefined,\n      url: path ? pageUrl(settings.url, path) : undefined,\n    };\n    body = consent ? (\n      held(\n        `<div id=\"disqus_thread\" class=\"${escapeText(frameClass)}\"></div>`,\n        `<script>${disqusLoader(page)}</script>`,\n        \"https://disqus.com\",\n      )\n    ) : (\n      <DisqusFrame {...page} className={frameClass} />\n    );\n  } else if (isGarrul(place)) {\n    const script = garrulEmbedUrl(place.garrul);\n    const title =\n      (entry?.content.fields.title as string | undefined) || pages?.find((page) => page.path === path)?.title;\n    const url = path ? pageUrl(settings.url, path) : undefined;\n    // In a Next.js layout, where the page isn't known, Garrul names the thread by the browser's address.\n    const attributes: Record<string, string> = {\n      \"data-api\": place.garrul,\n      ...(path ? { \"data-slug\": garrulSlug(path) } : {}),\n      ...(title ? { \"data-title\": title } : {}),\n      ...(url ? { \"data-url\": url } : {}),\n      \"data-lang\": (settings.language ?? \"en\").split(\"-\")[0] ?? \"en\",\n      ...(settings.theme?.darkMode ? {} : { \"data-theme\": \"light\" }),\n    };\n    if (!path) attributes[\"data-slug\"] = \"\";\n    if (consent) {\n      const element = `<div id=\"garrul\" class=\"${escapeText(frameClass)}\"${Object.entries(attributes)\n        .map(([name, value]) => ` ${name}=\"${escapeText(value)}\"`)\n        .join(\"\")}></div>`;\n      // Fills in the thread's name from the browser's address where the page isn't known, then loads Garrul.\n      const name = path ? \"\" : `<script>${garrulSlugScript()}</script>`;\n      body = held(element, `${name}<script src=\"${escapeText(script)}\" async></script>`, place.garrul);\n    } else {\n      body = <GarrulFrame script={script} attributes={attributes} className={frameClass} />;\n    }\n  } else {\n    const attributes: Record<string, string> = {\n      \"data-repo\": place.repo,\n      \"data-repo-id\": place.repoId,\n      \"data-category\": place.category,\n      \"data-category-id\": place.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    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      body = held(`<div class=\"giscus ${escapeText(frameClass)}\"></div>`, script, GISCUS_SCRIPT);\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, where visitors sign in with GitHub to comment, by\n * Disqus, or by Garrul, which the site's owner runs on Cloudflare. Where they're kept is Site Settings' Comments (`content/site.json`'s\n * `comments`), unless the block is given Giscus's, Disqus's or Garrul's code\n * for somewhere else.\n * Either 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, Disqus's or Garrul'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    // Reactions and the box for writing are Giscus's settings; Disqus and Garrul have their own, on their own pages.\n    resolveFields: (data, { fields, metadata }) => {\n      const settings = (metadata?.site as SiteSettings | undefined) ?? {};\n      if (isGiscus(commentsPlace(data.props.code, settings))) return fields;\n      const { reactions: _reactions, input: _input, ...others } = fields;\n      return others as typeof fields;\n    },\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, [\n  \"comments\",\n  \"discussion\",\n  \"giscus\",\n  \"disqus\",\n  \"garrul\",\n  \"replies\",\n  \"feedback\",\n  \"github\",\n]);\n"
+    },
+    {
+      "path": "blocks/installed/comments/disqus-frame.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport { useEffect } 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/** What Disqus's script reads from the page it's on. */\nexport interface DisqusPage {\n  /** Disqus's script for the site, `https://<shortname>.disqus.com/embed.js`. */\n  script: string;\n  /**\n   * What Disqus knows the page's comments by: its address on the site, without\n   * the base path; where the block can't know it (in a Next.js layout), the\n   * address the browser has.\n   */\n  identifier?: string;\n  /** The page's full address, from the Site address, or else where the browser has it. */\n  url?: string;\n}\n\ninterface DisqusWindow {\n  DISQUS?: { reset(options: { reload: boolean; config: () => void }): void };\n  disqus_config?: () => void;\n}\n\n/**\n * Disqus's comments, loaded once the page has: its script reads\n * `disqus_config` and puts the comments in `#disqus_thread`, which it finds by\n * its id. After moving to another page on a Next.js site, which keeps the same\n * document and so Disqus's script, Disqus is told the page changed instead.\n */\nexport function DisqusFrame({ script, identifier, url, className }: DisqusPage & { className: string }) {\n  useEffect(() => {\n    const page = window as unknown as DisqusWindow;\n    const config = function (this: { page: { identifier: string; url: string } }) {\n      this.page.identifier = identifier ?? location.pathname;\n      this.page.url = url ?? location.href;\n    };\n    if (page.DISQUS) {\n      page.DISQUS.reset({ reload: true, config });\n      return;\n    }\n    page.disqus_config = config;\n    const element = document.createElement(\"script\");\n    element.src = script;\n    element.async = true;\n    element.setAttribute(\"data-timestamp\", String(Date.now()));\n    document.head.appendChild(element);\n  }, [script, identifier, url]);\n  return <div id=\"disqus_thread\" className={className} />;\n}\n"
+    },
+    {
+      "path": "blocks/installed/comments/garrul-frame.tsx",
+      "type": "registry:component",
+      "content": "\"use client\";\n\nimport { garrulSlug } from \"@goodfellow-cms/core\";\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/** The elements Garrul's script has been loaded for, which it can show comments in only once. */\nconst started = new WeakSet<Element>();\n\n/**\n * Garrul's comments, loaded once the page has: its script reads its settings\n * from `#garrul`'s attributes, which it finds by its id, and puts the comments\n * there. Its script runs again whenever it's added, so after moving to another\n * page on a Next.js site, which keeps the same document, adding it again shows\n * the new page's. Where the block can't know the page (in a Next.js layout),\n * the thread is named by the browser's address.\n */\nexport function GarrulFrame({\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  useEffect(() => {\n    const host = box.current;\n    if (!host || started.has(host)) return;\n    started.add(host);\n    if (!host.dataset.slug) host.dataset.slug = garrulSlug(location.pathname);\n    const element = document.createElement(\"script\");\n    element.src = script;\n    element.async = true;\n    document.head.appendChild(element);\n  }, [script]);\n  return <div ref={box} id=\"garrul\" className={className} {...attributes} />;\n}\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.9.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.9.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, so an item's values filled into a collection's template are escaped here, as in rich text.\n      html: { type: \"textarea\", label: \"HTML\", metadata: { html: true } },\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.9.0"
     }
   },
   "dependencies": []

package/r/feed-list.json

@@ -8,13 +8,13 @@
     {
       "path": "blocks/installed/feed-list/block.tsx",
       "type": "registry:block",
-      "content": "import { addDays, changesOn, todayIn } from \"@goodfellow-cms/core\";\nimport { classNameField, SiteLink, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface FeedItem {\n  title: string;\n  link: string;\n  date: string;\n}\n\nexport interface FeedListProps {\n  heading: string;\n  feed: string;\n  limit: number;\n  showDates: boolean;\n  moreLabel: string;\n  moreHref: string;\n  emptyText: string;\n  className: string;\n  /** Read from the feed when the site is built. */\n  items?: FeedItem[];\n}\n\n/** How long a build reuses a feed it has read. */\nconst FEED_CACHE_MS = 600_000;\nconst FEED_LIMIT = 5_242_880;\nconst feedCache = new Map<string, { at: number; text: Promise<string> }>();\n\n/** Fetches an RSS or Atom feed from an `https://` address, once every few minutes. */\nasync function fetchFeed(address: string): Promise<string> {\n  const url = address.trim();\n  if (!/^https?:\\/\\//i.test(url)) throw new Error(\"The feed's address must start with https://.\");\n  const cached = feedCache.get(url);\n  if (cached && Date.now() - cached.at < FEED_CACHE_MS) return cached.text;\n  const text = (async () => {\n    const response = await fetch(url, {\n      headers: { accept: \"application/rss+xml, application/atom+xml, application/xml, text/xml\" },\n      signal: AbortSignal.timeout(20_000),\n    });\n    if (!response.ok) throw new Error(`The feed's address answered ${response.status}.`);\n    const body = await response.text();\n    if (body.length > FEED_LIMIT) throw new Error(\"The feed is too large to read.\");\n    return body;\n  })();\n  feedCache.set(url, { at: Date.now(), text });\n  text.catch(() => feedCache.delete(url));\n  return text;\n}\n\nconst entities: Record<string, string> = { amp: \"&\", lt: \"<\", gt: \">\", quot: '\"', apos: \"'\", nbsp: \" \" };\n\n/** A tag's text, without CDATA markers, tags or entities. */\nfunction decode(text: string): string {\n  return text\n    .replace(/<!\\[CDATA\\[([\\s\\S]*?)\\]\\]>/g, \"$1\")\n    .replace(/<[^>]*>/g, \"\")\n    .replace(/&#x([0-9a-f]+);/gi, (_, hex) => String.fromCodePoint(Number.parseInt(hex, 16)))\n    .replace(/&#(\\d+);/g, (_, code) => String.fromCodePoint(Number(code)))\n    .replace(/&([a-z]+);/gi, (match, name) => entities[name.toLowerCase()] ?? match)\n    .trim();\n}\n\nfunction tag(xml: string, name: string): string {\n  const match = xml.match(new RegExp(`<${name}(?:\\\\s[^>]*)?>([\\\\s\\\\S]*?)</${name}>`, \"i\"));\n  return decode(match?.[1] ?? \"\");\n}\n\n/** An Atom entry's link: its `alternate` one, or the first. */\nfunction atomLink(xml: string): string {\n  const links = [...xml.matchAll(/<link\\b([^>]*)\\/?>/gi)].map((match) => match[1] ?? \"\");\n  const chosen = links.find((attrs) => !/rel=[\"'](?!alternate)/i.test(attrs)) ?? links[0] ?? \"\";\n  return chosen.match(/href=[\"']([^\"']+)[\"']/i)?.[1] ?? \"\";\n}\n\n/** The titles, links and dates of an RSS or Atom feed's items. Their text and descriptions are left out. */\nexport function readFeedItems(xml: string): FeedItem[] {\n  const rss = [...xml.matchAll(/<item\\b[^>]*>([\\s\\S]*?)<\\/item>/gi)].map(([, item = \"\"]) => ({\n    title: tag(item, \"title\"),\n    link: tag(item, \"link\") || tag(item, \"guid\"),\n    date: tag(item, \"pubDate\") || tag(item, \"dc:date\"),\n  }));\n  const items = rss.length\n    ? rss\n    : [...xml.matchAll(/<entry\\b[^>]*>([\\s\\S]*?)<\\/entry>/gi)].map(([, entry = \"\"]) => ({\n        title: tag(entry, \"title\"),\n        link: atomLink(entry),\n        date: tag(entry, \"published\") || tag(entry, \"updated\"),\n      }));\n  return items.filter((item) => item.title && /^https?:\\/\\//i.test(item.link));\n}\n\nfunction formatDate(date: string, timeZone: string | undefined, language: string | undefined): string {\n  const parsed = new Date(date);\n  if (Number.isNaN(parsed.getTime())) return \"\";\n  return parsed.toLocaleDateString(language || \"en\", { month: \"long\", day: \"numeric\", year: \"numeric\", timeZone });\n}\n\n/**\n * The latest items of another site's news feed (RSS or Atom), such as a podcast's episodes or a\n * news site's headlines: each one's title, linking to it, and its date. The feed is read when the\n * site is built, and the block asks for a rebuild the next day, so overnight builds keep it current.\n * Only titles, links and dates are shown, never the items' text.\n */\nconst FeedList: ComponentConfig<FeedListProps> = withParts(\n  {\n    label: \"News feed\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading (leave empty for none)\", contentEditable: true },\n      feed: { type: \"text\", label: \"The feed's address (RSS or Atom)\", placeholder: \"https://example.org/feed.xml\" },\n      limit: { type: \"number\", label: \"How many\", min: 1, max: 50 },\n      showDates: {\n        type: \"radio\",\n        label: \"Show dates\",\n        options: [\n          { label: \"Yes\", value: true },\n          { label: \"No\", value: false },\n        ],\n      },\n      moreLabel: { type: \"text\", label: 'Link under the list, such as \"View all\" (leave empty for none)' },\n      moreHref: { type: \"text\", label: \"Where the link goes\" },\n      emptyText: { type: \"text\", label: \"Text when the feed can't be read\" },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"\",\n      feed: \"\",\n      limit: 5,\n      showDates: true,\n      moreLabel: \"\",\n      moreHref: \"\",\n      emptyText: \"Nothing to show right now.\",\n      className: \"\",\n    },\n    resolveData: async ({ props }, { metadata }) => {\n      if (typeof document !== \"undefined\" || !props.feed?.trim()) return { props: { ...props, items: undefined } };\n      const site = metadata.site as { timeZone?: string; language?: string } | undefined;\n      try {\n        // Feeds change daily, so the overnight build should run again tomorrow.\n        changesOn(addDays(todayIn(site?.timeZone), 1));\n        const items = readFeedItems(await fetchFeed(props.feed))\n          .slice(0, Math.max(1, props.limit || 5))\n          .map((item) => ({ ...item, date: formatDate(item.date, site?.timeZone, site?.language) }));\n        return { props: { ...props, items } };\n      } catch (error) {\n        console.warn(\n          `The feed at ${props.feed} couldn't be read, so the page is built without it: ${(error as Error).message}`,\n        );\n        return { props: { ...props, items: [] } };\n      }\n    },\n    render: ({ heading, feed, items, showDates, moreLabel, moreHref, emptyText, className, puck }) => {\n      const part = useParts();\n      return (\n        <div className={part(\"gf-feed-list\", \"text-foreground\", className)}>\n          {heading && (\n            <h2 className={part(\"gf-feed-list-heading\", \"font-heading text-2xl font-semibold\")}>{heading}</h2>\n          )}\n          {items && items.length > 0 ? (\n            <ul className={part(\"gf-feed-list-items\", \"mt-3 divide-y divide-border\")}>\n              {items.map((item, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: two items can link to the same address\n                <li key={`${index}-${item.link}`} className={part(\"gf-feed-list-item\", \"py-2\")}>\n                  <SiteLink href={item.link} className={part(\"gf-feed-list-link\", \"font-medium hover:underline\")}>\n                    {item.title}\n                  </SiteLink>\n                  {showDates && item.date && (\n                    <span className={part(\"gf-feed-list-date\", \"block text-sm text-muted-foreground\")}>\n                      {item.date}\n                    </span>\n                  )}\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <p className={part(\"gf-feed-list-empty\", \"mt-3 text-muted-foreground\")}>\n              {puck?.isEditing && feed ? `The latest items from ${feed} appear here on the site.` : emptyText}\n            </p>\n          )}\n          {moreLabel && moreHref && (\n            <SiteLink\n              href={moreHref}\n              className={part(\n                \"gf-feed-list-more\",\n                \"mt-3 inline-block text-sm font-semibold text-primary hover:underline\",\n              )}\n            >\n              {moreLabel}\n            </SiteLink>\n          )}\n        </div>\n      );\n    },\n  },\n  {\n    \"gf-feed-list\": \"News feed\",\n    \"gf-feed-list-heading\": \"Heading\",\n    \"gf-feed-list-items\": \"List\",\n    \"gf-feed-list-item\": \"Item\",\n    \"gf-feed-list-link\": \"Item's title\",\n    \"gf-feed-list-date\": \"Item's date\",\n    \"gf-feed-list-empty\": \"Text when empty\",\n    \"gf-feed-list-more\": \"Link under the list\",\n  },\n);\n\nexport default withKeywords(FeedList, [\"rss\", \"atom\", \"feed\", \"news\", \"podcast\", \"headlines\"]);\n"
+      "content": "import { addDays, changesOn, readRemoteText, todayIn } from \"@goodfellow-cms/core\";\nimport { classNameField, SiteLink, useParts, withKeywords, withParts } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\n\nexport interface FeedItem {\n  title: string;\n  link: string;\n  date: string;\n}\n\nexport interface FeedListProps {\n  heading: string;\n  feed: string;\n  limit: number;\n  showDates: boolean;\n  moreLabel: string;\n  moreHref: string;\n  emptyText: string;\n  className: string;\n  /** Read from the feed when the site is built. */\n  items?: FeedItem[];\n}\n\n/** How long a build reuses a feed it has read. */\nconst FEED_CACHE_MS = 600_000;\nconst FEED_LIMIT = 5_242_880;\nconst feedCache = new Map<string, { at: number; text: Promise<string> }>();\n\n/**\n * Fetches an RSS or Atom feed from an `https://` address, once every few\n * minutes, never from this computer or a private network, since builds run\n * on CI's and developers' computers.\n */\nasync function fetchFeed(address: string): Promise<string> {\n  const url = address.trim();\n  const cached = feedCache.get(url);\n  if (cached && Date.now() - cached.at < FEED_CACHE_MS) return cached.text;\n  const text = readRemoteText(url, {\n    what: \"feed\",\n    accept: \"application/rss+xml, application/atom+xml, application/xml, text/xml\",\n    limit: FEED_LIMIT,\n  });\n  feedCache.set(url, { at: Date.now(), text });\n  text.catch(() => feedCache.delete(url));\n  return text;\n}\n\nconst entities: Record<string, string> = { amp: \"&\", lt: \"<\", gt: \">\", quot: '\"', apos: \"'\", nbsp: \" \" };\n\n/** A tag's text, without CDATA markers, tags or entities. */\nfunction decode(text: string): string {\n  return text\n    .replace(/<!\\[CDATA\\[([\\s\\S]*?)\\]\\]>/g, \"$1\")\n    .replace(/<[^>]*>/g, \"\")\n    .replace(/&#x([0-9a-f]+);/gi, (_, hex) => String.fromCodePoint(Number.parseInt(hex, 16)))\n    .replace(/&#(\\d+);/g, (_, code) => String.fromCodePoint(Number(code)))\n    .replace(/&([a-z]+);/gi, (match, name) => entities[name.toLowerCase()] ?? match)\n    .trim();\n}\n\nfunction tag(xml: string, name: string): string {\n  const match = xml.match(new RegExp(`<${name}(?:\\\\s[^>]*)?>([\\\\s\\\\S]*?)</${name}>`, \"i\"));\n  return decode(match?.[1] ?? \"\");\n}\n\n/** An Atom entry's link: its `alternate` one, or the first. */\nfunction atomLink(xml: string): string {\n  const links = [...xml.matchAll(/<link\\b([^>]*)\\/?>/gi)].map((match) => match[1] ?? \"\");\n  const chosen = links.find((attrs) => !/rel=[\"'](?!alternate)/i.test(attrs)) ?? links[0] ?? \"\";\n  return chosen.match(/href=[\"']([^\"']+)[\"']/i)?.[1] ?? \"\";\n}\n\n/** The titles, links and dates of an RSS or Atom feed's items. Their text and descriptions are left out. */\nexport function readFeedItems(xml: string): FeedItem[] {\n  const rss = [...xml.matchAll(/<item\\b[^>]*>([\\s\\S]*?)<\\/item>/gi)].map(([, item = \"\"]) => ({\n    title: tag(item, \"title\"),\n    link: tag(item, \"link\") || tag(item, \"guid\"),\n    date: tag(item, \"pubDate\") || tag(item, \"dc:date\"),\n  }));\n  const items = rss.length\n    ? rss\n    : [...xml.matchAll(/<entry\\b[^>]*>([\\s\\S]*?)<\\/entry>/gi)].map(([, entry = \"\"]) => ({\n        title: tag(entry, \"title\"),\n        link: atomLink(entry),\n        date: tag(entry, \"published\") || tag(entry, \"updated\"),\n      }));\n  return items.filter((item) => item.title && /^https?:\\/\\//i.test(item.link));\n}\n\nfunction formatDate(date: string, timeZone: string | undefined, language: string | undefined): string {\n  const parsed = new Date(date);\n  if (Number.isNaN(parsed.getTime())) return \"\";\n  return parsed.toLocaleDateString(language || \"en\", { month: \"long\", day: \"numeric\", year: \"numeric\", timeZone });\n}\n\n/**\n * The latest items of another site's news feed (RSS or Atom), such as a podcast's episodes or a\n * news site's headlines: each one's title, linking to it, and its date. The feed is read when the\n * site is built, and the block asks for a rebuild the next day, so overnight builds keep it current.\n * Only titles, links and dates are shown, never the items' text.\n */\nconst FeedList: ComponentConfig<FeedListProps> = withParts(\n  {\n    label: \"News feed\",\n    fields: {\n      heading: { type: \"text\", label: \"Heading (leave empty for none)\", contentEditable: true },\n      feed: { type: \"text\", label: \"The feed's address (RSS or Atom)\", placeholder: \"https://example.org/feed.xml\" },\n      limit: { type: \"number\", label: \"How many\", min: 1, max: 50 },\n      showDates: {\n        type: \"radio\",\n        label: \"Show dates\",\n        options: [\n          { label: \"Yes\", value: true },\n          { label: \"No\", value: false },\n        ],\n      },\n      moreLabel: { type: \"text\", label: 'Link under the list, such as \"View all\" (leave empty for none)' },\n      moreHref: { type: \"text\", label: \"Where the link goes\" },\n      emptyText: { type: \"text\", label: \"Text when the feed can't be read\" },\n      className: classNameField,\n    },\n    defaultProps: {\n      heading: \"\",\n      feed: \"\",\n      limit: 5,\n      showDates: true,\n      moreLabel: \"\",\n      moreHref: \"\",\n      emptyText: \"Nothing to show right now.\",\n      className: \"\",\n    },\n    resolveData: async ({ props }, { metadata }) => {\n      if (typeof document !== \"undefined\" || !props.feed?.trim()) return { props: { ...props, items: undefined } };\n      const site = metadata.site as { timeZone?: string; language?: string } | undefined;\n      try {\n        // Feeds change daily, so the overnight build should run again tomorrow.\n        changesOn(addDays(todayIn(site?.timeZone), 1));\n        const items = readFeedItems(await fetchFeed(props.feed))\n          .slice(0, Math.max(1, props.limit || 5))\n          .map((item) => ({ ...item, date: formatDate(item.date, site?.timeZone, site?.language) }));\n        return { props: { ...props, items } };\n      } catch (error) {\n        console.warn(\n          `The feed at ${props.feed} couldn't be read, so the page is built without it: ${(error as Error).message}`,\n        );\n        return { props: { ...props, items: [] } };\n      }\n    },\n    render: ({ heading, feed, items, showDates, moreLabel, moreHref, emptyText, className, puck }) => {\n      const part = useParts();\n      return (\n        <div className={part(\"gf-feed-list\", \"text-foreground\", className)}>\n          {heading && (\n            <h2 className={part(\"gf-feed-list-heading\", \"font-heading text-2xl font-semibold\")}>{heading}</h2>\n          )}\n          {items && items.length > 0 ? (\n            <ul className={part(\"gf-feed-list-items\", \"mt-3 divide-y divide-border\")}>\n              {items.map((item, index) => (\n                // biome-ignore lint/suspicious/noArrayIndexKey: two items can link to the same address\n                <li key={`${index}-${item.link}`} className={part(\"gf-feed-list-item\", \"py-2\")}>\n                  <SiteLink href={item.link} className={part(\"gf-feed-list-link\", \"font-medium hover:underline\")}>\n                    {item.title}\n                  </SiteLink>\n                  {showDates && item.date && (\n                    <span className={part(\"gf-feed-list-date\", \"block text-sm text-muted-foreground\")}>\n                      {item.date}\n                    </span>\n                  )}\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <p className={part(\"gf-feed-list-empty\", \"mt-3 text-muted-foreground\")}>\n              {puck?.isEditing && feed ? `The latest items from ${feed} appear here on the site.` : emptyText}\n            </p>\n          )}\n          {moreLabel && moreHref && (\n            <SiteLink\n              href={moreHref}\n              className={part(\n                \"gf-feed-list-more\",\n                \"mt-3 inline-block text-sm font-semibold text-primary hover:underline\",\n              )}\n            >\n              {moreLabel}\n            </SiteLink>\n          )}\n        </div>\n      );\n    },\n  },\n  {\n    \"gf-feed-list\": \"News feed\",\n    \"gf-feed-list-heading\": \"Heading\",\n    \"gf-feed-list-items\": \"List\",\n    \"gf-feed-list-item\": \"Item\",\n    \"gf-feed-list-link\": \"Item's title\",\n    \"gf-feed-list-date\": \"Item's date\",\n    \"gf-feed-list-empty\": \"Text when empty\",\n    \"gf-feed-list-more\": \"Link under the list\",\n  },\n);\n\nexport default withKeywords(FeedList, [\"rss\", \"atom\", \"feed\", \"news\", \"podcast\", \"headlines\"]);\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
+    }
+  },
+  "dependencies": []
+}

package/r/map.json

@@ -3,18 +3,18 @@
   "name": "map",
   "type": "registry:block",
   "title": "Map",
-  "description": "A Google map of an address or place, or one from Google Maps' embed code. No API key needed.",
+  "description": "A Google map of an address or place, or one from Google Maps' or OpenStreetMap's embed code. No API key needed.",
   "files": [
     {
       "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\ntype MapService = \"google\" | \"openstreetmap\";\n\nexport interface MapProps {\n  /** Whose map it shows: Google Maps where it's missing. */\n  service?: MapService;\n  query: string;\n  title: string;\n  zoom: number;\n  height: number;\n  className: string;\n}\n\nconst OSM = \"https://www.openstreetmap.org\";\n\n/** A latitude and longitude written as `51.5055, -0.0754`, or `undefined`. */\nfunction coordinates(text: string): { lat: number; lon: number } | undefined {\n  const match = /^\\s*(-?\\d+(?:\\.\\d+)?)\\s*,\\s*(-?\\d+(?:\\.\\d+)?)\\s*$/.exec(text);\n  if (!match) return undefined;\n  const lat = Number(match[1]);\n  const lon = Number(match[2]);\n  return Math.abs(lat) <= 90 && Math.abs(lon) <= 180 ? { lat, lon } : undefined;\n}\n\n/** OpenStreetMap's embedded map around a point, with a marker on it, about as wide as a page's column at `zoom`. */\nfunction osmMapAt(lat: number, lon: number, zoom: number): string {\n  const z = Math.min(19, Math.max(1, Math.round(zoom || 15)));\n  const width = (360 / 2 ** z) * (700 / 256);\n  const height = width * 0.6 * Math.cos((lat * Math.PI) / 180);\n  const round = (value: number) => Number(value.toFixed(6));\n  const bbox = [lon - width / 2, lat - height / 2, lon + width / 2, lat + height / 2].map(round).join(\",\");\n  return `${OSM}/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${round(lat)},${round(lon)}`;\n}\n\n/**\n * OpenStreetMap's embedded map: from the embed code its Share button gives\n * (or that address), a link to a place on it (`#map=17/51.5/-0.07`, with\n * `mlat` and `mlon` for a marker), or a latitude and longitude. Addresses\n * can't be looked up without asking OpenStreetMap's search, which pages\n * and the editor don't, so they're refused.\n */\nexport function osmMapAddress(input: string, zoom: number): string | undefined {\n  const text = input.trim();\n  if (!text) return undefined;\n  const point = coordinates(text);\n  if (point) return osmMapAt(point.lat, point.lon, zoom);\n  const given = /<iframe\\b[^>]*\\bsrc=[\"']([^\"']+)[\"']/i.exec(text)?.[1]?.replaceAll(\"&amp;\", \"&\") ?? text;\n  let url: URL;\n  try {\n    url = new URL(given);\n  } catch {\n    return undefined;\n  }\n  if (url.protocol !== \"https:\" || !/^(www\\.)?openstreetmap\\.org$/.test(url.hostname)) return undefined;\n  if (url.pathname === \"/export/embed.html\") {\n    const bbox = url.searchParams.get(\"bbox\") ?? \"\";\n    if (!/^-?[\\d.]+,-?[\\d.]+,-?[\\d.]+,-?[\\d.]+$/.test(bbox)) return undefined;\n    const marker = url.searchParams.get(\"marker\");\n    const params = new URLSearchParams({ bbox, layer: \"mapnik\" });\n    if (marker && coordinates(marker)) params.set(\"marker\", marker);\n    return `${OSM}/export/embed.html?${params.toString().replaceAll(\"%2C\", \",\")}`;\n  }\n  const view = /map=(\\d+)\\/(-?[\\d.]+)\\/(-?[\\d.]+)/.exec(url.hash);\n  const mlat = url.searchParams.get(\"mlat\");\n  const mlon = url.searchParams.get(\"mlon\");\n  const marked = mlat && mlon ? coordinates(`${mlat},${mlon}`) : undefined;\n  const centre = marked ?? (view ? coordinates(`${view[2]},${view[3]}`) : undefined);\n  return centre ? osmMapAt(centre.lat, centre.lon, view ? Number(view[1]) : zoom) : undefined;\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({\n  service,\n  query,\n  title,\n  zoom,\n  height,\n  className,\n  puck,\n}: MapProps & { puck?: { isEditing?: boolean } }) {\n  const part = useParts();\n  const osm = service === \"openstreetmap\";\n  const src = osm ? osmMapAddress(query, zoom) : 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        {osm\n          ? query.trim()\n            ? \"OpenStreetMap needs its embed code, a link to a place on it, or a latitude and longitude, such as 51.5055, -0.0754. It can't look addresses up.\"\n            : \"Paste the embed code from OpenStreetMap's Share button, or a latitude and longitude, to show a map.\"\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      // The map needs its scripts and its own address; it can open its site in a new tab, 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/**\n * A map of an address or place, which visitors can move around: Google\n * Maps', or OpenStreetMap's from its embed code or a place's position. No API\n * key needed for either.\n */\nconst MapBlock: ComponentConfig<MapProps> = withParts(\n  {\n    label: \"Map\",\n    fields: {\n      service: {\n        type: \"radio\",\n        label: \"Map\",\n        options: [\n          { label: \"Google Maps\", value: \"google\" },\n          { label: \"OpenStreetMap\", value: \"openstreetmap\" },\n        ],\n      },\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: { service: \"google\", query: \"\", title: \"Map\", zoom: 15, height: 400, className: \"\" },\n    // OpenStreetMap's maps are found by their embed code or a place's position, never an address.\n    resolveFields: (data, { fields }) =>\n      data.props.service === \"openstreetmap\"\n        ? ({\n            ...fields,\n            query: {\n              type: \"textarea\",\n              label:\n                \"The embed code from OpenStreetMap's Share button, a link to a place on it, or a latitude and longitude\",\n              placeholder: \"51.5055, -0.0754\",\n            },\n            zoom: {\n              type: \"number\",\n              label: \"Zoom, for a latitude and longitude (1 is the world, 19 a building)\",\n              min: 1,\n              max: 19,\n            },\n          } as typeof fields)\n        : fields,\n    render: (props) => <MapView {...props} />,\n  },\n  { \"gf-map\": \"Map\" },\n);\n\nexport default withKeywords(MapBlock, [\n  \"map\",\n  \"google maps\",\n  \"openstreetmap\",\n  \"osm\",\n  \"address\",\n  \"location\",\n  \"directions\",\n]);\n"
     }
   ],
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
+    }
+  },
+  "dependencies": []
+}

package/r/panel.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
+    }
+  },
+  "dependencies": []
+}

package/r/registry.json

@@ -21,7 +21,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -45,7 +45,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -69,7 +69,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -92,7 +92,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -119,7 +119,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       }
     },
@@ -144,7 +144,7 @@
         "goodfellow": {
           "category": "Page sections",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       }
     },
@@ -162,7 +162,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -171,7 +171,7 @@
       "name": "map",
       "type": "registry:block",
       "title": "Map",
-      "description": "A Google map of an address or place, or one from Google Maps' embed code. No API key needed.",
+      "description": "A Google map of an address or place, or one from Google Maps' or OpenStreetMap's embed code. No API key needed.",
       "files": [
         {
           "path": "blocks/installed/map/block.tsx",
@@ -181,7 +181,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -200,7 +200,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -219,7 +219,7 @@
       "meta": {
         "goodfellow": {
           "category": "Page sections",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -242,7 +242,7 @@
       "meta": {
         "goodfellow": {
           "category": "Interactive",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -261,7 +261,137 @@
       "meta": {
         "goodfellow": {
           "category": "Navigation",
-          "version": "0.7.0"
+          "version": "0.9.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.9.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.9.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.9.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.9.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.9.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "comments",
+      "type": "registry:block",
+      "title": "Comments",
+      "description": "Comments on the page through Giscus, kept as GitHub Discussions, where visitors sign in with GitHub to comment, through Disqus, or through the site owner's own Garrul.",
+      "files": [
+        {
+          "path": "blocks/installed/comments/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/comments/disqus-frame.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "blocks/installed/comments/garrul-frame.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "blocks/installed/comments/giscus-frame.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -288,7 +418,7 @@
       "meta": {
         "goodfellow": {
           "category": "Advanced",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -315,7 +445,7 @@
         "goodfellow": {
           "category": "Interactive",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -342,7 +472,7 @@
         "goodfellow": {
           "category": "Interactive",
           "recommended": true,
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []
@@ -368,7 +498,7 @@
       "meta": {
         "goodfellow": {
           "category": "Interactive",
-          "version": "0.7.0"
+          "version": "0.9.0"
         }
       },
       "dependencies": []

package/r/section-links.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Navigation",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
     }
   },
   "dependencies": []

package/r/shadcn-cards.json

@@ -19,7 +19,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.9.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.9.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.9.0"
     }
   },
   "dependencies": []

package/r/shadcn-hero.json

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

package/r/shadcn-notice.json

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

package/r/shadcn-pricing.json

@@ -22,7 +22,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
     }
   },
   "dependencies": []

package/r/shadcn-testimonials.json

@@ -18,7 +18,7 @@
     "goodfellow": {
       "category": "Page sections",
       "recommended": true,
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
     }
   },
   "dependencies": []

package/r/social-links.json

@@ -14,7 +14,7 @@
   "meta": {
     "goodfellow": {
       "category": "Page sections",
-      "version": "0.7.0"
+      "version": "0.9.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.9.0"
+    }
+  },
+  "dependencies": []
+}