Merge branch 'master' of github.com:simov/markdown-viewer into compilers

build/prism/index.js

@@ -44,17 +44,6 @@ source += config['markdown-viewer'].reduce((source, component) => (
 fs.writeFileSync(path.resolve(__dirname, '../../vendor/prism.min.js'), source, 'utf8')
 
 
-// print the excluded ones and their corresponding files sizes
-console.log('Excluded:')
-config.all
-  .filter((component) => !config['markdown-viewer'].includes(component))
-  .map((component) => console.log(
-    component, '\t\t\t',
-    fs.lstatSync(path.resolve(__dirname,
-      `../../node_modules/prismjs/components/prism-${component}.min.js`)).size
-  ))
-
-
 // build css
 var csso = require('csso')
 
@@ -68,3 +57,29 @@ fs.writeFileSync(
   csso.minify(source).css,
   'utf8'
 )
+
+
+// print stats
+var included = config.all
+  .filter((name) => config['markdown-viewer'].includes(name))
+  .map((name) => ({
+    name,
+    size: fs.lstatSync(path.resolve(__dirname,
+      `../../node_modules/prismjs/components/prism-${name}.min.js`)).size
+  }))
+
+var excluded = config.all
+  .filter((name) => !config['markdown-viewer'].includes(name))
+  .map((name) => ({
+    name,
+    size: fs.lstatSync(path.resolve(__dirname,
+      `../../node_modules/prismjs/components/prism-${name}.min.js`)).size
+  }))
+
+console.log('Excluded:')
+excluded // sorted by name
+  // .sort((a, b) => b.size - a.size) // sorted by size
+  .forEach(({name, size}) => console.log(name, '\t\t\t', size))
+
+console.log('Included:', included.length, included.reduce((total, {size}) => total += size, 0))
+console.log('Excluded:', excluded.length, excluded.reduce((total, {size}) => total += size, 0))

build/prism/prism.json

@@ -211,6 +211,7 @@
     "go",
     "graphql",
     "haskell",
+    "hcl",
     "java",
     "javascript",
     "json",
@@ -226,6 +227,7 @@
     "perl",
     "php",
     "prolog",
+    "protobuf",
     "python",
     "r",
     "reason",

content/index.css

@@ -68,11 +68,11 @@ body._toc-right { padding-right: 300px !important; }
   overflow-y: auto;
   overflow-x: hidden;
 }
-#_toc #_ul {
+#_toc ._ul {
   padding: 0 0 0 20px !important;
   margin: 0 !important;
 }
-#_toc #_ul a {
+#_toc ._ul a {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
   font-size: 14px !important;
   line-height: 17px !important;
@@ -87,7 +87,7 @@ body._toc-right { padding-right: 300px !important; }
   padding: 10px 15px !important;
   display: block !important;
 }
-#_toc #_ul a:hover {
+#_toc ._ul a:hover {
   text-decoration: underline !important;
 }
 

content/index.js

@@ -32,10 +32,10 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
 
 var oncreate = {
   markdown: () => {
-    scroll()
+    scroll.body()
   },
   html: () => {
-    scroll()
+    scroll.body()
 
     if (state.content.toc && !state.toc) {
       state.toc = toc()
@@ -45,6 +45,9 @@ var oncreate = {
     setTimeout(() => Prism.highlightAll(), 20)
 
     anchors()
+  },
+  toc: () => {
+    scroll.toc()
   }
 }
 
@@ -84,7 +87,9 @@ function mount () {
             m.trust(state.html)
           ))
           if (state.content.toc && state.toc) {
-            dom.push(m.trust(state.toc))
+            dom.push(m('#_toc', {oncreate: oncreate.toc},
+              m.trust(state.toc)
+            ))
             $('body').classList.add('_toc-left')
           }
           if (state.content.mathjax) {
@@ -101,7 +106,7 @@ function mount () {
   })
 }
 
-function scroll () {
+var scroll = (() => {
   function race (done) {
     var images = Array.from(document.querySelectorAll('img'))
     if (!images.length) {
@@ -117,45 +122,51 @@ function scroll () {
     })
     setTimeout(done, 100)
   }
-  function init () {
-    if (state.content.scroll) {
-      try {
-        var key = 'md-' + location.origin + location.pathname
-        $('body').scrollTop = parseInt(localStorage.getItem(key))
-        var timeout = null
-        window.addEventListener('scroll', () => {
-          clearTimeout(timeout)
-          timeout = setTimeout(() => {
-            localStorage.setItem(key, $('body').scrollTop)
-          }, 100)
-        })
-      }
-      catch (err) {
-        var key = 'md-' + location.origin + location.pathname
-        chrome.storage.local.get(key, (res) => {
-          $('body').scrollTop = parseInt(res[key])
-        })
-        var timeout = null
-        window.addEventListener('scroll', () => {
-          clearTimeout(timeout)
-          timeout = setTimeout(() => {
-            chrome.storage.local.set({[key]: $('body').scrollTop})
-          }, 100)
-        })
-      }
+  function debounce (container, done) {
+    var listener = /body/i.test(container.nodeName) ? window : container
+    var timeout = null
+    listener.addEventListener('scroll', () => {
+      clearTimeout(timeout)
+      timeout = setTimeout(done, 100)
+    })
+  }
+  function listen (container, prefix) {
+    var key = prefix + location.origin + location.pathname
+    try {
+      container.scrollTop = parseInt(localStorage.getItem(key))
+      debounce(container, () => {
+        localStorage.setItem(key, container.scrollTop)
+      })
     }
-    else if (location.hash && $(location.hash)) {
-      $('body').scrollTop = $(location.hash).offsetTop
+    catch (err) {
+      chrome.storage.local.get(key, (res) => {
+        container.scrollTop = parseInt(res[key])
+      })
+      debounce(container, () => {
+        chrome.storage.local.set({[key]: container.scrollTop})
+      })
     }
   }
-  var loaded
-  race(() => {
-    if (!loaded) {
-      init()
-      loaded = true
+  return {
+    body: () => {
+      var loaded
+      race(() => {
+        if (!loaded) {
+          loaded = true
+          if (state.content.scroll) {
+            listen($('body'), 'md-')
+          }
+          else if (location.hash && $(location.hash)) {
+            $('body').scrollTop = $(location.hash).offsetTop
+          }
+        }
+      })
+    },
+    toc: () => {
+      listen($('#_toc'), 'md-toc-')
     }
-  })
-}
+  }
+})()
 
 function anchors () {
   Array.from($('#_html').childNodes)
@@ -177,29 +188,14 @@ var toc = (
   .map((node) => ({
     id: node.getAttribute('id'),
     level: parseInt(node.tagName.replace('H', '')),
-    title: node.innerText
+    title: node.innerText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
   }))
-  .reduce((html, header, index, headers) => {
-    if (index) {
-      var prev = headers[index - 1]
-    }
-    if (!index || prev.level === header.level) {
-      html += link(header)
-    }
-    else if (prev.level > header.level) {
-      while (prev.level-- > header.level) {
-        html += '</div>'
-      }
-      html += link(header)
-    }
-    else if (prev.level < header.level) {
-      while (prev.level++ < header.level) {
-        html += '<div id="_ul">'
-      }
-      html += link(header)
-    }
+  .reduce((html, header) => {
+    html += '<div class="_ul">'.repeat(header.level)
+    html += link(header)
+    html += '</div>'.repeat(header.level)
     return html
-  }, '<div id="_toc"><div id="_ul">') + '</div></div>'
+  }, '')
 
 if (document.readyState === 'complete') {
   mount()

manifest.firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name"            : "Markdown Viewer",
-  "version"         : "3.7",
+  "version"         : "3.8",
   "description"     : "Markdown Viewer",
 
   "browser_action": {

manifest.test.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name"            : "Markdown Viewer",
-  "version"         : "3.7",
+  "version"         : "3.8",
   "description"     : "Markdown Viewer",
 
   "browser_action": {

package.json

@@ -17,10 +17,10 @@
     "@material/switch": "^0.36.1",
     "@material/tabs": "^0.37.1",
     "@material/textfield": "^0.37.1",
-    "marked": "^0.7.0",
+    "marked": "^0.8.0",
     "mithril": "^1.1.6",
     "prismjs": "^1.17.1",
-    "remark": "^11.0.1",
+    "remark": "^11.0.2",
     "remark-breaks": "^1.0.3",
     "remark-frontmatter": "^1.3.2",
     "remark-html": "^10.0.0",

test/popup-options.js

@@ -387,7 +387,7 @@ module.exports = ({popup, advanced, content}) => {
 
       t.deepStrictEqual(
         await content.evaluate(() =>
-          Array.from(document.querySelectorAll('#_toc #_ul a'))
+          Array.from(document.querySelectorAll('#_toc ._ul a'))
             .map((a) => ({href: a.getAttribute('href'), text: a.innerText}))
         ),
         [