If there are pages with a lot of static content then these need to be translated.

To assist this we do not write large blocks of content into the source code javascript files. Instead do one of the following:

Source code Markdown file

Create a markdown file in either the folder for the page/component, or in a common resources folder.

Load the md file into the page using import - this will return a string containing the text in the file (using webpack raw-loader).

Pass the md as the body of a <Markdown> tag.

import Markdown from 'markdown-to-jsx';
import markdown from './markdown-example.md';

<Markdown>{markdown}</Markdown>

The Markdown tag will render the body as HTML. This can include component references see the https://www.npmjs.com/package/markdown-to-jsx documentation

See example in Showcase

Markdown from database

Similar to above but obtain the markdown text from a database or api call and place into the Markdown component.

I have not done this yet but I would like to translate markdown files as follows

first create a copy of the file named for each language supported.

e.g calltoaction.md → calltoaction.en.md, calltoaction.mi.md

Get the content translated - we can teach translators markdown easily enough.

Import all the files.

set the initial language based on the intl locale.

Hook into the switch language action and update the markdown content. - We need a new <Markdown-Intl> component to automate this.