apply template

packages/app/src/components/PagePresentationModal.tsx

@@ -38,12 +38,12 @@ const PagePresentationModal = (): JSX.Element => {
       unmountOnClose={false}
     >
       <ModalBody className="modal-body">
-        { markdown != null && (
-          // <ReactMarkdown {...rendererOptions}>
-          //   {markdown}
-          // </ReactMarkdown>
-          <Presentation markdown={markdown} />
-        )}
+        {/* { markdown != null && (
+          <ReactMarkdown {...rendererOptions}>
+            {markdown}
+          </ReactMarkdown>
+        )} */}
+        <Presentation>{markdown}</Presentation>
       </ModalBody>
     </Modal>
   );

packages/presentation/src/components/Presentation.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { Deck, MarkdownSlideSet } from 'spectacle';
-
-type PresentationProps = {
-  markdown: string,
-}
-
-const theme = {
-  colors: {
-    tertiary: 'var(--bgcolor-global)',
-    primary: 'var(--primary)',
-    secondary: 'var(--secondary)',
-  },
-};
-
-export const Presentation = (props: PresentationProps): JSX.Element => {
-  const { markdown } = props;
-  return (
-    <Deck theme={theme}>
-      <MarkdownSlideSet>{markdown}</MarkdownSlideSet>
-    </Deck>
-  );
-};

packages/presentation/src/components/PresentationWithSpectacle.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import {
+  Deck, Slide, FlexBox, Box, FullScreen, Progress, MarkdownSlideSet,
+} from 'spectacle';
+
+type Props = {
+  children?: string,
+}
+
+const theme = {
+  colors: {
+    tertiary: 'var(--bgcolor-global)',
+    primary: 'var(--primary)',
+    secondary: 'var(--secondary)',
+  },
+};
+
+const template = ({ slideNumber, numberOfSlides }) => (
+  <FlexBox
+    justifyContent="space-between"
+    position="absolute"
+    bottom={0}
+    width={1}
+  >
+    <Box padding="0 1em">
+      <FullScreen />
+    </Box>
+    <Box padding="1em">
+      <Progress />
+      {slideNumber} / {numberOfSlides}
+    </Box>
+  </FlexBox>
+);
+
+export const Presentation = (props: Props): JSX.Element => {
+  const { children } = props;
+
+  return (
+    <Deck theme={theme} template={template}>
+      { children == null
+        ? <Slide>No contents</Slide>
+        : <MarkdownSlideSet>{children}</MarkdownSlideSet>
+      }
+    </Deck>
+  );
+};

packages/presentation/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from './Presentation';
+export * from './PresentationWithSpectacle';
 export * from './Slide';