hiroppy / fusuma

✍️ Fusuma makes slides with Markdown easily.

A tool to create slides easily for you ✍ ️

Features

• Zero Config
• Providing various modes
• Markdown and MDX
• Themes
• Code syntax Highlight, MathJax, Diagrams, and Flowcharts
• Browser-friendly slides
  • All results for lighthouses are perfect
  • Full supporting for SEO and OGP
  • Checking a11y(Accessibility)
• Customizable JavaScript and CSS
• A sidebar having agenda and some features

Modes

• Init Mode
  • Creating a slide, style, configuration file
  • Creating GitHub actions that deploy slides to gh-pages automatically
• Development Mode
  • Running with HMR
  • Just coding Markdown and sometimes CSS
• Build Mode
  • Rendering to html and optimizing js,css,md
  • Generating an image of slides as og:image and checking a11y automatically
• Presentation Mode
  • Speaker Note
  • Timer
  • Recording your page actions and voice
• Deploy Mode
  • Deploying to GitHub Pages
• PDF Mode
  • Exporting slides as PDF

Demos

• Introducing Fusuma [repository]
• Themes [repository]
• Math, Diagrams, and Flowcharts [repository]

Getting Started

$ npm i fusuma -D
$ npx fusuma init
$ tree -a
.
├── .fusumarc.yml
├── .github
│   └── workflows
│       └── fusuma.yml
├── slides
│   └── 0-slide.md
└── style.css

# --- executable tasks---
$ npx fusuma init          # create scaffold
$ npx fusuma start         # run server for development
$ npx fusuma start-prod    # run server for bundle directory
$ npx fusuma build         # build slides for production
$ npx fusuma deploy        # deploy to github pages
$ npx fusuma pdf           # export as PDF

When npx fusuma start is executed, fusuma will create slides like follows on http://localhost:8080. Fusuma provides the below development screen which has a reference and slides list. In addition, Fusuma adds a sidebar and when you set section titles, fusuma shows them on the sidebar.

slides generated by init	sidebar

👉 the demo (built as production)

Themes

Fusuma offers the following themes also users can customize them because this is just CSS.

default	pop

webpack	babel	node

👉 the demo

Markdown and MDX

## Hello

This is the first slide.

---

## 🤭

import { Sample } from './scripts/Sample';

This is the second slide.

<Sample />

// Sample.js
export const Sample = () => <p>Hello from jsx!!</p>;

👉 Getting Started/Creating Your Slide

Customize styles

The following properties are provided, but you can change the css directly if you want.

:root {
  --base-font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
  --base-font-size: 2.4rem;
  --base-font-weight: 300;
  --base-align: center;
  --base-max-width: 1280px;
  --base-outer-margin: 24px;
  --base-image-height: auto;
  --base-image-width: 100%;
  --base-image-border: none;
  --base-image-border-radius: 0;

  --color-title: #464646;
  --color-base: #545454;
  --color-background: #f5f5f5;
  --color-link: #3498db;

  --h1-font-size: 5.6rem;
  --h1-font-weight: 300;
  --h2-font-size: 4rem;
  --h2-font-weight: 300;
  --h3-font-size: 3.6rem;
  --h3-font-weight: 300;
  --h4-font-size: 3rem;
  --h4-font-weight: 300;
  --h5-font-size: 2.4rem;
  --h5-font-weight: 600;
  --h6-font-size: 2rem;
  --h6-font-weight: 600;

  --account-icon-size: 3rem;
  --account-icon-color: #545454;
  --code-font-size: 1.8rem;
  --qr-code-image-size: 320px;
}

Presenter Mode

This feature uses experimental APIs so please use Chrome or Firefox.

• Presentation API (Chrome, Firefox)
• Screen Capture API (Chrome, Firefox)

You can see your Note for each slide and the next slide on the Host screen.

👉 Modes/Presenter

Features

• Showing your slide notes
• Setting a timer
• Recording your actions and voice, and doing time-travel
  • video: Recording Your Voice

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

Fusuma supports improving performance, SEO, and so on as default, analyzes the slide's performance, and outputs like below.

the score of lighthouse	output logs

---

Special Thanks to

Themes

I respect your UI and I really love it. I usually talk about you in Japan so I added your colors to Fusuma. If you have issues, feel free to mention me! Thank you.

• Node.js
• webpack
• Babel

fusuma's Issues

file-loader generates unexpected pages

Hi.

I'm trying to use <img src="some_local_file.png" /> with fusuma and found this issue.

The markdown of the above slides is so simple :

<img src="logo.svg" />

But the build presentation displays filehash name... 🤔

[feature request] ToC subsection support

Type

• bug
• feature request

Feature Request

I want to display subsections in ToC like below.

1. sec1 --------------- 1
  1.1 subsec1 ------- 2
  1.2 subsec2 ------- 3

You used to say that it is difficult to customize ToC because the component is provided by webSlides, but I think the feature is in demand, or can I already do that?

refactor webpack

Info

• Operating System:
• Node Version:
• Browser Name and Version:

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

call workbox in a core code

MathJax integration?

Hi, thank you for this awesome tool!

I'm trying to add some math inside the presentation I'm creating and since I'm used to using LaTeX I'd like to embed MathJax ( https://www.mathjax.org/ ) inside the bundle.

I've tried by updating the .fusumarc.yml file as follows, but with no luck:

extends:
  js: https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML

So, how can I integrate MathJax inside the slides, so I can just type

$$ latex formula $$

and get it displayed correctly?

Thanks

drop webSlides or not

Info

• Operating System: N/A
• Node Version: N/A
• Browser Name and Version: N/A

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

WebSlides has many issues.

• no active
• use window instance so we cannot set slides more than 2 in the same screen
• performance issue

A link error occurs in Presenter mode when deploying to a subdirectory

Hi,when I tested the presenter mode in the demo, Github Pages returned a 404 error in the slide preview.

You can check the issue here: https://hiroppy.github.io/fusuma/intro/#slide=24

The link to the 404 error is look like this: https://hiroppy.github.io?sidebar=false#slide=1

investigate about slide rendering

Info

• Operating System:
• Node Version:
• Browser Name and Version:

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

Does fusuma support inserting images?

Info

• Operating System:
• Node Version:
• Browser Name and Version:

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

support mdx?

Create multi column layout without HTML

At first thanks for your work, fusuma looks great and fits my needs so far.
However I think it should be possible to write multi column slides with markdown only. Its not convenient to write most of the slides in Markdown and then use HTML to write some slides with 2-column layout. Maybe it would be possible to parse some custom markdown elements like | symbols to setup a markdown only 2 column layout?

Making webpack plugins addable

Would you have plans to make webpack config extendable or webpack plugin addable?
Or, does it not match fusuma's policy "zero config" ?

Type

• bug
• feature request

What is the motivation or use-case for the feature?

I wanna add plugins for using monaco-editor on fusuma.
https://github.com/microsoft/monaco-editor-webpack-plugin

Thanks!

combine custom state and original state of fusumarc

How to add extra js dependency?

e.g I would like to use https://lab.lepture.com/github-cards/ to add card to it, how do I add this as dependency in <head> with <script> is it possible? thanks!

drop bespoke-backdrop

I like this but it is not friendly with bespoke-fx.

add taget="_blank" option

document.addEventListener('click', (e) => {
  if (e.target.tagName === 'A') {
    if (e.target.host === location.host) return;

    e.preventDefault();
    window.open(e.target.href, '_blank');
  }
});

support reveal.js

fix build log on CLI

Info

• Operating System:
• Node Version:
• Browser Name and Version:

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

How to deploy to gh-pages?

I have created a presentation using fusuma and created a repository with the presentation inside.

See: https://github.com/galeone/tf-function-talk

I have also created the branch gh-pages locally and remotely + updated the settings to use gh-pages to host the website.

I followed the fusuma readme and I executed

NODE_ENV=production npx fusuma build
npx fusuma deploy

but nothing happens. All I see is the "Publishing to gh-pages" string that never goes away.

I guess this is not the correct way of deploying to gh-pages then. So, what should I do?

Thanks!

Way to render mark down in HTML elements?

Hi, is there a way to render mark down in the HTML elements? For example:

<div class="grid">
  <div class="column">
    <img src="../images/xxx.png">
  </div>
  <div class="column">
    <div class="markdown">
      ## We can write markdown here
      - xxx
      - xxx
      - xxx
    </div>
  </div>
</div>

add task-live-comments (?)

replace webpack-serve with webpack-dev-server

commit: f79d813

refactor and release v1.0.0

TODO

• update some dependencies (such as react, etc...)
• modify performance
• drop bespoke? (because bespoke use window so we cannot use 2 slides on same window)
• add an embeded field
• modify presentation host ui

Syntax highlight is not applied

I write markdown's codeblock with triple backquots syntax, but code syntax highlight(prism.js) is not applied 😭

Can't see images loaded from a local images folder

Info

• Operating System: Archlinux
• Node Version: v12.10.0
• Browser Name and Version: Chromium 76.0.3809.132-1

Type

• bug
• feature request

Expected Behavior

I should visualize the images when I create new slides that use images from a local images folder - but instead, all I got are 404 error (see screenshot).

Actual Behavior

I can't visualize the images, the server gives 404.

How can we reproduce the behavior?

# create a new project
npx fusuma init
# create a slides and images folder
mkdir slides
mkdir images
# Put a random image inside the images folder
wget "http://university.it/image/2017/04/reece.JPG?w=800&m=widen" -O images/image.jpg

# Create a simple slide that includes an image from
echo "![](/images/image.jpg" > slides/0-first.md

# Start fusuma in DEVELOPMENT mode
npx fusuma start

Perhaps this is not a bug and there is something wrong with my project structure, but I can't see where the problem is.

Thank you for this great project!

Slide contents are empty after page 6

I tried version 1.5.0 with a set of slides that used to work at version 1.1.2.

I used a single .md file for slides. All slides after page 6 displayed no content, that is, for example:

<section class="aligncenter slide current" id="section-7" style="">
::before
<div></div>
::after
</section>

The pages were still exist, and all CSS and js still worked, but there's only an empty div for each page. The issue seems to happen on any .md file that contains more than 6 pages.

Notably, when using fusuma start, the initial load suffers from the issue, but if I modify the slide .md file and it does dynamic update, the contents are back. When I refresh the page, the contents are gone again. If I do fusuma build, the bundled js file contains all of my contents, but nothing get rendered in browser after page 6.

The website's bug about showing fusuma introduction.

When I was new to fusuma website to learn what is fumusa.
I choose to look through the main content just like a TV.
But I can not click the content.
When I refresh, the nav link only let me into first page and last page, It didn't let me into the next page.

add iframe section for embedded

Webpack fails silently

When the slides markdown files contains some special unicode (e.g. 'LINE SEPARATOR' (U+2028)), running fusuma build fails to produce dist but gives no error message. Here's the minimal config to reproduce the issue.

When the Webpack fails to produce dist, the output is slightly different:

failed build

> fusuma build
⠸ Building with webpack...
 name                                              size

 vendors~Sidebar.0.aed4840a479f8e5e2d21.css        2KB

 vendors~Sidebar.0.aed4840a479f8e5e2d21.bundle.js  21KB

 main.1.22876470900cdcabfa5c.bundle.js             1KB

 presenter.view.2.5132d0396839d37f0b6a.bundle.js   3KB

 runtime.ca4ad943b08809522e0f.bundle.js            3KB

 target-blank.4.79a165a01f590bba09f8.bundle.js     350B

 vendor.5.a8049b981193aad902ec.css                 50KB

 vendor.5.a8049b981193aad902ec.bundle.js           295KB

successful build

> fusuma build
⠴ Building with webpack...
 name                                                   size

 vendors~Sidebar.0.1f2b00e54e756ff905c4.css             2KB

 vendors~Sidebar.0.1f2b00e54e756ff905c4.bundle.js       21KB

 main.1.5c3c7e25d57919879b3d.css                        1KB

 main.1.5c3c7e25d57919879b3d.bundle.js                  2KB

 presenter.view.2.1e37ec8b16c663dd4f3e.bundle.js        3KB

 runtime.c460292bd6ca1fc2ab0b.bundle.js                 3KB

 target-blank.4.2610674694803ee1de9e.bundle.js          350B

 vendor.5.f8e08ab36e14ea146a6b.css                      50KB

 vendor.5.f8e08ab36e14ea146a6b.bundle.js                295KB

 index.html                                             1KB

 precache-manifest.8d63c1ce1903a214048640b9190b8a98.js  721B

 service-worker.js                                      1005B

How to apply the CSS style to the contents?

I use

<div>
<!-- contents -->
</div>

to display TOC.
Now, I did not understand how to apply the CSS style (for example, make the characters larger) to this.

Is that possible?

[feature request] :emoji: support

Hi @hiroppy , thanks for the awesome product :) I’m loving to make presentations with fusuma!

I think it’s better that fusuma would render from :smile: to 😄 like GitHub md or slack emoji features. How about this?

And, of course, I’ll contribute about this feature if you would want ;)

Mermaid/flowchart support?

what would it take to support Mermaid or Flowchart.js to have diagrams in my markdown?

use separator

Slides not appearing on the display in Presenter Mode

Info

• macOS Mojave version: 10.14.5
• Node Version: no relation
• Browser Name and Version: Chrome version: 75.0.3770.100

Type

• bug
• feature request

For Bugs

I tried to use the Presenter Mode in the DEMO, but the display only shows a blank screen.

Expected Behavior

Slides appear on the connected display in Presenter mode

Actual Behavior

The display only shows a blank screen.

How can we reproduce the behavior?

1. Connect your PC to an external display
2. Access What's Fusuma? in Chrome
3. Open Sidebar(click the bottom right button(三))
4. Click the PC monitor icon
5. Select the display connected in step 1
6. The display does not show the slides

For Feature Request

What is the motivation or use-case for the feature?

lazyload

ghchycyu

h hchvhvvuugugcggcggbuubuvucyvhvhyv****huvyyvyvugu

Failed to generate PDF

• macOS 10.14.4
• fusuma 1.0.0
• Node v12.1.0
• npm 6.9.0

cd ./samples/intro
npm i fusuma -D
npx fusuma pdf

Click to expand (outputs)

⠇ Building with webpack...
 name                                                   size  

 c2c9fa6df062f6d39b0afa917f5e18b9.png                   128KB 

 vendors~Sidebar.0.3e4761d264be40e09343.css             2KB   

 vendors~Sidebar.0.3e4761d264be40e09343.bundle.js       23KB  

 main.1.a356ca4ff1254da5fd60.css                        1KB   

 main.1.a356ca4ff1254da5fd60.bundle.js                  11KB  

 presenter.view.2.1894e7277a414ac6e213.bundle.js        3KB   

 runtime.e0bc3d497d5c33c05f7d.bundle.js                 3KB   

 target-blank.4.e1582a590ae4c5c2ba46.bundle.js          350B  

 vendor.5.ddf6246fdd2f6b8bf90b.css                      50KB  

 vendor.5.ddf6246fdd2f6b8bf90b.bundle.js                295KB 

 index.html                                             1KB   

 precache-manifest.b7fdc1d629a679b913c9988d796566b2.js  780B  

 service-worker.js                                      1005B 


⠦ Exporting as PDFChildProcessError: `npm install decktape --no-save` failed with code 1
    at ChildProcess.<anonymous> (/Users/iris/Documents/repos/github.com/peaceiris/fusuma/samples/intro/node_modules/child-process-promise/lib/index.js:132:23)
    at ChildProcess.emit (events.js:196:13)
    at maybeClose (internal/child_process.js:1000:16)
    at Socket.<anonymous> (internal/child_process.js:405:11)
    at Socket.emit (events.js:196:13)
    at Pipe.<anonymous> (net.js:586:12) {
  name: 'ChildProcessError',
  code: 1,
  childProcess: ChildProcess {
    _events: [Object: null prototype] { error: [Function], close: [Function] },
    _eventsCount: 2,
    _maxListeners: undefined,
    _closesNeeded: 3,
    _closesGot: 3,
    connected: false,
    signalCode: null,
    exitCode: 1,
    killed: false,
    spawnfile: 'npm',
    _handle: null,
    spawnargs: [ 'npm', 'install', 'decktape', '--no-save' ],
    pid: 66969,
    stdin: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object],
      _eventsCount: 1,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      [Symbol(asyncId)]: 48021,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBytesRead)]: 0,
      [Symbol(kBytesWritten)]: 0
    },
    stdout: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      write: [Function: writeAfterFIN],
      [Symbol(asyncId)]: 48022,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBytesRead)]: 12693,
      [Symbol(kBytesWritten)]: 0
    },
    stderr: Socket {
      connecting: false,
      _hadError: false,
      _parent: null,
      _host: null,
      _readableState: [ReadableState],
      readable: false,
      _events: [Object],
      _eventsCount: 2,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: false,
      allowHalfOpen: false,
      _sockname: null,
      _pendingData: null,
      _pendingEncoding: '',
      server: null,
      _server: null,
      write: [Function: writeAfterFIN],
      [Symbol(asyncId)]: 48023,
      [Symbol(kHandle)]: null,
      [Symbol(lastWriteQueueSize)]: 0,
      [Symbol(timeout)]: null,
      [Symbol(kBytesRead)]: 4503,
      [Symbol(kBytesWritten)]: 0
    },
    stdio: [ [Socket], [Socket], [Socket] ]
  },
  stdout: undefined,
  stderr: undefined
}

Broken a layout when focus outside a slide contents on Firefox

About

Broken a layout when focus outside a slide contents.

Screenshot

Reproduce

1. Open https://hiroppy.github.io/fusuma/intro on Firefox
2. Press the tab key several times

Expected behavior

Not broken layout.

Environment

Firefox Nightly 69.0a1 (2019-06-24) / Windows 10

Featured in awesome-markup

Hi ! This is not a real "issue", just wanted to tell you I have listed you in my collection of awesome-markup libraries.

Feel free to close this issue 😸

Will speaker note support markdown syntax?

Info

• Operating System: macOS Mojave
• Node Version: node@10
• Browser Name and Version: Safari 12.1.1

Type

• bug
• feature request

For Feature Request

What is the motivation or use-case for the feature?

I love fusuma. I can do my slides by writing markdown document.
I expect there also support markdown on speaker note, but it doesn't.

I want to put the reference link in speaker note as following.

[Fusuma](https://github.com/hiroppy/fusuma/)

but it just display with plain text.

I am expected and wanna know that will speaker note support markdown syntax? Thanks

update new design

refactor: use namespace in css

How about show the url when `fusuma start`?

When I start my slide project, the output as follow.
I cannot find the server url util I see the webpack-serve and I guess the url is localhost:8080.
So I think it will better to show the url when fusuma start.
Thanks.

$ fusuma start
⠹ Starting with webpack-serve
webpack v4.16.4

735949106d0f64a96c26
  size     name                                           module                                            status
  3.91 kB  hot.js                                         (webpack)-hot-client/client/hot.js                built
  1.99 kB  index.js?slide                                 (webpack)-hot-client/client?slide                 built
  2.13 kB  log.js                                         (webpack)-hot-client/client/log.js                built
  1.17 kB  socket.js                                      (webpack)-hot-client/client/socket.js             built
  82 B     amd-options.js                                 (webpack)/buildin/amd-options.js                  built
  723 B    global.js                                      (webpack)/buildin/global.js                       built
  411 B    module.js                                      (webpack)/buildin/module.js                       built
  28 B     0                                              (node_modules)/fusuma/src/frontend/lib/index.js   built
  40 B     1                                              (node_modules)/fusuma/src/frontend/lib/index.js   built
  186 B    .*$                                            ./slides sync ^\.\/.*$                            built
  49 B     bar.md                                         ./slides/bar.md                                   optional built
  49 B     foo.md                                         ./slides/foo.md                                   optional built

  size     name                                           asset                                             status
  3.23 kB  presenter.view                                 presenter.view.js                                 emitted
  166 kB   eot                                            674f50d287a8c48dc19ba404d20fe713.eot              emitted
  166 kB   ttf                                            b06871f281fee6b241d60582ae9369b9.ttf              emitted
  77.2 kB  woff2                                          af7ae505a9eed503f8b8e6982036873e.woff2            emitted
  98 kB    woff                                           fee66e712a8a08eef5805a46892932ad.woff             emitted
  1.16 MB  main                                           main.js                                           emitted
  388 kB   svg                                            760bd83ee04dff470e0277f3eb7deebe.svg              emitted
  40.7 kB  vendors~Sidebar                                vendors~Sidebar.js                                emitted
  58.4 kB  vendors~Sidebar~presenter.host~presenter.view  vendors~Sidebar~presenter.host~presenter.view.js  emitted
  26.9 kB  vendors~presenter.host                         vendors~presenter.host.js                         emitted
  24.3 kB  vendors~presenter.host~presenter.view          vendors~presenter.host~presenter.view.js          emitted
  664 B    html                                           index.html                                        emitted

  Δt 10184ms (86 modules hidden)

fix lazy-load

because of prism.js...

Add global tests and npm/yarn tests to CI

Info

• Operating System:
• Node Version:
• Browser Name and Version:

Type

• bug
• feature request

For Bugs

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

For Feature Request

What is the motivation or use-case for the feature?

This dependency was not found:

Info

• Operating System: Win 10
• Node Version: v10.15.1
• Browser Name and Version: Chrome 75.0.3770.142

Type

• bug
• feature request

For Bugs

I downloaded this project using npm yesterday. And I tried to start the sample code with npx, but got the following error message.

 ERROR  Failed to compile with 2 errors                                                                                                                         00:12:51

These dependencies were not found:

* \src\entryPoints\Client.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js
* src\utils\customCss.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js

To install them, you can run: npm install --save \src\entryPoints\Client.js src\utils\customCss.js

This seems to be missing some dependencies, but I have never used nodejs before, so I can't determine the specific reason. And in the installation process, there are still the following warnings

npm WARN [email protected] requires a peer of d3@^4.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

Because I don't know nodejs, I'm not sure if the above warning is the reason why the project can't run. Below is the full output during installation and operation

PS C:\Users\lizec\Documents\Blog\Fusuma> node -v
v10.15.1
PS C:\Users\lizec\Documents\Blog\Fusuma> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (fusuma) myslides
version: (1.0.0)
description: None
entry point: (index.js)
test command:
git repository:
keywords:
author: LiZeC
license: (ISC) MIT
About to write to C:\Users\lizec\Documents\Blog\Fusuma\package.json:

{
  "name": "myslides",
  "version": "1.0.0",
  "description": "None",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "LiZeC",
  "license": "MIT"
}


Is this OK? (yes) yes
PS C:\Users\lizec\Documents\Blog\Fusuma> cat .\package.json
{
  "name": "myslides",
  "version": "1.0.0",
  "description": "None",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "LiZeC",
  "license": "MIT"
}
PS C:\Users\lizec\Documents\Blog\Fusuma>  npm i fusuma -D # yarn fusuma --dev
npm WARN deprecated [email protected]: true

> [email protected] postinstall C:\Users\lizec\Documents\Blog\Fusuma\node_modules\core-js-pure
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall C:\Users\lizec\Documents\Blog\Fusuma\node_modules\pose-core
> node ./scripts/postinstall.js || exit 0


      +-------------------------------------------------+
      |                                                 |
      |          Hey! Using Pose commercially?          |
      |                                                 |
      |         Pose is completely open source.         |
      |       Its continued development relies on       |
      |          contributions and sponsorship.         |
      |                                                 |
      |          Join us: patreon.com/popmotion         |
      |                                                 |
      +-------------------------------------------------+


> [email protected] postinstall C:\Users\lizec\Documents\Blog\Fusuma\node_modules\spawn-sync
> node postinstall


> [email protected] postinstall C:\Users\lizec\Documents\Blog\Fusuma\node_modules\caporal
> (test -f ./node_modules/husky/bin/install.js && node ./node_modules/husky/bin/install.js) || exit 0


> [email protected] postinstall C:\Users\lizec\Documents\Blog\Fusuma\node_modules\cwebp-bin
> node lib/install.js

  √ cwebp pre-build test passed successfully
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of d3@^4.13.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1609 packages from 1024 contributors and audited 41051 packages in 142.182s
found 32 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
PS C:\Users\lizec\Documents\Blog\Fusuma>

PS C:\Users\lizec\Documents\Blog\Fusuma> ls


    目录: C:\Users\lizec\Documents\Blog\Fusuma


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2019/7/28      0:07                node_modules
d-----        2019/7/28      0:09                samples
-a----        2019/7/28      0:08           3921 output.txt
-a----        2019/7/28      0:07         546050 package-lock.json
-a----        2019/7/28      0:07            265 package.json
-a----        2019/7/28      0:03            460 新建文本文档.txt


PS C:\Users\lizec\Documents\Blog\Fusuma> cd .\samples\
PS C:\Users\lizec\Documents\Blog\Fusuma\samples> ls


    目录: C:\Users\lizec\Documents\Blog\Fusuma\samples


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2019/7/28      0:09                advanced
d-----        2019/7/28      0:09                intro
d-----        2019/7/28      0:09                issues


PS C:\Users\lizec\Documents\Blog\Fusuma\samples> cd .\intro\
PS C:\Users\lizec\Documents\Blog\Fusuma\samples\intro> ls


    目录: C:\Users\lizec\Documents\Blog\Fusuma\samples\intro


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----        2019/7/28      0:09                scripts
d-----        2019/7/28      0:09                slides
-a----        2019/7/27     16:46             74 .env.sample
-a----        2019/7/27     16:46            357 .fusumarc.yml
-a----        2019/7/27     16:46             23 index.js
-a----        2019/7/27     16:46           8784 package-lock.json
-a----        2019/7/27     16:46            665 package.json
-a----        2019/7/27     16:46          62328 StratumNo1 Medium.ttf
-a----        2019/7/27     16:46           1137 style.css


PS C:\Users\lizec\Documents\Blog\Fusuma\samples\intro> npx fusuma start
  √ cwebp pre-build test passed successfully
- Starting server...Error: no gitconfig to be found at C:\Users\lizec\Documents\Blog\Fusuma\samples\intro
    at C:\Users\lizec\AppData\Roaming\npm-cache\_npx\1176\node_modules\fusuma\node_modules\gitconfiglocal\index.js:13:27
    at C:\Users\lizec\AppData\Roaming\npm-cache\_npx\1176\node_modules\fusuma\node_modules\gitconfiglocal\index.js:48:48
    at suppressedCallback (fs.js:200:5)
    at FSReqWrap.oncomplete (fs.js:141:20)
/ Starting server...

 ERROR  Failed to compile with 2 errors                                                                                                                         00:12:49

These dependencies were not found:

* \src\entryPoints\Client.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js
* src\utils\customCss.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js

To install them, you can run: npm install --save \src\entryPoints\Client.js src\utils\customCss.js
Listening on http://localhost:8080


 WAIT  Compiling...                                                                                                                                             00:12:50



 ERROR  Failed to compile with 2 errors                                                                                                                         00:12:51

These dependencies were not found:

* \src\entryPoints\Client.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js
* src\utils\customCss.js in multi webpack-hot-middleware/client?reload=true regenerator-runtime /src/entryPoints/Client.js ./index.js src/utils/customCss.js

To install them, you can run: npm install --save \src\entryPoints\Client.js src\utils\customCss.js
终止批处理操作吗(Y/N)? y
PS C:\Users\lizec\Documents\Blog\Fusuma\samples\intro>

Installation instructions are not accurate

I don't really know much about JS tooling or workflow, but I liked your tool and wanted to use it!

Unfortunately, the instructions you provided do not work.

$ npx fusuma start
⠸ Starting with webpack-dev-server...

 ERROR  Failed to compile with 5 errors                                                                                            1:00:25 PM

 error  in /usr/local/lib/node_modules/fusuma/src/client/src/index.js

Module build failed (from /usr/local/lib/node_modules/fusuma/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-syntax-dynamic-import' from '/Users/mouille/Projects/sre-basics'
    at Function.module.exports [as sync] (/usr/local/lib/node_modules/fusuma/node_modules/resolve/lib/sync.js:69:15)
    at resolveStandardizedName (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/partial.js:85:55)

 @ multi webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server @babel/polyfill /usr/local/lib/node_modules/fusuma/src/client/src/index.js

 error  in (webpack)/hot/dev-server.js

Module build failed (from /usr/local/lib/node_modules/fusuma/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-syntax-dynamic-import' from '/Users/mouille/Projects/sre-basics'
    at Function.module.exports [as sync] (/usr/local/lib/node_modules/fusuma/node_modules/resolve/lib/sync.js:69:15)
    at resolveStandardizedName (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/partial.js:85:55)

 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server @babel/polyfill /usr/local/lib/node_modules/fusuma/src/client/src/index.js

 error  in (webpack)-dev-server/client?http://localhost:8080

Module build failed (from /usr/local/lib/node_modules/fusuma/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-syntax-dynamic-import' from '/Users/mouille/Projects/sre-basics'
    at Function.module.exports [as sync] (/usr/local/lib/node_modules/fusuma/node_modules/resolve/lib/sync.js:69:15)
    at resolveStandardizedName (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/partial.js:85:55)

 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server @babel/polyfill /usr/local/lib/node_modules/fusuma/src/client/src/index.js

 error  in /usr/local/lib/node_modules/fusuma/node_modules/@babel/polyfill/lib/index.js

Module build failed (from /usr/local/lib/node_modules/fusuma/node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/plugin-syntax-dynamic-import' from '/Users/mouille/Projects/sre-basics'
    at Function.module.exports [as sync] (/usr/local/lib/node_modules/fusuma/node_modules/resolve/lib/sync.js:69:15)
    at resolveStandardizedName (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:101:31)
    at resolvePlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:54:10)
    at loadPlugin (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/files/plugins.js:62:20)
    at createDescriptor (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at items.map (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPluginDescriptors (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:105:10)
    at alias (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:63:49)
    at cachedFunction (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/caching.js:33:19)
    at plugins.plugins (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-descriptors.js:28:77)
    at mergeChainOpts (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:319:26)
    at /usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/config-chain.js:68:29)
    at loadPrivatePartialConfig (/usr/local/lib/node_modules/fusuma/node_modules/@babel/core/lib/config/partial.js:85:55)

 @ multi webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server @babel/polyfill /usr/local/lib/node_modules/fusuma/src/client/src/index.js

 error


Running at http://localhost:8080

need to add issue and pr templates

[feature request] config port in 'start-task'

Type

• bug
• feature request

Feature Request

I want to config port of 'start-task' (ex: husuma start -p 1234).
Bacause I cant start to development slides based on the 'fusuma', if already used 8080 port other process.

mobile