Aug 7, 2020 · Aug 6, 2020 · Aug 6, 2020 · Aug 6, 2020 · Aug 6, 2020 · Aug 7, 2020
diff --git a/docs/README.md b/docs/README.md
 # Website
 <p align="center">
  <a href="https://coderoad.github.io/">
    <img alt="CodeRoad Logo" src="https://user-images.githubusercontent.com/9423525/89562564-26b4f780-d7e8-11ea-9eb0-3109b0e55d3b.png" width="100" />
  </a>
 </p>
 <h1 align="center">
 CodeRoad VSCode
 </h1>

 This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
 <p align="center">
  <a href="#" alt="Version"><img src="https://vsmarketplacebadge.apphb.com/version/Coderoad.coderoad.svg" /></a>
  <a href="#" alt="Installs"><img src="https://vsmarketplacebadge.apphb.com/installs/Coderoad.coderoad.svg" /></a>
   <a href="#" alt="Downloads"><img src="https://vsmarketplacebadge.apphb.com/downloads/Coderoad.coderoad.svg" /></a>
 </p>

 ### Installation
 CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor.

 ```
 $ yarn
 ```
 ![CodeRoad Image](./docs/static/img/tutorial-example.png)

 ### Local Development
 ## Why

 ```
 $ yarn start
 ```
 Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.

 This command starts a local development server and open up a browser window. Most changes are reflected live without havingtorestart the server.
 For learners, there are a number of advantagestorunning tutorials inside VSCode:

 ### Build
 - learn in a real world coding environment
 - get rapid feedback on save and helpful error messages
 - users own the code, and can build a Git timeline and deploy a portfolio

 ```
 $ yarn build
 ```
 ## Getting Started

 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 ### Start

 ### Deployment
 To start the extension, inside VSCode:

 ```
 $ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
 ```
 - open an empty VSCode workspace (an empty folder)
 - launch the app from the VSCode command palette:
  - select “View” > “Command Palette” from the top panel OR press `cmd/ctrl + shift + P`
  - in the command palette, search for and run `CodeRoad:Start`
 - a webview should appear on the right side of your editor. Click "Start"

 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
 ### Install

 Install CodeRoad from [this link in the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=CodeRoad.coderoad).

 - You may need to reload the window (`ctrl/cmd + R`)
 - See ["Start"](#start) to get started.

 ### Requirements

 - OS: MacOS, Windows, Linux
 - VSCode 1.39.2+
 - Node.js 10+
 - Git

 ## How CodeRoad Works

 Read more in the docs about [how CodeRoad works](https://coderoad.github.io/docs/how-coderoad-works).

 ## Creating Tutorials

 Build and share your own interactive tutorials.

 Learn more about [how tutorials area created](https://coderoad.github.io/docs/build-tutorial).

 ## Editing Tutorials

 Tutorials can be edited directly as markdown on Github.

 ## Development

 To run the extension locally:

 - copy environmental variables from `/web-app/.env.example` as `/web-app/.env`
 - install dependencies with `yarn install-all`
 - build the extension with `yarn build`
 - open the extension with the vscode extension debugger by pressing F5. In the new window, open CodeRoad.

 To test a packaged build locally:

 - if on Mac, ensure you have [VSCode command line tools](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) installed
 - run `yarn package`. It will build the extension and install it locally.
 - open a new vscode window and launch the new version of CodeRoad

 ## Contributing

 CodeRoad is an ambitious project, we're always looking for contributors :)

 See [CONTRIBUTING.md](./CONTRIBUTING.md).

 ## License

 [AGPL v3](./LICENSE.md)
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
    navbar: {
      title: 'CodeRoad',
      logo: {
        alt: 'My Site Logo',
        alt: 'CodeRoad Logo',
        src: 'img/logo.svg',
      },
      links: [
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css

 /* You can override the default Infima variables here. */
 :root {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary: #33a5f1;
  --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
 const features = [
  {
    title: <>Your Editor</>,
    imageUrl: 'img/undraw_docusaurus_mountain.svg',
    imageUrl: 'img/undraw_editor.svg',
    description: <>Playing tutorials in a real-world setting: within your coding editor.</>,
  },
  {
    title: <>Your Code</>,
    imageUrl: 'img/undraw_docusaurus_tree.svg',
    imageUrl: 'img/undraw_code.svg',
    description: <>You own your progress. Save with Git to build your timeline. Deploy to build your portfolio.</>,
  },
  {
    title: <>Free & Open</>,
    imageUrl: 'img/undraw_docusaurus_react.svg',
    imageUrl: 'img/undraw_open_source.svg',
    description: <>CodeRoad is open-source. Build your own tutorials. Contribute to the tooling.</>,
  },
 ]
diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico
diff --git a/docs/static/img/logo-128.png b/docs/static/img/logo-128.png
diff --git a/docs/static/img/logo-16.png b/docs/static/img/logo-16.png
diff --git a/docs/static/img/logo-200.png b/docs/static/img/logo-200.png
diff --git a/docs/static/img/logo-24.png b/docs/static/img/logo-24.png
diff --git a/docs/static/img/logo-32.png b/docs/static/img/logo-32.png
diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg
diff --git a/docs/static/img/undraw_code.svg b/docs/static/img/undraw_code.svg
Original file line number	Diff line number	Diff line change
		@@ -1,33 +1,93 @@
		# Website
		<p align="center">
		<a href="https://coderoad.github.io/">
		<img alt="CodeRoad Logo" src="https://user-images.githubusercontent.com/9423525/89562564-26b4f780-d7e8-11ea-9eb0-3109b0e55d3b.png" width="100" />
		</a>
		</p>
		<h1 align="center">
		CodeRoad VSCode
		</h1>

		This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
		<p align="center">
		<a href="#" alt="Version"><img src="https://vsmarketplacebadge.apphb.com/version/Coderoad.coderoad.svg" /></a>
		<a href="#" alt="Installs"><img src="https://vsmarketplacebadge.apphb.com/installs/Coderoad.coderoad.svg" /></a>
		<a href="#" alt="Downloads"><img src="https://vsmarketplacebadge.apphb.com/downloads/Coderoad.coderoad.svg" /></a>
		</p>

		### Installation
		CodeRoad is a VSCode extension that allows you to play interactive coding tutorials in your editor.

		```
		$ yarn
		```
		![CodeRoad Image](./docs/static/img/tutorial-example.png)

		### Local Development
		## Why

		```
		$ yarn start
		```
		Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.

		This command starts a local development server and open up a browser window. Most changes are reflected live without havingtorestart the server.
		For learners, there are a number of advantagestorunning tutorials inside VSCode:

		### Build
		- learn in a real world coding environment
		- get rapid feedback on save and helpful error messages
		- users own the code, and can build a Git timeline and deploy a portfolio

		```
		$ yarn build
		```
		## Getting Started

		This command generates static content into the `build` directory and can be served using any static contents hosting service.
		### Start

		### Deployment
		To start the extension, inside VSCode:

		```
		$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
		```
		- open an empty VSCode workspace (an empty folder)
		- launch the app from the VSCode command palette:
		- select “View” > “Command Palette” from the top panel OR press `cmd/ctrl + shift + P`
		- in the command palette, search for and run `CodeRoad:Start`
		- a webview should appear on the right side of your editor. Click "Start"

		If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
		### Install

		Install CodeRoad from [this link in the VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=CodeRoad.coderoad).

		- You may need to reload the window (`ctrl/cmd + R`)
		- See ["Start"](#start) to get started.

		### Requirements

		- OS: MacOS, Windows, Linux
		- VSCode 1.39.2+
		- Node.js 10+
		- Git

		## How CodeRoad Works

		Read more in the docs about [how CodeRoad works](https://coderoad.github.io/docs/how-coderoad-works).

		## Creating Tutorials

		Build and share your own interactive tutorials.

		Learn more about [how tutorials area created](https://coderoad.github.io/docs/build-tutorial).

		## Editing Tutorials

		Tutorials can be edited directly as markdown on Github.

		## Development

		To run the extension locally:

		- copy environmental variables from `/web-app/.env.example` as `/web-app/.env`
		- install dependencies with `yarn install-all`
		- build the extension with `yarn build`
		- open the extension with the vscode extension debugger by pressing F5. In the new window, open CodeRoad.

		To test a packaged build locally:

		- if on Mac, ensure you have [VSCode command line tools](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) installed
		- run `yarn package`. It will build the extension and install it locally.
		- open a new vscode window and launch the new version of CodeRoad

		## Contributing

		CodeRoad is an ambitious project, we're always looking for contributors :)

		See [CONTRIBUTING.md](./CONTRIBUTING.md).

		## License

		[AGPL v3](./LICENSE.md)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,7 +15,7 @@ module.exports = {
		navbar: {
		title: 'CodeRoad',
		logo: {
		alt: 'My Site Logo',
		alt: 'CodeRoad Logo',
		src: 'img/logo.svg',
		},
		links: [
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,7 +7,7 @@

		/* You can override the default Infima variables here. */
		:root {
		--ifm-color-primary: #25c2a0;
		--ifm-color-primary: #33a5f1;
		--ifm-color-primary-dark: rgb(33, 175, 144);
		--ifm-color-primary-darker: rgb(31, 165, 136);
		--ifm-color-primary-darkest: rgb(26, 136, 112);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,17 +9,17 @@ import styles from './styles.module.css'
		const features = [
		{
		title: <>Your Editor</>,
		imageUrl: 'img/undraw_docusaurus_mountain.svg',
		imageUrl: 'img/undraw_editor.svg',
		description: <>Playing tutorials in a real-world setting: within your coding editor.</>,
		},
		{
		title: <>Your Code</>,
		imageUrl: 'img/undraw_docusaurus_tree.svg',
		imageUrl: 'img/undraw_code.svg',
		description: <>You own your progress. Save with Git to build your timeline. Deploy to build your portfolio.</>,
		},
		{
		title: <>Free & Open</>,
		imageUrl: 'img/undraw_docusaurus_react.svg',
		imageUrl: 'img/undraw_open_source.svg',
		description: <>CodeRoad is open-source. Build your own tutorials. Contribute to the tooling.</>,
		},
		]
Expand Down