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

This commit is contained in:
Wu Cheng-Han 2016-08-15 11:25:27 +08:00
parent e12fae6999
commit a013c9d3bc
11 changed files with 155 additions and 4 deletions

2
app.js
View File

@ -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

View File

@ -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;
}

39
lib/response.js Normal file → Executable file
View File

@ -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) {

View File

@ -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;
}

View File

@ -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.

View File

@ -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++) {

14
public/vendor/bootstrap/tooltip.min.css vendored Executable file

File diff suppressed because one or more lines are too long

11
public/vendor/bootstrap/tooltip.min.js vendored Executable file

File diff suppressed because one or more lines are too long

14
public/views/disqus.ejs Normal file
View File

@ -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>

View File

@ -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>

View File

@ -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>