@tblaisot/prez-as-adoc 0.0.1

package/.github/workflows/release.yml

@@ -0,0 +1,18 @@
+name: Publish Package to npmjs
+on:
+  release:
+    types: [published]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm ci
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN:  ${{ secrets.NPM_TOKEN }}

package/README.adoc

@@ -0,0 +1,30 @@
+= prez-as-adoc
+
+This is a project to generate Bespoke slide deck.
+
+It allow to use slide templates (layout).
+
+It can be used as a CLI or as a Vite plugin (prefered method).
+
+== Usage as CLI
+
+[source,bash]
+----
+prez-as-adoc --base_dir=./src --to_dir=./dist --slides-templates=./slide-templates ./src/index.adoc
+----
+
+== Usage as Vite Plugin
+
+.vite.config.js
+[source,bash]
+----
+// vite.config.js
+import { prezAsAdocPlugin } from '@tblaisot/prez-as-adoc/vitejs/plugins/prez-as-adoc-plugin.js'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+    plugins: [
+        prezAsAdocPlugin({slidesTemplates: ['./slide-templates']})
+    ]
+})
+----

package/asciidoctor/extensions/slides_treeprocessor.js

@@ -0,0 +1,96 @@
+import {HELPERS} from "@tblaisot/asciidoctor-js-templates";
+const {sectionTitle, slice_text, $h, $div} = HELPERS;
+
+function debugAST(node) {
+    return {
+        context: node.getContext(),
+        blocks: node.getBlocks().map(n => debugAST(n)),
+    }
+}
+
+export function register(registry) {
+    registry.treeProcessor(function () {
+        const self = this
+        self.process(function (document) {
+
+            // document.findBy({context: 'page_break'}).forEach((node) => {
+            //   const parentSection = node.getParent();
+            //   const breakIndex = parentSection.getBlocks().indexOf(node)
+            //   const blockAfterBreak = parentSection.getBlocks().slice(breakIndex)
+            //   const grandParentSection = parentSection.getParent();
+            //   const slide = self.createBlock(document, 'slide', '', {...parentSection.getAttributes(), level: parentSection.getLevel()});
+            //   blockAfterBreak.forEach((block) => {
+            //     slide.getBlocks().push(block);
+            //   })
+            //   grandParentSection.getBlocks().splice(grandParentSection.getBlocks().indexOf(parentSection), 0, slide);
+            //
+            //   // remove block after
+            //   parentSection.getBlocks().splice(breakIndex, parentSection.getBlocks().length - parentSection.getBlocks() - 1)
+            // })
+
+            function recurse(node) {
+                const sections = node.getSections()
+                if (sections.length === 0) return;
+                sections.forEach((section) => {
+                    const slide = self.createBlock(document, 'slide', '', {
+                        ...section.getAttributes(),
+                        level: section.getLevel()
+                    });
+                    const title = self.createBlock(slide, 'title', sectionTitle(section), {
+                        level: section.getLevel(),
+                        slot: 'title'
+                    });
+                    slide.getBlocks().push(title)
+                    section.getBlocks().forEach((block) => {
+                        slide.getBlocks().push(block);
+                    })
+                    node.getBlocks().splice(node.getBlocks().indexOf(section), 1); // remove node from parent
+                    document.getBlocks().push(slide); // push slide to first level of the document
+                    recurse(slide)
+                })
+            }
+
+            recurse(document)
+            // console.log(JSON.stringify(debugAST(document), null, 2))
+
+            // create title slide
+            const attrName = document.getAttribute('slide-template-attr', 'slide-template', 'slide-template-attr');
+
+            const title_slide = self.createBlock(document, 'slide', '', {
+                [attrName]: 'title-slide', ...document.getAttributes(),
+                level: 0
+            });
+
+            const _title_obj = document.getDoctitle({partition: true, use_fallback: true});
+            if (_title_obj.subtitle) {
+                const _slice = document.getHeader().isOption('slice');
+                const title1 = self.createBlock(title_slide, 'title', slice_text(_title_obj.main, _slice), {
+                    level: 1,
+                    slot: 'title'
+                });
+                const title2 = self.createBlock(title_slide, 'title', slice_text(_title_obj.subtitle, _slice), {
+                    level: 2,
+                    slot: 'subtitle'
+                });
+                title_slide.getBlocks().push(title1)
+                title_slide.getBlocks().push(title2)
+            } else {
+                const title = self.createBlock(title_slide, 'title', document.getHeader().getTitle(), {
+                    level: 1,
+                    slot: 'title'
+                });
+                title_slide.getBlocks().push(title)
+            }
+
+            const preambles = document.findBy({context: 'preamble'});
+            title_slide.getBlocks().push(...preambles);
+
+            document.getBlocks().splice(0, 0, title_slide);
+
+            // remove preamble block from document
+            document.getBlocks().splice(document.getBlocks().findIndex(b => b === preambles[0]), 1);
+
+            return document;
+        })
+    })
+}

package/asciidoctor/extensions/speaker_notes_treeprocessor.js

@@ -0,0 +1,40 @@
+export function register(registry) {
+  registry.treeProcessor(function () {
+    const self = this
+    self.process(function (document) {
+      function recurse(node) {
+        const sections = node.getSections()
+        if(sections.length === 0) return;
+        sections.forEach((section) => {
+          section.findBy()
+          recurse(slide)
+        })
+      }
+
+      recurse(document)
+      document.findBy({context: 'open'}).forEach((node) => {
+        if (node.hasRole('aside') || node.hasRole('speaker') || node.hasRole('notes')) {
+          const note = self.createBlock(document, 'speaker_note', '', {...node.getAttributes()});
+          const blocks = node.getParent().getBlocks()
+          const node_idx = blocks.indexOf(node)
+          node.getBlocks().forEach((block) => {
+            note.getBlocks().push(block);
+          })
+          blocks[node_idx] = note;
+        }
+      })
+      document.findBy({context: 'admonition'}).forEach((node) => {
+        if (node.hasRole('aside') || node.hasRole('speaker') || node.hasRole('notes')) {
+          const note = self.createBlock(document, 'speaker_note', '', {...node.getAttributes()});
+          const blocks = node.getParent().getBlocks()
+          const node_idx = blocks.indexOf(node)
+          node.getBlocks().forEach((block) => {
+            note.getBlocks().push(block);
+          })
+          blocks[node_idx] = note;
+        }
+      })
+      return document;
+    })
+  })
+}

package/asciidoctor/templates/admonition.js

@@ -0,0 +1,10 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {admonition: admonition_template} = TEMPLATES;
+const {$aside} = HELPERS;
+
+module.exports = function ({node}) {
+    if (node.hasRole('speaker')) {
+        return $aside({role: 'notes', class: 'speaker-notes'}, node.getContent())
+    }
+    return admonition_template({node})
+}

package/asciidoctor/templates/document.js

@@ -0,0 +1,86 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$, $metaIf, toAttribute, toAttributes,isEmptyString} = HELPERS;
+
+function getFavicon(node) {
+  let favicon = ''
+  if (node.document.hasAttribute('favicon')) {
+    let icon_href = node.document.getAttribute('favicon');
+    if (isEmptyString(icon_href)) {
+      icon_href = 'favicon.ico';
+    }
+    const icon_ext = icon_href.split('.').pop();
+    const icon_type = icon_ext === 'ico' ? 'image/x-icon' : `image/${icon_ext}`;
+    favicon = $('link', {rel: "icon", type: icon_type, href: icon_href});
+  }
+  return favicon
+}
+
+// false needs to be verbatim everything else is a string.
+// Calling side isn't responsible for quoting so we are doing it here
+function toValidSlideNumber(val) {
+  // corner case: empty is empty attribute which is true
+  if (val === "") {
+    return true;
+  }
+  // using toString here handles both the 'false' string and the false boolean
+  return val.toString() === 'false' ? false : `'${val}'`
+}
+
+/**
+ * Returns formatted style/link and script tags for header.
+ */
+module.exports = function ({node}) {
+  const document_content = node.getContent();
+  let docinfo_content_header = node.getDocinfo('header', '.html');
+  let docinfo_content_head = node.getDocinfo('head', '.html');
+  let docinfo_content_footer = node.getDocinfo('footer', '.html');
+
+
+  if (node.getNoheader() || isEmptyString(docinfo_content_header)) {
+    docinfo_content_header = '';
+  }
+  if (isEmptyString(docinfo_content_footer)) {
+    docinfo_content_footer = '';
+  }
+
+  const scripts=node.getAttribute('scripts', '').split(',').map(script => `<script type="module" src="${script}"></script>`)
+  const stylesheets=node.getAttribute('stylesheets', '').split(',').map(style => `<link rel="stylesheet" type="text/css" href="${style}">`)
+
+  return `
+<!DOCTYPE html>
+<html ${toAttribute('lang', node.hasAttribute('nolang') ? '' : node.getAttribute('lang', 'en'))}>
+<head>
+    <meta charset="utf-8">
+    ${$('title', {}, node.getDoctitle() || node.getAttribute('untitled-label'))}
+    ${getFavicon(node)}
+    ${$metaIf('application-name', node.getAttribute('app-name'))}
+    ${$metaIf('author', node.getAttribute('authors'))}
+    ${$metaIf('copyright', node.getAttribute('copyright'))}
+    ${$metaIf('description', node.getAttribute('description'))}
+    ${$metaIf('keywords', node.getAttribute('keywords'))}
+    ${$('meta', {name: 'generator', content: `Asciidoctor ${node.getAttribute('asciidoctor-version')}`})}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
+    ${stylesheets}
+    ${docinfo_content_head}
+</head>
+<body ${toAttributes({
+    id: node.getId(),
+    class: [
+      node.getAttribute('doctype'),
+      node.getAttribute('docrole') || node.getAttribute('role'),
+    ]
+  })}>
+${docinfo_content_header}
+<div class="slides">
+        <!-- START CONTENT -->
+        ${document_content}
+        <!-- END CONTENT -->
+</div>
+${docinfo_content_footer}
+${scripts}
+</body>
+</html>
+`
+}
+
+

package/asciidoctor/templates/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/asciidoctor/templates/preamble.js

@@ -0,0 +1,11 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$section} = HELPERS;
+
+module.exports = function ({node}) {
+  return $section({
+      id: 'preamble',
+      'aria-label': 'Preamble'
+    },
+    node.getContent()
+  );
+}

package/asciidoctor/templates/section.js

@@ -0,0 +1,29 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$h, $a, $section, sectionTitle,isDefined} = HELPERS;
+
+module.exports = function ({node}) {
+  let content = '';
+  if (isDefined(node.getId())) {
+    if (node.document.hasAttribute('sectanchors')) {
+      content += $a({class: "anchor", href: `#${node.getId()}`, 'aria-hidden': "true"})
+    }
+    if (node.document.hasAttribute('sectlinks')) {
+      content += $a({class: "link", href: `#${node.getId()}`}, sectionTitle(node))
+    } else {
+      content += sectionTitle(node)
+    }
+  } else {
+    content += sectionTitle(node)
+  }
+  return $section({
+      class: ['doc-section', `level-${node.getLevel()}`, node.getRole()],
+    },
+    $h({
+        level: node.getLevel() + 1,
+        id: node.getId()
+      },
+      content
+    ),
+    node.getContent()
+  )
+}

package/asciidoctor/templates/slide.js

@@ -0,0 +1,54 @@
+const {resolve} = require("path");
+const {readFileSync, existsSync} = require("fs");
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$, isEmptyString} = HELPERS;
+
+function resolveTemplate(paths, templateName) {
+    // find in folders
+    for(let path of paths){
+        const templatePath = resolve(path,`${templateName}-slide.html`)
+        if(existsSync(templatePath)){
+            return readFileSync(templatePath, {encoding: 'utf-8'});
+        }
+    }
+    throw new Error(`No Match found for template "${templateName}" in folders ${JSON.stringify(this._paths)}`)
+}
+
+module.exports = function ({node}) {
+    const templateAttrName = node.getAttribute('slide-template-attr', 'template', 'slide-template-attr');
+    const defaultTemplate = node.getAttribute('slide-default-template', '', 'slide-default-template');
+    const template = node.getAttribute(templateAttrName, defaultTemplate);
+
+    let slideContent = '';
+
+    if (isEmptyString(template)) {
+        slideContent = node.getBlocks().map(n => n.convert()).join('\n')
+    } else {
+        slideContent = resolveTemplate(node.document.getAttribute('slide-template-dirs'), template);
+        const blockBySlot = node.getBlocks().reduce(
+            (acc, n) => {
+                const slot = n.getAttribute('slot') || 'default'
+                if (!acc[slot]) {
+                    acc[slot] = [];
+                }
+                acc[slot].push(n);
+                return acc;
+            },
+            {});
+        // Special slot
+        blockBySlot['all'] = node.getBlocks();
+        Object.entries(blockBySlot).forEach(([slotname, blocks]) => {
+            const content = $(blocks.map(n => n.convert()));
+            slideContent = slideContent.replace(`<!-- slot=${slotname} -->`, content);
+        })
+    }
+    return $('section', {
+            class: [
+                'slide',
+                template,
+                node.getRole()
+            ]
+        },
+        slideContent
+    );
+}

package/asciidoctor/templates/speaker_note.js

@@ -0,0 +1,12 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$} = HELPERS;
+
+module.exports = function ({node}) {
+  return $('aside',
+    {
+      id: node.getId(),
+      class: ['speaker-notes'],
+    },
+    node.getBlocks().map(block => block.convert()).join('\n')
+  )
+}

package/asciidoctor/templates/title.js

@@ -0,0 +1,24 @@
+const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
+const {$, $h, $a, isDefined, sectionTitle} = HELPERS;
+
+module.exports = function ({node}) {
+  let content = '';
+  if (isDefined(node.getId())) {
+    if (node.document.hasAttribute('sectanchors')) {
+      content += $a({class: "anchor", href: `#${node.getId()}`, 'aria-hidden': "true"})
+    }
+    if (node.document.hasAttribute('sectlinks')) {
+      content += $a({class: "link", href: `#${node.getId()}`}, node.getContent())
+    } else {
+      content += node.getContent()
+    }
+  } else {
+    content += node.getContent()
+  }
+  return $h({
+      level: node.getAttribute('level') + 1,
+      id: node.getId()
+    },
+    content
+  );
+}

package/bespoke-plugins/bespoke-classes.js

@@ -0,0 +1,44 @@
+export default function () {
+    return function (deck) {
+        function addClass(el, cls) {
+            el.classList.add(cls);
+        }
+
+        function removeClass(el, cls) {
+            el.className = el.className
+                .replace(new RegExp('(\\s|^)' +cls + '(\\s|$)', 'g'), ' ')
+                .trim();
+        }
+
+        function deactivate(el, index) {
+            const activeSlide = deck.slides[deck.slide()];
+            const offset = index - deck.slide();
+            const offsetClass = offset > 0 ? 'after' : 'before';
+
+            // removeClass(el, 'before(-\\d+)?');
+            // removeClass(el, 'after(-\\d+)?');
+            removeClass(el, 'active');
+            removeClass(el, 'inactive');
+            removeClass(el, 'before');
+            removeClass(el, 'after');
+
+            if (el !== activeSlide) {
+                addClass(el, 'inactive');
+                addClass(el, offsetClass);
+                // addClass(el, 'slide-' + offsetClass);
+                // addClass(el, 'slide-' + offsetClass + '-' + Math.abs(offset));
+            }
+        }
+
+        addClass(deck.parent, 'parent');
+        // deck.slides.map(function (el) {
+        //     addClass(el, 'slide');
+        // });
+
+        deck.on('activate', function (e) {
+            deck.slides.map(deactivate);
+            addClass(e.slide, 'active');
+            removeClass(e.slide, 'inactive');
+        });
+    };
+};

package/bespoke-plugins/bespoke-debug.js

@@ -0,0 +1,30 @@
+
+const KEY_D = "d";
+const DEBUG_CLASS='debug';
+
+export default function () {
+    return function (deck) {
+
+        function debugOverflow(){
+            if(deck.parent.classList.contains(DEBUG_CLASS)) {
+                const currentSlide = deck.slides[deck.slide()];
+                Array.from(currentSlide.children).forEach(el => {
+                    if (el.scrollHeight > currentSlide.clientHeight) {
+                        deck.parent.classList.add("overflowing");
+                    } else {
+                        deck.parent.classList.remove("overflowing");
+                    }
+                });
+            }
+        }
+        deck.addKeyHandler(KEY_D, () => {
+            deck.parent.classList.toggle(DEBUG_CLASS);
+            debugOverflow();
+        });
+
+        deck.on('activate', function (e) {
+            debugOverflow()
+        });
+
+    };
+};

package/bespoke-plugins/bespoke-editor.js

@@ -0,0 +1,96 @@
+const KEY_E = "e";
+const EDITOR_CLASS = 'editor';
+
+export default function () {
+    return function (deck) {
+        let preview;
+        let previewContainer;
+
+        function scrollIntoView() {
+            const currentSlide = deck.slides[deck.slide()];
+            currentSlide.scrollIntoView({block: 'center', inline: 'center'});
+        }
+
+        function updateScaleList() {
+            const firstSlide = deck.slides[0];
+            const innerWidth = deck.parent.offsetWidth;
+            const innerHeight = deck.parent.offsetHeight;
+            const { offsetWidth, offsetHeight } = firstSlide;
+
+            const listScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
+
+            deck.parent.style.setProperty('--deck-list-scale', listScale);
+        }
+
+        function updateScalePreview() {
+            const innerWidth = preview.offsetWidth;
+            const innerHeight = preview.offsetHeight;
+            const {offsetWidth, offsetHeight} = previewContainer.children[0];
+
+            const fullScale = 1 / Math.max(offsetWidth / innerWidth, offsetHeight / innerHeight);
+
+            preview.style.setProperty('--deck-full-scale', fullScale);
+        }
+
+        const eventsHandlers = [];
+
+        function bindSlideClick() {
+            deck.slides.forEach((slide, index) => {
+                eventsHandlers.push(slide.addEventListener('click', () => {
+                    deck.slide(index)
+                }));
+            });
+        }
+
+        function unbindSlideClick() {
+            deck.slides.forEach((slide, index) => {
+                slide.removeEventListener('click', eventsHandlers[index]);
+            });
+        }
+
+        function mountEditor() {
+            deck.parent.classList.add('list')
+            preview = document.createElement('div');
+            preview.classList.add('preview');
+            previewContainer = document.createElement('div');
+            previewContainer.classList.add('slides', 'full');
+            preview.appendChild(previewContainer);
+            document.body.appendChild(preview);
+            updatePreview();
+            bindSlideClick();
+        }
+
+        function unmountEditor() {
+            deck.parent.classList.remove('list')
+            preview.removeChild(previewContainer);
+            previewContainer = null;
+            document.body.removeChild(preview);
+            preview = null;
+            unbindSlideClick();
+        }
+
+        function updatePreview() {
+            if (previewContainer) {
+                previewContainer.innerHTML = deck.slides[deck.slide()]?.outerHTML;
+                updateScalePreview();
+                updateScaleList();
+                scrollIntoView();
+            }
+        }
+
+        deck.addKeyHandler(KEY_E, () => {
+            deck.toogleMode(EDITOR_CLASS);
+        });
+        deck.on('viewmode', function (e) {
+            if (e.current === EDITOR_CLASS) {
+                mountEditor();
+            } else if (preview) {
+                unmountEditor();
+            }
+        });
+        deck.on('activate', function (e) {
+            updatePreview()
+        });
+
+    };
+};