@tblaisot/prez-as-adoc 0.0.3 → 0.2.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,7 +19,7 @@ prez-as-adoc --base_dir=./src --to_dir=./dist --slides-templates=./slide-templat
 [source,bash]
 ----
 // vite.config.js
-import { prezAsAdoc } from '@tblaisot/prez-as-adoc/vite-plugins'
+import { prezAsAdoc } from '@tblaisot/prez-as-adoc/vite/plugins'
 import { defineConfig } from 'vite'
 
 export default defineConfig({

package/asciidoctor/extensions/slides_treeprocessor.js

@@ -1,9 +1,14 @@
 import {HELPERS} from "@tblaisot/asciidoctorjs-templates-js";
-const {sectionTitle, slice_text, $h, $div} = HELPERS;
 
-function debugAST(node) {
+const {sectionTitle, slice_text, isEmptyString} = HELPERS;
+
+const NO_TITLE = '!';
+
+export function debugAST(node) {
     return {
         context: node.getContext(),
+        role: node.getRole(),
+        attributes: node.getAttributes(),
         blocks: node.getBlocks().map(n => debugAST(n)),
     }
 }
@@ -11,6 +16,7 @@ function debugAST(node) {
 export function register(registry) {
     registry.treeProcessor(function () {
         const self = this
+
         self.process(function (document) {
 
             // document.findBy({context: 'page_break'}).forEach((node) => {
@@ -29,25 +35,44 @@ 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'
-                    });
-                    slide.getBlocks().push(title)
+                    const slide = self.createBlock(
+                        document,
+                        'slide',
+                        '',
+                        {
+                            ...section.getAttributes(),
+                            level: section.getLevel()
+                        }
+                    );
+
+                    const section_title = sectionTitle(section);
+                    const title = self.createBlock(
+                        slide,
+                        'title',
+                        section_title,
+                        {
+                            level: section.getLevel(),
+                            slot: 'title'
+                        }
+                    );
+                    if (section_title === NO_TITLE
+                        || section.isOption('notitle')
+                        || section.isOption('conceal')) {
+                        slide.addRole('hidden-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)
@@ -56,39 +81,53 @@ 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 deck_title_slide = self.createBlock(
+                document,
+                'slide',
+                '',
+                {
+                    [attrName]: 'deck-title',
+                    ...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), {
+                const _slice = document.getHeader().isOption('slice'); // FIXME
+                const title1 = self.createBlock(deck_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)
+                deck_title_slide.getBlocks().push(title1)
+                const subtitle = slice_text(_title_obj.subtitle, _slice);
+                if (!isEmptyString(subtitle)) {
+                    const title2 = self.createBlock(deck_title_slide, 'title', subtitle, {
+                        level: 2,
+                        slot: 'subtitle'
+                    });
+                    deck_title_slide.getBlocks().push(title2)
+                }
             } else {
-                const title = self.createBlock(title_slide, 'title', document.getHeader().getTitle(), {
+                const title = self.createBlock(deck_title_slide, 'title', document.getHeader().getTitle(), {
                     level: 1,
                     slot: 'title'
                 });
-                title_slide.getBlocks().push(title)
+                deck_title_slide.getBlocks().push(title)
             }
 
             const preambles = document.findBy({context: 'preamble'});
-            title_slide.getBlocks().push(...preambles);
-
-            document.getBlocks().splice(0, 0, title_slide);
-
+            if(preambles.length === 1) {
+                preambles[0].getBlocks().forEach((block) => {
+                    deck_title_slide.getBlocks().push(block);
+                });
+                const parentBlocks = preambles[0].getParent().getBlocks();
+                parentBlocks[parentBlocks.indexOf(preambles[0])] = deck_title_slide;//self.createBlock(preambles[0].getParent(), 'empty','', {}); // replace node from parent
+            } else {
+                document.getBlocks().splice(0, 0, deck_title_slide);
+            }
             // remove preamble block from document
-            document.getBlocks().splice(document.getBlocks().findIndex(b => b === preambles[0]), 1);
+            // document.getBlocks()[document.getBlocks().findIndex(b => b === preambles[0])] = self.createBlock(document, 'empty', '', {});
 
             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/section.js

@@ -1,4 +1,4 @@
-const {$h, $a, $section, sectionTitle, isDefined} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
+const {$h, $a, $section, sectionTitle, isDefined, data_attributes} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
 
 module.exports = function ({node}) {
     let content = '';
@@ -16,6 +16,7 @@ module.exports = function ({node}) {
     }
     return $section({
             class: ['doc-section', `level-${node.getLevel()}`, node.getRole()],
+            ...data_attributes(node)
         },
         $h({
                 level: node.getLevel() + 1,

package/asciidoctor/templates/slide.js

@@ -1,6 +1,9 @@
 const {resolve} = require("path");
 const {readFileSync, existsSync} = require("fs");
-const {$, isEmptyString} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
+const {$, isEmptyString, data_attributes} = require("@tblaisot/asciidoctorjs-templates-js/helpers");
+const {debugAST} = require("../extensions/slides_treeprocessor");
+
+const NO_TITLE = '!';
 
 function resolveTemplate(paths, templateName) {
     // find in folders
@@ -19,12 +22,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]) {
@@ -35,19 +43,20 @@ 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: [
                 'slide',
                 template,
                 node.getRole()
-            ]
+            ],
+            ...data_attributes(node)
         },
-        slideContent
+        slideContent + notesContent
     );
 }

package/asciidoctor/templates/title.js

@@ -15,6 +15,8 @@ module.exports = function ({node}) {
         content += node.getContent()
     }
     return $h({
-        level: node.getAttribute('level') + 1, id: node.getId()
+        level: node.getAttribute('level') + 1,
+        id: node.getId(),
+        class: node.getRole()
     }, 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');
+        });
+    };
+};

package/{bespoke-plugins → bespoke/plugins}/bespoke-debug.js

@@ -2,7 +2,7 @@
 const KEY_D = "d";
 const DEBUG_CLASS='debug';
 
-export default function () {
+export function debug() {
     return function (deck) {
 
         function debugOverflow(){
@@ -10,9 +10,9 @@ export default function () {
                 const currentSlide = deck.slides[deck.slide()];
                 Array.from(currentSlide.children).forEach(el => {
                     if (el.scrollHeight > currentSlide.clientHeight) {
-                        deck.parent.classList.add("overflowing");
+                        deck.parent.classList.add("bespoke-overflowing");
                     } else {
-                        deck.parent.classList.remove("overflowing");
+                        deck.parent.classList.remove("bespoke-overflowing");
                     }
                 });
             }

package/{bespoke-plugins → bespoke/plugins}/bespoke-hash.js

@@ -1,4 +1,4 @@
-export default function () {
+export function hash() {
     return function (deck) {
 
         let _hash = {main: '', query: {}}

package/bespoke/plugins/bespoke-highlight.js

@@ -0,0 +1,23 @@
+// Using ES6 import syntax
+import hljs from 'highlight.js/lib/core';
+
+
+function doHighlightAll(){
+    document.querySelectorAll('pre.highlight code').forEach((el) => {
+        const language = el.getAttribute('data-lang');
+        // hljs.highlightElement(el);
+        el.innerHTML = hljs.highlight(el.innerHTML, {language}).value
+    });
+}
+
+export function highlight (config = {}) {
+    let alreadyHighlighted = false;
+    return function (deck) {
+        deck.on('activate', function(event) {
+            if(!alreadyHighlighted){
+                alreadyHighlighted = true;
+                doHighlightAll()
+            }
+        });
+    };
+};

package/{bespoke-plugins → bespoke/plugins}/bespoke-nav.js

@@ -10,7 +10,7 @@ const KEY_PAGEUP = "PageUp",
 const KD = 'keydown';
 
 
-export default function () {
+export function nav() {
     return function (deck) {
         const handlers = {}
 

package/{bespoke-plugins → bespoke/plugins}/bespoke-progress.js

@@ -1,4 +1,4 @@
-export default function (options = {}) {
+export function progress(options = {}) {
     return function (deck) {
         const parent = deck.parent;
 

package/{bespoke-plugins → bespoke/plugins}/bespoke-scale.js

@@ -1,4 +1,4 @@
-export default function (config) {
+export function scale (config) {
   return function (deck) {
     const parent = deck.parent;
       // slideHeight = config.slideHeight,