Developing with Prismic

Prismic

This document outlines general guidelines with Prismic

What is Prismic

Prismic is the CMS for the website.

All development will follow this process. Building the content model, add the content model to Prismic, write the code to design the slice. All other work will be resolving bugs or modifying existing slice.

Refer to these docs Prismic Documentation for NextJS

Naming Conventions

Stick to the Prismic naming conventions.

• Use generic names for field labels and ids like Button, Link, Title, Header, Description. Don't use words like heroButton, fiftyFiftyImage, etc.
• If more than one variation exists, pick one variations to be the default. Use short and simple names for each variation.
  • Ex. ThreeColumn (default), ThreeColumnHeaderOnly, HorizontalCardRightImage (default), HorizontalCardLeftImage

General Tips

• Prismic slice ids and variation ids aren't easy to edit after you create them. In the case you make a spelling mistake or want to change and id, delete and recreate the slice/variation

Style Guide and Coding Patterns

Formatting

Almost all slices have the following configurations/variations:

• Background Color
  • If a section's background color can be configured, use a select to configure the options (See the ThreeColumn variation under ColumnCards).
• Section Header / Section Button variations
  • A section will either have only a Section Header or both a Section Header & Button. Create two variations for these options.

Implementing Variations in Code

Split each variation into its own file, including the default. Use the ColumnCard slices as an example.

Note that when using fields from variations, you must tell React that the field exists slice.variation === "default" ? slice.primary.backgroundcolor : "white"

const ColumnCards = ({ slice }: ColumnCardsProps): JSX.Element => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      {/* Render different components based on slice.variation */}
      {slice.variation === "default" && <ThreeColumn {...slice} />}
      {slice.variation === "threeColumnHeaderOnly" && (
        <ThreeColumnHeaderOnly {...slice} />
      )}
      {slice.variation === "twoColumn" && <TwoColumn {...slice} />}
      {slice.variation === "twoColumnHeaderOnly" && (
        <TwoColumnHeaderOnly {...slice} />
      )}
      {slice.variation === "fourColumn" && <FourColumn {...slice} />}
      {slice.variation === "fourColumnHeaderOnly" && (
        <FourColumnHeaderOnly {...slice} />
      )}
    </section>
  );
};

const ThreeColumn = (slice: Content.ColumnCardsSlice): JSX.Element => {
  return (
    <BackgroundColor
      backgroundColor={
        slice.variation === "default" ? slice.primary.backgroundcolor : "white"
      }
    >
      <ContainerWrapper>
...
      </ContainerWrapper>
    </BackgroundColor>
  );
};

Debugging and Coding Patterns

Resources for Debugging

1. Slice Variation Properties Don't Exist