Introducing Fusuma: A helper for creating slides with markdown

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
$

…

View on GitHub

Goal

Created a CLI that supports to release with 1 command without writing webpack, Babel, Postcss, etc setting file.

And make a slide with markdown only.

It can quickly create a slide and publish it to gh-pages.

Demo

slide: https://slides.hiroppy.me/the-present-and-future-of-JavaScript/
repo: https://github.com/hiroppy/slides/tree/master/slides/the-present-and-future-of-JavaScript

slide: https://hiroppy.github.io/fusuma/fx/
repo: https://github.com/hiroppy/fusuma/tree/master/samples/fx

Procedure

You just execute the following three lines for executing, generating and deploying slides.

$ npm i fusuma -D
$ npx fusuma init 
$ mkdir slides && touch slides/title.md && echo '# Hello😄' > slides/title.md

# --- executable tasks---
$ npx fusuma start    # development
$ npx fusuma build    # production as NODE_ENV=production
$ npx fusuma deploy   # deploy to github pages
$ npx fusuma pdf      # export as PDF from HTML

# --- Tree ---
$ tree -a
.
├── .fusumarc.yml
└── slides
    └── title.md

1 directory, 2 files

When npx fusuma start is executed, it is output as follows.

Default theme is bespoke-theme-nebula.

And only .fusumarc.js and slides/ are necessary files at the time of execution.

Tasks

Fusuma supports the following tasks.

• init: generate the configuration file(.fusumarc.js)
• start: run with webpack-dev-server
• build: build with webpack4
• deploy: upload the prebuilt files to gh-pages
• pdf: convert prebuilt files from HTML to pdf

What it can do / What it can not do

What it can do

• development, build, and deploy can be done with one command
• presenter mode
  • https://github.com/hiroppy/fusuma#presenter-mode
• a table of contents is created in Sidebar
• can extend css and js
• can set OGP and SNS
• etc…

What it can not do

Expressing animation is difficult because a slide is written by Markdown.
However, you can write a slide as HTML and extend JS.

---

If you interested in Fusuma, please see this repository😍

https://github.com/hiroppy/fusuma

Thanks!