Use CMS + website pipeline to generate teaching resources for Kurono

[mrniket]

What is the problem that you wish to solve? Please describe.
All our teaching resources are currently separate InDesign files. While this is great for design and flexibility with layout, it makes it very hard for content creators to make new teaching resources and edit existing ones.

Currently, they need:

• a license to use InDesign
• The TypeKit and Google fonts we use installed on their computer
• The file references to images in the document also on their computer
• Knowledge of how to use InDesign

Content also doesn't reflow automatically across multiple pages. All of these things mean that we are less focused on the content of the teaching materials which is obviously not good!

Describe the solution you'd like
The solution I have in mind (and have checked with the team) is:

• Create and edit the teaching resources on a CMS
• A website picks up the content from the CMS
• Then "print" the page and "Save to PDF" on Chrome to generate to the PDFs (it is possible to write a script to automate this if we deem it necessary)

The website can be hosted on Ocado's internal Gitlab so we aren't advertising any potential solutions to challenges we have on there.

UI is done using a static site generator, this is also how we can keep the layout and the design of the teaching resources consistent.

I have created a prototype of this solution using Prismic for the CMS, for the GatsbyJS

Gatsby also has a page dedicated to deploying on Gitlab Pages: https://www.gatsbyjs.org/docs/deploying-to-gitlab-pages/

Describe alternatives you've considered
I first considered using PDF generating technologies but I found that they used a different stack/layout system than the ones we use when making websites. They also use a different API (i.e. not CSS) so the team would need to add to our tech stack and would need training.

For these reasons I decided to use Chrome as our "PDF renderer and generator". Since the PDF's are the end result we are looking for, we only need to worry about supporting one browser.

GatsbyJS is a great choice for us because it uses React, the same base framework we use for the Kurono game.

Prismic was a good CMS choice for us because of its content slice feature. This allows us to change the layout in the CMS for each worksheet (e.g. from 2 column to table to Subheading) so we can have custom UI for each part to match our current worksheet designs.

Additional context
For the moment, I plan to put all of the issues for this task on Github. At some point, we may consider moving issues with this pipeline to the Gitlab repository.