about page

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

web-app/src/containers/Tutorial/components/SideMenu.tsx

@@ -23,8 +23,8 @@ const styles = {
 interface Props {
   visible: boolean
   toggleVisible(visible: boolean): void
-  page: 'level' | 'settings' | 'review'
-  setPage(page: 'level' | 'settings' | 'review'): void
+  page: 'about' | 'level' | 'review' | 'settings'
+  setPage(page: 'about' | 'level' | 'review' | 'settings'): void
 }
 
 const SideMenu = (props: Props) => {
@@ -65,8 +65,20 @@ const SideMenu = (props: Props) => {
           <Icon type="list" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Review</span>
         </Item>
-        {/* <Divider key="divider" />
+        <Divider key="divider" />
         <Item
+          key="about"
+          disabled={props.page === 'about'}
+          style={props.page === 'about' ? styles.active : {}}
+          onClick={() => {
+            onMenuClose()
+            props.setPage('about')
+          }}
+        >
+          <Icon type="prompt" size="xs" color="#EBEBEB" />
+          <span style={styles.itemText}>About</span>
+        </Item>
+        {/* <Item
           key="settings"
           disabled={props.page === 'settings'}
           style={props.page === 'settings' ? styles.active : {}}
@@ -77,7 +89,8 @@ const SideMenu = (props: Props) => {
         >
           <Icon type="set" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Settings</span>
-        </Item> */}
+        </Item>{' '}
+        */}
       </Menu>
     </Drawer>
   )

web-app/src/containers/Tutorial/containers/About.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import Markdown from '../../../components/Markdown'
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+  header: {
+    display: 'flex' as 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '2rem',
+    backgroundColor: '#EBEBEB',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 0.4rem',
+  },
+  content: {
+    padding: '0.5rem',
+  },
+}
+
+interface Props {}
+
+const AboutPage = (props: Props) => {
+  return (
+    <div css={styles.container}>
+      <div css={styles.header}>
+        <div>About CodeRoad</div>
+      </div>
+      <div css={styles.content}>
+        <Markdown>
+          {`
+CodeRoad is an open source VSCode extension that allows you to **create** and **play** interactive coding tutorials inside VSCode.
+
+Learn more or contribute at [https://github.com/coderoad/coderoad-vscode](https://github.com/coderoad/coderoad-vscode).
+
+##### Why CodeRoad?
+
+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.
+
+For learners, there are a number of advantages to running tutorials inside VSCode:
+
+a. Learn in a real world coding environment
+b. Get rapid feedback on save and helpful error messages
+c. Users own the code, and can build a Git timeline and deploy a portfolio
+
+##### Subscribe
+
+Join our [mailing list](https://tiny.cc/coderoad) to hear about new tutorials & features. 
+
+##### Contact
+
+We'd love to hear your feedback. 
+
+For bugs/feature requests, reach out on GitHub.
+
+Otherwise, email us at [coderoadapp@gmail.com](mailto:coderoadapp@gmail.com).
+
+`}
+        </Markdown>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

web-app/src/containers/Tutorial/index.tsx

@@ -4,6 +4,7 @@ import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
 import Icon from '../../components/Icon'
+import AboutPage from './containers/About'
 import ReviewPage from './containers/Review'
 import Button from '../../components/Button'
 import ProcessMessages from '../../components/ProcessMessages'
@@ -103,7 +104,7 @@ const TutorialPage = (props: PageProps) => {
 
   const [menuVisible, setMenuVisible] = React.useState(false)
 
-  const [page, setPage] = React.useState<'level' | 'settings' | 'review'>('level')
+  const [page, setPage] = React.useState<'about' | 'level' | 'review' | 'settings'>('level')
 
   // format level code with status for easy rendering
   const { level, levels, levelIndex, stepIndex } = formatLevels({
@@ -125,6 +126,8 @@ const TutorialPage = (props: PageProps) => {
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
+        {page === 'about' && <AboutPage />}
+
         {page === 'level' && (
           <ScrollContent item={level.id}>
             <Level level={level} />

web-app/stories/About.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from './utils/SideBarDecorator'
+import AboutPage from '../src/containers/Tutorial/containers/About'
+
+storiesOf('About', module)
+  .addDecorator(SideBarDecorator)
+  .add('About Page', () => {
+    return <AboutPage />
+  })

web-app/stories/Overview.stories.tsx

@@ -16,7 +16,7 @@ storiesOf('Overview', module)
         appVersions: {
           vscode: '0.1.0',
         },
-        testRunner: { command: '' },
+        testRunner: { command: '', args: { tap: '' } },
         repo: { uri: '', branch: 'master' },
       },
       summary: {