hiroppy/fusuma

hiroppy/fusuma

README

undefined
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


  1. ``` shell
  2. $ npm i fusuma -D
  3. $ npx fusuma init
  4. $ tree -a
  5. .
  6. ├── .fusumarc.yml
  7. ├── .github
  8. │   └── workflows
  9. │       └── fusuma.yml
  10. ├── slides
  11. │   └── 0-slide.md
  12. └── style.css

  14. # --- executable tasks---
  15. $ npx fusuma init          # create scaffold
  16. $ npx fusuma start         # run server for development
  17. $ npx fusuma start-prod    # run server for bundle directory
  18. $ npx fusuma build         # build slides for production
  19. $ npx fusuma deploy        # deploy to github pages
  20. $ npx fusuma pdf           # export as PDF
  21. ```

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


  1. ``` gfm
  2. ## Hello

  4. This is the first slide.

  6. ---

  8. ## ��

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

  12. This is the second slide.

  14. <Sample />
  15. ```

  1. ``` js
  2. // Sample.js
  3. export const Sample = () => <p>Hello from jsx!!</p>;
  4. ```

👉Getting Started/Creating Your Slide

Customize styles


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

  1. ``` css
  2. :
  3.   --base-font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
  4.   --base-font-size: 2.4rem;
  5.   --base-font-weight: 300;
  6.   --base-align: center;
  7.   --base-max-width: 1280px;
  8.   --base-outer-margin: 24px;
  9.   --base-image-height: auto;
  10.   --base-image-width: 100%;
  11.   --base-image-border: none;
  12.   --base-image-border-radius: 0;

  14.   --color-title: #464646;
  15.   --color-base: #545454;
  16.   --color-background: #f5f5f5;
  17.   --color-link: #3498db;

  19.   --h1-font-size: 5.6rem;
  20.   --h1-font-weight: 300;
  21.   --h2-font-size: 4rem;
  22.   --h2-font-weight: 300;
  23.   --h3-font-size: 3.6rem;
  24.   --h3-font-weight: 300;
  25.   --h4-font-size: 3rem;
  26.   --h4-font-weight: 300;
  27.   --h5-font-size: 2.4rem;
  28.   --h5-font-weight: 600;
  29.   --h6-font-size: 2rem;
  30.   --h6-font-weight: 600;

  32.   --account-icon-size: 3rem;
  33.   --account-icon-color: #545454;
  34.   --code-font-size: 1.8rem;
  35.   --qr-code-image-size: 320px;
  36. }
  37. ```

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.

undefined

👉Modes/Presenter

Features


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

undefined

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