@tblaisot/prez-as-adoc 0.0.2 → 0.1.0

package/.github/workflows/release.yml

@@ -2,17 +2,22 @@ name: Publish Package to npmjs
 on:
   release:
     types: [published]
+
+permissions:
+  id-token: write  # Required for OIDC
+  contents: read
+
 jobs:
-  build:
+  publish:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: '24'
           registry-url: 'https://registry.npmjs.org'
       - run: npm ci
+      #      - run: npm run build --if-present
+      #      - run: npm test
       - run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN:  ${{ secrets.NPM_TOKEN }}

package/README.adoc

@@ -19,12 +19,12 @@ prez-as-adoc --base_dir=./src --to_dir=./dist --slides-templates=./slide-templat
 [source,bash]
 ----
 // vite.config.js
-import { prezAsAdocPlugin } from '@tblaisot/prez-as-adoc/vitejs/plugins/prez-as-adoc-plugin.js'
+import { prezAsAdoc } from '@tblaisot/prez-as-adoc/vite/plugins'
 import { defineConfig } from 'vite'
 
 export default defineConfig({
     plugins: [
-        prezAsAdocPlugin({slidesTemplates: ['./slide-templates']})
+        prezAsAdoc({ slidesTemplates: ['./slide-templates'] })
     ]
 })
 ----

package/asciidoctor/extensions/index.js

@@ -0,0 +1,2 @@
+export * as slidesTreeprocessor from "./slides_treeprocessor.js";
+export * as speakerNotesTreeprocessor from "./speaker_notes_treeprocessor.js";

package/asciidoctor/extensions/slides_treeprocessor.js

@@ -1,7 +1,8 @@
 import {HELPERS} from "@tblaisot/asciidoctorjs-templates-js";
-const {sectionTitle, slice_text, $h, $div} = HELPERS;
 
-function debugAST(node) {
+const {sectionTitle, slice_text, isEmptyString} = HELPERS;
+
+export function debugAST(node) {
     return {
         context: node.getContext(),
         blocks: node.getBlocks().map(n => debugAST(n)),
@@ -29,17 +30,27 @@ export function register(registry) {
             // })
 
             function recurse(node) {
-                const sections = node.getSections()
+                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'
-                    });
+                    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);
@@ -47,7 +58,7 @@ export function register(registry) {
                     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)
@@ -56,10 +67,16 @@ export function register(registry) {
             // 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_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) {
@@ -68,12 +85,15 @@ export function register(registry) {
                     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)
+                const subtitle = slice_text(_title_obj.subtitle, _slice);
+                if (!isEmptyString(subtitle)) {
+                    const title2 = self.createBlock(title_slide, 'title', subtitle, {
+                        level: 2,
+                        slot: 'subtitle'
+                    });
+                    title_slide.getBlocks().push(title2)
+                }
             } else {
                 const title = self.createBlock(title_slide, 'title', document.getHeader().getTitle(), {
                     level: 1,
@@ -89,7 +109,6 @@ export function register(registry) {
 
             // 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

@@ -1,40 +1,35 @@
+
 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)
-        })
-      }
+    registry.treeProcessor(function () {
+        const self = this
 
-      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;
+        function replaceNodeWithSpeakerNoteNode(node){
+            const note = self.createBlock(node.getParent(), 'speaker_note', '', {...node.getAttributes()});
+            const parentBlocks = node.getParent().getBlocks();
+            node.getBlocks().forEach((block) => {
+                note.getBlocks().push(block);
+            });
+            parentBlocks[parentBlocks.indexOf(node)]=note; // replace node from parent
         }
-      })
-      return document;
+
+        self.process(function (document) {
+            document.findBy({context: 'open'}).forEach((node) => {
+                if (node.hasRole('speaker') || node.hasRole('notes')) {
+                    replaceNodeWithSpeakerNoteNode(node);
+                }
+            });
+            document.findBy({context: 'admonition'}).forEach((node) => {
+                if (node.hasRole('speaker') || node.hasRole('notes')) {
+                    replaceNodeWithSpeakerNoteNode(node);
+                }
+            });
+            document.findBy({context: 'sidebar'}).forEach((node) => {
+                if (node.hasRole('speaker') || node.hasRole('notes')) {
+                    replaceNodeWithSpeakerNoteNode(node);
+                }
+            });
+            return document;
+        });
+
     })
-  })
 }

package/asciidoctor/templates/admonition.js

@@ -1,6 +1,5 @@
-const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctorjs-templates-js");
-const {admonition: admonition_template} = TEMPLATES;
-const {$aside} = HELPERS;
+const {admonition: admonition_template} = require("@tblaisot/asciidoctorjs-templates-js/templates");
+const {$aside} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
 
 module.exports = function ({node}) {
     if (node.hasRole('speaker')) {

package/asciidoctor/templates/document.js

@@ -1,52 +1,51 @@
-const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctorjs-templates-js");
-const {$, $metaIf, toAttribute, toAttributes,isEmptyString} = HELPERS;
+const {$, $metaIf, toAttribute, toAttributes, isEmptyString} = require("@tblaisot/asciidoctorjs-templates-js/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';
+    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});
     }
-    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
+    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}'`
+    // 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');
+    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 = '';
-  }
+    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}">`)
+    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 `
+    return `
 <!DOCTYPE html>
 <html ${toAttribute('lang', node.hasAttribute('nolang') ? '' : node.getAttribute('lang', 'en'))}>
 <head>
@@ -64,12 +63,12 @@ module.exports = function ({node}) {
     ${docinfo_content_head}
 </head>
 <body ${toAttributes({
-    id: node.getId(),
-    class: [
-      node.getAttribute('doctype'),
-      node.getAttribute('docrole') || node.getAttribute('role'),
-    ]
-  })}>
+        id: node.getId(),
+        class: [
+            node.getAttribute('doctype'),
+            node.getAttribute('docrole') || node.getAttribute('role'),
+        ]
+    })}>
 ${docinfo_content_header}
 <div class="slides">
         <!-- START CONTENT -->

package/asciidoctor/templates/index.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+    admonition: require('./admonition.js'),
+    document: require('./document.js'),
+    preamble: require('./preamble.js'),
+    section: require('./section.js'),
+    slide: require('./slide.js'),
+    speaker_note: require('./speaker_note.js'),
+    title: require('./title.js'),
+}

package/asciidoctor/templates/preamble.js

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

package/asciidoctor/templates/section.js

@@ -1,29 +1,28 @@
-const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctor-js-templates");
-const {$h, $a, $section, sectionTitle,isDefined} = HELPERS;
+const {$h, $a, $section, sectionTitle, isDefined} = require("@tblaisot/asciidoctorjs-templates-js/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))
+    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)
+        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()
-  )
+    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

@@ -1,13 +1,12 @@
 const {resolve} = require("path");
 const {readFileSync, existsSync} = require("fs");
-const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctorjs-templates-js");
-const {$, isEmptyString} = HELPERS;
+const {$, isEmptyString} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
 
 function resolveTemplate(paths, templateName) {
     // find in folders
-    for(let path of paths){
-        const templatePath = resolve(path,`${templateName}-slide.html`)
-        if(existsSync(templatePath)){
+    for (let path of paths) {
+        const templatePath = resolve(path, `${templateName}-slide.html`)
+        if (existsSync(templatePath)) {
             return readFileSync(templatePath, {encoding: 'utf-8'});
         }
     }
@@ -20,12 +19,17 @@ module.exports = function ({node}) {
     const template = node.getAttribute(templateAttrName, defaultTemplate);
 
     let slideContent = '';
+    let notesContent = '';
+
+    const contentNodes = node.getBlocks().filter(n=>n.getContext()!=='speaker_note');
+    const speakerNotesNodes = node.getBlocks().filter(n=>n.getContext()==='speaker_note');
 
     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(
+        notesContent = speakerNotesNodes.map(n => n.convert()).join('\n');
+        const blockBySlot = contentNodes.reduce(
             (acc, n) => {
                 const slot = n.getAttribute('slot') || 'default'
                 if (!acc[slot]) {
@@ -36,11 +40,11 @@ module.exports = function ({node}) {
             },
             {});
         // Special slot
-        blockBySlot['all'] = node.getBlocks();
+        blockBySlot['all'] = contentNodes;
         Object.entries(blockBySlot).forEach(([slotname, blocks]) => {
             const content = $(blocks.map(n => n.convert()));
             slideContent = slideContent.replace(`<!-- slot=${slotname} -->`, content);
-        })
+        });
     }
     return $('section', {
             class: [
@@ -49,6 +53,6 @@ module.exports = function ({node}) {
                 node.getRole()
             ]
         },
-        slideContent
+        slideContent + notesContent
     );
 }

package/asciidoctor/templates/speaker_note.js

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

package/asciidoctor/templates/title.js

@@ -1,24 +1,20 @@
-const {HELPERS, TEMPLATES} = require("@tblaisot/asciidoctorjs-templates-js");
-const {$, $h, $a, isDefined, sectionTitle} = HELPERS;
+const {$h, $a, isDefined} = require("@tblaisot/asciidoctorjs-templates-js/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())
+    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()
+        content += node.getContent()
     }
-  } else {
-    content += node.getContent()
-  }
-  return $h({
-      level: node.getAttribute('level') + 1,
-      id: node.getId()
-    },
-    content
-  );
+    return $h({
+        level: node.getAttribute('level') + 1, id: node.getId()
+    }, content);
 }

package/{statics → bespoke}/assets/bespoke-speaker.html

@@ -4,19 +4,19 @@
 <head>
     <meta charset="utf-8">
     <title>Speaker View</title>
-    <link rel="stylesheet" href="/css/main.css">
+<!--    <link rel="stylesheet" href="/css/main.css"> &lt;!&ndash; fixme &ndash;&gt;-->
     <link rel="stylesheet" href="./bespoke-speaker.css">
     <!--    <link rel="stylesheet" href="./bespoke-speaker-overrides.css">-->
 </head>
 
 <body>
 <div id="present-container">
-    <div class="slides full" id="present">
+    <div class="slides full speaker speaker--present" id="present">
         <!--    <div id="present-content"></div>-->
     </div>
 </div>
 <div id="future-container">
-    <div class="slides full" id="future">
+    <div class="slides full speaker speaker--future" id="future">
         <!--    <div id="future-content"></div>-->
     </div>
 </div>

package/bespoke/assets/grid.svg

@@ -0,0 +1,32 @@
+<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<style>
+			.square {
+				stroke: red;
+                stroke-opacity: 0.1;
+				stroke-width: 1;
+				fill: transparent;
+			}
+
+            .grid {
+                fill: url(#grid);
+            }
+
+            .line {
+                stroke: #8af8f9;
+            }
+		</style>
+		<pattern x="0" y="0" width="25" height="25" viewBox="0 0 25 25" patternUnits="userSpaceOnUse" id="grid">
+			<rect x="0" y="0" width="25" height="25" class="square"/>
+		</pattern>
+	</defs>
+
+	<rect x="0" y="0" width="1024" height="768" class="grid"/>
+
+	<line x1="100" x2="100" y1="0" y2="768" class="line"/>
+	<line x1="475" x2="475" y1="0" y2="768" class="line"/>
+	<line x1="550" x2="550" y1="0" y2="768" class="line"/>
+	<line x1="925" x2="925" y1="0" y2="768" class="line"/>
+
+	<line y1="125" y2="125" x1="0" x2="1024" class="line"/>
+</svg>

package/{bespoke-plugins/bespoke-classes.js → bespoke/plugins/bespoke-classes-no-bespoke.js}

@@ -1,4 +1,4 @@
-export default function () {
+export function classesNoBespoke () {
     return function (deck) {
         function addClass(el, cls) {
             el.classList.add(cls);

package/bespoke/plugins/bespoke-classes.js

@@ -0,0 +1,39 @@
+export function classes (config = {prefix: 'bespoke-'}) {
+    return function (deck) {
+        function addClass(el, cls) {
+            el.classList.add(config.prefix + cls);
+        }
+
+        function removeClass(el, cls) {
+            el.classList.remove(config.prefix + cls)
+        }
+
+        function deactivate(el, index) {
+            const activeSlide = deck.slides[deck.slide()];
+            const offset = index - deck.slide();
+            const offsetClass = offset > 0 ? 'after' : 'before';
+
+            removeClass(el, 'active');
+            removeClass(el, 'inactive');
+            removeClass(el, 'before');
+            removeClass(el, 'after');
+
+            if (el !== activeSlide) {
+                addClass(el, 'inactive');
+                addClass(el, offsetClass);
+            }
+        }
+
+        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');
+        });
+    };
+};