Gatsby Kontent.ai Packages

Monorepo with Gatsby Kontent.ai packages.

The repository contains the development site (/site) that could automatically load packages (packages) thanks to npm workspaces.

Content

Packages

Package	Summary	Version
Gatsby Source Kontent.ai Plugin	plugin providing data from Kontent.ai REST API to Gatsby GraphQL model
Gatsby Kontent.ai Components	package containing React components useful when processing Kontent.ai data to site

Site

• Development Site - Site using for development purposes and code examples showcasing packages possibilities

Examples

Navigation showcase

• Navigation showcase - Showcase including the navigation best practices. Description, how to do the content modeling with all benefits of the modular content as well as have tree-based menu structure.

Resolution showcase

• Resolution showcase - Demonstration how to resolve the Rich Text element and it's inline images, inline content items, and content components.

Relationships showcase

• Relationships showcase - Schema customization examples demonstrating relationship possibilities among Kontent.ai GraphQL nodes.

DSG and SSR showcase

• DSG and SSR showcase - Example showcasing Deferred Static Generation and Server side Rendering features with Kontent.ai.

Development

Prerequisites

• Nodejs

Install

1. Install packages

   npm install # install all npm dependencies in the repository

2. Start watch mode packages

   npm run watch # run watch mode through all packages source code

3. Run development site

   npm run develop:site # run `gatsby develop` command in the development site

Now you are good to go. You could start browsing http://localhost:8000 for development site and http://localhost:8000/___graphql for GraphiQL explorer.

Tests

To run all tests, there is npm script prepared.

npm run test # run test script in all packages as well as in the development site

• Packages are using Jest framework for testing.

Build

To build all of the packages as well as a development site, you could use one command.

npm run build # run build script in all packages as well as in the development site

Lint

To lint all of the packages as well as a development site, you could use one command.

npm run lint # run lint script in all packages as well as in the development site

• Packages are using ESLint with Typescript plugins for linting.

Publishing

As a publishing framework, there is a Lerna framework set up. This package is using Fixed/Locked mode. All minor and major changes should publish all packages, in case of patch version, it is up to developer decision.

How to publish new version

If you have the rights to publish packages, just use lerna and specify the version when prompted. All the changes made by lerna are automatically committed.

A typical scenario is when everything is ready and you want to publish the version, just use command.

npx lerna publish --tag-version-prefix=''

That should summarize the publish information and prompt you to define the version number and acknowledge the publish. Once everything is OK and you acknowledge the publish:

• the new version is published to npm
• <YOUR VERSION> is set to lerna.json's version
• commit with this change (and package.json files version changes) is pushed to the repository
  • commit also contains tag <YOUR VERSION> that could be used for creating GitHub release if you want

💡 If you want to test out the beta version first (which is recommended) use following command and if everything is OK, release another patch version as the final version.

npx lerna publish --tag-version-prefix='' --dist-tag=beta