Added support of export to HTML, and changed the navbar menu for consistency

public/css/compress.sh

@@ -0,0 +1 @@
+cleancss -o html.min.css github-extract.css markdown.css extra.css site.css

public/js/extra.js

@@ -212,8 +212,70 @@ function postProcess(code) {
     result.find('a:not([target])').attr('target', '_blank');
     return result;
 }
+
+//extract markdown body to html and compile to template
+function exportToHTML(view) {
+    var title = renderTitle(ui.area.markdown);
+    var filename = renderFilename(ui.area.markdown) + '.html';
+    var src = view.clone();
+    var eles = src.find('*');
+    //remove syncscroll parts
+    eles.removeClass('part');
+    src.find('*[class=""]').removeAttr('class');
+    eles.removeAttr('data-startline data-endline');
+    eles.find("a[href^='#'][smoothhashscroll]").removeAttr('smoothhashscroll');
+    //remove gist content
+    src.find("code[data-gist-id]").children().remove();
+    //disable todo list
+    src.find("input.task-list-item-checkbox").attr('disabled', '');
+    //replace emoji image path
+    src.find("img.emoji").each(function (key, value) {
+        var name = $(value).attr('alt');
+        name = name.substr(1);
+        name = name.slice(0, name.length - 1);
+        $(value).attr('src', 'https://www.tortue.me/emoji/' + name + '.png');
+    });
+    //replace video to iframe
+    src.find("div[videoid]").each(function (key, value) {
+        var id = $(value).attr('videoid');
+        var style = $(value).attr('style');
+        var url = null;
+        if ($(value).hasClass('youtube')) {
+            url = 'https://www.youtube.com/embed/';
+        } else if ($(value).hasClass('vimeo')) {
+            url = 'https://player.vimeo.com/video/';
         }
+        if (url) {
+            var iframe = $('<iframe frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
+            iframe.attr('src', url + id);
+            iframe.attr('style', style);
+            $(value).html(iframe);
         }
+    });
+    //generate toc
+    var toc = $('#toc').clone();
+    toc.find('*').removeClass('active');
+    var tocAffix = $('#toc-affix').clone();
+    tocAffix.find('*').removeClass('active');
+    //generate html via template
+    $.get('/css/html.min.css', function (css) {
+        $.get('/views/html.hbs', function (data) {
+            var template = Handlebars.compile(data);
+            var context = {
+                title: title,
+                css: css,
+                html: src[0].outerHTML,
+                toc: toc.html(),
+                'toc-affix': tocAffix.html()
+            };
+            var html = template(context);
+            //        console.log(html);
+            var blob = new Blob([html], {
+                type: "text/html;charset=utf-8"
+            });
+            saveAs(blob, filename);
+        });
+    });
 }
 
 //jQuery sortByDepth

public/js/index.js

@@ -285,9 +285,10 @@ var ui = {
         new: $(".ui-new"),
         publish: $(".ui-publish"),
         download: {
-            markdown: $(".ui-download-markdown")
+            markdown: $(".ui-download-markdown"),
+            html: $(".ui-download-html")
         },
-        save: {
+        export: {
             dropbox: $(".ui-save-dropbox")
         },
         import: {
@@ -801,8 +802,12 @@ ui.toolbar.download.markdown.click(function () {
     });
     saveAs(blob, filename);
 });
-//save to dropbox
+//html
-ui.toolbar.save.dropbox.click(function () {
+ui.toolbar.download.html.click(function () {
+    exportToHTML(ui.area.markdown);
+});
+//export to dropbox
+ui.toolbar.export.dropbox.click(function () {
     var filename = renderFilename(ui.area.markdown) + '.md';
     var options = {
         files: [

public/views/header.ejs

@@ -27,20 +27,22 @@
                 <li role="presentation"><a role="menuitem" class="ui-publish" tabindex="-1" href="#" target="_blank"><i class="fa fa-print fa-fw"></i> Publish</a>
                 </li>
                 <li class="divider"></li>
-                <li class="dropdown-header">Save</li>
+                <li class="dropdown-header">Export</li>
                 <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                 </li>
                 <li class="divider"></li>
-                <li class="dropdown-header">Download</li>
-                <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
-                </li>
-                <li class="divider"></li>
                 <li class="dropdown-header">Import</li>
                 <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                 </li>
                 <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
                 </li>
                 <li class="divider"></li>
+                <li class="dropdown-header">Download</li>
+                <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
+                </li>
+                <li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
+                </li>
+                <li class="divider"></li>
                 <li><a href="https://www.facebook.com/messages/866415986748945" class="ui-feedback" title="Feedback" target="_blank"><i class="fa fa-bullhorn fa-fw"></i> Feedback</a>
                 </li>
             </ul>
@@ -94,17 +96,21 @@
                     Menu <i class="fa fa-caret-down"></i>
                 </a>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="menu">
-                    <li class="dropdown-header">Save</li>
+                    <li class="dropdown-header">Export</li>
                     <li role="presentation"><a role="menuitem" class="ui-save-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                     </li>
-                    <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
-                    </li>
                     <li class="divider"></li>
                     <li class="dropdown-header">Import</li>
                     <li role="presentation"><a role="menuitem" class="ui-import-dropbox" tabindex="-1" href="#" target="_self"><i class="fa fa-dropbox fa-fw"></i> Dropbox</a>
                     </li>
                     <li role="presentation"><a role="menuitem" class="ui-import-clipboard" href="#" data-toggle="modal" data-target="#clipboardModal"><i class="fa fa-clipboard fa-fw"></i> Clipboard</a>
                     </li>
+                    <li class="divider"></li>
+                    <li class="dropdown-header">Download</li>
+                    <li role="presentation"><a role="menuitem" class="ui-download-markdown" tabindex="-1" href="#" target="_self"><i class="fa fa-file-text fa-fw"></i> Markdown</a>
+                    </li>
+                    <li role="presentation"><a role="menuitem" class="ui-download-html" tabindex="-1" href="#" target="_self"><i class="fa fa-file-code-o fa-fw"></i> HTML</a>
+                    </li>
                 </ul>
             </li>
         </ul>

public/views/html.hbs

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="mobile-web-app-capable" content="yes">
+    <title>
+        {{title}}
+    </title>
+    <link rel="icon" type="image/png" href="https://hackmd.io/favicon.png">
+    <link rel="apple-touch-icon" href="https://hackmd.io/apple-touch-icon.png">
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.8.0/styles/github-gist.min.css">
+    <style>
+        {{{css}}}
+    </style>
+</head>
+
+<body>
+    {{{html}}}
+    <div class="ui-toc dropup unselectable hidden-print" style="display:none;">
+        <div class="pull-right dropdown">
+            <a id="tocLabel" class="ui-toc-label btn btn-default" data-target="#" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
+                <i class="fa fa-bars"></i>
+            </a>
+            <ul id="toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
+                {{{toc}}}
+            </ul>
+        </div>
+    </div>
+    <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;">
+        {{{toc-affix}}}
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.2/gist-embed.min.js" defer></script>
+    <script>
+        var markdown = $(".markdown-body");
+        //smooth all hash trigger scrolling
+        function smoothHashScroll() {
+            var hashElements = $("a[href^='#']").toArray();
+            for (var i = 0; i < hashElements.length; i++) {
+                var element = hashElements[i];
+                var $element = $(element);
+                var hash = element.hash;
+                if (hash) {
+                    $element.on('click', function (e) {
+                        // store hash
+                        var hash = this.hash;
+                        if ($(hash).length <= 0) return;
+                        // prevent default anchor click behavior
+                        e.preventDefault();
+                        // animate
+                        $('body, html').stop(true, true).animate({
+                            scrollTop: $(hash).offset().top
+                        }, 100, "linear", function () {
+                            // when done, add hash to url
+                            // (default click behaviour)
+                            window.location.hash = hash;
+                        });
+                    });
+                }
+            }
+        }
+
+        smoothHashScroll();
+        var toc = $('.ui-toc');
+        var tocAffix = $('.ui-affix-toc');
+        var tocDropdown = $('.ui-toc-dropdown');
+        //toc
+        tocDropdown.click(function (e) {
+            e.stopPropagation();
+        });
+
+        var enoughForAffixToc = true;
+
+        function generateScrollspy() {
+            $(document.body).scrollspy({
+                target: ''
+            });
+            $(document.body).scrollspy('refresh');
+            if (enoughForAffixToc) {
+                toc.hide();
+                tocAffix.show();
+            } else {
+                tocAffix.hide();
+                toc.show();
+            }
+            $(document.body).scroll();
+        }
+
+        function windowResize() {
+            //toc right
+            var paddingRight = parseFloat(markdown.css('padding-right'));
+            var right = ($(window).width() - (markdown.offset().left + markdown.outerWidth() - paddingRight));
+            toc.css('right', right + 'px');
+            //affix toc left
+            var newbool;
+            var rightMargin = (markdown.parent().outerWidth() - markdown.outerWidth()) / 2;
+            //for ipad or wider device
+            if (rightMargin >= 133) {
+                newbool = true;
+                var affixLeftMargin = (tocAffix.outerWidth() - tocAffix.width()) / 2;
+                var left = markdown.offset().left + markdown.outerWidth() - affixLeftMargin;
+                tocAffix.css('left', left + 'px');
+            } else {
+                newbool = false;
+            }
+            if (newbool != enoughForAffixToc) {
+                enoughForAffixToc = newbool;
+                generateScrollspy();
+            }
+        }
+        $(window).resize(function () {
+            windowResize();
+        });
+        $(document).ready(function () {
+            windowResize();
+            generateScrollspy();
+        });
+
+        //remove hash
+        function removeHash() {
+            window.location.hash = '';
+        }
+
+        var backtotop = $('.back-to-top');
+        var gotobottom = $('.go-to-bottom');
+
+        backtotop.click(function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (scrollToTop)
+                scrollToTop();
+            removeHash();
+        });
+        gotobottom.click(function (e) {
+            e.preventDefault();
+            e.stopPropagation();
+            if (scrollToBottom)
+                scrollToBottom();
+            removeHash();
+        });
+
+        function scrollToTop() {
+            $('body, html').stop(true, true).animate({
+                scrollTop: 0
+            }, 100, "linear");
+        }
+
+        function scrollToBottom() {
+            $('body, html').stop(true, true).animate({
+                scrollTop: $(document.body)[0].scrollHeight
+            }, 100, "linear");
+        }
+    </script>
+</body>
+
+</html>