1a:I[52397,["/_next/static/immutable/chunks/2igrrcde_vc4p.js","/_next/static/immutable/chunks/0n36v-3cexsuq.js","/_next/static/immutable/chunks/3-6-6opb2l_5p.js","/_next/static/immutable/chunks/41t6fga463v64.js"],"Workbench"] 1b:T16e0,import type { ComponentConfig } from "@puckeditor/core"; /** * Timeline — organizational history or project milestones as a vertical, ordered list. * Dates sit above each entry on mobile and move into a left-hand gutter from tablet up. * Register: `TimelineBlock: timelineBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; type Milestone = { date: string; title: string; description: string; }; export type TimelineProps = { heading: string; headingLevel: Heading; intro: string; milestones: Milestone[]; }; const childHeading = { h1: "h2", h2: "h3", h3: "h4", h4: "h5" } as const; export const timelineBlock: ComponentConfig = { label: "Timeline", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro" }, milestones: { type: "array", label: "Milestones", min: 1, max: 30, getItemSummary: (item) => [item?.date, item?.title].filter(Boolean).join(" — ").slice(0, 56) || "Milestone", defaultItemProps: { date: "2026", title: "New milestone", description: "" }, arrayFields: { date: { type: "text", label: "Year or date", metadata: { help: "Short works best: 1998, Spring 2024, or June 2026." } }, title: { type: "text", label: "Title" }, description: { type: "textarea", label: "Description", metadata: { help: "Blank lines start a new paragraph. Leave blank to hide it." } }, }, }, }, defaultProps: { heading: "Fifty years on the river", headingLevel: "h2", intro: "From a handful of neighbors with canoes and trash bags to a regional land trust protecting more than 12,000 acres.", milestones: [ { date: "1976", title: "A cleanup becomes a cause", description: "Twelve residents pull 40 tires from the riverbank in one weekend and form the Riverkeepers Association the following month.", }, { date: "1989", title: "Our first conservation easement", description: "The Hollis family protects 220 acres of bottomland forest forever, setting the model for every easement that followed.", }, { date: "2004", title: "The Greenway opens", description: "Eleven miles of paved trail link four towns along the water, built with state, county and more than 3,000 private gifts.", }, { date: "2018", title: "Accredited land trust", description: "We earn national accreditation, a mark of the standards we hold for stewardship, governance and finances.", }, { date: "2026", title: "12,000 acres and counting", description: "This year we reach a milestone that once seemed out of reach, with three new floodplain preserves under way.", }, ], }, render: ({ heading, headingLevel, intro, milestones }) => { const H = headingLevel || "h2"; const Sub = childHeading[headingLevel] || "h3"; const list = (milestones ?? []).filter((m) => m?.title || m?.date); return (

{heading || intro ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length ? (

{m.date ? (
{m.date}
) : ( )}
{m.title ? _{m.title} : null} {m.description ? (
{m.description .split(/\n\s*\n/) .filter((p) => p.trim()) .map((para, j) => (
{para}
))}
) : null}

) : null}

); }, }; 1c:Ta044,

import type { ComponentConfig } from "@puckeditor/core";

/**
 * Timeline — organizational history or project milestones as a vertical, ordered list.
 * Dates sit above each entry on mobile and move into a left-hand gutter from tablet up.
 * Register: `TimelineBlock: timelineBlock` in puck.config.tsx.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

type Milestone = {
  date: string;
  title: string;
  description: string;
};

export type TimelineProps = {
  heading: string;
  headingLevel: Heading;
  intro: string;
  milestones: Milestone[];
};

const childHeading = { h1: "h2", h2: "h3", h3: "h4", h4: "h5" } as const;

export const timelineBlock: ComponentConfig<TimelineProps> = {
  label: "Timeline",
  fields: {
    heading: { type: "text", label: "Heading" },
    headingLevel: {
      type: "select",
      label: "Heading level",
      options: [
        { label: "H1", value: "h1" },
        { label: "H2", value: "h2" },
        { label: "H3", value: "h3" },
        { label: "H4", value: "h4" },
      ],
      metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." },
    },
    intro: { type: "textarea", label: "Intro" },
    milestones: {
      type: "array",
      label: "Milestones",
      min: 1,
      max: 30,
      getItemSummary: (item) => [item?.date, item?.title].filter(Boolean).join(" — ").slice(0, 56) || "Milestone",
      defaultItemProps: { date: "2026", title: "New milestone", description: "" },
      arrayFields: {
        date: { type: "text", label: "Year or date", metadata: { help: "Short works best: 1998, Spring 2024, or June 2026." } },
        title: { type: "text", label: "Title" },
        description: { type: "textarea", label: "Description", metadata: { help: "Blank lines start a new paragraph. Leave blank to hide it." } },
      },
    },
  },
  defaultProps: {
    heading: "Fifty years on the river",
    headingLevel: "h2",
    intro: "From a handful of neighbors with canoes and trash bags to a regional land trust protecting more than 12,000 acres.",
    milestones: [
      {
        date: "1976",
        title: "A cleanup becomes a cause",
        description: "Twelve residents pull 40 tires from the riverbank in one weekend and form the Riverkeepers Association the following month.",
      },
      {
        date: "1989",
        title: "Our first conservation easement",
        description: "The Hollis family protects 220 acres of bottomland forest forever, setting the model for every easement that followed.",
      },
      {
        date: "2004",
        title: "The Greenway opens",
        description: "Eleven miles of paved trail link four towns along the water, built with state, county and more than 3,000 private gifts.",
      },
      {
        date: "2018",
        title: "Accredited land trust",
        description: "We earn national accreditation, a mark of the standards we hold for stewardship, governance and finances.",
      },
      {
        date: "2026",
        title: "12,000 acres and counting",
        description: "This year we reach a milestone that once seemed out of reach, with three new floodplain preserves under way.",
      },
    ],
  },
  render: ({ heading, headingLevel, intro, milestones }) => {
    const H = headingLevel || "h2";
    const Sub = childHeading[headingLevel] || "h3";
    const list = (milestones ?? []).filter((m) => m?.title || m?.date);
    return (
      <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
        <div className="mx-auto max-w-4xl">
          {heading || intro ? (
            <div className="sm:grid sm:grid-cols-4">
              <div className="max-w-2xl sm:col-span-3 sm:col-start-2 sm:pl-10">
                {heading ? <H className="text-3xl font-semibold tracking-tight text-balance text-neutral-950 sm:text-4xl">{heading}</H> : null}
                {intro ? <p className="mt-4 text-lg leading-8 text-pretty text-neutral-600">{intro}</p> : null}
              </div>
            </div>
          ) : null}
          {list.length ? (
            <ol className={heading || intro ? "mt-12 sm:mt-16" : undefined}>
              {list.map((m, i) => (
                <li key={`${m.date}-${m.title}-${i}`} className="group relative pb-12 pl-8 last:pb-0 sm:grid sm:grid-cols-4 sm:pl-0">
                  <span aria-hidden="true" className="absolute top-0 bottom-0 left-0 w-px bg-neutral-200 group-first:top-2 group-last:bottom-auto group-last:h-2 sm:left-1/4" />
                  <span aria-hidden="true" className="absolute top-1.5 left-0 size-3 -translate-x-1/2 rounded-full bg-white ring-2 ring-indigo-600 group-last:bg-indigo-600 sm:top-2 sm:left-1/4" />
                  {m.date ? (
                    <p className="text-sm leading-6 font-semibold text-indigo-700 tabular-nums sm:pr-10 sm:text-right sm:text-lg sm:leading-7 sm:tracking-tight">{m.date}</p>
                  ) : (
                    <span aria-hidden="true" className="hidden sm:block" />
                  )}
                  <div className="mt-1 sm:col-span-3 sm:mt-0 sm:pl-10">
                    {m.title ? <Sub className="text-lg leading-7 font-semibold tracking-tight text-pretty text-neutral-950">{m.title}</Sub> : null}
                    {m.description ? (
                      <div className="mt-2 max-w-xl space-y-4 text-base leading-7 text-pretty text-neutral-600">
                        {m.description
                          .split(/\n\s*\n/)
                          .filter((p) => p.trim())
                          .map((para, j) => (
                            <p key={j}>{para}</p>
                          ))}
                      </div>
                    ) : null}
                  </div>
                </li>
              ))}
            </ol>
          ) : null}
        </div>
      </section>
    );
  },
};

1d:T1da3,# Add the "Timeline" block to this P1 project Add a Puck component from P1 Blocks ({origin}/blocks/timeline) to this Pantheon Content Publisher (P1) Next.js project. History and milestones as an ordered timeline. Good for about pages and annual reports. ## Steps 1. Create `components/puck/timeline-block.tsx` with the exact file contents below. If `components/puck/` doesn't exist, find the folder where this project keeps its Puck components (look at the imports in `puck.config.tsx`) and put it there. 2. In `puck.config.tsx`, import it: `import { timelineBlock } from "./components/puck/timeline-block";` 3. Register it under `components` as `TimelineBlock: timelineBlock`. 4. Add `"TimelineBlock"` to the best-fitting entry in `categories` (this block's library category is "Content"). Create a category only if none fits. 5. Run the project's type check (usually `pnpm typecheck`) and resolve anything project-specific. 6. If `package.json` has a `sync:registry` script, tell the user it must run (or that CI will run it) before the new component appears in the P1 editor. ## Rules - Do not add dependencies. The block is self-contained by design: one type-only import from `@puckeditor/core`, Tailwind v4 classes, no client JavaScript. - Keep the files as-is unless the user asks for changes. The accent color is `indigo-*`; if the project has brand colors, offer to swap them with a find-and-replace on `indigo-`. - Images are plain `imageUrl` + `imageAlt` text fields. If this project defines a P1 media-library field (search for `"p1-media"`), offer to switch to it. - Don't change prop names in `defaultProps`. Content editors' saved pages depend on them. ## File: `components/puck/timeline-block.tsx` ```tsx import type { ComponentConfig } from "@puckeditor/core"; /** * Timeline — organizational history or project milestones as a vertical, ordered list. * Dates sit above each entry on mobile and move into a left-hand gutter from tablet up. * Register: `TimelineBlock: timelineBlock` in puck.config.tsx. */ type Heading = "h1" | "h2" | "h3" | "h4"; type Milestone = { date: string; title: string; description: string; }; export type TimelineProps = { heading: string; headingLevel: Heading; intro: string; milestones: Milestone[]; }; const childHeading = { h1: "h2", h2: "h3", h3: "h4", h4: "h5" } as const; export const timelineBlock: ComponentConfig = { label: "Timeline", fields: { heading: { type: "text", label: "Heading" }, headingLevel: { type: "select", label: "Heading level", options: [ { label: "H1", value: "h1" }, { label: "H2", value: "h2" }, { label: "H3", value: "h3" }, { label: "H4", value: "h4" }, ], metadata: { help: "Sets the page outline for screen readers and search. The look doesn't change." }, }, intro: { type: "textarea", label: "Intro" }, milestones: { type: "array", label: "Milestones", min: 1, max: 30, getItemSummary: (item) => [item?.date, item?.title].filter(Boolean).join(" — ").slice(0, 56) || "Milestone", defaultItemProps: { date: "2026", title: "New milestone", description: "" }, arrayFields: { date: { type: "text", label: "Year or date", metadata: { help: "Short works best: 1998, Spring 2024, or June 2026." } }, title: { type: "text", label: "Title" }, description: { type: "textarea", label: "Description", metadata: { help: "Blank lines start a new paragraph. Leave blank to hide it." } }, }, }, }, defaultProps: { heading: "Fifty years on the river", headingLevel: "h2", intro: "From a handful of neighbors with canoes and trash bags to a regional land trust protecting more than 12,000 acres.", milestones: [ { date: "1976", title: "A cleanup becomes a cause", description: "Twelve residents pull 40 tires from the riverbank in one weekend and form the Riverkeepers Association the following month.", }, { date: "1989", title: "Our first conservation easement", description: "The Hollis family protects 220 acres of bottomland forest forever, setting the model for every easement that followed.", }, { date: "2004", title: "The Greenway opens", description: "Eleven miles of paved trail link four towns along the water, built with state, county and more than 3,000 private gifts.", }, { date: "2018", title: "Accredited land trust", description: "We earn national accreditation, a mark of the standards we hold for stewardship, governance and finances.", }, { date: "2026", title: "12,000 acres and counting", description: "This year we reach a milestone that once seemed out of reach, with three new floodplain preserves under way.", }, ], }, render: ({ heading, headingLevel, intro, milestones }) => { const H = headingLevel || "h2"; const Sub = childHeading[headingLevel] || "h3"; const list = (milestones ?? []).filter((m) => m?.title || m?.date); return (

{heading || intro ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length ? (

{m.date ? (
{m.date}
) : ( )}
{m.title ? _{m.title} : null} {m.description ? (
{m.description .split(/\n\s*\n/) .filter((p) => p.trim()) .map((para, j) => (
{para}
))}
) : null}

) : null}

); }, }; ``` 1e:T12dc,/** * Timeline — organizational history or project milestones as a vertical, ordered list. * Dates sit above each entry on mobile and move into a left-hand gutter from tablet up. * Usage: ``, or pass your own props. Every prop is optional. */ type Heading = "h1" | "h2" | "h3" | "h4"; type Milestone = { date: string; title: string; description: string; }; export type TimelineProps = { /** Heading */ heading: string; /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */ headingLevel: Heading; /** Intro */ intro: string; /** Milestones */ milestones: Milestone[]; }; const childHeading = { h1: "h2", h2: "h3", h3: "h4", h4: "h5" } as const; /** Sample content: `` renders the block as previewed. Replace it with your own. */ export const timelineExample: TimelineProps = { heading: "Fifty years on the river", headingLevel: "h2", intro: "From a handful of neighbors with canoes and trash bags to a regional land trust protecting more than 12,000 acres.", milestones: [ { date: "1976", title: "A cleanup becomes a cause", description: "Twelve residents pull 40 tires from the riverbank in one weekend and form the Riverkeepers Association the following month.", }, { date: "1989", title: "Our first conservation easement", description: "The Hollis family protects 220 acres of bottomland forest forever, setting the model for every easement that followed.", }, { date: "2004", title: "The Greenway opens", description: "Eleven miles of paved trail link four towns along the water, built with state, county and more than 3,000 private gifts.", }, { date: "2018", title: "Accredited land trust", description: "We earn national accreditation, a mark of the standards we hold for stewardship, governance and finances.", }, { date: "2026", title: "12,000 acres and counting", description: "This year we reach a milestone that once seemed out of reach, with three new floodplain preserves under way.", }, ], }; export function Timeline(props: Partial) { const { heading, headingLevel, intro, milestones } = props as TimelineProps; const H = headingLevel || "h2"; const Sub = childHeading[headingLevel] || "h3"; const list = (milestones ?? []).filter((m) => m?.title || m?.date); return (

{heading || intro ? (

{heading ? {heading} : null} {intro ?

{intro}

: null}

) : null} {list.length ? (

{m.date ? (
{m.date}
) : ( )}
{m.title ? _{m.title} : null} {m.description ? (
{m.description .split(/\n\s*\n/) .filter((p) => p.trim()) .map((para, j) => (
{para}
))}
) : null}

) : null}

); } 1f:T74b1,

/**
 * Timeline — organizational history or project milestones as a vertical, ordered list.
 * Dates sit above each entry on mobile and move into a left-hand gutter from tablet up.
 * Usage: `<Timeline {...timelineExample} />`, or pass your own props. Every prop is optional.
 */

type Heading = "h1" | "h2" | "h3" | "h4";

type Milestone = {
  date: string;
  title: string;
  description: string;
};

export type TimelineProps = {
  /** Heading */
  heading: string;
  /** Heading level. Sets the page outline for screen readers and search. The look doesn't change. */
  headingLevel: Heading;
  /** Intro */
  intro: string;
  /** Milestones */
  milestones: Milestone[];
};

const childHeading = { h1: "h2", h2: "h3", h3: "h4", h4: "h5" } as const;

/** Sample content: `<Timeline {...timelineExample} />` renders the block as previewed. Replace it with your own. */
export const timelineExample: TimelineProps = {
  heading: "Fifty years on the river",
  headingLevel: "h2",
  intro: "From a handful of neighbors with canoes and trash bags to a regional land trust protecting more than 12,000 acres.",
  milestones: [
    {
      date: "1976",
      title: "A cleanup becomes a cause",
      description: "Twelve residents pull 40 tires from the riverbank in one weekend and form the Riverkeepers Association the following month.",
    },
    {
      date: "1989",
      title: "Our first conservation easement",
      description: "The Hollis family protects 220 acres of bottomland forest forever, setting the model for every easement that followed.",
    },
    {
      date: "2004",
      title: "The Greenway opens",
      description: "Eleven miles of paved trail link four towns along the water, built with state, county and more than 3,000 private gifts.",
    },
    {
      date: "2018",
      title: "Accredited land trust",
      description: "We earn national accreditation, a mark of the standards we hold for stewardship, governance and finances.",
    },
    {
      date: "2026",
      title: "12,000 acres and counting",
      description: "This year we reach a milestone that once seemed out of reach, with three new floodplain preserves under way.",
    },
  ],
};

export function Timeline(props: Partial<TimelineProps>) {
  const { heading, headingLevel, intro, milestones } = props as TimelineProps;
  const H = headingLevel || "h2";
  const Sub = childHeading[headingLevel] || "h3";
  const list = (milestones ?? []).filter((m) => m?.title || m?.date);
  return (
    <section className="bg-white px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24">
      <div className="mx-auto max-w-4xl">
        {heading || intro ? (
          <div className="sm:grid sm:grid-cols-4">
            <div className="max-w-2xl sm:col-span-3 sm:col-start-2 sm:pl-10">
              {heading ? <H className="text-3xl font-semibold tracking-tight text-balance text-neutral-950 sm:text-4xl">{heading}</H> : null}
              {intro ? <p className="mt-4 text-lg leading-8 text-pretty text-neutral-600">{intro}</p> : null}
            </div>
          </div>
        ) : null}
        {list.length ? (
          <ol className={heading || intro ? "mt-12 sm:mt-16" : undefined}>
            {list.map((m, i) => (
              <li key={`${m.date}-${m.title}-${i}`} className="group relative pb-12 pl-8 last:pb-0 sm:grid sm:grid-cols-4 sm:pl-0">
                <span aria-hidden="true" className="absolute top-0 bottom-0 left-0 w-px bg-neutral-200 group-first:top-2 group-last:bottom-auto group-last:h-2 sm:left-1/4" />
                <span aria-hidden="true" className="absolute top-1.5 left-0 size-3 -translate-x-1/2 rounded-full bg-white ring-2 ring-indigo-600 group-last:bg-indigo-600 sm:top-2 sm:left-1/4" />
                {m.date ? (
                  <p className="text-sm leading-6 font-semibold text-indigo-700 tabular-nums sm:pr-10 sm:text-right sm:text-lg sm:leading-7 sm:tracking-tight">{m.date}</p>
                ) : (
                  <span aria-hidden="true" className="hidden sm:block" />
                )}
                <div className="mt-1 sm:col-span-3 sm:mt-0 sm:pl-10">
                  {m.title ? <Sub className="text-lg leading-7 font-semibold tracking-tight text-pretty text-neutral-950">{m.title}</Sub> : null}
                  {m.description ? (
                    <div className="mt-2 max-w-xl space-y-4 text-base leading-7 text-pretty text-neutral-600">
                      {m.description
                        .split(/\n\s*\n/)
                        .filter((p) => p.trim())
                        .map((para, j) => (
                          <p key={j}>{para}</p>
                        ))}
                    </div>
                  ) : null}
                </div>
              </li>
            ))}
          </ol>
        ) : null}
      </div>
    </section>
  );
}

20:T17d3,

Editor fields