Merge pull request coderoad#75 from ShMcK/feature/minor-fixes

Feature/minor fixes

Author: ShMcK

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) {

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>

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',

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,