feat(pdf): refactor pdf process

Author: hiroppy

packages/client/assets/style/common.css

@@ -8,6 +8,7 @@
 html {
   color: #333;
   font-size: 62.5%;
+  -webkit-print-color-adjust: exact;
 }
 
 body {

packages/client/assets/style/executableCode.css

@@ -1,3 +1,8 @@
+:root {
+  --color-white: #fff;
+  --color-black: #333;
+}
+
 .executable-code-container {
   display: flex;
   order: 1; /* TODO: fix */
@@ -11,6 +16,7 @@
   border: 1px solid rgba(0, 20, 80, 0.1);
   box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
   border-radius: 4px;
+  background: var(--color-white);
   color: var(--color-black);
   cursor: pointer;
   font-size: 1.8rem;
@@ -19,6 +25,8 @@
 }
 
 .executable-code-result {
+  background: var(--color-white);
+  color: var(--color-black);
   max-height: 200px;
   overflow-x: auto;
   text-align: left;

packages/client/src/components/SlideCore.js

@@ -10,13 +10,20 @@ import SwiperCore, {
   EffectFade,
 } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { getSearchParams } from '../utils/getSearchParams';
 
 const swiperComponents = [A11y, Keyboard, HashNavigation];
 
-// TODO: check if the url has a param like pagination=true for thumbnail
 if (process.env.UI.PAGINATION) {
-  swiperComponents.push(Pagination);
-  import('swiper/components/pagination/pagination.min.css');
+  if (getSearchParams().has('pagination')) {
+    if (getSearchParams().get('pagination') !== 'false') {
+      swiperComponents.push(Pagination);
+      import('swiper/components/pagination/pagination.min.css');
+    }
+  } else {
+    swiperComponents.push(Pagination);
+    import('swiper/components/pagination/pagination.min.css');
+  }
 }
 
 if (process.env.UI.EFFECT === 'fade') {

packages/client/src/components/ToC.js

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

packages/fusuma/src/cli/index.js

@@ -2,17 +2,13 @@
 
 const { join } = require('path');
 const Spinner = require('../cli/Spinner');
+const { info } = require('../cli/log');
 const lazyloadModule = require('../utils/lazyloadModule');
 
 async function pdf(config) {
-  if (config.slide.loop) {
-    console.error('You must disable slide.loop.');
-    process.exit(1);
-  }
-
   const port = 3455;
   const { basePath, inputDirPath, filename } = config.internal;
-  const output = join(basePath, filename);
+  const { publicPath } = config.build;
   const spinner = new Spinner();
 
   spinner.setContent({ text: 'Exporting as PDF...' });
@@ -28,9 +24,10 @@ async function pdf(config) {
       }
     });
 
-    await pdf(inputDirPath, output, port);
+    await pdf(inputDirPath, publicPath, basePath, filename, port);
 
     spinner.stop();
+    info('pdf', `Generated ${filename}`);
   } catch (e) {
     console.error(e);
     process.exit(1);