Update slide mode to show extra info and support url actions and support disqus via yaml-metadata

app.js

@@ -464,6 +464,8 @@ app.get("/s/:shortid", response.showPublishNote);
 app.get("/s/:shortid/:action", response.publishNoteActions);
 //get publish slide
 app.get("/p/:shortid", response.showPublishSlide);
+//publish slide actions
+app.get("/p/:shortid/:action", response.publishSlideActions);
 //get note by id
 app.get("/:noteId", response.showNote);
 //note actions

lib/models/note.js

@@ -241,6 +241,8 @@ module.exports = function (sequelize, DataTypes) {
                         _meta.robots = meta.robots;
                     if (meta.GA && (typeof meta.GA == "string" || typeof meta.GA == "number"))
                         _meta.GA = meta.GA;
+                    if (meta.disqus && (typeof meta.disqus == "string" || typeof meta.disqus == "number"))
+                        _meta.disqus = meta.disqus;
                     if (meta.slideOptions && (typeof meta.slideOptions == "object"))
                         _meta.slideOptions = meta.slideOptions;
                 }

lib/response.js

@@ -47,6 +47,7 @@ var response = {
     showIndex: showIndex,
     noteActions: noteActions,
     publishNoteActions: publishNoteActions,
+    publishSlideActions: publishSlideActions,
     githubActions: githubActions,
     gitlabActions: gitlabActions
 };
@@ -241,7 +242,8 @@ function showPublishNote(req, res, next) {
                 useCDN: config.usecdn,
                 lastchangeuserprofile: note.lastchangeuser ? models.User.parseProfile(note.lastchangeuser.profile) : null,
                 robots: meta.robots || false, //default allow robots
-                GA: meta.GA
+                GA: meta.GA,
+                disqus: meta.disqus
             };
             return renderPublish(data, res);
         }).catch(function (err) {
@@ -410,6 +412,20 @@ function publishNoteActions(req, res, next) {
     });
 }
 
+function publishSlideActions(req, res, next) {
+    findNote(req, res, function (note) {
+        var action = req.params.action;
+        switch (action) {
+        case "edit":
+            res.redirect(config.serverurl + '/' + (note.alias ? note.alias : LZString.compressToBase64(note.id)));
+            break;
+        default:
+            res.redirect(config.serverurl + '/p/' + note.shortid);    
+            break;
+        }
+    });
+}
+
 function githubActions(req, res, next) {
     var noteId = req.params.noteId;
     findNote(req, res, function (note) {
@@ -530,6 +546,13 @@ function gitlabActionProjects(req, res, note) {
 }
 
 function showPublishSlide(req, res, next) {
+    var include = [{
+        model: models.User,
+        as: "owner"
+    }, {
+        model: models.User,
+        as: "lastchangeuser"
+    }];
     findNote(req, res, function (note) {
         // force to use short id
         var shortid = req.params.shortid;
@@ -549,26 +572,34 @@ function showPublishSlide(req, res, next) {
                 //na
             }
             if (!meta) meta = {};
+            var createtime = note.createdAt;
+            var updatetime = note.lastchangeAt;
             var text = S(body).escapeHTML().s;
             var title = models.Note.decodeTitle(note.title);
             title = models.Note.generateWebTitle(meta.title || title);
             var slides = md.slidify(text, slideOptions);
             var origin = config.serverurl;
             var data = {
-                url: origin,
                 title: title,
                 description: meta.description,
+                viewcount: note.viewcount,
+                createtime: createtime,
+                updatetime: updatetime,
+                url: origin,
                 slides: slides,
                 meta: JSON.stringify(obj.meta || {}),
+                useCDN: config.usecdn,
+                lastchangeuserprofile: note.lastchangeuser ? models.User.parseProfile(note.lastchangeuser.profile) : null,
+                robots: meta.robots || false, //default allow robots
                 GA: meta.GA,
-                useCDN: config.usecdn
+                disqus: meta.disqus
             };
             return renderPublishSlide(data, res);
         }).catch(function (err) {
             logger.error(err);
             return response.errorInternalError(res);
         });
-    });
+    }, include);
 }
 
 function renderPublishSlide(data, res) {

public/css/slide.css

@@ -264,3 +264,29 @@ pre.mermaid > svg {
 	direction: rtl;
 	font-family: inherit;
 }
+
+.text-uppercase {
+    text-transform: uppercase;
+}
+
+.footer {
+    background-color: white;
+    padding: 25px 15px;
+}
+
+.footer > * {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 758px;
+}
+
+.reveal {
+    height: 100vh;
+}
+
+.reveal .progress,
+.reveal .slide-number,
+.reveal .playback,
+.reveal .controls {
+    position: absolute;
+}

public/docs/yaml-metadata.md

@@ -117,6 +117,17 @@ This option allow you to enable Google Analytics with your ID.
 GA: UA-12345667-8
 ```
 
+disqus
+---
+This option allow you to enable Disqus with your shortname.
+
+> default: not set (which won't enable)
+
+**Example**
+```xml
+disqus: hackmd
+```
+
 slideOptions
 ---
 This option allow you provide custom options to slide mode.

public/js/slide.js

@@ -1,6 +1,17 @@
 var body = $(".slides").html();
 $(".slides").html(S(body).unescapeHTML().s);
 
+createtime = lastchangeui.time.attr('data-createtime');
+lastchangetime = lastchangeui.time.attr('data-updatetime');
+updateLastChange();
+var url = window.location.pathname;
+$('.ui-edit').attr('href', url + '/edit');
+
+$(document).ready(function () {
+    //tooltip
+    $('[data-toggle="tooltip"]').tooltip();
+});
+
 function extend() {
     var target = {};
     for (var i = 0; i < arguments.length; i++) {

public/views/disqus.ejs

@@ -0,0 +1,14 @@
+<div id="disqus_thread"></div>
+<script>
+var disqus_config = function () {
+    this.page.identifier = window.location.pathname.split('/').slice(-1)[0];
+};
+(function() {
+    var d = document, s = d.createElement('script');
+    s.src = '//<%- disqus %>.disqus.com/embed.js';
+    s.setAttribute('data-timestamp', +new Date());
+    (d.head || d.body).appendChild(s);
+})();
+</script>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+                                    

public/views/pretty.ejs

@@ -72,6 +72,11 @@
         </div>
     </div>
     <div id="toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="display:none;"></div>
+    <% if(typeof disqus !== 'undefined' && disqus) { %>
+    <div class="container-fluid" style="max-width: 758px; margin-bottom: 40px;">
+        <%- include disqus %>
+    </div>
+    <% } %>
 </body>
 
 </html>

public/views/slide.ejs

@@ -23,6 +23,7 @@
         <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
         <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
         <% } %>
+        <link rel="stylesheet" href='<%- url %>/vendor/bootstrap/tooltip.min.css'>
 
         <link rel="stylesheet" href="<%- url %>/vendor/reveal.js/css/reveal.css">
         <link rel="stylesheet" href="<%- url %>/vendor/reveal.js/css/theme/black.css" id="theme">
@@ -52,6 +53,28 @@
 
         <div id="meta" style="display: none;"><%- meta %></div>
 
+        <div class="footer">
+            <div class="unselectable hidden-print" style="color: #777;">
+                <small>
+                    <span>
+                        <% if(lastchangeuserprofile) { %>
+                            <span class="ui-lastchangeuser">&thinsp;<i class="ui-user-icon small" style="background-image: url(<%- lastchangeuserprofile.photo %>);" data-toggle="tooltip" data-placement="right" title="<%- lastchangeuserprofile.name %>"></i></span>
+                        <% } else { %>
+                            <span class="ui-no-lastchangeuser">&thinsp;<i class="fa fa-clock-o"></i></span>
+                        <% } %>
+                        &nbsp;<span class="text-uppercase ui-status-lastchange"></span>
+                        <span class="ui-lastchange text-uppercase" data-createtime="<%- createtime %>" data-updatetime="<%- updatetime %>"></span>
+                    </span>
+                    <span class="pull-right"><%- viewcount %> views <a href="#" class="ui-edit" title="Edit this note"><i class="fa fa-fw fa-pencil"></i></a></span>
+                </small>
+            </div>
+            <% if(typeof disqus !== 'undefined' && disqus) { %>
+            <div style="margin-top: 25px; margin-bottom: 15px;">
+                <%- include disqus %>
+            </div>
+            <% } %>
+        </div>
+
         <script type="text/x-mathjax-config">
             MathJax.Hub.Config({ messageStyle: "none", skipStartupTypeset: true ,tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true }});
         </script>
@@ -70,6 +93,7 @@
         <script src="<%- url %>/vendor/moment/min/moment-with-locales.js" defer></script>
         <script src="<%- url %>/vendor/mermaid/dist/mermaid.min.js" defer></script>
         <% } %>
+        <script src="<%- url %>/vendor/bootstrap/tooltip.min.js"></script>
         <script src="<%- url %>/vendor/reveal.js/lib/js/head.min.js"></script>
         <script src="<%- url %>/vendor/reveal.js/js/reveal.js"></script>
         <script src="<%- url %>/vendor/xss/dist/xss.min.js" defer></script>