Personal site

This is my personal website build using Gatsby and Kentico Kontent as a data source.

Installation

Install required modules by npm install command.

Copy .env.template and name it .env. That file will be used to load environment variables.

Run gatsby develop in the terminal to start the dev site.

CSS Grid

The grid on this site was replaced with a custom version, built using CSS Grid. It's a very simple 12 column grid that is disabled on mobile. To start using the grid, wrap the desired items with grid-wrapper. Items inside the grid-wrapper use the class col- followed by a number, which should add up to 12.

Here is an example of using the grid, for a 3 column layout:

<div className="grid-wrapper">
    <div className="col-4">
        <p>Content Here</p>
    </div>
    <div className="col-4">
        <p>Content Here</p>
    </div>
    <div className="col-4">
        <p>Content Here</p>
    </div>
</div>

Style guide

You could find out the style guide on:

• /style-guide - Home page style showcase
• /styleguide/elements - elements style guide
• /styleguide/generic - generic page showcase
• /styleguide/landing - landing page showcase
• /styleguide/sections - sections page showcase

Connect to your own project

Create content source

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 dataops and import data to newly created project from kontent-backup.zip file (place appropriate values for apiKey and projectId arguments):

   npx @kontent-ai/data-ops@latest environment restore --fileName "kontent-backup.zip" --environmentId <target-environment-id> --apiKey <Management-API-key>

Join codebase and content data

Adjust .env file by setting the KONTENT_PROJECT_ID environment variable to value from your kontent project -> "Project Settings" -> API keys -> Project ID.

You are now ready to use the site as your own!

Setup

Site's navigation is based on the official navigation showcase. It is also extending some concepts.

External URLs in Navigation

The navigation item is extended by External URL field. This field is then used instead of url field.

Multiple content pages

There are multiple content pages used as the content container. Namely Home page, Sections page, Listing page. These content containers are using different templates when registering the page components under the routes (templates).

Listing content page

One of the content container types is Listing items, this type allows to select content type(s) that is/are then used to determine what is about to be queried in the page. To model it in Kontent Type selector custom element is used and then in the application. Then when the application is registering the page components ir loads detail items and register them under their own route with detail component template.

In this case it its journal/<GOTCHA_SLUG>