markserv 1.17.4 → 1.19.1

package/README.md

@@ -2,7 +2,7 @@
 	<img alt="Markserv Logo" src="https://markserv.github.io/markserv/media/markserv-readme-banner.svg">
 </p>
 
-> :checkered_flag: serve markdown as html (GitHub style), index directories, and live-reload as you edit
+> :checkered_flag: serve markdown as html (GitHub style), index directories, and hot-reload as you edit
 
 [![Gitter](https://img.shields.io/badge/gitter-join%20chat%20%E2%86%92-FF69B4.svg?style=flat-square&logo=gitter-white&link=https://gitter.im/markserv)](https://gitter.im/markserv)
 [![CHANGELOG](https://img.shields.io/badge/changelog-&nbsp;✔️-orange.svg?style=flat-square)](CHANGELOG.md)
@@ -20,7 +20,7 @@
 - Markdown content rendered as HTML
 - GitHub flavor CSS and Syntax Highlighting
 - [Just in Time Templating](#stopwatch-just-in-time-templating): Markdown, HTML &amp; LESS
-- LiveReload as you edit
+- Hot-reload as you edit (no browser plugin required)
 - Directory indexes
 - MIME Type file support
 
@@ -75,20 +75,37 @@ Start Markserv and open the closest README.md file in the browser:
 $ readme
 ```
 
-## :zap: Live Reload
+## :zap: Hot Reload
 
-To see real-time updates as you save your markdown files, you will need to install the LiveReload plugin for your browser:
+Markserv includes built-in hot-reload via WebSocket. When you save a Markdown file, the page content updates instantly without a full page reload and without any browser plugin.
 
-- [Chrome](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en)
-- [Firefox](https://addons.mozilla.org/addon/livereload-web-extension/)
-- [Internet Explorer](https://github.com/dvdotsenko/livereload_ie_extension)
+To disable hot-reload, use `--no-hotreload`:
 
-With the Live Reload plugin installed and turned on, you should see the page reloading as you save your Markdown file.
+```shell
+markserv --no-hotreload README.md
+```
 
 <p align="center">
 	<img alt="Markserv Live Reload" src="media/markserv-live-reload.gif" width="100%">
 </p>
 
+## :art: Themes
+
+Markserv ships with four themes: **dark** (default), **light**, **synthwave**, and **solarized**. You can set the theme from the CLI:
+
+```shell
+# Use light theme
+markserv --light README.md
+
+# Use synthwave theme
+markserv --synthwave README.md
+
+# Or use the --theme flag for any theme
+markserv --theme solarized README.md
+```
+
+You can also toggle between themes in the browser using the theme button in the bottom-right corner. Your choice is saved in `localStorage` and persists across hot-reloads.
+
 ## :link: Markdown Links
 
 You can link to an external Markdown file in the same way that you use GitHub Wiki links. You can use the example code here to see how external links work.
@@ -105,7 +122,13 @@ Example link:
 
 ## :stopwatch: Just in Time Templating
 
-Markserv allows you to include nested content. Templates are fetched and rendered when you request them in your browser. The `maxDepth` of includes is set to `10`.
+Markserv allows you to include nested content using `--templates`. Templates are fetched and rendered when you request them in your browser. The `maxDepth` of includes is set to `10`.
+
+**Note:** Templating is disabled by default. Enable it with `--templates`:
+
+```shell
+markserv --templates README.md
+```
 
 If you would like to look at an example, you can look in the [tests/templates](tests/templates/) directory of this repo.
 
@@ -114,7 +137,7 @@ To see the server output of this templating example:
 ```shell
 $ git clone@github.com/f1lt3r/markserv.git
 $ cd markserv
-$ markserv tests/templates/index.html
+$ markserv --templates tests/templates/index.html
 ```
 
 ### Include Markdown

package/lib/cli-defs.js

@@ -5,9 +5,10 @@ module.exports = {
 			default: '8642'
 		},
 
-		livereloadport: {
-			alias: 'b',
-			default: 35729
+		hotreload: {
+			alias: 'l',
+			type: 'boolean',
+			default: true
 		},
 
 		address: {
@@ -23,6 +24,25 @@ module.exports = {
 		verbose: {
 			alias: 'v',
 			default: false
+		},
+
+		theme: {
+			default: 'dark'
+		},
+
+		light: {
+			type: 'boolean',
+			default: false
+		},
+
+		synthwave: {
+			type: 'boolean',
+			default: false
+		},
+
+		templates: {
+			type: 'boolean',
+			default: false
 		}
 	}
 }

package/lib/cli-help.txt

@@ -3,9 +3,12 @@ $ markserv <file/dir>
 $ readme (serve closest README.md file)
 
 Options
-	--port, -p,  HTTP port [port] (80)
-	--livereloadport, -l  LiveReload port [port/false] (35729)
+	--port, -p,  HTTP port [port] (8642)
+	--hotreload, -l  Hot-reload via WebSocket (true), disable with --no-hotreload
 	--browser, -b  Launch browser (true)
 	--silent, -i  Silent (false)
 	--address, -a  Serve on ip/address [address] (localhost)
-	--verbose, -v  Verbose output (false)
+	--verbose, -v  Verbose output (false)
+	--light  Use light theme (default: dark)
+	--synthwave  Use synthwave/retro-neon theme (default: dark)
+	--templates  Enable {file:}, {markdown:}, {html:}, {less:} templating (false)

package/lib/cli.js

@@ -14,21 +14,7 @@ const cliDefs = require('./cli-defs')
 const cliOpts = meow(cliHelp, cliDefs)
 
 const validateServerPath = (serverPath, cwd) => {
-	if (serverPath === cwd) {
-		return cwd
-	}
-
-	let validatedPath
-
-	if (serverPath[0]) {
-		validatedPath = path.normalize(path.join(cwd, serverPath))
-	}
-
-	if (serverPath[0] === '/' || serverPath[0] === '.') {
-		validatedPath = path.normalize(path.join(cwd, serverPath))
-	}
-
-	return validatedPath
+	return path.resolve(cwd, serverPath)
 }
 
 const run = opts => {

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')
@@ -166,12 +166,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 +296,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 +320,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 +343,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 +360,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 +377,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 +394,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 +435,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 +499,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 +543,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 +568,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 +606,8 @@ const createRequestHandler = flags => {
 	}
 }
 
-const startConnectApp = (liveReloadPort, httpRequestHandler) => {
+const startConnectApp = httpRequestHandler => {
 	return connect()
-		.use(connectLiveReload({
-			port: liveReloadPort
-		}))
 		.use('/', httpRequestHandler)
 }
 
@@ -551,33 +624,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 +884,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 +918,7 @@ const init = async flags => {
 	const service = {
 		pid: process.pid,
 		httpServer,
-		liveReloadServer,
+		hotReloadServer,
 		connectApp,
 		launchUrl
 	}