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

Fix ordering of some tags; date formatting

Browse Source
This commit is contained in:
Ludwig Schubert
2017-10-23 15:47:05 -07:00
parent c742b36be6
commit d39819462a
10 changed files with 104 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/article.html
+3 -6
View File
@@ -1,8 +1,6 @@
<!doctype html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../dist/template.v2.js"></script>
</head>
@@ -10,7 +8,7 @@
<d-front-matter>
<script id='distill-front-matter' type="text/json">{
"title": "Why Momentum Really Works",
"description": "Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
"description": "Although \" extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
"published": "Jan 10, 2017",
"authors": [
{
@@ -39,11 +37,10 @@
}
}</script>
</d-front-matter>
<distill-header></distill-header>
<d-abstract>
<d-title>
<figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
<p>We often think of Momentum as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
</d-abstract>
</d-title>
<d-article>
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
<h2>A Brief Survey of Techniques</h2>
src/components/d-byline.js
+2 -2
View File
@@ -22,13 +22,13 @@ export function bylineTemplate(frontMatter) {
<div>
<h3>Published</h3>
${frontMatter.publishedDate ? `
<p>${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}</p> ` : `
<p>${frontMatter.publishedMonth} ${frontMatter.publishedDay}, ${frontMatter.publishedYear}</p> ` : `
<p><em>Not published yet.</em></p>`}
</div>
<div>
<h3>DOI</h3>
${frontMatter.doi ? `
<p>${frontMatter.doi}</p>` : `
<p><a href="https://doi.org/${frontMatter.doi}">${frontMatter.doi}</a></p>` : `
<p><em>No DOI yet.</em></p>`}
</div>
</div>
src/components/d-citation-list.js
+3 -1
View File
@@ -53,7 +53,9 @@ export class CitationList extends HTMLElement {
static get is() { return 'd-citation-list'; }
connectedCallback() {
this.style.display = 'none';
if (!this.hasAttribute('distill-prerendered')) {
this.style.display = 'none';
}
}
set citations(citations) {
src/controller.js
+9 -4
View File
@@ -73,6 +73,7 @@ export const Controller = {
onBibliographyChanged(event) {
console.info('BibliographyChanged');
const citationListTag = document.querySelector('d-citation-list');
const bibliography = event.detail;
frontMatter.bibliography = bibliography;
@@ -89,11 +90,15 @@ export const Controller = {
return;
}
const entries = new Map(frontMatter.citations.map( citationKey => {
return [citationKey, frontMatter.bibliography.get(citationKey)];
}));
citationListTag.citations = entries;
if (citationListTag.hasAttribute('distill-prerendered')) {
console.info('Citation list was prerendered; not updating it.');
} else {
const entries = new Map(frontMatter.citations.map( citationKey => {
return [citationKey, frontMatter.bibliography.get(citationKey)];
}));
citationListTag.citations = entries;
}
},
onFootnoteChanged() {
src/front-matter.js
+18 -2
View File
@@ -1,5 +1,5 @@
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const months = ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
const months = ['Jan.', 'Feb.', 'March', 'April', 'May', 'June', 'July', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.'];
const zeroPad = n => n < 10 ? '0' + n : n;
const RFC = function(date) {
@@ -83,7 +83,7 @@ export function mergeFromYMLFrontmatter(target, source) {
export class FrontMatter {
constructor() {
this.title = ''; // 'Attention and Augmented Recurrent Neural Networks'
this.title = 'unnamed article'; // 'Attention and Augmented Recurrent Neural Networks'
this.description = ''; // 'A visual overview of neural attention...'
this.authors = []; // Array of Author(s)
@@ -227,6 +227,22 @@ export class FrontMatter {
return zeroPad(this.publishedDate.getDate());
}
get publishedISODateOnly() {
return this.publishedDate.toISOString().split('T')[0];
}
get volume() {
const volume = this.publishedYear - 2015;
if (volume < 1) {
throw new Error('Invalid publish date detected during computing volume');
}
return volume;
}
get issue() {
return this.publishedDate.getMonth() + 1;
}
// 'Olah & Carter',
get concatenatedAuthors() {
if (this.authors.length > 2) {
src/transforms.js
+2
View File
@@ -24,6 +24,7 @@ import TOC from './transforms/toc';
import Typeset from './transforms/typeset';
import Polyfills from './transforms/polyfills';
import CitationList from './transforms/citation-list';
import Reorder from './transforms/reorder';
const transforms = new Map([
['HTML', HTML],
@@ -36,6 +37,7 @@ const transforms = new Map([
['Typeset', Typeset],
['Polyfills', Polyfills],
['CitationList', CitationList],
['Reorder', Reorder] // keep last
]);
/* Distill Transforms */
src/transforms/citation-list.js
+1
View File
@@ -7,5 +7,6 @@ export default function(dom, data) {
return [citationKey, data.bibliography.get(citationKey)];
}));
renderCitationList(citationListTag, entries, dom);
citationListTag.setAttribute('distill-prerendered', 'true');
}
}
src/transforms/meta.js
+20 -16
View File
@@ -1,3 +1,5 @@
// TODO: rewrite as template to make order dependencies easier
import favicon from '../assets/distill-favicon.base64';
import escape from 'escape-html';
@@ -16,37 +18,39 @@ export default function(dom, data) {
<link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Articles from Distill">
`);
if (data.title) {
appendHead(`
<title>${escape(data.title)}</title>
`);
}
if (data.url) {
appendHead(`
<link rel="canonical" href="${data.url}">
`);
}
if (data.title) {
appendHead(`
<title>${data.title}</title>
`);
}
if (data.publishedDate){
appendHead(`
<!-- https://schema.org/Article -->
<meta property="article:published" itemprop="datePublished" content="${data.publishedYear}-${data.publishedMonthPadded}-${data.publishedDayPadded}" />
<meta property="article:created" itemprop="dateCreated" content="${data.publishedDate}" />
<meta property="article:modified" itemprop="dateModified" content="${data.updatedDate}" />
<meta property="description" itemprop="description" content="${escape(data.description)}" />
<meta property="article:published" itemprop="datePublished" content="${data.publishedISODateOnly}" />
<meta property="article:created" itemprop="dateCreated" content="${data.publishedISODateOnly}" />
<meta property="article:modified" itemprop="dateModified" content="${data.updatedDate.toISOString()}" />
`);
}
(data.authors || []).forEach((a) => {
appendHtml(head, `
<meta property="article:author" content="${a.firstName} ${a.lastName}" />`);
<meta property="article:author" content="${escape(a.firstName)} ${escape(a.lastName)}" />`);
});
appendHead(`
<!-- https://developers.facebook.com/docs/sharing/webmasters#markup -->
<meta property="og:type" content="article"/>
<meta property="og:title" content="${data.title}"/>
<meta property="og:description" content="${data.description}">
<meta property="og:title" content="${escape(data.title)}"/>
<meta property="og:description" content="${escape(data.description)}">
<meta property="og:url" content="${data.url}"/>
<meta property="og:image" content="${data.previewURL}"/>
<meta property="og:locale" content="en_US" />
@@ -56,8 +60,8 @@ export default function(dom, data) {
appendHead(`
<!-- https://dev.twitter.com/cards/types/summary -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="${data.title}">
<meta name="twitter:description" content="${data.description}">
<meta name="twitter:title" content="${escape(data.title)}">
<meta name="twitter:description" content="${escape(data.description)}">
<meta name="twitter:url" content="${data.url}">
<meta name="twitter:image" content="${data.previewURL}">
<meta name="twitter:image:width" content="560">
@@ -143,13 +147,13 @@ function citation_meta_content(ref){
return content; // arXiv is not considered a journal, so we don't need journal/volume/issue
}
if ('journal' in ref){
content += `citation_journal_title=${ref.journal};`;
content += `citation_journal_title=${escape(ref.journal)};`;
}
if ('volume' in ref) {
content += `citation_volume=${ref.volume};`;
content += `citation_volume=${escape(ref.volume)};`;
}
if ('issue' in ref || 'number' in ref){
content += `citation_number=${ref.issue || ref.number};`;
content += `citation_number=${escape(ref.issue || ref.number)};`;
}
return content;
}
src/transforms/optional-components.js
+29 -35
View File
@@ -8,56 +8,50 @@
// if authors, no byline -> add byline
export default function(dom, data) {
const article = dom.querySelector('d-article');
const body = dom.body;
const article = body.querySelector('d-article');
// If we don't have an article tag, something weird is going on—giving up.
if (!article) {
console.warn('No d-article tag found; skipping adding optional components!');
return;
}
let byline = dom.querySelector('d-byline');
if (!byline) {
if (data.authors) {
byline = dom.createElement('d-byline');
body.insertBefore(byline, article);
} else {
console.warn('No authors found in front matter; please add them before submission!');
}
}
let title = dom.querySelector('d-title');
if (!title) {
let title = dom.createElement('d-title');
body.insertBefore(title, byline);
}
let h1 = title.querySelector('h1');
if (!h1) {
h1 = dom.createElement('h1');
h1.textContent = data.title;
title.insertBefore(h1, title.firstChild);
}
const hasPassword = typeof data.password !== 'undefined';
let interstitial = dom.querySelector('d-interstitial');
let interstitial = body.querySelector('d-interstitial');
if (hasPassword && !interstitial) {
const inBrowser = typeof window !== 'undefined';
const onLocalhost = inBrowser && window.location.hostname.includes('localhost');
if (!inBrowser || !onLocalhost) {
interstitial = dom.createElement('d-interstitial');
interstitial.password = data.password;
dom.body.insertBefore(interstitial, dom.body.firstChild);
body.insertBefore(interstitial, body.firstChild);
}
}
// let h1 = dom.querySelector('h1');
// if (h1) {
// if (!data.title) {
// data.title = h1.textContent;
// }
// } else {
// if (data.title) {
// let headline = dom.createElement('d-title');
// let h1 = dom.createElement('h1');
// headline.appendChild(h1);
// h1.textContent = data.title;
// abstract.parentNode.insertBefore(headline, abstract);
// }
// if (data.description) {
// const h2 = dom.createElement('h2');
// h2.textContent = data.description;
// article.insertBefore(h2, h1.nextSibling);
// }
// }
let byline = dom.querySelector('d-byline');
if (!byline && data.authors) {
byline = dom.createElement('d-byline');
article.parentNode.insertBefore(byline, article);
// const skipTags = ['H1', 'FIGURE', 'D-ABSTRACT'];
// let candidate = h1;
// while (skipTags.indexOf(candidate.tagName) !== -1) {
// candidate = candidate.nextSibling;
// }
// article.insertBefore(byline, candidate);
}
let appendix = dom.querySelector('d-appendix');
if (!appendix) {
appendix = dom.createElement('d-appendix');
src/transforms/reorder.js
+17
View File
@@ -0,0 +1,17 @@
/*
Try to only reorder things that MAY be user defined.
Try to use templates etc to define the order of our own tags.
*/
export default function render(dom) {
const head = dom.head;
const metaIE = head.querySelector('meta[http-equiv]');
head.insertBefore(metaIE, head.firstChild);
const metaViewport = head.querySelector('meta[name=viewport]');
head.insertBefore(metaViewport, head.firstChild);
const metaCharset = head.querySelector('meta[charset]');
head.insertBefore(metaCharset, head.firstChild);
}