markserv 1.17.4 → 1.20.0

package/lib/server.js

@@ -10,8 +10,8 @@ const Promise = require('bluebird')
 const connect = require('connect')
 const less = require('less')
 const send = require('send')
-const liveReload = require('livereload')
-const connectLiveReload = require('connect-livereload')
+const WebSocket = require('ws')
+const getPort = require('get-port')
 const implant = require('implant')
 const deepmerge = require('deepmerge')
 const handlebars = require('handlebars')
@@ -61,6 +61,20 @@ const md = new MarkdownIt({
 		slugify
 	})
 
+// Mermaid fences are rendered client-side by the lazy loader in
+// templates/markdown.html. Pass the source through escaped (the loader
+// reads it back via innerHTML) and keep highlight.js away from it, which
+// would otherwise log "Could not find the language 'mermaid'".
+// markdown-it passes strings starting with <pre straight through.
+const {highlight} = md.options
+md.options.highlight = (code, lang) => {
+	if (lang === 'mermaid') {
+		return `<pre class="mermaid">${md.utils.escapeHtml(code)}</pre>`
+	}
+
+	return highlight(code, lang)
+}
+
 // Markdown Extension Types
 const fileTypes = {
 	markdown: [
@@ -166,12 +180,12 @@ const getFile = path => new Promise((resolve, reject) => {
 
 // Get Custom Less CSS to use in all Markdown files
 const buildLessStyleSheet = cssPath =>
-	new Promise(resolve =>
+	new Promise((resolve, reject) =>
 		getFile(cssPath).then(data =>
 			less.render(data).then(data =>
 				resolve(data.css)
 			)
-		)
+		).catch(reject)
 	)
 
 const baseTemplate = (templateUrl, handlebarData) => new Promise((resolve, reject) => {
@@ -296,6 +310,22 @@ const createBreadcrumbs = path => {
 }
 
 // Http_request_handler: handles all the browser requests
+const resolveTheme = flags => {
+	if (flags.light) {
+		return 'light'
+	}
+
+	if (flags.synthwave) {
+		return 'synthwave'
+	}
+
+	if (flags.theme && flags.theme !== 'dark') {
+		return flags.theme
+	}
+
+	return 'dark'
+}
+
 const createRequestHandler = flags => {
 	let {dir} = flags
 	const isDir = fs.statSync(dir).isDirectory()
@@ -304,6 +334,13 @@ const createRequestHandler = flags => {
 	}
 
 	flags.$openLocation = path.relative(dir, flags.dir)
+	const theme = resolveTheme(flags)
+	const themeFlags = {
+		themeDark: theme === 'dark',
+		themeLight: theme === 'light',
+		themeSynthwave: theme === 'synthwave',
+		themeSolarized: theme === 'solarized'
+	}
 
 	const implantOpts = {
 		maxDepth: 10
@@ -320,6 +357,10 @@ const createRequestHandler = flags => {
 		}),
 
 		file: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl)
 				.then(data => {
@@ -333,6 +374,10 @@ const createRequestHandler = flags => {
 		}),
 
 		less: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			buildLessStyleSheet(absUrl)
 				.then(data => {
@@ -346,6 +391,10 @@ const createRequestHandler = flags => {
 		}),
 
 		markdown: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl).then(markdownToHTML)
 				.then(data => {
@@ -359,6 +408,10 @@ const createRequestHandler = flags => {
 		}),
 
 		html: (url, opts) => new Promise(resolve => {
+			if (typeof url !== 'string' || typeof (opts && opts.baseDir) !== 'string') {
+				return resolve(false)
+			}
+
 			const absUrl = path.join(opts.baseDir, url)
 			getFile(absUrl)
 				.then(data => {
@@ -396,7 +449,12 @@ const createRequestHandler = flags => {
 				filePath,
 				errorMsg,
 				errorStack,
-				referer
+				referer,
+				theme,
+				...themeFlags,
+				hotreload: flags.$hotreload,
+				wsPort: flags.$wsPort,
+				rootDir: flags.dir
 			}
 
 			return baseTemplate(templateUrl, handlebarData).then(final => {
@@ -455,26 +513,42 @@ const createRequestHandler = flags => {
 		if (isMarkdown) {
 			msg('markdown', style.link(prettyPath), flags)
 			getFile(filePath).then(markdownToHTML).then(filePath).then(html => {
-				return implant(html, implantHandlers, implantOpts).then(output => {
+				const contentPromise = flags.templates ?
+					implant(html, implantHandlers, implantOpts) :
+					Promise.resolve(html)
+
+				return contentPromise.then(output => {
 					const templateUrl = path.join(__dirname, 'templates/markdown.html')
 
 					const handlebarData = {
 						title: path.parse(filePath).base,
 						content: output,
-						pid: process.pid | 'N/A'
+						pid: process.pid | 'N/A',
+						theme,
+						...themeFlags,
+						hotreload: flags.$hotreload,
+						wsPort: flags.$wsPort,
+						rootDir: flags.dir
 					}
 
 					return baseTemplate(templateUrl, handlebarData).then(final => {
-						const lvl2Dir = path.parse(templateUrl).dir
-						const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
-
-						return implant(final, implantHandlers, lvl2Opts)
-							.then(output => {
-								res.writeHead(200, {
-									'content-type': 'text/html'
+						if (flags.templates) {
+							const lvl2Dir = path.parse(templateUrl).dir
+							const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
+
+							return implant(final, implantHandlers, lvl2Opts)
+								.then(output => {
+									res.writeHead(200, {
+										'content-type': 'text/html'
+									})
+									res.end(output)
 								})
-								res.end(output)
-							})
+						}
+
+						res.writeHead(200, {
+							'content-type': 'text/html'
+						})
+						res.end(final)
 					})
 				})
 			}).catch(error => {
@@ -483,7 +557,11 @@ const createRequestHandler = flags => {
 		} else if (isHtml) {
 			msg('html', style.link(prettyPath), flags)
 			getFile(filePath).then(html => {
-				return implant(html, implantHandlers, implantOpts).then(output => {
+				const contentPromise = flags.templates ?
+					implant(html, implantHandlers, implantOpts) :
+					Promise.resolve(html)
+
+				return contentPromise.then(output => {
 					res.writeHead(200, {
 						'content-type': 'text/html'
 					})
@@ -504,20 +582,32 @@ const createRequestHandler = flags => {
 					content: dirToHtml(filePath),
 					title: path.parse(filePath).base,
 					pid: process.pid | 'N/A',
-					breadcrumbs: createBreadcrumbs(path.relative(dir, filePath))
+					breadcrumbs: createBreadcrumbs(path.relative(dir, filePath)),
+					theme,
+					...themeFlags,
+					hotreload: flags.$hotreload,
+					wsPort: flags.$wsPort,
+					rootDir: flags.dir
 				}
 
 				return baseTemplate(templateUrl, handlebarData).then(final => {
-					const lvl2Dir = path.parse(templateUrl).dir
-					const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
-					return implant(final, implantHandlers, lvl2Opts).then(output => {
-						res.writeHead(200, {
-							'content-type': 'text/html'
+					if (flags.templates) {
+						const lvl2Dir = path.parse(templateUrl).dir
+						const lvl2Opts = deepmerge(implantOpts, {baseDir: lvl2Dir})
+						return implant(final, implantHandlers, lvl2Opts).then(output => {
+							res.writeHead(200, {
+								'content-type': 'text/html'
+							})
+							res.end(output)
+						}).catch(error => {
+							console.error(error)
 						})
-						res.end(output)
-					}).catch(error => {
-						console.error(error)
+					}
+
+					res.writeHead(200, {
+						'content-type': 'text/html'
 					})
+					res.end(final)
 				})
 			} catch (error) {
 				errorPage(500, filePath, error)
@@ -530,11 +620,8 @@ const createRequestHandler = flags => {
 	}
 }
 
-const startConnectApp = (liveReloadPort, httpRequestHandler) => {
+const startConnectApp = httpRequestHandler => {
 	return connect()
-		.use(connectLiveReload({
-			port: liveReloadPort
-		}))
 		.use('/', httpRequestHandler)
 }
 
@@ -551,33 +638,178 @@ const startHTTPServer = (connectApp, port, flags) => {
 	return httpServer
 }
 
-const startLiveReloadServer = (liveReloadPort, flags) => {
+const startHotReload = (wsPort, flags) => {
 	let {dir} = flags
 	const isDir = fs.statSync(dir).isDirectory()
 	if (!isDir) {
 		dir = path.parse(flags.dir).dir
 	}
 
-	const exts = fileTypes.watch.map(type => type.slice(1))
-	const exclusions = fileTypes.exclusions.map(exPath => {
-		return path.join(dir, exPath)
+	const wss = new WebSocket.Server({port: wsPort})
+	const clients = new Map()
+
+	wss.on('connection', ws => {
+		ws.on('message', data => {
+			try {
+				const msg_ = JSON.parse(data)
+				if (msg_.path) {
+					clients.set(ws, msg_.path)
+				}
+			} catch (_) {}
+		})
+
+		ws.on('close', () => {
+			clients.delete(ws)
+		})
 	})
 
-	return liveReload.createServer({
-		exts,
-		exclusions,
-		port: liveReloadPort
-	}).watch(path.resolve(dir))
+	const sendToClients = (sockets, content) => {
+		for (const ws of sockets) {
+			if (ws.readyState === WebSocket.OPEN) {
+				ws.send(content)
+			}
+		}
+	}
+
+	// Debounced file watcher
+	let debounceTimer
+	const watchDir = path.resolve(dir)
+
+	const handleChange = () => {
+		// Group clients by path
+		const pathClients = new Map()
+		for (const [ws, clientPath] of clients) {
+			if (ws.readyState !== WebSocket.OPEN) {
+				continue
+			}
+
+			if (!pathClients.has(clientPath)) {
+				pathClients.set(clientPath, [])
+			}
+
+			pathClients.get(clientPath).push(ws)
+		}
+
+		const implantOpts = {maxDepth: 10}
+
+		const implantHandlers = {
+			markserv: () => new Promise(resolve => {
+				const value = path.relative(dir, __dirname)
+				resolve(value)
+			}),
+
+			file: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			less: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				buildLessStyleSheet(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			markdown: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(markdownToHTML).then(data => resolve(data)).catch(() => resolve(false))
+			}),
+
+			html: (url, opts) => new Promise(resolve => {
+				const absUrl = path.join(opts.baseDir, url)
+				getFile(absUrl).then(data => resolve(data)).catch(() => resolve(false))
+			})
+		}
+
+		for (const [clientPath, sockets] of pathClients) {
+			const decodedUrl = getPathFromUrl(decodeURIComponent(clientPath))
+			const filePath = path.normalize(unescape(dir) + unescape(decodedUrl))
+			const baseDir = path.parse(filePath).dir
+			implantOpts.baseDir = baseDir
+
+			let stat
+			let isDir_
+			let isMarkdown
+
+			try {
+				stat = fs.statSync(filePath)
+				isDir_ = stat.isDirectory()
+				if (!isDir_) {
+					isMarkdown = isType(fileTypes.markdown, filePath)
+				}
+			} catch (_) {
+				continue
+			}
+
+			if (isMarkdown) {
+				getFile(filePath)
+					.then(markdownToHTML)
+					.then(html => implant(html, implantHandlers, Object.assign({}, implantOpts, {baseDir})))
+					.then(output => {
+						sendToClients(sockets, output)
+					})
+					.catch(error => {
+						errormsg('hotreload', filePath, flags, error)
+					})
+			} else if (isDir_) {
+				try {
+					const content = dirToHtml(filePath)
+					const breadcrumbHtml = createBreadcrumbs(path.relative(dir, filePath))
+					let headerHtml = '<h1 class="icon folder isfolder">'
+					for (const crumb of breadcrumbHtml) {
+						headerHtml += `<a href="${crumb.href}">${crumb.text}</a>`
+					}
+
+					headerHtml += '</h1>\n'
+					const fullContent = headerHtml + content +
+						'<footer><sup><hr> Served by <a href="https://www.npmjs.com/package/markserv">MarkServ</a> | PID: ' + (process.pid || 'N/A') + '</sup></footer>'
+
+					sendToClients(sockets, fullContent)
+				} catch (error) {
+					errormsg('hotreload', filePath, flags, error)
+				}
+			}
+		}
+	}
+
+	try {
+		fs.watch(watchDir, {recursive: true}, (eventType, filename) => {
+			if (!filename) {
+				return
+			}
+
+			// Check exclusions
+			for (const exclusion of fileTypes.exclusions) {
+				if (filename.includes(exclusion.replace(/\/$/, ''))) {
+					return
+				}
+			}
+
+			// Check if file extension is watched
+			const ext = path.extname(filename)
+			if (ext && !fileTypes.watch.includes(ext)) {
+				return
+			}
+
+			clearTimeout(debounceTimer)
+			debounceTimer = setTimeout(handleChange, 150)
+		})
+	} catch (error) {
+		errormsg('watch', watchDir, flags, error)
+	}
+
+	return wss
 }
 
-const logActiveServerInfo = async (serveURL, httpPort, liveReloadPort, flags) => {
+const logActiveServerInfo = async (serveURL, httpPort, wsPort, flags) => {
 	const dir = path.resolve(flags.dir)
 
 	const githubLink = 'github.com/markserv'
 
 	msg('address', style.address(serveURL), flags)
 	msg('path', chalk`{grey ${style.address(dir)}}`, flags)
-	msg('livereload', chalk`{grey communicating on port: ${style.port(liveReloadPort)}}`, flags)
+
+	if (wsPort) {
+		msg('hotreload', chalk`{grey ws://localhost:${style.port(wsPort)}}`, flags)
+	}
 
 	if (process.pid) {
 		msg('process', chalk`{grey your pid is: ${style.pid(process.pid)}}`, flags)
@@ -666,22 +898,31 @@ const optionalUpgrade = async flags => {
 }
 
 const init = async flags => {
-	const liveReloadPort = flags.livereloadport
-	const httpPort = flags.port
+	const preferredPort = Number(flags.port) || 8642
+	const httpPort = flags.port ? preferredPort : await getPort({port: preferredPort})
+
+	let wsPort = null
+	const hotreloadEnabled = flags.hotreload !== false && flags.hotreload !== 'false'
+	if (hotreloadEnabled) {
+		wsPort = await getPort({port: httpPort + 1})
+	}
+
+	flags.$wsPort = wsPort
+	flags.$hotreload = hotreloadEnabled
 
 	const httpRequestHandler = createRequestHandler(flags)
-	const connectApp = startConnectApp(liveReloadPort, httpRequestHandler)
+	const connectApp = startConnectApp(httpRequestHandler)
 	const httpServer = await startHTTPServer(connectApp, httpPort, flags)
 
-	let liveReloadServer
-	if (liveReloadPort && liveReloadPort !== 'false') {
-		liveReloadServer = await startLiveReloadServer(liveReloadPort, flags)
+	let hotReloadServer
+	if (hotreloadEnabled) {
+		hotReloadServer = startHotReload(wsPort, flags)
 	}
 
 	const serveURL = 'http://' + flags.address + ':' + httpPort
 
 	// Log server info to CLI
-	logActiveServerInfo(serveURL, httpPort, liveReloadPort, flags)
+	logActiveServerInfo(serveURL, httpPort, wsPort, flags)
 
 	let launchUrl = false
 	if (flags.$openLocation || flags.$pathProvided) {
@@ -691,7 +932,7 @@ const init = async flags => {
 	const service = {
 		pid: process.pid,
 		httpServer,
-		liveReloadServer,
+		hotReloadServer,
 		connectApp,
 		launchUrl
 	}

package/lib/templates/directory.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">
 	<link rel="stylesheet" href="{markserv}icons/icons.css">
@@ -16,5 +20,157 @@
 {{{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;
+	}
+
+	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;
+		};
+		ws.onclose = function() {
+			if (retries < maxRetries) {
+				retries++;
+				setTimeout(connect, delay);
+				delay = Math.min(delay * 2, maxDelay);
+			}
+		};
+	}
+	connect();
+})();
+</script>
+{{/if}}
 </body>
-</html>
+</html>