From 24a0a3a36eebe80e9ee77c3e18e845176ceb35dc Mon Sep 17 00:00:00 2001 From: imcuttle Date: Thu, 1 Nov 2018 22:53:37 +0800 Subject: [PATCH 1/3] Add detect-one-changed for hot locating --- .gitignore | 1 + package.json | 1 + public/client.js | 3 +++ server.js | 52 +++++++++++++++++++++++++++++------------------- test/all.js | 4 ++++ 5 files changed, 41 insertions(+), 20 deletions(-) diff --git a/.gitignore b/.gitignore index 552f221..cb5c038 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ node_modules/ *.log +/.idea/ \ No newline at end of file diff --git a/package.json b/package.json index ff247ee..ce134b9 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "body-parser": "^1.9.2", "chokidar": "^2.0.0", + "detect-one-changed": "^1.2.0", "express": "^4.10.2", "markdown-it": "^8.3.1", "markdown-it-emoji": "^1.4.0", diff --git a/public/client.js b/public/client.js index 56b90b2..02873bc 100644 --- a/public/client.js +++ b/public/client.js @@ -12,6 +12,9 @@ socket.on('content', function (data) { $('pre').each(function (_, block) { hljs.highlightBlock(block) }) + + var updated = $('.markdown-body .detected-updated').get(0) + updated && updated.scrollIntoView && updated.scrollIntoView({ behavior: 'smooth' }) }) socket.on('title', function (data) { diff --git a/server.js b/server.js index d88bb2b..90f5612 100644 --- a/server.js +++ b/server.js @@ -11,16 +11,7 @@ var markdownIt = require('markdown-it') var markdownItTaskCheckbox = require('markdown-it-task-checkbox') var markdownItEmoji = require('markdown-it-emoji') var markdownItGitHubHeadings = require('markdown-it-github-headings') - -var md = markdownIt({ - html: true, - linkify: true -}) -md.use(markdownItTaskCheckbox) -md.use(markdownItEmoji) -md.use(markdownItGitHubHeadings, { - prefix: '' -}) +var detectHtml = require('detect-one-changed').detectHtml var app = express() var server = http.Server(app) @@ -37,6 +28,7 @@ function Server (opts) { var self = this + this.fileContentsCache = new Map() this.port = opts.port || 1337 this.URI = 'http://localhost:' + this.port this.sock = {emit: function () {}} @@ -48,15 +40,39 @@ function Server (opts) { this.watch = function (path) { var self = this chokidar.watch(path).on('change', function (path, stats) { - fs.readFile(path, 'utf8', function (err, data) { - if (err) throw err - data = data || '' - self.sock.emit('content', md.render(data)) - }) + self.emitFile(path) }) } } +Server.prototype.emitFile = function (filePath) { + var self = this + var md = markdownIt({ + html: true, + linkify: true + }) + md.use(markdownItTaskCheckbox) + md.use(markdownItEmoji) + md.use(markdownItGitHubHeadings, { + prefix: '' + }) + return new Promise((resolve, reject) => { + fs.readFile(filePath, 'utf8', function (err, data) { + if (err) reject(err) + data = data || '' + var cache = self.fileContentsCache + var currentRendered = md.render(data) + var prevRendered = cache.get(filePath) + cache.set(filePath, currentRendered) + if (cache && cache.has(filePath) && prevRendered) { + currentRendered = detectHtml(prevRendered, currentRendered, { position: false, ast: false }).text + } + self.sock.emit('content', currentRendered) + resolve() + }) + }) +} + Server.prototype.stop = function (next) { request.del(this.URI, { headers: { @@ -81,11 +97,7 @@ Server.prototype.start = function (filePath, next) { io.on('connection', function (sock) { self.sock = sock self.sock.emit('title', path.basename(filePath)) - fs.readFile(filePath, 'utf8', function (err, data) { - if (err) throw err - data = data || '' - self.sock.emit('content', md.render(data)) - }) + self.emitFile(filePath) }) app.use(parser.json()) diff --git a/test/all.js b/test/all.js index f8c36aa..23dca62 100644 --- a/test/all.js +++ b/test/all.js @@ -45,9 +45,13 @@ describe('livedown', function () { it('live updates the rendered markdown', function (done) { browser.visit('http://localhost:1337', function (error) { if (error) throw error + expect(server.fileContentsCache.size).to.eql(1) + expect(server.fileContentsCache.has(fixturePath)).to.eql(true) fs.writeFile(fixturePath, '## h2', function () { setTimeout(function () { expect(browser.evaluate("$('.markdown-body h2').text()")).to.be('h2') + expect(browser.evaluate("$('.markdown-body .detected-updated').prop('localName')")).to.be('a') + expect(server.fileContentsCache.size).to.eql(1) done() }, 500) }) From bf97a9f3ba6579737e88271ff7bdaac5c50d01e4 Mon Sep 17 00:00:00 2001 From: imcuttle Date: Fri, 2 Nov 2018 11:39:59 +0800 Subject: [PATCH 2/3] Add detect-one-changed highlight style --- package.json | 2 +- public/style.css | 56 +++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 49 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index ce134b9..a4e2389 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "body-parser": "^1.9.2", "chokidar": "^2.0.0", - "detect-one-changed": "^1.2.0", + "detect-one-changed": "^1.3.0", "express": "^4.10.2", "markdown-it": "^8.3.1", "markdown-it-emoji": "^1.4.0", diff --git a/public/style.css b/public/style.css index a9d9503..3908c30 100644 --- a/public/style.css +++ b/public/style.css @@ -1,13 +1,53 @@ .markdown-body { - box-sizing: border-box; - min-width: 200px; - max-width: 980px; - margin: 0 auto; - padding: 45px; + box-sizing: border-box; + min-width: 200px; + max-width: 980px; + margin: 0 auto; + padding: 45px; } @media (max-width: 767px) { - .markdown-body { - padding: 15px; - } + .markdown-body { + padding: 15px; + } +} + +@-webkit-keyframes bling { + 0% { + background-color: #d9edf7; + } + to { + background-color: #d9edf7; + } +} +@-moz-keyframes bling { + 0% { + background-color: #d9edf7; + } + to { + background-color: #d9edf7; + } +} +@-o-keyframes bling { + 0% { + background-color: #d9edf7; + } + to { + background-color: #d9edf7; + } +} +@keyframes bling { + 0% { + background-color: #d9edf7; + } + to { + background-color: #d9edf7; + } +} +.detected-updated, +.detected-updated pre { + -webkit-animation: bling 2.5s 1; + -moz-animation: bling 2.5s 1; + -o-animation: bling 2.5s 1; + animation: bling 2.5s 1; } From 6919b30f58f7a49889cfb26ba935bcbc414b2f92 Mon Sep 17 00:00:00 2001 From: imcuttle Date: Fri, 2 Nov 2018 11:41:19 +0800 Subject: [PATCH 3/3] Update test --- test/all.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/all.js b/test/all.js index 23dca62..d21ff87 100644 --- a/test/all.js +++ b/test/all.js @@ -50,7 +50,7 @@ describe('livedown', function () { fs.writeFile(fixturePath, '## h2', function () { setTimeout(function () { expect(browser.evaluate("$('.markdown-body h2').text()")).to.be('h2') - expect(browser.evaluate("$('.markdown-body .detected-updated').prop('localName')")).to.be('a') + expect(browser.evaluate("$('.markdown-body .detected-updated').prop('localName')")).to.be('h2') expect(server.fileContentsCache.size).to.eql(1) done() }, 500)