# Contentful guide for frontline.live

We use Contentful to manage & update the content on https://frontline.live.

Content that can be updated include:
1. Home page
2. About
3. Partners

## Set up
Make sure you have the
- access to the Frontline.Live organisation on Contentful
- access to the 'Contentful for Frontline.live' space

Contact James if you have trouble getting the access.


## Content environment

There are two types of environemnt on Contentful:
1. development
2. production

The development environment is linked to the staging site. Changes made will only be visible on the staging site. It will not affect the production site.

Production environments are supposed to be linked to the production site. Changes made will be reflected on production.

Learn how to properly roll out updates to the production below.

## Content update workflow

<iframe src="https://player.vimeo.com/video/514343408" width="640" height="353" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

:::info
Always making changes to the development environment. Do not update production environments directly.
:::

Here's the expected workflow:

1. Update and publish the content in the **development environment**
2. Review the changes on the **staging site**
3. Go to settings > environments. Create a new environment from the development branch. Suggest you name the new environment as 'production+{release_date}'. Now you'll have a copy of the development branch which we can deploy to production.
5. Update the master aliases to the newly created environment.
6. Go the **production site** to see if the changes are correctly deployed.

Housekeeping:

1. If things go wrong on production, you can always roll back to the previous version by updating the master aliases.
2. The free plan only allows us to keep 4 environments at a time. Best practices are 1) keep the existing production environment, 2) keep the last production environment, 3) keep the development environment

## Content update

<iframe src="https://player.vimeo.com/video/514336464" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

Go to the **content** tab.

You'll see 4 content types:
1. Home page: marketing copy of the home page
2. About page: marketing copy of the about page
3. Partner page: marketing copy of the partner page
4. Partner: partners' logos and links


There are two major operations you'll carry out on Contentful:
1. Update the marketing copy of the pages
2. Upload new partner's logos & links

### Upating the marketing copy of the pages

Go to the page and select the entry you want to make changes to.

You'll then see a rich text editor. Most updates should be straight forward since we use a rich text editor. You can define headers, lists and links fairely easily. However, there are some special components that requires the use of html tag. For details please see 'working with the editor' below.


### Uploading new partner's logos and links


## Working with the editor

All content can be updated using a rich text editor. The rich text editor provided by Contentful allows you to define headers, lists and links fairly easily.

However, there're a few types of content that that are not supported by Contentful natively and requires the use of HTML tags.

### Embeded videos
You'll need to copy and paste the player codes provided by the video providers.

YouTube:

Vimeo:

### Indented lists

To create an indented list, you need to wrap your content in a styled div like below:

<div class="indent contentfulStyledList">

<!-- insert your content here -->

</div>

### Bold & large numbers


To make a number bold & large, you need to wrap the number with a `<span>` tag.

<span class="bignumber">your number here</span>