create-goodfellow 0.0.0-stage → 0.2.0

package/templates/registry/shadcn-hero.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "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",
+      "content": "import { classNameField, cx, mediaField, SiteImage, SiteLink } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { buttonVariants } from \"@/components/ui/button\";\n\ntype Layout = \"centered\" | \"beside\";\n\nexport interface HeroProps {\n  title: string;\n  text: string;\n  image: string;\n  imageAlt: string;\n  layout: Layout;\n  primaryLabel: string;\n  primaryLink: string;\n  secondaryLabel: string;\n  secondaryLink: string;\n  className: string;\n}\n\n/** A large heading at the top of a page, with text, up to two buttons and a picture. */\nconst Hero: ComponentConfig<HeroProps> = {\n  label: \"Hero\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\", contentEditable: true },\n    text: { type: \"textarea\", label: \"Text\", contentEditable: true },\n    image: mediaField(\"Picture\"),\n    imageAlt: { type: \"text\", label: \"Description of the picture for screen readers\" },\n    layout: {\n      type: \"radio\",\n      label: \"Layout\",\n      options: [\n        { label: \"Centered, picture below\", value: \"centered\" },\n        { label: \"Picture beside the text\", value: \"beside\" },\n      ],\n    },\n    primaryLabel: { type: \"text\", label: \"Main button\" },\n    primaryLink: { type: \"text\", label: \"Main button links to\" },\n    secondaryLabel: { type: \"text\", label: \"Second button (optional)\" },\n    secondaryLink: { type: \"text\", label: \"Second button links to\" },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"Welcome\",\n    text: \"Say in a sentence or two what this site is about.\",\n    image: \"\",\n    imageAlt: \"\",\n    layout: \"centered\",\n    primaryLabel: \"Find out more\",\n    primaryLink: \"/about\",\n    secondaryLabel: \"\",\n    secondaryLink: \"\",\n    className: \"\",\n  },\n  render: ({\n    title,\n    text,\n    image,\n    imageAlt,\n    layout,\n    primaryLabel,\n    primaryLink,\n    secondaryLabel,\n    secondaryLink,\n    className,\n  }) => {\n    const beside = layout === \"beside\";\n    return (\n      <section className={cx(\"mx-auto w-full max-w-6xl px-4 py-16 md:py-24\", className)}>\n        <div\n          className={cx(\"flex flex-col gap-10\", beside ? \"md:flex-row md:items-center\" : \"items-center text-center\")}\n        >\n          <div className={cx(\"flex flex-col gap-6\", beside ? \"md:flex-1\" : \"max-w-3xl items-center\")}>\n            <h1 className=\"text-4xl font-bold tracking-tight text-balance md:text-6xl\">{title}</h1>\n            {text && <p className=\"text-lg text-muted-foreground md:text-xl\">{text}</p>}\n            {(primaryLabel || secondaryLabel) && (\n              <div className=\"flex flex-wrap gap-3\">\n                {primaryLabel && (\n                  <SiteLink href={primaryLink || \"/\"} className={buttonVariants({ size: \"lg\" })}>\n                    {primaryLabel}\n                  </SiteLink>\n                )}\n                {secondaryLabel && (\n                  <SiteLink href={secondaryLink || \"/\"} className={buttonVariants({ size: \"lg\", variant: \"outline\" })}>\n                    {secondaryLabel}\n                  </SiteLink>\n                )}\n              </div>\n            )}\n          </div>\n          {image && (\n            <SiteImage\n              src={image}\n              alt={imageAlt}\n              className={cx(\"w-full rounded-xl object-cover\", beside ? \"md:w-1/2\" : \"max-w-4xl\")}\n            />\n          )}\n        </div>\n      </section>\n    );\n  },\n};\n\nexport default Hero;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/shadcn-notice.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "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",
+      "content": "import { classNameField, cx } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig, RichText } from \"@puckeditor/core\";\nimport { CircleCheckIcon, InfoIcon, TriangleAlertIcon } from \"lucide-react\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\n\ntype Kind = \"info\" | \"warning\" | \"success\" | \"urgent\";\n\nexport interface NoticeProps {\n  kind: Kind;\n  title: string;\n  text: RichText;\n  className: string;\n}\n\nconst icons = { info: InfoIcon, warning: TriangleAlertIcon, success: CircleCheckIcon, urgent: TriangleAlertIcon };\n\n/** A short message that stands out, such as a closure or a change of times. */\nconst Notice: ComponentConfig<NoticeProps> = {\n  label: \"Notice\",\n  fields: {\n    kind: {\n      type: \"select\",\n      label: \"Kind\",\n      options: [\n        { label: \"Information\", value: \"info\" },\n        { label: \"Warning\", value: \"warning\" },\n        { label: \"Good news\", value: \"success\" },\n        { label: \"Urgent\", value: \"urgent\" },\n      ],\n    },\n    title: { type: \"text\", label: \"Heading\", contentEditable: true },\n    text: { type: \"richtext\", label: \"Text\", contentEditable: true },\n    className: classNameField,\n  },\n  defaultProps: { kind: \"info\", title: \"Please note\", text: \"<p>Say what's changed.</p>\", className: \"\" },\n  render: ({ kind, title, text, className }) => {\n    const Icon = icons[kind];\n    return (\n      <div className={cx(\"mx-auto w-full max-w-3xl px-4 py-4\", className)}>\n        <Alert variant={kind === \"urgent\" ? \"destructive\" : \"default\"}>\n          <Icon aria-hidden=\"true\" />\n          {title && <AlertTitle>{title}</AlertTitle>}\n          <AlertDescription>\n            <div className=\"gf-prose\">{text}</div>\n          </AlertDescription>\n        </Alert>\n      </div>\n    );\n  },\n};\n\nexport default Notice;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  }
+}

package/templates/registry/shadcn-pricing.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "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",
+      "content": "import { classNameField, cx, SiteLink } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { CheckIcon } from \"lucide-react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\n\ninterface Plan {\n  name: string;\n  price: string;\n  period: string;\n  description: string;\n  features: string;\n  buttonLabel: string;\n  buttonLink: string;\n  badge: string;\n}\n\nexport interface PricingProps {\n  title: string;\n  intro: string;\n  plans: Plan[];\n  className: string;\n}\n\nconst emptyPlan: Plan = {\n  name: \"Plan\",\n  price: \"$10\",\n  period: \"a month\",\n  description: \"\",\n  features: \"Something included\\nSomething else included\",\n  buttonLabel: \"Choose\",\n  buttonLink: \"/contact\",\n  badge: \"\",\n};\n\n/** Plans side by side, with prices, what each includes and a button. */\nconst Pricing: ComponentConfig<PricingProps> = {\n  label: \"Pricing table\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\" },\n    intro: { type: \"textarea\", label: \"Introduction\" },\n    plans: {\n      type: \"array\",\n      label: \"Plans\",\n      arrayFields: {\n        name: { type: \"text\", label: \"Name\" },\n        price: { type: \"text\", label: \"Price, such as $10\" },\n        period: { type: \"text\", label: \"Per, such as a month\" },\n        description: { type: \"textarea\", label: \"Description\" },\n        features: { type: \"textarea\", label: \"What's included, one per line\" },\n        buttonLabel: { type: \"text\", label: \"Button\" },\n        buttonLink: { type: \"text\", label: \"Button links to\" },\n        badge: { type: \"text\", label: \"Label at the top, such as Most popular (optional)\" },\n      },\n      defaultItemProps: emptyPlan,\n      getItemSummary: (plan) => plan.name || \"Plan\",\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"Prices\",\n    intro: \"\",\n    plans: [\n      { ...emptyPlan, name: \"Basic\" },\n      { ...emptyPlan, name: \"Standard\", price: \"$25\", badge: \"Most popular\" },\n      { ...emptyPlan, name: \"Premium\", price: \"$50\" },\n    ],\n    className: \"\",\n  },\n  render: ({ title, intro, plans, 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 flex-col items-center gap-3 text-center\">\n          {title && <h2 className=\"text-3xl font-bold tracking-tight\">{title}</h2>}\n          {intro && <p className=\"max-w-2xl text-lg text-muted-foreground\">{intro}</p>}\n        </div>\n      )}\n      <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        {plans.map((plan, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: plans have no ids of their own\n          <Card key={index} className={cx(plan.badge && \"border-primary border-2\")}>\n            <CardHeader>\n              <div className=\"flex items-center justify-between gap-2\">\n                <CardTitle className=\"text-xl\">{plan.name}</CardTitle>\n                {plan.badge && <Badge>{plan.badge}</Badge>}\n              </div>\n              {plan.description && <CardDescription>{plan.description}</CardDescription>}\n            </CardHeader>\n            <CardContent className=\"flex flex-1 flex-col gap-6\">\n              <p>\n                <span className=\"text-4xl font-bold\">{plan.price}</span>\n                {plan.period && <span className=\"text-muted-foreground\"> {plan.period}</span>}\n              </p>\n              <ul className=\"flex flex-col gap-2\">\n                {plan.features\n                  .split(\"\\n\")\n                  .map((feature) => feature.trim())\n                  .filter(Boolean)\n                  .map((feature) => (\n                    <li key={feature} className=\"flex items-start gap-2\">\n                      <CheckIcon aria-hidden=\"true\" className=\"mt-0.5 size-4 shrink-0 text-primary\" />\n                      {feature}\n                    </li>\n                  ))}\n              </ul>\n            </CardContent>\n            {plan.buttonLabel && (\n              <CardFooter>\n                <SiteLink\n                  href={plan.buttonLink || \"/\"}\n                  className={cx(buttonVariants({ variant: plan.badge ? \"default\" : \"outline\" }), \"w-full\")}\n                >\n                  {plan.buttonLabel}\n                </SiteLink>\n              </CardFooter>\n            )}\n          </Card>\n        ))}\n      </div>\n    </section>\n  ),\n};\n\nexport default Pricing;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "version": "0.2.0"
+    }
+  }
+}

package/templates/registry/shadcn-tabs.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "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",
+      "content": "import { classNameField, cx } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig, RichText } from \"@puckeditor/core\";\nimport { TabsView } from \"./tabs-view\";\n\ninterface Tab {\n  label: string;\n  content: RichText;\n}\n\nexport interface TabsProps {\n  tabs: Tab[];\n  className: string;\n}\n\n/** Content split into tabs, one shown at a time. Every tab's content is in the page, so search engines see it. */\nconst Tabs: ComponentConfig<TabsProps> = {\n  label: \"Tabs\",\n  fields: {\n    tabs: {\n      type: \"array\",\n      label: \"Tabs\",\n      arrayFields: {\n        label: { type: \"text\", label: \"Tab name\" },\n        content: { type: \"richtext\", label: \"Content\" },\n      },\n      defaultItemProps: { label: \"Tab\", content: \"<p>What this tab shows.</p>\" },\n      getItemSummary: (tab) => tab.label || \"Tab\",\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    tabs: [\n      { label: \"First\", content: \"<p>What the first tab shows.</p>\" },\n      { label: \"Second\", content: \"<p>What the second tab shows.</p>\" },\n    ],\n    className: \"\",\n  },\n  render: ({ tabs, className }) => (\n    <section className={cx(\"mx-auto w-full max-w-4xl px-4 py-8\", className)}>\n      <TabsView tabs={tabs.map(({ label, content }) => ({ label, content }))} />\n    </section>\n  ),\n};\n\nexport default Tabs;\n"
+    },
+    {
+      "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. */\nexport function TabsView({ tabs }: { tabs: Array<{ label: string; content: ReactNode }> }) {\n  if (tabs.length === 0) return null;\n  return (\n    <Tabs defaultValue=\"tab-0\">\n      <TabsList className=\"flex-wrap\">\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}`}>\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=\"pt-4 data-[state=inactive]:hidden\">\n          <div className=\"gf-prose\">{tab.content}</div>\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n}\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Interactive",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/shadcn-testimonials.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "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",
+      "content": "import { classNameField, cx, mediaField, SiteImage } from \"@goodfellow-cms/react\";\nimport type { ComponentConfig } from \"@puckeditor/core\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\n\ninterface Testimonial {\n  quote: string;\n  name: string;\n  role: string;\n  photo: string;\n}\n\nexport interface TestimonialsProps {\n  title: string;\n  testimonials: Testimonial[];\n  className: string;\n}\n\n/** Quotes from people, with their names and photos. */\nconst Testimonials: ComponentConfig<TestimonialsProps> = {\n  label: \"Testimonials\",\n  fields: {\n    title: { type: \"text\", label: \"Heading\" },\n    testimonials: {\n      type: \"array\",\n      label: \"Quotes\",\n      arrayFields: {\n        quote: { type: \"textarea\", label: \"What they said\" },\n        name: { type: \"text\", label: \"Name\" },\n        role: { type: \"text\", label: \"Who they are, such as a member since 2020\" },\n        photo: mediaField(\"Photo\"),\n      },\n      defaultItemProps: { quote: \"Something kind they said.\", name: \"A name\", role: \"\", photo: \"\" },\n      getItemSummary: (item) => item.name || \"Quote\",\n    },\n    className: classNameField,\n  },\n  defaultProps: {\n    title: \"What people say\",\n    testimonials: [\n      { quote: \"Something kind they said.\", name: \"A name\", role: \"\", photo: \"\" },\n      { quote: \"Something else kind they said.\", name: \"Another name\", role: \"\", photo: \"\" },\n    ],\n    className: \"\",\n  },\n  render: ({ title, testimonials, className }) => (\n    <section className={cx(\"mx-auto w-full max-w-6xl px-4 py-12\", className)}>\n      {title && <h2 className=\"mb-8 text-3xl font-bold tracking-tight\">{title}</h2>}\n      <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n        {testimonials.map((item, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: quotes have no ids of their own\n          <Card key={index}>\n            <CardContent className=\"flex-1\">\n              <blockquote className=\"text-lg leading-relaxed\">“{item.quote}”</blockquote>\n            </CardContent>\n            <CardFooter className=\"gap-3\">\n              {item.photo && (\n                <SiteImage src={item.photo} alt=\"\" className=\"size-10 shrink-0 rounded-full object-cover\" />\n              )}\n              <div className=\"flex flex-col\">\n                <span className=\"font-semibold\">{item.name}</span>\n                {item.role && <span className=\"text-sm text-muted-foreground\">{item.role}</span>}\n              </div>\n            </CardFooter>\n          </Card>\n        ))}\n      </div>\n    </section>\n  ),\n};\n\nexport default Testimonials;\n"
+    }
+  ],
+  "meta": {
+    "goodfellow": {
+      "category": "Page sections",
+      "recommended": true,
+      "version": "0.2.0"
+    }
+  },
+  "dependencies": []
+}

package/templates/registry/tabs.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "tabs",
+  "type": "registry:ui",
+  "dependencies": [
+    "cn",
+    "radix-ui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "components/ui/tabs.tsx",
+      "type": "registry:ui",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent\",\n        \"data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n"
+    }
+  ]
+}

package/templates/starter/.github/workflows/deploy.yml

@@ -0,0 +1,84 @@
+# Builds the site and publishes it with GitHub Pages whenever the main branch
+# changes (including every Publish in the admin panel), and once a night so
+# date-based content stays current. Each night it first installs Goodfellow's
+# newest fixes, and publishes them only if the site still builds with them,
+# unless content/updates.json turns automatic updates off.
+# In the repository's Settings → Pages, set "Source" to "GitHub Actions".
+# See README.md.
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  schedule:
+    - cron: "17 4 * * *"
+  workflow_dispatch:
+    inputs:
+      update:
+        description: "Update Goodfellow first: fixes, latest, or a release such as 0.5.0 (an older one goes back to it). Leave empty to only build."
+        required: false
+        default: ""
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  update:
+    # Each night, and when the admin panel's Updates screen asks.
+    if: github.event_name == 'schedule' || (github.event_name == 'workflow_dispatch' && inputs.update != '')
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    outputs:
+      sha: ${{ steps.update.outputs.sha }}
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - id: update
+        env:
+          TO: ${{ inputs.update || 'automatic' }}
+        run: npx goodfellow update --publish --to "$TO"
+
+  build:
+    needs: update
+    # Also when there was no update to run, or it didn't work: the site is built either way.
+    if: ${{ !cancelled() }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          # The update's commit, when it published one.
+          ref: ${{ needs.update.outputs.sha || github.sha }}
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: npm
+      - id: pages
+        uses: actions/configure-pages@v5
+      - run: npm ci
+      # Project sites live in a subfolder (/repository-name/); user and organization sites don't.
+      - run: npx goodfellow build --base "${{ steps.pages.outputs.base_path }}/"
+      - uses: actions/upload-pages-artifact@v4
+        with:
+          path: dist
+
+  deploy:
+    needs: build
+    if: ${{ !cancelled() && needs.build.result == 'success' }}
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

package/templates/starter/.gitlab-ci.yml

@@ -0,0 +1,28 @@
+# Builds the site and publishes it with GitLab Pages whenever the default
+# branch changes (including every Publish in the admin panel). On scheduled
+# pipelines, which the admin panel's Updates screen sets up to run each night,
+# it first installs Goodfellow's newest fixes, unless content/updates.json turns
+# automatic updates off (or the release GOODFELLOW_UPDATE names), and publishes
+# them only if the site still builds with them. That
+# needs "Allow Git push requests to the repository" under Settings → CI/CD →
+# Job token permissions, which the Updates screen turns on. See README.md.
+pages:
+  image: node:22
+  cache:
+    key:
+      files: [package-lock.json]
+    paths: [.npm/]
+  script:
+    - npm ci --cache .npm --prefer-offline
+    - |
+      if [ "$CI_PIPELINE_SOURCE" = "schedule" ] || [ -n "$GOODFELLOW_UPDATE" ]; then
+        git remote set-url origin "https://gitlab-ci-token:${CI_JOB_TOKEN}@${CI_SERVER_FQDN:-$CI_SERVER_HOST}/${CI_PROJECT_PATH}.git"
+        npx goodfellow update --publish --to "${GOODFELLOW_UPDATE:-automatic}" || echo "The update wasn't published; building the site as it is."
+      fi
+    # Pages may serve the site from a subfolder, such as https://group.gitlab.io/site/.
+    - export GOODFELLOW_BASE="$(node -e 'console.log(new URL(process.env.CI_PAGES_URL).pathname)')"
+    - npx goodfellow build
+  pages:
+    publish: dist
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

package/templates/starter/README.md

@@ -0,0 +1,108 @@
+# My site
+
+A website built with [Goodfellow](https://github.com/goodfellow-cms/goodfellow-cms). Pages are files in `content/`, edited in the admin panel at `/admin`, and published to a free static host.
+
+## Working on the site
+
+<!-- goodfellow-repository -->
+> **In the Goodfellow repository**, this folder is part of a pnpm workspace, so `npm install` doesn't work here. From the repository's root, run `pnpm install` and `pnpm build` (get pnpm with `corepack enable`, or `npm install -g pnpm`), then `pnpm dev` in this folder. The `npm` commands below are for a site of your own, created with `npm create goodfellow`, which leaves this note out.
+<!-- /goodfellow-repository -->
+
+```sh
+npm install
+npm run dev      # site at http://localhost:4321, admin panel at http://localhost:4321/admin
+npm run build    # builds the site into dist/
+npm run preview  # serves dist/
+```
+
+On your own computer, the admin panel saves straight to the files in `content/`.
+
+More blocks, such as an FAQ, tabs and a pricing table, can be added on the admin panel's **Blocks** screen, which publishes their code into `blocks/installed/` and the shadcn components they use into `components/ui/`. See [Add blocks](https://goodfellow-cms.github.io/goodfellow-cms/docs/add-blocks).
+
+To add blocks of your own, write React components and add them to `blocks` in `goodfellow.config.tsx`. Parts that respond to visitors, such as a button that shows more, go in a file starting with `"use client"`, and only pages that use them load JavaScript: see [Interactive blocks](https://goodfellow-cms.github.io/goodfellow-cms/docs/interactive-blocks).
+
+The News page and its stories are an example of a collection: a group of similar items that share one page design. Change it or delete it under **Collections** in the admin panel.
+
+## Putting the site online
+
+Setup takes four steps. It's done once, usually by whoever set up the site.
+
+### 1. Store the site on GitHub or GitLab
+
+Create an empty repository on GitHub or GitLab, without a README, and push this folder to it:
+
+```sh
+git remote add origin https://github.com/your-name/your-site.git   # unless origin is already set
+git push -u origin main
+```
+
+`create-goodfellow` makes the new site a git repository on the branch `main`, with everything, `package-lock.json` included, in its first commit, and sets `origin` when it's given the repository. Commit any changes since (`git add -A` and `git commit`) before pushing.
+
+### 2. Tell Goodfellow where the site is stored
+
+If you gave the repository when creating the site with `npm create goodfellow`, this is already done. Otherwise, in `goodfellow.config.tsx`, uncomment one `backend` line and its `import`, and fill in your repository:
+
+```tsx
+import { github } from "@goodfellow-cms/github";
+
+export default defineConfig({
+  blocks,
+  categories,
+  backend: github({ repo: "your-name/your-site" }),
+});
+```
+
+Builds include the admin panel at `/admin` only once a backend is set. If the live site is built from a branch other than the repository's default branch, add `branch: "name"`.
+
+Also set the site's address under **Site settings → General → Site address**, including any subfolder (such as `https://your-name.github.io/your-site`). It's used for the sitemap and for link previews.
+
+### 3. Choose a host
+
+Each host's free plan has its own rules about business use. If the site is for a business, sells anything, shows ads, or is built or looked after by someone who's paid for it, check those rules first. As of October 2026, GitHub Pages and Vercel's free plan don't allow most of these, and GitLab Pages has no rule against them that we know of. See [Hosts and business sites](https://goodfellow-cms.github.io/goodfellow-cms/docs/hosts) in Goodfellow's documentation.
+
+**GitHub Pages** (free for public repositories; not for online businesses or shops)
+
+1. In the repository on GitHub, go to **Settings → Pages** and set **Source** to **GitHub Actions**.
+2. Push. `.github/workflows/deploy.yml` builds and publishes the site on every change and once a night. If your main branch isn't called `main`, change it in that file.
+
+**GitLab Pages** (free, including for private projects; no rule against business sites that we know of)
+
+1. Push. `.gitlab-ci.yml` builds and publishes the site on every change to the default branch.
+2. For nightly rebuilds, add a schedule under **Build → Pipeline schedules**.
+3. The site's address is under **Deploy → Pages**.
+
+**Vercel** (works with GitHub and GitLab; the free plan is for non-commercial sites only)
+
+1. Import the repository in Vercel. `vercel.ts` already has the right settings, and has Vercel send the site's redirects itself.
+2. For nightly rebuilds, create a deploy hook under **Settings → Git → Deploy Hooks**, and call it from a scheduled GitHub Action or GitLab pipeline schedule.
+
+Delete the setup files for the hosts you don't use.
+
+### 4. Set up sign-in
+
+**GitHub:** nothing to set up. Editors sign in at `/admin` with an access token. The admin panel links to GitHub's token page with the right permissions already chosen. On that page, under **Repository access**, choose **Only select repositories** and pick the site.
+
+- Editors who are collaborators on someone else's personal repository can't use that kind of token. They can use the "broader token" link instead. Alternatively, move the repository into a free GitHub organization and make editors members.
+
+**GitLab:** editors can sign in with an access token straight away. For one-click **Sign in with GitLab**, register the admin panel with GitLab once:
+
+1. Go to your profile's **Preferences → Applications** (or the group's **Settings → Applications**) and add an application.
+2. Set:
+   - **Redirect URI:** the admin panel's address with a trailing slash, such as `https://your-site.example/admin/`.
+   - **Confidential:** leave this **off**.
+   - **Scopes:** `api`.
+3. Copy the **Application ID** into the config: `gitlab({ project: "your-name/your-site", clientId: "…" })`.
+
+Every editor needs permission to change the repository: on GitHub, write access; on GitLab, the Developer role or higher.
+
+## Images and files
+
+Upload images and files on the admin panel's **Media** screen, or with the **Choose image** button wherever an image goes. They're saved in `public/media/`, and large photos are made web-sized automatically.
+
+## Writing with AI
+
+The admin panel's **AI** tab can draft pages, rewrite blocks and fill in news stories. Each editor picks an AI service there. Claude and some others need the editor's own API key and charge for use; there are free options, including copying the request into a chat app such as Claude.ai. To offer only some services, or to turn the assistant off, see `ai` in [Configuration](https://goodfellow-cms.github.io/goodfellow-cms/docs/configuration).
+
+## Publishing
+
+Each **Publish** in the admin panel saves its changes as one commit to the main branch, which starts a new build. The admin panel shows when the live site has been updated, usually within a minute or two. If someone else changed the same page in the meantime, publishing stops and explains what happened, instead of overwriting their work.

package/templates/starter/_gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

package/templates/starter/blocks/installed/index.ts

@@ -0,0 +1,7 @@
+// Written by the admin panel when blocks are installed or removed. Don't edit it by hand.
+import type { ComponentConfig, Config } from "@puckeditor/core";
+
+// biome-ignore lint/suspicious/noExplicitAny: blocks have arbitrary props
+export const installedBlocks: Record<string, ComponentConfig<any>> = {};
+
+export const installedCategories: NonNullable<Config["categories"]> = {};

package/templates/starter/components.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@goodfellow": "https://cdn.jsdelivr.net/npm/@goodfellow-cms/registry@latest/r/{name}.json"
+  }
+}

package/templates/starter/content/collections/news/_collection.json

@@ -0,0 +1,113 @@
+{
+  "version": 1,
+  "entryName": "News story",
+  "fields": [
+    {
+      "type": "text",
+      "label": "Title",
+      "name": "title",
+      "required": true
+    },
+    {
+      "type": "date",
+      "label": "Date",
+      "name": "date",
+      "required": true
+    },
+    {
+      "type": "textarea",
+      "hint": "One or two sentences, shown in lists of news.",
+      "label": "Summary",
+      "name": "summary"
+    },
+    {
+      "type": "image",
+      "label": "Image",
+      "name": "image"
+    },
+    {
+      "type": "richtext",
+      "label": "Text",
+      "name": "text"
+    }
+  ],
+  "name": "News",
+  "path": "/news/{slug}",
+  "sort": {
+    "field": "date",
+    "order": "desc"
+  },
+  "template": {
+    "content": [
+      {
+        "type": "Section",
+        "props": {
+          "id": "Section-news",
+          "background": "none",
+          "backgroundImage": "",
+          "className": "",
+          "content": [
+            {
+              "type": "EntryField",
+              "props": {
+                "id": "EntryField-date",
+                "className": "",
+                "field": "date",
+                "style": "small"
+              }
+            },
+            {
+              "type": "EntryField",
+              "props": {
+                "id": "EntryField-title",
+                "className": "mt-2",
+                "field": "title",
+                "style": "title"
+              }
+            },
+            {
+              "type": "EntryField",
+              "props": {
+                "id": "EntryField-image",
+                "className": "mt-8",
+                "field": "image",
+                "style": "text"
+              }
+            },
+            {
+              "type": "EntryField",
+              "props": {
+                "id": "EntryField-text",
+                "className": "mt-8",
+                "field": "text",
+                "style": "text"
+              }
+            },
+            {
+              "type": "Button",
+              "props": {
+                "id": "Button-news",
+                "className": "mt-10",
+                "href": "/news",
+                "label": "All news",
+                "newTab": false,
+                "size": "md",
+                "variant": "outline"
+              }
+            }
+          ],
+          "padding": "lg",
+          "width": "narrow"
+        }
+      }
+    ],
+    "root": {
+      "props": {
+        "className": "",
+        "description": "{summary}",
+        "image": "{image}",
+        "title": "{title}"
+      }
+    }
+  }
+}

package/templates/starter/content/collections/news/open-house.json

@@ -0,0 +1,9 @@
+{
+  "version": 1,
+  "fields": {
+    "date": "2026-09-20",
+    "summary": "Drop in any time between 10 and 2 to meet everyone.",
+    "text": "<p>Everyone is welcome. Refreshments will be served.</p>",
+    "title": "Open house this Saturday"
+  }
+}

package/templates/starter/content/collections/news/welcome.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "fields": {
+    "date": "2026-10-01",
+    "image": "/media/placeholder.svg",
+    "summary": "Our new site is easier to keep up to date, so you'll always find the latest news here.",
+    "text": "<p>This is a news story. Add your own on the <strong>Collections</strong> screen of the admin panel, and they'll appear on the news page in date order.</p>",
+    "title": "Welcome to our new website"
+  }
+}

package/templates/starter/content/layout/footer.json

@@ -0,0 +1,55 @@
+{
+  "version": 1,
+  "data": {
+    "content": [
+      {
+        "type": "Section",
+        "props": {
+          "id": "Section-footer",
+          "background": "muted",
+          "backgroundImage": "",
+          "className": "",
+          "content": [
+            {
+              "type": "Flex",
+              "props": {
+                "id": "Flex-footer",
+                "align": "center",
+                "className": "",
+                "direction": "row",
+                "gap": "md",
+                "items": [
+                  {
+                    "type": "Text",
+                    "props": {
+                      "id": "Text-footer",
+                      "align": "left",
+                      "className": "text-sm text-muted-foreground",
+                      "content": "<p>© My site. Built with Goodfellow.</p>"
+                    }
+                  },
+                  {
+                    "type": "Menu",
+                    "props": {
+                      "id": "Menu-footer",
+                      "className": "text-sm",
+                      "menu": "footer",
+                      "orientation": "horizontal"
+                    }
+                  }
+                ],
+                "justify": "between",
+                "wrap": true
+              }
+            }
+          ],
+          "padding": "sm",
+          "width": "wide"
+        }
+      }
+    ],
+    "root": {
+      "props": {}
+    }
+  }
+}