Modular Pages
This demo showcases the use of the headless CMS Contentful to create modular pages. Contentful content models are mapped to React components, so that the CMS has control over which components are being rendered on a page.
Concept
Page
The highest level content model. It contains a list of all of the page section components that should be rendered on this page. Its slug field is used to match the correct content model to the requested url.
Component
These content models represent modular React components, that can be stacked on top of each other like building blocks to make up a page. Each content model has fields, that its React component expects as props.
Partial
Lastly, there are some content models, that are just used as partial content inside the components.
Page
This is what the content model for the frontpage of this demo looks like. The slug indicates which URL this page should be used for and the components list holds a reference to all the component models that are being used on the page.
Hero Component
The hero component model. All of the fields will be passed into the React component as props.