mirror of
https://github.com/wassname/template.git
synced 2026-06-27 19:01:31 +08:00
First
This commit is contained in:
Shan Carter
+47
@@ -0,0 +1,47 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
jspm_packages
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
@@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@@ -0,0 +1,77 @@
|
||||
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);
|
||||
padding-top: 36px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 60px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
dt-appendix h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 18px;
|
||||
color: rgba(0,0,0,0.65);
|
||||
}
|
||||
dt-appendix .citation {
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-left: 18px;
|
||||
border: 1px solid rgba(0,0,0,0.1);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
padding: 10px 18px;
|
||||
border-radius: 3px;
|
||||
color: rgba(150, 150, 150, 1);
|
||||
overflow: hidden;
|
||||
margin-top: -12px;
|
||||
}
|
||||
dt-appendix .references {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
dt-appendix a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="l-body">
|
||||
<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>For attribution in academic contexts, please cite this work as</p>
|
||||
<pre class="citation short"></pre>
|
||||
<p>BibTeX citation</p>
|
||||
<pre class="citation long"></pre>
|
||||
</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) {
|
||||
dom.querySelector('dt-appendix').innerHTML = html;
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
export default function(dom, data) {
|
||||
|
||||
let citations = Object.keys(data.citations).map(c => data.citations[c]);
|
||||
citations.sort((a, b) => {
|
||||
return a.author.localeCompare(b.author);
|
||||
});
|
||||
|
||||
var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
|
||||
citeTags.forEach(el => {
|
||||
var keys = el.textContent.split(",");
|
||||
var cite_string = keys.map(inline_cite).join(", ");
|
||||
el.innerHTML = cite_string;
|
||||
});
|
||||
|
||||
let bibEl = dom.querySelector("dt-bibliography");
|
||||
let ol = dom.createElement("ol");
|
||||
citations.forEach(citation => {
|
||||
let el = dom.createElement("li");
|
||||
el.textContent = bibliography_cite(citation);
|
||||
ol.appendChild(el);
|
||||
})
|
||||
bibEl.appendChild(ol);
|
||||
|
||||
function inline_cite(key){
|
||||
if (key in data.citations){
|
||||
var ent = data.citations[key];
|
||||
var names = ent.author.split(" and ");
|
||||
names = names.map(name => name.split(",")[0].trim())
|
||||
var year = ent.year;
|
||||
if (names.length == 1) return names[0] + ", " + year;
|
||||
if (names.length == 2) return names[0] + " & " + names[1] + ", " + year;
|
||||
if (names.length > 2) return names[0] + ", et al., " + year;
|
||||
} else {
|
||||
return "?";
|
||||
}
|
||||
}
|
||||
|
||||
function bibliography_cite(ent){
|
||||
if (ent){
|
||||
var names = ent.author.split(" and ");
|
||||
var cite = "";
|
||||
let name_strings = names.map(name => {
|
||||
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]
|
||||
}
|
||||
cite += ", " + ent.year + ". "
|
||||
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 += ". "
|
||||
return cite
|
||||
} else {
|
||||
return "?";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
|
||||
function get_URL(ent){
|
||||
if (ent){
|
||||
var names = ent.author.split(" and ");
|
||||
names = names.map(name => name.split(",")[0].trim())
|
||||
var title = ent.title.split(" ")//.replace(/[,:]/, "")
|
||||
var url = "http://search.labs.crossref.org/dois?"//""https://scholar.google.com/scholar?"
|
||||
url += uris({q: names.join(" ") + " " + title.join(" ")})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import bibtexParse from "bibtex-parse-js";
|
||||
|
||||
export default function(dom, data) {
|
||||
|
||||
//TODO populate bibliography
|
||||
|
||||
let rawBib = `
|
||||
@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}
|
||||
}
|
||||
@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}
|
||||
}`;
|
||||
|
||||
var bibliography = {};
|
||||
bibtexParse.toJSON(rawBib).forEach(e => {
|
||||
bibliography[e.citationKey] = e.entryTags;
|
||||
bibliography[e.citationKey].type = e.entryType;
|
||||
});
|
||||
|
||||
let citations = {};
|
||||
var citeTags = [].slice.apply(dom.querySelectorAll("dt-cite"));
|
||||
citeTags.forEach(el => {
|
||||
let citationKeys = el.textContent.split(",");
|
||||
citationKeys.forEach(key => {
|
||||
if (bibliography[key]) {
|
||||
citations[key] = bibliography[key];
|
||||
} else {
|
||||
console.warn("No bibliography entry found for: " + key);
|
||||
}
|
||||
});
|
||||
});
|
||||
data.citations = citations;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import Prism from "prismjs";
|
||||
|
||||
export default function(dom, data) {
|
||||
let codeElements = [].slice.call(dom.querySelectorAll("code"));
|
||||
codeElements.forEach(el => {
|
||||
// let content = el.innerHTML;
|
||||
// el.innerHTML = "";
|
||||
// let p = dom.createElement("pre");
|
||||
// let c = dom.createElement("code");
|
||||
// console.log(content)
|
||||
let highlighted = Prism.highlightElement(el);
|
||||
// c.innerHTML = highlighted;
|
||||
// p.appendChild(c);
|
||||
// el.appendChild(p);
|
||||
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
const html = `
|
||||
<style>
|
||||
dt-footer {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-weight: 300;
|
||||
padding: 40px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
dt-footer .logo svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
dt-footer .logo svg path {
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
dt-footer .logo {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
Distill
|
||||
</a> is dedicated to clear explanations of machine learning
|
||||
</div>
|
||||
`;
|
||||
|
||||
export default function(dom, data) {
|
||||
dom.querySelector('dt-footer').innerHTML = html;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
const html = `
|
||||
<style>
|
||||
dt-header {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background-color: #fcfcfc;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
dt-header .content {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
height: 60px;
|
||||
}
|
||||
dt-header a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
dt-header svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
dt-header svg path {
|
||||
fill: none;
|
||||
stroke: black;
|
||||
stroke-width: 1;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
dt-header .logo {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
dt-header .nav {
|
||||
float: right;
|
||||
}
|
||||
dt-header .nav a {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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>
|
||||
Distill
|
||||
</a>
|
||||
<div class="nav">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
export default function(dom, data) {
|
||||
dom.querySelector('dt-header').innerHTML = html;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import marked from 'marked';
|
||||
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
smartypants: true
|
||||
});
|
||||
|
||||
export default function(dom, data) {
|
||||
let markdownElements = [].slice.call(dom.querySelectorAll('[dt-markdown]'));
|
||||
markdownElements.forEach(el => {
|
||||
let content = el.innerHTML;
|
||||
let indent = " ";
|
||||
// Set default indents to the first or second line
|
||||
|
||||
// content.replace("\n ", "\n" + indent);
|
||||
el.innerHTML = marked(content);
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @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},
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,181 @@
|
||||
export default `
|
||||
dt-article {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font: 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
dt-article {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
dt-article h1 {
|
||||
font-weight: 700;
|
||||
font-size: 32px;
|
||||
line-height: 1.1em;
|
||||
/*-webkit-font-smoothing: antialiased;*/
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
dt-article h1 {
|
||||
font-size: 50px;
|
||||
margin-bottom: 12px;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
dt-article > h1:first-of-type {
|
||||
margin-top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
dt-article h2 {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
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);
|
||||
}
|
||||
|
||||
dt-article h3 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
dt-article h4 {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
dt-article a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
dt-article p {
|
||||
margin-bottom: 24px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/*font-family: Georgia, serif;*/
|
||||
}
|
||||
|
||||
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;*/
|
||||
}
|
||||
|
||||
dt-article p .link {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
dt-article ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
dt-article li {
|
||||
/*margin-bottom: 24px;*/
|
||||
}
|
||||
|
||||
dt-article pre {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
dt-article hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
dt-article section {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* Figure */
|
||||
|
||||
dt-article figure {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
dt-article figure {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
dt-article figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
dt-article figure svg text,
|
||||
dt-article figure svg tspan {
|
||||
}
|
||||
|
||||
dt-article figure figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
dt-article figure figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
dt-article figure.external img {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
dt-article figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*dt-article figure figcaption::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: -20px;
|
||||
content: "";
|
||||
width: 25px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}*/
|
||||
|
||||
dt-article span.equation-mimic {
|
||||
font-family: georgia;
|
||||
font-size: 115%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
dt-article figure figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
`
|
||||
@@ -0,0 +1,59 @@
|
||||
export default `
|
||||
html {
|
||||
font: 400 15px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}*/
|
||||
|
||||
`;
|
||||
@@ -0,0 +1,151 @@
|
||||
export default `
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code {
|
||||
white-space:pre-wrap;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 2px;
|
||||
padding: 4px 7px;
|
||||
font-size: 15px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #a67f59;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,97 @@
|
||||
export default `
|
||||
.l-body,
|
||||
.l-page,
|
||||
dt-article > * {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.l-body,
|
||||
.l-page,
|
||||
dt-article > * {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
.l-body,
|
||||
dt-article > * {
|
||||
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);
|
||||
}
|
||||
.l-middle,
|
||||
dt-article .l-middle {
|
||||
width: 816px;
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
}
|
||||
.l-page,
|
||||
dt-article .l-page {
|
||||
width: 984px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-page-outset,
|
||||
dt-article .l-page-outset {
|
||||
width: 1080px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-screen,
|
||||
dt-article .l-screen {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
}
|
||||
.l-screen-inset,
|
||||
dt-article .l-screen-inset {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
width: auto;
|
||||
}
|
||||
.l-gutter,
|
||||
dt-article .l-gutter {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 24px;
|
||||
margin-right: calc((100vw - 960px) / 2);
|
||||
width: calc((984px - 648px) / 2 - 24px);
|
||||
}
|
||||
/* Side */
|
||||
.side.l-body,
|
||||
dt-article .side.l-body {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px + 648px) / 2);
|
||||
width: calc(648px / 2 - 24px);
|
||||
}
|
||||
.side.l-body-outset,
|
||||
dt-article .side.l-body-outset {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px + 648px - 48px) / 2);
|
||||
width: calc(648px / 2 - 48px + 24px);
|
||||
}
|
||||
.side.l-page,
|
||||
dt-article .side.l-page {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 48px;
|
||||
margin-right: calc((100vw - 984px) / 2);
|
||||
width: calc(960px / 2 - 48px);
|
||||
}
|
||||
}
|
||||
`
|
||||
@@ -0,0 +1,10 @@
|
||||
import base from './styles-base';
|
||||
import layout from './styles-layout';
|
||||
import article from './styles-article';
|
||||
import code from './styles-code';
|
||||
|
||||
export default function(dom, data) {
|
||||
let s = dom.createElement("style");
|
||||
s.textContent = base + layout + article + code;
|
||||
dom.querySelector("head").appendChild(s);
|
||||
}
|
||||
Vendored
+3
File diff suppressed because one or more lines are too long
Vendored
+1
File diff suppressed because one or more lines are too long
@@ -0,0 +1,16 @@
|
||||
@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}
|
||||
}
|
||||
@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}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<script src="../dist/template.min.js"></script>
|
||||
<style>
|
||||
.fake-img {
|
||||
background: #bbb;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.fake-img p {
|
||||
font-family: monospace;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin: 12px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
</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>
|
||||
<!-- <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>
|
||||
<h2>Layouts</h2>
|
||||
<p>The main text column is referred to as the body. It is the assumed layout of any direct descendents of the <code>dt-article</code> element.</p>
|
||||
<div class="fake-img l-body"><p>.l-body</p></div>
|
||||
<div class="fake-img l-middle"><p>.l-middle</p></div>
|
||||
<div class="fake-img l-page"><p>.l-page</p></div>
|
||||
<p>Occasionally you’ll want to use the full browser width. For this, use screen. You can also inset the element a little from the edge of the browser by appending, you guessed it, <code>inset</code>.</p>
|
||||
<div class="fake-img l-screen"><p>.l-screen</p></div>
|
||||
<div class="fake-img l-screen-inset"><p>.l-screen-inset</p></div>
|
||||
<p>Often you want to position smaller images so as not to completely interrupt the flow of your text. Or perhaps you want to put some text in the margin as an aside or to signal that it’s optional content. For these cases we’ll use the float-based <code>.side</code> layouts.</p>
|
||||
<div class="fake-img l-body side"><p>.l-body.side</p></div>
|
||||
<div class="fake-img l-page side"><p>.l-page.side</p></div>
|
||||
<p>They are all floated to the right and anchored to the right-hand edge of the position you specify. By default, each will take up approximately half of the width of the standard layout position, but you can override the width with a more specific selector. </p>
|
||||
<div class="fake-img l-gutter"><p>.l-gutter</p></div>
|
||||
<p>The final layout is for marginalia, asides, and footnotes. It does not interrupt the normal flow of <code>.l-body</code> sized text except on mobile screen sizes.</p>
|
||||
<hr>
|
||||
<h2>Markdown</h2>
|
||||
<div dt-markdown>
|
||||
Any element with a `dt-markdown` attribute will be rendered with it's contents replaced with a markdown processed version. We use [marked](https://github.com/chjj/marked), with [github flavored markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/) and [smartypants](https://daringfireball.net/projects/smartypants/).
|
||||
|
||||
This section has been written in markdown, so if you view source on this page and look at this section you can use it as a reference.
|
||||
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Code Blocks</h2>
|
||||
<pre><code class="language-javascript">
|
||||
var x = 25;
|
||||
function(x){
|
||||
return x * x;
|
||||
}
|
||||
</code></pre>
|
||||
<p>You can also use code blocks within markdown blocks</p>
|
||||
<div dt-markdown>
|
||||
```javascript
|
||||
let x = 25;
|
||||
```
|
||||
</div>
|
||||
<hr>
|
||||
<h2>Citation</h2>
|
||||
<p>
|
||||
Take a look at this paper <dt-cite>gregor2015draw</dt-cite> which
|
||||
is about X.
|
||||
</p>
|
||||
<p>
|
||||
Why do we reason <dt-cite>mercier2011humans</dt-cite>
|
||||
</p>
|
||||
<hr>
|
||||
<h2>Math</h2>
|
||||
<hr>
|
||||
<h2>Footnotes</h2>
|
||||
</dt-article>
|
||||
<dt-appendix>
|
||||
<h3>Contributions</h3>
|
||||
<p>List of who did what</p>
|
||||
</dt-appendix>
|
||||
<dt-footer></dt-footer>
|
||||
@@ -0,0 +1,29 @@
|
||||
import citeData from "./components/cite-data";
|
||||
import styles from "./components/styles";
|
||||
import header from "./components/header";
|
||||
import appendix from "./components/appendix";
|
||||
import footer from "./components/footer";
|
||||
import citation from "./components/citation";
|
||||
import markdown from "./components/markdown";
|
||||
import code from "./components/code";
|
||||
|
||||
|
||||
|
||||
function render(dom, data) {
|
||||
styles(dom, data);
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
citeData(dom, data)
|
||||
header(dom, data);
|
||||
appendix(dom, data);
|
||||
footer(dom, data);
|
||||
markdown(dom, data);
|
||||
code(dom, data);
|
||||
citation(dom, data);
|
||||
});
|
||||
}
|
||||
|
||||
if(window.document) {
|
||||
render(window.document, []);
|
||||
}
|
||||
|
||||
export default render;
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "distill-template",
|
||||
"version": "1.4.1",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"start": "rollup -c -w"
|
||||
},
|
||||
"author": "Shan Carter",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bibtex-parse-js": "^0.0.23",
|
||||
"marked": "^0.3.6",
|
||||
"prismjs": "^1.6.0",
|
||||
"rollup": "^0.36.4",
|
||||
"rollup-plugin-buble": "^0.14.0",
|
||||
"rollup-plugin-commonjs": "^7.0.0",
|
||||
"rollup-plugin-livereload": "^0.3.1",
|
||||
"rollup-plugin-node-resolve": "^2.0.0",
|
||||
"rollup-plugin-serve": "^0.1.0",
|
||||
"rollup-plugin-uglify": "^1.0.1",
|
||||
"rollup-watch": "^2.5.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import buble from 'rollup-plugin-buble';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import liveReload from 'rollup-plugin-livereload';
|
||||
import serve from 'rollup-plugin-serve';
|
||||
import uglify from 'rollup-plugin-uglify';
|
||||
|
||||
const PORT = 8080;
|
||||
console.log(`open http://localhost:${PORT}/`);
|
||||
|
||||
export default {
|
||||
entry: 'index.js',
|
||||
sourceMap: true,
|
||||
targets: [
|
||||
{
|
||||
format: 'iife',
|
||||
moduleName: 'dl',
|
||||
dest: `dist/template.min.js`,
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
resolve({
|
||||
jsnext: true,
|
||||
browser: true,
|
||||
}),
|
||||
buble({
|
||||
exclude: 'node_modules',
|
||||
target: { chrome: 52, safari: 8, edge: 13, firefox: 48, }
|
||||
}),
|
||||
commonjs({}),
|
||||
uglify(),
|
||||
liveReload(),
|
||||
serve({port: PORT}),
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user