Update theme cdn links using devDependencies

center-key · Nov 6, 2023 · 5dca2b1 · 5dca2b1
1 parent 14705f2
commit 5dca2b1
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,10 @@
    "license": "MIT",
    "main": "docs/presentation-template.html",
    "style": "docs/presentation-template.css",
-   "repository": "github:center-key/reveal.js-local",
+   "repository": {
+      "type": "git",
+      "url": "git+https://github.com/center-key/reveal.js-local.git"
+   },
    "homepage": "https://github.com/center-key/reveal.js-local",
    "bugs": "https://github.com/center-key/reveal.js-local/issues",
    "docs": "https://github.com/center-key/reveal.js-local#readme",
@@ -27,18 +30,6 @@
       "browser": true,
       "devel": true,
       "globals": {
-         "themes": false,
-         "selectedTheme": false,
-         "baseFontSizePercent": false,
-         "backgroundTypeToUse": false,
-         "backgroundColor": false,
-         "backgroundGradient": false,
-         "backgroundImages": false,
-         "selectedBackgroundImage": false,
-         "syntaxHighlightingTheme": false,
-         "autoAdvance": false,
-         "autoAdvanceSeconds": false,
-         "presentationCustomSetup": false,
          "dna": false,
          "Reveal": false
       }
@@ -51,8 +42,8 @@
          "jshint src"
       ],
       "build": [
-         "replacer src build --pkg",
-         "replacer build --ext=.html docs --pkg --find=./reveal.js-local --replacement=https://cdn.jsdelivr.net/gh/center-key/reveal.js-local@{{pkg.version{{pipe}}minor-version}}/docs/reveal.js-local",
+         "replacer src build",
+         "replacer build --ext=.html docs --find=./reveal.js-local --replacement=https://cdn.jsdelivr.net/gh/center-key/reveal.js-local@{{pkg.version{{pipe}}minor-version}}/docs/reveal.js-local",
          "add-dist-header build --ext=.css,.js docs"
       ]
    },
@@ -62,18 +53,18 @@
    },
    "devDependencies": {
       "@fortawesome/fontawesome-free": "~6.4",
-      "add-dist-header": "~1.2",
-      "chart.js": "~4.3",
+      "add-dist-header": "~1.3",
+      "chart.js": "~4.4",
       "chartjs-plugin-annotation": "~3.0",
       "chartjs-plugin-datalabels": "~2.2",
       "dna-engine": "~3.0",
-      "highlight.js": "~11.8",
+      "highlight.js": "~11.9",
       "hljs-enhance": "~2.0",
       "jshint": "~2.13",
       "replacer-util": "~1.2",
-      "reveal.js": "~4.5",
+      "reveal.js": "~5.0",
       "rimraf": "~5.0",
       "run-scripts-util": "~1.2",
-      "w3c-html-validator": "~1.4"
+      "w3c-html-validator": "~1.6"
    }
 }
diff --git a/src/presentation-template.html b/src/presentation-template.html
@@ -74,14 +74,14 @@
    const autoAdvance =             false;
    const autoAdvanceSeconds =      10;
    Chart.register(ChartDataLabels);
-   Chart.register(annotationPlugin);
+   Chart.register(globalThis['chartjs-plugin-annotation']);
    Chart.defaults.font.size =                  20;
    Chart.defaults.color =                      'white';
    Chart.defaults.plugins.datalabels.display = false;
 </script>
 
 <!-- Custom JavaScript -->
-<script id=presentation-custom-js>
+<script id=presentation-custom-setup>
    const presentationCustomSetup = () => {
       console.log('Presentation is ready.');
       // Put custom code here.
@@ -172,23 +172,24 @@ <h4>Header 4</h4>
 <!-- Slide - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 <section>
    <h2>Building a Bullet List</h2>
+   <p class=fragment><code><b>class=fragment</b></code></p>
    <ul>
       <li class=fragment>HTML5</li>
       <li class=fragment>CSS3</li>
       <li class=fragment>JavaScript</li>
    </ul>
-   <p class=fragment>Hover over the HTML to highlight tags.</p>
+   <br><br>
    <figure>
       <pre><code class=language-html>
          &lt;!-- Slide --&gt;
          &lt;section&gt;
             &lt;h2&gt;Building a Bullet List&lt;/h2&gt;
+            &lt;p class=fragment&gt;&lt;code&gt;&lt;b&gt;class=fragment&lt;/b&gt;&lt;/code&gt;&lt;/p&gt;
             &lt;ul&gt;
                &lt;li class=fragment&gt;HTML5&lt;/li&gt;
                &lt;li class=fragment&gt;CSS3&lt;/li&gt;
                &lt;li class=fragment&gt;JavaScript&lt;/li&gt;
             &lt;/ul&gt;
-            &lt;p class=fragment&gt;Hover over the HTML to highlight tags.&lt;/p&gt;
          &lt;/section&gt;
       </code></pre>
    </figure>

diff --git a/src/reveal.js-local.js b/src/reveal.js-local.js
@@ -1,26 +1,47 @@
 // reveal.js-local -- MIT
 
+const settings = {
+   // jshint ignore:start
+   themes,
+   selectedTheme,
+   baseFontSizePercent,
+   backgroundTypeToUse,
+   backgroundColor,
+   backgroundGradient,
+   backgroundImages,
+   selectedBackgroundImage,
+   syntaxHighlightingTheme,
+   autoAdvance,
+   autoAdvanceSeconds,
+   presentationCustomSetup,  //see: <script id=presentation-custom-setup>
+   // jshint ignore:end
+   };
+
 const revealJsLocal = {
    version: '{{pkg.version}}',
    themes() {
+      const version = {
+         reveal:    '{{pkg.devDependencies.reveal-js|version}}',
+         highlight: '{{pkg.devDependencies.highlight-js|version}}',
+         };
       const addCss = (url) => {
          const link = dna.dom.create('link', { rel: 'stylesheet', type: 'text/css', href: url });
          link.rel =   'stylesheet';
          globalThis.document.head.appendChild(link);
          };
-      const theme =          themes[selectedTheme];
-      const highlightTheme = dna.util.toKebab(syntaxHighlightingTheme);
-      addCss(`https://cdn.jsdelivr.net/npm/reveal.js@4.5/dist/theme/${theme}.css`);
-      addCss(`https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8/build/styles/${highlightTheme}.min.css`);
+      const theme =          settings.themes[settings.selectedTheme];
+      const highlightTheme = dna.util.toKebab(settings.syntaxHighlightingTheme);
+      addCss(`https://cdn.jsdelivr.net/npm/reveal.js@${version.reveal}/dist/theme/${theme}.css`);  //!!!!!! VERSION
+      addCss(`https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@${version.highlight}/build/styles/${highlightTheme}.min.css`);
       },
    background() {
       globalThis.document.body.style.backgroundSize =     'cover';
       globalThis.document.body.style.backgroundPosition = 'center center';
-      const url = backgroundImages[selectedBackgroundImage];
-      if (backgroundTypeToUse.color)
-         globalThis.document.body.style.backgroundColor = backgroundColor;
-      else if (backgroundTypeToUse.gradient)
-         globalThis.document.body.style.backgroundImage = backgroundGradient;
+      const url = settings.backgroundImages[settings.selectedBackgroundImage];
+      if (settings.backgroundTypeToUse.color)
+         globalThis.document.body.style.backgroundColor = settings.backgroundColor;
+      else if (settings.backgroundTypeToUse.gradient)
+         globalThis.document.body.style.backgroundImage = settings.backgroundGradient;
       else
          globalThis.document.body.style.backgroundImage = 'url(' + url + ')';
       },
@@ -34,15 +55,15 @@ const revealJsLocal = {
    links() {
       const links = globalThis.document.querySelectorAll('a.external-site, .external-site a');
       links.forEach(link => link.target = '_blank');
-      // <span class=display-address data-name=sales data-domain=ibm.com></span>
+      // Usage: <span class=display-address data-name=sales data-domain=ibm.com></span>
       const elems = [...globalThis.document.getElementsByClassName('display-address')];
       const at = '<span>' + String.fromCharCode(64) + '</span>';
       elems.forEach(elem => elem.innerHTML = elem.dataset.name + at + elem.dataset.domain);
       },
    images() {
-      const folder = globalThis.window.location.pathname.split('/').slice(0, -1).join('/');
-      console.log('Images folder:');
-      console.log('%c' + folder + '/assets', 'font-family: monospace;');
+      const folder =   globalThis.window.location.pathname.split('/').slice(0, -1).join('/');
+      const pathCss = 'font-family: monospace; font-size: 16px;';
+      console.log('Images folder: %c' + folder + '/assets', pathCss);
       const configureImage = (img) => {
          if (!img.src.includes('//'))
             img.src = folder + img.src;
@@ -107,19 +128,19 @@ const revealJsLocal = {
       },
    reveal() {
       const config = {  //see: https://revealjs.com/config
-         autoSlide:        autoAdvance ? autoAdvanceSeconds * 1000 : 0,  //milliseconds to automatically advance slide (0 = disable)
+         autoSlide:        settings.autoAdvance ? settings.autoAdvanceSeconds * 1000 : 0,  //milliseconds to automatically advance slide (0 = disable)
          controls:         true,
          controlsTutorial: true,
          hash:             false,
          loop:             false,
          progress:         true,
          };
-      Reveal.initialize(config).then(presentationCustomSetup);
+      Reveal.initialize(config).then(settings.presentationCustomSetup);
       },
    setup() {
       const logStyle = 'font-size: 2rem; font-weight: bold; color: teal;';
       console.log('%creveal.js-local v' + revealJsLocal.version, logStyle);
-      const fontSize = String(baseFontSizePercent) + '%';
+      const fontSize = String(settings.baseFontSizePercent) + '%';
       globalThis.document.querySelector('.reveal .slides').style.fontSize = fontSize;
       revealJsLocal.themes();
       revealJsLocal.background();