feat(sidebar): show bullet list in presenter and showcase mode

ubilabs · Nov 20, 2019 · ade7435 · ade7435
1 parent edfd184
commit ade7435
Show file tree

Hide file tree

Showing 20 changed files with 58 additions and 104 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules
 dist
 dist-electron
+.vscode
diff --git a/src/scripts/components/slide/slide.styl b/src/scripts/components/slide/slide.styl
@@ -5,7 +5,10 @@
   background-color: #fff
 
 .presentSlide
-  font-size: 1.5em
+  font-size: 1.7em
+
+.showcaseSlide
+  font-size: 1.2em
 
 .content
   display: flex

diff --git a/src/scripts/components/slide/slide.tsx b/src/scripts/components/slide/slide.tsx
@@ -18,8 +18,10 @@ interface Props {
 const Slide: FunctionComponent<Props> = ({mode, slide}) => {
   const slideClasses = cx(
     styles.slide,
-    mode === StoryMode.Present && styles.presentSlide
+    mode === StoryMode.Present && styles.presentSlide,
+    mode === StoryMode.Showcase && styles.showcaseSlide
   );
+
   return (
     <div className={slideClasses}>
       {(slide.images && (
@@ -29,21 +31,34 @@ const Slide: FunctionComponent<Props> = ({mode, slide}) => {
         />
       )) ||
         (slide.videoId && <StoryVideo videoId={slide.videoId} />)}
-      {}
       <div className={styles.content}>
-        <ReactMarkdown
-          source={slide.bodytext}
-          allowedTypes={[
-            'heading',
-            'text',
-            'paragraph',
-            'break',
-            'strong',
-            'emphasis',
-            'list',
-            'listItem'
-          ]}
-        />
+        {mode === StoryMode.Stories ? (
+          <ReactMarkdown
+            source={slide.bodytext}
+            allowedTypes={[
+              'heading',
+              'text',
+              'paragraph',
+              'break',
+              'strong',
+              'emphasis',
+              'list',
+              'listItem'
+            ]}
+          />
+        ) : (
+          <ReactMarkdown
+            source={slide.bulletList}
+            allowedTypes={[
+              'text',
+              'paragraph',
+              'strong',
+              'emphasis',
+              'list',
+              'listItem'
+            ]}
+          />
+        )}
       </div>
     </div>
   );

diff --git a/src/scripts/types/story.d.ts b/src/scripts/types/story.d.ts
@@ -6,9 +6,8 @@ export interface Story {
 }
 
 export interface Slide {
-  title: string;
-  subtitle: string;
   bodytext: string;
+  bulletList?: string;
   images?: [];
   videoId?: string;
   flyTo: GlobeView;

diff --git a/storage/stories/story1/story1-de.json b/storage/stories/story1/story1-de.json
@@ -2,9 +2,8 @@
   "id": "story1",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
-      "bodytext": "## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in",
+      "bodytext": "# Story title\n\n## Das ist ein subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in",
+      "bulletList": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story2.jpeg"
@@ -23,9 +22,8 @@
       }
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
-      "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title\n\n## Das ist ein subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bulletList": "- Lorem ipsum",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
       ],
@@ -43,15 +41,13 @@
       }
     },
     {
-      "title": "Story slide 3",
-      "subtitle": "Das ist story slide 3",
-      "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bodytext": "# Story title\n\n## Das ist ein subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bulletList": "- Lorem ipsum",
       "videoId": "U1SMPkVCG3o"
     },
     {
-      "title": "Story slide 4",
-      "subtitle": "Das ist story slide 4",
-      "bodytext": "Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title\n\n## Das ist ein subheader\n\nPraesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bulletList": "- Lorem ipsum",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
       ],

diff --git a/storage/stories/story1/story1-en.json b/storage/stories/story1/story1-en.json
@@ -2,9 +2,8 @@
   "id": "story1",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
-      "bodytext": "## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in",
+      "bodytext": "# Story title\n\n## This is a subheader\n\nAnd this is a paragraph\n\nMarkdown test: Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in",
+      "bulletList": "- Lorem ipsum\n\n- Exercitationem\n\n- sapiente",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg",
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story2.jpeg"
@@ -23,9 +22,8 @@
       }
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
-      "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title\n\n## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bulletList": "- Lorem ipsum",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
       ],
@@ -43,15 +41,13 @@
       }
     },
     {
-      "title": "Story slide 3",
-      "subtitle": "This is story slide 3",
-      "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bodytext": "# Story title\n\n## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bulletList": "- Lorem ipsum",
       "videoId": "U1SMPkVCG3o"
     },
     {
-      "title": "Story slide 4",
-      "subtitle": "This is story slide 4",
-      "bodytext": "Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title\n\n## This is a subheader\n\nPraesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bulletList": "- Lorem ipsum",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story1/assets/story1.jpeg"
       ],

diff --git a/storage/stories/story2/story2-de.json b/storage/stories/story2/story2-de.json
@@ -2,17 +2,13 @@
   "id": "story2",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
-      "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bodytext": "# Story title ## Das ist ein subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
-      "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title ## Das ist ein subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]

diff --git a/storage/stories/story2/story2-en.json b/storage/stories/story2/story2-en.json
@@ -2,17 +2,13 @@
   "id": "story2",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
-      "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bodytext": "# Story title ## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
-      "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title ## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story2/assets/story2.jpeg"
       ]

diff --git a/storage/stories/story3/story3-de.json b/storage/stories/story3/story3-de.json
@@ -2,17 +2,13 @@
   "id": "story3",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
-      "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
+      "bodytext": "# Story title ## This is a subheader\n\nLorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
-      "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
+      "bodytext": "# Story title ## This is a subheader\n\nExercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]

diff --git a/storage/stories/story3/story3-en.json b/storage/stories/story3/story3-en.json
@@ -2,16 +2,12 @@
   "id": "story3",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story3/assets/story3.jpeg"

diff --git a/storage/stories/story4/story4-de.json b/storage/stories/story4/story4-de.json
@@ -2,16 +2,12 @@
   "id": "story4",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg"

diff --git a/storage/stories/story4/story4-en.json b/storage/stories/story4/story4-en.json
@@ -2,16 +2,12 @@
   "id": "story4",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story4/assets/story4.jpeg"

diff --git a/storage/stories/story5/story5-de.json b/storage/stories/story5/story5-de.json
@@ -2,16 +2,12 @@
   "id": "story5",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg"

diff --git a/storage/stories/story5/story5-en.json b/storage/stories/story5/story5-en.json
@@ -2,16 +2,12 @@
   "id": "story5",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story5/assets/story5.jpeg"

diff --git a/storage/stories/story6/story6-de.json b/storage/stories/story6/story6-de.json
@@ -2,16 +2,12 @@
   "id": "story6",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg"

diff --git a/storage/stories/story6/story6-en.json b/storage/stories/story6/story6-en.json
@@ -2,16 +2,12 @@
   "id": "story6",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story6/assets/story6.jpeg"

diff --git a/storage/stories/story7/story7-de.json b/storage/stories/story7/story7-de.json
@@ -2,16 +2,12 @@
   "id": "story7",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "Das ist story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "Das ist story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg"

diff --git a/storage/stories/story7/story7-en.json b/storage/stories/story7/story7-en.json
@@ -2,16 +2,12 @@
   "id": "story7",
   "slides": [
     {
-      "title": "Story slide 1",
-      "subtitle": "This is story slide 1",
       "bodytext": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor option isi nobis quas ut.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg"
       ]
     },
     {
-      "title": "Story slide 2",
-      "subtitle": "This is story slide 2",
       "bodytext": "Exercitationem, sapiente. Praesentium quidem mollitia explicabo voluptatem aperiam deleniti ut sunt atque eaque, voluptate commodi in.",
       "images": [
         "https://storage.googleapis.com/esa-cfs-storage/stories/story7/assets/story7.jpeg"