Skip to content

Latest commit

 

History

History

site

README.md

Gatsby development site for Kontent.ai packages

Netlify Status

Live demo

Stack Overflow

A site used for development purposes and code examples showcasing packages possibilities.

Get started

⚠️ Before running any of the following scripts locally ensure the site is using the latest commands

# In the root folder
npm install # install all required packages
npm run build # build the latest version of the packages

Develop site

# open the /site folder
cd site
npm run develop # runs `gatsby develop` command

Now you could browse the site on http://localhost:8000 and see GraphQL explorer on http://localhost:8000/___graphql.

Lint code

# open the /site folder
cd site
npm run lint

Build site

# open the /site folder
cd site
npm run build # runs `gatsby build` command

Examples

The following examples are showcasing, how it is possible to use the Kontent.ai packages. There are many possibilities that Gatsby offers to adjust the data you need before using them in the application.

Navigation example

See /examples/navigation for the example.

Rich text and URL slug resolution

See /examples/resolution for the example.

Relationships among Kontent.ai GraphQL Nodes

See /examples/relationships to see how it is possible to make a relationship among the data provided by the Kontent.ai source plugin.

Image transformation

There are various ways to render an image on your site.

The best solution is to use Kontent.ai Image transformation API (optionally with Asset Renditions) for simple scenarios and ImageElement for more complex ones, because it allows to use full power of gatsby-plugin-image support.

See the "author page" as a showcase, how you could render the profile photo different way (live preview).

Timezone

If you want to see how to fetch the timezone information, see the See the "articles page".

Slice API

This site is showcasing the feature Slice API. To gain more information about this feature, follow this link. If you want to see the implementation used on this site look at the slice definition in gatsby-node.js and the component footer.js .

Based on official Gatsby Hello World starter.