@farberg/reveal-template 1.1.30 → 1.1.32

package/docs/00 - Introduction.md

@@ -7,6 +7,18 @@
 
 <ul class="menu"><ul>
 
+---
+## Code Example
+
+```bash
+# Create a Kafka cluster using the operator
+kubectl apply -f https://raw.githubusercontent.com/strimzi/strimzi-kafka-operator/refs/heads/main/examples/kafka/kafka-ephemeral.yaml
+```
+
+```bash
+docker buildx build --platform linux/amd64,linux/arm64,linux/arm/v7 -t yourusername/yourcontainername:1.2.3 -t yourusername/yourcontainername:latest --push .
+```
+
 ---
 ## Mermaid Example
 

package/package.json

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

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

@@ -10,9 +10,9 @@ Parameters:
 
 Example
 
-<a 	data-code='bash' 
-	data-begin="# Begin indicator in the file" 
-	data-end="# End indicator in the file" 
+<a 	data-code='bash'
+	data-begin="# Begin indicator in the file"
+	data-end="# End indicator in the file"
 	data-link
 	href="link/to/the/file.sh">Source code</a>
 */
@@ -26,6 +26,9 @@ function showError(el, err) {
 function showCode(el, language, code, link, outdent) {
 	var newEl = document.createElement('pre');
 	newEl.setAttribute('class', `language-${language}`);
+	// Keep the exact, un-escaped source so the copy button can reproduce it
+	// verbatim regardless of how we later restructure the DOM for display.
+	newEl.__rawCode = code
 	//Replace special chars
 	code = code.replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;")
 
@@ -82,6 +85,49 @@ function injectStyles() {
 		pre.with-copy-btn {
 			position: relative;
 		}
+		/* Soft-wrap long lines like VS Code's word wrap. white-space:pre-wrap is
+		   a purely visual wrap: it does NOT insert real newlines into the text.
+		   overflow-wrap:break-word prefers breaking at whitespace and only splits a
+		   word when that single token is itself too long to fit (long URLs / base64
+		   / paths). Unlike "anywhere", it does not snap mid-word when a whitespace
+		   break is available. Copy fidelity is handled separately (see
+		   addCopyButton / wrapCodeLines), so wrapping never leaks into copied text. */
+		.reveal pre.with-copy-btn,
+		.reveal pre.with-copy-btn code {
+			white-space: pre-wrap;
+			overflow-wrap: break-word;
+			word-break: normal;
+		}
+		/* 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
+		   room for the end-of-row wrap marker (see decorateWrappedLines): text
+		   wraps before that zone, so the absolutely-positioned marker lands inside
+		   the box instead of overflowing and triggering a horizontal scrollbar. */
+		.reveal pre.with-copy-btn code .cl {
+			display: block;
+			position: relative;
+			padding-left: 2.5ch;
+			padding-right: 1.5ch;
+			text-indent: -2.5ch;
+		}
+		/* Preserve the height of blank lines. Generated content is excluded from
+		   selection/copy, so the zero-width space never reaches the clipboard. */
+		.reveal pre.with-copy-btn code .cl:empty::before {
+			content: "\\200b";
+		}
+		/* Continuation marker placed at the end of each row that soft-wraps (see
+		   decorateWrappedLines). The horizontal/vertical offset is set inline per
+		   row; user-select:none keeps it out of native select+copy. */
+		.reveal pre.with-copy-btn code .wrap-marker {
+			position: absolute;
+			text-indent: 0;
+			font-style: normal;
+			opacity: 0.4;
+			pointer-events: none;
+			user-select: none;
+			-webkit-user-select: none;
+		}
 		.copy-code-btn {
 			position: absolute;
 			top: 0.4em;
@@ -114,6 +160,89 @@ function injectStyles() {
 	document.head.appendChild(style);
 }
 
+// Wrap each logical line of a (already highlighted) <code> element in its own
+// <span class="cl"> block. hljs emits a single run of HTML with "\n"
+// separators and token <span>s that may straddle newlines, so we tokenize the
+// markup and re-open any spans still active when a line ends.
+function wrapCodeLines(codeEl) {
+	const html = codeEl.innerHTML
+	const tokenRe = /(<\/?[^>]+>)|([^<]+)/g
+	let m
+	let open = []           // stack of currently-open tag strings (hljs uses <span>)
+	let buf = ''
+	let lines = []
+	const closers = () => open.map(() => '</span>').join('')
+	const reopen = () => open.join('')
+
+	while ((m = tokenRe.exec(html)) !== null) {
+		if (m[1]) {
+			const tag = m[1]
+			if (tag[1] === '/') { open.pop(); buf += tag }
+			else if (tag.endsWith('/>')) { buf += tag }   // self-closing (rare)
+			else { open.push(tag); buf += tag }
+		} else {
+			const parts = m[2].split('\n')
+			for (let i = 0; i < parts.length; i++) {
+				if (i > 0) {
+					buf += closers()        // close spans before the line break
+					lines.push(buf)
+					buf = reopen()          // re-open them on the next line
+				}
+				buf += parts[i]
+			}
+		}
+	}
+	buf += closers()
+	lines.push(buf)
+
+	codeEl.innerHTML = lines.map(l => `<span class="cl">${l}</span>`).join('')
+}
+
+// Place a "↴" marker at the end of every row that soft-wraps (i.e. every visual
+// row except the last). CSS has no selector for soft-wrap rows, so we measure
+// them with a Range. The deck is rendered at a fixed layout width and merely
+// CSS-scaled, so wrap positions are stable; we divide measured offsets by the
+// current scale to get layout pixels.
+function decorateWrappedLines(root, scale) {
+	if (!root) return
+	const s = scale || 1
+	for (const line of root.querySelectorAll('pre.with-copy-btn code .cl')) {
+		// Idempotent: clear any decoration from a previous pass before measuring.
+		for (const old of line.querySelectorAll('.wrap-marker')) old.remove()
+
+		const range = document.createRange()
+		range.selectNodeContents(line)
+		const rects = range.getClientRects()
+		if (!rects.length) continue
+
+		const base = line.getBoundingClientRect()
+		// Group the rects (one per inline fragment) into visual rows keyed by
+		// their top offset, tracking the rightmost text edge of each row — that
+		// edge is where the row visually ends, i.e. the wrap point.
+		const rows = []
+		for (const r of rects) {
+			if (r.width === 0 && r.height === 0) continue
+			const top = Math.round(r.top - base.top)
+			const right = r.right - base.left
+			const row = rows.find(x => Math.abs(x.top - top) <= 2)
+			if (row) row.right = Math.max(row.right, right)
+			else rows.push({ top, right })
+		}
+		if (rows.length <= 1) continue   // line did not wrap
+
+		// Mark the end of every row except the last — those are the wrap points.
+		for (let i = 0; i < rows.length - 1; i++) {
+			const marker = document.createElement('span')
+			marker.className = 'wrap-marker'
+			marker.textContent = '↴'
+			marker.setAttribute('aria-hidden', 'true')
+			marker.style.top = (rows[i].top / s) + 'px'
+			marker.style.left = (rows[i].right / s) + 'px'
+			line.appendChild(marker)
+		}
+	}
+}
+
 function writeToClipboard(text) {
 	if (navigator.clipboard && navigator.clipboard.writeText)
 		return navigator.clipboard.writeText(text);
@@ -140,7 +269,13 @@ function addCopyButton(preEl) {
 	btn.textContent = 'copy';
 	btn.addEventListener('click', () => {
 		const code = preEl.querySelector('code');
-		const text = code ? code.innerText : preEl.innerText;
+		// Prefer the stashed raw source: it is immune to the per-line <span>
+		// wrapping and wrap markers used for display. textContent is the
+		// fallback (block-per-line collapses to no newlines under textContent,
+		// so raw is what we really want here).
+		const text = preEl.__rawCode != null
+			? preEl.__rawCode
+			: (code ? code.textContent : preEl.textContent);
 		writeToClipboard(text).then(() => {
 			btn.textContent = '✓ copied';
 			btn.classList.add('copied');
@@ -162,6 +297,17 @@ export default () => {
 		init: (deck) => {
 			injectStyles();
 
+			// Re-measure wrap points after fonts settle and on every layout change.
+			// Only the visible slide can be measured (hidden slides have no layout),
+			// so slidechanged re-runs decoration as each slide is shown.
+			const decorate = (root) => {
+				const run = () => decorateWrappedLines(root, deck.getScale());
+				if (document.fonts && document.fonts.ready)
+					document.fonts.ready.then(() => requestAnimationFrame(run));
+				else
+					requestAnimationFrame(run);
+			};
+
 			deck.on('ready', async () => {
 				const highlightPlugin = deck.getPlugin("highlight")
 
@@ -178,8 +324,12 @@ export default () => {
 				// code text and overwrites the rendered diagram.
 				for (let el of deck.getRevealElement().querySelectorAll("pre code[class]")) {
 					if (!el.classList.contains("mermaid")) {
+						const pre = el.closest('pre')
+						// Capture raw source before highlighting/line-wrapping touches the DOM.
+						if (pre) pre.__rawCode = el.textContent
 						highlightPlugin.hljs.highlightElement(el);
-						addCopyButton(el.closest('pre'));
+						wrapCodeLines(el);
+						addCopyButton(pre);
 					}
 				}
 
@@ -225,7 +375,9 @@ export default () => {
 
 						const newEl = showCode(el, language, code, showLink ? url : null, outdent)
 						if (language !== 'mermaid') {
-							highlightPlugin.hljs.highlightElement(newEl.querySelector('code') ?? newEl)
+							const codeEl = newEl.querySelector('code') ?? newEl
+							highlightPlugin.hljs.highlightElement(codeEl)
+							wrapCodeLines(codeEl)
 							addCopyButton(newEl)
 						}
 					} catch (err) {
@@ -234,10 +386,15 @@ export default () => {
 					}
 				}
 
-
+				// First pass for the slide that is visible at startup.
+				decorate(deck.getRevealElement())
 			})
 
-
+			// Slides other than the current one have no layout while hidden, so we
+			// (re)place wrap markers each time a slide becomes visible, and after
+			// any resize that changes the scale.
+			deck.on('slidechanged', (e) => decorate(e.currentSlide))
+			deck.on('resize', () => decorate(deck.getRevealElement()))
 		}
 	}
-}
+}