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

Auto-add optional components, rename grid & disentangle d-bibliography and d-citation-list

Browse Source
This commit is contained in:
Ludwig Schubert
2017-09-05 13:54:35 -07:00
parent c69f39e25a
commit ab57a90b29
22 changed files with 253 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -38,3 +38,4 @@ jspm_packages
# Copied fonts
examples/fonts
dist
article-rendered.html
README.md
+11
View File
@@ -26,3 +26,14 @@ Run `yarn test`. That's it.
/* width: 80px; */
/* font-size: 20px; */
/* font-weight: 200; */
auto-added elements:
title in front, no h1 -> add it
no title in front, h1 -> read and put into frontMatter
footnote -> footnote list
break up bib
if citation, no bib-list -> add citation-list
if authors, no byline -> add byline
no appendix -> add appendix
examples/article.html
+26 -33
View File
@@ -2,40 +2,37 @@
<head>
<meta charset="utf8">
<d-front-matter>
<script id='distill-front-matter' type="text/json">{
"title": "How to Use t-SNE Effectively",
"published": "Jan 10, 2017",
"authors": [
{
"author":"Chris Olah",
"authorURL":"https://colah.github.io/",
"affiliation":"Google Brain",
"affiliationURL":"https://g.co/brain"
},
{
"author":"Shan Carter",
"authorURL":"https://shancarter.com/",
"affiliation":"Google Brain",
"affiliationURL":"https://g.co/brain"
}
],
"katex": {
"delimiters": [
{"left": "$$", "right": "$$", "display": false}
]
}
}</script>
</d-front-matter>
<script src="../dist/template.v2.js"></script>
</head>
<body>
<d-front-matter>
<script id='distill-front-matter' type="text/json">{
"title": "How to Use t-SNE Effectively",
"description": "Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
"published": "Jan 10, 2017",
"authors": [
{
"author":"Chris Olah",
"authorURL":"https://colah.github.io/",
"affiliation":"Google Brain",
"affiliationURL":"https://g.co/brain"
},
{
"author":"Shan Carter",
"authorURL":"https://shancarter.com/",
"affiliation":"Google Brain",
"affiliationURL":"https://g.co/brain"
}
],
"katex": {
"delimiters": [
{"left": "$$", "right": "$$", "display": false}
]
}
}</script>
</d-front-matter>
<d-article>
<h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
<d-byline></d-byline>
<!-- <d-abstract>
<p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
</d-abstract> -->
@@ -121,12 +118,8 @@
<p>Some text with links describing who reviewed the article.</p>
</div>
<d-footnote-list></d-footnote-list>
<d-bibliography src="bibliography.bib"></d-bibliography>
<distill-appendix> </distill-appendix>
</d-appendix>
</body>
src/components.js
+3 -3
View File
@@ -9,6 +9,7 @@ import { Article } from './components/d-article';
import { Bibliography } from './components/d-bibliography';
import { Byline } from './components/d-byline';
import { Cite } from './components/d-cite';
import { CitationList } from './components/d-citation-list';
import { Code } from './components/d-code';
import { Footnote } from './components/d-footnote';
import { FootnoteList } from './components/d-footnote-list';
@@ -19,9 +20,8 @@ import { TOC } from './components/d-toc';
import { Figure } from './components/d-figure';
const components = [
Abstract, Appendix, Article, Bibliography,
Byline, Cite, Code, Footnote, FootnoteList, FrontMatter, DMath,
References, TOC, Figure,
Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
Footnote, FootnoteList, FrontMatter, DMath, References, TOC, Figure,
];
/* Distill website specific components */
src/components/d-appendix.js
+1 -1
View File
@@ -30,7 +30,7 @@ d-appendix a {
}
d-appendix > * {
grid-column: margin-left / body;
grid-column: left / text;
}
</style>
src/components/d-bibliography.js
+8 -65
View File
@@ -1,41 +1,4 @@
import { Template } from '../mixins/template';
import { parseBibtex } from '../helpers/bibtex';
import { bibliography_cite } from '../helpers/citation';
export const templateString = `
<style>
:host {
contain: content;
}
.references {
font-size: 12px;
line-height: 20px;
}
.title {
font-weight: 600;
}
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);
}
</style>
<h3>References</h3>
<ol class='references' id='references-list' ></ol>
`;
export function parseBibliography(element) {
if (element.firstElementChild && element.firstElementChild.tagName === 'SCRIPT') {
@@ -44,38 +7,22 @@ export function parseBibliography(element) {
}
}
export function renderBibliography(element, entries) {
if (entries.size) {
element.host.style.display = 'initial';
let list = element.querySelector('#references-list');
list.innerHTML = '';
export class Bibliography extends HTMLElement {
for (const [key, entry] of entries) {
const listItem = document.createElement('li');
listItem.id = key;
listItem.innerHTML = bibliography_cite(entry);
list.appendChild(listItem);
}
} else {
element.host.style.display = 'none';
}
}
const T = Template('d-bibliography', templateString);
export class Bibliography extends T(HTMLElement) {
static get is() { return 'd-bibliography'; }
constructor() {
super();
// set up mutation observer
const options = {childList: true, characterData: true, subtree: true};
const observer = new MutationObserver( () => {
observer.disconnect();
this.parseIfPossible();
observer.observe(this, options);
const observer = new MutationObserver( (entries) => {
for (const entry of entries) {
if (entry.target.nodeName === 'SCRIPT' || entry.type === 'characterData') {
this.parseIfPossible();
}
}
});
this.parseIfPossible();
// ...and listen for changes
observer.observe(this, options);
}
@@ -103,10 +50,6 @@ export class Bibliography extends T(HTMLElement) {
this.dispatchEvent(event);
}
set entries(newEntries) {
renderBibliography(this.root, newEntries);
}
/* observe 'src' attribute */
static get observedAttributes() {
src/components/d-byline.js
+1 -1
View File
@@ -4,7 +4,7 @@ d-byline {
}
d-byline .byline {
grid-column: margin-left / page;
grid-column: left / page;
font-size: 13px;
line-height: 1.8em;
color: rgba(0, 0, 0, 0.6);
src/components/d-citation-list.js
+68
View File
@@ -0,0 +1,68 @@
import { Template } from '../mixins/template';
import { bibliography_cite } from '../helpers/citation';
const T = Template('d-citation-list', `
<style>
:host {
contain: content;
}
.references {
font-size: 12px;
line-height: 20px;
}
.title {
font-weight: 600;
}
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);
}
</style>
<h3>References</h3>
<ol class='references' id='references-list' ></ol>
`);
export function renderCitationList(element, entries) {
if (entries.size > 0) {
element.host.style.display = 'initial';
const list = element.querySelector('#references-list');
list.innerHTML = '';
for (const [key, entry] of entries) {
const listItem = document.createElement('li');
listItem.id = key;
listItem.innerHTML = bibliography_cite(entry);
list.appendChild(listItem);
}
} else {
element.host.style.display = 'none';
}
}
export class CitationList extends T(HTMLElement) {
connectedCallback() {
this.root.host.style.display = 'none';
}
set citations(citations) {
renderCitationList(this.root, citations);
}
}
src/components/d-cite.js
+1 -2
View File
@@ -1,5 +1,5 @@
import { Template } from '../mixins/template';
import { hover_cite } from '../helpers/citation';
import { hover_cite, bibliography_cite } from '../helpers/citation';
import { HoverBox } from '../helpers/hover-box';
const T = Template('d-cite', `
@@ -69,7 +69,6 @@ export class Cite extends T(HTMLElement) {
// this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`;
// console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan);
this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan);
}
disconnectedCallback() {
src/components/d-footnote.js
+16 -2
View File
@@ -1,6 +1,5 @@
import { Template } from '../mixins/template.js';
import { HoverBox } from '../helpers/hover-box';
// import { Store } from './store';
const T = Template('d-footnote', `
<style>
@@ -9,13 +8,28 @@ d-math[block] {
display: block;
}
sup {
line-height: 1em;
font-size: 0.75em;
position: relative;
top: 0;
vertical-align: baseline;
position: relative;
top: -6px;
}
span {
color: hsla(206, 90%, 20%, 0.7);
cursor: default;
}
</style>
<div id="hover-box" class="dt-hover-box">
<slot id="slot"></slot>
</div>
<sup><span id="fn-" data-hover-ref="" style="cursor:pointer"></span></sup>
<sup><span id="fn-" data-hover-ref=""></span></sup>
`);
src/components/d-math.js
+2 -2
View File
@@ -61,6 +61,8 @@ export class DMath extends Mutating(T(HTMLElement)) {
}
static addKatex() {
// css tag can use this convenience function
document.head.insertAdjacentHTML('beforeend', katexCSSTag);
// script tag has to be created to work properly
const scriptTag = document.createElement('script');
scriptTag.src = katexJSURL;
@@ -68,8 +70,6 @@ export class DMath extends Mutating(T(HTMLElement)) {
scriptTag.onload = DMath.katexLoadedCallback;
scriptTag.crossorigin = 'anonymous';
document.head.appendChild(scriptTag);
// css tag can use this convenience function
document.head.insertAdjacentHTML('beforeend', katexCSSTag);
DMath.katexAdded = true;
}
src/controller.js
+22 -19
View File
@@ -2,6 +2,7 @@ import { FrontMatter } from './front-matter';
import { DMath } from './components/d-math';
import { collectCitations } from './components/d-cite';
import { parseFrontmatter } from './components/d-front-matter';
import optionalComponents from './transforms/optional-components';
const frontMatter = new FrontMatter();
@@ -48,11 +49,11 @@ export const Controller = {
}
// update bibliography
const bibliographyTag = document.querySelector('d-bibliography');
const citationListTag = document.querySelector('d-citation-list');
const bibliographyEntries = new Map(frontMatter.citations.map( citationKey => {
return [citationKey, frontMatter.bibliography.get(citationKey)];
}));
bibliographyTag.entries = bibliographyEntries;
citationListTag.citations = bibliographyEntries;
const citeTags = document.querySelectorAll('d-cite');
for (const citeTag of citeTags) {
@@ -70,7 +71,7 @@ export const Controller = {
},
onBibliographyChanged(event) {
const bibliographyTag = event.target;
const citationListTag = document.querySelector('d-citation-list');
const bibliography = event.detail;
frontMatter.bibliography = bibliography;
@@ -91,7 +92,7 @@ export const Controller = {
return [citationKey, frontMatter.bibliography.get(citationKey)];
}));
bibliographyTag.entries = entries;
citationListTag.citations = entries;
},
onFootnoteChanged() {
@@ -108,23 +109,25 @@ export const Controller = {
const data = event.detail;
frontMatter.mergeFromYMLFrontmatter(data);
const appendix = document.querySelector('distill-appendix');
if (appendix && !appendix.getAttribute('prerendered')) {
appendix.frontMatter = frontMatter;
const prerendered = document.body.hasAttribute('distill-prerendered');
if (!prerendered) {
optionalComponents(document, frontMatter);
const appendix = document.querySelector('distill-appendix');
if (appendix) {
appendix.frontMatter = frontMatter;
}
const byline = document.querySelector('d-byline');
if (byline) {
byline.frontMatter = frontMatter;
}
if (data.katex) {
DMath.katexOptions = data.katex;
}
}
const byline = document.querySelector('d-byline');
if (byline && !byline.getAttribute('prerendered')) {
byline.frontMatter = frontMatter;
}
if (data.katex) {
DMath.katexOptions = data.katex;
}
if (data.title) {
}
},
DOMContentLoaded() {
src/distill-components/distill-footer.js
+1 -1
View File
@@ -38,7 +38,7 @@ const T = Template('distill-footer', `
}
.container {
grid-column: margin-left / body;
grid-column: left / text;
}
</style>
src/helpers/layout.js
+2 -2
View File
@@ -13,14 +13,14 @@
export function body(selector) {
return `${selector} {
grid-column: margin-left / body;
grid-column: left / text;
}
`;
}
export function page(selector) {
return `${selector} {
grid-column: margin-left / page;
grid-column: left / page;
}
`;
}
src/styles/d-math.css
+2 -2
View File
@@ -1,10 +1,10 @@
d-article .katex-display {
span.katex-display {
text-align: left;
padding: 8px 0 8px 0;
margin: 20px 0 20px 24px;
}
d-article .katex {
span.katex {
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
font-size: 1.18em;
src/styles/styles-article.css
+2 -2
View File
@@ -19,7 +19,7 @@ d-article {
}
d-article h1 {
grid-column: margin-left / page;
grid-column: left / page;
padding-top: 16px;
padding-bottom: 0;
margin-top: 0;
@@ -30,7 +30,7 @@ d-article h1 {
}
d-article h1+h2 {
grid-column: margin-left / page;
grid-column: left / page;
border-bottom: none !important;
font-size: 26px !important;
font-weight: 300 !important;
src/styles/styles-layout.css
+19 -12
View File
@@ -14,25 +14,25 @@ d-byline,
distill-footer {
display: grid;
justify-items: stretch;
grid-template-columns: [start] 8px [margin-left-outset] 8px [margin-left] 1fr [body] 0px [page] 8px [body-outset] 0px [page-outset] 8px [end];
grid-template-columns: [start] 8px [left-outset] 8px [left] 1fr [text] 0px [page] 8px [text-outset] 0px [page-outset] 8px [end];
}
/*
@media(min-width: 768px) {
d-article,
d-appendix,
d-byline,
distill-footer {
grid-template-columns: [start] 32px [margin-left-outset] 32px [margin-left] 3fr [body] 32px [body-outset] 1fr [page] 32px [page-outset] 32px [end];
grid-template-columns: [start] 32px [left-outset] 32px [left] 3fr [text] 32px [text-outset] 1fr [page] 32px [page-outset] 32px [end];
}
}
}*/
@media(min-width: 1024px) {
@media(min-width: 768px) {
d-article,
d-appendix,
d-byline,
distill-footer {
grid-template-columns: [start] 1fr [margin-left-outset] 32px [margin-left] 672px [body] 32px [body-outset] 224px [page] 32px [page-outset] 1fr [end];
grid-template-columns: [start] 1fr [left-outset] 32px [left] 672px [text] 32px [text-outset] 224px [page] 32px [page-outset] 1fr [end];
}
}
@@ -45,20 +45,20 @@ d-article > distill-footer {
.l-body,
d-article > * {
grid-column: margin-left / body;
grid-column: left / text;
}
.l-page,
d-figure {
grid-column: margin-left / page;
grid-column: left / page;
}
.l-body-outset {
grid-column: margin-left-outset / body-outset;
grid-column: left-outset / text-outset;
}
.l-page-outset {
grid-column: margin-left-outset / page-outset;
grid-column: left-outset / page-outset;
}
.l-screen {
@@ -75,17 +75,24 @@ d-figure {
/* Aside */
aside {
grid-column: margin-left / body;
grid-column: left / text;
}
@media(min-width: 768px) {
aside {
grid-column: body-outset / page;
grid-column: text-outset / page;
font-size: 14px;
line-height: 1.3;
}
.side {
margin-left: 24px;
float: right;
width: 50%;
}
}
/* Rows and Columns */
.row {
src/transforms.js
+4 -1
View File
@@ -17,6 +17,7 @@ const extractors = [
import HTML from './transforms/html';
import Byline from './transforms/byline';
import Polyfills from './transforms/polyfills';
import OptionalComponents from './transforms/optional-components';
import Mathematics from './transforms/mathematics';
import Meta from './transforms/meta';
import { makeStyleTag } from './styles/styles';
@@ -25,7 +26,8 @@ import Typeset from './transforms/typeset';
import Bibliography from './transforms/bibliography';
const transforms = [
HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset, Bibliography
HTML, makeStyleTag, Polyfills, OptionalComponents, TOC, Byline, Mathematics,
Meta, Typeset, Bibliography,
];
/* Distill Transforms */
@@ -51,6 +53,7 @@ export function render(dom, data) {
// console.warn('Running transform: ', transform);
transform(dom, data);
}
dom.body.setAttribute('distill-prerendered', '');
// the function calling us can now use the transformed dom and filled data object
}
src/transforms/bibliography.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { renderBibliography, templateString } from '../components/d-bibliography';
// import { renderBibliography, templateString } from '../components/d-bibliography';
import { parseBibtex } from '../helpers/bibtex';
import fs from 'fs';
src/transforms/byline.js
+1 -1
View File
@@ -4,6 +4,6 @@ export default function(dom, data) {
const byline = dom.querySelector('d-byline');
if (byline) {
byline.innerHTML = bylineTemplate(data);
byline.setAttribute('prerendered', true);
// byline.setAttribute('distill-prerendered', '');
}
}
src/transforms/optional-components.js
+60
View File
@@ -0,0 +1,60 @@
// no appendix -> add appendix
// title in front, no h1 -> add it
// no title in front, h1 -> read and put into frontMatter
// footnote -> footnote list
// break up bib
// if citation, no bib-list -> add citation-list
// if authors, no byline -> add byline
export default function(dom, data) {
const article = dom.querySelector('d-article');
let h1 = dom.querySelector('h1');
if (h1) {
if (!data.title) {
data.title = h1.textContent;
}
} else {
if (data.title) {
h1 = dom.createElement('h1');
h1.textContent = data.title;
article.insertBefore(h1, article.firstChild);
}
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');
const skipTags = ['H1', 'H2', 'FIGURE'];
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');
dom.body.appendChild(appendix);
}
let footnoteList = dom.querySelector('d-footnote-list');
if (!footnoteList) {
footnoteList = dom.createElement('d-footnote-list');
appendix.appendChild(footnoteList);
}
let citationList = dom.querySelector('d-citation-list');
if (!citationList) {
citationList = dom.createElement('d-citation-list');
appendix.appendChild(citationList);
}
}
src/transforms/typeset.js
+1 -1
View File
@@ -53,7 +53,7 @@ function punctuation(text){
// Dashes
text = text.replace(/--/g, '\u2014');
text = text.replace(/ \u2014 /g,'\u2009\u2014\u2009'); //this has thin spaces
text = text.replace(/\s*\u2014\s*/g,'\u2009\u2014\u2009'); //this has thin spaces
// Elipses
text = text.replace(/\.\.\./g,'…');