Add presenter view to Bespoke template (#157)

* Add bespoke presenter plugin

* Update view's styling by mode

* Add iframe for next slide in presenter view

* Disable several bespok plugins in presenter view

* Improve stability of next slide view

* Allow navigation when clicked next slide view

* Add basic implementation of note on presenter view

* Refactor presenter plugin

* Add information footer to presenter view

* Add presenter view icon and keyboard shortcut

* Update disable state of buttons on presenter view

* Don't render notes if there aren't any notes

* Fix stylelint

* Fix container that doesn't fill window in Safari

* Refactor presenter view template to use JSX/vhtml

* Fix Jest and linter/formatter config to cover JSX

* Fill test cases for presenter view

* [ci skip] Update README.md and CHANGELOG.md

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 ### Added
 
+- Presenter view for bespoke template ([#142](https://github.com/marp-team/marp-cli/issues/142), [#157](https://github.com/marp-team/marp-cli/pull/157))
 - Setup cache, badge, and skip tag support for GitHub Actions ([#186](https://github.com/marp-team/marp-cli/pull/186), [#192](https://github.com/marp-team/marp-cli/pull/192))
 
 ### Changed

README.md

@@ -231,6 +231,7 @@ The `bespoke` template is using [Bespoke.js](https://github.com/bespokejs/bespok
 - **Fullscreen**: Toggle fullscreen by hitting <kbd>f</kbd> / <kbd>F11</kbd> key.
 - **On-screen controller**: There is a touch-friendly OSC. You may also disable by `--bespoke.osc=false` if unneccesary.
 - **Fragmented list**: Recognize [Marpit's fragmented list](https://github.com/marp-team/marpit/issues/145) and appear list one-by-one if used `*` and `1)` as the bullet marker.
+- **Presenter view**: Open presenter view in external window by hitting <kbd>p</kbd> key.
 - **Progress bar** (optional): By setting `--bespoke.progress` option, you can add a progress bar on the top of the deck.
 
 ### `bare` template

jest.config.js

@@ -1,10 +1,10 @@
 const { jestPreset } = require('ts-jest')
 
 module.exports = {
-  collectCoverageFrom: ['src/**/*.ts'],
+  collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx'],
   coveragePathIgnorePatterns: ['/node_modules/', '.*\\.d\\.ts'],
   coverageThreshold: { global: { lines: 95 } },
-  moduleFileExtensions: ['ts', 'js', 'json', 'node'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   setupFiles: ['jest-plugin-context/setup', './jest.setup.js'],
   transform: {
     ...jestPreset.transform,
@@ -13,5 +13,5 @@ module.exports = {
     '^.*\\.pug$': '<rootDir>/test/_transformers/pug.js',
   },
   testEnvironment: 'node',
-  testRegex: '(/(test|__tests__)/(?!_).*|(\\.|/)(test|spec))\\.[jt]s$',
+  testRegex: '(/(test|__tests__)/(?!_).*|(\\.|/)(test|spec))\\.[jt]sx?$',
 }

package.json

@@ -48,9 +48,9 @@
     "check:format": "yarn -s format -c",
     "check:ts": "tsc --noEmit",
     "clean": "rimraf lib",
-    "format": "prettier \"**/*.{css,js,json,md,scss,ts,yaml,yml}\"",
+    "format": "prettier \"**/*.{css,js,jsx,json,md,scss,ts,tsx,yaml,yml}\"",
     "format:write": "yarn -s format --write",
-    "lint:ts": "tslint \"{src,test}/**/*.ts\"",
+    "lint:ts": "tslint \"{src,test}/**/*.{ts,tsx}\"",
     "lint:css": "stylelint \"src/**/*.{css,scss}\"",
     "prepack": "npm-run-all --parallel check:* lint:* test:coverage --parallel build types",
     "preversion": "run-p check:* lint:* test:coverage",
@@ -116,6 +116,7 @@
     "tslint-config-airbnb": "^5.11.2",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^3.7.5",
+    "vhtml": "^2.2.0",
     "yauzl": "^2.10.0",
     "zip-stream": "^2.1.3"
   },

src/templates/bespoke/_button.scss

@@ -0,0 +1,70 @@
+@mixin _button-icon($icon) {
+  background: transparent url($icon) no-repeat center center;
+  background-size: contain;
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+}
+
+@mixin button-icon($icon, $size: 32px) {
+  @extend %button-#{$icon};
+  @include button-size($size);
+}
+
+@mixin button-size($size) {
+  height: $size;
+  line-height: $size;
+  width: $size;
+}
+
+%button {
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font-size: inherit;
+  opacity: 0.8;
+  outline: none;
+  padding: 0;
+  transition: opacity 0.2s linear;
+  -webkit-tap-highlight-color: transparent;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.15 !important;
+  }
+
+  &:hover {
+    opacity: 1;
+
+    &:active {
+      opacity: 0.6;
+    }
+
+    &:not(:disabled) {
+      transition: none;
+    }
+  }
+}
+
+// Use placeholder selectors to prevent multi time definitions of image data URI
+%button-prev {
+  @include _button-icon('../../assets/osc-prev.svg');
+}
+
+%button-next {
+  @include _button-icon('../../assets/osc-next.svg');
+}
+
+%button-fullscreen {
+  @include _button-icon('../../assets/osc-fullscreen.svg');
+
+  &.exit {
+    background-image: url('../../assets/osc-fullscreen-exit.svg');
+  }
+}
+
+%button-presenter {
+  @include _button-icon('../../assets/osc-presenter.svg');
+}

src/templates/bespoke/bespoke.pug

@@ -14,6 +14,15 @@ prepend deck
       span(data-bespoke-marp-osc="page")
       button(data-bespoke-marp-osc="next" tabindex=-1 title="Next slide") Next slide
       button(data-bespoke-marp-osc="fullscreen" tabindex=-1 title="Toggle fullscreen (f)") Toggle fullscreen
+      button(data-bespoke-marp-osc="presenter" tabindex=-1 title="Open presenter view (p)") Open presenter view
+
+append deck
+  if comments && comments.length > 0
+    each notes, index in comments
+      if notes && notes.length > 0
+        .bespoke-marp-note(data-index=index tabindex="0")
+          each paragraph in notes
+            p= paragraph
 
 block script
   script!= bespoke.js