Emulsify website

Built using NextJS and Tailwind for the frontend. Content for the blog comes from Contentful and the documentation is held in this repo as markdown files.

Requirements and setup

Install npm, preferably with nvm (node version manager) so you can easily use the node version found in .nvmrc

Before installation, you will need to replace FONTAWESOME_NPM_AUTH_TOKEN with the token in ~/.npmrc. This token can be found in the Four Kitchens 1Password shared vault as "FONTAWESOME_NPM_AUTH_TOKEN".

You will also need to copy .env.example and fill in the credentials. These can be found in the Four Kitchens 1Password shared vault as "Emulsify Website .env variables".

nvm use
cp .env.example .env.local (and add variables from 1pass to env.example file)
npm install

Access to the Emulsify website in Netlify.

Access to Contentful if you want to do anything with blog posts.

Features

Content sources

• Blog articles are authored using markdown in Contentful.
• Documenation, found on the site at /docs/*, are markdown files found in ./src/pages
• Documentation navigation is controlled by src/data/navigation.js.
• Other page content can be found either in ./src/pages/* or in the corresponding component in src/components.

Adding, editing, or removing blog posts

Blog articles are authored using markdown in Contentful. In order for a blog post to show up, you must check "Publish to Blog" in Contentful.

To add or edit an article

1. Author the article in Contentful, check "Publish to Blog", and publish it.
2. Create a pull request with an empty commit. Netlify will create a PR branch site to review.
3. Once approved, merge the PR. Netlify will then rerender the site with the new content.

To remove an article

1. Login to Contentful and uncheck "Publish to Blog".
2. Create a pull request with an empty commit. Netlify will create a PR branch site to review.
3. Once approved, merge the PR. Netlify will then rerender the site with the new content.

Markdoc

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites, created by Stripe.

The Emulsify website makes use of Markdoc components to customize rendering. They can be found in src/markdoc/tags.

• src/markdoc/tags/callout.js is a proof-of-concept component and is not used.
• src/markdoc/tags/gist.js renders Github Gists
• src/markdoc/tags/youtube.js renders YouTube videos