feat(client): enable mdx

src/client/src/components/AppContainer.js

@@ -3,8 +3,8 @@ import { MdMenu } from 'react-icons/md';
 import { Loader } from './Loader';
 import { Base } from './ContentView/Base';
 import { router } from '../router';
-import { createHtmlSlides } from '../utils/createHtmlSlides';
 import { setup as setupWebSlides } from '../setup/webSlides';
+import { ToC } from './ToC';
 
 export class AppContainer extends React.Component {
   constructor(props) {
@@ -27,10 +27,31 @@ export class AppContainer extends React.Component {
       }
     };
 
-    const { slides, contentsList } = createHtmlSlides(props.slides);
-    this.slides = slides;
+    {
+      const slidesArr = props.slides.map((s) => s.slides).flat();
+      const propsArr = props.slides.map((s) => s.fusumaProps).flat();
+
+      propsArr.reduce((acc, { sectionTitle }, i) => {
+        if (sectionTitle) {
+          acc.push({
+            title: sectionTitle,
+            index: i + 1
+          });
+        }
+        return acc;
+      }, (this.contentsList = []));
+
+      this.slides = slidesArr.map((slide, i) => {
+        const props = propsArr[i];
+
+        return {
+          slide: props.contents ? ToC({ list: this.contentsList }) : slide,
+          fusumaProps: props
+        };
+      });
+    }
+
     this.params = parsedUrl.searchParams;
-    this.contentsList = contentsList;
     this.ContentComponent = null;
 
     this.routeMode();
@@ -42,9 +63,9 @@ export class AppContainer extends React.Component {
 
   async componentDidMount() {
     if (this.state.isSidebar) {
-      const {
-        SidebarComponent
-      } = await import(/* webpackChunkName: 'Sidebar', webpackPrefetch: true */ './Sidebar');
+      const { SidebarComponent } = await import(
+        /* webpackChunkName: 'Sidebar', webpackPrefetch: true */ './Sidebar'
+      );
 
       this.setState({ SidebarComponent });
     }

src/client/src/components/ContentView/Base.js

@@ -19,23 +19,23 @@ export class Base extends React.PureComponent {
       currentIndex,
       className = undefined,
       // showIndex(webSlides) checks all slides so lazyload can not be used together
-      lazyload = !process.env.SHOW_INDEX
+      lazyload = !process.env.SHOW_INDEX // TODO: fix
     } = this.props;
     const articleClass = process.env.IS_VERTICAL ? classnames('vertical', className) : className;
 
     return (
       <article className={articleClass} id="webslides">
-        {slides.map((slide, i) => (
+        {slides.map(({ slide: Slide, fusumaProps }, i) => (
           <section
             key={i /* fix */}
-            className={slide.meta.className}
-            dangerouslySetInnerHTML={{
-              __html:
-                (currentIndex >= i - 5 && currentIndex <= i + 5) || !lazyload
-                  ? slide.context
-                  : '<div />'
-            }}
-          />
+            className={classnames(
+              'aligncenter',
+              fusumaProps.className,
+              fusumaProps.sectionTitle ? 'section-title' : undefined
+            )}
+          >
+            <Slide />
+          </section>
         ))}
       </article>
     );

src/client/src/components/ToC.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const ToC = ({ list }) => () => (
+  <div class="toc size-70 aligncenter">
+    <ol>
+      {list.map(({ index, title }, i) => (
+        <li key={i /* fix */}>
+          <a href={`#slide=${index}`} title={title}>
+            <span class="chapter">{title}</span>
+            <span class="toc-page">{index}</span>
+          </a>
+        </li>
+      ))}
+    </ol>
+  </div>
+);

src/client/src/index.js

@@ -7,8 +7,10 @@ import './setup/css';
 //   navigator.serviceWorker.register('/service-worker.js');
 // }
 
+import * as React from 'react';
+
 (async () => {
-  const slidesInfo = fetchSlides(require.context(process.env.SLIDE_PATH, false, /\.md$/));
+  const slidesInfo = fetchSlides(require.context(process.env.SLIDE_PATH, false, /\.mdx?$/));
 
   createBody(slidesInfo.slides);