coderoad · ShMcK · May 15, 2020 · May 15, 2020 · May 15, 2020
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+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.
diff --git a/docs/tutorials.md → docs/docs/build-tutorial.md b/docs/tutorials.md → docs/docs/build-tutorial.md
@@ -1,4 +1,8 @@
-# Tutorial Docs
+---
+id: build-tutorial
+title: Building a Tutorial
+sidebar_label: Building a Tutorial
+---
 
 A tutorial is made up of two parts:
 
@@ -133,7 +137,7 @@ That said, anything can be tested. I’ll include some examples below of tests I
 ##### Equality
 
 Testing equality
-Eg. https://github.com/ShMcK/coderoad-tutorial-js-bug-hunter/commit/75b32ebee89853deb3b4dad6aa8654f89bc72cff
+Eg. <https://github.com/ShMcK/coderoad-tutorial-js-bug-hunter/commit/75b32ebee89853deb3b4dad6aa8654f89bc72cff>
 
 ##### Spy/Listener
 
@@ -171,7 +175,7 @@ Eg. [setup: useText hook refactor · ShMcK/coderoad-tutorial-tweeter@71deafa ·
 
 When editing markdown, simply edit the markdown and re-run the parser.
 
-When editing code, you'll need to rebase. You can use VSCode as your default editor for Git: https://blog.soltysiak.it/en/2017/01/set-visual-studio-code-as-default-git-editor-and-diff-tool/.
+When editing code, you'll need to rebase. You can use VSCode as your default editor for Git: <https://blog.soltysiak.it/en/2017/01/set-visual-studio-code-as-default-git-editor-and-diff-tool/.>
 
 Run rebase from a commit or just "root".
 

diff --git a/docs/docs/overview.md b/docs/docs/overview.md
@@ -0,0 +1,7 @@
+---
+id: overview
+title: Overview
+sidebar_label: Overview
+---
+
+Overview
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -0,0 +1,91 @@
+module.exports = {
+  title: 'CodeRoad',
+  tagline: 'A VSCode Extension for Interactive Coding Tutorials',
+  url: 'https://coderoad.github.io',
+  baseUrl: '/',
+  favicon: 'img/favicon.ico',
+  organizationName: 'coderoad',
+  projectName: 'coderoad-vscode',
+  themeConfig: {
+    navbar: {
+      title: 'CodeRoad',
+      logo: {
+        alt: 'My Site Logo',
+        src: 'img/logo.svg',
+      },
+      links: [
+        {
+          to: 'docs/overview',
+          activeBasePath: 'docs',
+          label: 'Docs',
+          position: 'left',
+        },
+        {
+          href: 'https://github.com/coderoad/coderoad-vscode',
+          label: 'GitHub',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        // {
+        //   title: 'Docs',
+        //   items: [
+        //     {
+        //       label: 'Style Guide',
+        //       to: 'docs/doc1',
+        //     },
+        //     {
+        //       label: 'Second Doc',
+        //       to: 'docs/doc2',
+        //     },
+        //   ],
+        // },
+        // {
+        //   title: 'Community',
+        //   items: [
+        //     {
+        //       label: 'Stack Overflow',
+        //       href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+        //     },
+        //     {
+        //       label: 'Discord',
+        //       href: 'https://discordapp.com/invite/docusaurus',
+        //     },
+        //     {
+        //       label: 'Twitter',
+        //       href: 'https://twitter.com/docusaurus',
+        //     },
+        //   ],
+        // },
+        // {
+        //   title: 'More',
+        //   items: [
+        //     {
+        //       label: 'GitHub',
+        //       href: 'https://github.com/coderoad/coderoad-vscode',
+        //     },
+        //   ],
+        // },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} CodeRoad. Built with Docusaurus.`,
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          // Please change this to your repo.
+          editUrl: 'https://github.com/coderoad/coderoad-vscode/edit/master/docs/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+}
diff --git a/docs/package.json b/docs/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.54",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.54",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -0,0 +1,6 @@
+module.exports = {
+  someSidebar: {
+    Intro: ['overview', 'build-tutorial'],
+    // Features: ['mdx'],
+  },
+}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -0,0 +1,25 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: rgb(33, 175, 144);
+  --ifm-color-primary-darker: rgb(31, 165, 136);
+  --ifm-color-primary-darkest: rgb(26, 136, 112);
+  --ifm-color-primary-light: rgb(70, 203, 174);
+  --ifm-color-primary-lighter: rgb(102, 212, 189);
+  --ifm-color-primary-lightest: rgb(146, 224, 208);
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -0,0 +1,78 @@
+import React from 'react'
+import classnames from 'classnames'
+import Layout from '@theme/Layout'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import useBaseUrl from '@docusaurus/useBaseUrl'
+import styles from './styles.module.css'
+
+const features = [
+  {
+    title: <>Your Editor</>,
+    imageUrl: 'img/undraw_docusaurus_mountain.svg',
+    description: <>Playing tutorials in a real-world setting: within your coding editor.</>,
+  },
+  {
+    title: <>Your Code</>,
+    imageUrl: 'img/undraw_docusaurus_tree.svg',
+    description: <>You own your progress. Save with Git to build your timeline. Deploy to build your portfolio.</>,
+  },
+  {
+    title: <>Open</>,
+    imageUrl: 'img/undraw_docusaurus_react.svg',
+    description: <>CodeRoad is open-source. Build your own tutorials. Contribute to the tooling.</>,
+  },
+]
+
+function Feature({ imageUrl, title, description }) {
+  const imgUrl = useBaseUrl(imageUrl)
+  return (
+    <div className={classnames('col col--4', styles.feature)}>
+      {imgUrl && (
+        <div className="text--center">
+          <img className={styles.featureImage} src={imgUrl} alt={title} />
+        </div>
+      )}
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  )
+}
+
+function Home() {
+  const context = useDocusaurusContext()
+  const { siteConfig = {} } = context
+  return (
+    <Layout title={`Hello from ${siteConfig.title}`} description="Description will go into a meta tag in <head />">
+      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames('button button--outline button--secondary button--lg', styles.getStarted)}
+              to={useBaseUrl('docs/overview')}
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        {features && features.length && (
+          <section className={styles.features}>
+            <div className="container">
+              <div className="row">
+                {features.map((props, idx) => (
+                  <Feature key={idx} {...props} />
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+      </main>
+    </Layout>
+  )
+}
+
+export default Home
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
@@ -0,0 +1,36 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}
diff --git a/docs/static/img/favicon.ico b/docs/static/img/favicon.ico
diff --git a/docs/static/img/logo.svg b/docs/static/img/logo.svg