Start Development Server

npm run dev 

Local Env Variables

Inside the .env

# For Contentful
TOPOS_CONTENTFUL_SPACE_ID="" 
TOPOS_CONTENTFUL_ACCESS_TOKEN=""

# Google Analytics
TOPOS_GA_TRACKING_ID="A-TRACKING_ID"

# from contentful website settings 
WEBSITE_SETTING_ENTRY_ID=""

Website Settings

Website Setting is a model inside Contentful. It allows you to configure website title, home page, the main navigation and the footer navigation. You must set a Website Setting entry ID as WEBSITE_SETTING_ENTRY_ID in the env.

This Gatsby application generates pages and posts from contents from Contentful. Pages and posts are assembled with sections and blocks and other smaller elements such as media assets and links.

It allows content writers to freely create and edit pages with minimum help from developers This type of block-based approach is used in conventional page builders such as Webflow, Elementor and Gutenberg editor.

The website is made of

• pages
  • Sections in vertical scroll (default)
    • Blocks
  • Sections in horizontal scroll
    • Block:Slide
      • Slide:Card
• posts
  • Post blocks

The diagram shows how they are related and how styles are inherited.

• Form:Field

• Slide:Card

Every entry has a name that has no functional purpose but solely for internal reference, meaning you can enter whatever name and it will not affect the rendering.

For example, in the screenshot below, you can see 2 sections that are inside "Home" page. Without these names, users will not be able to tell what these sections are for. You might need a naming rule in the future that suits your organization's needs.