@tblaisot/prez-as-adoc 0.0.1

package/bespoke-plugins/bespoke-hash.js

@@ -0,0 +1,89 @@
+export default function () {
+    return function (deck) {
+
+        let _hash = {main: '', query: {}}
+
+        deck.hash = function (value = undefined) {
+            if (value) {
+                if (value.main !== undefined) {
+                    _hash.main = value.main;
+                }
+                if (value.query !== undefined) {
+                    Object.assign(_hash.query, value.query);
+                }
+                const searchParams = new URLSearchParams();
+                Object.keys(_hash.query).forEach((e) => {
+                    if (_hash.query[e] !== null) {
+                        searchParams.set(e, _hash.query[e]);
+                    }
+                });
+                let hash = _hash.main || '';
+                const query = searchParams.toString();
+                if (query.length > 0) {
+                    hash += '?';
+                    hash += query;
+                }
+                window.location.hash = hash;
+            }
+            return _hash;
+        }
+
+        function activateSlide(index) {
+            const indexToActivate = -1 < index && index < deck.slides.length ? index : 0;
+            if (indexToActivate !== deck.slide()) {
+                deck.slide(indexToActivate);
+            }
+        }
+
+        function parseHash() {
+            const hash = window.location.hash.slice(1).split('?');
+            const main = hash[0];
+            let query = {};
+            if (hash.length > 1) {
+                const searchParams = new URLSearchParams(hash[1]);
+                query = Array.from(searchParams.entries()).reduce(
+                    (acc, e) => {
+                        acc[e[0]] = e[1];
+                        return acc;
+                    },
+                    {}
+                );
+            }
+            _hash = {
+                main,
+                query
+            };
+            deck.fire('hashchange', _hash);
+        }
+
+        function navigateToSlide() {
+            const hash = deck.hash().main;
+            const slideNumberOrName = parseInt(hash, 10);
+
+            if (hash) {
+                if (slideNumberOrName) {
+                    activateSlide(slideNumberOrName - 1);
+                } else {
+                    deck.slides.forEach(function (slide, i) {
+                        if (slide.getAttribute('data-bespoke-hash') === hash || slide.id === hash) {
+                            activateSlide(i);
+                        }
+                    });
+                }
+            }
+        }
+
+        setTimeout(() => {
+
+            deck.on('activate', (e) => {
+                const slideName = e.slide.getAttribute('data-bespoke-hash') || e.slide.id;
+                // window.location.hash = slideName || e.index + 1;
+                deck.hash({main: (slideName || e.index + 1)})
+            });
+
+            deck.on('hashchange', navigateToSlide)
+            parseHash();
+            window.addEventListener('hashchange', parseHash);
+        }, 0);
+    };
+};

package/bespoke-plugins/bespoke-nav.js

@@ -0,0 +1,46 @@
+
+const KEY_PAGEUP = "PageUp",
+    KEY_PAGEDOWN = "PageDown",
+    KEY_END = "End",
+    KEY_HOME = "Up",
+    KEY_LEFT = "ArrowLeft",
+    KEY_RIGHT = "ArrowRight",
+    KEY_UP = "ArrowUp",
+    KEY_DOWN = "ArrowDown";
+const KD = 'keydown';
+
+
+export default function () {
+    return function (deck) {
+        const handlers = {}
+
+        function modified(e, k) {
+            return e.ctrlKey || (e.shiftKey && (k === KEY_HOME || k === KEY_END)) || e.altKey || e.metaKey;
+        }
+
+        function addKeyHandler(keys, handler) {
+            if (!Array.isArray(keys)) {
+                keys = [keys];
+            }
+            keys.forEach(key => { handlers[key] = handler });
+        }
+        deck.addKeyHandler = addKeyHandler;
+
+        function onKey(e) {
+            // console.log("KEYBOARD", e.key)
+            if (!modified(e, e.key)) {
+                if (handlers.hasOwnProperty(e.key)) {
+                    handlers[e.key]()
+                }
+            }
+        }
+        deck.on('destroy', function () { document.removeEventListener(KD, onKey); });
+        document.addEventListener(KD, onKey);
+
+        // deck.addKeyHandler(KEY_SP, () => { return (e.shiftKey ? deck.prev : deck.next()); });
+        deck.addKeyHandler([KEY_RIGHT, KEY_PAGEDOWN], () => { return deck.next(); });
+        deck.addKeyHandler([KEY_LEFT, KEY_PAGEUP], () => { return deck.prev(); });
+        deck.addKeyHandler(KEY_HOME, () => { return deck.slide(0); });
+        deck.addKeyHandler(KEY_END, () => { return deck.slide(deck.slides.length - 1); });
+    };
+};

package/bespoke-plugins/bespoke-overview.js

@@ -0,0 +1,21 @@
+const KEY_V = "v";
+const MODES = ['full', 'list'];
+export default function () {
+    return function (deck) {
+        function cycleViewMode(){
+            for(let i =0; i<MODES.length; i++){
+                if(deck.parent.classList.contains(MODES[i])){
+                    deck.parent.classList.remove(MODES[i])
+                    deck.parent.classList.add(MODES[(i+1)%MODES.length])
+                    return;
+                }
+            }
+        }
+
+        deck.parent.classList.add(MODES[0]);
+        deck.addKeyHandler(KEY_V, () => {
+            return cycleViewMode();
+        });
+
+    };
+};

package/bespoke-plugins/bespoke-progress.js

@@ -0,0 +1,18 @@
+export default function (options = {}) {
+    return function (deck) {
+        const parent = deck.parent;
+
+        const updateProgress = (index) => {
+            const {length} = deck.slides;
+            const progress = (index / (length - 1)) * 100;
+            parent.style.setProperty('--deck-progress-percentage', `${progress}%`);
+            parent.style.setProperty('--deck-slide-index', `${index + 1}`);
+            parent.style.setProperty('--deck-slides-count', `${length}`);
+        };
+
+        deck.on('activate', function (e) {
+            updateProgress(e.index);
+        });
+        updateProgress(deck.slide());
+    };
+};

package/bespoke-plugins/bespoke-scale.js

@@ -0,0 +1,45 @@
+export default function (config) {
+  return function (deck) {
+    const parent = deck.parent;
+      // slideHeight = config.slideHeight,
+      // slideWidth = config.slideWidth;
+
+    const updateScale = () => {
+      const firstSlide = deck.slides[0];
+      if (!firstSlide) return;
+
+      const { innerWidth, innerHeight } = window;
+      // const innerWidth = window.offsetWidth;
+      // const innerHeight = window.offsetHeight;
+      const { offsetWidth, offsetHeight } = firstSlide;
+
+      // const listScale = 1 / (offsetWidth / innerWidth);
+      const fullScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
+
+      // parent.style.setProperty('--deck-list-scale', listScale);
+      parent.style.setProperty('--deck-full-scale', fullScale);
+    };
+
+    // function scale(element, ratio) {
+    //   element.style.transform = `scale(${ratio})`;
+    // }
+
+    // function scaleAll() {
+    //   // scale(firstSlide, 1);
+    //   console.log("scaleAll", parent.offsetWidth, parent.offsetHeight, slideWidth, slideHeight)
+    //   const xScale = parent.offsetWidth / slideWidth;
+    //   const yScale = parent.offsetHeight / slideHeight;
+    //
+    //   console.log(xScale, yScale)
+    //
+    //   deck.slides.forEach((slide =>{
+    //     scale(slide, Math.min(xScale, yScale));
+    //   }))
+    //
+    // }
+
+    window.addEventListener('resize', updateScale);
+    updateScale();
+  };
+
+};

package/bespoke-plugins/bespoke-speaker.js

@@ -0,0 +1,112 @@
+// import speakerViewHTML from './bespoke-speaker.html'
+
+const NAMESPACE = "bespoke-speaker"
+
+const KEY_S = "s";
+
+export default function (config = {notes: "prez-speaker-notes"}) {
+  return function (deck) {
+    const clients = [];
+    let speakerWindow;
+
+    function sendMessage(client, type, data) {
+      client.postMessage(
+        JSON.stringify({
+          namespace: NAMESPACE,
+          type,
+          ...data
+        }),
+        '*'
+      );
+    }
+
+    function openSpeakerView() {
+      // console.log("OPEN")
+      speakerWindow = window.open('/assets/bespoke-speaker.html', 'Speaker View - Notes', 'width=1100,height=700');
+      // speakerWindow.document.write(speakerViewHTML);
+
+      if (!speakerWindow) {
+        alert('Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.');
+        return;
+      }
+      // updateSpeakerView();
+      // updateSpeakerCss();
+    }
+
+    function updateSpeakerCss(){
+      document.head.querySelectorAll('style').forEach(el => {
+        speakerWindow.document.head.prepend(el.cloneNode(true))
+      })
+      document.head.querySelectorAll('link[rel="stylesheet"][type="text/css"]').forEach(el => {
+        speakerWindow.document.head.prepend(el.cloneNode(true))
+      })
+    }
+
+    function updateSpeakerView() {
+      if (!speakerWindow) {
+        return;
+      }
+      const currentSlideIndex = deck.slide();
+
+      const currentVignette = speakerWindow.document.querySelector('#present');
+      const nextVignette = speakerWindow.document.querySelector('#future');
+      const notes = speakerWindow.document.querySelector('#notes #notes-content');
+
+      // Update previews
+      currentVignette.innerHTML = deck.slides[currentSlideIndex]?.outerHTML
+      nextVignette.innerHTML = deck.slides[currentSlideIndex + 1]?.outerHTML
+      notes.innerHTML = [...deck.slides[currentSlideIndex].querySelectorAll(config.notes)].map(n => n.outerHTML).join('')
+
+      // Notify to update scale
+      sendMessage(speakerWindow, 'UPDATE', {})
+    }
+
+    function onMessage(e) {
+      if(typeof e.data !== "string"){
+        return
+      }
+      let data = null
+      try {
+        data = JSON.parse(e.data);
+      } catch (err){
+        // console.log("cant parse",typeof e.data, e.data)
+        return;//unparsable msg
+      }
+      if (!data || data.namespace !== NAMESPACE) {
+        return;
+      }
+      // console.log("onMessage", data)
+      const client = e.source;
+      switch (data.type) {
+        case 'REGISTER':
+          // console.log("Register")
+          clients.push(client);
+          sendMessage(
+            client,
+            'REGISTERED',
+            {
+              config: config,
+              url: encodeURIComponent(document.title || 'Untitled')
+            }
+          );
+          updateSpeakerView();
+          updateSpeakerCss();
+          break;
+        case 'KEYDOWN':
+          document.dispatchEvent(new KeyboardEvent('keydown', data));
+          break;
+      }
+    }
+
+    deck.on('destroy', function () {
+      removeEventListener('message', onMessage, false);
+    });
+    deck.on('activate', function () {
+      updateSpeakerView();
+    });
+    window.addEventListener('message', onMessage, false);
+    deck.addKeyHandler(KEY_S, () => {
+      return openSpeakerView();
+    });
+  };
+};

package/bespoke-plugins/bespoke-view-mode.js

@@ -0,0 +1,51 @@
+const KEY_V = "v";
+export default function (modes) {
+    return function (deck) {
+        function applyMode(current, previous = undefined) {
+            if (previous) {
+                document.body.classList.remove(previous);
+                deck.parent.classList.remove(previous);
+            }
+            document.body.classList.add(current);
+            deck.parent.classList.add(current);
+        }
+
+        deck.mode = function (value = undefined) {
+            const currentValue = (deck.hash().query || {}).mode || modes[0];
+            if (value) {
+                let mode = value;
+                if (value === 'default') {
+                    mode = modes[0];
+                    deck.hash({query: {mode: null}});
+                } else {
+                    deck.hash({query: {mode: value}});
+                }
+                applyMode(mode, currentValue)
+                deck.fire('viewmode', {current: mode, previous: currentValue});
+            }
+            return currentValue;
+        }
+
+        deck.toogleMode = function (value) {
+            if (deck.mode() === value) {
+                deck.mode('default');
+            } else {
+                deck.mode(value)
+            }
+        }
+
+        function cycleViewMode() {
+            const current = modes.indexOf(deck.mode());
+            deck.mode(modes[(current + 1) % modes.length]);
+        }
+
+        deck.addKeyHandler(KEY_V, () => {
+            return cycleViewMode();
+        });
+
+        setTimeout(()=>{
+            applyMode(deck.mode());
+            deck.fire('viewmode', {current: deck.mode(), previous: null});
+        },1)
+    };
+};

package/bin/prez-as-adoc.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+import arg from 'arg';
+
+import * as path from "path";
+import {asciidoctor, BASE_OPTIONS, REGISTRY} from "@tblaisot/asciidoctor-js-templates";
+import * as url from 'url';
+
+import * as slidesTreeprocessor from "../asciidoctor/extensions/slides_treeprocessor.js";
+import * as speakerNotesTreeprocessor from "../asciidoctor/extensions/speaker_notes_treeprocessor.js";
+
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+
+slidesTreeprocessor.register(REGISTRY);
+speakerNotesTreeprocessor.register(REGISTRY);
+
+const args = arg(
+    {
+        '--slides-templates': [String],
+        '--asciidoctor-templates-overloads': [String],
+        '--base_dir': String,
+        '--to_dir': String,
+    },
+    {
+        argv: process.argv.slice(2),
+    }
+);
+
+const template_dirs = [...BASE_OPTIONS.template_dirs, path.resolve(__dirname, '../asciidoctor/templates')]
+const overloads = args['--asciidoctor-templates-overloads']
+if (overloads && overloads.length > 0) {
+    overloads.forEach(overload => {
+        template_dirs.push(path.resolve(process.cwd(), overload));
+    })
+
+}
+const base_dir = path.resolve(process.cwd(), args['--base_dir'] || './src');
+const to_dir = path.resolve(process.cwd(), args['--to_dir'] || './dist');
+const slides_templates = args['--slides-templates'] || [];
+
+const OPTIONS = {
+    ...BASE_OPTIONS,
+    attributes: {
+        ...BASE_OPTIONS.attributes,
+        'slide-template-dirs': slides_templates.map(p => path.resolve(process.cwd(), p))
+    },
+    template_dirs,
+    base_dir,
+    to_dir,
+}
+
+// console.log(JSON.stringify(OPTIONS))
+asciidoctor.convertFile(args._[0], OPTIONS);

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@tblaisot/prez-as-adoc",
+  "version": "0.0.1",
+  "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tblaisot/prez-as-adoc.git"
+  },
+  "type": "module",
+  "bin": {
+    "prez-as-adoc": "bin/prez-as-adoc.js"
+  },
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "import": "./index.mjs"
+    },
+    "./vitejs/plugins/prez-as-adoc-plugin.js": "./vitejs/plugins/prez-as-adoc-plugin.js"
+  },
+  "keywords": [
+    "cli"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "arg": "^5.0.2",
+    "node-html-parser": "^6.1.5",
+    "vite": "^4.2.1"
+  }
+}

package/statics/assets/bespoke-speaker.css

@@ -0,0 +1,193 @@
+*,
+::before,
+::after {
+    -moz-box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+html {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    font-family: sans-serif;
+    overflow: hidden;
+
+    display: grid;
+    /*grid-template-columns: 3fr 1fr;*/
+    /*grid-template-rows: 3fr 3fr 1fr;*/
+    gap: 0;
+    /*grid-auto-flow: row;*/
+    /*grid-template-areas:*/
+    /*          "present future"*/
+    /*          "present notes"*/
+    /*          "present timer";*/
+
+    grid-template-columns: 1fr 1.1fr 0.9fr;
+    grid-template-rows: min-content 1fr 2fr min-content;
+    grid-template-areas:
+        "top top top"
+        "main main next"
+        "main main notes"
+        "bottom bottom bottom";
+}
+
+
+#top {
+    grid-area: top;
+    height: 3.5rem;
+}
+#bottom {
+    grid-area: bottom;
+    height: 3.5rem;
+}
+
+#present-container {
+    grid-area: main;
+}
+
+#future-container {
+    grid-area: next;
+}
+
+#notes {
+    grid-area: notes;
+}
+
+#time { /*grid-area: timer;*/
+}
+
+#present-container, #future-container {
+    position: relative;
+    outline: solid red 2px;
+}
+
+#present-container .slide, #future-container .slide {
+    clip: auto;
+    visibility: visible;
+    outline: solid blue 1px;
+}
+
+/*#present {*/
+/*  position: absolute;*/
+/*  width: 65%;*/
+/*  height: 100%;*/
+/*  top: 0;*/
+/*  left: 0;*/
+/*}*/
+
+/*#future {*/
+/*  position: absolute;*/
+/*  width: 35%;*/
+/*  height: 100%;*/
+/*  top: 0;*/
+/*  left: 65%;*/
+/*}*/
+
+/*#notes {*/
+/*  position: absolute;*/
+/*  width: 35%;*/
+/*  height: 30%;*/
+/*  top: 30%;*/
+/*  left: 65%;*/
+/*}*/
+
+/*#timer {*/
+/*  position: absolute;*/
+/*  width: 35%;*/
+/*  height: 10%;*/
+/*  top: 90%;*/
+/*  left: 65%;*/
+/*}*/
+
+
+/*#present,*/
+/*#future {*/
+/*  !*padding: 10px;*!*/
+/*  display: grid;*/
+/*  place-items: center;*/
+/*}*/
+
+/*#notes {*/
+/*  overflow: auto;*/
+/*  font-size: 18px;*/
+/*  padding: 6px;*/
+/*}*/
+
+/*#notes #notes-content {*/
+/*  color: #444;*/
+/*  margin: 0 10px;*/
+/*  line-height: 1.4;*/
+/*  font-size: 1.2em;*/
+/*}*/
+
+/*#notes #notes-content p {*/
+/*  margin: 0 0 1em 0;*/
+/*}*/
+
+/*#time {*/
+/*  !*bottom: 0;*!*/
+/*  !*right: 0;*!*/
+/*  !*height: 10%;*!*/
+/*  !*width: 35%;*!*/
+/*  !*position: absolute;*!*/
+/*  padding: 0 6px;*/
+/*  font-size: 2em;*/
+/*}*/
+
+/*#time #clock {*/
+/*  float: left;*/
+/*  margin-left: 10px;*/
+/*}*/
+
+/*#time #timer {*/
+/*  float: right;*/
+/*  margin-right: 10px;*/
+/*  cursor: pointer;*/
+/*}*/
+
+/*!*#time::before,*!*/
+/*!*#notes::before {*!*/
+/*!*  content: attr(id);*!*/
+/*!*  text-transform: uppercase;*!*/
+/*!*  font-size: 0.75rem;*!*/
+/*!*  color: #666;*!*/
+/*!*  display: block;*!*/
+/*!*  padding: 10px 10px 5px 10px;*!*/
+/*!*}*!*/
+
+/*!*#time::before {*!*/
+/*!*  border-top: 1px solid rgba(200, 200, 200, 0.5);*!*/
+/*!*}*!*/
+
+
+/*!* Override of bespokes css for speker view *!*/
+/*.bespoke-inactive {*/
+/*  opacity: 1;*/
+/*}*/
+/*.bespoke-slide {*/
+/*  !*position: relative;*!*/
+/*  transform-origin: top left;*/
+/*}*/
+
+
+/*.deck.full {*/
+/*  position: absolute;*/
+/*  top: 50%;*/
+/*  left: 50%;*/
+/*  overflow: hidden;*/
+/*  margin-top: calc(*/
+/*          var(--slide-height) / 2 * -1*/
+/*  );*/
+/*  margin-left: calc(*/
+/*          var(--slide-width) / 2 * -1*/
+/*  );*/
+/*  width: var(--slide-width);*/
+/*  height: var(--slide-height);*/
+/*  background-color: black;*/
+/*  transform: scale(var(--deck-full-scale));*/
+/*}*/