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

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>