@farberg/reveal-template 1.1.17 → 1.1.19

package/package.json

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

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

@@ -1,154 +1,383 @@
 /*
 Create a zip from existing files for download and display a tree of files
 
-<pre class="dirtree" data-zipname="k8s-Exercise.zip" data-strip-prefix="code/k8s-demo-app"> 
+Attributes on <pre class="dirtree">:
+  data-zipname="archive.zip"      — name of the downloaded zip (default: download.zip)
+  data-line-height="1.6"          — line spacing (default: 1.85)
+  data-width="auto"               — container width, e.g. "400px", "60%", "auto" (default: auto)
+
+<pre class="dirtree" data-zipname="k8s-Exercise.zip" data-line-height="1.6" data-width="480px">
 code/k8s-demo-app/01-mariadb-deployment.yaml
 code/k8s-demo-app/02-k8s-mariadb-service.yaml
-code/k8s-demo-app/03-memcached-deployment-and-service.yaml
-code/k8s-demo-app/04-app-deployment-minikube.yaml
-code/k8s-demo-app/04-app-service-and-ingress.yaml
 code/k8s-demo-app/Dockerfile
 code/k8s-demo-app/package.json
-code/k8s-demo-app/server.js
 </pre>
-
-
-
 */
 
 const dir_tree = {
 	id: 'dir_tree',
 	init: (deck) => {
 
-		function getFileList(el) {
-			const text = el.innerText;
-			const files = text.split('\n').filter(e => e.trim().length > 0);
-			return files
-		}
+		function injectStyles() {
+			if (document.getElementById('dirtree-styles')) return;
+			const style = document.createElement('style');
+			style.id = 'dirtree-styles';
+			style.textContent = `
+				.dirtree-container {
+					font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+					background: transparent;
+					border-radius: 10px;
+					padding: 38px 18px 14px 18px;
+					border: 1px solid #d0d7de;
+					display: inline-block;
+					min-width: 280px;
+					max-width: 90%;
+					text-align: left;
+					position: relative !important;
+				}
 
-		function createTree(files) {
+				ul.dirtree {
+					list-style: none !important;
+					padding: 0 !important;
+					margin: 0 !important;
+				}
 
-			function getPath(tree, path) {
-				let nextNode = tree[path[0]]
+				ul.dirtree ul.dirtree {
+					padding-left: 0 !important;
+				}
 
-				if (!nextNode) {
-					nextNode = {}
-					tree[path[0]] = nextNode
+				li.dirtree {
+					color: #1f2328;
+					position: relative;
+					white-space: nowrap;
+					display: flex;
+					align-items: center;
 				}
 
-				const nextPath = path.slice(1)
-				if (nextPath.length > 0) {
-					return getPath(nextNode, nextPath)
+				li.dirtree::before,
+				li.dirtree::after {
+					display: none !important;
+					content: none !important;
+					border: none !important;
 				}
 
-				return nextNode
-			}
+				li.dirtree.root {
+					color: #0969da;
+					font-weight: 600;
+					margin-bottom: 2px;
+				}
 
-			let tree = {}
-			for (const file of files) {
-				const path = file.split('/')
-				const filename = path.pop()
+				.dirtree-dir-name {
+					color: #0969da;
+				}
+
+				a.dirtree-file-link {
+					color: #116329;
+					text-decoration: none;
+					transition: color 0.15s;
+				}
+
+				a.dirtree-file-link:hover {
+					color: #6639ba;
+					text-decoration: underline;
+				}
+
+				/* Copy button — hidden by default, shown on li hover */
+				.dirtree-copy-btn {
+					display: inline-flex;
+					align-items: center;
+					margin-left: 8px;
+					padding: 0px 6px;
+					background: transparent;
+					border: 1px solid #d0d7de;
+					border-radius: 4px;
+					color: #57606a;
+					font-size: 0.78em;
+					cursor: pointer;
+					opacity: 0 !important;
+					pointer-events: none !important;
+					transition: opacity 0.15s, background 0.15s, color 0.15s;
+					user-select: none;
+					line-height: 1.6;
+					font-family: inherit;
+				}
+
+				li.dirtree:hover > .dirtree-copy-btn {
+					opacity: 1 !important;
+					pointer-events: auto !important;
+				}
+
+				.dirtree-copy-btn:hover {
+					background: #f6f8fa;
+					border-color: #8c959f;
+					color: #1f2328;
+				}
+
+				.dirtree-copy-btn.copied {
+					color: #116329;
+					border-color: #116329;
+					background: #dafbe1;
+				}
+
+				/* Download button */
+				.dirtree-download-btn {
+					position: absolute !important;
+					top: 10px !important;
+					right: 14px !important;
+					padding: 2px 10px;
+					background: transparent;
+					border: 1px solid #d0d7de;
+					border-radius: 6px;
+					color: #cf222e !important;
+					font-size: 0.85em;
+					cursor: pointer;
+					text-decoration: none !important;
+					transition: background 0.15s, border-color 0.15s;
+					font-family: inherit;
+				}
+
+				.dirtree-download-btn:hover {
+					background: #fff5f5 !important;
+					border-color: #cf222e !important;
+					color: #cf222e !important;
+				}
+
+				.dirtree-prefix {
+					color: #8c959f;
+					user-select: none;
+					white-space: pre;
+					flex-shrink: 0;
+				}
+
+				.dirtree-icon {
+					margin-right: 4px;
+					flex-shrink: 0;
+				}
+			`;
+			document.head.appendChild(style);
+		}
 
-				const treeNode = getPath(tree, path);
-				treeNode[filename] = filename
+		function getFileIcon(name, ext) {
+			if (name.toLowerCase() === 'dockerfile') return '🐳';
+			const icons = {
+				js: '📜', ts: '📜', jsx: '📜', tsx: '📜',
+				json: '📋', yaml: '📋', yml: '📋', toml: '📋', xml: '📋',
+				md: '📝', txt: '📝', rst: '📝',
+				html: '🌐', css: '🎨', scss: '🎨',
+				sh: '⚙️', bash: '⚙️', zsh: '⚙️',
+				py: '🐍', rb: '💎', go: '🔷', rs: '🦀', java: '☕',
+				png: '🖼️', jpg: '🖼️', jpeg: '🖼️', svg: '🖼️', gif: '🖼️',
+				zip: '📦', tar: '📦', gz: '📦',
+				sql: '🗄️',
+			};
+			return icons[ext] || '📄';
+		}
+
+		function writeToClipboard(text) {
+			if (navigator.clipboard && navigator.clipboard.writeText) {
+				return navigator.clipboard.writeText(text);
 			}
-			return tree
+			// Fallback for HTTP / non-secure contexts
+			const ta = document.createElement('textarea');
+			ta.value = text;
+			ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
+			document.body.appendChild(ta);
+			ta.focus();
+			ta.select();
+			try {
+				document.execCommand('copy');
+				return Promise.resolve();
+			} catch (e) {
+				return Promise.reject(e);
+			} finally {
+				document.body.removeChild(ta);
+			}
+		}
 
+		function makeCopyButton(filePath) {
+			const btn = document.createElement('button');
+			btn.classList.add('dirtree-copy-btn');
+			btn.title = 'Copy file contents';
+			btn.textContent = 'copy';
+			btn.addEventListener('click', e => {
+				e.preventDefault();
+				btn.textContent = '…';
+				fetch(filePath, { credentials: 'include' })
+					.then(r => {
+						if (!r.ok) throw new Error(`HTTP ${r.status}`);
+						return r.text();
+					})
+					.then(text => writeToClipboard(text))
+					.then(() => {
+						btn.textContent = '✓ copied';
+						btn.classList.add('copied');
+						setTimeout(() => {
+							btn.textContent = 'copy';
+							btn.classList.remove('copied');
+						}, 1500);
+					})
+					.catch(() => {
+						btn.textContent = '✗ error';
+						setTimeout(() => { btn.textContent = 'copy'; }, 1500);
+					});
+			});
+			return btn;
+		}
+
+		function getFileList(el) {
+			return el.innerText.split('\n').filter(e => e.trim().length > 0);
+		}
+
+		function createTree(files) {
+			function getPath(tree, path) {
+				let node = tree[path[0]];
+				if (!node) { node = {}; tree[path[0]] = node; }
+				const rest = path.slice(1);
+				return rest.length > 0 ? getPath(node, rest) : node;
+			}
+			const tree = {};
+			for (const file of files) {
+				const parts = file.split('/');
+				const filename = parts.pop();
+				getPath(tree, parts)[filename] = filename;
+			}
+			return tree;
 		}
 
 		function download(files, zipName) {
-			Promise.all(files.map(file => fetch(file, { "credentials": "include" })))
-				.then(promises => {
-					// Check for 401 responses
-					const hasUnauthorized = promises.some(p => p.status === 401);
-					if (hasUnauthorized) {
-						console.log("Authentication required (dir-tree), reloading page");
+			Promise.all(files.map(f => fetch(f, { credentials: 'include' })))
+				.then(responses => {
+					if (responses.some(r => r.status === 401)) {
 						window.location.reload();
 						return;
 					}
-					return Promise.all(promises.map(p => p.text()))
-						.then(values => {
-							var zip = new JSZip();
-							values.forEach((text, idx) => zip.file(files[idx], text))
-							zip.generateAsync({ type: "blob" }).then(blob => {
-								saveAs(blob, zipName);
-							})
-						})
-				})
-
+					return Promise.all(responses.map(r => r.text())).then(values => {
+						const zip = new JSZip();
+						values.forEach((text, i) => zip.file(files[i], text));
+						zip.generateAsync({ type: 'blob' }).then(blob => saveAs(blob, zipName));
+					});
+				});
 		}
 
-		function displayTree(el, treeNode, path, isFirst, files, zipName) {
-
-			for (let name of Object.getOwnPropertyNames(treeNode)) {
-				const o = treeNode[name]
-				const isDir = typeof o === "object"
+		function displayTree(el, treeNode, path, isRoot, files, zipName, ancestorLast) {
+			const names = Object.getOwnPropertyNames(treeNode);
 
-				if (isDir) {
-					const li = document.createElement('li')
-					li.classList.add("dirtree")
-					el.appendChild(li)
+			names.forEach((name, index) => {
+				const o = treeNode[name];
+				const isDir = typeof o === 'object';
+				const isLast = index === names.length - 1;
 
-					if (isFirst) {
-						li.classList.add("root")
-						li.innerHTML = name + " "
+				const li = document.createElement('li');
+				li.classList.add('dirtree');
 
-						const a = document.createElement('a')
-						li.appendChild(a)
-						a.innerHTML = `(download ${zipName})`
-						a.href = "#zip/" + zipName
-						a.style = "color: #e10217";
-						a.addEventListener('click', e => {
-							e.preventDefault()
-							download(files, zipName)
-						})
+				if (isRoot) {
+					li.classList.add('root');
 
+					const icon = document.createElement('span');
+					icon.classList.add('dirtree-icon');
+					icon.textContent = '📁';
 
-					} else {
-						li.innerHTML = name
-					}
+					const nameSpan = document.createElement('span');
+					nameSpan.classList.add('dirtree-dir-name');
+					nameSpan.textContent = name;
 
-					const ul = document.createElement('ul')
-					ul.classList.add("dirtree")
-					li.appendChild(ul)
+					li.appendChild(icon);
+					li.appendChild(nameSpan);
+					el.appendChild(li);
 
-					displayTree(ul, o, `${path}/${name}`, false, files, zipName)
+					const ul = document.createElement('ul');
+					ul.classList.add('dirtree');
+					li.appendChild(ul);
+					displayTree(ul, o, `${path}/${name}`, false, files, zipName, []);
 
 				} else {
+					const contPrefix = ancestorLast.map(last => last ? '    ' : '│   ').join('');
+					const connector = isLast ? '└── ' : '├── ';
+
+					const prefixSpan = document.createElement('span');
+					prefixSpan.classList.add('dirtree-prefix');
+					prefixSpan.textContent = contPrefix + connector;
+					li.appendChild(prefixSpan);
+
+					if (isDir) {
+						const icon = document.createElement('span');
+						icon.classList.add('dirtree-icon');
+						icon.textContent = '📂';
 
-					const li = document.createElement('li')
-					li.classList.add("dirtree")
+						const nameSpan = document.createElement('span');
+						nameSpan.classList.add('dirtree-dir-name');
+						nameSpan.textContent = name;
 
-					//Remove trailing slash
-					const finalPath = `${path}/${o}`.replace(/^\//, "");
-					li.innerHTML = `<a href="${finalPath}">${o}</a>`
+						li.appendChild(icon);
+						li.appendChild(nameSpan);
+						el.appendChild(li);
 
-					el.appendChild(li)
+						const ul = document.createElement('ul');
+						ul.classList.add('dirtree');
+						li.appendChild(ul);
+						displayTree(ul, o, `${path}/${name}`, false, files, zipName, [...ancestorLast, isLast]);
+
+					} else {
+						const ext = name.includes('.') ? name.split('.').pop().toLowerCase() : '';
+
+						const icon = document.createElement('span');
+						icon.classList.add('dirtree-icon');
+						icon.textContent = getFileIcon(name, ext);
+
+						const finalPath = `${path}/${o}`.replace(/^\//, '');
+						const a = document.createElement('a');
+						a.classList.add('dirtree-file-link');
+						a.href = finalPath;
+						a.textContent = o;
+
+						li.appendChild(icon);
+						li.appendChild(a);
+						li.appendChild(makeCopyButton(finalPath));
+						el.appendChild(li);
+					}
 				}
-			}
+			});
 		}
 
 		deck.on('ready', () => {
-			for (let el of deck.getRevealElement().querySelectorAll("pre.dirtree")) {
-				const zipName = el.getAttribute("data-zipname") || "download.zip"
-				const stripPrefix = el.getAttribute("data-strip-prefix")
+			injectStyles();
 
-				const files = getFileList(el)
-				const tree = createTree(files)
+			for (const el of deck.getRevealElement().querySelectorAll('pre.dirtree')) {
+				const zipName = el.getAttribute('data-zipname') || 'download.zip';
+				const lineHeight = el.getAttribute('data-line-height') || '1.85';
+				const width = el.getAttribute('data-width') || 'auto';
 
-				const ul = document.createElement('ul')
-				ul.classList.add("dirtree")
+				const files = getFileList(el);
+				const tree = createTree(files);
 
-				displayTree(ul, tree, '', true, files, zipName)
+				const container = document.createElement('div');
+				container.classList.add('dirtree-container');
+				container.style.lineHeight = lineHeight;
+				if (width !== 'auto') container.style.width = width;
 
-				el.parentElement.replaceChild(ul, el)
-			}
+				// Forward font-size (and other inline styles) from the <pre>
+				if (el.getAttribute('style')) container.setAttribute('style', el.getAttribute('style'));
+				// Re-apply data-driven styles on top (inline style from <pre> must not override these)
+				container.style.lineHeight = lineHeight;
+				if (width !== 'auto') container.style.width = width;
+
+				const btn = document.createElement('a');
+				btn.classList.add('dirtree-download-btn');
+				btn.textContent = '⬇ ' + zipName;
+				btn.href = '#zip/' + zipName;
+				btn.addEventListener('click', e => { e.preventDefault(); download(files, zipName); });
+				container.appendChild(btn);
 
-		})
+				const ul = document.createElement('ul');
+				ul.classList.add('dirtree');
+				container.appendChild(ul);
 
+				displayTree(ul, tree, '', true, files, zipName, []);
 
+				el.parentElement.replaceChild(container, el);
+			}
+		});
 	}
 }
 
-
-export default dir_tree;
+export default dir_tree;

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

@@ -67,10 +67,91 @@ function extractBeginEndSnippet(code, beginMarker, endMarker) {
 	return out.trim();
 }
 
+function injectStyles() {
+	const style = document.createElement('style');
+	style.textContent = `
+		pre.with-copy-btn {
+			position: relative;
+		}
+		.copy-code-btn {
+			position: absolute;
+			top: 0.4em;
+			right: 0.4em;
+			padding: 0.2em 0.5em;
+			font-size: 0.75em;
+			font-family: sans-serif;
+			background: rgba(255, 255, 255, 0.15);
+			color: #ccc;
+			border: 1px solid rgba(255, 255, 255, 0.25);
+			border-radius: 4px;
+			cursor: pointer;
+			opacity: 0;
+			transition: opacity 0.15s ease, background 0.15s ease;
+			z-index: 10;
+			line-height: 1.4;
+		}
+		pre.with-copy-btn:hover .copy-code-btn {
+			opacity: 1;
+		}
+		.copy-code-btn:hover {
+			background: rgba(255, 255, 255, 0.3);
+			color: #fff;
+		}
+		.copy-code-btn.copied {
+			color: #4caf50;
+			border-color: #4caf50;
+		}
+	`;
+	document.head.appendChild(style);
+}
+
+function writeToClipboard(text) {
+	if (navigator.clipboard && navigator.clipboard.writeText)
+		return navigator.clipboard.writeText(text);
+	const ta = document.createElement('textarea');
+	ta.value = text;
+	ta.style.cssText = 'position:fixed;opacity:0;pointer-events:none';
+	document.body.appendChild(ta);
+	ta.focus();
+	ta.select();
+	try {
+		document.execCommand('copy');
+		return Promise.resolve();
+	} catch (e) {
+		return Promise.reject(e);
+	} finally {
+		document.body.removeChild(ta);
+	}
+}
+
+function addCopyButton(preEl) {
+	preEl.classList.add('with-copy-btn');
+	const btn = document.createElement('button');
+	btn.className = 'copy-code-btn';
+	btn.textContent = 'copy';
+	btn.addEventListener('click', () => {
+		const code = preEl.querySelector('code');
+		const text = code ? code.innerText : preEl.innerText;
+		writeToClipboard(text).then(() => {
+			btn.textContent = '✓ copied';
+			btn.classList.add('copied');
+			setTimeout(() => {
+				btn.textContent = 'copy';
+				btn.classList.remove('copied');
+			}, 1500);
+		}).catch(() => {
+			btn.textContent = '✗ error';
+			setTimeout(() => { btn.textContent = 'copy'; }, 1500);
+		});
+	});
+	preEl.appendChild(btn);
+}
+
 export default () => {
 	return {
 		id: 'show_code_snippets',
 		init: (deck) => {
+			injectStyles();
 
 			deck.on('ready', async () => {
 				const highlightPlugin = deck.getPlugin("highlight")
@@ -89,6 +170,7 @@ export default () => {
 				for (let el of deck.getRevealElement().querySelectorAll("pre code[class]")) {
 					if (!el.classList.contains("mermaid")) {
 						highlightPlugin.hljs.highlightElement(el);
+						addCopyButton(el.closest('pre'));
 					}
 				}
 
@@ -132,8 +214,10 @@ export default () => {
 							code = outdent(code)
 
 						const newEl = showCode(el, language, code, showLink ? url : null, outdent)
-						if (language !== 'mermaid')
+						if (language !== 'mermaid') {
 							highlightPlugin.hljs.highlightElement(newEl.querySelector('code') ?? newEl)
+							addCopyButton(newEl)
+						}
 					} catch (err) {
 						console.error(`show-code-snippets: failed to load ${url}:`, err)
 						showError(el, `Failed to load ${url}: ${err.message}`)