markserv 1.17.4 → 1.20.0

package/lib/templates/highlight-js-github-gist.css

@@ -1 +1,243 @@
-.hljs{display:block;background:white;padding:0.5em;color:#333333;overflow-x:auto}.hljs-comment,.hljs-meta{color:#969896}.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{color:#0086b3}.hljs-section,.hljs-name{color:#63a35c}.hljs-tag{color:#333333}.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
+/* highlight.js — theme-aware syntax highlighting */
+
+.hljs {
+  display: block;
+  padding: 0.5em;
+  overflow-x: auto;
+}
+
+/* Light theme (original github-gist) */
+[data-theme="light"] .hljs {
+  background: white;
+  color: #333333;
+}
+[data-theme="light"] .hljs-comment,
+[data-theme="light"] .hljs-meta {
+  color: #969896;
+}
+[data-theme="light"] .hljs-string,
+[data-theme="light"] .hljs-variable,
+[data-theme="light"] .hljs-template-variable,
+[data-theme="light"] .hljs-strong,
+[data-theme="light"] .hljs-emphasis,
+[data-theme="light"] .hljs-quote {
+  color: #df5000;
+}
+[data-theme="light"] .hljs-keyword,
+[data-theme="light"] .hljs-selector-tag,
+[data-theme="light"] .hljs-type {
+  color: #a71d5d;
+}
+[data-theme="light"] .hljs-literal,
+[data-theme="light"] .hljs-symbol,
+[data-theme="light"] .hljs-bullet,
+[data-theme="light"] .hljs-attribute {
+  color: #0086b3;
+}
+[data-theme="light"] .hljs-section,
+[data-theme="light"] .hljs-name {
+  color: #63a35c;
+}
+[data-theme="light"] .hljs-tag {
+  color: #333333;
+}
+[data-theme="light"] .hljs-title,
+[data-theme="light"] .hljs-attr,
+[data-theme="light"] .hljs-selector-id,
+[data-theme="light"] .hljs-selector-class,
+[data-theme="light"] .hljs-selector-attr,
+[data-theme="light"] .hljs-selector-pseudo {
+  color: #795da3;
+}
+[data-theme="light"] .hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+[data-theme="light"] .hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+[data-theme="light"] .hljs-link {
+  text-decoration: underline;
+}
+
+/* Dark theme (GitHub dark) */
+[data-theme="dark"] .hljs {
+  background: #161b22;
+  color: #e6edf3;
+}
+[data-theme="dark"] .hljs-comment,
+[data-theme="dark"] .hljs-meta {
+  color: #8b949e;
+}
+[data-theme="dark"] .hljs-string,
+[data-theme="dark"] .hljs-variable,
+[data-theme="dark"] .hljs-template-variable,
+[data-theme="dark"] .hljs-strong,
+[data-theme="dark"] .hljs-emphasis,
+[data-theme="dark"] .hljs-quote {
+  color: #a5d6ff;
+}
+[data-theme="dark"] .hljs-keyword,
+[data-theme="dark"] .hljs-selector-tag,
+[data-theme="dark"] .hljs-type {
+  color: #ff7b72;
+}
+[data-theme="dark"] .hljs-literal,
+[data-theme="dark"] .hljs-symbol,
+[data-theme="dark"] .hljs-bullet,
+[data-theme="dark"] .hljs-attribute {
+  color: #79c0ff;
+}
+[data-theme="dark"] .hljs-section,
+[data-theme="dark"] .hljs-name {
+  color: #7ee787;
+}
+[data-theme="dark"] .hljs-tag {
+  color: #e6edf3;
+}
+[data-theme="dark"] .hljs-title,
+[data-theme="dark"] .hljs-attr,
+[data-theme="dark"] .hljs-selector-id,
+[data-theme="dark"] .hljs-selector-class,
+[data-theme="dark"] .hljs-selector-attr,
+[data-theme="dark"] .hljs-selector-pseudo {
+  color: #d2a8ff;
+}
+[data-theme="dark"] .hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+[data-theme="dark"] .hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
+[data-theme="dark"] .hljs-link {
+  text-decoration: underline;
+}
+
+/* Synthwave theme */
+[data-theme="synthwave"] .hljs {
+  background: #1a1228;
+  color: #e0d0ff;
+}
+[data-theme="synthwave"] .hljs-comment,
+[data-theme="synthwave"] .hljs-meta {
+  color: #6c5987;
+  font-style: italic;
+}
+[data-theme="synthwave"] .hljs-string,
+[data-theme="synthwave"] .hljs-variable,
+[data-theme="synthwave"] .hljs-template-variable,
+[data-theme="synthwave"] .hljs-strong,
+[data-theme="synthwave"] .hljs-emphasis,
+[data-theme="synthwave"] .hljs-quote {
+  color: #ff8b39;
+}
+[data-theme="synthwave"] .hljs-keyword,
+[data-theme="synthwave"] .hljs-selector-tag,
+[data-theme="synthwave"] .hljs-type {
+  color: #ff7edb;
+}
+[data-theme="synthwave"] .hljs-literal,
+[data-theme="synthwave"] .hljs-symbol,
+[data-theme="synthwave"] .hljs-bullet,
+[data-theme="synthwave"] .hljs-attribute {
+  color: #36f9f6;
+}
+[data-theme="synthwave"] .hljs-section,
+[data-theme="synthwave"] .hljs-name {
+  color: #72f1b8;
+}
+[data-theme="synthwave"] .hljs-tag {
+  color: #e0d0ff;
+}
+[data-theme="synthwave"] .hljs-title,
+[data-theme="synthwave"] .hljs-attr,
+[data-theme="synthwave"] .hljs-selector-id,
+[data-theme="synthwave"] .hljs-selector-class,
+[data-theme="synthwave"] .hljs-selector-attr,
+[data-theme="synthwave"] .hljs-selector-pseudo {
+  color: #fede5d;
+}
+[data-theme="synthwave"] .hljs-addition {
+  color: #72f1b8;
+  background-color: #1a3a2a;
+}
+[data-theme="synthwave"] .hljs-deletion {
+  color: #ff7edb;
+  background-color: #3a1a2a;
+}
+[data-theme="synthwave"] .hljs-link {
+  text-decoration: underline;
+  color: #36f9f6;
+}
+
+/* Solarized theme — Hopscotch syntax highlighting (github.com/idleberg/Hopscotch) */
+[data-theme="solarized"] .hljs {
+  background: #322931;
+  color: #b9b5b8;
+}
+[data-theme="solarized"] .hljs-comment,
+[data-theme="solarized"] .hljs-meta {
+  color: #797379;
+  font-style: italic;
+}
+[data-theme="solarized"] .hljs-string,
+[data-theme="solarized"] .hljs-variable,
+[data-theme="solarized"] .hljs-template-variable,
+[data-theme="solarized"] .hljs-strong,
+[data-theme="solarized"] .hljs-emphasis,
+[data-theme="solarized"] .hljs-quote {
+  color: #8fc13e;
+}
+[data-theme="solarized"] .hljs-keyword,
+[data-theme="solarized"] .hljs-selector-tag,
+[data-theme="solarized"] .hljs-type {
+  color: #c85e7c;
+}
+[data-theme="solarized"] .hljs-literal,
+[data-theme="solarized"] .hljs-symbol,
+[data-theme="solarized"] .hljs-bullet,
+[data-theme="solarized"] .hljs-attribute {
+  color: #fd8b19;
+}
+[data-theme="solarized"] .hljs-section,
+[data-theme="solarized"] .hljs-name {
+  color: #dd464c;
+}
+[data-theme="solarized"] .hljs-tag {
+  color: #b9b5b8;
+}
+[data-theme="solarized"] .hljs-title,
+[data-theme="solarized"] .hljs-attr,
+[data-theme="solarized"] .hljs-selector-id,
+[data-theme="solarized"] .hljs-selector-class,
+[data-theme="solarized"] .hljs-selector-attr,
+[data-theme="solarized"] .hljs-selector-pseudo {
+  color: #1290bf;
+}
+[data-theme="solarized"] .hljs-addition {
+  color: #8fc13e;
+  background-color: rgba(143, 193, 62, 0.1);
+}
+[data-theme="solarized"] .hljs-deletion {
+  color: #dd464c;
+  background-color: rgba(221, 70, 76, 0.1);
+}
+[data-theme="solarized"] .hljs-link {
+  text-decoration: underline;
+  color: #1290bf;
+}
+[data-theme="solarized"] .hljs-number {
+  color: #fd8b19;
+}
+[data-theme="solarized"] .hljs-built_in {
+  color: #fd8b19;
+}
+[data-theme="solarized"] .hljs-params {
+  color: #b9b5b8;
+}
+[data-theme="solarized"] .hljs-regexp {
+  color: #dd464c;
+}

package/lib/templates/markdown.html

@@ -1,11 +1,15 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="{{theme}}">
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>{{title}}</title>
 	<meta charset="utf-8">
+	<link rel="stylesheet" id="theme-dark" href="{markserv}templates/github-markdown-dark.css"{{#unless themeDark}} disabled{{/unless}}>
+	<link rel="stylesheet" id="theme-light" href="{markserv}templates/github-markdown-light.css"{{#unless themeLight}} disabled{{/unless}}>
+	<link rel="stylesheet" id="theme-synthwave" href="{markserv}templates/github-markdown-synthwave.css"{{#unless themeSynthwave}} disabled{{/unless}}>
+	<link rel="stylesheet" id="theme-solarized" href="{markserv}templates/github-markdown-solarized.css"{{#unless themeSolarized}} disabled{{/unless}}>
 	<link rel="stylesheet" href="{markserv}templates/markserv.css">
 	<link rel="stylesheet" href="{markserv}templates/highlight-js-github-gist.css">
 	<script type="text/javascript" id="MathJax-script" async
@@ -17,5 +21,240 @@
 {{{content}}}
 <footer><sup><hr> Served by <a href="https://www.npmjs.com/package/markserv">MarkServ</a> | PID: {{pid}}</sup></footer>
 </article>
+<div class="width-control" id="width-control">
+    <span id="width-tooltip"></span>
+    <input type="range" id="width-slider" min="0" max="1920" value="978" step="1">
+</div>
+<button class="theme-toggle" id="theme-toggle" title="Toggle theme"></button>
+<script>
+(function() {
+	var themes = ['dark', 'light', 'synthwave', 'solarized'];
+	var icons = {dark: '\u{1F319}', light: '\u{2600}\u{FE0F}', synthwave: '\u{1F9D1}\u{200D}\u{1F3A4}', solarized: '\u{262F}\u{FE0F}'};
+	var serverTheme = '{{theme}}' || 'dark';
+	var current = localStorage.getItem('markserv-theme') || serverTheme;
+
+	function applyTheme(t) {
+		document.documentElement.setAttribute('data-theme', t);
+		themes.forEach(function(name) {
+			var el = document.getElementById('theme-' + name);
+			if (el) el.disabled = (name !== t);
+		});
+		var btn = document.getElementById('theme-toggle');
+		if (btn) btn.textContent = icons[t] || icons.dark;
+		current = t;
+
+		// Re-render mermaid diagrams so they follow the new theme
+		// (mermaid bakes theme CSS into the SVG at render time)
+		if (window.markservRenderMermaid) {
+			window.markservRenderMermaid();
+		}
+	}
+
+	applyTheme(current);
+
+	document.getElementById('theme-toggle').addEventListener('click', function() {
+		var idx = themes.indexOf(current);
+		var next = themes[(idx + 1) % themes.length];
+		localStorage.setItem('markserv-theme', next);
+		applyTheme(next);
+	});
+})();
+</script>
+<script>
+(function() {
+    var slider = document.getElementById('width-slider');
+    var tooltip = document.getElementById('width-tooltip');
+    if (!slider) return;
+
+    var CSS_DEFAULT = 978;   // must match body { width } in markserv.css
+    var storageKey = 'markserv-width:' + '{{rootDir}}';
+    var stored = localStorage.getItem(storageKey);
+
+    function updateSliderMax() {
+        // Slider max = current viewport width so user can slide up to full-bleed
+        slider.max = window.innerWidth;
+    }
+
+    function applyWidth(px) {
+        if (px === CSS_DEFAULT) {
+            // Matches stylesheet default — remove inline style so CSS rules apply normally
+            document.body.style.width = '';
+        } else {
+            document.body.style.width = px + 'px';
+        }
+        slider.value = Math.min(px, parseInt(slider.max, 10));
+    }
+
+    // Initialize
+    updateSliderMax();
+    if (stored) {
+        applyWidth(parseInt(stored, 10));
+    } else {
+        // No stored value — keep the 978px stylesheet default; slider reflects it
+        slider.value = Math.min(CSS_DEFAULT, parseInt(slider.max, 10));
+    }
+
+    function positionTooltip() {
+        if (!tooltip) return;
+        var val = parseInt(slider.value, 10);
+        var min = parseInt(slider.min, 10);
+        var max = parseInt(slider.max, 10);
+        var pct = (val - min) / (max - min);
+        var sliderW = slider.offsetWidth;
+        var thumbW = 14;
+        var offset = thumbW / 2 + pct * (sliderW - thumbW);
+        tooltip.textContent = val + 'px';
+        tooltip.style.left = offset + 'px';
+        tooltip.style.transform = 'translateX(-50%)';
+    }
+
+    // Slider input → live update
+    slider.addEventListener('input', function() {
+        var val = parseInt(slider.value, 10);
+        applyWidth(val);
+        localStorage.setItem(storageKey, String(val));
+        if (tooltip) tooltip.classList.add('visible');
+        positionTooltip();
+    });
+
+    slider.addEventListener('mousedown', function() {
+        if (tooltip) tooltip.classList.add('visible');
+        positionTooltip();
+    });
+
+    window.addEventListener('mouseup', function() {
+        if (tooltip) tooltip.classList.remove('visible');
+    });
+
+    slider.addEventListener('focus', function() {
+        if (tooltip) tooltip.classList.add('visible');
+        positionTooltip();
+    });
+
+    slider.addEventListener('blur', function() {
+        if (tooltip) tooltip.classList.remove('visible');
+    });
+
+    // Double-click to reset to default width
+    slider.addEventListener('dblclick', function() {
+        applyWidth(CSS_DEFAULT);
+        localStorage.removeItem(storageKey);
+    });
+
+    // On window resize, update slider max to reflect new viewport
+    window.addEventListener('resize', function() {
+        updateSliderMax();
+    });
+})();
+</script>
+{{#if hotreload}}
+<script>
+(function() {
+	var ws;
+	var delay = 1000;
+	var maxDelay = 30000;
+	var maxRetries = 20;
+	var retries = 0;
+
+	function connect() {
+		ws = new WebSocket('ws://localhost:{{wsPort}}');
+		ws.onopen = function() {
+			delay = 1000;
+			retries = 0;
+			ws.send(JSON.stringify({path: location.pathname}));
+		};
+		ws.onmessage = function(e) {
+			var el = document.querySelector('.markdown-body');
+			if (el) {
+				el.innerHTML = e.data;
+				if (el.querySelector('pre.mermaid')) {
+					window.markservLoadMermaid();
+				}
+			}
+		};
+		ws.onclose = function() {
+			if (retries < maxRetries) {
+				retries++;
+				setTimeout(connect, delay);
+				delay = Math.min(delay * 2, maxDelay);
+			}
+		};
+	}
+	connect();
+})();
+</script>
+{{/if}}
+<script>
+(function() {
+	// Lazy mermaid loader: costs nothing (no network) on pages without a
+	// mermaid fence, and degrades to the plain source text when the CDN is
+	// unreachable. The script is appended asynchronously and rendered via
+	// contentLoaded(), because startOnLoad hooks the window load event,
+	// which may already have fired by the time the CDN answers.
+	var loading = false;
+	var sourceCache = new WeakMap();
+
+	function mermaidThemeFor(theme) {
+		return theme === 'light' ? 'default' : (theme === 'solarized' ? 'neutral' : 'dark')
+	}
+
+	// Render/re-render all mermaid fences with the page's current theme.
+	// Mermaid replaces a fence's content with the SVG, so previously
+	// rendered fences get their source restored from the cache first.
+	window.markservRenderMermaid = function() {
+		// window.mermaid can be a named element (e.g. <h1 id="mermaid">);
+		// only treat it as the library if it actually exposes the API
+		var mermaidLib = window.mermaid;
+		if (!mermaidLib || typeof mermaidLib.contentLoaded !== 'function') {
+			return
+		}
+
+		var els = document.querySelectorAll('pre.mermaid');
+		els.forEach(function(el) {
+			if (!sourceCache.has(el)) {
+				sourceCache.set(el, el.innerHTML);
+			}
+		});
+		els.forEach(function(el) {
+			if (el.getAttribute('data-processed')) {
+				el.innerHTML = sourceCache.get(el);
+				el.removeAttribute('data-processed');
+			}
+		});
+
+		var theme = document.documentElement.getAttribute('data-theme') || 'dark';
+		mermaidLib.initialize({ theme: mermaidThemeFor(theme) });
+		mermaidLib.contentLoaded();
+	};
+
+	window.markservLoadMermaid = function() {
+		var mermaidLib = window.mermaid;
+		if (mermaidLib && typeof mermaidLib.contentLoaded === 'function') {
+			window.markservRenderMermaid();
+			return
+		}
+
+		if (loading) {
+			return
+		}
+
+		loading = true;
+		var script = document.createElement('script');
+		script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+		script.onload = function() {
+			window.markservRenderMermaid();
+		};
+		script.onerror = function() {
+			// Offline or CDN unreachable: keep the diagram source as plain text
+			loading = false;
+		};
+		document.head.appendChild(script);
+	};
+
+	if (document.querySelector('pre.mermaid')) {
+		window.markservLoadMermaid();
+	}
+})();
+</script>
 </body>
 </html>