From 68a000750355263da55511f4524c867331c2e8f7 Mon Sep 17 00:00:00 2001 From: Ludwig Schubert Date: Wed, 18 Oct 2017 11:50:12 -0700 Subject: [PATCH] WIP --- examples/article.html | 1 - src/components/d-appendix.js | 5 +- src/components/d-byline.js | 2 +- src/distill-components/distill-footer.js | 4 +- src/distill-transforms/distill-appendix.js | 5 +- src/front-matter.js | 71 +++++++++++++++++++++- src/styles/d-article.css | 2 +- src/transforms.js | 6 +- test/transforms.js | 4 +- 9 files changed, 86 insertions(+), 14 deletions(-) diff --git a/examples/article.html b/examples/article.html index ddb993e..6f2f262 100644 --- a/examples/article.html +++ b/examples/article.html @@ -125,7 +125,6 @@

Some text with links describing who reviewed the article.

- diff --git a/src/components/d-appendix.js b/src/components/d-appendix.js index 3e84aa3..d9e4eaa 100644 --- a/src/components/d-appendix.js +++ b/src/components/d-appendix.js @@ -8,10 +8,11 @@ d-appendix { contain: content; font-size: 0.8em; line-height: 1.7em; + margin-top: 60px; margin-bottom: 0; - border-top: 1px solid rgba(0,0,0,0.1); + border-top: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0,0,0,0.5); - padding-top: 36px; + padding-top: 60px; padding-bottom: 48px; } diff --git a/src/components/d-byline.js b/src/components/d-byline.js index 7bead09..b1d4687 100644 --- a/src/components/d-byline.js +++ b/src/components/d-byline.js @@ -27,7 +27,7 @@ export function bylineTemplate(frontMatter) {

Published

- ${frontMatter.published ? ` + ${frontMatter.publishedDate ? `

${frontMatter.publishedMonth}. ${frontMatter.publishedDay} ${frontMatter.publishedYear}

` : `

Not yet published

`}
diff --git a/src/distill-components/distill-footer.js b/src/distill-components/distill-footer.js index 87a5226..f27660d 100644 --- a/src/distill-components/distill-footer.js +++ b/src/distill-components/distill-footer.js @@ -6,9 +6,9 @@ const T = Template('distill-footer', ` :host { display: block; - color: rgba(255, 255, 255, 0.4); + color: rgba(255, 255, 255, 0.5); font-weight: 300; - padding: 40px 0; + padding: 60px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/ text-align: left; diff --git a/src/distill-transforms/distill-appendix.js b/src/distill-transforms/distill-appendix.js index 2fb639b..1dd3584 100644 --- a/src/distill-transforms/distill-appendix.js +++ b/src/distill-transforms/distill-appendix.js @@ -1,4 +1,6 @@ -export default function(dom) { +import { appendixTemplate } from '../distill-components/distill-appendix'; + +export default function(dom, data) { const appendixTag = dom.querySelector('d-appendix'); if (!appendixTag) { @@ -9,6 +11,7 @@ export default function(dom) { if (!distillAppendixTag) { const distillAppendix = dom.createElement('distill-appendix'); appendixTag.appendChild(distillAppendix); + distillAppendix.innerHTML = appendixTemplate(data); } } diff --git a/src/front-matter.js b/src/front-matter.js index 81766fa..a450b04 100644 --- a/src/front-matter.js +++ b/src/front-matter.js @@ -13,6 +13,23 @@ const RFC = function(date) { return `${day}, ${paddedDate} ${month} ${year} ${hours}:${minutes}:${seconds} Z`; }; +const objectFromMap = function(map) { + const object = Array.from(map).reduce((object, [key, value]) => ( + Object.assign(object, { [key]: value }) // Be careful! Maps can have non-String keys; object literals can't. + ), {}); + return object; +}; + +const mapFromObject = function(object) { + const map = new Map(); + for (var property in object) { + if (object.hasOwnProperty(property)) { + map.set(property, object[property]); + } + } + return map; +}; + class Author { // constructor(name='', personalURL='', affiliation='', affiliationURL='') { @@ -44,7 +61,20 @@ class Author { export function mergeFromYMLFrontmatter(target, source) { target.title = source.title; - target.publishedDate = new Date(source.published); + if (source.published) { + if (source.published instanceof Date) { + target.publishedDate = source.published; + } else if (source.published.constructor === String) { + target.publishedDate = new Date(source.published); + } + } + if (source.publishedDate) { + if (source.publishedDate instanceof Date) { + target.publishedDate = source.publishedDate; + } else if (source.publishedDate.constructor === String) { + target.publishedDate = new Date(source.publishedDate); + } + } target.description = source.description; target.authors = source.authors.map( (authorObject) => new Author(authorObject)); target.katex = source.katex; @@ -103,7 +133,6 @@ export class FrontMatter { // } // volume: 1, // issue: 9, - this.publishedDate = new Date(); this.katex = {}; @@ -230,4 +259,42 @@ export class FrontMatter { })); } + set bibliography(bibliography) { + if (bibliography instanceof Map) { + this._bibliography = bibliography; + } else if (typeof bibliography === 'object') { + this._bibliography = mapFromObject(bibliography); + } + } + + get bibliography() { + return this._bibliography; + } + + static fromObject(source) { + const frontMatter = new FrontMatter(); + Object.assign(frontMatter, source); + return frontMatter; + } + + assignToObject(target) { + Object.assign(target, this); + target.bibliography = objectFromMap(this.bibliographyEntries); + target.url = this.url; + target.githubUrl = this.githubUrl; + target.previewURL = this.previewURL; + target.volume = this.volume; + target.issue = this.issue; + target.publishedDateRFC = this.publishedDateRFC; + target.publishedYear = this.publishedYear; + target.publishedMonth = this.publishedMonth; + target.publishedDay = this.publishedDay; + target.publishedMonthPadded = this.publishedMonthPadded; + target.publishedDayPadded = this.publishedDayPadded; + target.updatedDateRFC = this.updatedDateRFC; + target.concatenatedAuthors = this.concatenatedAuthors; + target.bibtexAuthors = this.bibtexAuthors; + target.slug = this.slug; + } + } diff --git a/src/styles/d-article.css b/src/styles/d-article.css index cc0351b..8bcd056 100644 --- a/src/styles/d-article.css +++ b/src/styles/d-article.css @@ -145,7 +145,7 @@ d-article hr { grid-column: screen; width: 100%; border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-top: 60px; margin-bottom: 60px; } diff --git a/src/transforms.js b/src/transforms.js index 8de90bc..dcc5125 100644 --- a/src/transforms.js +++ b/src/transforms.js @@ -52,19 +52,21 @@ const distillTransforms = new Map([ /* Exported functions */ export function render(dom, data, verbose=true) { + const frontMatter = FrontMatter.fromObject(data); // first, we collect static data from the dom for (const [name, extract] of extractors.entries()) { if (verbose) console.warn('Running extractor: ' + name); - extract(dom, data, verbose); + extract(dom, frontMatter, verbose); } // secondly we use it to transform parts of the dom for (const [name, transform] of transforms.entries()) { if (verbose) console.warn('Running transform: ' + name); // console.warn('Running transform: ', transform); - transform(dom, data, verbose); + transform(dom, frontMatter, verbose); } dom.body.setAttribute('distill-prerendered', ''); // the function calling us can now use the transformed dom and filled data object + frontMatter.assignToObject(data); } export function distillify(dom, data, verbose=true) { diff --git a/test/transforms.js b/test/transforms.js index 7d568b3..73c67a0 100644 --- a/test/transforms.js +++ b/test/transforms.js @@ -196,7 +196,7 @@ describe('Distill V2 (transforms)', function() { expect(content).to.not.include('journal'); }); - it('given only a DOM, it should add Google scholar references information', function() { + it('given only a DOM (and publish data), it should add Google scholar references information', function() { const dom = new JSDOM(` sth @@ -215,7 +215,7 @@ describe('Distill V2 (transforms)', function() { `, options); - const data = {}; + const data = { publishedDate: new Date(), updatedDate: new Date() }; distill.render(dom.window.document, data, false); const metaTags = [].slice.call(dom.window.document.querySelectorAll('meta[name="citation_reference"]')); expect(metaTags).to.not.be.empty;