Inline CSS & JS into HTML export template
Previously, the HTML export template `html.hbs` included CDN links for the HTML and CSS resources. This commit enables Webpack to create a new `htmlexport.html` at build-time, which includes all resources inline. That template is then used as before by the frontend to be populated with the rendered note content. The tradeoff is that each exported .html file is about 5.6 MB in size, as we need to inline all fonts (icons & emojis). Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren
186
public/views/htmlexport.ejs
Normal file
186
public/views/htmlexport.ejs
Normal file
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<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="apple-touch-icon" sizes="180x180" href="{{{url}}}/icons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{{{url}}}/icons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{{{url}}}/icons/favicon-16x16.png">
|
||||
<link rel="manifest" href="{{{url}}}/icons/site.webmanifest">
|
||||
<link rel="mask-icon" href="{{{url}}}/icons/safari-pinned-tab.svg" color="#b51f08">
|
||||
<link rel="shortcut icon" href="{{{url}}}/icons/favicon.ico">
|
||||
|
||||
<% _.forEach(htmlWebpackPlugin.files.css, function(cssFile) { %><style><%= compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></style><% }); %>
|
||||
</head>
|
||||
|
||||
<body translate="no">
|
||||
{{{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-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" title="Table of content">
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul id="ui-toc" class="ui-toc-dropdown dropdown-menu" aria-labelledby="tocLabel">
|
||||
{{{ui-toc}}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="ui-toc-affix" class="ui-affix-toc ui-toc-dropdown unselectable hidden-print" data-spy="affix" style="top:17px;display:none;" {{{lang}}} {{{dir}}}>
|
||||
{{{ui-toc-affix}}}
|
||||
</div>
|
||||
<% _.forEach(htmlWebpackPlugin.files.js, function(jsFile) { %><script><%= compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source() %></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();
|
||||
});
|
||||
|
||||
var toggle = $('.expand-toggle');
|
||||
var tocExpand = false;
|
||||
|
||||
checkExpandToggle();
|
||||
toggle.click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
tocExpand = !tocExpand;
|
||||
checkExpandToggle();
|
||||
})
|
||||
|
||||
function checkExpandToggle () {
|
||||
var toc = $('.ui-toc-dropdown .toc');
|
||||
var toggle = $('.expand-toggle');
|
||||
if (!tocExpand) {
|
||||
toc.removeClass('expand');
|
||||
toggle.text('Expand all');
|
||||
} else {
|
||||
toc.addClass('expand');
|
||||
toggle.text('Collapse all');
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user