Merge pull request coderoad#355 from coderoad/fix/summary-markdown

ShMcK · web-flow · commit 1037582467de · 2020-05-24T11:43:59.000-07:00
add markdown support to tutorial overview
diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as TT from 'typings/tutorial'
 // import moment from 'moment'
-import Button from '../Button'
-import Markdown from '../Markdown'
+import Button from '../../../components/Button'
+import Markdown from '../../../components/Markdown'
 import { Breadcrumb } from '@alifd/next'
 
 const footerHeight = '3rem'
@@ -88,8 +88,8 @@ const Summary = (props: Props) => {
               </Breadcrumb.Item>
             </Breadcrumb>
           </div>
-          <h1 css={styles.title}>{props.tutorial.summary.title}</h1>
-          <h3>{props.tutorial.summary.description}</h3>
+          <Markdown css={styles.title}>{`# ${props.tutorial.summary.title}`}</Markdown>
+          <Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
           {/* <h5 css={styles.meta}>
           <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
           <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
@@ -100,9 +100,7 @@ const Summary = (props: Props) => {
             <h2>Content</h2>
             {props.tutorial.levels.map((level: TT.Level, index: number) => (
               <div key={index}>
-                <h3>
-                  {index + 1}. {level.title}
-                </h3>
+                <Markdown>{`### ${index + 1}. ${level.title}`}</Markdown>
                 <div css={styles.levelSummary}>
                   <Markdown>{level.summary}</Markdown>
                 </div>
diff --git a/web-app/src/containers/SelectTutorial/index.tsx b/web-app/src/containers/SelectTutorial/index.tsx
@@ -1,7 +1,7 @@
 import * as TT from 'typings/tutorial'
 import * as React from 'react'
 import SelectTutorialForm from './SelectTutorialForm'
-import TutorialOverview from '../../components/TutorialOverview'
+import TutorialOverview from './TutorialOverview'
 import LoadTutorialSummary from './LoadTutorialSummary'
 import processTutorial from '../../services/tutorial'
 
diff --git a/web-app/stories/Overview.stories.tsx b/web-app/stories/Overview.stories.tsx
@@ -3,7 +3,7 @@ import { linkTo } from '@storybook/addon-links'
 import { action } from '@storybook/addon-actions'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
-import OverViewPage from '../src/components/TutorialOverview'
+import OverViewPage from '../src/containers/SelectTutorial/TutorialOverview'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 storiesOf('Overview', module)
@@ -13,18 +13,21 @@ storiesOf('Overview', module)
       id: '1',
       version: '0.1.0',
       config: {
+        appVersions: {
+          vscode: '0.1.0',
+        },
         testRunner: { command: '' },
         repo: { uri: '', branch: 'master' },
       },
       summary: {
         title: 'Manage NPM package.json',
-        description: 'Learn to use the package manager at the core of JavaScript projects.',
+        description: 'Learn to use the package manager at the core of JavaScript projects',
       },
       levels: [
         {
           id: 'L1',
-          title: 'The First Level',
-          summary: 'A Summary of the first level',
+          title: 'The First Level. `Markdown` supported here.',
+          summary: 'A Summary of the first level. `Markdown` supported here.',
           content: '',
           steps: [],
         },
