wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-07-24 13:20:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

WIP most components now on Shadow DOM

Browse Source
This commit is contained in:
Ludwig Schubert
2017-07-27 17:44:18 -07:00
parent 291864acae
commit 7d48a5d6e8
22 changed files with 2246 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components.js
+3
View File
@@ -15,6 +15,9 @@ import * as references from "./components/d-references";
import * as code from "./components/d-code";
import * as math from "./components/d-math";
import * as footnote from "./components/d-footnote";
import * as footnoteList from "./components/d-footnote-list";
import * as acknowledgements from "./components/d-acknowledgements";
import * as cite from "./components/d-cite";
// let codeStyle = document.createElement("style");
// codeStyle.textContent = codeCss;
components/citation.js
+165
View File
@@ -0,0 +1,165 @@
export function inline_cite_short(keys){
function cite_string(key){
if (key in data.bibliography){
var n = data.citations.indexOf(key)+1;
return ""+n;
} else {
return "?";
}
}
return "["+keys.map(cite_string).join(", ")+"]";
}
export function inline_cite_long(keys){
function cite_string(key){
if (key in data.bibliography){
var ent = data.bibliography[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 "?";
}
}
return keys.map(cite_string).join(", ");
}
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];
} else {
var last = name.split(" ").slice(-1)[0].trim();
var firsts = name.split(" ").slice(0,-1).join(" ");
}
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 "";
}
}
export function bibliography_cite(ent, fancy){
if (ent){
var cite = "<b>" + ent.title + "</b> "
cite += link_string(ent) + "<br>";
cite += author_string(ent, "${L}, ${I}", ", ", " and ");
if (ent.year || ent.date){
cite += ", " + (ent.year || ent.date) + ". "
} else {
cite += ". "
}
cite += venue_string(ent);
cite += doi_string(ent);
return cite
/*var cite = author_string(ent, "${L}, ${I}", ", ", " and ");
if (ent.year || ent.date){
cite += ", " + (ent.year || ent.date) + ". "
} else {
cite += ". "
}
cite += "<b>" + ent.title + "</b>. ";
cite += venue_string(ent);
cite += doi_string(ent);
cite += link_string(ent);
return cite*/
} else {
return "?";
}
}
export function hover_cite(ent){
if (ent){
var cite = "";
cite += "<b>" + ent.title + "</b>";
cite += link_string(ent);
cite += "<br>"
var a_str = author_string(ent, "${I} ${L}", ", ") + ".";
var v_str = venue_string(ent).trim() + " " + ent.year + ". " + doi_string(ent, true);
if ((a_str+v_str).length < Math.min(40, ent.title.length)) {
cite += a_str + " " + v_str;
} else {
cite += a_str + "<br>" + v_str;
}
return cite;
} else {
return "?";
}
}
//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
function get_GS_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(" ")})
}
}
components/d-acknowledgements.js
+29
View File
@@ -0,0 +1,29 @@
import { Template } from "../mixins/template";
const name = 'd-acknowledgements';
const T = Template(name, `
<style>
::slotted(h3) {
font-size: 15px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 0;
color: rgba(0,0,0,0.65);
line-height: 1em;
}
::slotted(*) a {
color: rgba(0, 0, 0, 0.6);
}
</style>
<slot></slot>
`);
export default class Acknowledgements extends T(HTMLElement) {
static get is() { return name; }
}
customElements.define(name, Acknowledgements);
components/d-appendix.js
+24 -28
View File
@@ -1,38 +1,34 @@
import {Template} from "../mixins/template";
import {page} from "./layout";
import { Template } from "../mixins/template";
import { page } from "./layout";
const T = Template("d-appendix", `
<style>
d-appendix {
display: block;
font-size: 13px;
line-height: 1.7em;
margin-bottom: 0;
border-top: 1px solid rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
background: rgb(250, 250, 250);
padding-top: 36px;
padding-bottom: 48px;
}
${page("d-appendix p, d-appendix h3, d-appendix pre")}
d-appendix h3 {
font-size: 15px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 0;
color: rgba(0,0,0,0.65);
line-height: 1em;
}
d-appendix a {
color: rgba(0, 0, 0, 0.6);
}
:host {
display: block;
font-size: 13px;
line-height: 1.7em;
margin-bottom: 0;
border-top: 1px solid rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
background: rgb(250, 250, 250);
padding-top: 36px;
padding-bottom: 48px;
}
${page(".l-body")}
</style>
<!-- slot -->
<d-references></d-references>
`, false);
<div class="l-body">
<slot></slot>
</div>
`);
export default class Appendix extends T(HTMLElement) {
static get is() { return "d-appendix"; }
}
customElements.define(Appendix.is, Appendix);
components/d-article.js
+6 -4
View File
@@ -21,16 +21,18 @@ const T = Template("d-article", `
/* H2 */
d-article h2 {
font-weight: 500;
font-weight: 400;
font-size: 26px;
line-height: 1.25em;
margin-top: 36px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media(min-width: 1024px) {
d-article h2 {
margin-top: 48px;
font-size: 26px;
margin-top: 2em;
font-size: 32px;
}
}
d-article h1 + h2 {
@@ -46,7 +48,7 @@ const T = Template("d-article", `
}
d-article h1 + h2 {
margin-top: 12px;
font-size: 24px;
font-size: 32px;
}
}
components/d-bibliography.js
+89 -81
View File
@@ -1,38 +1,24 @@
import {Template} from "../mixins/template";
import {body} from "./layout";
import bibtexParse from "bibtex-parse-js";
import mustache from "mustache";
import {page} from "./layout";
import { Template } from "../mixins/template";
import { bibliography_cite } from "./citation";
let mustacheTemplate = `
const name = 'd-bibliography';
const T = Template(name, `
<style>
d-bibliography {
display: block;
font-size: 13px;
line-height: 1.7em;
margin-bottom: 0;
border-top: 1px solid rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
background: rgb(250, 250, 250);
padding-top: 36px;
padding-bottom: 48px;
}
${page("d-bibliography ol, d-bibliography h3")}
d-bibliography .references {
.references {
font-size: 12px;
line-height: 20px;
}
d-bibliography .title {
.title {
font-weight: 600;
}
d-bibliography ol {
ol {
padding: 0 0 0 18px;
}
d-bibliography li {
li {
margin-bottom: 12px;
}
d-bibliography h3 {
h3 {
font-size: 15px;
font-weight: 500;
margin-top: 20px;
@@ -40,74 +26,96 @@ let mustacheTemplate = `
color: rgba(0,0,0,0.65);
line-height: 1em;
}
d-bibliography a {
a {
color: rgba(0, 0, 0, 0.6);
}
</style>
{{#hasCitations}}
<h3>References</h3>
<ol>
{{#citations}}
<li>
<div class="title">Unsupervised representation learning with deep convolutional generative adversarial networks  <a href="https://arxiv.org/pdf/1511.06434.pdf">[PDF]</a></div>
<div class="details">Radford, A., Metz, L. and Chintala, S., 2015. arXiv preprint arXiv:1511.06434.</div>
</li>
{{/citations}}
</ol>
{{/hasCitations}}
`;
export default class Bibliography extends HTMLElement {
static get is() { return "d-bibliography"; }
<h3>References</h3>
<ol></ol>
`);
function parseBibtex(bibtex) {
const bibliography = new Map();
const parsedEntries = bibtexParse.toJSON(bibtex);
for (const entry of parsedEntries) {
// normalize tags; note entryTags is an object, not Map
for (const tag in entry.entryTags) {
let value = entry.entryTags[tag];
value = value.replace(/[\t\n ]+/g, " ");
value = value.replace(/{\\["^`\.'acu~Hvs]( )?([a-zA-Z])}/g,
(full, x, char) => char);
value = value.replace(/{\\([a-zA-Z])}/g,
(full, char) => char);
entry.entryTags[tag] = value;
}
entry.entryTags.type = entry.entryType;
// add to bibliography
bibliography.set(entry.citationKey, entry.entryTags);
}
return bibliography;
}
export default class Bibliography extends T(HTMLElement) {
constructor() {
super()
this.citations = new Array();
this.finishedLoading = false;
}
connectedCallback() {
let s = this.querySelector("script");
if (s) {
let bibliography = new Map();
let rawBib = s.textContent;
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;
}
e.entryTags.type = e.entryType;
bibliography.set(e.citationKey, e.entryTags);
});
this.list = this.root.querySelector('ol');
// bibliography is initially hidden
this.root.host.style.display = 'none';
// parse bibliography
const scriptTag = this.querySelector("script");
if (scriptTag) {
this.bibliography = parseBibtex(scriptTag.textContent);
this.finishedLoading = true;
// look through document and register existing citations
document.querySelectorAll('d-cite')
.forEach(citation => this.registerCitation(citation));
} else {
console.error("No script tag with bibtex found in d-bibliography tag!")
}
}
getEntry(key) {
return this.bibliography.get(key);
}
hasEntry(key) {
return this.bibliography.has(key);
}
getIndex(key) {
return this.citations.indexOf(key);
}
registerCitation(citation) {
// a d-cite element may cite multiple sources
const keyString = citation.getAttribute("key");
const keys = keyString ? keyString.split(",") : [];
for (const key of keys) {
if (!this.bibliography.has(key)) {
console.error("Citation key '" + key + "' is not present in bibliography!")
} else if (this.citations.indexOf(key) === -1) {
this.citations.push(key);
const entry = this.getEntry(key);
// ensure citations list is visible
this.root.host.style.display = 'initial';
// construct and append list item to show citation
const listItem = document.createElement('li');
listItem.id = key;
listItem.innerHTML = bibliography_cite(entry);
this.list.appendChild(listItem);
}
this.data = bibliography;
this.render();
}
}
render() {
this.citations = [];
let citationElements = [].slice.apply(document.querySelectorAll("d-cite"));
citationElements.forEach(el => { this.cite(el) });
this.innerHTML = mustache.render(mustacheTemplate, {hasCitations: this.citations.length > 0, citations: this.citations});
}
cite(el) {
let keyString = el.getAttribute("key");
let keys = keyString ? keyString.split(",") : [];
keys.forEach(key => {
let citation = this.data[key];
if (!this.data.has(key)) {
console.error("Citation key '" + key + "' not present in bibliography.")
} else if (this.citations.indexOf(key) !== -1) {
// Bibliography entry has already been cited
} else {
this.citations.push(key);
}
})
}
}
customElements.define(Bibliography.is, Bibliography);
components/d-byline.js
+69 -66
View File
@@ -4,162 +4,165 @@ import {page} from "./layout";
const T = Template("d-byline", `
<style>
d-byline {
:host {
box-sizing: border-box;
font-size: 13px;
line-height: 20px;
display: block;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
/* 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.6);
padding-top: 20px;
padding-bottom: 20px;
}
${page("d-byline .byline")}
d-article.centered d-byline {
${page(".byline")}
d-article.centered {
text-align: center;
}
d-byline a,
d-article d-byline a {
a,
d-article a {
color: rgba(0, 0, 0, 0.8);
text-decoration: none;
border-bottom: none;
}
d-article d-byline a:hover {
d-article a:hover {
text-decoration: underline;
border-bottom: none;
}
d-byline .authors {
.authors {
text-align: left;
}
d-byline .name {
.name {
font-weight: 600;
display: inline;
text-transform: uppercase;
}
d-byline .affiliation {
.affiliation {
display: inline;
}
d-byline .date {
.date {
display: block;
text-align: left;
}
d-byline .year, d-byline .month {
.year, .month {
display: inline;
}
d-byline .citation {
.citation {
display: block;
text-align: left;
}
d-byline .citation div {
.citation div {
display: inline;
}
@media(min-width: 768px) {
d-byline {
{
}
}
@media(min-width: 1080px) {
d-byline {
{
border-bottom: none;
}
d-byline a:hover {
a:hover {
color: rgba(0, 0, 0, 0.9);
}
d-byline .authors {
.authors {
display: inline-block;
}
d-byline .author {
.author {
display: inline-block;
margin-right: 12px;
/*padding-left: 20px;*/
/*border-left: 1px solid #ddd;*/
}
d-byline .affiliation {
.affiliation {
display: block;
}
d-byline .author:last-child {
.author:last-child {
margin-right: 0;
}
d-byline .name {
.name {
display: block;
}
d-byline .date {
.date {
border-left: 1px solid rgba(0, 0, 0, 0.1);
padding-left: 15px;
margin-left: 15px;
display: inline-block;
}
d-byline .year, d-byline .month {
.year, .month {
display: block;
}
d-byline .citation {
.citation {
border-left: 1px solid rgba(0, 0, 0, 0.15);
padding-left: 15px;
margin-left: 15px;
display: inline-block;
}
d-byline .citation div {
.citation div {
display: block;
}
}
</style>
`, false);
<div class='byline'></div>
`);
const mustacheTemplate = `
<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 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>
{{#publishedDate}}
<div class="date">
<div class="month">{{publishedMonth}}. {{publishedDay}} {{publishedYear}</div>
<div class="year">{{publishedYear}}</div>
</div>
{{/publishedDate}}
{{#citation}}
<a class="citation" href="#citation">
<div>Citation:</div>
<div>{{concatenatedAuthors}}, {{publishedYear}}</div>
</a>
{{/citation}}
{{/authors}}
</div>
{{#publishedDate}}
<div class="date">
<div class="month">{{publishedMonth}}. {{publishedDay}}</div>
<div class="year">{{publishedYear}}</div>
</div>
{{/publishedDate}}
{{#citation}}
<a class="citation" href="#citation">
<div>Citation:</div>
<div>{{concatenatedAuthors}}, {{publishedYear}}</div>
</a>
{{/citation}}
`;
export default class Byline extends T(HTMLElement) {
static get is() {
return "d-byline";
}
render(data) {
console.warn("byline!");
this.innerHTML = mustache.render(mustacheTemplate, data);
static get is() { return "d-byline"; }
connectedCallback() {
const frontmatter = document.querySelector('d-front-matter');
const container = this.root.querySelector('.byline');
container.innerHTML = mustache.render(mustacheTemplate, frontmatter.data);
console.log(frontmatter.data)
}
}
customElements.define(Byline.is, Byline);
components/d-cite.js
+88 -9
View File
@@ -1,10 +1,13 @@
import {Template} from "../mixins/template";
import { Template } from "../mixins/template";
import { hover_cite } from "./citation";
import { HoverBox } from "./hover-box";
const T = Template("d-cite", `
dt-cite {
const T = Template('d-cite', `
<style>
.citation {
color: hsla(206, 90%, 20%, 0.7);
}
dt-cite .citation-number {
.citation-number {
cursor: default;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
@@ -17,17 +20,93 @@ const T = Template("d-cite", `
top: -2px;
margin: 0 2px;
}
figcaption dt-cite .citation-number {
figcaption .citation-number {
font-size: 11px;
font-weight: normal;
top: -2px;
line-height: 1em;
}
</style>
`, false);
export default class Cite extends T(HTMLElement) {
static get is() { return "d-cite"; }
<div style="display: none;" class="dt-hover-box">
</div>
<span id="citation-" class="citation">
<slot></slot>
<span class="citation-number"></span>
</span>
`);
function inline_cite_short(keys, bibliography) {
function cite_string(key) {
if (bibliography.hasEntry(key)){
return (bibliography.getIndex(key)+1).toString();
} else {
return "?";
}
}
return "[" + keys.map(cite_string).join(", ") + "]";
}
customElements.define(Cite.is, Cite);
export default class Cite extends T(HTMLElement) {
constructor() {
super()
this._key = null;
Cite.currentId += 1;
this.citeId = Cite.currentId;
}
static get observedAttributes() {
return ['key'];
}
attributeChangedCallback(name, oldValue, newValue) {
// name will always be "key" due to observedAttributes
this._key = newValue;
this.renderContent();
}
get key() {
return this._key;
}
set key(value) {
this.setAttribute('key', value);
}
renderContent() {
const bibliography = document.querySelector('d-bibliography');
if (bibliography && bibliography.finishedLoading) {
customElements.whenDefined('d-bibliography').then( () => {
const keys = this.key.split(",");
// set up hidden hover box
const div = this.root.querySelector('.dt-hover-box');
div.innerHTML = keys.map( (key) => {
return bibliography.getEntry(key);
}).map(hover_cite).join('<br><br>');
div.id ='dt-cite-hover-box-' + this.citeId;
// set up visible citation marker
const outerSpan = this.root.querySelector('#citation-');
outerSpan.id = `citation-${this.citeId}`;
// outerSpan.setAttribute('data-hover', dataHoverString); // directly tell HoverBox instead?
const innerSpan = this.root.querySelector('.citation-number');
innerSpan.textContent = inline_cite_short(keys, bibliography);
HoverBox.get_box(div).bind(outerSpan);
});
} else {
console.error(`You used a d-cite tag (${key}) without including a d-bibliography tag in your article. We can't lookup your citation this way.`)
}
}
}
Cite.currentId = 0;
customElements.define(Cite.is, Cite);
components/d-footnote-list.js
+72
View File
@@ -0,0 +1,72 @@
import { Template } from "../mixins/template";
const name = 'd-footnote-list';
const T = Template(name, `
<style>
ol {
padding: 0 0 0 18px;
}
li {
margin-bottom: 12px;
}
h3 {
font-size: 15px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 0;
color: rgba(0,0,0,0.65);
line-height: 1em;
}
a {
color: rgba(0, 0, 0, 0.6);
}
a.footnote-backlink {
color: rgba(0,0,0,0.3);
padding-left: 0.5em;
}
</style>
<h3>Footnotes</h3>
<ol></ol>
`);
export default class FootnoteList extends T(HTMLElement) {
static get is() { return name; }
connectedCallback() {
this.list = this.root.querySelector('ol');
this.footnotes = new Map();
// footnotes list is initially hidden
this.root.host.style.display = 'none';
// look through document and register existing footnotes
document.querySelectorAll('d-footnote')
.forEach(footnote => this.registerFootnote(footnote));
}
registerFootnote(element) {
// check if we already know about this footnote
if (!this.footnotes.has(element.id)) {
this.footnotes.set(element.id, element);
// ensure footnote list is visible
this.root.host.style.display = 'initial'
// construct and append list item to show footnote
const listItem = document.createElement('li');
listItem.innerHTML = element.innerHTML;
const backlink = document.createElement('a');
backlink.setAttribute('class', 'footnote-backlink');
backlink.textContent = '[↩]';
backlink.href = `#${element.id}`;
listItem.appendChild(backlink);
this.list.appendChild(listItem);
} /*else {
console.debug('Had already registered footnote ' + element.id + '!')
}*/
}
}
customElements.define(name, FootnoteList);
components/d-footnote.js
+14 -5
View File
@@ -18,15 +18,16 @@ d-math[block] {
`;
const TemplatedFootnote = Template("d-math", templateString);
const TemplatedFootnote = Template("d-footnote", templateString);
export class Footnote extends TemplatedFootnote(HTMLElement) {
constructor() {
super();
connectedCallback() {
// create numeric ID
Footnote.currentFootnoteId += 1;
const IdString = Footnote.currentFootnoteId.toString();
this.root.host.id = 'd-footnote-' + IdString;
// set up hidden hover box
const div = this.root.querySelector('.dt-hover-box');
div.id = 'dt-fn-hover-box-' + IdString;
@@ -36,8 +37,16 @@ export class Footnote extends TemplatedFootnote(HTMLElement) {
span.setAttribute('id', 'fn-' + IdString);
span.setAttribute('data-hover-ref', div.id);
span.textContent = IdString;
HoverBox.get_box(div).bind(span);
// register with footnote list should there be one
const footnoteList = document.querySelector('d-footnote-list');
if (footnoteList) {
customElements.whenDefined('d-footnote-list').then(() => {
footnoteList.registerFootnote(this);
});
}
}
}
components/d-front-matter.js
+9 -5
View File
@@ -1,4 +1,5 @@
import ymlParse from "js-yaml";
import expandData from "../transforms/expand-data"
export default class FrontMatter extends HTMLElement {
static get is() { return "d-front-matter"; }
@@ -7,15 +8,16 @@ export default class FrontMatter extends HTMLElement {
this.data = {};
}
connectedCallback() {
let el = this.querySelector("script");
const el = this.querySelector("script");
if (el) {
let text = el.textContent;
this.parse(ymlParse.safeLoad(text));
const text = el.textContent;
this.parse(ymlParse.safeLoad(text));
}
}
parse(localData) {
this.data.title = localData.title ? localData.title : "Untitled";
this.data.description = localData.description ? localData.description : "No description.";
this.data.publishedDate = localData.published ? new Date(localData.published) : false;
this.data.authors = localData.authors ? localData.authors : [];
@@ -31,7 +33,7 @@ export default class FrontMatter extends HTMLElement {
a.name = name;
a.firstName = names.slice(0, names.length - 1).join(" ");
a.lastName = names[names.length -1];
if(localData.affiliations[i]) {
if (localData.affiliations[i]) {
let affiliation = Object.keys(localData.affiliations[i])[0];
if ((typeof localData.affiliations[i]) === "string") {
affiliation = localData.affiliations[i]
@@ -42,7 +44,9 @@ export default class FrontMatter extends HTMLElement {
}
return a;
});
expandData(null, this.data);
}
}
customElements.define(FrontMatter.is, FrontMatter);
customElements.define(FrontMatter.is, FrontMatter);
components/d-title.js
+21 -8
View File
@@ -3,13 +3,15 @@ import {page} from "./layout";
const T = Template("d-title", `
<style>
d-title {
:host {
box-sizing: border-box;
display: block;
width: 100%;
margin-bottom: 100px;
}
d-title h1 {
::slotted(h1) {
padding-top: 140px;
padding-bottom: 24px;
margin: 0;
@@ -17,19 +19,30 @@ d-title h1 {
font-size: 48px;
font-weight: 600;
}
${page("d-title h1")}
d-byline {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
${page("::slotted(h1), ::slotted(h2)")}
</style>
`, false);
<slot></slot>
<d-byline></d-byline>
`);
export default class Title extends T(HTMLElement) {
static get is() { return "d-title"; }
connectedCallback() {
super.connectedCallback();
this.byline = document.createElement("d-byline");
let frontMatter = document.querySelector("d-front-matter");
this.byline.render(frontMatter.data);
this.appendChild(this.byline);
// this.byline = document.createElement("d-byline");
// this.appendChild(this.byline);
}
}
customElements.define(Title.is, Title);
components/distill-appendix.js
+9 -16
View File
@@ -3,18 +3,6 @@ import mustache from "mustache";
let mustacheTemplate = `
<style>
distill-appendix {
display: block;
font-size: 13px;
line-height: 1.7em;
margin-bottom: 0;
border-top: 1px solid rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
background: rgb(250, 250, 250);
padding-top: 36px;
padding-bottom: 48px;
}
${page("distill-appendix p, distill-appendix h3, distill-appendix pre")}
distill-appendix h3 {
font-size: 15px;
font-weight: 500;
@@ -33,10 +21,15 @@ let mustacheTemplate = `
distill-appendix .citation {
font-size: 11px;
line-height: 15px;
border-left: 2px solid rgba(0, 0, 0, 0.1);
padding: 0 0 0 12px;
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: -4px;
margin-top: -12px;
}
</style>
@@ -61,7 +54,7 @@ let mustacheTemplate = `
export default class DistillAppendix extends HTMLElement {
static get is() { return "distill-appendix"; }
render(data) {
connectedCallback(data) {
this.innerHTML = mustache.render(mustacheTemplate, data);
}
}
components/layout.js
+24 -1
View File
@@ -44,6 +44,29 @@ export function page(selector) {
`;
}
export function pagePadding(selector) {
return `${selector} {
width: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
@media(min-width: 768px) {
${selector} {
padding-left: 72px;
padding-right: 72px;
}
}
@media(min-width: 1080px) {
${selector} {
width: 984px;
padding-left: auto;
padding-right: auto;
}
}
`;
}
export function screen(selector) {
return `${selector} {
width: auto;
@@ -65,4 +88,4 @@ export function screen(selector) {
}
}
`;
}
}
components/styles-base.css
+19
View File
@@ -21,6 +21,25 @@ figure {
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th {
text-align: left;
}
table thead {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
table thead th {
padding-bottom: 0.5em;
}
table tbody :first-child td {
padding-top: 0.5em;
}
/*
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
components/styles-layout.css
+9 -3
View File
@@ -28,6 +28,7 @@ d-article > ul,
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > table,
d-article section > div,
d-article section > p,
d-article section > h1,
@@ -38,7 +39,8 @@ d-article section > figure,
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math {
d-article section > d-math,
d-article section > table, {
width: auto;
margin-left: 24px;
margin-right: 24px;
@@ -63,6 +65,7 @@ d-article section > d-math {
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > d-math,
d-article section > div,
d-article section > p,
d-article section > h1,
@@ -73,7 +76,8 @@ d-article section > d-math {
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math {
d-article section > d-math,
d-article section > table {
margin-left: 72px;
margin-right: 72px;
}
@@ -91,6 +95,7 @@ d-article section > d-math {
d-article > d-abstract,
d-article > d-code,
d-article > d-math,
d-article > table,
d-article section > div,
d-article section > p,
d-article section > h2,
@@ -100,7 +105,8 @@ d-article section > d-math {
d-article section > ul,
d-article section > d-abstract,
d-article section > d-code,
d-article section > d-math {
d-article section > d-math,
d-article section > table {
margin-left: calc(50% - 984px / 2);
width: 648px;
}
components/styles.js
+1 -1
View File
@@ -4,6 +4,6 @@ import article from "./styles-article.css";
import print from "./styles-print.css";
let s = document.createElement("style");
s.textContent = base + layout + print;
s.textContent = base + layout + print + article;
document.querySelector("head").appendChild(s);
export default s;
dist/components.js
Vendored
+1479 -331
View File
File diff suppressed because one or more lines are too long
dist/components.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/article.html
+113 -101
View File
@@ -7,7 +7,7 @@
<d-front-matter>
<script type="text/yml">
title: Article Title
title: Demo Title Attention and Augmented Recurrent Neural Networks
published: Jan 10, 2017
authors:
- Chris Olah:
@@ -19,10 +19,12 @@
</d-front-matter>
<d-article>
<script type="text/article"></script>
<h1>Hello World</h1>
<h2>A description of the article</h2>
<d-byline></d-byline>
<d-title>
<h1>Attention and Augmented Recurrent Neural Networks</h1>
</d-title>
<d-abstract>
<p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
</d-abstract>
<p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two.</p>
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. And then there's a block equation:</p>
@@ -30,7 +32,7 @@
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
</d-math>
<p>We can also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite></p>
<p>We should also be testing footnotes<d-footnote>This will become a hoverable footnote.</d-footnote>.</p>
<p>We should also be testing footnotes<d-footnote>This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote. This will become a hoverable footnote.</d-footnote>. There are multiple footnotes, and they appear in the appendix<d-footnote>Given I have coded them right. Also, here's math in a footnote: <d-math>c = \sum_0^i{x}<d-math>.</d-footnote> as well.</p>
<table>
<thead>
<tr><th>First</th><th>Second</th><th>Third</th></tr>
@@ -41,7 +43,7 @@
<tr><td>234</td><td>54</td><td>23</td></tr>
</tbody>
</table>
<h3>Displaying code snippets</h3>
<h2>Displaying code snippets</h2>
<p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code></p>
<p>Here's a javascript code block.</p>
<d-code block language="javascript">
@@ -59,114 +61,124 @@
print(a, end=' ')
a, b = b, a+b
</d-code>
<p>That's it for the example article!</p>
</d-article>
<d-bibliography>
<script type="text/bibtex">
<d-appendix>
<d-acknowledgements>
<h3>Contributions</h3>
<p>Some text describing who did what.</p>
<h4>Reviewers</h4>
<p>Some text with links describing who reviewed the article.</p>
</d-acknowledgements>
@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={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}
}
<d-footnote-list></d-footnote-list>
@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}
}
<d-bibliography>
<script type="text/bibtex">
@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{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={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{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{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{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{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{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{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{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}
}
@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}
}
@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{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{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}
}
@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}
}
@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}
}
@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{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}
}
@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}
}
</script>
</d-bibliography>
<d-appendix>
<h3>Contributions</h3>
<p>List of who did what</p>
<distill-appendix> </distill-appendix>
</d-appendix>
mixins/template.js
+2
View File
@@ -10,6 +10,8 @@ export const Template = (name, templateString, useShadow = true) => {
return (superclass) => {
return class extends superclass {
static get is() { return name; }
constructor() {
super();
transforms/expand-data.js
-1
View File
@@ -21,7 +21,6 @@ export default function(dom, data) {
data.publishedDate = data.publishedDate ? data.publishedDate : new Date("Invalid");
data.updatedDate = data.updatedDate ? data.updatedDate : 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; };