Real CSS, inline SVG

This commit is contained in:
Shan Carter committed 2017-01-04 15:25:57 -08:00
1 parent 4c6ba1b1c3
commit 902696214f
15 files changed
+33 -61

No files matched your search

+3
View File
@@ -0,0 +1,3 @@
<svg viewBox="-607 419 64 64">
<path style="fill: none; stroke: black;stroke-width: 2px;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
</svg>

After

Width:  |  Height:  |  Size: 216 B

+5 -5
View File
@@ -1,3 +1,5 @@
import logo from "./distill-logo.svg";
const html = `
<style>
dt-footer {
@@ -15,8 +17,8 @@ dt-footer .logo svg {
margin-right: -2px;
}
dt-footer .logo svg path {
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 3px;
stroke: rgba(255, 255, 255, 0.8)!important;
stroke-width: 3px!important;
}
dt-footer .logo {
font-size: 16px;
@@ -29,9 +31,7 @@ dt-footer .logo {
<div class="l-body">
<a href="/" class="logo">
<svg viewBox="-607 419 64 64">
<path style="fill: none;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
</svg>
${logo}
Distill
</a> is dedicated to clear explanations of machine learning
</div>
+3 -3
View File
@@ -1,3 +1,5 @@
import logo from "./distill-logo.svg";
const html = `
<style>
dt-header {
@@ -47,9 +49,7 @@ dt-header .nav a {
<div class="content l-page">
<a href="/" class="logo">
<svg viewBox="-607 419 64 64">
<path style="fill: none; stroke: black;stroke-width: 2px;" d="M-573.4,478.9c-8,0-14.6-6.4-14.6-14.5s14.6-25.9,14.6-40.8c0,14.9,14.6,32.8,14.6,40.8S-565.4,478.9-573.4,478.9z"/>
</svg>
${logo}
Distill
</a>
<div class="nav">
-32
View File
@@ -1,32 +0,0 @@
/**
* @license
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
/**
* This shim allows elements written in, or compiled to, ES5 to work on native
* implementations of Custom Elements v1. It sets new.target to the value of
* this.constructor so that the native HTMLElement constructor can access the
* current under-construction element's definition.
*
* Because `new.target` is a syntax error in VMs that don't support it, this
* shim must only be loaded in browsers that do.
*/
(() => {
let origHTMLElement = HTMLElement;
// TODO(justinfagnani): Tests!!
window.HTMLElement = function() {
// prefer new.target for elements that call super() constructors or
// Reflect.construct directly
let newTarget = new.target || this.constructor;
return Reflect.construct(origHTMLElement, [], newTarget);
}
HTMLElement.prototype = Object.create(origHTMLElement.prototype, {
constructor: {value: HTMLElement, configurable: true, writable: true},
});
})();
@@ -1,4 +1,3 @@
export default `
dt-article {
color: rgba(0, 0, 0, 0.8);
font: 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
@@ -177,5 +176,3 @@ dt-article figure figcaption b {
font-weight: 600;
color: rgba(0, 0, 0, 1.0);
}
`
@@ -1,4 +1,3 @@
export default `
html {
font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
}
@@ -55,5 +54,3 @@ table {
border-collapse: collapse;
border-spacing: 0;
}*/
`;
@@ -1,4 +1,3 @@
export default `
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
@@ -148,4 +147,3 @@ pre[class*="language-"] {
.token.entity {
cursor: help;
}
`;
@@ -1,4 +1,3 @@
export default `
.l-body,
.l-page,
dt-article > * {
@@ -94,4 +93,3 @@ dt-article > * {
width: calc(960px / 2 - 48px);
}
}
`
+4 -4
View File
@@ -1,7 +1,7 @@
import base from './styles-base';
import layout from './styles-layout';
import article from './styles-article';
import code from './styles-code';
import base from './styles-base.css';
import layout from './styles-layout.css';
import article from './styles-article.css';
import code from './styles-code.css';
export default function(dom, data) {
let s = dom.createElement("style");
+2 -2
View File
@@ -1,3 +1,3 @@
document.write('<script src="http://'+(location.host||"localhost").split(":")[0]+':35729/livereload.js?snipver=1"></script>');var dl=function(){"use strict";function e(e,t){return t={exports:{}},e(t,t.exports),t.exports}function t(e,t){p(e,t),document.addEventListener("DOMContentLoaded",function(n){i(e,t),u(e,t),g(e,t),f(e,t),y(e,t),k(e,t),m(e,t)})}var n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},r=e(function(e,t){!function(e){function t(){this.months=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],this.notKey=[",","{","}"," ","="],this.pos=0,this.input="",this.entries=new Array,this.currentEntry="",this.setInput=function(e){this.input=e},this.getEntries=function(){return this.entries},this.isWhitespace=function(e){return" "==e||"\r"==e||"\t"==e||"\n"==e},this.match=function(e,t){if(void 0!=t&&null!=t||(t=!0),this.skipWhitespace(t),this.input.substring(this.pos,this.pos+e.length)!=e)throw"Token mismatch, expected "+e+", found "+this.input.substring(this.pos);this.pos+=e.length,this.skipWhitespace(t)},this.tryMatch=function(e,t){return void 0!=t&&null!=t||(t=!0),this.skipWhitespace(t),this.input.substring(this.pos,this.pos+e.length)==e},this.matchAt=function(){for(var e=this;this.input.length>this.pos&&"@"!=this.input[this.pos];)e.pos++;return"@"==this.input[this.pos]},this.skipWhitespace=function(e){for(var t=this;this.isWhitespace(this.input[this.pos]);)t.pos++;if("%"==this.input[this.pos]&&1==e){for(;"\n"!=this.input[this.pos];)t.pos++;this.skipWhitespace(e)}},this.value_braces=function(){var e=this,t=0;this.match("{",!1);for(var n=this.pos,r=!1;;){if(!r)if("}"==e.input[e.pos]){if(!(t>0)){var i=e.pos;return e.match("}",!1),e.input.substring(n,i)}t--}else if("{"==e.input[e.pos])t++;else if(e.pos>=e.input.length-1)throw"Unterminated value";r="\\"==e.input[e.pos]&&0==r,e.pos++}},this.value_comment=function(){for(var e=this,t="",n=0;!this.tryMatch("}",!1)||0!=n;){if(t+=e.input[e.pos],"{"==e.input[e.pos]&&n++,"}"==e.input[e.pos]&&n--,e.pos>=e.input.length-1)throw"Unterminated value:"+e.input.substring(start);e.pos++}return t},this.value_quotes=function(){var e=this;this.match('"',!1);for(var t=this.pos,n=!1;;){if(!n){if('"'==e.input[e.pos]){var r=e.pos;return e.match('"',!1),e.input.substring(t,r)}if(e.pos>=e.input.length-1)throw"Unterminated value:"+e.input.substring(t)}n="\\"==e.input[e.pos]&&0==n,e.pos++}},this.single_value=function(){var e=this.pos;if(this.tryMatch("{"))return this.value_braces();if(this.tryMatch('"'))return this.value_quotes();var t=this.key();if(t.match("^[0-9]+$"))return t;if(this.months.indexOf(t.toLowerCase())>=0)return t.toLowerCase();throw"Value expected:"+this.input.substring(e)+" for key: "+t},this.value=function(){var e=this,t=[];for(t.push(this.single_value());this.tryMatch("#");)e.match("#"),t.push(e.single_value());return t.join("")},this.key=function(){for(var e=this,t=this.pos;;){if(e.pos>=e.input.length)throw"Runaway key";if(e.notKey.indexOf(e.input[e.pos])>=0)return e.input.substring(t,e.pos);e.pos++}},this.key_equals_value=function(){var e=this.key();if(this.tryMatch("=")){this.match("=");var t=this.value();return[e,t]}throw"... = value expected, equals sign missing:"+this.input.substring(this.pos)},this.key_value_list=function(){var e=this,t=this.key_equals_value();for(this.currentEntry.entryTags={},this.currentEntry.entryTags[t[0]]=t[1];this.tryMatch(",")&&(e.match(","),!e.tryMatch("}"));)t=e.key_equals_value(),e.currentEntry.entryTags[t[0]]=t[1]},this.entry_body=function(e){this.currentEntry={},this.currentEntry.citationKey=this.key(),this.currentEntry.entryType=e.substring(1),this.match(","),this.key_value_list(),this.entries.push(this.currentEntry)},this.directive=function(){return this.match("@"),"@"+this.key()},this.preamble=function(){this.currentEntry={},this.currentEntry.entryType="PREAMBLE",this.currentEntry.entry=this.value_comment(),this.entries.push(this.currentEntry)},this.comment=function(){this.currentEntry={},this.currentEntry.entryType="COMMENT",this.currentEntry.entry=this.value_comment(),this.entries.push(this.currentEntry)},this.entry=function(e){this.entry_body(e)},this.bibtex=function(){for(var e=this;this.matchAt();){var t=e.directive();e.match("{"),"@STRING"==t?e.string():"@PREAMBLE"==t?e.preamble():"@COMMENT"==t?e.comment():e.entry(t),e.match("}")}}}e.toJSON=function(e){var n=new t;return n.setInput(e),n.bibtex(),n.entries},e.toBibtex=function(e){var t="";for(var n in e){if(t+="@"+e[n].entryType,t+="{",e[n].citationKey&&(t+=e[n].citationKey+", "),e[n].entry&&(t+=e[n].entry),e[n].entryTags){var r="";for(var i in e[n].entryTags)0!=r.length&&(r+=", "),r+=i+"= {"+e[n].entryTags[i]+"}";t+=r}t+="}\n\n"}return t}}(t)}),i=function(e,t){var n="\n @article{gregor2015draw,\n title={DRAW: A recurrent neural network for image generation},\n author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},\n journal={arXivrepLine truncated
return"<"+n+">\n"+e+"</"+n+">\n"},r.prototype.listitem=function(e){return"<li>"+e+"</li>\n"},r.prototype.paragraph=function(e){return"<p>"+e+"</p>\n"},r.prototype.table=function(e,t){return"<table>\n<thead>\n"+e+"</thead>\n<tbody>\n"+t+"</tbody>\n</table>\n"},r.prototype.tablerow=function(e){return"<tr>\n"+e+"</tr>\n"},r.prototype.tablecell=function(e,t){var n=t.header?"th":"td",r=t.align?"<"+n+' style="text-align:'+t.align+'">':"<"+n+">";return r+e+"</"+n+">\n"},r.prototype.strong=function(e){return"<strong>"+e+"</strong>"},r.prototype.em=function(e){return"<em>"+e+"</em>"},r.prototype.codespan=function(e){return"<code>"+e+"</code>"},r.prototype.br=function(){return this.options.xhtml?"<br/>":"<br>"},r.prototype.del=function(e){return"<del>"+e+"</del>"},r.prototype.link=function(e,t,n){if(this.options.sanitize){try{var r=decodeURIComponent(o(e)).replace(/[^\w:]/g,"").toLowerCase()}catch(e){return""}if(0===r.indexOf("javascript:")||0===r.indexOf("vbscript:"))return""}var i='<a href="'+e+'"';return t&&(i+=' title="'+t+'"'),i+=">"+n+"</a>"},r.prototype.image=function(e,t,n){var r='<img src="'+e+'" alt="'+n+'"';return t&&(r+=' title="'+t+'"'),r+=this.options.xhtml?"/>":">"},r.prototype.text=function(e){return e},i.parse=function(e,t,n){var r=new i(t,n);return r.parse(e)},i.prototype.parse=function(e){var t=this;this.inline=new n(e.links,this.options,this.renderer),this.tokens=e.reverse();for(var r="";this.next();)r+=t.tok();return r},i.prototype.next=function(){return this.token=this.tokens.pop()},i.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0},i.prototype.parseText=function(){for(var e=this,t=this.token.text;"text"===this.peek().type;)t+="\n"+e.next().text;return this.inline.output(t)},i.prototype.tok=function(){var e=this;switch(this.token.type){case"space":return"";case"hr":return this.renderer.hr();case"heading":return this.renderer.heading(this.inline.output(this.token.text),this.token.depth,this.token.text);case"code":return this.renderer.code(this.token.text,this.token.lang,this.token.escaped);case"table":var t,n,r,i,a,o="",s="";for(r="",t=0;t<this.token.header.length;t++)i={header:!0,align:e.token.align[t]},r+=e.renderer.tablecell(e.inline.output(e.token.header[t]),{header:!0,align:e.token.align[t]});for(o+=this.renderer.tablerow(r),t=0;t<this.token.cells.length;t++){for(n=e.token.cells[t],r="",a=0;a<n.length;a++)r+=e.renderer.tablecell(e.inline.output(n[a]),{header:!1,align:e.token.align[a]});s+=e.renderer.tablerow(r)}return this.renderer.table(o,s);case"blockquote_start":for(var s="";"blockquote_end"!==this.next().type;)s+=e.tok();return this.renderer.blockquote(s);case"list_start":for(var s="",l=this.token.ordered;"list_end"!==this.next().type;)s+=e.tok();return this.renderer.list(s,l);case"list_item_start":for(var s="";"list_item_end"!==this.next().type;)s+="text"===e.token.type?e.parseText():e.tok();return this.renderer.listitem(s);case"loose_item_start":for(var s="";"list_item_end"!==this.next().type;)s+=e.tok();return this.renderer.listitem(s);case"html":var p=this.token.pre||this.options.pedantic?this.token.text:this.inline.output(this.token.text);return this.renderer.html(p);case"paragraph":return this.renderer.paragraph(this.inline.output(this.token.text));case"text":return this.renderer.paragraph(this.parseText())}},l.exec=l,c.options=c.setOptions=function(e){return p(c.defaults,e),c},c.defaults={gfm:!0,tables:!0,breaks:!1,pedantic:!1,sanitize:!1,sanitizer:null,mangle:!0,smartLists:!1,silent:!1,highlight:null,langPrefix:"lang-",smartypants:!1,headerPrefix:"",renderer:new r,xhtml:!1},c.Parser=i,c.parser=i.parse,c.Renderer=r,c.Lexer=t,c.lexer=t.lex,c.InlineLexer=n,c.inlineLexer=n.output,c.parse=c,e.exports=c}).call(function(){return this||("undefined"!=typeof window?window:n)}())});b.setOptions({gfm:!0,smartypants:!0});var y=function(e,t){var n=[].slice.call(e.querySelectorAll("[dt-markdown]"));n.forEach(function(e){var t=e.innerHTML;e.innerHTML=b(t)})},x=e(function(e){var t="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},r=function(){var e=/\blang(?:uage)?-(\w+)\b/i,n=0,r=t.Prism={util:{encode:function(e){return e instanceof i?new i(e.type,r.util.encode(e.content),e.alias):"Array"===r.util.type(e)?e.map(r.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function(e){var t=r.util.type(e);switch(t){case"Object":var n={};for(var i in e)e.hasOwnProperty(i)&&(n[i]=r.util.clone(e[i]));return n;case"Array":return e.map&&e.map(function(e){return r.util.clone(e)})}return e}},languages:{extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var i in t)n[i]=t[i];return n},insertBefore:function(e,t,n,i){i=i||r.languages;var a=i[e];if(2==arguments.length){n=arguments[1];for(var o in n)n.hasOwnProperty(Line truncated
document.write('<script src="http://'+(location.host||"localhost").split(":")[0]+':35729/livereload.js?snipver=1"></script>');var dl=function(){"use strict";function t(t,e){return e={exports:{}},t(e,e.exports),e.exports}function e(t,e){t.innerHTML+=e}function n(t){var e="citation_title="+t.title+";";return t.author.split(" and ").forEach(function(t){e+="citation_author="+t.trim()+";"}),"journal"in t&&(e+="citation_journal_title="+t.journal+";"),"volume"in t&&(e+="citation_volume="+t.volume+";"),("issue"in t||"number"in t)&&(e+="citation_number="+(t.issue||t.number)+";"),e}function i(t,e){h(t,e),document.addEventListener("DOMContentLoaded",function(n){o(t,e),s(t,e),f(t,e),b(t,e),x(t,e),w(t,e),S(t,e),k(t,e),console.log("final data:");for(var i in e)console.log(" ",i,": ",e[i])})}var r="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},a=t(function(t,e){!function(t){function e(){this.months=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"],this.notKey=[",","{","}"," ","="],this.pos=0,this.input="",this.entries=new Array,this.currentEntry="",this.setInput=function(t){this.input=t},this.getEntries=function(){return this.entries},this.isWhitespace=function(t){return" "==t||"\r"==t||"\t"==t||"\n"==t},this.match=function(t,e){if(void 0!=e&&null!=e||(e=!0),this.skipWhitespace(e),this.input.substring(this.pos,this.pos+t.length)!=t)throw"Token mismatch, expected "+t+", found "+this.input.substring(this.pos);this.pos+=t.length,this.skipWhitespace(e)},this.tryMatch=function(t,e){return void 0!=e&&null!=e||(e=!0),this.skipWhitespace(e),this.input.substring(this.pos,this.pos+t.length)==t},this.matchAt=function(){for(var t=this;this.input.length>this.pos&&"@"!=this.input[this.pos];)t.pos++;return"@"==this.input[this.pos]},this.skipWhitespace=function(t){for(var e=this;this.isWhitespace(this.input[this.pos]);)e.pos++;if("%"==this.input[this.pos]&&1==t){for(;"\n"!=this.input[this.pos];)e.pos++;this.skipWhitespace(t)}},this.value_braces=function(){var t=this,e=0;this.match("{",!1);for(var n=this.pos,i=!1;;){if(!i)if("}"==t.input[t.pos]){if(!(e>0)){var r=t.pos;return t.match("}",!1),t.input.substring(n,r)}e--}else if("{"==t.input[t.pos])e++;else if(t.pos>=t.input.length-1)throw"Unterminated value";i="\\"==t.input[t.pos]&&0==i,t.pos++}},this.value_comment=function(){for(var t=this,e="",n=0;!this.tryMatch("}",!1)||0!=n;){if(e+=t.input[t.pos],"{"==t.input[t.pos]&&n++,"}"==t.input[t.pos]&&n--,t.pos>=t.input.length-1)throw"Unterminated value:"+t.input.substring(start);t.pos++}return e},this.value_quotes=function(){var t=this;this.match('"',!1);for(var e=this.pos,n=!1;;){if(!n){if('"'==t.input[t.pos]){var i=t.pos;return t.match('"',!1),t.input.substring(e,i)}if(t.pos>=t.input.length-1)throw"Unterminated value:"+t.input.substring(e)}n="\\"==t.input[t.pos]&&0==n,t.pos++}},this.single_value=function(){var t=this.pos;if(this.tryMatch("{"))return this.value_braces();if(this.tryMatch('"'))return this.value_quotes();var e=this.key();if(e.match("^[0-9]+$"))return e;if(this.months.indexOf(e.toLowerCase())>=0)return e.toLowerCase();throw"Value expected:"+this.input.substring(t)+" for key: "+e},this.value=function(){var t=this,e=[];for(e.push(this.single_value());this.tryMatch("#");)t.match("#"),e.push(t.single_value());return e.join("")},this.key=function(){for(var t=this,e=this.pos;;){if(t.pos>=t.input.length)throw"Runaway key";if(t.notKey.indexOf(t.input[t.pos])>=0)return t.input.substring(e,t.pos);t.pos++}},this.key_equals_value=function(){var t=this.key();if(this.tryMatch("=")){this.match("=");var e=this.value();return[t,e]}throw"... = value expected, equals sign missing:"+this.input.substring(this.pos)},this.key_value_list=function(){var t=this,e=this.key_equals_value();for(this.currentEntry.entryTags={},this.currentEntry.entryTags[e[0]]=e[1];this.tryMatch(",")&&(t.match(","),!t.tryMatch("}"));)e=t.key_equals_value(),t.currentEntry.entryTags[e[0]]=e[1]},this.entry_body=function(t){this.currentEntry={},this.currentEntry.citationKey=this.key(),this.currentEntry.entryType=t.substring(1),this.match(","),this.key_value_list(),this.entries.push(this.currentEntry)},this.directive=function(){return this.match("@"),"@"+this.key()},this.preamble=function(){this.currentEntry={},this.currentEntry.entryType="PREAMBLE",this.currentEntry.entry=this.value_comment(),this.entries.push(this.currentEntry)},this.comment=function(){this.currentEntry={},this.currentEntry.entryType="COMMENT",this.currentEntry.entry=this.value_comment(),this.entries.push(this.currentEntry)},this.entry=function(t){this.entry_body(t)},this.bibtex=function(){for(var t=this;this.matchAt();){var e=t.directive();t.match("{"),"@STRING"==e?t.string():"@PREAMBLE"==e?t.preamble():"@COMMENT"==e?t.comment():t.entry(e),t.match("}")}}}t.toJSON=function(t){var n=new e;return n.setInput(t),n.bibtex(),n.entries},t.toBibtex=function(t){var e="";for(var n in t){if(e+="@"+t[n].entryType,e+="{",t[n].citationKey&&(e+=t[n].ciLine truncated
em:/^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/}),h.gfm=c({},h.normal,{escape:s(h.escape)("])","~|])")(),url:/^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,del:/^~~(?=\S)([\s\S]*?\S)~~/,text:s(h.text)("]|","~]|")("|","|https?://|")()}),h.breaks=c({},h.gfm,{br:s(h.br)("{2,}","*")(),text:s(h.gfm.text)("{2,}","*")()}),n.rules=h,n.output=function(t,e,i){var r=new n(e,i);return r.output(t)},n.prototype.output=function(t){for(var e,n,i,r,o=this,s="";t;)if(r=o.rules.escape.exec(t))t=t.substring(r[0].length),s+=r[1];else if(r=o.rules.autolink.exec(t))t=t.substring(r[0].length),"@"===r[2]?(n=":"===r[1].charAt(6)?o.mangle(r[1].substring(7)):o.mangle(r[1]),i=o.mangle("mailto:")+n):(n=a(r[1]),i=n),s+=o.renderer.link(i,null,n);else if(o.inLink||!(r=o.rules.url.exec(t))){if(r=o.rules.tag.exec(t))!o.inLink&&/^<a /i.test(r[0])?o.inLink=!0:o.inLink&&/^<\/a>/i.test(r[0])&&(o.inLink=!1),t=t.substring(r[0].length),s+=o.options.sanitize?o.options.sanitizer?o.options.sanitizer(r[0]):a(r[0]):r[0];else if(r=o.rules.link.exec(t))t=t.substring(r[0].length),o.inLink=!0,s+=o.outputLink(r,{href:r[2],title:r[3]}),o.inLink=!1;else if((r=o.rules.reflink.exec(t))||(r=o.rules.nolink.exec(t))){if(t=t.substring(r[0].length),e=(r[2]||r[1]).replace(/\s+/g," "),e=o.links[e.toLowerCase()],!e||!e.href){s+=r[0].charAt(0),t=r[0].substring(1)+t;continue}o.inLink=!0,s+=o.outputLink(r,e),o.inLink=!1}else if(r=o.rules.strong.exec(t))t=t.substring(r[0].length),s+=o.renderer.strong(o.output(r[2]||r[1]));else if(r=o.rules.em.exec(t))t=t.substring(r[0].length),s+=o.renderer.em(o.output(r[2]||r[1]));else if(r=o.rules.code.exec(t))t=t.substring(r[0].length),s+=o.renderer.codespan(a(r[2],!0));else if(r=o.rules.br.exec(t))t=t.substring(r[0].length),s+=o.renderer.br();else if(r=o.rules.del.exec(t))t=t.substring(r[0].length),s+=o.renderer.del(o.output(r[1]));else if(r=o.rules.text.exec(t))t=t.substring(r[0].length),s+=o.renderer.text(a(o.smartypants(r[0])));else if(t)throw new Error("Infinite loop on byte: "+t.charCodeAt(0))}else t=t.substring(r[0].length),n=a(r[1]),i=n,s+=o.renderer.link(i,null,n);return s},n.prototype.outputLink=function(t,e){var n=a(e.href),i=e.title?a(e.title):null;return"!"!==t[0].charAt(0)?this.renderer.link(n,i,this.output(t[1])):this.renderer.image(n,i,a(t[1]))},n.prototype.smartypants=function(t){return this.options.smartypants?t.replace(/---/g,"—").replace(/--/g,"–").replace(/(^|[-\u2014\/(\[{"\s])'/g,"$1‘").replace(/'/g,"’").replace(/(^|[-\u2014\/(\[{\u2018\s])"/g,"$1“").replace(/"/g,"”").replace(/\.{3}/g,"…"):t},n.prototype.mangle=function(t){if(!this.options.mangle)return t;for(var e,n="",i=t.length,r=0;r<i;r++)e=t.charCodeAt(r),Math.random()>.5&&(e="x"+e.toString(16)),n+="&#"+e+";";return n},i.prototype.code=function(t,e,n){if(this.options.highlight){var i=this.options.highlight(t,e);null!=i&&i!==t&&(n=!0,t=i)}return e?'<pre><code class="'+this.options.langPrefix+a(e,!0)+'">'+(n?t:a(t,!0))+"\n</code></pre>\n":"<pre><code>"+(n?t:a(t,!0))+"\n</code></pre>"},i.prototype.blockquote=function(t){return"<blockquote>\n"+t+"</blockquote>\n"},i.prototype.html=function(t){return t},i.prototype.heading=function(t,e,n){return"<h"+e+' id="'+this.options.headerPrefix+n.toLowerCase().replace(/[^\w]+/g,"-")+'">'+t+"</h"+e+">\n"},i.prototype.hr=function(){return this.options.xhtml?"<hr/>\n":"<hr>\n"},i.prototype.list=function(t,e){var n=e?"ol":"ul";return"<"+n+">\n"+t+"</"+n+">\n"},i.prototype.listitem=function(t){return"<li>"+t+"</li>\n"},i.prototype.paragraph=function(t){return"<p>"+t+"</p>\n"},i.prototype.table=function(t,e){return"<table>\n<thead>\n"+t+"</thead>\n<tbody>\n"+e+"</tbody>\n</table>\n"},i.prototype.tablerow=function(t){return"<tr>\n"+t+"</tr>\n"},i.prototype.tablecell=function(t,e){var n=e.header?"th":"td",i=e.align?"<"+n+' style="text-align:'+e.align+'">':"<"+n+">";return i+t+"</"+n+">\n"},i.prototype.strong=function(t){return"<strong>"+t+"</strong>"},i.prototype.em=function(t){return"<em>"+t+"</em>"},i.prototype.codespan=function(t){return"<code>"+t+"</code>"},i.prototype.br=function(){return this.options.xhtml?"<br/>":"<br>"},i.prototype.del=function(t){return"<del>"+t+"</del>"},i.prototype.link=function(t,e,n){if(this.options.sanitize){try{var i=decodeURIComponent(o(t)).replace(/[^\w:]/g,"").toLowerCase()}catch(t){return""}if(0===i.indexOf("javascript:")||0===i.indexOf("vbscript:"))return""}var r='<a href="'+t+'"';return e&&(r+=' title="'+e+'"'),r+=">"+n+"</a>"},i.prototype.image=function(t,e,n){var i='<img src="'+t+'" alt="'+n+'"';return e&&(i+=' title="'+e+'"'),i+=this.options.xhtml?"/>":">"},i.prototype.text=function(t){return t},r.parse=function(t,e,n){var i=new r(e,n);return i.parse(t)},r.prototype.parse=function(t){var e=this;this.inline=new n(t.links,this.options,this.renderer),this.tokens=t.reverse();for(var i="";this.next();)i+=e.tok();return i},r.prototype.next=function(){return this.token=this.tokens.pop()},r.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0},r.prototype.parseTeLine truncated
//# sourceMappingURL=template.min.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":null,"sources":["../index.js","../node_modules/bibtex-parse-js/bibtexParse.js","../components/cite-data.js","../components/styles-base.js","../components/styles-layout.js","../components/styles-article.js","../components/styles-code.js","../components/styles.js","../components/header.js","../components/appendix.js","../components/footer.js","../components/citation.js","../node_modules/marked/lib/marked.js","../components/markdown.js","../node_modules/prismjs/prism.js","../components/code.js"],"sourcesContent":["import citeData from \"./components/cite-data\";\nimport styles from \"./components/styles\";\nimport header from \"./components/header\";\nimport appendix from \"./components/appendix\";\nimport footer from \"./components/footer\";\nimport citation from \"./components/citation\";\nimport markdown from \"./components/markdown\";\nimport code from \"./components/code\";\n\n\n\nfunction render(dom, data) {\n styles(dom, data);\n document.addEventListener(\"DOMContentLoaded\", function(event) {\n citeData(dom, data)\n header(dom, data);\n appendix(dom, data);\n footer(dom, data);\n markdown(dom, data);\n code(dom, data);\n citation(dom, data);\n });\n}\n\nif(window.document) {\n render(window.document, []);\n}\n\nexport default render;\n","/* start bibtexParse 0.0.22 */\n\n//Original work by Henrik Muehe (c) 2010\n//\n//CommonJS port by Mikola Lysenko 2013\n//\n//Port to Browser lib by ORCID / RCPETERS\n//\n//Issues:\n//no comment handling within strings\n//no string concatenation\n//no variable values yet\n//Grammar implemented here:\n//bibtex -> (string | preamble | comment | entry)*;\n//string -> '@STRING' '{' key_equals_value '}';\n//preamble -> '@PREAMBLE' '{' value '}';\n//comment -> '@COMMENT' '{' value '}';\n//entry -> '@' key '{' key ',' key_value_list '}';\n//key_value_list -> key_equals_value (',' key_equals_value)*;\n//key_equals_value -> key '=' value;\n//value -> value_quotes | value_braces | key;\n//value_quotes -> '\"' .*? '\"'; // not quite\n//value_braces -> '{' .*? '\"'; // not quite\n(function(exports) {\n\n function BibtexParser() {\n \n this.months = [\"jan\", \"feb\", \"mar\", \"apr\", \"may\", \"jun\", \"jul\", \"aug\", \"sep\", \"oct\", \"nov\", \"dec\"];\n this.notKey = [',','{','}',' ','='];\n this.pos = 0;\n this.input = \"\";\n this.entries = new Array();\n\n this.currentEntry = \"\";\n\n this.setInput = function(t) {\n this.input = t;\n };\n\n this.getEntries = function() {\n return this.entries;\n };\n\n this.isWhitespace = function(s) {\n return (s == ' ' || s == '\\r' || s == '\\t' || s == '\\n');\n };\n\n this.match = function(s, canCommentOut) {\n if (canCommentOut == undefined || canCommentOut == null)\n canCommentOut = true;\n this.skipWhitespace(canCommentOut);\n if (this.input.substring(this.pos, this.pos + s.length) == s) {\n this.pos += s.length;\n } else {\n throw \"Token mismatch, expected \" + s + \", found \"\n + this.input.substring(this.pos);\n };\n this.skipWhitespace(canCommentOut);\n };\n\n this.tryMatch = function(s, canCommentOut) {\n if (canCommentOut == undefined || canCommentOut == null)\n canCommentOut = true;\n this.skipWhitespace(canCommentOut);\n if (this.input.substring(this.pos, this.pos + s.length) == s) {\n return true;\n } else {\n return false;\n };\n this.skipWhitespace(canCommentOut);\n };\n\n /* when search for a match all text can be ignored, not just white space */\n this.matchAt = function() {\n while (this.input.length > this.pos && this.input[this.pos] != '@') {\n this.pos++;\n };\n\n if (this.input[this.pos] == '@') {\n return true;\n };\n return false;\n };\n\n this.skipWhitespace = function(canCommentOut) {\n while (this.isWhitespace(this.input[this.pos])) {\n this.pos++;\n };\n if (this.input[this.pos] == \"%\" && canCommentOut == true) {\n while (this.input[this.pos] != \"\\n\") {\n this.pos++;\n };\n this.skipWhitespace(canCommentOut);\n };\n };\n\n this.value_braces = function() {\n var bracecount = 0;\n this.match(\"{\", false);\n var start = this.pos;\n var escaped = false;\n while (true) {\n if (!escaped) {\n if (this.input[this.pos] == '}') {\n if (bracecount > 0) {\n bracecount--;\n Line truncated
{"version":3,"file":null,"sources":["../components/meta.js","../index.js","../node_modules/bibtex-parse-js/bibtexParse.js","../components/cite-data.js","../components/styles.js","../components/header.js","../components/appendix.js","../components/footer.js","../components/citation.js","../node_modules/marked/lib/marked.js","../components/markdown.js","../node_modules/prismjs/prism.js","../components/code.js","../test-data.js"],"sourcesContent":["export default function(dom, data) {\n dom.querySelector(\"html\").setAttribute(\"lang\", \"en\")\n let head = dom.querySelector(\"head\");\n\n if (!dom.querySelector(\"meta[charset]\")) {\n appendHtml(head, `<meta charset=\"utf-8\">`);\n }\n if (!dom.querySelector(\"meta[name=viewport]\")) {\n appendHtml(head, `<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`);\n }\n\n appendHtml(head, `\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge,chrome=1\">\n <link rel=\"icon\" type=\"image/png\" href=\"/favicon.png\">\n <link href=\"/rss.xml\" rel=\"alternate\" type=\"application/rss+xml\" title=\"Articles from Distill\">\n <link rel=\"canonical\" href=\"${data.url}\">\n <title>${data.title}</title>\n `);\n\n appendHtml(head, `\n <!-- https://schema.org/Article -->\n <meta property=\"article:published\" itemprop=\"datePublished\" content=\"${data.publishedDate}\" />\n <meta property=\"article:modified\" itemprop=\"dateModified\" content=\"${data.updatedDate}\" />\n `);\n data.authors.forEach((a) => {\n appendHtml(head, `\n <meta property=\"article:author\" content=\"${a.firstName} ${a.lastName}\" />`)\n });\n\n appendHtml(head, `\n <!-- https://developers.facebook.com/docs/sharing/webmasters#markup -->\n <meta property=\"og:type\" content=\"article\"/>\n <meta property=\"og:title\" content=\"${data.title}\"/>\n <meta property=\"og:description\" content=\"${data.description}\">\n <meta property=\"og:url\" content=\"${data.url}\"/>\n <meta property=\"og:image\" content=\"${data.url}/thumbnail.png\"/>\n <meta property=\"og:locale\" content=\"en_US\" />\n <meta property=\"og:site_name\" content=\"Distill\" />\n `);\n\n appendHtml(head, `\n <!-- https://dev.twitter.com/cards/types/summary -->\n <meta name=\"twitter:card\" content=\"summary_large_image\">\n <meta name=\"twitter:title\" content=\"${data.title}\">\n <meta name=\"twitter:description\" content=\"${data.description}\">\n <meta name=\"twitter:url\" content=\"${data.url}\">\n <meta name=\"twitter:image\" content=\"${data.url}/thumbnail.png\">\n <meta name=\"twitter:image:width\" content=\"560\">\n <meta name=\"twitter:image:height\" content=\"295\">\n `);\n\n appendHtml(head, `\n <!-- https://scholar.google.com/intl/en/scholar/inclusion.html#indexing -->\n <meta name=\"citation_title\" content=\"${data.title}\">\n <meta name=\"citation_publication_date\" content=\"${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}\">\n <meta name=\"citation_fulltext_html_url\" content=\"${data.url}\">\n <meta name=\"citation_volume\" content=\"${data.volume}\">\n <meta name=\"citation_issue\" content=\"${data.issue}\">\n <meta name=\"citation_journal_title\" content=\"${data.journal.name}\">\n <meta name=\"citation_journal_abbrev\" content=\"${data.journal.nameAbbrev}\"/>\n <meta name=\"citation_firstpage\" content=\"e${data.doiSuffix}\"/>\n <meta name=\"citation_doi\" content=\"${data.doi}\">\n <meta name=\"citation_issn\" content=\"${data.journal.issn}\">\n <meta name=\"citation_publisher\" content=\"${data.journal.publisher}\"/>\n `);\n data.authors.forEach((a) => {\n appendHtml(head, `\n <meta name=\"citation_author\" content=\"${a.lastName}, ${a.firstName}\" />\n <meta name=\"citation_author_institution\" content=\"${a.affiliation}\"/>\n `)\n });\n\n Object.keys(data.citations).forEach(key => {\n console.log(key);\n appendHtml(head, `\n <meta name=\"citation_reference\" content=\"${citation_meta_content(data.citations[key])}\" >\n `);\n });\n}\n\n\n\n\nfunction appendHtml(el, html) {\n el.innerHTML += html;\n}\n\nfunction citation_meta_content(ref){\n var content = `citation_title=${ref.title};`;\n ref.author.split(\" and \").forEach(author => {\n content += `citation_author=${author.trim()};`;\n });\n if (\"journal\" in ref){\n content += `citation_journal_title=${ref.journal};`;\n }\n if (\"volume\" in ref) {\n content += `citation_volume=${ref.volume};`;\n }\n if (\"issue\" in ref || \"number\" in ref){\n content += `citation_number=${ref.issue || ref.number};`;\n }\n /*content += `citation_first_page=${};`;\n content += `citation_publication_date=${};`;*/\n return content;\n}\n","import citeData from \"./components/cite-data\";\nimport meta from \"./components/meta\";\nimport styles from \"./components/styles\";\nimport header from \"./components/header\";\nimport Line truncated
+3 -3
View File
@@ -18,8 +18,8 @@
</style>
<dt-header></dt-header>
<dt-article>
<h1 class="l">How to Create a Distill Article</h1>
<h2 class="l">A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
<h1>How to Create a Distill Article</h1>
<h2>A collection of examples and best practices for creating interactive explanatory articles using the Distill web framework</h2>
<!-- <dt-byline></dt-byline> -->
<p>Distill ships with a CSS framework and a collection of custom web components that make building interactive academic articles easier than raw HTML, CSS and JavaScript. This reference article details several examples and best practices for how to use both frameworks. Both are also available on Github with a permissive license, so feel free to use them independent of http://distill.pub as well.</p>
<hr>
@@ -52,7 +52,7 @@
</div>
<hr>
<h2>Code Blocks</h2>
<p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-javascript">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
<p>Syntax highlighting is provided within <code class="language-html">&lt;code&gt;</code> tags. Just wrap the source with this: <code class="language-html">&lt;code class="language-html"&gt;let x = 10;&lt;/code&gt;</code>. For larger blocks of code, add a <code class="language-html">&lt;pre&gt;</code> tag:</p>
<pre><code class="language-html">
&lt;pre&gt;&lt;code class="language-javascript"&gt;
var x = 25;
+1
View File
@@ -17,6 +17,7 @@
"rollup-plugin-livereload": "^0.3.1",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-serve": "^0.1.0",
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-uglify": "^1.0.1",
"rollup-watch": "^2.5.0"
}
+5 -1
View File
@@ -4,6 +4,7 @@ import commonjs from 'rollup-plugin-commonjs';
import liveReload from 'rollup-plugin-livereload';
import serve from 'rollup-plugin-serve';
import uglify from 'rollup-plugin-uglify';
import string from 'rollup-plugin-string';
const PORT = 8080;
console.log(`open http://localhost:${PORT}/`);
@@ -23,11 +24,14 @@ export default {
jsnext: true,
browser: true,
}),
string({
include: ["**/*.svg", "**/*.html", "**/*.css"]
}),
buble({
exclude: 'node_modules',
target: { chrome: 52, safari: 8, edge: 13, firefox: 48, }
}),
commonjs({}),
commonjs(),
uglify(),
liveReload(),
serve({port: PORT}),
+6
View File
@@ -1019,6 +1019,12 @@ rollup-plugin-serve@^0.1.0:
mime "^1.3.4"
opener "^1.4.2"
rollup-plugin-string@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/rollup-plugin-string/-/rollup-plugin-string-2.0.2.tgz#f5323a22cfd738b450cbea62ab6593705eac744b"
dependencies:
rollup-pluginutils "^1.5.0"
rollup-plugin-uglify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-1.0.1.tgz#11d0b0c8bcd2d07e6908f74fd16b0152390b922a"