Add bespoke template

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
 - Support conversion from standard input ([#4](https://github.com/marp-team/marp-cli/pull/4))
+- Add `bespoke` HTML template for ready to presentation ([#5](https://github.com/marp-team/marp-cli/pull/5))
 
 ### Fixed
 

README.md

@@ -57,13 +57,13 @@ Under construction.
 
 - [x] Add `marp` bin
 - [x] Convert to plain HTML (includes style)
-- [ ] Split into HTML and CSS
 - [ ] Import external theme file(s)
 - [x] Select theme by option
 - [ ] Support configuration file (like `.marprc`)
 - [ ] Watch mode
+- [ ] Server mode
 - [x] HTML templates
-  - [ ] Template that has ready to actual presentation powered by [Bespoke](https://github.com/bespokejs/bespoke)
+  - [x] Template that has ready to actual presentation powered by [Bespoke](https://github.com/bespokejs/bespoke)
 - [ ] Select engine to use any Marpit based module
 - [x] Export PDF directly by using [Puppeteer](https://github.com/GoogleChrome/puppeteer)
 

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  collectCoverageFrom: ['src/**/*.{j,t}s'],
+  collectCoverageFrom: ['src/**/*.ts'],
   coveragePathIgnorePatterns: ['/node_modules/', '.*\\.d\\.ts'],
   coverageThreshold: { global: { lines: 95 } },
   transform: {

package.json

@@ -52,6 +52,8 @@
     "@types/puppeteer": "^1.6.0",
     "@types/yargs": "^11.1.1",
     "autoprefixer": "^9.1.2",
+    "bespoke": "^1.1.0",
+    "bespoke-keys": "^1.1.0",
     "codecov": "^3.0.4",
     "cssnano": "^4.0.5",
     "jest": "^23.5.0",
@@ -74,6 +76,7 @@
     "stylelint-config-standard": "^18.2.0",
     "stylelint-scss": "^3.3.0",
     "ts-jest": "^23.1.4",
+    "ts-keycode-enum": "^1.0.6",
     "tslint": "^5.11.0",
     "tslint-config-airbnb": "^5.10.0",
     "tslint-config-prettier": "^1.15.0",

rollup.config.js

@@ -11,35 +11,41 @@ import typescript from 'typescript'
 import { minify } from 'uglify-es'
 import { dependencies } from './package.json'
 
+const external = [
+  ...Object.keys(dependencies),
+  'fs',
+  'path',
+  'chrome-launcher/dist/chrome-finder',
+  'yargs/yargs',
+]
+
+const plugins = [
+  json({ preferConst: true }),
+  nodeResolve({ jsnext: true }),
+  commonjs(),
+  typescriptPlugin({
+    resolveJsonModule: false, // JSON has already resolved by rollup-plugin-json
+    typescript,
+  }),
+  postcss({
+    inject: false,
+    plugins: [autoprefixer(), cssnano({ preset: 'default' })],
+  }),
+  pugPlugin(),
+  !process.env.ROLLUP_WATCH && uglify({}, minify),
+]
+
 export default [
   {
-    external: [
-      ...Object.keys(dependencies),
-      'fs',
-      'path',
-      'chrome-launcher/dist/chrome-finder',
-      'yargs/yargs',
-    ],
+    external,
+    plugins,
+    input: 'src/templates/bespoke.js',
+    output: { file: 'lib/bespoke.js', format: 'iife' },
+  },
+  {
+    external,
+    plugins,
     input: 'src/marp-cli.ts',
-    output: {
-      exports: 'named',
-      file: 'lib/marp-cli.js',
-      format: 'cjs',
-    },
-    plugins: [
-      json({ preferConst: true }),
-      nodeResolve({ jsnext: true }),
-      commonjs(),
-      typescriptPlugin({
-        resolveJsonModule: false, // JSON has already resolved by rollup-plugin-json
-        typescript,
-      }),
-      postcss({
-        inject: false,
-        plugins: [autoprefixer(), cssnano({ preset: 'default' })],
-      }),
-      pugPlugin(),
-      !process.env.ROLLUP_WATCH && uglify({}, minify),
-    ],
+    output: { exports: 'named', file: 'lib/marp-cli.js', format: 'cjs' },
   },
 ]

src/converter.ts

@@ -3,7 +3,7 @@ import * as chromeFinder from 'chrome-launcher/dist/chrome-finder'
 import puppeteer, { PDFOptions } from 'puppeteer-core'
 import { error } from './error'
 import { File } from './file'
-import templates, { TemplateResult } from './templates'
+import templates, { TemplateResult } from './templates/'
 
 export enum ConvertType {
   html = 'html',
@@ -41,13 +41,13 @@ export class Converter {
     return template
   }
 
-  convert(markdown: string): TemplateResult {
+  async convert(markdown: string): Promise<TemplateResult> {
     let additionals = ''
 
     if (this.options.theme)
       additionals += `\n<!-- theme: ${JSON.stringify(this.options.theme)} -->`
 
-    return this.template({
+    return await this.template({
       lang: this.options.lang,
       readyScript: this.options.readyScript,
       renderer: tplOpts =>
@@ -57,7 +57,7 @@ export class Converter {
 
   async convertFile(file: File): Promise<ConvertResult> {
     const buffer = await file.load()
-    const template = this.convert(buffer.toString())
+    const template = await this.convert(buffer.toString())
     const newFile = file.convert(this.options.output, this.options.type)
 
     newFile.buffer = await (async () => {

src/marp-cli.ts

@@ -54,6 +54,7 @@ export default async function(argv: string[] = []): Promise<number> {
           type: 'boolean',
         },
         template: {
+          default: 'bespoke',
           describe: 'Template name',
           group: OptionGroup.Converter,
           choices: Object.keys(templates),
@@ -80,7 +81,7 @@ export default async function(argv: string[] = []): Promise<number> {
       options: {},
       output: args.output,
       readyScript: await MarpReadyScript.bundled(),
-      template: args.template || 'bare',
+      template: args.template,
       theme: args.theme,
       type:
         args.pdf || `${args.output}`.toLowerCase().endsWith('.pdf')

src/templates/bare.pug → src/templates/bare/bare.pug

@@ -4,7 +4,7 @@ html(lang=lang)
     meta(charset="UTF-8")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
     meta(http-equiv="X-UA-Compatible", content="ie=edge")
-    style!= bare.css
+    style(media="screen")!= bare.css
     style!= css
   body
     != html

src/templates/bare/bare.scss

@@ -0,0 +1,19 @@
+html,
+body {
+  background: #000;
+  height: 100%;
+  margin: 0;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+
+  /* older spec */
+  scroll-snap-type: mandatory;
+  scroll-snap-points-y: repeat(100%);
+}
+
+body > svg {
+  display: block;
+  height: 100%;
+  scroll-snap-align: center center;
+  width: 100%;
+}

src/templates/bespoke.js

@@ -0,0 +1,3 @@
+import bespoke from './bespoke/bespoke'
+
+bespoke()

src/templates/bespoke/bespoke.pug

@@ -0,0 +1,16 @@
+doctype
+html(lang=lang)
+  head
+    meta(charset="UTF-8")
+    meta(name="viewport", content="width=device-width, initial-scale=1.0")
+    meta(http-equiv="X-UA-Compatible", content="ie=edge")
+    style!= bespoke.css
+    style!= css
+  body
+    if progress
+      .bespoke-progress-parent
+        .bespoke-progress-bar
+
+    != html
+    != readyScript
+    script(defer)!= bespoke.js

src/templates/bespoke/bespoke.scss

@@ -0,0 +1,65 @@
+$progressHeight: 5px;
+
+@media screen {
+  html,
+  body {
+    background: #000;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .bespoke-marp-parent {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &.bespoke-marp-cursor-inactive {
+      cursor: none;
+    }
+  }
+
+  svg.bespoke-marp-slide {
+    height: 100%;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+
+    &.bespoke-marp-active {
+      pointer-events: auto;
+      z-index: 0;
+    }
+  }
+
+  .bespoke-progress-parent {
+    background: #222;
+    display: flex;
+    height: $progressHeight;
+    width: 100%;
+
+    & + .bespoke-marp-parent {
+      top: $progressHeight;
+    }
+
+    .bespoke-progress-bar {
+      flex: 0 0 0;
+      background: #0288d1;
+      transition: flex-basis 0.2s cubic-bezier(0, 1, 1, 1);
+    }
+  }
+}
+
+@media print {
+  .bespoke-progress-parent {
+    display: none;
+  }
+
+  .bespoke-marp-parent {
+    top: 0;
+  }
+}

src/templates/bespoke/bespoke.ts

@@ -0,0 +1,18 @@
+import bespoke from 'bespoke'
+import bespokeClasses from './classes'
+import bespokeCursor from './cursor'
+import bespokeHash from './hash'
+import bespokeNavigation from './navigation'
+import bespokeProgress from './progress'
+import bespokeTouch from './touch'
+
+export default function() {
+  return bespoke.from(document.getElementById('presentation'), [
+    bespokeClasses,
+    bespokeCursor(),
+    bespokeHash({ history: false }),
+    bespokeNavigation(),
+    bespokeProgress,
+    bespokeTouch(),
+  ])
+}

src/templates/bespoke/classes.ts

@@ -0,0 +1,11 @@
+// Based on https://github.com/bespokejs/bespoke-classes
+
+export default function bespokeClasses(deck) {
+  deck.parent.classList.add('bespoke-marp-parent')
+  deck.slides.map(element => element.classList.add('bespoke-marp-slide'))
+
+  deck.on('activate', e => {
+    deck.slides.map(element => element.classList.remove('bespoke-marp-active'))
+    e.slide.classList.add('bespoke-marp-active')
+  })
+}

src/templates/bespoke/cursor.ts

@@ -0,0 +1,20 @@
+export default function bespokeCursor(timeout = 2000) {
+  return deck => {
+    let activeTimer
+
+    function activate() {
+      if (activeTimer) clearTimeout(activeTimer)
+
+      activeTimer = setTimeout(() => {
+        deck.parent.classList.add('bespoke-marp-cursor-inactive')
+      }, timeout)
+
+      deck.parent.classList.remove('bespoke-marp-cursor-inactive')
+    }
+
+    document.addEventListener('mousedown', activate)
+    document.addEventListener('mousemove', activate)
+
+    setTimeout(activate, 0)
+  }
+}