create-goodfellow 0.0.0-stage → 0.2.0

package/templates/registry/badge.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "badge",
+  "type": "registry:ui",
+  "dependencies": [
+    "cn",
+    "radix-ui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/badge.tsx",
+      "type": "registry:ui",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\nimport { Slot } from \"radix-ui\"\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n"
+    }
+  ]
+}

package/templates/registry/button.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": [
+    "cn",
+    "radix-ui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/button.tsx",
+      "type": "registry:ui",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\nimport { Slot } from \"radix-ui\"\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n"
+    }
+  ]
+}

package/templates/registry/card.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "type": "registry:ui",
+  "dependencies": [
+    "cn"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/card.tsx",
+      "type": "registry:ui",
+      "content": "import * as React from \"react\"\nimport { cn } from \"cn\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n"
+    }
+  ]
+}

package/templates/registry/carousel.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:ui",
+  "dependencies": [
+    "cn",
+    "embla-carousel-react"
+  ],
+  "registryDependencies": [
+    "@goodfellow/button"
+  ],
+  "files": [
+    {
+      "path": "components/ui/carousel.tsx",
+      "type": "registry:ui",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"cn\"\nimport useEmblaCarousel, {\n  type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: \"horizontal\" | \"vertical\"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = \"horizontal\",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n    },\n    plugins\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === \"ArrowLeft\") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext]\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on(\"reInit\", onSelect)\n    api.on(\"select\", onSelect)\n\n    return () => {\n      api?.off(\"select\", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation:\n          orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn(\"relative\", className)}\n        role=\"region\"\n        aria-roledescription=\"carousel\"\n        data-slot=\"carousel\"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div\n      ref={carouselRef}\n      className=\"overflow-hidden\"\n      data-slot=\"carousel-content\"\n    >\n      <div\n        className={cn(\n          \"flex\",\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"slide\"\n      data-slot=\"carousel-item\"\n      className={cn(\n        \"min-w-0 shrink-0 grow-0 basis-full\",\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-previous\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -left-12 -translate-y-1/2\"\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className=\"sr-only\">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = \"outline\",\n  size = \"icon\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot=\"carousel-next\"\n      variant={variant}\n      size={size}\n      className={cn(\n        \"absolute size-8 rounded-full\",\n        orientation === \"horizontal\"\n          ? \"top-1/2 -right-12 -translate-y-1/2\"\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n        className\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className=\"sr-only\">Next slide</span>\n    </Button>\n  )\n}\n\nexport {\n  type CarouselApi,\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselPrevious,\n  CarouselNext,\n}\n"
+    }
+  ]
+}

package/templates/registry/custom-html.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-html",
+  "type": "registry:block",
+  "title": "Custom HTML",
+  "description": "HTML written by hand, such as a widget's embed code. Made safe unless you choose to use it exactly as written.",
+  "files": [
+    {
+      "path": "blocks/installed/custom-html/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, sanitizeHtml } 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 only inside a\n * sandboxed frame, where it can't reach the admin panel. Its scripts run\n * whenever its page is shown, also after moving to it on a Next.js site.\n */\nconst CustomHtml: ComponentConfig<CustomHtmlProps> = {\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, puck }) => {\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 || undefined}\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\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/** Tells the editor how tall the HTML is, so the frame fits it. */\nconst REPORT_HEIGHT =\n  \"<script>new ResizeObserver(function(){parent.postMessage({goodfellowHtmlHeight:document.documentElement.scrollHeight},'*')}).observe(document.documentElement)</script>\";\n\n/**\n * Shows HTML as it was written, in the editor only: inside a frame sandboxed\n * without `allow-same-origin`, so its scripts run on their own and can't reach\n * the admin panel or the editor's sign-in. It has the page's styles.\n */\nexport function HtmlPreview({ html, className }: { html: string; className: string }) {\n  const frame = useRef<HTMLIFrameElement>(null);\n  const [height, setHeight] = useState(120);\n  const [styles, setStyles] = useState(\"\");\n\n  useEffect(() => {\n    const document = frame.current?.ownerDocument;\n    const view = document?.defaultView;\n    if (!document || !view) return;\n    setStyles(\n      [...document.querySelectorAll('link[rel=\"stylesheet\"], style')].map((element) => element.outerHTML).join(\"\"),\n    );\n    const onMessage = (event: MessageEvent) => {\n      const reported = (event.data as { goodfellowHtmlHeight?: unknown } | null)?.goodfellowHtmlHeight;\n      if (event.source === frame.current?.contentWindow && typeof reported === \"number\") setHeight(Math.ceil(reported));\n    };\n    view.addEventListener(\"message\", onMessage);\n    return () => view.removeEventListener(\"message\", onMessage);\n  }, []);\n\n  return (\n    <iframe\n      ref={frame}\n      title=\"Custom HTML\"\n      sandbox=\"allow-scripts\"\n      srcDoc={`<!doctype html><html><head><meta charset=\"utf-8\">${styles}</head><body style=\"margin:0\">${html}${REPORT_HEIGHT}</body></html>`}\n      className={className || undefined}\n      style={{ display: \"block\", width: \"100%\", height, border: 0 }}\n    />\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"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Advanced",
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/registry.json

@@ -0,0 +1,364 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "goodfellow",
+  "homepage": "https://github.com/goodfellow-cms/goodfellow-cms",
+  "items": [
+    {
+      "name": "shadcn-hero",
+      "type": "registry:block",
+      "title": "Hero",
+      "description": "A large heading at the top of a page, with text, buttons and a picture.",
+      "registryDependencies": [
+        "@goodfellow/button"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-hero/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-cards",
+      "type": "registry:block",
+      "title": "Cards",
+      "description": "A grid of cards, each with a picture, a heading, text and a link.",
+      "registryDependencies": [
+        "@goodfellow/card",
+        "@goodfellow/button"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-cards/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-call-to-action",
+      "type": "registry:block",
+      "title": "Call to action",
+      "description": "A highlighted box asking visitors to do something, with a button.",
+      "registryDependencies": [
+        "@goodfellow/card",
+        "@goodfellow/button"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-call-to-action/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-testimonials",
+      "type": "registry:block",
+      "title": "Testimonials",
+      "description": "Quotes from people, with their names and photos.",
+      "registryDependencies": [
+        "@goodfellow/card"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-testimonials/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-pricing",
+      "type": "registry:block",
+      "title": "Pricing table",
+      "description": "Plans side by side, with prices, what each includes and a button.",
+      "registryDependencies": [
+        "@goodfellow/card",
+        "@goodfellow/badge",
+        "@goodfellow/button"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-pricing/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "version": "0.2.0"
+        }
+      }
+    },
+    {
+      "name": "shadcn-notice",
+      "type": "registry:block",
+      "title": "Notice",
+      "description": "A short message that stands out, such as a closure or a change of times.",
+      "registryDependencies": [
+        "@goodfellow/alert"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-notice/block.tsx",
+          "type": "registry:block"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Page sections",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      }
+    },
+    {
+      "name": "custom-html",
+      "type": "registry:block",
+      "title": "Custom HTML",
+      "description": "HTML written by hand, such as a widget's embed code. Made safe unless you choose to use it exactly as written.",
+      "files": [
+        {
+          "path": "blocks/installed/custom-html/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/custom-html/html-preview.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "blocks/installed/custom-html/html-scripts.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Advanced",
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-faq",
+      "type": "registry:block",
+      "title": "FAQ",
+      "description": "Questions that open to show their answers.",
+      "registryDependencies": [
+        "@goodfellow/accordion"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-faq/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/shadcn-faq/faq-list.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-tabs",
+      "type": "registry:block",
+      "title": "Tabs",
+      "description": "Content split into tabs, one shown at a time.",
+      "registryDependencies": [
+        "@goodfellow/tabs"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-tabs/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/shadcn-tabs/tabs-view.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "recommended": true,
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "shadcn-carousel",
+      "type": "registry:block",
+      "title": "Image carousel",
+      "description": "Pictures shown one at a time, with buttons to move between them.",
+      "registryDependencies": [
+        "@goodfellow/carousel"
+      ],
+      "files": [
+        {
+          "path": "blocks/installed/shadcn-carousel/block.tsx",
+          "type": "registry:block"
+        },
+        {
+          "path": "blocks/installed/shadcn-carousel/image-carousel.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "meta": {
+        "goodfellow": {
+          "category": "Interactive",
+          "version": "0.2.0"
+        }
+      },
+      "dependencies": []
+    },
+    {
+      "name": "accordion",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn",
+        "radix-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/accordion.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "alert",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/alert.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "badge",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn",
+        "radix-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/badge.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "button",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn",
+        "radix-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/button.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "card",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "carousel",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn",
+        "embla-carousel-react"
+      ],
+      "registryDependencies": [
+        "@goodfellow/button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/carousel.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tabs",
+      "type": "registry:ui",
+      "dependencies": [
+        "cn",
+        "radix-ui"
+      ],
+      "registryDependencies": [],
+      "files": [
+        {
+          "path": "components/ui/tabs.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    }
+  ]
+}

package/templates/registry/shadcn-call-to-action.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shadcn-call-to-action",
+  "type": "registry:block",
+  "title": "Call to action",
+  "description": "A highlighted box asking visitors to do something, with a button.",
+  "registryDependencies": [
+    "@goodfellow/card",
+    "@goodfellow/button"
+  ],
+  "files": [
+    {
+      "path": "blocks/installed/shadcn-call-to-action/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, cx, SiteLink } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\ntype Style = \"highlight\" | \"subtle\";\n\nexport interface CallToActionProps {\n  title: string;\n  text: string;\n  buttonLabel: string;\n  buttonLink: string;\n  style: Style;\n  className: string;\n}\n\n/** A highlighted box asking visitors to do something, with a button. */\nconst CallToAction: ComponentConfig<CallToActionProps> = {\n  label: \"Call to action\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\", contentEditable: true },\n    text: { type: \"textarea\", label: \"Text\", contentEditable: true },\n    buttonLabel: { type: \"text\", label: \"Button\" },\n    buttonLink: { type: \"text\", label: \"Button links to\" },\n    style: {\n      type: \"radio\",\n      label: \"Style\",\n      options: [\n        { label: \"In the main color\", value: \"highlight\" },\n        { label: \"Subtle\", value: \"subtle\" },\n      ],\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"Ready to get started?\",\n    text: \"Tell visitors what to do next.\",\n    buttonLabel: \"Get in touch\",\n    buttonLink: \"/contact\",\n    style: \"highlight\",\n    className: \"\",\n  },\n  render: ({ title, text, buttonLabel, buttonLink, style, className }) => {\n    const highlight = style === \"highlight\";\n    return (\n      <section className={cx(\"mx-auto w-full max-w-5xl px-4 py-12\", className)}>\n        <Card className={cx(\"border-0\", highlight ? \"bg-primary text-primary-foreground\" : \"bg-muted\")}>\n          <CardContent className=\"flex flex-col items-start gap-6 p-8 md:flex-row md:items-center md:justify-between md:p-12\">\n            <div className=\"flex flex-col gap-2\">\n              <h2 className=\"text-2xl font-bold tracking-tight md:text-3xl\">{title}</h2>\n              {text && <p className={cx(\"text-lg\", highlight ? \"opacity-90\" : \"text-muted-foreground\")}>{text}</p>}\n            </div>\n            {buttonLabel && (\n              <SiteLink\n                href={buttonLink || \"/\"}\n                className={buttonVariants({ size: \"lg\", variant: highlight ? \"secondary\" : \"default\" })}\n              >\n                {buttonLabel}\n              </SiteLink>\n            )}\n          </CardContent>\n        </Card>\n      </section>\n    );\n  },\n};\n\nexport default CallToAction;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/shadcn-cards.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shadcn-cards",
+  "type": "registry:block",
+  "title": "Cards",
+  "description": "A grid of cards, each with a picture, a heading, text and a link.",
+  "registryDependencies": [
+    "@goodfellow/card",
+    "@goodfellow/button"
+  ],
+  "files": [
+    {
+      "path": "blocks/installed/shadcn-cards/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, cx, mediaField, SiteImage, SiteLink } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\n\ntype Columns = \"2\" | \"3\" | \"4\";\n\ninterface CardItem {\n  title: string;\n  text: string;\n  image: string;\n  imageAlt: string;\n  linkLabel: string;\n  link: string;\n}\n\nexport interface CardsProps {\n  title: string;\n  intro: string;\n  columns: Columns;\n  cards: CardItem[];\n  className: string;\n}\n\nconst columnClasses: Record<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\n/** A grid of cards, each with a picture, a heading, text and a link. */\nconst Cards: ComponentConfig<CardsProps> = {\n  label: \"Cards\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\" },\n    intro: { type: \"textarea\", label: \"Introduction\" },\n    columns: {\n      type: \"radio\",\n      label: \"Cards in a row\",\n      options: [\n        { label: \"2\", value: \"2\" },\n        { label: \"3\", value: \"3\" },\n        { label: \"4\", value: \"4\" },\n      ],\n    },\n    cards: {\n      type: \"array\",\n      label: \"Cards\",\n      arrayFields: {\n        title: { type: \"text\", label: \"Heading\" },\n        text: { type: \"textarea\", label: \"Text\" },\n        image: mediaField(\"Picture\"),\n        imageAlt: { type: \"text\", label: \"Description of the picture for screen readers\" },\n        linkLabel: { type: \"text\", label: \"Link text\" },\n        link: { type: \"text\", label: \"Links to\" },\n      },\n      defaultItemProps: {\n        title: \"A card\",\n        text: \"Say something about it.\",\n        image: \"\",\n        imageAlt: \"\",\n        linkLabel: \"\",\n        link: \"\",\n      },\n      getItemSummary: (card) => card.title || \"Card\",\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"\",\n    intro: \"\",\n    columns: \"3\",\n    cards: [\n      { title: \"First\", text: \"Say something about it.\", image: \"\", imageAlt: \"\", linkLabel: \"\", link: \"\" },\n      { title: \"Second\", text: \"Say something about it.\", image: \"\", imageAlt: \"\", linkLabel: \"\", link: \"\" },\n      { title: \"Third\", text: \"Say something about it.\", image: \"\", imageAlt: \"\", linkLabel: \"\", link: \"\" },\n    ],\n    className: \"\",\n  },\n  render: ({ title, intro, columns, cards, className }) => (\n    <section className={cx(\"mx-auto w-full max-w-6xl px-4 py-12\", className)}>\n      {(title || intro) && (\n        <div className=\"mb-8 flex max-w-3xl flex-col gap-3\">\n          {title && <h2 className=\"text-3xl font-bold tracking-tight\">{title}</h2>}\n          {intro && <p className=\"text-lg text-muted-foreground\">{intro}</p>}\n        </div>\n      )}\n      <div className={cx(\"grid gap-6\", columnClasses[columns])}>\n        {cards.map((card, index) => (\n          // Cards have no ids of their own, and their order is all that tells them apart.\n          // biome-ignore lint/suspicious/noArrayIndexKey: see above\n          <Card key={index} className=\"overflow-hidden pt-0\">\n            {card.image ? (\n              <SiteImage src={card.image} alt={card.imageAlt} className=\"aspect-video w-full object-cover\" />\n            ) : (\n              <div className=\"h-0\" />\n            )}\n            <CardHeader>\n              <CardTitle className=\"text-xl\">{card.title}</CardTitle>\n              {card.text && <CardDescription className=\"text-base\">{card.text}</CardDescription>}\n            </CardHeader>\n            <CardContent className=\"flex-1\" />\n            {card.linkLabel && (\n              <CardFooter>\n                <SiteLink href={card.link || \"/\"} className={buttonVariants({ variant: \"outline\" })}>\n                  {card.linkLabel}\n                </SiteLink>\n              </CardFooter>\n            )}\n          </Card>\n        ))}\n      </div>\n    </section>\n  ),\n};\n\nexport default Cards;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/shadcn-carousel.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shadcn-carousel",
+  "type": "registry:block",
+  "title": "Image carousel",
+  "description": "Pictures shown one at a time, with buttons to move between them.",
+  "registryDependencies": [
+    "@goodfellow/carousel"
+  ],
+  "files": [
+    {
+      "path": "blocks/installed/shadcn-carousel/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, cx, mediaField } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { ImageCarousel } from \"./image-carousel\";\n\ninterface Slide {\n  image: string;\n  alt: string;\n  caption: string;\n}\n\nexport interface CarouselProps {\n  slides: Slide[];\n  loop: boolean;\n  className: string;\n}\n\n/** Pictures shown one at a time, with buttons to move between them. */\nconst Carousel: ComponentConfig<CarouselProps> = {\n  label: \"Image carousel\",\n  fields: {\n    slides: {\n      type: \"array\",\n      label: \"Pictures\",\n      arrayFields: {\n        image: mediaField(\"Picture\"),\n        alt: { type: \"text\", label: \"Description for screen readers\" },\n        caption: { type: \"text\", label: \"Caption\" },\n      },\n      defaultItemProps: { image: \"\", alt: \"\", caption: \"\" },\n      getItemSummary: (slide, index) => slide.caption || slide.alt || `Picture ${(index ?? 0) + 1}`,\n    },\n    loop: {\n      type: \"radio\",\n      label: \"Start again after the last picture\",\n      options: [\n        { label: \"Yes\", value: true },\n        { label: \"No\", value: false },\n      ],\n    },\n    className: classNameField,\n  },\n  defaultProps: { slides: [], loop: true, className: \"\" },\n  render: ({ slides, loop, className }) => (\n    <section className={cx(\"mx-auto w-full max-w-4xl px-14 py-8\", className)}>\n      {slides.length > 0 ? (\n        <ImageCarousel slides={slides.filter((slide) => slide.image)} loop={loop} />\n      ) : (\n        <div className=\"aspect-video w-full rounded-xl bg-muted\" />\n      )}\n    </section>\n  ),\n};\n\nexport default Carousel;\n"
+    },
+    {
+      "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. */\nexport function ImageCarousel({\n  slides,\n  loop,\n}: {\n  slides: Array<{ image: string; alt: string; caption: string }>;\n  loop: boolean;\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=\"aspect-video w-full rounded-xl object-cover\" />\n              {slide.caption && (\n                <figcaption className=\"mt-2 text-center text-sm text-muted-foreground\">{slide.caption}</figcaption>\n              )}\n            </figure>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Interactive",
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/shadcn-faq.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "shadcn-faq",
+  "type": "registry:block",
+  "title": "FAQ",
+  "description": "Questions that open to show their answers.",
+  "registryDependencies": [
+    "@goodfellow/accordion"
+  ],
+  "files": [
+    {
+      "path": "blocks/installed/shadcn-faq/block.tsx",
+      "type": "registry:block",
+      "content": "import { classNameField, cx } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig, RichText } from \"@puckeditor/core\";\nimport { FaqList } from \"./faq-list\";\n\ninterface Question {\n  question: string;\n  answer: RichText;\n}\n\nexport interface FaqProps {\n  title: string;\n  questions: Question[];\n  className: string;\n}\n\n/** Questions that open to show their answers. Every answer is in the page, so search engines see them. */\nconst Faq: ComponentConfig<FaqProps> = {\n  label: \"FAQ\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\" },\n    questions: {\n      type: \"array\",\n      label: \"Questions\",\n      arrayFields: {\n        question: { type: \"text\", label: \"Question\" },\n        answer: { type: \"richtext\", label: \"Answer\" },\n      },\n      defaultItemProps: { question: \"A question\", answer: \"<p>Its answer.</p>\" },\n      getItemSummary: (item) => item.question || \"Question\",\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"Questions and answers\",\n    questions: [\n      { question: \"A question people ask\", answer: \"<p>Its answer.</p>\" },\n      { question: \"Another question\", answer: \"<p>Its answer.</p>\" },\n    ],\n    className: \"\",\n  },\n  render: ({ title, questions, className }) => (\n    <section className={cx(\"mx-auto w-full max-w-3xl px-4 py-12\", className)}>\n      {title && <h2 className=\"mb-6 text-3xl font-bold tracking-tight\">{title}</h2>}\n      <FaqList questions={questions.map(({ question, answer }) => ({ question, answer }))} />\n    </section>\n  ),\n};\n\nexport default Faq;\n"
+    },
+    {
+      "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/** The questions, one open at a time. Closed answers stay in the page, hidden, rather than being left out. */\nexport function FaqList({ questions }: { questions: Array<{ question: string; answer: ReactNode }> }) {\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=\"[&>[data-slot=accordion-content][data-state=closed]]:hidden\"\n        >\n          <AccordionTrigger className=\"text-base\">{item.question}</AccordionTrigger>\n          <AccordionContent forceMount>\n            <div className=\"gf-prose\">{item.answer}</div>\n          </AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Interactive",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}