wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-06-27 19:17:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merging

Browse Source
This commit is contained in:
Shan Carter
2017-01-17 10:08:47 -08:00
parent 353f205ae7 122ca1d50f
commit e40e69733a
25 changed files with 2734 additions and 516 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4
View File
@@ -1,5 +1,9 @@
# Distill Templates
## Development
Run `yarn start` to start a watching build rollup server.
## Testing
Run `yarn test`. That's it.
components/appendix.js
+28 -21
View File
@@ -2,13 +2,12 @@ const html = `
<style>
dt-appendix {
display: block;
font-family: "Open Sans";
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
border-top: 1px solid rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
background: rgba(0,0,0,0.025);
background: rgb(250, 250, 250);
padding-top: 36px;
padding-right: 24px;
padding-bottom: 60px;
@@ -47,8 +46,8 @@ const html = `
<h3>References</h3>
<dt-bibliography></dt-bibliography>
<h3 id="citation">Errors, Reuse, and Citation</h3>
<p>If you see mistakes or want to suggest changes, please submit a pull request on <a class="github">github</a>.</p>
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a>, unless noted otherwise, with the source available on available on <a class="github">github</a>. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
<p>If you see mistakes or want to suggest changes, please <a class="github-issue">create an issue on GitHub</a>.</p>
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a>, unless noted otherwise, with the <a class="github">source available on GitHub</a>. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
<p>For attribution in academic contexts, please cite this work as</p>
<pre class="citation short"></pre>
<p>BibTeX citation</p>
@@ -56,23 +55,31 @@ const html = `
</div>
`;
// distill.data().then(function(data) {
// var as = el.querySelectorAll("a.github");
// [].forEach.call(as, function(a) {
// a.setAttribute("href", data.github);
// });
// el.querySelector(".citation.short").textContent = data.concatenatedAuthors + ", " + '"' + data.title + '", Distill, ' + data.firstPublishedYear + ".";
// var bibtex = "@article{" + data.slug + ",\n";
// bibtex += " author = {" + data.bibtexAuthors + "},\n";
// bibtex += " title = {" + data.title + "},\n";
// bibtex += " journal = {Distill},\n";
// bibtex += " year = {" + data.firstPublishedYear + "},\n";
// bibtex += " note = {" + data.url + "}\n";
// bibtex += "}";
// el.querySelector(".citation.long").textContent = bibtex;
// })
export default function(dom, data) {
let el = dom.querySelector('dt-appendix')
if (el) el.innerHTML = html;
if (el) {
let oldHtml = el.innerHTML;
el.innerHTML = html;
let div = el.querySelector("div.l-body")
if (dom.querySelector("dt-fn")) {
div.innerHTML = `<h3>Footnotes</h3><dt-fn-list></dt-fn-list>` + div.innerHTML;
}
div.innerHTML = oldHtml + div.innerHTML;
el.querySelector("a.github").setAttribute("href", data.githubUrl);
el.querySelector("a.github-issue").setAttribute("href", data.githubUrl + "/issues/new");
el.querySelector(".citation.short").textContent = data.concatenatedAuthors + ", " + '"' + data.title + '", Distill, ' + data.publishedYear + ".";
var bibtex = "@article{" + data.slug + ",\n";
bibtex += " author = {" + data.bibtexAuthors + "},\n";
bibtex += " title = {" + data.title + "},\n";
bibtex += " journal = {Distill},\n";
bibtex += " year = {" + data.publishedYear + "},\n";
bibtex += " note = {" + data.url + "}\n";
bibtex += "}";
el.querySelector(".citation.long").textContent = bibtex;
}
}
components/bibliography.js
+9
View File
@@ -10,6 +10,15 @@ export default function(dom, data) {
let parsed = bibtexParse.toJSON(rawBib);
if(parsed) {
parsed.forEach(e => {
for (var k in e.entryTags){
var val = e.entryTags[k];
val = val.replace(/[\t\n ]+/g, " ");
val = val.replace(/{\\["^`\.'acu~Hvs]( )?([a-zA-Z])}/g,
(full, x, char) => char);
val = val.replace(/{\\([a-zA-Z])}/g,
(full, char) => char);
e.entryTags[k] = val;
}
bibliography[e.citationKey] = e.entryTags;
bibliography[e.citationKey].type = e.entryType;
});
components/byline.js
+147
View File
@@ -0,0 +1,147 @@
import mustache from "mustache";
const html = `
<style>
dt-byline {
font-size: 12px;
line-height: 18px;
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.5);
padding-top: 12px;
padding-bottom: 12px;
}
dt-article.centered dt-byline {
text-align: center;
}
dt-byline a {
text-decoration: none;
}
dt-byline .authors {
text-align: left;
}
dt-byline .name {
display: inline;
text-transform: uppercase;
}
dt-byline .affiliation {
display: inline;
}
dt-byline .date {
display: block;
text-align: left;
}
dt-byline .year, dt-byline .month {
display: inline;
}
dt-byline .citation {
display: block;
text-align: left;
}
dt-byline .citation div {
display: inline;
}
@media(min-width: 768px) {
dt-byline {
}
}
@media(min-width: 1080px) {
dt-byline {
border-bottom: none;
margin-bottom: 70px;
}
dt-byline a:hover {
color: rgba(0, 0, 0, 0.9);
}
dt-byline .authors {
display: inline-block;
}
dt-byline .author {
display: inline-block;
margin-right: 12px;
/*padding-left: 20px;*/
/*border-left: 1px solid #ddd;*/
}
dt-byline .affiliation {
display: block;
}
dt-byline .author:last-child {
margin-right: 0;
}
dt-byline .name {
display: block;
}
dt-byline .date {
border-left: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 15px;
margin-left: 15px;
display: inline-block;
}
dt-byline .year, dt-byline .month {
display: block;
}
dt-byline .citation {
border-left: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 15px;
margin-left: 15px;
display: inline-block;
}
dt-byline .citation div {
display: block;
}
}
</style>
`;
const template = `
<div class="byline">
<div class="authors">
{{#authors}}
<div class="author">
{{#personalURL}}
<a class="name" href="{{personalURL}}">{{name}}</a>
{{/personalURL}}
{{^personalURL}}
<div class="name">{{name}}</div>
{{/personalURL}}
{{#affiliation}}
{{#affiliationURL}}
<a class="affiliation" href="{{affiliationURL}}">{{affiliation}}</a>
{{/affiliationURL}}
{{^affiliationURL}}
<div class="affiliation">{{affiliation}}</div>
{{/affiliationURL}}
{{/affiliation}}
</div>
{{/authors}}
</div>
<div class="date">
<div class="month">{{publishedMonth}}. {{publishedDay}}</div>
<div class="year">{{publishedYear}}</div>
</div>
<a class="citation" href="#citation">
<div>Citation:</div>
<div>{{concatenatedAuthors}}, {{publishedYear}}</div>
</a>
</div>
`
export default function(dom, data) {
let el = dom.querySelector('dt-byline');
if (el) {
el.innerHTML = html + mustache.render(template, data);
}
}
components/citation.js
+135 -139
View File
@@ -1,4 +1,33 @@
export default function(dom, data) {
let css = `
dt-cite {
color: hsla(206, 90%, 20%, 0.7);
}
dt-cite .citation-number {
cursor: default;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
font-size: 75%;
color: hsla(206, 90%, 20%, 0.7);
display: inline-block;
line-height: 1.1em;
text-align: center;
position: relative;
top: -2px;
margin: 0 2px;
}
figcaption dt-cite .citation-number {
font-size: 11px;
font-weight: normal;
top: -2px;
line-height: 1em;
}
`;
let style = dom.createElement("style");
style.textContent = css;
dom.querySelector("body").appendChild(style);
let citations = data.citations;
/*if (data.citations) {
citations = Object.keys(data.citations).map(c => data.citations[c]);
@@ -13,15 +42,15 @@ export default function(dom, data) {
if (key) {
var keys = key.split(",");
var cite_string = inline_cite_short(keys);
el.innerHTML = `<span id="citation-${n}" class="citation">${cite_string}</span>`;
DistillHoverBox.bind(`#citation-${n}`, key)
DistillHoverBox.contentMap[key] = "";
var cite_hover_str = "";
keys.map((key,n) => {
if (n>0) DistillHoverBox.contentMap[key] += "<br>";
var cite_str = bibliography_cite(data.bibliography[key], true);
DistillHoverBox.contentMap[key] += cite_str;
})
if (n>0) cite_hover_str += "<br><br>";
cite_hover_str += hover_cite(data.bibliography[key]);
});
cite_hover_str = cite_hover_str.replace(/"/g, "&#39;")
var orig_string = el.innerHTML;
if (orig_string != "") orig_string += " ";
el.innerHTML = `<span id="citation-${n}" data-hover="${cite_hover_str}">${orig_string}<span class="citation-number">${cite_string}</span></span>`;
}
});
@@ -30,7 +59,7 @@ export default function(dom, data) {
let ol = dom.createElement("ol");
citations.forEach(key => {
let el = dom.createElement("li");
el.textContent = bibliography_cite(data.bibliography[key]);
el.innerHTML = bibliography_cite(data.bibliography[key]);
ol.appendChild(el);
})
bibEl.appendChild(ol);
@@ -65,44 +94,108 @@ export default function(dom, data) {
return keys.map(cite_string).join(", ");
}
function bibliography_cite(ent, fancy){
if (ent){
var names = ent.author.split(" and ");
var cite = "";
let name_strings = names.map(name => {
function author_string(ent, template, sep, finalSep){
var names = ent.author.split(" and ");
let name_strings = names.map(name => {
name = name.trim();
if (name.indexOf(",") != -1){
var last = name.split(",")[0].trim();
var firsts = name.split(",")[1];
if (firsts != undefined) {
var initials = firsts.trim().split(" ").map(s => s.trim()[0]);
return last + ", " + initials.join(".")+".";
}
return last;
});
if (names.length > 1) {
cite += name_strings.slice(0, names.length-1).join(", ");
cite += " and " + name_strings[names.length-1];
} else {
cite += name_strings[0]
var last = name.split(" ").slice(-1)[0].trim();
var firsts = name.split(" ").slice(0,-1).join(" ");
}
cite += ", " + ent.year + ". "
if (fancy){
cite += "<b>" + ent.title + "</b>. "
var initials = "";
if (firsts != undefined) {
initials = firsts.trim().split(" ").map(s => s.trim()[0]);
initials = initials.join(".")+".";
}
return template.replace("${F}", firsts)
.replace("${L}", last)
.replace("${I}", initials);
});
if (names.length > 1) {
var str = name_strings.slice(0, names.length-1).join(sep);
str += (finalSep || sep) + name_strings[names.length-1];
return str;
} else {
return name_strings[0];
}
}
function venue_string(ent) {
var cite = (ent.journal || ent.booktitle || "")
if ("volume" in ent){
var issue = ent.issue || ent.number;
issue = (issue != undefined)? "("+issue+")" : "";
cite += ", Vol " + ent.volume + issue;
}
if ("pages" in ent){
cite += ", pp. " + ent.pages
}
if (cite != "") cite += ". "
if ("publisher" in ent){
cite += ent.publisher;
if (cite[cite.length-1] != ".") cite += ".";
}
return cite;
}
function link_string(ent){
if ("url" in ent){
var url = ent.url;
var arxiv_match = (/arxiv\.org\/abs\/([0-9\.]*)/).exec(url);
if (arxiv_match != null){
url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
}
if (url.slice(-4) == ".pdf"){
var label = "PDF";
} else if (url.slice(-5) == ".html") {
var label = "HTML";
}
return ` &ensp;<a href="${url}">[${label||"link"}]</a>`;
}/* else if ("doi" in ent){
return ` &ensp;<a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
}*/ else {
return "";
}
}
function doi_string(ent, new_line){
if ("doi" in ent) {
return `${new_line?"<br>":""} <a href="https://doi.org/${ent.doi}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
} else {
return "";
}
}
function bibliography_cite(ent, fancy){
if (ent){
var cite = author_string(ent, "${L}, ${I}", ", ", " and ");
if (ent.year || ent.date){
cite += ", " + (ent.year || ent.date) + ". "
} else {
cite += ent.title + ". "
}
cite += (ent.journal || ent.booktitle || "")
if ("volume" in ent){
var issue = ent.issue || ent.number;
issue = (issue != undefined)? "("+issue+")" : "";
cite += ", Vol " + ent.volume + issue;
}
if ("pages" in ent){
cite += ", pp. " + ent.pages
}
cite += ". "
if (fancy && ent.url && ent.url.slice(-4) == ".pdf") {
cite = `${cite} <a href="${ent.url}">[pdf]</a>`
cite += ". "
}
cite += "<b>" + ent.title + "</b>. ";
cite += venue_string(ent);
cite += doi_string(ent);
cite += link_string(ent);
return cite
} else {
return "?";
}
}
function hover_cite(ent){
if (ent){
var cite = "";
cite += "<b>" + ent.title + "</b>";
cite += link_string(ent);
cite += "<br>"
cite += author_string(ent, "${I} ${L}", ", ") + ".<br>";
cite += venue_string(ent).trim() + " " + ent.year + ". "
cite += doi_string(ent, true);
return cite
} else {
return "?";
@@ -111,7 +204,7 @@ export default function(dom, data) {
//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
function get_URL(ent){
function get_GS_URL(ent){
if (ent){
var names = ent.author.split(" and ");
names = names.map(name => name.split(",")[0].trim())
@@ -122,100 +215,3 @@ export default function(dom, data) {
}
}
// DistillHoverBox
//=====================================
function DistillHoverBox(key, pos){
if (!(key in DistillHoverBox.contentMap)){
console.error("No DistillHoverBox content registered for key", key);
}
if (key in DistillHoverBox.liveBoxes) {
console.error("There already exists a DistillHoverBox for key", key);
} else {
for (var k in DistillHoverBox.liveBoxes)
DistillHoverBox.liveBoxes[k].remove();
DistillHoverBox.liveBoxes[key] = this;
}
this.key = key;
var pretty = window.innerWidth > 600;
var padding = pretty? 18 : 12;
var outer_padding = pretty ? 18 : 0;
var bbox = document.querySelector("body").getBoundingClientRect();
var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
var width = Math.min(window.innerWidth-2*outer_padding, 648);
left = Math.min(left, window.innerWidth-width-outer_padding);
width = width - 2*padding;
var str = `<div style="position: absolute;
background-color: #FFF;
opacity: 0.95;
width: ${width}px;
top: ${top}px;
left: ${left}px;
padding: ${padding}px;
border-radius: ${pretty? 6 : 0}px;
box-shadow: 0px 0px 18px 6px #777;" >
${DistillHoverBox.contentMap[key]}
</div>`;
this.div = appendBody(str);
DistillHoverBox.bind (this.div, key);
}
DistillHoverBox.prototype.remove = function remove(){
if (this.div) this.div.remove();
if (this.timeout) clearTimeout(this.timeout);
delete DistillHoverBox.liveBoxes[this.key];
}
DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
if (this.timeout) clearTimeout(this.timeout);
}
DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
//console.log("extend", T)
var this_ = this;
this.stopTimeout();
this.timeout = setTimeout(() => this_.remove(), T);
}
DistillHoverBox.liveBoxes = {};
DistillHoverBox.contentMap = {abc: "hello world!"};
DistillHoverBox.bind = function bind(node, key) {
if (typeof node == "string"){
node = document.querySelector(node);
}
node.addEventListener("mouseover", () => {
var bbox = node.getBoundingClientRect();
if (!(key in DistillHoverBox.liveBoxes)){
new DistillHoverBox(key, [bbox.right, bbox.bottom]);
}
DistillHoverBox.liveBoxes[key].stopTimeout();
});
node.addEventListener("mouseout", () => {
if (key in DistillHoverBox.liveBoxes){
DistillHoverBox.liveBoxes[key].extendTimeout(250);
}
});
}
function appendBody(str){
var node = nodeFromString(str);
var body = document.querySelector("body");
body.appendChild(node);
return node;
}
function nodeFromString(str) {
var div = document.createElement("div");
div.innerHTML = str;
return div.firstChild;
}
components/distill-logo.svg
+1 -1
View File
@@ -1,3 +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"/>
<path 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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 216 B

After

Width:  |  Height:  |  Size: 163 B

components/expand-data.js
+32 -19
View File
@@ -1,12 +1,12 @@
import {timeFormat} from "d3-time-format";
export default function(dom, data) {
data.authors = data.authors || [];
// paths
//data.distillPath = post.distillPath;
//data.githubPath = post.githubPath;
//data.url = "http://distill.pub/" + post.distillPath;
//data.githubUrl = "https://github.com/" + post.githubPath;
data.url = "http://distill.pub/" + data.distillPath;
data.githubUrl = "https://github.com/" + data.githubPath;
// Homepage
//data.homepage = !post.noHomepage;
@@ -14,24 +14,37 @@ export default function(dom, data) {
// Dates
// TODO: fix updated date
if (data.published){//} && data.journal) {
data.volume = data.published.getFullYear() - 2015;
data.issue = data.published.getMonth() + 1;
}
/*
//let RFC = d3.timeFormat("%a, %d %b %Y %H:%M:%S %Z");
let months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
//data.publishedDateRFC = RFC(data.publishedDate);
data.publishedYear = data.publishedDate.getFullYear();
data.publishedMonth = months[data.publishedDate.getMonth()];
data.publishedDay = data.publishedDate.getDate();
data.publishedMonthPadded = zeroPad(data.publishedDate.getMonth() + 1);
data.publishedDayPadded = zeroPad(data.publishedDate.getDate());
if (data.publishedDate){//} && data.journal) {
data.volume = data.publishedDate.getFullYear() - 2015;
data.issue = data.publishedDate.getMonth() + 1;
}*/
}
data.publishedDate = data.publishedDate ? data.publishedDate : new Date("Invalid");
data.updated = data.updated ? data.updated : new Date("Invalid");
data.publishedDateRFC
let RFC = timeFormat("%a, %d %b %Y %H:%M:%S %Z");
let months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
data.publishedDateRFC = RFC(data.publishedDate);
data.publishedYear = data.publishedDate.getFullYear();
data.publishedMonth = months[data.publishedDate.getMonth()];
data.publishedDay = data.publishedDate.getDate();
data.publishedMonthPadded = zeroPad(data.publishedDate.getMonth() + 1);
data.publishedDayPadded = zeroPad(data.publishedDate.getDate());
if (data.authors.length > 2) {
data.concatenatedAuthors = data.authors[0].lastName + ", et al.";
} else if (data.authors.length === 2) {
data.concatenatedAuthors = data.authors[0].lastName + " & " + data.authors[1].lastName;
} else if (data.authors.length === 1) {
data.concatenatedAuthors = data.authors[0].lastName
}
data.bibtexAuthors = data.authors.map(function(author){
return author.lastName + ", " + author.firstName;
}).join(" and ");
data.slug = data.authors.length ? data.authors[0].lastName.toLowerCase() + data.publishedYear + data.title.split(" ")[0].toLowerCase() : "Untitled";
}
components/footer.js
+9 -6
View File
@@ -8,28 +8,31 @@ dt-footer {
font-weight: 300;
padding: 40px 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.6);
background-color: hsl(223, 9%, 25%);
text-align: center;
}
dt-footer .logo svg {
width: 24px;
position: relative;
top: 4px;
margin-right: -2px;
margin-right: 2px;
}
dt-footer .logo svg path {
stroke: rgba(255, 255, 255, 0.8)!important;
stroke-width: 3px!important;
fill: none;
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 3px;
}
dt-footer .logo {
font-size: 16px;
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
margin-right: 6px;
}
</style>
<div class="l-body">
<div class="l-screen-inset">
<a href="/" class="logo">
${logo}
Distill
components/footnote.js
+25
View File
@@ -0,0 +1,25 @@
export default function(dom, data) {
var fnTags = [].slice.apply(dom.querySelectorAll("dt-fn"));
var fnContent = [];
fnTags.forEach((el,n) => {
var content = el.innerHTML;
fnContent.push(content);
n = (n+1)+"";
var key = "fn-"+n;
var escaped_content = content.replace(/"/g, "&#39;");
el.innerHTML = `<sup><span id="${key}" data-hover="${escaped_content}" style="cursor:pointer">${n}</span></sup>`;
});
let fnList = dom.querySelector("dt-fn-list");
if (fnList) {
let ol = dom.createElement("ol");
fnContent.forEach(content => {
let el = dom.createElement("li");
el.innerHTML = content;
ol.appendChild(el);
})
fnList.appendChild(ol);
}
}
components/front-matter.js
+11 -4
View File
@@ -10,25 +10,32 @@ export default function(dom, data) {
data.title = localData.title ? localData.title : "Untitled";
data.description = localData.description ? localData.description : "No description.";
data.published = localData.published ? new Date(localData.published) : new Date("Invalid");
data.updated = localData.updated ? new Date(localData.updated) : new Date("Invalid");
data.authors = localData.authors ? localData.authors : [];
data.authors = data.authors.map((author, i) =>{
let a = {};
let name = Object.keys(author)[0];
if ((typeof author) === "string") {
name = author;
} else {
a.personalURL = author[name];
}
let names = name.split(" ");
a.name = name;
a.firstName = names.slice(0, names.length - 1).join(" ");
a.lastName = names[names.length -1];
a.personalURL = author[name];
if(localData.affiliations[i]) {
let affiliation = Object.keys(localData.affiliations[i])[0];
if ((typeof localData.affiliations[i]) === "string") {
affiliation = localData.affiliations[i]
} else {
a.affiliationURL = localData.affiliations[i][affiliation];
}
a.affiliation = affiliation;
a.affiliationURL = localData.affiliations[i][affiliation];
}
return a;
});
}
components/header.js
+31 -9
View File
@@ -6,41 +6,61 @@ dt-header {
display: block;
position: relative;
height: 60px;
background-color: none;
background-color: hsl(223, 9%, 25%);
width: 100%;
box-sizing: border-box;
z-index: 2;
color: rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}
dt-header .content {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
height: 60px;
height: 70px;
}
dt-header a {
font-size: 16px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
color: rgba(255, 255, 255, 0.8);
padding: 22px 0;
}
dt-header a:hover {
color: rgba(255, 255, 255, 1);
}
dt-header svg {
width: 24px;
position: relative;
top: 4px;
margin-right: -2px;
margin-right: 2px;
}
@media(min-width: 1080px) {
dt-header {
height: 70px;
}
dt-header a {
height: 70px;
line-height: 70px;
padding: 28px 0;
}
dt-header .logo {
}
}
dt-header svg path {
fill: none;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 3px;
}
dt-header .logo {
font-size: 16px;
font-size: 13px;
font-weight: 300;
text-transform: uppercase;
}
dt-header .nav {
float: right;
font-weight: 300;
}
dt-header .nav a {
font-size: 14px;
@@ -53,6 +73,8 @@ dt-header .nav a {
Distill
</a>
<div class="nav">
<a href="/faq">About</a>
<!-- https://twitter.com/distillpub -->
</div>
</div>
`
components/hover-box-include.js
+7
View File
@@ -0,0 +1,7 @@
import code from './hover-box.txt';
export default function(dom) {
let s = dom.createElement("script");
s.textContent = code;
dom.querySelector("body").appendChild(s);
}
components/hover-box.txt
+108
View File
@@ -0,0 +1,108 @@
// DistillHoverBox
//=====================================
function DistillHoverBox(key, pos){
if (!(key in DistillHoverBox.contentMap)){
console.error("No DistillHoverBox content registered for key", key);
}
if (key in DistillHoverBox.liveBoxes) {
console.error("There already exists a DistillHoverBox for key", key);
} else {
for (var k in DistillHoverBox.liveBoxes)
DistillHoverBox.liveBoxes[k].remove();
DistillHoverBox.liveBoxes[key] = this;
}
this.key = key;
var pretty = window.innerWidth > 600;
var padding = pretty? 18 : 12;
var outer_padding = pretty ? 18 : 0;
var bbox = document.querySelector("body").getBoundingClientRect();
var left = pos[0] - bbox.left, top = pos[1] - bbox.top;
var width = Math.min(window.innerWidth-2*outer_padding, 648);
left = Math.min(left, window.innerWidth-width-outer_padding);
width = width - 2*padding;
var str = `<div style="position: absolute;
background-color: #FFF;
white-s
opacity: 0.95;
max-width: ${width}px;
top: ${top}px;
left: ${left}px;
border: 1px solid rgba(0, 0, 0, 0.25);
padding: ${padding}px;
border-radius: ${pretty? 3 : 0}px;
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
z-index: ${1e6}" >
${DistillHoverBox.contentMap[key]}
</div>`;
this.div = appendBody(str);
DistillHoverBox.bind (this.div, key);
}
DistillHoverBox.prototype.remove = function remove(){
if (this.div) this.div.remove();
if (this.timeout) clearTimeout(this.timeout);
delete DistillHoverBox.liveBoxes[this.key];
}
DistillHoverBox.prototype.stopTimeout = function stopTimeout() {
if (this.timeout) clearTimeout(this.timeout);
}
DistillHoverBox.prototype.extendTimeout = function extendTimeout(T) {
//console.log("extend", T)
var this_ = this;
this.stopTimeout();
this.timeout = setTimeout(() => this_.remove(), T);
}
DistillHoverBox.liveBoxes = {};
DistillHoverBox.contentMap = {};
DistillHoverBox.bind = function bind(node, key) {
if (typeof node == "string"){
node = document.querySelector(node);
}
node.addEventListener("mouseover", () => {
var bbox = node.getBoundingClientRect();
if (!(key in DistillHoverBox.liveBoxes)){
new DistillHoverBox(key, [bbox.right, bbox.bottom]);
}
DistillHoverBox.liveBoxes[key].stopTimeout();
});
node.addEventListener("mouseout", () => {
if (key in DistillHoverBox.liveBoxes){
DistillHoverBox.liveBoxes[key].extendTimeout(250);
}
});
}
function appendBody(str){
var node = nodeFromString(str);
var body = document.querySelector("body");
body.appendChild(node);
return node;
}
function nodeFromString(str) {
var div = document.createElement("div");
div.innerHTML = str;
return div.firstChild;
}
var hover_es = document.querySelectorAll("span[data-hover]");
hover_es = [].slice.apply(hover_es);
hover_es.forEach((e,n) => {
var key = "hover-"+n;
var content = e.getAttribute("data-hover");
DistillHoverBox.contentMap[key] = content;
DistillHoverBox.bind(e, key);
});
components/meta.js
+38 -40
View File
@@ -6,7 +6,7 @@ export default function(dom, data) {
function meta(name, content) {
if (content)
appendHead(`<meta name="${name}" content="${content}" >`);
appendHead(` <meta name="${name}" content="${content}" >\n`);
}
appendHead(`
@@ -19,9 +19,8 @@ export default function(dom, data) {
appendHead(`
<!-- https://schema.org/Article -->
<meta property="article:published" itemprop="datePublished" content="${data.published}" />
<meta property="article:modified" itemprop="dateModified" content="${data.updated}" />
`);
<meta property="article:published" itemprop="datePublished" content="${data.publishedYear}-${data.publishedMonthPadded}-${data.publishedDayPadded}" />
`); // <meta property="article:modified" itemprop="dateModified" content="${data.updated}" />
data.authors.forEach((a) => {
appendHtml(head, `
<meta property="article:author" content="${a.firstName} ${a.lastName}" />`)
@@ -33,7 +32,7 @@ export default function(dom, data) {
<meta property="og:title" content="${data.title}"/>
<meta property="og:description" content="${data.description}">
<meta property="og:url" content="${data.url}"/>
<meta property="og:image" content="${data.url}/thumbnail.png"/>
<meta property="og:image" content="${data.url}/thumbnail.jpg"/>
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Distill" />
`);
@@ -44,50 +43,49 @@ export default function(dom, data) {
<meta name="twitter:title" content="${data.title}">
<meta name="twitter:description" content="${data.description}">
<meta name="twitter:url" content="${data.url}">
<meta name="twitter:image" content="${data.url}/thumbnail.png">
<meta name="twitter:image" content="${data.url}/thumbnail.jpg">
<meta name="twitter:image:width" content="560">
<meta name="twitter:image:height" content="295">
`);
appendHead(`
<!-- https://scholar.google.com/intl/en/scholar/inclusion.html#indexing -->
`);
// if this is a proprer article, generate Google Scholar meta data
if (data.doiSuffix){
appendHead(`
<!-- https://scholar.google.com/intl/en/scholar/inclusion.html#indexing -->\n`);
meta("citation_title", data.title);
meta("citation_fulltext_html_url", data.url);
meta("citation_volume", data.volume);
meta("citation_issue", data.issue);
meta("citation_firstpage", data.doiSuffix? `e${data.doiSuffix}` : undefined);
meta("citation_doi", data.doi);
meta("citation_title", data.title);
meta("citation_fulltext_html_url", data.url);
meta("citation_volume", data.volume);
meta("citation_issue", data.issue);
meta("citation_firstpage", data.doiSuffix? `e${data.doiSuffix}` : undefined);
meta("citation_doi", data.doi);
let journal = data.journal || {};
meta("citation_journal_title", journal.name);
meta("citation_journal_abbrev", journal.nameAbbrev);
meta("citation_issn", journal.issn);
meta("citation_publisher", journal.publisher);
let journal = data.journal || {};
meta("citation_journal_title", journal.name);
meta("citation_journal_abbrev", journal.nameAbbrev);
meta("citation_issn", journal.issn);
meta("citation_publisher", journal.publisher);
if (data.published){
let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
let publishedYear = data.published.getFullYear();
let publishedMonthPadded = zeroPad(data.published.getMonth() + 1);
let publishedDayPadded = zeroPad(data.published.getDate());
meta("citation_publication_date", `${publishedYear}/${publishedMonthPadded}/${publishedDayPadded}`);
}
if (data.publishedDate){
let zeroPad = (n) => { return n < 10 ? "0" + n : n; };
meta("citation_publication_date", `${data.publishedYear}/${data.publishedMonthPadded}/${data.publishedDayPadded}`);
}
(data.authors || []).forEach((a) => {
meta("citation_author", `${a.lastName}, ${a.firstName}`);
meta("citation_author_institution", a.affiliation);
});
if (data.citations) {
data.citations.forEach(key => {
let d = data.bibliography[key];
if(!d) {
console.warn("No bibliography data fround for " + key)
} else {
meta("citation_reference", citation_meta_content(data.bibliography[key]) )
};
(data.authors || []).forEach((a) => {
meta("citation_author", `${a.lastName}, ${a.firstName}`);
meta("citation_author_institution", a.affiliation);
});
if (data.citations) {
data.citations.forEach(key => {
let d = data.bibliography[key];
if(!d) {
console.warn("No bibliography data fround for " + key)
} else {
meta("citation_reference", citation_meta_content(data.bibliography[key]) )
};
});
}
}
}
components/styles-article.css
+101 -28
View File
@@ -1,6 +1,10 @@
dt-article {
display: block;
color: rgba(0, 0, 0, 0.8);
font: 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
font: 17px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
padding-bottom: 72px;
overflow: hidden;
background: white;
}
@media(min-width: 1024px) {
@@ -9,49 +13,108 @@ dt-article {
}
}
dt-article h1 {
font-weight: 700;
font-size: 32px;
line-height: 1.1em;
/*-webkit-font-smoothing: antialiased;*/
}
/* H1 */
@media(min-width: 1024px) {
dt-article h1 {
margin-top: 18px;
font-weight: 400;
font-size: 40px;
line-height: 1em;
font-family: Cochin, Georgia, serif;
}
@media(min-width: 768px) {
dt-article h1 {
font-size: 50px;
font-size: 46px;
margin-top: 48px;
margin-bottom: 12px;
letter-spacing: -0.025em;
}
}
@media(min-width: 1024px) {
@media(min-width: 1080px) {
dt-article.centered h1 {
text-align: center;
}
dt-article h1 {
font-size: 50px;
letter-spacing: -0.02em;
}
dt-article > h1:first-of-type {
margin-top: 80px;
}
}
@media(min-width: 1200px) {
dt-article h1 {
font-size: 54px;
}
dt-article > h1:first-of-type {
margin-top: 100px;
}
}
/* H2 */
dt-article h2 {
font-weight: 400;
font-size: 28px;
font-weight: 700;
font-size: 22px;
line-height: 1.25em;
margin-top: 12px;
margin-bottom: 24px;
}
dt-article h1 + h2 {
padding-bottom: 48px;
margin-bottom: 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@media(min-width: 1024px) {
dt-article h2 {
font-size: 24px;
}
}
dt-article h1 + h2 {
font-weight: 300;
font-size: 20px;
line-height: 1.5em;
margin-top: 8px;
}
@media(min-width: 1024px) {
dt-article.centered h1 + h2 {
text-align: center;
}
dt-article h1 + h2 {
margin-top: 12px;
font-size: 24px;
letter-spacing: 0.015em;
}
}
/* H3 */
dt-article h3 {
font-weight: 700;
font-size: 20px;
font-size: 13px;
line-height: 1.4em;
margin-top: 24px;
margin-bottom: 24px;
margin-top: 36px;
margin-bottom: 18px;
text-transform: uppercase;
letter-spacing: -0.03em;
}
dt-article h1 + h3 {
margin-top: 48px;
}
@media(min-width: 1024px) {
dt-article h3 {
font-size: 16px;
}
}
/* H4 */
dt-article h4 {
font-weight: 600;
text-transform: uppercase;
@@ -66,15 +129,17 @@ dt-article a {
dt-article p {
margin-bottom: 24px;
-webkit-font-smoothing: antialiased;
/*font-family: Georgia, serif;*/
font-family: Georgia, serif;
font-family: 16px;
}
dt-article p a {
/*text-decoration: none;*/
/*background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0) 50%);*/
/*background-repeat: repeat-x;*/
/*background-size: 2px 1em;*/
/*background-position: 0 1.25em;*/
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
text-decoration: none;
}
dt-article p a:hover {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
}
dt-article p .link {
@@ -82,8 +147,6 @@ dt-article p .link {
cursor: pointer;
}
dt-article ul {
padding-left: 20px;
}
@@ -180,3 +243,13 @@ dt-article figure figcaption b {
dt-article > dt-code {
display: block;
}
dt-article .citation {
color: #668;
cursor: pointer;
}
dt-include {
width: auto;
display: block;
}
components/styles-base.css
+15 -4
View File
@@ -1,14 +1,25 @@
html {
font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
}
html {
font: 400 16px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
/*background-color: hsl(223, 9%, 25%);*/
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
/*background-color: hsl(223, 9%, 25%);*/
}
a {
color: #004276;
}
figure {
margin: 0;
}
h1 {
font-family: Cochin, Georgia, serif;
}
/*
components/styles-layout.css
+112 -14
View File
@@ -1,6 +1,32 @@
/*
Column: 60px
Gutter: 24px
Body: 648px
- 8 columns
- 7 gutters
Middle: 816px
Page: 984px
- 12 columns
- 11 gutters
*/
.l-body,
.l-body-outset,
.l-page,
dt-article > * {
.l-page-outset,
.l-middle,
.l-middle-outset,
dt-article > div,
dt-article > p,
dt-article > h1,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline {
width: auto;
margin-left: 24px;
margin-right: 24px;
box-sizing: border-box;
@@ -8,8 +34,20 @@ dt-article > * {
@media(min-width: 768px) {
.l-body,
.l-body-outset,
.l-page,
dt-article > * {
.l-page-outset,
.l-middle,
.l-middle-outset,
dt-article > div,
dt-article > p,
dt-article > h1,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline {
margin-left: 72px;
margin-right: 72px;
}
@@ -17,40 +55,53 @@ dt-article > * {
@media(min-width: 1080px) {
.l-body,
dt-article > * {
dt-article > div,
dt-article > p,
dt-article > h1,
dt-article > h2,
dt-article > h3,
dt-article > h4,
dt-article > figure,
dt-article > ul,
dt-article > dt-byline {
margin-left: calc(50% - 984px / 2);
width: 648px;
}
.l-body-outset,
dt-article .l-body-outset {
margin-left: calc(50% - 984px / 2 - 24px);
width: calc(648px + 48px);
margin-left: calc(50% - 984px / 2 - 96px/2);
width: calc(648px + 96px);
}
.l-middle,
dt-article .l-middle {
width: 816px;
margin-left: calc(50% - 984px / 2);
margin-right: auto;
}
.l-page,
dt-article .l-page {
dt-article .l-page,
dt-article.centered .l-page {
width: 984px;
margin-left: auto;
margin-right: auto;
}
.l-page-outset,
dt-article .l-page-outset {
dt-article .l-page-outset,
dt-article.centered .l-page-outset {
width: 1080px;
margin-left: auto;
margin-right: auto;
}
.l-screen,
dt-article .l-screen {
dt-article .l-screen,
dt-article.centered .l-screen {
margin-left: auto;
margin-right: auto;
width: auto;
}
.l-screen-inset,
dt-article .l-screen-inset {
dt-article .l-screen-inset,
dt-article.centered .l-screen-inset {
margin-left: 24px;
margin-right: 24px;
width: auto;
@@ -61,8 +112,8 @@ dt-article > * {
float: right;
margin-top: 0;
margin-left: 24px;
margin-right: calc((100vw - 960px) / 2);
width: calc((984px - 648px) / 2 - 24px);
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) - 24px);
}
/* Side */
.side.l-body,
@@ -83,13 +134,60 @@ dt-article > * {
margin-right: calc((100vw - 984px + 648px - 48px) / 2);
width: calc(648px / 2 - 48px + 24px);
}
.side.l-page,
dt-article .side.l-page {
/* Centered */
.centered .l-body,
.centered.l-body,
dt-article.centered > div,
dt-article.centered > p,
dt-article.centered > h1,
dt-article.centered > h2,
dt-article.centered > h3,
dt-article.centered > h4,
dt-article.centered > figure,
dt-article.centered > ul,
dt-article.centered > dt-byline {
margin-left: auto;
margin-right: auto;
width: 648px;
}
.centered .l-body-outset,
.centered.l-body-outset,
dt-article.centered .l-body-outset {
margin-left: auto;
margin-right: auto;
width: calc(648px + 96px);
}
.centered .l-middle,
.centered.l-middle,
dt-article.centered .l-middle {
width: 816px;
margin-left: auto;
margin-right: auto;
}
/* page and screen are already centered */
.centered .l-gutter,
.centered.l-gutter,
dt-article.centered .l-gutter {
clear: both;
float: right;
margin-top: 0;
margin-left: 24px;
margin-right: calc((100vw - 984px) / 2);
width: calc((984px - 648px) / 2 - 24px);
}
/* Side */
.centered .side.l-body,
.centered.side.l-body,
dt-article.centered .side.l-body {
clear: both;
float: right;
margin-top: 0;
margin-left: 48px;
margin-right: calc((100vw - 984px) / 2);
width: calc(960px / 2 - 48px);
width: 396px;
}
}
dist/template.js
Vendored
+1758 -214
View File
File diff suppressed because it is too large Load Diff
dist/template.js.map
Vendored
+5 -1
View File
File diff suppressed because one or more lines are too long
examples/article.html
+125 -5
View File
@@ -5,10 +5,10 @@
title: Article Title
published: Jan 10, 2017
authors:
- Chris Olah: http://colah.github.io
- Chris Olah:
- Shan Carter: http://shancarter.com
affiliations:
- Google Brain: http://g.co/brain
- Google Brain:
- Google Brain: http://g.co/brain
</script>
@@ -18,16 +18,136 @@
<h2>A description of the article</h2>
<dt-byline></dt-byline>
<p>This is the first paragraph of the article.</p>
<p>We can also cite <dt-cite key="gregor2015draw"></dt-cite> external publications.</p>
<p>We can also cite <dt-cite key="gregor2015draw,mercier2011humans"></dt-cite> external publications. <dt-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></dt-cite></p>
</dt-article>
<script type="text/bibliography">
@article{gregor2015draw,
title={DRAW: A recurrent neural network for image generation},
author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
journal={arXivreprint arXiv:1502.04623},
year={2015}
journal={arXiv preprint arXiv:1502.04623},
year={2015},
url ={https://arxiv.org/pdf/1502.04623.pdf}
}
@article{mercier2011humans,
title={Why do humans reason? Arguments for an argumentative theory},
author={Mercier, Hugo and Sperber, Dan},
journal={Behavioral and brain sciences},
volume={34},
number={02},
pages={57--74},
year={2011},
publisher={Cambridge Univ Press},
doi={10.1017/S0140525X10000968}
}
@article{dong2014image,
title={Image super-resolution using deep convolutional networks},
author={Dong, Chao and Loy, Chen Change and He, Kaiming and Tang, Xiaoou},
journal={arXiv preprint arXiv:1501.00092},
year={2014},
url={https://arxiv.org/pdf/1501.00092.pdf}
}
@article{dumoulin2016adversarially,
title={Adversarially Learned Inference},
author={Dumoulin, Vincent and Belghazi, Ishmael and Poole, Ben and Lamb, Alex and Arjovsky, Martin and Mastropietro, Olivier and Courville, Aaron},
journal={arXiv preprint arXiv:1606.00704},
year={2016},
url={https://arxiv.org/pdf/1606.00704.pdf}
}
@article{dumoulin2016guide,
title={A guide to convolution arithmetic for deep learning},
author={Dumoulin, Vincent and Visin, Francesco},
journal={arXiv preprint arXiv:1603.07285},
year={2016},
url={https://arxiv.org/pdf/1603.07285.pdf}
}
@article{donahue2016adversarial,
title={Adversarial Feature Learning},
author={Donahue, Jeff and Kr{\"a}henb{\"u}hl, Philipp and Darrell, Trevor},
journal={arXiv preprint arXiv:1605.09782},
year={2016},
url={https://arxiv.org/pdf/1605.09782.pdf}
}
@article{gauthier2014conditional,
title={Conditional generative adversarial nets for convolutional face generation},
author={Gauthier, Jon},
journal={Class Project for Stanford CS231N: Convolutional Neural Networks for Visual Recognition, Winter semester},
volume={2014},
year={2014},
url={http://www.foldl.me/uploads/papers/tr-cgans.pdf}
}
@article{henaff2015geodesics,
title={Geodesics of learned representations},
author={H{\'e}naff, Olivier J and Simoncelli, Eero P},
journal={arXiv preprint arXiv:1511.06394},
year={2015},
url={https://arxiv.org/pdf/1511.06394.pdf}
}
@article{johnson2016perceptual,
title={Perceptual losses for real-time style transfer and super-resolution},
author={Johnson, Justin and Alahi, Alexandre and Fei-Fei, Li},
journal={arXiv preprint arXiv:1603.08155},
year={2016},
url={https://arxiv.org/pdf/1603.08155.pdf}
}
@article{mordvintsev2015inceptionism,
title={Inceptionism: Going deeper into neural networks},
author={Mordvintsev, Alexander and Olah, Christopher and Tyka, Mike},
journal={Google Research Blog},
year={2015},
url={https://research.googleblog.com/2015/06/inceptionism-going-deeper-into-neural.html}
}
@misc{mordvintsev2016deepdreaming,
title={DeepDreaming with TensorFlow},
author={Mordvintsev, Alexander},
year={2016},
url={https://github.com/tensorflow/tensorflow/blob/master/tensorflow/examples/tutorials/deepdream/deepdream.ipynb},
}
@article{radford2015unsupervised,
title={Unsupervised representation learning with deep convolutional generative adversarial networks},
author={Radford, Alec and Metz, Luke and Chintala, Soumith},
journal={arXiv preprint arXiv:1511.06434},
year={2015},
url={https://arxiv.org/pdf/1511.06434.pdf}
}
@inproceedings{salimans2016improved,
title={Improved techniques for training gans},
author={Salimans, Tim and Goodfellow, Ian and Zaremba, Wojciech and Cheung, Vicki and Radford, Alec and Chen, Xi},
booktitle={Advances in Neural Information Processing Systems},
pages={2226--2234},
year={2016},
url={https://arxiv.org/pdf/1606.03498.pdf}
}
@article{shi2016deconvolution,
title={Is the deconvolution layer the same as a convolutional layer?},
author={Shi, Wenzhe and Caballero, Jose and Theis, Lucas and Huszar, Ferenc and Aitken, Andrew and Ledig, Christian and Wang, Zehan},
journal={arXiv preprint arXiv:1609.07009},
year={2016},
url={https://arxiv.org/pdf/1609.07009.pdf}
}
@inproceedings{shi2016real,
title={Real-time single image and video super-resolution using an efficient sub-pixel convolutional neural network},
author={Shi, Wenzhe and Caballero, Jose and Husz{\'a}r, Ferenc and Totz, Johannes and Aitken, Andrew P and Bishop, Rob and Rueckert, Daniel and Wang, Zehan},
booktitle={Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition},
pages={1874--1883},
year={2016},
url={https://arxiv.org/pdf/1609.05158.pdf},
doi={10.1109/cvpr.2016.207}
}
</script>
<dt-appendix>
<h3>Contributions</h3>
examples/tutorial.html
+2 -2
View File
@@ -27,7 +27,7 @@
<dt-code block language="html">
&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;script src="http://distill.pub/template.js"&gt;&lt;/script&gt;
&lt;dt-article&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
@@ -37,7 +37,7 @@
<dt-code block language="html">
&lt;!doctype html&gt;
&lt;meta charset="utf-8"&gt;
&lt;script src="../dist/template.min.js"&gt;&lt;/script&gt;
&lt;script src="http://distill.pub/template.js"&gt;&lt;/script&gt;
&lt;script type="text/front-matter"&gt;
title: Article Title
index.js
+9 -1
View File
@@ -5,11 +5,14 @@ import bibliography from "./components/bibliography";
import expandData from "./components/expand-data";
import meta from "./components/meta";
import header from "./components/header";
import byline from "./components/byline";
import appendix from "./components/appendix";
import footer from "./components/footer";
import citation from "./components/citation";
import footnote from "./components/footnote";
import markdown from "./components/markdown";
import code from "./components/code";
import hoverBox from "./components/hover-box-include";
import generateCrossref from "./components/generate-crossref";
function renderImmediately(dom) {
@@ -23,12 +26,14 @@ function renderOnLoad(dom, data) {
expandData(dom, data);
meta(dom, data);
header(dom, data);
byline(dom, data);
appendix(dom, data);
footer(dom, data);
markdown(dom, data);
code(dom, data);
citation(dom, data);
// TODO remove script tag
footnote(dom, data);
hoverBox(dom, data);
}
// If we are in a browser, render automatically.
@@ -45,6 +50,9 @@ if(window && window.document) {
function render(dom, data) {
renderImmediately(dom);
renderOnLoad(dom, data);
// Remove script tag so it doesn't run again
let s = dom.querySelector('script[src="http://distill.pub/template.js"]');
if (s) { s.parentElement.removeChild(s); }
}
export {render as render};
package.json
+4
View File
@@ -34,5 +34,9 @@
"rollup-plugin-string": "^2.0.2",
"rollup-plugin-uglify": "^1.0.1",
"rollup-watch": "^2.5.0"
},
"dependencies": {
"d3-time-format": "^2.0.3",
"mustache": "^2.3.0"
}
}
rollup.config.js
+4 -4
View File
@@ -6,8 +6,8 @@ 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}/`);
// const PORT = 8080;
// console.log(`open http://localhost:${PORT}/`);
export default {
entry: 'index.js',
@@ -25,7 +25,7 @@ export default {
browser: true,
}),
string({
include: ["**/*.svg", "**/*.html", "**/*.css", "**/*.base64"]
include: ["**/*.txt", "**/*.svg", "**/*.html", "**/*.css", "**/*.base64"]
}),
buble({
exclude: 'node_modules',
@@ -34,6 +34,6 @@ export default {
commonjs(),
// uglify(),
// liveReload(),
serve({port: PORT}),
// serve({port: PORT}),
]
};
yarn.lock
+14 -4
View File
@@ -331,6 +331,16 @@ cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0":
dependencies:
cssom "0.3.x"
d3-time-format@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.0.3.tgz#3241569b74ddc9c42e0689c0e8a903579fd6280a"
dependencies:
d3-time "1"
d3-time@1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.4.tgz#2ceba09a76b7450c992a1ded4e10fc6195e69649"
dashdash@^1.12.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -377,10 +387,6 @@ diff@1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/diff/-/diff-1.4.0.tgz#7f28d2eb9ee7b15a97efd89ce63dcfdaa3ccbabf"
distill-template@^0.0.4:
version "0.0.4"
resolved "https://registry.yarnpkg.com/distill-template/-/distill-template-0.0.4.tgz#d9d8350001f9f6fc64884e0ad903d733b6856d59"
ecc-jsbn@~0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
@@ -980,6 +986,10 @@ ms@0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
mustache@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/mustache/-/mustache-2.3.0.tgz#4028f7778b17708a489930a6e52ac3bca0da41d0"
nan@^2.3.0:
version "2.5.0"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"