From c60678e11bb5574963902a308ea2f9354e09a09b Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Mon, 13 Jan 2020 20:10:01 -0800
Subject: [PATCH 1/3] tutorial summary in markdown

---
 web-app/src/components/Markdown/index.tsx     | 29 ++++++++++++++++++-
 .../New/TutorialList/TutorialItem.tsx         |  3 +-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx
index 18f701d8..bc64669d 100644
--- a/web-app/src/components/Markdown/index.tsx
+++ b/web-app/src/components/Markdown/index.tsx
@@ -10,22 +10,49 @@ import './prism'
 // markdown highlighter instance
 const md: MarkdownIt = new MarkdownIt({
   breaks: true,
-  // highlight: syntaxHighlight,
   html: true,
   linkify: true,
 })
   // add emoji: https://github.com/markdown-it/markdown-it-emoji
   .use(markdownEmoji)
+  // add syntax highlighting through prism
   .use(prism, {
     defaultLanguage: 'js',
   })
 
+// const mdFeatures = [
+//   'table',
+//   'code',
+//   'fence',
+//   'blockquote',
+//   'hr',
+//   'list',
+//   'reference',
+//   'heading',
+//   'lheading',
+//   'html_block',
+//   'paragraph',
+//   'html_inline',
+//   'autolink',
+//   'link',
+//   'image',
+// ]
+
+// TODO: markdownIt with rules disabling most features
+// const minimalMarkdownIt = new MarkdownIt({
+//   breaks: false,
+//   html: true,
+//   linkify: false,
+// }).disable(mdFeatures)
+
 interface Props {
   children: string
+  minimal?: boolean
 }
 
 const Markdown = (props: Props) => {
   let html: string
+  // TODO: set md to minimal rule set if specified
   try {
     html = md.render(props.children)
   } catch (error) {
diff --git a/web-app/src/containers/New/TutorialList/TutorialItem.tsx b/web-app/src/containers/New/TutorialList/TutorialItem.tsx
index 0f7076e2..7277af54 100644
--- a/web-app/src/containers/New/TutorialList/TutorialItem.tsx
+++ b/web-app/src/containers/New/TutorialList/TutorialItem.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import Card from '../../../components/Card'
+import Markdown from '../../../components/Markdown'
 
 const styles = {
   card: {
@@ -39,7 +40,7 @@ const LanguageIcon = () => (
 const TutorialItem = (props: Props) => (
   <Card onClick={props.onSelect} css={styles.card}>
     <h3>{props.title || 'Title'}</h3>
-    <p>{props.description || 'Description'}</p>
+    <Markdown minimal>{props.description || 'Description'}</Markdown>
     <div css={styles.languages}>
       <LanguageIcon />
     </div>

From f82c2b893e48e4cc9c6b304cc1b467cb76518420 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Mon, 13 Jan 2020 20:20:56 -0800
Subject: [PATCH 2/3] fix spacing/scroll issue on overview page

---
 web-app/src/containers/Overview/OverviewPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web-app/src/containers/Overview/OverviewPage.tsx b/web-app/src/containers/Overview/OverviewPage.tsx
index 1bdaa25f..cfc18e85 100644
--- a/web-app/src/containers/Overview/OverviewPage.tsx
+++ b/web-app/src/containers/Overview/OverviewPage.tsx
@@ -3,12 +3,15 @@ import * as G from 'typings/graphql'
 import Button from '../../components/Button'
 import Markdown from '../../components/Markdown'
 
+const footerHeight = 50
+
 const styles = {
   page: {
     position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     width: '100%',
+    paddingBottom: footerHeight,
   },
   summary: {
     padding: '0rem 1rem 1rem 1rem',
@@ -38,7 +41,7 @@ const styles = {
     flexDirection: 'row' as 'row',
     alignItems: 'center' as 'center',
     justifyContent: 'flex-end' as 'flex-end',
-    height: '50px',
+    height: footerHeight,
     padding: '1rem',
     paddingRight: '2rem',
     backgroundColor: 'black',

From 0041ef18bedb3c2e0c3411b9b9f04c4713b70081 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Mon, 13 Jan 2020 20:26:25 -0800
Subject: [PATCH 3/3] fix process events positioning

---
 .../src/containers/Tutorial/LevelPage/Level.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web-app/src/containers/Tutorial/LevelPage/Level.tsx b/web-app/src/containers/Tutorial/LevelPage/Level.tsx
index 0ebbe2c5..b9d7dd53 100644
--- a/web-app/src/containers/Tutorial/LevelPage/Level.tsx
+++ b/web-app/src/containers/Tutorial/LevelPage/Level.tsx
@@ -14,7 +14,7 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
-    paddingBottom: '36px',
+    paddingBottom: 72,
     height: 'auto',
     width: '100%',
   },
@@ -42,18 +42,20 @@ const styles = {
   },
   processes: {
     padding: '0 1rem',
-    position: 'absolute' as 'absolute',
-    bottom: '36px',
+    position: 'fixed' as 'fixed',
+    bottom: 36,
+    left: 0,
+    right: 0,
   },
   footer: {
     display: 'flex' as 'flex',
     flexDirection: 'row' as 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: '36px',
+    height: 36,
     backgroundColor: 'black',
-    fontSize: '16px',
-    lineHeight: '16px',
+    fontSize: 16,
+    lineHeight: 16,
     padding: '10px 1rem',
     position: 'fixed' as 'fixed',
     bottom: 0,