Skip to content

Latest commit

 

History

History

resolution

README.md

Gatsby Resolution Example

Netlify Status

Site showcasing how to resolve Rich Text element and it's inline images, inline content items, and content components.

Get started

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

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

Develop site

# open the /example/navigation folder
cd examples/navigation
npm run develop # runs `gatsby develop` command

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

Content modeling

This section explains how the content is modeled. You could follow to next section "Import the content to your on Kontent.ai project" and explore the models by your own as well as the sample data based on it. Or you could create models manually to familiarize yourself with the Kontent.ai user interface.

Once you create the content models, you could create content items based on these and the site would be capable to handle the content and render it.

Kontent.ai content models

First of of all it is required to create two content types:

  • Person - which will represent a person on our website and mainly Bio rich text element used for resolution showcase
  • Repository - this content type represents a github repository information - used as an inline linked item from Person's Bio element
  • Website - this content type represents a website information - used as an inline linked item from Person Bio element

Person content modeling

This content type - Person - represents people with their Bio. They could link any Website or Repository (see the next section) to their bio and these components needs to be resolved. It has following structure:

  • Name - Text element
  • Bio - Rich text element - configures to allow to link only Repository and Website content types
  • Slug - URL slug element - generated from name

In case you want to link external URL to different domain, it is possible to extend the content type by Text element called i.e. External URL.

Repository and Website Content type

Repository and Website content types has following structure. They are pretty similar, they are used to showcase the resolution of inline linked items in the rich text element (Bio element of the person).

Repository

  • Name - Text element
  • Summary - Text element
  • URL - Text element
  • Slug - URL slug element - generated from name

Website

  • Name - Text element
  • Summary - Text element
  • URL - Text element
  • Slug - URL slug element - generated from name
  • Source repository - Linked items element - configures to allow only Repository content type

Import site content to your Kontent.ai project

If you want to import content types with the sample content in your own empty project, you could use following guide:

  1. Go to app.kontent.ai and create empty project

  2. Go to "Project Settings", select API keys and copy Project ID

  3. Install Kontent.ai Backup Manager and import data to newly created project from kontent-backup.zip file (place appropriate values for apiKey and projectId arguments):

    npm install -g @kontent-ai/backup-manager-js

kbm --action=restore --apiKey=<Management API key> --projectId=<Project ID> --zipFilename=kontent-backup

  4. Go to your Kontent.ai project and publish all the imported items.

Connect the site to custom project

Open the gatsby-config.js file and set following properties for @kontent-ai/gatsby-source plugin:

  • projectId from Project settings > API keys > Delivery API > Project ID
  • languageCodenames from Project settings > Localization

Rich text resolution

For all Person content items, there is a new page created based on on the templates/person.js template. The template is using Gatsby Kontent.ai Components package, specifically it's RichTextElement to resolve the content component, inline linked items, and images.

The main example is on http://localhost:8000/people/ondrej-chrastina/ that showcase the content component, inline linked items, and images resolution of the Bio element.

Component resolution example

Reusing components

You could re-use the React components on multiple places.

The Bio rich text resolution in templates/person.js is using the src/components/repository.js component as well as the same component is used on the templates/website.js for linked items resolution.

Reusing Repository component

URL resolution

For all Person content items, there is a new page created based on the templates/person.js template. The template is using utils/resolvers/ to resolve links to other content items into the URLs in the Bio element.

The main example is on http://localhost:8000/people/ondrej-chrastina/ that showcase URL resolution of the Bio element - in this case the link to John Doe.

Rich text element content item link resolution

The overall resolution of the urls for content items in on http://localhost:8000/. There is an overview of resolved URLs for all content items based on Person, Repository, and Website content type.

URL resolution showcase

More complex scenarios

If you want to configure more complex and multi-level routing, take a look to the Navigation example and the you could use resolved URLs in combination with the unified URL resolution.