@farberg/reveal-template 1.1.36 → 1.1.38

package/css/dhbw.css

@@ -283,7 +283,7 @@ body {
   border-collapse: collapse;
   border-spacing: 0;
   font-size: 70%;
-
+  border: 1px solid #d0d0d0;
 }
 
 .reveal table th {
@@ -293,7 +293,13 @@ body {
 .reveal table th, .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid;
+  border: 1px solid #d0d0d0;
+}
+
+/* Zebra striping: alternating white / very light grey rows.
+   The toc_table has its own border/background rules, so exclude it. */
+.reveal table:not(.toc_table) tbody tr:nth-child(even) {
+  background-color: #fbfbfb;
 }
 
 .reveal table th[align="center"], .reveal table td[align="center"] {
@@ -304,10 +310,6 @@ body {
   text-align: right;
 }
 
-.reveal table tr:last-child td {
-  border-bottom: none;
-}
-
 .reveal sup {
   vertical-align: super;
 }

package/docs/00 - Introduction.md

@@ -19,21 +19,35 @@ kubectl apply -f https://raw.githubusercontent.com/strimzi/strimzi-kafka-operato
 docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t yourusername/yourcontainername:1.2.3 -t yourusername/yourcontainername:latest --push .
 ```
 
----
+```bash
+docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t yourusername/yourcontainername:1.2.3 -t yourusername/yourcontainername:latest --push .
+```
+<!-- .element: data-no-wrap -->
 
 ---
 ## Kafka Streams: Run It
 
 <pre class="dirtree" data-zipname="bla.zip" style="margin-left: 40px;">
 00 - Introduction.md
-npm.html
+test-code.c
 </pre>
 
 <pre class="dirtree" style="margin-left: 40px;">
 00 - Introduction.md
-npm.html
+test-code.c
 </pre>
 
+---
+# Table
+
+| Name         | Description                                                             |
+| ------------ | ----------------------------------------------------------------------- |
+| File sink    | Stores the output to a directory                                        |
+| Kafka sink   | Stores the output to one or more topics in Kafka                        |
+| Foreach sink | Runs arbitrary computation on each record                               |
+| Console sink | Prints to stdout (debug only, collects data in driver program)          |
+| Memory sink  | Stored as in-memory table (debug only, collects data in driver program) |
+
 ---
 ## Mermaid Example
 

package/docs/test-code.c

@@ -0,0 +1,7 @@
+#include <stdio.h>
+
+int main()
+{
+    printf("Hello, World!\n");
+    return 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farberg/reveal-template",
-  "version": "1.1.36",
+  "version": "1.1.38",
   "homepage": "https://github.com/pfisterer/reveal-template",
   "description": "Reveal.js template for Dennis' lectures",
   "main": "index.js",

package/plugins/reveal-plugin-dir-tree.js

@@ -486,8 +486,12 @@ const dirTreeFactory = ({ zip, strToU8 }) => ({
 		let modalRefs = null;
 
 		// View preferences persist across previews within a session.
-		const FONT_MIN = 11, FONT_MAX = 32, FONT_STEP = 2;
-		let previewFontPx = 16;
+		// FONT_FIT_MAX caps the automatic enlarge-to-fit for small files so a
+		// two-line file does not blow up to an absurd size; manual A+ can still
+		// climb to FONT_MAX.
+		const FONT_MIN = 11, FONT_MAX = 32, FONT_FIT_MAX = 28, FONT_STEP = 2;
+		const FONT_BASE = 16;
+		let previewFontPx = FONT_BASE;
 		let previewTheme = 'light';   // 'light' | 'dark'
 
 		function ensureModal() {
@@ -523,6 +527,32 @@ const dirTreeFactory = ({ zip, strToU8 }) => ({
 				themeBtn.textContent = previewTheme === 'dark' ? '☀ light' : '🌙 dark';
 			}
 
+			// Small files render a few short lines of fixed-size text marooned in a
+			// big modal, which reads as "tiny font in an undersized window". Scale
+			// the font UP so the content fills the available width/height — but only
+			// up (scale > 1), so large files that already fill the modal keep their
+			// comfortable base size. Measured at FONT_BASE, then capped at
+			// FONT_FIT_MAX so a two-liner doesn't balloon. Sets previewFontPx so the
+			// A−/A+ buttons continue from the fitted size.
+			function fitFontToContent() {
+				code.style.fontSize = FONT_BASE + 'px';
+				// scrollWidth/Height force a layout read of the content's natural size
+				// (white-space:pre means width is the longest line).
+				const contentW = code.scrollWidth;
+				const contentH = code.scrollHeight;
+				if (!contentW || !contentH) { applyView(); return; }
+				// Available space: body width is the modal's fixed width; for height
+				// the modal grows with content, so derive the ceiling from the
+				// viewport (overlay is fixed inset:0) minus the header, matching the
+				// modal's max-height:92vh with a little slack.
+				const availW = body.clientWidth;
+				const availH = overlay.clientHeight * 0.9 - header.offsetHeight;
+				const scale = Math.min(availW / contentW, availH / contentH);
+				if (scale > 1)
+					previewFontPx = Math.min(FONT_FIT_MAX, Math.floor(FONT_BASE * scale));
+				applyView();
+			}
+
 			const fontDecBtn = document.createElement('button');
 			fontDecBtn.classList.add('dirtree-modal-btn');
 			fontDecBtn.title = 'Decrease font size';
@@ -599,13 +629,16 @@ const dirTreeFactory = ({ zip, strToU8 }) => ({
 
 			applyView();   // initialise font-size, theme class and toggle label
 
-			modalRefs = { overlay, title, code, body, close, applyView };
+			modalRefs = { overlay, title, code, body, close, applyView, fitFontToContent };
 			return modalRefs;
 		}
 
 		function openPreview(filePath, fileName, ext) {
-			const { overlay, title, code, body, applyView } = ensureModal();
+			const { overlay, title, code, body, applyView, fitFontToContent } = ensureModal();
 			title.textContent = fileName;
+			// Re-fit each file from the base size rather than carrying over the last
+			// file's fitted size.
+			previewFontPx = FONT_BASE;
 			code.textContent = 'Loading…';
 			// Reset highlight state so the reused element can be re-highlighted.
 			code.removeAttribute('class');
@@ -631,6 +664,8 @@ const dirTreeFactory = ({ zip, strToU8 }) => ({
 						if (lang) code.classList.add('language-' + lang);
 						try { hljs.highlightElement(code); } catch (e) { /* leave as plain text */ }
 					}
+					// Enlarge small files to fill the modal (no-op for large files).
+					fitFontToContent();
 				})
 				.catch(err => { code.textContent = 'Failed to load file: ' + err.message; });
 		}

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

@@ -7,6 +7,15 @@ Parameters:
 - data-begin-nth: Start after the Nth occurrence of data-begin instead of the first (optional, 1-based)
 - data-end: End indicator in the file (optional)
 - data-link: Show a link to the file (optional)
+- data-no-wrap: Disable soft line wrapping; long lines scroll horizontally instead (optional)
+
+For inline markdown code fences, disable wrapping with a no-wrap class or a
+data-no-wrap attribute via reveal's element-attribute comment, e.g.
+
+```console
+199.72.81.55 - - [01/Jul/1995:00:00:01 -0400] "GET /history/apollo/ HTTP/1.0" 200 6245
+```
+<!-- .element: class="no-wrap" -->
 
 Example
 
@@ -98,6 +107,20 @@ function injectStyles() {
 			overflow-wrap: break-word;
 			word-break: normal;
 		}
+		/* Opt-out: with data-no-wrap (or a "no-wrap" class on the <pre>) long lines
+		   are kept on one line and the block scrolls horizontally instead. These
+		   blocks are never run through wrapCodeLines/decorateWrappedLines, so the
+		   .cl hang-indent and wrap markers above never apply to them. Declared
+		   after the wrapping rules so equal-specificity selectors win on order. */
+		.reveal pre.with-copy-btn.no-wrap,
+		.reveal pre.with-copy-btn.no-wrap code {
+			white-space: pre;
+			overflow-wrap: normal;
+			word-break: normal;
+		}
+		.reveal pre.with-copy-btn.no-wrap {
+			overflow-x: auto;
+		}
 		/* Each logical source line becomes its own block so wrapped continuation
 		   rows can be hang-indented (text-indent pulls the first row back to the
 		   margin; padding-left indents everything else). padding-right reserves
@@ -328,7 +351,14 @@ export default () => {
 						// Capture raw source before highlighting/line-wrapping touches the DOM.
 						if (pre) pre.__rawCode = el.textContent
 						highlightPlugin.hljs.highlightElement(el);
-						wrapCodeLines(el);
+						// Opt-out authored on the <pre> or <code> — either a "no-wrap"
+						// class or a data-no-wrap attribute. Reveal's markdown
+						// `<!-- .element: ... -->` may land the attribute on either
+						// element, so check both.
+						const optOut = n => n && (n.classList.contains('no-wrap') || n.hasAttribute('data-no-wrap'))
+						const noWrap = optOut(pre) || optOut(el)
+						if (noWrap) pre && pre.classList.add('no-wrap')
+						else wrapCodeLines(el);
 						addCopyButton(pre);
 					}
 				}
@@ -342,6 +372,7 @@ export default () => {
 					let endMarker = el.getAttribute("data-end")
 					let showLink = el.hasAttribute("data-link")
 					let outdentCode = el.hasAttribute("data-outdent")
+					let noWrap = el.hasAttribute("data-no-wrap")
 
 					//console.log(`language = ${language}, url = ${url}, beginMarker = ${beginMarker}, endMarker = ${endMarker}, showLink = ${showLink} `)
 
@@ -377,7 +408,8 @@ export default () => {
 						if (language !== 'mermaid') {
 							const codeEl = newEl.querySelector('code') ?? newEl
 							highlightPlugin.hljs.highlightElement(codeEl)
-							wrapCodeLines(codeEl)
+							if (noWrap) newEl.classList.add('no-wrap')
+							else wrapCodeLines(codeEl)
 							addCopyButton(newEl)
 						}
 					} catch (err) {