feat(client): add many options

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

@@ -1,23 +1,17 @@
 import React, { useEffect, memo } from 'react';
-import classnames from 'classnames';
-import SwiperCore, { A11y, Navigation, Pagination, Keyboard, HashNavigation } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import { SlideCore } from '../SlideCore';
 import { createVMEnv } from '../../utils/createVMEnv';
 import { getSearchParams } from '../../utils/getSearchParams';
 import { useMermaid } from '../../hooks/useMermaid';
 
-const articleClass = process.env.IS_VERTICAL ? 'vertical' : undefined;
-
 // don't move to useEffect
 if (!getSearchParams().get('ssr')) {
   // don't run when creating html
   import(/* webpackPreload: true  */ '../../setup/prism');
 }
 
-SwiperCore.use([Pagination, A11y, Keyboard, HashNavigation]);
-
 export const Base = memo(
-  ({ slides, onChangeSlideIndex, hash, showIndex }) => {
+  ({ slides, onChangeSlideIndex, hash }) => {
     const [mermaid] = useMermaid();
 
     if (import.meta.webpackHot) {
@@ -42,36 +36,7 @@ export const Base = memo(
       }
     }, []);
 
-    return (
-      <Swiper
-        loop={false}
-        speed={350}
-        allowTouchMove={/* TODO: only for mobile */ false}
-        spaceBetween={50}
-        slidesPerView={1}
-        pagination={{ clickable: true }}
-        keyboard={{ enabled: true }}
-        hashNavigation={{
-          watchState: true,
-        }}
-        onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
-      >
-        {slides.map(({ slide: Slide, fusumaProps }, i) => (
-          <SwiperSlide
-            key={i /* mdx-loaderでhash作成 */}
-            className={classnames(
-              fusumaProps.classes,
-              fusumaProps.sectionTitle ? 'section-title' : undefined
-            )}
-            data-hash={`slide-${i}`}
-          >
-            <div className="slide-box">
-              <Slide />
-            </div>
-          </SwiperSlide>
-        ))}
-      </Swiper>
-    );
+    return <SlideCore slides={slides} onChangeSlideIndex={onChangeSlideIndex} />;
   },
   (prevProps, nextProps) => prevProps.hash === nextProps.hash
 );

packages/client/src/components/Sidebar.js

@@ -7,7 +7,7 @@ import { MdFirstPage, MdLastPage, MdFullscreen, MdAirplay } from 'react-icons/md
 const remoteOriginUrl = process.env.REMOTE_ORIGIN_URL;
 const url = process.env.URL || window.location.href.split('#')[0];
 const sns = process.env.SNS;
-const title = process.env.TITLE || '';
+const title = process.env.TITLE;
 const formatStr = (num) => `${num}`.padStart(2, '0');
 
 export const Sidebar = memo(

packages/client/src/components/SlideCore.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import classnames from 'classnames';
+import SwiperCore, {
+  A11y,
+  Pagination,
+  Keyboard,
+  HashNavigation,
+  EffectCube,
+  EffectFlip,
+  EffectFade,
+} from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+const swiperComponents = [A11y, Keyboard, HashNavigation];
+
+if (process.env.UI.PAGINATION) {
+  swiperComponents.push(Pagination);
+}
+
+if (process.env.UI.EFFECT === 'fade') {
+  swiperComponents.push(EffectFade);
+} else if (process.env.UI.EFFECT === 'cube') {
+  swiperComponents.push(EffectCube);
+} else if (process.env.UI.EFFECT === 'flip') {
+  swiperComponents.push(EffectFlip);
+}
+
+SwiperCore.use(swiperComponents);
+
+export const SlideCore = ({ slides, onChangeSlideIndex }) => (
+  <Swiper
+    effect={process.env.UI.EFFECT}
+    direction={process.env.VERTICAL === 'true' ? 'vertical' : 'horizontal'}
+    loop={/*TODO: respect to params to generate pdf */ process.env.LOOP}
+    speed={350}
+    allowTouchMove={/* TODO: only for mobile */ false}
+    slidesPerView={1}
+    keyboard={{ enabled: true }}
+    hashNavigation={{
+      watchState: true,
+    }}
+    pagination={{
+      ...(process.env.UI.PAGINATION
+        ? {
+            type: process.env.UI.PAGINATION,
+            clickable: true,
+          }
+        : {}),
+    }}
+    onSlideChange={({ realIndex }) => onChangeSlideIndex(realIndex)}
+  >
+    {slides.map(({ slide: Slide, fusumaProps }, i) => (
+      <SwiperSlide
+        key={i /* mdx-loaderでhash作成 */}
+        className={classnames(
+          'slide-background',
+          fusumaProps.classes,
+          fusumaProps.sectionTitle ? 'section-title' : undefined
+        )}
+        data-hash={`slide-${i + 1}`}
+      >
+        <div className="slide-box slide-background">
+          <Slide />
+        </div>
+      </SwiperSlide>
+    ))}
+  </Swiper>
+);

packages/client/src/hooks/useSidebarComponent.js

@@ -8,7 +8,7 @@ export function useSidebarComponent(mode) {
     (async () => {
       if (mode === 'common') {
         const params = getSearchParams();
-        const isSidebar = params.get('sidebar') !== 'false' || process.env.SIDEBAR === 'true';
+        const isSidebar = params.get('sidebar') !== 'false' || process.env.UI.SIDEBAR === 'true';
 
         if (isSidebar) {
           const { Sidebar: SidebarComponent } = await import(

packages/client/src/index.js

@@ -1,5 +0,0 @@
-export { Block } from './components/external/Block';
-export { Flex } from './components/external/Flex';
-export { Card } from './components/external/Card';
-export { Code } from './components/external/Code';
-export { Img } from './components/external/Img';

packages/fusuma/src/configs/fusumarc.js

@@ -18,14 +18,17 @@ const config = {
     title: null,
     thumbnail: null,
     description: null,
-    sns: ['twitter'], // twitter, hatena
+    sns: ['twitter'], // twitter | hatena
   },
   slide: {
-    loop: true,
-    sidebar: true,
+    loop: false,
+    vertical: false,
     targetBlank: true,
-    showIndex: true,
-    isVertical: false,
+    ui: {
+      sidebar: true,
+      pagination: null, // bullets | progressbar | fraction
+      effect: null, // fade | cube | flip
+    },
     // https://github.com/mAAdhaTTah/babel-plugin-prismjs#configuring-the-plugin
     code: {
       languages: ['javascript'],

packages/fusuma/src/configs/templates/fusumarc.yml

@@ -5,10 +5,11 @@ meta:
   siteName:
   sns: ['twitter']
 slide:
-  loop: true
-  sidebar: true
-  targetBlank: true
-  showIndex: true
+  loop: false
+  ui:
+    sidebar: true
+    pagination: # bullets | progressbar | fraction
+    effect: # fade | cube | flip
   code:
     plugins: []
     theme: default

packages/fusuma/src/configs/templates/style.css

@@ -9,20 +9,14 @@ html {
   font-size: 62.5%;
 }
 
-body {
+.slide-background {
   /* set the default background */
   background: var(--color-white);
 
   /* set the default font-color */
   color: var(--color-black);
 }
 
-/* code blocks */
-code[class*='language-'],
-pre[class*='language-'] {
-  font-size: 2rem;
-}
-
 a {
   /* set the default link color */
   color: var(--color-cyan);

packages/fusuma/src/webpack/webpack.config.js

@@ -22,10 +22,18 @@ module.exports = (
 ) => {
   const entry = ['regenerator-runtime', join(clientBasePath, '/src/entryPoints/Client.js')];
   const { url, description, thumbnail, siteName, sns, title } = meta;
-  const { sidebar, targetBlank, showIndex, isVertical, loop, code, chart, math } = slide;
+  const {
+    targetBlank,
+    ui: { sidebar, pagination, effect },
+    loop,
+    vertical,
+    code,
+    chart,
+    math,
+  } = slide;
   const { js: jsPath, css: cssPath, webpack: webpackPath } = fileExtends;
   const { useCache, publicPath } = build;
-  const { basePath, remoteOrigin, htmlBody = '', buildStage, outputDirPath } = internal;
+  const { basePath, remoteOrigin, htmlBody = '', outputDirPath } = internal;
   const config = (() => {
     switch (type) {
       case 'production':
@@ -123,25 +131,29 @@ module.exports = (
     },
     plugins: [
       new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
-        'process.env.JS_PATH': JSON.stringify(join(basePath, jsPath || '')),
-        'process.env.CSS_PATH': JSON.stringify(join(basePath, cssPath || '')),
-        'process.env.SLIDE_PATH': JSON.stringify(join(basePath, 'slides')),
-        'process.env.URL': JSON.stringify(url),
-        'process.env.SNS': JSON.stringify(sns),
-        'process.env.SIDEBAR': JSON.stringify(sidebar === undefined ? true : sidebar),
-        'process.env.TITLE': JSON.stringify(title || 'slide'),
-        'process.env.BASE_PATH': JSON.stringify(basePath),
-        'process.env.REMOTE_ORIGIN_URL': JSON.stringify(remoteOrigin),
-        'process.env.TARGET_BLANK': JSON.stringify(targetBlank),
-        'process.env.SHOW_INDEX': JSON.stringify(showIndex),
-        'process.env.IS_VERTICAL': JSON.stringify(isVertical),
-        'process.env.LOOP': JSON.stringify(loop),
-        'process.env.IS_LIVE': JSON.stringify(server.isLive),
-        'process.env.SERVER_PORT': JSON.stringify(server.port),
-        'process.env.SEARCH_KEYWORD': JSON.stringify(server.keyword),
-        'process.env.CHART': JSON.stringify(chart),
-        'process.env.BUILD_STAGE': JSON.stringify(buildStage),
+        'process.env': {
+          NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
+          JS_PATH: JSON.stringify(join(basePath, jsPath || '')),
+          CSS_PATH: JSON.stringify(join(basePath, cssPath || '')),
+          SLIDE_PATH: JSON.stringify(join(basePath, 'slides')),
+          URL: JSON.stringify(url),
+          SNS: JSON.stringify(sns),
+          TITLE: JSON.stringify(title || 'slide'),
+          BASE_PATH: JSON.stringify(basePath),
+          REMOTE_ORIGIN_URL: JSON.stringify(remoteOrigin),
+          TARGET_BLANK: JSON.stringify(targetBlank),
+          LOOP: JSON.stringify(loop),
+          VERTICAL: JSON.stringify(vertical),
+          IS_LIVE: JSON.stringify(server.isLive),
+          SERVER_PORT: JSON.stringify(server.port),
+          SEARCH_KEYWORD: JSON.stringify(server.keyword),
+          CHART: JSON.stringify(chart),
+          UI: {
+            SIDEBAR: JSON.stringify(sidebar),
+            PAGINATION: JSON.stringify(pagination),
+            EFFECT: JSON.stringify(effect),
+          },
+        },
       }),
       new HtmlWebpackPlugin({
         url,

samples/debug/.fusumarc.yml

@@ -5,11 +5,10 @@ meta:
   siteName: hiroppy.me
   sns: ['twitter']
 slide:
-  loop: false
-  sidebar: true
   targetBlank: true
-  showIndex: true
-  isVertical: false
+  ui:
+    sidebar: true
+    pagination: bullets
   code:
     languages:
       - javascript

samples/debug/style.css

@@ -3,6 +3,10 @@
   src: url('./assets/StratumNo1.ttf');
 }
 
+.slide-background {
+  background: #f5f5f5;
+}
+
 .file-loader-font {
   font-family: Stratum;
   font-size: 2rem;