@farberg/reveal-template 1.1.15 → 1.1.16

package/css/dhbw.css

@@ -4,19 +4,19 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 
 /* https://github.com/hakimel/reveal.js/issues/1279 : data-state="dim-background" */
 html.dim-background-light .slide-background {
-    opacity: 0.4 !important;
+  opacity: 0.4 !important;
 }
 
 html.dim-background .slide-background {
-    opacity: 0.2 !important;
+  opacity: 0.2 !important;
 }
 
 html.dim-background-medium .slide-background {
-    opacity: 0.1 !important;
+  opacity: 0.1 !important;
 }
 
 html.dim-background-strong .slide-background {
-    opacity: 0.05 !important;
+  opacity: 0.05 !important;
 }
 
 /*********************************************
@@ -33,7 +33,8 @@ body {
   font-size: 33px;
   font-weight: normal;
   /* color: #222; */
-  color: #4e565c; /* was #4e565c */
+  color: #4e565c;
+  /* was #4e565c */
 }
 
 ::selection {
@@ -75,8 +76,8 @@ body {
 }
 
 .reveal h2 {
-   font-size: 1.5em;
-   padding-bottom: 5px;
+  font-size: 1.5em;
+  padding-bottom: 5px;
 }
 
 .reveal h3 {
@@ -134,7 +135,8 @@ body {
 }
 
 .reveal ol li {
-  color: #000000; /* was #000000 */
+  color: #000000;
+  /* was #000000 */
   font-size: 90%;
   margin-top: 0em;
 }
@@ -147,7 +149,8 @@ body {
 }
 
 .reveal ul li {
-  color: #000000; /* was #000000 */
+  color: #000000;
+  /* was #000000 */
   font-size: 90%;
   margin-top: 0em;
   margin-bottom: 0.5em;
@@ -260,6 +263,18 @@ body {
   color: #DCDCDC;
 }
 
+.reveal code.language-mermaid,
+.reveal pre code.language-mermaid,
+.reveal code.mermaid,
+.reveal pre code.mermaid {
+  background: transparent !important;
+}
+
+.reveal pre.code-wrapper:has(> code.mermaid) {
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
 .reveal table {
   margin: auto;
   border-collapse: collapse;
@@ -466,11 +481,11 @@ right50transparentbox {
  *********************************************/
 
 .solution {
-    display: none !important;
+  display: none !important;
 }
 
 .solutionvisible {
-    display: unset !important;
+  display: unset !important;
 }
 
 /*********************************************
@@ -481,16 +496,16 @@ right50transparentbox {
   border-bottom: 0.1px dotted rgb(198, 198, 198) !important;
 }
 
-.toc_tr_chapter  td {
+.toc_tr_chapter td {
   border-bottom: 1px solid black !important;
   border-top: 1px solid black !important;
 }
 
-.toc_table  tr:last-of-type {
+.toc_table tr:last-of-type {
   border-bottom: 1px solid black !important;
 }
 
-tr > tr:first-of-type {
+tr>tr:first-of-type {
   border-top: 1px solid black !important;
 }
 
@@ -515,36 +530,39 @@ tr > tr:first-of-type {
 }
 
 credits {
-	visibility: hidden;
+  visibility: hidden;
 }
 
 /* Credits Dennis */
 
 attribution {
-	position: absolute !important;
-	/* display: block; */
-	display: table-cell !important;
-	vertical-align: middle !important;
-	right: 35px;
-	bottom: 8px;
-	height: 22px;
-	z-index: 200;
-	font-size: 12px;
-	text-align: right;
+  position: absolute !important;
+  /* display: block; */
+  display: table-cell !important;
+  vertical-align: middle !important;
+  right: 35px;
+  bottom: 8px;
+  height: 22px;
+  z-index: 200;
+  font-size: 12px;
+  text-align: right;
   color: #4e565c;
   background-color: rgba(0, 0, 0, 0.4);
 }
-attribution > span {
-	padding-left: 5px !important;
-	padding-right: 5px !important;
-	line-height: 22px !important;
+
+attribution>span {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+  line-height: 22px !important;
 }
+
 attribution a {
-	font-size: 12px;
+  font-size: 12px;
   color: #4e565c;
 }
+
 attribution a:visited {
-	font-size: 12px;
+  font-size: 12px;
   color: #4e565c;
 }
 
@@ -577,85 +595,85 @@ attribution a:visited {
 /** Dirtree plugin */
 
 ul.dirtree {
-			text-indent: 0;
-			margin: 0px 0px 0px 20px;
-			padding: 0;
-			list-style: none;
-			line-height: 1.5em;
-			font-family: monospace;
-
-			list-style-type: none;
-			margin-block-start: 0;
-			margin-block-end: 0;
-			margin-inline-start: 0px;
-			margin-inline-end: 0px;
-			padding-inline-start: 0;
-		}
-
-		ul.dirtree li.dirtree {
-			list-style-type: none;
-			display: list-item;
-			text-indent: 0;
-			padding: 0;
-			margin-bottom: 0;
-			margin-top: 0;
-			font-size: 16px;
-			position: relative;
-		}
-
-		ul.dirtree li.dirtree:before {
-			position: absolute;
-			left: -15px;
-			top: 0px;
-			content: "" !important;
-			display: block;
-			border-left: 1px solid #ddd;
-			height: 1em;
-			border-bottom: 1px solid #ddd;
-			width: 10px;
-		}
-
-		ul.dirtree li.dirtree:after {
-			position: absolute;
-			left: -15px;
-			bottom: -7px;
-			content: "";
-			display: block;
-			border-left: 1px solid #ddd;
-			height: 100%;
-		}
-
-		ul.dirtree li.root {
-			margin: 0px 0px 0px -20px;
-			padding: 0;
-			padding-left: 20px;
-		}
-
-		ul.dirtree li.root:before {
-			display: none;
-		}
-
-		ul.dirtree li.root:after {
-			display: none;
-		}
-
-		ul.dirtree li.dirtree:last-child:after {
-			display: none;
-		}
-
-		ul.dirtree ul li {
-			margin-left: 0;
-			padding: 0;
-		}
-
-		ul.dirtree ul ul li {
-			margin-left: 0;
-			padding: 0;
-		}
-
-		ul.dirtree ul ul ul li {
-			margin-left: 0;
-			padding: 0;
-    }
-    
-    /** Dirtree plugin: end */
+  text-indent: 0;
+  margin: 0px 0px 0px 20px;
+  padding: 0;
+  list-style: none;
+  line-height: 1.5em;
+  font-family: monospace;
+
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+  padding-inline-start: 0;
+}
+
+ul.dirtree li.dirtree {
+  list-style-type: none;
+  display: list-item;
+  text-indent: 0;
+  padding: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+  font-size: 16px;
+  position: relative;
+}
+
+ul.dirtree li.dirtree:before {
+  position: absolute;
+  left: -15px;
+  top: 0px;
+  content: "" !important;
+  display: block;
+  border-left: 1px solid #ddd;
+  height: 1em;
+  border-bottom: 1px solid #ddd;
+  width: 10px;
+}
+
+ul.dirtree li.dirtree:after {
+  position: absolute;
+  left: -15px;
+  bottom: -7px;
+  content: "";
+  display: block;
+  border-left: 1px solid #ddd;
+  height: 100%;
+}
+
+ul.dirtree li.root {
+  margin: 0px 0px 0px -20px;
+  padding: 0;
+  padding-left: 20px;
+}
+
+ul.dirtree li.root:before {
+  display: none;
+}
+
+ul.dirtree li.root:after {
+  display: none;
+}
+
+ul.dirtree li.dirtree:last-child:after {
+  display: none;
+}
+
+ul.dirtree ul li {
+  margin-left: 0;
+  padding: 0;
+}
+
+ul.dirtree ul ul li {
+  margin-left: 0;
+  padding: 0;
+}
+
+ul.dirtree ul ul ul li {
+  margin-left: 0;
+  padding: 0;
+}
+
+/** Dirtree plugin: end */

package/docs/00 - Introduction.md

@@ -3,6 +3,13 @@
 ---
 ## Some Heading
 
+```mermaid
+graph LR
+    A["frontend<br/>0–120ms"] --> B["auth<br/>5–30ms"]
+    A --> C["data<br/>35–115ms"]
+    C --> D["database<br/>40–110ms"]
+```
+
 Some text
 - This is an example presentation
 - This is an example presentation

package/docs/local-dev.html

@@ -25,16 +25,6 @@
 		<div class="slides">
 			<section data-markdown>
 				<textarea data-template>
-## Gateway API
-
-```mermaid
-graph LR
-    GWC[GatewayClass] -->|implemented by| Ctrl[Controller]
-    GW[Gateway] -->|references| GWC
-    Route[HTTPRoute] -->|attaches to| GW
-    Route -->|routes to| SvcA[Service A]
-    Route -->|routes to| SvcB[Service B]
-```
 				</textarea>
 			</section>
 		</div>

package/docs/npm.html

@@ -4,15 +4,22 @@
 	<meta charset="utf-8">
 	<meta name="apple-mobile-web-app-capable" content="yes" />
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, minimal-ui">
+	<meta name="viewport"
+		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, minimal-ui">
 
 	<link rel="stylesheet" href="node_modules/reveal.js/dist/reveal.css">
 	<link rel="stylesheet" href="node_modules/reveal.js/plugin/highlight/zenburn.css">
 	<link rel="stylesheet" href="node_modules/@farberg/reveal-template/css/dhbw.css" id="theme">
 
 	<script type="module">
-		import { initReveal } from 'node_modules/@farberg/reveal-template/init-reveal.js'
-		initReveal("00 - Introduction.md");
+		import { initReveal } from '../init-reveal.js'
+		initReveal({
+			jsPrefixPath: "../",
+			cssPrefixPath: "../",
+			cssThemePrefixPath: "../",
+			revealPath: "../node_modules/reveal.js/",
+			verbose: true
+		});
 	</script>
 </head>
 

package/init-reveal.js

@@ -10,7 +10,6 @@ import ToggleSolutionsPlugin from './plugins/reveal-plugin-toggle-solutions.js';
 import DirTreePlugin from './plugins/reveal-plugin-dir-tree.js';
 import PrefixUrlPlugin from './plugins/reveal-plugin-prefix-with-base-url.js';
 import AsciinemaPlugin from './plugins/reveal-plugin-asciinema.js';
-import MermaidPlugin from './plugins/reveal-plugin-mermaid.js';
 
 const defaultOptions = {
 	revealOptions: {},
@@ -30,7 +29,8 @@ const externalJsLibs = [
 	'node_modules/asciinema-player/dist/bundle/asciinema-player.min.js',
 	'node_modules/reveal.js-plugins/customcontrols/plugin.js',
 	'node_modules/reveal.js-plugins/chalkboard/plugin.js',
-	'node_modules/@fortawesome/fontawesome-free/js/all.min.js'
+	'node_modules/@fortawesome/fontawesome-free/js/all.min.js',
+	'node_modules/reveal.js-mermaid-plugin/plugin/mermaid/mermaid.js'
 ]
 
 const extraStylesheets = [
@@ -50,7 +50,7 @@ const extraThemeCssStylesheets = [
 const defaultDennisPlugins = [
 	ShowCodeSnippets, ShowToc, ShowAttribution, ShowQrCode, ShowTitle,
 	ModifyFontSize, ShowHTMLExample, ToggleSolutionsPlugin, DirTreePlugin,
-	PrefixUrlPlugin, AsciinemaPlugin, MermaidPlugin
+	PrefixUrlPlugin, AsciinemaPlugin
 ]
 
 const defaultRevealOptions = {
@@ -73,6 +73,10 @@ const defaultRevealOptions = {
 	markdown: {
 		smartypants: true,
 	},
+	// Disable automatic hljs; show-code-snippets calls hljs manually per element
+	highlight: {
+		highlightOnLoad: false
+	},
 	chalkboard: {
 		boardmarkerWidth: 2,
 		chalkWidth: 3,
@@ -99,6 +103,26 @@ const defaultRevealOptions = {
 
 	// Factor of the display size that should remain empty around the content
 	margin: 0.05,
+
+	// reveal.js-mermaid-plugin config (passed to mermaid.initialize)
+	mermaid: {
+		theme: 'base',
+		fontSize: 13,
+		themeVariables: {
+			textColor: '#000',
+			primaryColor: '#e2001a',
+			primaryTextColor: '#ffff',
+			noteBkgColor: '#ededeb',
+			fontFamily: 'arial',
+			lineColor: '#5c6971',
+			primaryBorderColor: '#5c6971',
+			secondaryColor: '#5c6971',
+			secondaryTextColor: '#000'
+		},
+		sequence: { mirrorActors: false, useMaxWidth: true },
+		flowchart: { useMaxWidth: true, padding: 6 }
+	},
+
 	// Leave here
 	plugins: []
 }
@@ -208,7 +232,7 @@ export function initReveal(opts) {
 		addCssDependencies(options, extraStylesheets, extraThemeCssStylesheets),
 		addPrintStylesheetIfUrlContainsPrintPdf(),
 		windowOnLoadPromise()
-	]).then(values => {
+	]).then(async values => {
 		//Get the first element from the array, this is the Reveal module
 		const modules = values[0].map(m => m.default)
 		const Reveal = modules.shift();
@@ -230,6 +254,7 @@ export function initReveal(opts) {
 				...modules,
 				...defaultDennisPlugins,
 				...finalOptions.plugins,
+				RevealMermaid,
 				RevealChalkboard,
 				RevealCustomControls
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farberg/reveal-template",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "homepage": "https://github.com/pfisterer/reveal-template",
   "description": "Reveal.js template for Dennis' lectures",
   "main": "index.js",
@@ -15,6 +15,7 @@
   "author": "Dennis Pfisterer, http://dennis-pfisterer.de",
   "license": "Apache License 2.0",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "asciinema-player": "^3.15.1",
     "connect": "^3.7.0",
     "easyqrcodejs": "^4.6.2",
@@ -24,8 +25,8 @@
     "pdf-merger-js": "^5.1.2",
     "puppeteer": "^24.42.0",
     "reveal.js": "^6.0.1",
-    "serve-static": "^2.2.1",
-    "@fortawesome/fontawesome-free": "^7.2.0",
-    "reveal.js-plugins": "^4.6.0"
+    "reveal.js-mermaid-plugin": "^11.12.3",
+    "reveal.js-plugins": "^4.6.0",
+    "serve-static": "^2.2.1"
   }
 }

package/plugins/reveal-plugin-show-code-snippets.js

@@ -121,7 +121,8 @@ export default () => {
 							code = outdent(code)
 
 						const newEl = showCode(el, language, code, showLink ? url : null, outdent)
-						highlightPlugin.hljs.highlightElement(newEl)
+						if (language !== 'mermaid')
+							highlightPlugin.hljs.highlightElement(newEl)
 					} catch (err) {
 						console.error(`show-code-snippets: failed to load ${url}:`, err)
 						showError(el, `Failed to load ${url}: ${err.message}`)

package/plugins/reveal-plugin-mermaid.js

@@ -1,143 +0,0 @@
-// When installed as an npm package the plugin lives at node_modules/@farberg/reveal-template/plugins/
-// and mermaid is 3 levels up. When running from the template root directly it is 1 level up.
-const mermaidUrl = new URL(
-	new URL(import.meta.url).pathname.includes('/node_modules/')
-		? '../../../mermaid/dist/mermaid.esm.min.mjs'
-		: '../node_modules/mermaid/dist/mermaid.esm.min.mjs',
-	import.meta.url
-).href;
-
-export default {
-	id: 'mermaid',
-	init: async (deck) => {
-		const { default: mermaid } = await import(mermaidUrl);
-		mermaid.initialize({
-			'startOnLoad': false,
-			'theme': 'base',
-			'fontSize': 13,
-			'themeVariables': {
-				'textColor': '#000',
-				'primaryColor': '#e2001a',
-				'primaryTextColor': '#ffff',
-				'noteBkgColor': '#ededeb',
-				'fontFamily': 'arial',
-				'lineColor': '#5c6971',
-				'primaryBorderColor': '#5c6971',
-				'secondaryColor': '#5c6971',
-				'secondaryTextColor': '#000'
-			},
-			'sequence': {
-				'mirrorActors': false,
-				'useMaxWidth': true
-			},
-			'flowchart': {
-				'useMaxWidth': true,
-				'padding': 6
-			}
-		});
-
-		function fixSvgScaling(el) {
-			el.querySelectorAll('.mermaid svg').forEach(svg => {
-				// Ensure viewBox so width:100% scales content proportionally
-				if (!svg.getAttribute('viewBox')) {
-					const w = parseFloat(svg.getAttribute('width'));
-					const h = parseFloat(svg.getAttribute('height'));
-					if (w && h) svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-				}
-				svg.setAttribute('width', '100%');
-				svg.removeAttribute('height');
-				svg.style.maxWidth = '100%';
-				svg.style.width = '100%';
-				svg.style.height = 'auto';
-
-				// mermaid v11 measures text before the document font is loaded,
-				// producing foreignObjects that are too narrow for the actual rendered text.
-				// Measure the real content width and expand each foreignObject to fit,
-				// then shift the label group by half the difference to keep it centered.
-				svg.querySelectorAll('foreignObject').forEach(fo => {
-					fo.setAttribute('overflow', 'visible');
-					const inner = fo.firstElementChild;
-					if (!inner) return;
-					const actualWidth = inner.scrollWidth;
-					const foWidth = parseFloat(fo.getAttribute('width')) || 0;
-					if (actualWidth > foWidth) {
-						const extra = actualWidth - foWidth;
-						fo.setAttribute('width', actualWidth);
-						const labelG = fo.parentElement;
-						if (labelG && labelG.hasAttribute('transform')) {
-							const m = labelG.getAttribute('transform')
-								.match(/translate\((-?[\d.]+),\s*(-?[\d.]+)\)/);
-							if (m) {
-								labelG.setAttribute('transform',
-									`translate(${parseFloat(m[1]) - extra / 2}, ${m[2]})`);
-							}
-						}
-					}
-				});
-			});
-		}
-
-		async function handle(el) {
-			// Convert ```mermaid code blocks to .mermaid elements.
-			// highlight.js runs first: adds <span> tags and encodes --> as &gt;.
-			// textContent strips spans and decodes HTML entities back to raw mermaid source.
-			el.querySelectorAll('code.mermaid').forEach(code => {
-				const oldPre = code.parentElement;
-				if (oldPre.classList.contains('mermaid')) return;
-				const newPre = document.createElement('pre');
-				newPre.className = 'mermaid';
-				newPre.textContent = code.textContent;
-				oldPre.replaceWith(newPre);
-			});
-
-			// Yield so DOM mutations are flushed before mermaid reads them
-			await new Promise(resolve => requestAnimationFrame(resolve));
-
-			// Skip elements already rendered (contain an SVG)
-			const unrendered = [...el.querySelectorAll('.mermaid')].filter(
-				node => !node.querySelector('svg') && node.textContent.trim().length > 0
-			);
-			if (unrendered.length === 0) return;
-
-			await mermaid.run({ nodes: unrendered, suppressErrors: true });
-			fixSvgScaling(el);
-		}
-
-		deck.on('ready', event => {
-			const style = document.createElement("style");
-			style.innerHTML = `
-			  pre.mermaid {
-				all: revert;
-				padding: 10px;
-				border-radius: 10px;
-				border: 1px solid #e0e0e0;
-				box-shadow: none !important;
-				text-align: center;
-				overflow: visible;
-			  }
-			  .mermaid svg {
-				max-width: 100%;
-				height: auto;
-			  }
-			  .mermaid svg foreignObject {
-				overflow: visible;
-			  }
-			  .mermaid svg foreignObject * {
-				font-size: 13px !important;
-				font-family: arial, sans-serif !important;
-				line-height: 1.5 !important;
-			  }
-			`;
-			document.head.appendChild(style);
-
-			const print = window.location.search.match(/print-pdf/gi);
-			if (print) {
-				console.log("print-pdf detected, rendering mermaid diagrams");
-				handle(document);
-			} else {
-				deck.addEventListener('slidechanged', e => handle(e.currentSlide));
-				handle(event.currentSlide);
-			}
-		});
-	}
-}