ridjohansen / 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
• Full supporting for SEO and OGP
• Checking a11y automatically
• Customizable JavaScript and CSS
• A sidebar having agenda and some features

Modes

• 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
  • Using a Fluorescent Marker on the slides
• Deploy Mode
  • Deploying to GitHub Pages
• PDF Mode
  • Exporting slides as PDF
• Live Mode
  • Available to make a speech while streaming a comment on Twitter

Demos

• Introducing Fusuma [repository]
• hiroppy/slides

Getting Started

$ npm i fusuma -D
$ npx fusuma init
$ tree -a
.
├── .fusumarc.yml
├── slides
│   └── 0-title.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
$ npx fusuma live          # start live mode

When npx fusuma start is executed, fusuma will create slides like follows on http://localhost:8080. 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

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;

  --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 do time-travel
  • video: Recording Your Voice
• (experimental) Drawing lines on the slide during making a speech

recording Your Actions	drawing Lines

Live Mode

Fusuma can fetch tweets from Twitter. In addition, fusuma have an api endpoint.
If you specify a keyword and authentication keys, fetching from twitter will be enabled.
Since comments can be sent to fusuma itself, you can use in the private case.
Also, this mode can run with Presenter Mode.

👉 Modes/Live

---

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