Overview

ContentType allows you to add structured data at the Page Level. It can be used for additional SEO metadata, to define the page layout, to get the information used in multiple Blocks, etc...

Create a Page Type

To create a ContentType, define your ContentType schema and register it.

Schema

interface ContentTypeSchema {
  slug: string;
  name: string;
  fields: SuncelField[];
  blocks?: SuncelBlock | {
    component: SuncelBlock;
    props: any;
  }[]
}

slug: Identifier of the ContentType. It will also be used when getting it from the API.
fields: The Field types are the same as the types seen in the Block Schema.
blocks: Default blocks. When a page is created, it will have theses blocks by defaults

Register your ContentType

Once your ContentType is created, you must register it to be accessible in the admin.

To register it, just add it to the list of ContentTypes in the contentTypes attribute of the SuncelContext components.

Access the data

The data will be stored in the properties attribute of the Page if you fetch the page via the GetPage utility.

If you use the Page properties, it has to be done through suncel.page_properties.

Finally, if you access it in a Block, It will be in the pageProps Block's properties.

// Thought page properties
export default function Slug(props: any) {
  // props.suncel.page_properties 
  if (!props?.suncel) return <div>Cannot load the page</div>;

  return (
      <PageRender suncelProps={props?.suncel} />
  );
}

.....

// Inside Block 
interface MyComponentProps {
  text: string;
}

export const MyComponent: SuncelBlock<MyComponentProps> = ({ text, pageProps }) => {
  console.log(pageProps);
  return (
    <>
      <Text slug='text' value={text} />
    </>
  );
};

Create Global

How to