@tuwhana/react-gatsby-contentful v1.0.50

Rendering pages

All entities of Page Contentful type will be automatically generated for you if you register this theme in your gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
});

const contentfulConfig = {
  spaceId: process.env.CONTENTFUL_SPACE_ID,
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
};

if (process.env.CONTENTFUL_HOST) {
  contentfulConfig.host = process.env.CONTENTFUL_HOST;
}

const { spaceId, accessToken } = contentfulConfig;

if (!spaceId || !accessToken) {
  throw new Error(
    "Contentful spaceId and the access token need to be provided."
  );
}

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-contentful",
      options: contentfulConfig
    },
    {
      resolve: "@tuwhana/react-gatsby-contentful",
      options: { },
    },
  ],
}

Connecting and styling blocks

Create src/@tuwhana/react-gatsby-contentful/blocks/BlockConfig.ts file with block configuration.

To add and style a block type defined in the packacge add code similar to below:

import { blockConfig, blockGroupWithTitleConfig } from "@tuwhana/react-gatsby-contentful";
import css from './Block.module.css';

export default () => blockConfig.addBlocks([
  blockGroupWithTitleConfig({
    container: `container ${css.centeredContainer}`,
    title: css.verticalTitle,
  })
])

The following blocks are defined in the package:

• BlockGroupWithTitle
• CallToAction
• PostList
• ProjectList
• StyledParagraph
• PageList
• TitleAndText
• TitleTextAndImage

Defining custom blocks

To add a custom block matching CustomBlock Contentful Content Model register the custom block in src/@tuwhana/react-gatsby-contentful/blocks/BlockConfig.ts like this:

import { blockConfig } from "@tuwhana/react-gatsby-contentful";
import {CustomBlock} from './CustomBlock;
import css from './CustomBlock.module.css';

export default () => blockConfig.addBlocks([{
  name: "ContentfulCustomBlock",
  css,
  renderer: CustomBlock
}])

The custom block would be defined like:

//CustomBlock.tsx
import { graphql } from "gatsby";
import { Block, BlockProps } from '@tuwhana/react-gatsby-contentful';
import {BlockModel} from "..";

export const customBlockFields = graphql`
  fragment customBlockFields on ContentfulCustomBlock  {
    title
    customFields
  }
`

interface CustomBlockModel extends BlockModel {
  title: string,
  customFields: any
}

interface CustomBlockCSS {
  container: string,
  title: string,
}

export const CustomBlock: React.FunctionComponent<BlockProps<CustomBlockCSS, CustomBlockModel>> = ({css, data}) => (
  <section className={css.container}>
    <h2 className={css.title}>{data.title}</h2>
    <div>{data.customFields}</div>
  </section>
);