fix(build): modify screenshot logic

Author: hiroppy

packages/fusuma/src/tasks/build.js

@@ -5,33 +5,39 @@ const loader = require('../cli/loader');
 const getRemoteOriginUrl = require('../utils/getRemoteOriginUrl');
 const { build: webpackBuild } = require('../webpack');
 const deleteDir = require('../utils/deleteDir');
+const fileServer = require('../utils/fileServer');
 
 async function createOgImage(outputDirPath) {
-  const url = require('url');
   const puppeteer = require('puppeteer');
 
-  const browser = await puppeteer.launch();
+  const port = 5445;
+  const browser = await puppeteer.launch({
+    chromeWebSecurity: false,
+    args: ['--no-sandbox', '--disable-setuid-sandbox'],
+  });
   const page = await browser.newPage();
-  const outputPath = join(outputDirPath, 'thumbnail.png');
+  const outputFilePath = join(outputDirPath, 'thumbnail.png');
 
   // https://www.kapwing.com/resources/what-is-an-og-image-make-and-format-og-images-for-your-blog-or-webpage/
   await page.setViewport({
     width: 1200,
     height: 630,
   });
-  await page.goto(url.pathToFileURL(join(outputDirPath, 'index.html')), {
-    waitUntil: 'networkidle2',
+  const app = await fileServer(outputDirPath, port);
+  await page.goto(`http://localhost:${port}`, {
+    waitUntil: ['load', 'networkidle2'],
   });
-  await page.screenshot({ path: outputPath });
+  await page.screenshot({ path: outputFilePath });
+  await page.close();
   await browser.close();
+  app.close();
 
-  return outputPath;
+  return outputFilePath;
 }
 
 async function build(config, isConsoleOutput = true) {
   const spinner = loader('Rendering components to HTML...').start();
-  const { basePath, outputDir } = config.internal;
-  const outputDirPath = join(basePath, outputDir);
+  const { outputDirPath } = config.internal;
   const remoteOrigin = await getRemoteOriginUrl();
 
   if (process.env.NODE_ENV === undefined) {

packages/fusuma/src/tasks/deploy.js

@@ -1,15 +1,13 @@
 'use strict';
 
-const { join } = require('path');
 const loader = require('../cli/loader');
 
 async function deploy(config) {
   const ghpages = require('gh-pages');
 
   return new Promise((resolve, reject) => {
     const spinner = loader('Publishing to gh-pages...').start();
-    const { basePath, outputDir } = config.internal;
-    const outputDirPath = join(basePath, outputDir);
+    const { basePath, outputDirPath } = config.internal;
 
     ghpages.publish(outputDirPath, (err) => {
       if (err) {

packages/fusuma/src/tasks/index.js

@@ -9,15 +9,17 @@ const deploy = require('./deploy');
 const pdf = require('./pdf');
 
 async function tasks({ type, options }) {
-  const basePath = join(process.cwd(), options.dir || '');
+  const basePath = process.cwd();
+  const inputDirPath = join(basePath, options.inputDir || 'slides');
+  const outputDirPath = join(basePath, options.outputDir || 'dist');
   let config = {};
 
   try {
     config = await fusuma.read(basePath);
   } catch (e) {
   } finally {
     config = fusuma.combine(config, {
-      internal: { ...options, basePath },
+      internal: { ...options, basePath, inputDirPath, outputDirPath },
     });
   }
 

packages/fusuma/src/tasks/pdf.js

@@ -11,8 +11,7 @@ async function pdf(config) {
   }
 
   const port = 3455;
-  const { basePath, inputDir, filename } = config.internal;
-  const inputDirPath = join(basePath, inputDir);
+  const { basePath, inputDirPath, filename } = config.internal;
   const output = join(basePath, filename);
   const spinner = loader('Exporting as PDF...').start();
 

packages/fusuma/src/utils/fileServer.js

@@ -0,0 +1,20 @@
+'use strict';
+
+const express = require('express');
+
+async function fileServer(basePath, port = 5445) {
+  return new Promise((resolve, reject) => {
+    const app = express();
+
+    app.use(express.static(basePath));
+
+    const server = app.listen(port, (err) => {
+      if (err) {
+        return reject(err);
+      }
+      resolve(server);
+    });
+  });
+}
+
+module.exports = fileServer;

packages/fusuma/src/webpack/outputBuildInfo.js

@@ -6,7 +6,7 @@ const humanSize = require('human-size');
 function outputBuildInfo(res) {
   const output = [];
   const options = {
-    border: getBorderCharacters('void')
+    border: getBorderCharacters('void'),
   };
 
   Object.entries(res.compilation.assets).forEach(([name, asset]) => {

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

@@ -31,8 +31,7 @@ module.exports = (
   const { sidebar, targetBlank, showIndex, isVertical, loop, code, chart, math } = slide;
   const { js: jsPath, css: cssPath, webpack: webpackPath } = fileExtends;
   const { ssr, useCache } = build;
-  const { basePath, remoteOrigin, htmlBody = '', buildStage, port, outputDir } = internal;
-  const outputPath = path.resolve(basePath, outputDir || /* for start task */ 'dist');
+  const { basePath, remoteOrigin, htmlBody = '', buildStage, port, outputDirPath } = internal;
   const config = (() => {
     switch (type) {
       case 'production':
@@ -47,7 +46,7 @@ module.exports = (
   const common = {
     entry,
     output: {
-      path: outputPath,
+      path: outputDirPath,
       publicPath: '/',
     },
     resolveLoader: {

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

@@ -9,8 +9,8 @@ function ssr({ clientBasePath }) {
     devtool: false,
     output: {
       filename: 'entry.js',
-      libraryTarget: 'commonjs'
-    }
+      libraryTarget: 'commonjs',
+    },
   };
 }
 

samples/intro/.fusumarc.yml

@@ -16,3 +16,5 @@ slide:
 extends:
   js: index.js
   css: style.css
+build:
+  useCache: false