DEV Community: Yuta Hiroto

Introducing Fusuma: A helper for creating slides with markdown

Yuta Hiroto — Fri, 22 Jun 2018 23:03:02 +0000

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

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!

sweetpack: helps eliminate time to suffer from webpack andÂ babelðŸ˜‹

Yuta Hiroto — Tue, 17 Oct 2017 15:18:31 +0000

repo: https://github.com/abouthiroppy/sweetpack

$ npm i sweetpack --save-dev

What’s sweetpack?

sweetpack helps you build your environment of webpack and babel.
sweetpack hides all common settings of webpack and babel, you are not taking the time to write the configuration.

Goal

webpack can do anything so I think it is very difficult to abstract.
So, the goal is to help you build a simple application at first.
Also, the target is the web.

What can sweetpack do?

sweetpack supports the following.

uses react by the option(default: false)
uses flow by the option(default: false)
uses css-modules by the option(default: false)
uses postcss-loader by the option(default: false)
uses a template engine of html(by html-webpack-plugin)
can loadÂ .env
webpack-dev-server is activated and enabled HMR by default at the development
uses react-hot-loader@next at development(default: false)
attaches hash to the filename when production
splits files by extension when production(default: false)
performs code optimization when production

.sweetpack.yml

sweetpach provides the config file.
The default settings are as follows.

entry: src/index.js
output: dist
js:
  flow: false
  react: false
css:
  modules: false
  postcss: false
html:
  filename: null
  template: null
dev:
  env: null
  port: 8080
  analyzer: false
  dashboard: true
prod:
  env: null
  url: false
  extract: false

If the configuration file can not be found, the above default setting is reflected.
This file can be generated with init.

Plugins Included

The list of used plugins is here.

Example

An example of the smallest configuration.

package.json

{
  "scripts": {
    "start": "sweetpack watch",
    "build": "cross-env NODE_ENV=production sweetpack build"
  }
}

.sweetpack.yml

entry: ./lib/index.js
output: dist/bundle.js

Directory Structure

â”œâ”€â”€ dist
â”œâ”€â”€ lib
â”‚   â””â”€â”€ index.js
â””â”€â”€ package.json
2 directory, 2 files

If you run npm start, You can develop using webpack-dev-server and webpack-dashboard during development.

And you run npm run build, dist/ is created.

dist
â”œâ”€â”€ bundle.2ea3ca43d449dd5fdc16.js
â””â”€â”€ index.html
0 directories, 2 files

The html and js are automatically created and the hash is added to the file name.(also optimized)

Of course, css-loader and file-loader are included, so you can use css, png, gif, etc.

It is very easy to build development environment and production environmentðŸ¤“

An example of turning on all settings

https://github.com/abouthiroppy/sweetpack/tree/master/samples/all

feedback is very very welcomeÂ :)

If you are interested, please use sweetpackðŸ™

https://github.com/abouthiroppy/sweetpack

Hope you enjoy it!!
Cheers.