index.md

layout	title	permalink
page	Main	/

Introduction

This page combines static html generated by jekyll from markdown files that can include multiple React components. It is generated from the files in the gh-pages branch of this GitHub template.

Below is one component:

And here is another one:

In addition, as is customary with Jekyll sites, the News tab is generated based on markdown files in the _posts folder.

Code Structure

The above is rendered based on this markdown code in index.md:

Below is one component:

<div id="component_1"></div>

And here is another one:

<div id="component_2"></div>

and the code in src/entry.jsx which renders the React components in src/components into the divs above:

ReactDOM.render(<Component1 />, document.getElementById('component_1'));
ReactDOM.render(<Component2 />, document.getElementById('component_2'));

The components in src/components/component1.jsx and src/components/component2.jsx are based on basic examples in the react-bootstrap project.

Development

To start development based on this, clone this this GitHub template, check out the gh-pages branch, and edit the .md and .jsx files (in the src folder).

The package manager used is yarn, and three scripts are configured in package.json to help you:

1. To type-check your js/jsx code using flow, execute

   yarn flow

2. To build the javascript source in build.js, execute

   yarn build

3. To preview the site locally, execute

   yarn start

Happy building!

Acknowledgements

This repo was created by Frank Dellaert, with help from Sushmita Warrier and Varun Agrawal, based on boilerplate by Allison Zadrozny and described in this blog post.

Changes with respect to Allison's code:

• dependencies were brought up to date to 2020
• demoes multiple React components on page
• switched to yarn package manager
• added react-bootstrap, loaded via CDN
• added flow, because why go without type-checking, ever?