mirror of
https://github.com/wassname/template.git
synced 2026-06-28 02:31:42 +08:00
Compare commits
31 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ludwig Schubert
|
0d6de08c82 | ||
|
Ludwig Schubert
|
9d253fdd33 | ||
|
Ludwig Schubert
|
7fcd24a07b | ||
|
Ludwig Schubert
|
f569b07151 | ||
|
Ludwig Schubert
|
042da68b9a | ||
|
Ludwig Schubert
|
4adbf9dcd2 | ||
|
Ludwig Schubert
|
f933920421 | ||
|
Ludwig Schubert
|
cdfa045a36 | ||
|
Ludwig Schubert
|
5d83dbfd61 | ||
|
Ludwig Schubert
|
94510ee10b | ||
|
Ludwig Schubert
|
7b3038bbd3 | ||
|
Ludwig Schubert
|
e9df166db9 | ||
|
Ludwig Schubert
|
e6dd2fbfd9 | ||
|
Ludwig Schubert
|
37cc1f3157 | ||
|
Ludwig Schubert
|
9ead1f6f01 | ||
|
Ludwig Schubert
|
ebe56d2329 | ||
|
Ludwig Schubert
|
c3ff605777 | ||
|
Ludwig Schubert
|
0300b98cb6 | ||
|
Ludwig Schubert
|
ecfd28bdf9 | ||
|
Ludwig Schubert
|
86ca6f72f4 | ||
|
Ludwig Schubert
|
d0f5824e0c | ||
|
Ludwig Schubert
|
8bd32bdf0b | ||
|
Shan Carter
|
f2ae6d7aa3 | ||
|
Shan Carter
|
37c7483cb0 | ||
|
Ludwig Schubert
|
a272efb89c | ||
|
Ludwig Schubert
|
bb19b13467 | ||
|
Ludwig Schubert
|
7e240ddf4f | ||
|
Ludwig Schubert
|
84c400184d | ||
|
Ludwig Schubert
|
d187130657 | ||
|
Ludwig Schubert
|
cc6b6bf595 | ||
|
Albert Ge
|
975c3e8256 |
+1
-44
@@ -1,44 +1 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
bower_components
|
||||
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
|
||||
|
||||
# Copied fonts
|
||||
examples/fonts
|
||||
dist
|
||||
article-rendered.html
|
||||
|
||||
# dependency graph
|
||||
rollup-grapher.html
|
||||
.DS_Store
|
||||
|
||||
@@ -11,7 +11,7 @@ To contribute a change, [check out the contributing guide](CONTRIBUTING.md).
|
||||
|
||||
### Local Development
|
||||
|
||||
Run `npm run start` to start a watching build rollup server. To view the sample pages in the repo, you can run `npm run serve` as a separate process which starts a static server. `npm run build` will run a one-time build.
|
||||
First, run `npm install` to install all node modules required. Then, run `npm run dev` to start a watching build rollup server. To view the sample pages in the repo, you can run `npm run serve` as a separate process which starts a static server. `npm run build` will run a one-time build.
|
||||
|
||||
|
||||
## Disclaimer & License
|
||||
|
||||
@@ -37,6 +37,7 @@ const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsol
|
||||
JSDOM.fromFile(program.inputPath, options).then(dom => {
|
||||
const window = dom.window;
|
||||
const document = window.document;
|
||||
const HTMLElement = window.HTMLElement;
|
||||
|
||||
const data = new transforms.FrontMatter;
|
||||
data.inputHTMLPath = program.inputPath; // may be needed to resolve relative links!
|
||||
|
||||
+120
-87
@@ -17,14 +17,14 @@
|
||||
|
||||
<head>
|
||||
<script src="../dist/template.v2.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="utf8">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<distill-header></distill-header>
|
||||
<d-front-matter>
|
||||
<script id='distill-front-matter' type="text/json">{
|
||||
<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.",
|
||||
"published": "Jan 10, 2017",
|
||||
@@ -32,7 +32,7 @@
|
||||
{
|
||||
"author":"Chris Olah",
|
||||
"authorURL":"https://colah.github.io/",
|
||||
"affiliations": [{"name": "Google Brain", "url": "https://g.co/brain"}]
|
||||
"affiliations": [{"name": "Google Brain"}]
|
||||
},
|
||||
{
|
||||
"author":"Ludwig Schubert",
|
||||
@@ -54,96 +54,129 @@
|
||||
]
|
||||
}
|
||||
}</script>
|
||||
</d-front-matter>
|
||||
<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<d-cite key="mercier2011humans"></d-cite> 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-title>
|
||||
<d-byline></d-byline>
|
||||
<d-article>
|
||||
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
|
||||
<h2>A Brief Survey of Techniques</h2>
|
||||
<p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it. The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying data, performing different transformations on different regions. Those differences can be a major source of confusion.</p>
|
||||
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
||||
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
|
||||
<aside>Some text in an aside, margin notes, etc...</aside>
|
||||
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
|
||||
<d-math block>
|
||||
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
||||
</d-math>
|
||||
<p>Math can also be quite involved:</p>
|
||||
<d-math block>
|
||||
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
|
||||
</d-math>
|
||||
<a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
|
||||
<h3>Citations</h3>
|
||||
<p><d-slider style="width: 200px;"></d-slider></p>
|
||||
<p>We can<d-cite key="mercier2011humans"></d-cite> also cite <d-cite key="gregor2015draw,mercier2011humans"></d-cite> external publications. <d-cite key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. 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>. Also, a citation. Box-ception<d-cite key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
|
||||
<a class="marker" href="#section-2" id="section-2"><span>2</span></a>
|
||||
<h2>Displaying code snippets</h2>
|
||||
<p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.</p>
|
||||
<d-code block language="javascript">
|
||||
</d-front-matter>
|
||||
<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<d-cite key="mercier2011humans"></d-cite> 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-title>
|
||||
<d-byline></d-byline>
|
||||
<d-article>
|
||||
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
|
||||
<h2>A Brief Survey of Techniques</h2>
|
||||
<p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it.
|
||||
The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points
|
||||
in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying
|
||||
data, performing different transformations on different regions. Those differences can be a major source of
|
||||
confusion.</p>
|
||||
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
||||
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for
|
||||
diving.</p>
|
||||
<aside>Some text in an aside, margin notes, etc...</aside>
|
||||
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just
|
||||
using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
|
||||
<d-math block>
|
||||
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
||||
</d-math>
|
||||
<p>Math can also be quite involved:</p>
|
||||
<d-math block>
|
||||
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}}
|
||||
{1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
|
||||
</d-math>
|
||||
<a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
|
||||
<h3>Citations</h3>
|
||||
<p>
|
||||
<d-slider style="width: 200px;"></d-slider>
|
||||
</p>
|
||||
<p>We can<d-cite bibtex-key="mercier2011humans"></d-cite> also cite <d-cite
|
||||
key="gregor2015draw,mercier2011humans,openai2018charter"></d-cite> external publications. <d-cite
|
||||
key="dong2014image,dumoulin2016guide,mordvintsev2015inceptionism"></d-cite>. 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>. Also, a citation. Box-ception<d-cite
|
||||
key='gregor2015draw'></d-cite>!</d-footnote> as well.</p>
|
||||
<a class="marker" href="#section-2" id="section-2"><span>2</span></a>
|
||||
<h2>Displaying code snippets</h2>
|
||||
<p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.
|
||||
</p>
|
||||
<d-code block language="javascript">
|
||||
var x = 25;
|
||||
function(x){
|
||||
return x * x;
|
||||
return x * x;
|
||||
}
|
||||
</d-code>
|
||||
<p>We also support python.</p>
|
||||
<d-code block language="python">
|
||||
# Python 3: Fibonacci series up to n
|
||||
def fib(n):
|
||||
</d-code>
|
||||
<p>We also support python.</p>
|
||||
<d-code block language="python">
|
||||
# Python 3: Fibonacci series up to n
|
||||
def fib(n):
|
||||
a, b = 0, 1
|
||||
while a < n:
|
||||
print(a, end=' ')
|
||||
a, b = b, a+b
|
||||
</d-code>
|
||||
<p>And a table</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>First</th><th>Second</th><th>Third</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>23</td><td>654</td><td>23</td></tr>
|
||||
<tr><td>14</td><td>54</td><td>34</td></tr>
|
||||
<tr><td>234</td><td>54</td><td>23</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<d-figure id="last-figure"></d-figure>
|
||||
<script>
|
||||
const figure = document.querySelector("d-figure#last-figure");
|
||||
const initTag = document.createElement("span");
|
||||
initTag.textContent = "initialized!"
|
||||
figure.appendChild(initTag);
|
||||
figure.addEventListener("ready", function() {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "ready"
|
||||
console.log('ready')
|
||||
});
|
||||
figure.addEventListener("onscreen", function() {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "onscreen"
|
||||
console.log('onscreen')
|
||||
});
|
||||
figure.addEventListener("offscreen", function() {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "offscreen!"
|
||||
console.log('offscreen')
|
||||
});
|
||||
</script>
|
||||
<p>That's it for the example article!</p>
|
||||
while a < n: print(a, end=' ' ) a, b=b, a+b </d-code> <p>And a table</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First</th>
|
||||
<th>Second</th>
|
||||
<th>Third</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>23</td>
|
||||
<td>654</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14</td>
|
||||
<td>54</td>
|
||||
<td>34</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>234</td>
|
||||
<td>54</td>
|
||||
<td>23</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<d-figure id="last-figure"></d-figure>
|
||||
<script>
|
||||
const figure = document.querySelector("d-figure#last-figure");
|
||||
const initTag = document.createElement("span");
|
||||
initTag.textContent = "initialized!"
|
||||
figure.appendChild(initTag);
|
||||
figure.addEventListener("ready", function () {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "ready"
|
||||
console.log('ready')
|
||||
});
|
||||
figure.addEventListener("onscreen", function () {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "onscreen"
|
||||
console.log('onscreen')
|
||||
});
|
||||
figure.addEventListener("offscreen", function () {
|
||||
const initTag = figure.querySelector("span");
|
||||
initTag.textContent = "offscreen!"
|
||||
console.log('offscreen')
|
||||
});
|
||||
</script>
|
||||
<p>That's it for the example article!</p>
|
||||
|
||||
</d-article>
|
||||
</d-article>
|
||||
|
||||
<d-appendix>
|
||||
<d-appendix>
|
||||
|
||||
<h3>Contributions</h3>
|
||||
<p>Some text describing who did what.</p>
|
||||
<h3>Reviewers</h3>
|
||||
<p>Some text with links describing who reviewed the article.</p>
|
||||
<h3>Contributions</h3>
|
||||
<p>Some text describing who did what.</p>
|
||||
<h3>Reviewers</h3>
|
||||
<p>Some text with links describing who reviewed the article.</p>
|
||||
|
||||
<d-bibliography src="bibliography.bib"></d-bibliography>
|
||||
</d-appendix>
|
||||
<d-bibliography src="bibliography.bib"></d-bibliography>
|
||||
</d-appendix>
|
||||
|
||||
<distill-footer></distill-footer>
|
||||
<distill-footer></distill-footer>
|
||||
|
||||
</body>
|
||||
</body>
|
||||
@@ -97,3 +97,12 @@
|
||||
year={2016},
|
||||
url={https://arxiv.org/pdf/1609.07009.pdf}
|
||||
}
|
||||
|
||||
@misc{openai2018charter,
|
||||
author={OpenAI},
|
||||
title={OpenAI Charter},
|
||||
type={Blog},
|
||||
number={April 9},
|
||||
year={2018},
|
||||
url={https://blog.openai.com/charter},
|
||||
}
|
||||
|
||||
Generated
+1879
-1442
File diff suppressed because it is too large
Load Diff
+6
-4
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "distill-template",
|
||||
"version": "2.2.24",
|
||||
"version": "2.5.1",
|
||||
"description": "Template for creating Distill articles.",
|
||||
"main": "dist/template.v2.js",
|
||||
"bin": {
|
||||
@@ -13,7 +13,7 @@
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "rollup -c rollup.config.dev.js -w",
|
||||
"serve": "python3 -m http.server --bind 127.0.0.1 8888",
|
||||
"serve": "http-server",
|
||||
"test": "mocha",
|
||||
"lint": "eslint",
|
||||
"build": "rollup -c rollup.config.js",
|
||||
@@ -28,11 +28,12 @@
|
||||
"chai": "^3.5.0",
|
||||
"eslint": "^4.3.0",
|
||||
"eslint-config-google": "^0.9.1",
|
||||
"http-server": "^0.11.1",
|
||||
"js-yaml": "^3.7.0",
|
||||
"jsdom": "11.3.0",
|
||||
"jsdom-global": "3.0.2",
|
||||
"marked": "^0.3.6",
|
||||
"mocha": "^3.5.3",
|
||||
"marked": "^0.6.0",
|
||||
"mocha": "^5.2.0",
|
||||
"prismjs": "^1.6.0",
|
||||
"rollup": "^0.50.0",
|
||||
"rollup-plugin-babili": "^3.1.0",
|
||||
@@ -47,6 +48,7 @@
|
||||
"rollup-plugin-uglify": "^1.0.1",
|
||||
"rollup-watch": "^2.5.0",
|
||||
"should": "^13.1.2",
|
||||
"source-map-support": "^0.5.16",
|
||||
"webpack": "^2.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
+16
-13
@@ -13,6 +13,7 @@
|
||||
// limitations under the License.
|
||||
|
||||
import { Controller } from './controller';
|
||||
import { domContentLoaded } from './helpers/domContentLoaded.js';
|
||||
|
||||
/* Transforms */
|
||||
import { makeStyleTag } from './styles/styles';
|
||||
@@ -55,13 +56,13 @@ const distillMain = function() {
|
||||
throw new Error('Runlevel 1: Distill Template is getting loaded more than once, aborting!');
|
||||
} else {
|
||||
window.distillTemplateIsLoading = true;
|
||||
console.info('Runlevel 1: Distill Template has started loading.');
|
||||
console.debug('Runlevel 1: Distill Template has started loading.');
|
||||
}
|
||||
|
||||
/* 2. Add styles if they weren't added during prerendering */
|
||||
makeStyleTag(document);
|
||||
console.info('Runlevel 1: Static Distill styles have been added.');
|
||||
console.info('Runlevel 1->2.');
|
||||
console.debug('Runlevel 1: Static Distill styles have been added.');
|
||||
console.debug('Runlevel 1->2.');
|
||||
window.distillRunlevel += 1;
|
||||
|
||||
/* 3. Register Controller listener functions */
|
||||
@@ -73,8 +74,8 @@ const distillMain = function() {
|
||||
console.error('Runlevel 2: Controller listeners need to be functions!');
|
||||
}
|
||||
}
|
||||
console.info('Runlevel 2: We can now listen to controller events.');
|
||||
console.info('Runlevel 2->3.');
|
||||
console.debug('Runlevel 2: We can now listen to controller events.');
|
||||
console.debug('Runlevel 2->3.');
|
||||
window.distillRunlevel += 1;
|
||||
|
||||
/* 4. Register components */
|
||||
@@ -93,29 +94,31 @@ const distillMain = function() {
|
||||
}
|
||||
const allComponents = components.concat(distillComponents);
|
||||
for (const component of allComponents) {
|
||||
console.info('Runlevel 2: Registering custom element: ' + component.is);
|
||||
console.debug('Runlevel 2: Registering custom element: ' + component.is);
|
||||
customElements.define(component.is, component);
|
||||
}
|
||||
|
||||
console.info('Runlevel 3: Distill Template finished registering custom elements.');
|
||||
console.info('Runlevel 3->4.');
|
||||
console.debug('Runlevel 3: Distill Template finished registering custom elements.');
|
||||
console.debug('Runlevel 3->4.');
|
||||
window.distillRunlevel += 1;
|
||||
|
||||
// If template was added after DOMContentLoaded we may have missed that event.
|
||||
// Controller will check for that case, so trigger the event explicitly:
|
||||
Controller.listeners.DOMContentLoaded();
|
||||
if (domContentLoaded()) {
|
||||
Controller.listeners.DOMContentLoaded();
|
||||
}
|
||||
|
||||
console.info('Runlevel 4: Distill Template initialisation complete.');
|
||||
console.debug('Runlevel 4: Distill Template initialisation complete.');
|
||||
};
|
||||
|
||||
window.distillRunlevel = 0;
|
||||
/* 0. Check browser feature support; synchronously polyfill if needed */
|
||||
if (Polyfills.browserSupportsAllFeatures()) {
|
||||
console.info('Runlevel 0: No need for polyfills.');
|
||||
console.info('Runlevel 0->1.');
|
||||
console.debug('Runlevel 0: No need for polyfills.');
|
||||
console.debug('Runlevel 0->1.');
|
||||
window.distillRunlevel += 1;
|
||||
distillMain();
|
||||
} else {
|
||||
console.info('Runlevel 0: Distill Template is loading polyfills.');
|
||||
console.debug('Runlevel 0: Distill Template is loading polyfills.');
|
||||
Polyfills.load(distillMain);
|
||||
}
|
||||
|
||||
@@ -24,11 +24,11 @@ export function bylineTemplate(frontMatter) {
|
||||
<p class="author">
|
||||
${author.personalURL ? `
|
||||
<a class="name" href="${author.personalURL}">${author.name}</a>` : `
|
||||
<div class="name">${author.name}</div>`}
|
||||
<span class="name">${author.name}</span>`}
|
||||
</p>
|
||||
<p class="affiliation">
|
||||
${author.affiliations.map(affiliation =>
|
||||
affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<div class="affiliation">${affiliation.name}</div>`
|
||||
affiliation.url ? `<a class="affiliation" href="${affiliation.url}">${affiliation.name}</a>` : `<span class="affiliation">${affiliation.name}</span>`
|
||||
).join(', ')}
|
||||
</p>
|
||||
`).join('')}
|
||||
|
||||
@@ -16,7 +16,7 @@ import { bibliography_cite } from '../helpers/citation';
|
||||
|
||||
const styles = `
|
||||
d-citation-list {
|
||||
contain: layout style;
|
||||
contain: style;
|
||||
}
|
||||
|
||||
d-citation-list .references {
|
||||
|
||||
+66
-35
@@ -12,10 +12,12 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { Template } from '../mixins/template';
|
||||
import { hover_cite, bibliography_cite } from '../helpers/citation';
|
||||
import { Template } from "../mixins/template";
|
||||
import { hover_cite, bibliography_cite } from "../helpers/citation";
|
||||
|
||||
const T = Template('d-cite', `
|
||||
const T = Template(
|
||||
"d-cite",
|
||||
`
|
||||
<style>
|
||||
|
||||
:host {
|
||||
@@ -23,7 +25,6 @@ const T = Template('d-cite', `
|
||||
}
|
||||
|
||||
.citation {
|
||||
display: inline-block;
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
|
||||
@@ -48,10 +49,6 @@ figcaption .citation-number {
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
d-hover-box {
|
||||
margin-top: 1.9em;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -71,74 +68,108 @@ ul li:last-of-type {
|
||||
|
||||
<d-hover-box id="hover-box"></d-hover-box>
|
||||
|
||||
<div id="citation-" class="citation"><slot></slot><span class="citation-number"></span></div>
|
||||
`);
|
||||
<div id="citation-" class="citation">
|
||||
<span class="citation-number"></span>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
export class Cite extends T(HTMLElement) {
|
||||
|
||||
/* Lifecycle */
|
||||
constructor() {
|
||||
super();
|
||||
this._numbers = [];
|
||||
this._entries = [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.outerSpan = this.root.querySelector('#citation-');
|
||||
this.innerSpan = this.root.querySelector('.citation-number');
|
||||
this.hoverBox = this.root.querySelector('d-hover-box');
|
||||
window.customElements.whenDefined('d-hover-box').then(() => {
|
||||
this.outerSpan = this.root.querySelector("#citation-");
|
||||
this.innerSpan = this.root.querySelector(".citation-number");
|
||||
this.hoverBox = this.root.querySelector("d-hover-box");
|
||||
window.customElements.whenDefined("d-hover-box").then(() => {
|
||||
this.hoverBox.listen(this);
|
||||
});
|
||||
// in case this component got connected after values were set
|
||||
if (this.numbers) {
|
||||
this.displayNumbers(this.numbers);
|
||||
}
|
||||
if (this.entries) {
|
||||
this.displayEntries(this.entries);
|
||||
}
|
||||
}
|
||||
|
||||
//TODO This causes an infinite loop on firefox with polyfills.
|
||||
// This is only needed for interactive editing so no priority.
|
||||
// disconnectedCallback() {
|
||||
// const options = { detail: [this, this.keys], bubbles: true };
|
||||
// const event = new CustomEvent('onCiteKeyRemoved', options);
|
||||
// document.dispatchEvent(event);
|
||||
// const options = { detail: [this, this.keys], bubbles: true };
|
||||
// const event = new CustomEvent('onCiteKeyRemoved', options);
|
||||
// document.dispatchEvent(event);
|
||||
// }
|
||||
|
||||
/* observe 'key' attribute */
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['key'];
|
||||
return ["key", "bibtex-key"];
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
const eventName = oldValue ? 'onCiteKeyChanged' : 'onCiteKeyCreated';
|
||||
const keys = newValue.split(',');
|
||||
const eventName = oldValue ? "onCiteKeyChanged" : "onCiteKeyCreated";
|
||||
const keys = newValue.split(",").map(k => k.trim());
|
||||
const options = { detail: [this, keys], bubbles: true };
|
||||
const event = new CustomEvent(eventName, options);
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
|
||||
set key(value) {
|
||||
this.setAttribute('key', value);
|
||||
this.setAttribute("key", value);
|
||||
}
|
||||
|
||||
get key() {
|
||||
return this.getAttribute('key');
|
||||
return this.getAttribute("key") || this.getAttribute("bibtex-key");
|
||||
}
|
||||
|
||||
get keys() {
|
||||
return this.getAttribute('key').split(',');
|
||||
const result = this.key.split(",");
|
||||
console.log(result);
|
||||
return result;
|
||||
}
|
||||
|
||||
/* Setters & Rendering */
|
||||
|
||||
set numbers(numbers) {
|
||||
const numberStrings = numbers.map( index => {
|
||||
return index == -1 ? '?' : index + 1 + '';
|
||||
this._numbers = numbers;
|
||||
this.displayNumbers(numbers);
|
||||
}
|
||||
|
||||
get numbers() {
|
||||
return this._numbers;
|
||||
}
|
||||
|
||||
displayNumbers(numbers) {
|
||||
if (!this.innerSpan) return;
|
||||
const numberStrings = numbers.map(index => {
|
||||
return index == -1 ? "?" : index + 1 + "";
|
||||
});
|
||||
const textContent = '[' + numberStrings.join(', ') + ']';
|
||||
if (this.innerSpan) {
|
||||
this.innerSpan.textContent = textContent;
|
||||
}
|
||||
const textContent = "[" + numberStrings.join(", ") + "]";
|
||||
this.innerSpan.textContent = textContent;
|
||||
}
|
||||
|
||||
set entries(entries) {
|
||||
if (this.hoverBox) {
|
||||
this.hoverBox.innerHTML = `<ul>
|
||||
${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
|
||||
</ul>`;
|
||||
}
|
||||
this._entries = entries;
|
||||
this.displayEntries(entries);
|
||||
}
|
||||
|
||||
get entries() {
|
||||
return this._entries;
|
||||
}
|
||||
|
||||
displayEntries(entries) {
|
||||
if (!this.hoverBox) return;
|
||||
this.hoverBox.innerHTML = `<ul>
|
||||
${entries
|
||||
.map(hover_cite)
|
||||
.map(html => `<li>${html}</li>`)
|
||||
.join("\n")}
|
||||
</ul>`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,7 @@ d-math[block] {
|
||||
}
|
||||
|
||||
:host {
|
||||
|
||||
}
|
||||
|
||||
sup {
|
||||
@@ -37,13 +38,6 @@ span {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.footnote-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@@ -30,12 +30,11 @@ export function _moveLegacyAffiliationFormatIntoArray(frontMatter) {
|
||||
author.affiliations = [newAffiliation];
|
||||
}
|
||||
}
|
||||
console.log(frontMatter)
|
||||
return frontMatter
|
||||
}
|
||||
|
||||
export function parseFrontmatter(element) {
|
||||
const scriptTag = element.querySelector('script');
|
||||
const scriptTag = element.firstElementChild;
|
||||
if (scriptTag) {
|
||||
const type = scriptTag.getAttribute('type');
|
||||
if (type.split('/')[1] == 'json') {
|
||||
|
||||
@@ -20,9 +20,10 @@ const T = Template('d-hover-box', `
|
||||
:host {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
left: 0px;
|
||||
z-index: 10000;
|
||||
display: none;
|
||||
white-space: normal
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -40,10 +41,13 @@ const T = Template('d-hover-box', `
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: rgb(250, 250, 250);
|
||||
background-color: rgba(250, 250, 250, 0.95);
|
||||
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
backdrop-filter: blur(2px);
|
||||
-webkit-backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -117,11 +121,14 @@ export class HoverBox extends T(HTMLElement) {
|
||||
show(position) {
|
||||
this.visible = true;
|
||||
this.style.display = 'block';
|
||||
// 10px extra offset from element
|
||||
this.style.top = Math.round(position[1] + 10) + 'px';
|
||||
}
|
||||
|
||||
showAtNode(node) {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
|
||||
const bbox = node.getBoundingClientRect();
|
||||
this.show([bbox.right, bbox.bottom]);
|
||||
this.show([node.offsetLeft + bbox.width, node.offsetTop + bbox.height]);
|
||||
}
|
||||
|
||||
hide() {
|
||||
|
||||
@@ -30,7 +30,7 @@ ${katexCSSTag}
|
||||
|
||||
:host {
|
||||
display: inline-block;
|
||||
contain: content;
|
||||
contain: style;
|
||||
}
|
||||
|
||||
:host([block]) {
|
||||
@@ -73,8 +73,7 @@ export class DMath extends Mutating(T(HTMLElement)) {
|
||||
}
|
||||
// transform inline delimited math to d-math tags
|
||||
if (DMath.katexOptions.delimiters) {
|
||||
const article = document.querySelector('d-article');
|
||||
renderMathInElement(article, DMath.katexOptions);
|
||||
renderMathInElement(document.body, DMath.katexOptions);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+62
-52
@@ -12,47 +12,46 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { FrontMatter, mergeFromYMLFrontmatter } from './front-matter';
|
||||
import { DMath } from './components/d-math';
|
||||
import { collect_citations } from './helpers/citation.js';
|
||||
import { parseFrontmatter } from './components/d-front-matter';
|
||||
import optionalComponents from './transforms/optional-components';
|
||||
import { FrontMatter, mergeFromYMLFrontmatter } from "./front-matter";
|
||||
import { DMath } from "./components/d-math";
|
||||
import { collect_citations } from "./helpers/citation.js";
|
||||
import { domContentLoaded } from "./helpers/domContentLoaded.js";
|
||||
import { parseFrontmatter } from "./components/d-front-matter";
|
||||
import optionalComponents from "./transforms/optional-components";
|
||||
|
||||
const frontMatter = new FrontMatter();
|
||||
|
||||
function domContentLoaded() {
|
||||
return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
|
||||
}
|
||||
|
||||
export const Controller = {
|
||||
|
||||
frontMatter: frontMatter,
|
||||
waitingOn: {
|
||||
bibliography: [],
|
||||
citations: [],
|
||||
citations: []
|
||||
},
|
||||
listeners: {
|
||||
|
||||
onCiteKeyCreated(event) {
|
||||
const [citeTag, keys] = event.detail;
|
||||
|
||||
// ensure we have citations
|
||||
if (!frontMatter.citationsCollected) {
|
||||
// console.debug('onCiteKeyCreated, but unresolved dependency ("citations"). Enqueing.');
|
||||
Controller.waitingOn.citations.push(() => Controller.listeners.onCiteKeyCreated(event));
|
||||
Controller.waitingOn.citations.push(() =>
|
||||
Controller.listeners.onCiteKeyCreated(event)
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// ensure we have a loaded bibliography
|
||||
if (!frontMatter.bibliographyParsed) {
|
||||
// console.debug('onCiteKeyCreated, but unresolved dependency ("bibliography"). Enqueing.');
|
||||
Controller.waitingOn.bibliography.push(() => Controller.listeners.onCiteKeyCreated(event));
|
||||
Controller.waitingOn.bibliography.push(() =>
|
||||
Controller.listeners.onCiteKeyCreated(event)
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const numbers = keys.map( key => frontMatter.citations.indexOf(key) );
|
||||
const numbers = keys.map(key => frontMatter.citations.indexOf(key));
|
||||
citeTag.numbers = numbers;
|
||||
const entries = keys.map( key => frontMatter.bibliography.get(key) );
|
||||
const entries = keys.map(key => frontMatter.bibliography.get(key));
|
||||
citeTag.entries = entries;
|
||||
},
|
||||
|
||||
@@ -67,21 +66,23 @@ export const Controller = {
|
||||
}
|
||||
|
||||
// update bibliography
|
||||
const citationListTag = document.querySelector('d-citation-list');
|
||||
const bibliographyEntries = new Map(frontMatter.citations.map( citationKey => {
|
||||
return [citationKey, frontMatter.bibliography.get(citationKey)];
|
||||
}));
|
||||
const citationListTag = document.querySelector("d-citation-list");
|
||||
const bibliographyEntries = new Map(
|
||||
frontMatter.citations.map(citationKey => {
|
||||
return [citationKey, frontMatter.bibliography.get(citationKey)];
|
||||
})
|
||||
);
|
||||
citationListTag.citations = bibliographyEntries;
|
||||
|
||||
const citeTags = document.querySelectorAll('d-cite');
|
||||
const citeTags = document.querySelectorAll("d-cite");
|
||||
for (const citeTag of citeTags) {
|
||||
console.log(citeTag);
|
||||
const keys = citeTag.keys;
|
||||
const numbers = keys.map( key => frontMatter.citations.indexOf(key) );
|
||||
const numbers = keys.map(key => frontMatter.citations.indexOf(key));
|
||||
citeTag.numbers = numbers;
|
||||
const entries = keys.map( key => frontMatter.bibliography.get(key) );
|
||||
const entries = keys.map(key => frontMatter.bibliography.get(key));
|
||||
citeTag.entries = entries;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onCiteKeyRemoved(event) {
|
||||
@@ -89,7 +90,7 @@ export const Controller = {
|
||||
},
|
||||
|
||||
onBibliographyChanged(event) {
|
||||
const citationListTag = document.querySelector('d-citation-list');
|
||||
const citationListTag = document.querySelector("d-citation-list");
|
||||
|
||||
const bibliography = event.detail;
|
||||
|
||||
@@ -101,19 +102,23 @@ export const Controller = {
|
||||
|
||||
// ensure we have citations
|
||||
if (!frontMatter.citationsCollected) {
|
||||
Controller.waitingOn.citations.push( function() {
|
||||
Controller.listeners.onBibliographyChanged({target: event.target, detail: event.detail});
|
||||
Controller.waitingOn.citations.push(function() {
|
||||
Controller.listeners.onBibliographyChanged({
|
||||
target: event.target,
|
||||
detail: event.detail
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (citationListTag.hasAttribute('distill-prerendered')) {
|
||||
console.info('Citation list was prerendered; not updating it.');
|
||||
if (citationListTag.hasAttribute("distill-prerendered")) {
|
||||
console.debug("Citation list was prerendered; not updating it.");
|
||||
} else {
|
||||
const entries = new Map(frontMatter.citations.map( citationKey => {
|
||||
return [citationKey, frontMatter.bibliography.get(citationKey)];
|
||||
}));
|
||||
const entries = new Map(
|
||||
frontMatter.citations.map(citationKey => {
|
||||
return [citationKey, frontMatter.bibliography.get(citationKey)];
|
||||
})
|
||||
);
|
||||
citationListTag.citations = entries;
|
||||
}
|
||||
},
|
||||
@@ -121,9 +126,9 @@ export const Controller = {
|
||||
onFootnoteChanged() {
|
||||
// const footnote = event.detail;
|
||||
//TODO: optimize to only update current footnote
|
||||
const footnotesList = document.querySelector('d-footnote-list');
|
||||
const footnotesList = document.querySelector("d-footnote-list");
|
||||
if (footnotesList) {
|
||||
const footnotes = document.querySelectorAll('d-footnote');
|
||||
const footnotes = document.querySelectorAll("d-footnote");
|
||||
footnotesList.footnotes = footnotes;
|
||||
}
|
||||
},
|
||||
@@ -132,25 +137,25 @@ export const Controller = {
|
||||
const data = event.detail;
|
||||
mergeFromYMLFrontmatter(frontMatter, data);
|
||||
|
||||
const interstitial = document.querySelector('d-interstitial');
|
||||
const interstitial = document.querySelector("d-interstitial");
|
||||
if (interstitial) {
|
||||
if (typeof frontMatter.password !== 'undefined') {
|
||||
if (typeof frontMatter.password !== "undefined") {
|
||||
interstitial.password = frontMatter.password;
|
||||
} else {
|
||||
interstitial.parentElement.removeChild(interstitial);
|
||||
}
|
||||
}
|
||||
|
||||
const prerendered = document.body.hasAttribute('distill-prerendered');
|
||||
const prerendered = document.body.hasAttribute("distill-prerendered");
|
||||
if (!prerendered && domContentLoaded()) {
|
||||
optionalComponents(document, frontMatter);
|
||||
|
||||
const appendix = document.querySelector('distill-appendix');
|
||||
const appendix = document.querySelector("distill-appendix");
|
||||
if (appendix) {
|
||||
appendix.frontMatter = frontMatter;
|
||||
}
|
||||
|
||||
const byline = document.querySelector('d-byline');
|
||||
const byline = document.querySelector("d-byline");
|
||||
if (byline) {
|
||||
byline.frontMatter = frontMatter;
|
||||
}
|
||||
@@ -159,24 +164,31 @@ export const Controller = {
|
||||
DMath.katexOptions = data.katex;
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
DOMContentLoaded() {
|
||||
if (Controller.loaded) {
|
||||
console.warn('Controller received DOMContentLoaded but was already loaded!');
|
||||
console.warn(
|
||||
"Controller received DOMContentLoaded but was already loaded!"
|
||||
);
|
||||
return;
|
||||
} else if (!domContentLoaded()) {
|
||||
console.warn('Controller received DOMContentLoaded before appropriate document.readyState!');
|
||||
console.warn(
|
||||
"Controller received DOMContentLoaded at document.readyState: " +
|
||||
document.readyState +
|
||||
"!"
|
||||
);
|
||||
return;
|
||||
} else {
|
||||
Controller.loaded = true;
|
||||
console.log('Runlevel 4: Controller running DOMContentLoaded');
|
||||
console.debug("Runlevel 4: Controller running DOMContentLoaded");
|
||||
}
|
||||
|
||||
const frontMatterTag = document.querySelector('d-front-matter');
|
||||
const data = parseFrontmatter(frontMatterTag);
|
||||
Controller.listeners.onFrontMatterChanged({detail: data});
|
||||
const frontMatterTag = document.querySelector("d-front-matter");
|
||||
if (frontMatterTag) {
|
||||
const data = parseFrontmatter(frontMatterTag);
|
||||
Controller.listeners.onFrontMatterChanged({ detail: data });
|
||||
}
|
||||
|
||||
// Resolving "citations" dependency due to initial DOM load
|
||||
frontMatter.citations = collect_citations();
|
||||
@@ -191,13 +203,11 @@ export const Controller = {
|
||||
}
|
||||
}
|
||||
|
||||
const footnotesList = document.querySelector('d-footnote-list');
|
||||
const footnotesList = document.querySelector("d-footnote-list");
|
||||
if (footnotesList) {
|
||||
const footnotes = document.querySelectorAll('d-footnote');
|
||||
const footnotes = document.querySelectorAll("d-footnote");
|
||||
footnotesList.footnotes = footnotes;
|
||||
}
|
||||
}
|
||||
|
||||
}, // listeners
|
||||
|
||||
} // listeners
|
||||
}; // Controller
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import logo from '../assets/distill-logo.svg';
|
||||
|
||||
export const footerTemplate = `
|
||||
<style>
|
||||
|
||||
:host {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 300;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
|
||||
text-align: left;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.footer-container .logo svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.footer-container .logo svg path {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.footer-container .logo {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
.footer-container .nav {
|
||||
font-size: 0.9em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.footer-container .nav a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-right: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class='footer-container'>
|
||||
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
Distill
|
||||
</a> is dedicated to clear explanations of machine learning
|
||||
|
||||
<div class="nav">
|
||||
<a href="https://distill.pub/about/">About</a>
|
||||
<a href="https://distill.pub/journal/">Submit</a>
|
||||
<a href="https://distill.pub/prize/">Prize</a>
|
||||
<a href="https://distill.pub/archive/">Archive</a>
|
||||
<a href="https://distill.pub/rss.xml">RSS</a>
|
||||
<a href="https://github.com/distillpub">GitHub</a>
|
||||
<a href="https://twitter.com/distillpub">Twitter</a>
|
||||
ISSN 2476-0757
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`;
|
||||
@@ -13,80 +13,10 @@
|
||||
// limitations under the License.
|
||||
|
||||
import { Template } from '../mixins/template';
|
||||
import logo from '../assets/distill-logo.svg';
|
||||
|
||||
const T = Template('distill-footer', `
|
||||
<style>
|
||||
import {footerTemplate} from './distill-footer-template';
|
||||
|
||||
:host {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 300;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
|
||||
text-align: left;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
.logo svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.logo svg path {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
text-decoration: none;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.container {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-size: 0.9em;
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-right: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class='container'>
|
||||
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
Distill
|
||||
</a> is dedicated to clear explanations of machine learning
|
||||
|
||||
<div class="nav">
|
||||
<a href="https://distill.pub/about/">About</a>
|
||||
<a href="https://distill.pub/journal/">Submit</a>
|
||||
<a href="https://distill.pub/prize/">Prize</a>
|
||||
<a href="https://distill.pub/archive/">Archive</a>
|
||||
<a href="https://distill.pub/rss.xml">RSS</a>
|
||||
<a href="https://github.com/distillpub">GitHub</a>
|
||||
<a href="https://twitter.com/distillpub">Twitter</a>
|
||||
ISSN 2476-0757
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`);
|
||||
const T = Template('distill-footer', footerTemplate);
|
||||
|
||||
export class DistillFooter extends T(HTMLElement) {
|
||||
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import logo from '../assets/distill-logo.svg';
|
||||
|
||||
export const headerTemplate = `
|
||||
<style>
|
||||
distill-header {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background-color: hsl(200, 60%, 15%);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
distill-header .content {
|
||||
height: 70px;
|
||||
grid-column: page;
|
||||
}
|
||||
distill-header a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 22px 0;
|
||||
}
|
||||
distill-header a:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
distill-header svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
distill-header {
|
||||
height: 70px;
|
||||
}
|
||||
distill-header a {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
padding: 28px 0;
|
||||
}
|
||||
distill-header .logo {
|
||||
}
|
||||
}
|
||||
distill-header svg path {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
distill-header .logo {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
}
|
||||
distill-header .nav {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
}
|
||||
distill-header .nav a {
|
||||
font-size: 12px;
|
||||
margin-left: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
<div class="content">
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
Distill
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="/about/">About</a>
|
||||
<a href="/prize/">Prize</a>
|
||||
<a href="/journal/">Submit</a>
|
||||
</nav>
|
||||
</div>
|
||||
`;
|
||||
@@ -14,86 +14,9 @@
|
||||
|
||||
import { Template } from '../mixins/template';
|
||||
|
||||
import logo from '../assets/distill-logo.svg';
|
||||
|
||||
const T = Template('distill-header', `
|
||||
<style>
|
||||
distill-header {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background-color: hsl(200, 60%, 15%);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
distill-header .content {
|
||||
height: 70px;
|
||||
grid-column: page;
|
||||
}
|
||||
distill-header a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 22px 0;
|
||||
}
|
||||
distill-header a:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
distill-header svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media(min-width: 1080px) {
|
||||
distill-header {
|
||||
height: 70px;
|
||||
}
|
||||
distill-header a {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
padding: 28px 0;
|
||||
}
|
||||
distill-header .logo {
|
||||
}
|
||||
}
|
||||
distill-header svg path {
|
||||
fill: none;
|
||||
stroke: rgba(255, 255, 255, 0.8);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
distill-header .logo {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
}
|
||||
distill-header .nav {
|
||||
float: right;
|
||||
font-weight: 300;
|
||||
}
|
||||
distill-header .nav a {
|
||||
font-size: 12px;
|
||||
margin-left: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
<div class="content">
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
Distill
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href="/about/">About</a>
|
||||
<a href="/prize/">Prize</a>
|
||||
<a href="/journal/">Submit</a>
|
||||
</nav>
|
||||
</div>
|
||||
`, false);
|
||||
import {headerTemplate} from './distill-header-template';
|
||||
|
||||
const T = Template('distill-header', headerTemplate, false);
|
||||
|
||||
export class DistillHeader extends T(HTMLElement) {
|
||||
|
||||
|
||||
@@ -12,10 +12,13 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
import { footerTemplate } from '../distill-components/distill-footer-template';
|
||||
|
||||
export default function(dom) {
|
||||
const footerTag = dom.querySelector('distill-footer');
|
||||
if(!footerTag) {
|
||||
const footer = dom.createElement('distill-footer');
|
||||
footer.innerHTML = footerTemplate;
|
||||
const body = dom.querySelector('body');
|
||||
body.appendChild(footer);
|
||||
}
|
||||
|
||||
@@ -12,10 +12,15 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
export default function(dom) {
|
||||
|
||||
import { headerTemplate } from '../distill-components/distill-header-template';
|
||||
|
||||
export default function(dom, data) {
|
||||
const headerTag = dom.querySelector('distill-header');
|
||||
if (!headerTag) {
|
||||
const header = dom.createElement('distill-header');
|
||||
header.innerHTML = headerTemplate;
|
||||
header.setAttribute('distill-prerendered', "");
|
||||
const body = dom.querySelector('body');
|
||||
body.insertBefore(header, body.firstChild);
|
||||
}
|
||||
|
||||
@@ -96,6 +96,9 @@ export function mergeFromYMLFrontmatter(target, source) {
|
||||
target.authors = source.authors.map( (authorObject) => new Author(authorObject));
|
||||
target.katex = source.katex;
|
||||
target.password = source.password;
|
||||
if (source.doi) {
|
||||
target.doi = source.doi;
|
||||
}
|
||||
}
|
||||
|
||||
export class FrontMatter {
|
||||
@@ -160,6 +163,7 @@ export class FrontMatter {
|
||||
// githubCompareUpdatesUrl: 'https://github.com/distillpub/post--augmented-rnns/compare/1596e094d8943d2dc0ea445d92071129c6419c59...3bd9209e0c24d020f87cf6152dcecc6017cbc193',
|
||||
// updatedDate: 2017-03-21T07:13:16.000Z,
|
||||
// doi: '10.23915/distill.00001',
|
||||
this.doi = undefined;
|
||||
this.publishedDate = undefined;
|
||||
}
|
||||
|
||||
@@ -318,6 +322,7 @@ export class FrontMatter {
|
||||
Object.assign(target, this);
|
||||
target.bibliography = objectFromMap(this.bibliographyEntries);
|
||||
target.url = this.url;
|
||||
target.doi = this.doi;
|
||||
target.githubUrl = this.githubUrl;
|
||||
target.previewURL = this.previewURL;
|
||||
if (this.publishedDate) {
|
||||
|
||||
+106
-88
@@ -12,11 +12,12 @@
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
export function collect_citations(dom=document) {
|
||||
export function collect_citations(dom = document) {
|
||||
const citations = new Set();
|
||||
const citeTags = dom.querySelectorAll('d-cite');
|
||||
const citeTags = dom.querySelectorAll("d-cite");
|
||||
for (const tag of citeTags) {
|
||||
const keys = tag.getAttribute('key').split(',');
|
||||
const keyString = tag.getAttribute("key") || tag.getAttribute("bibtex-key");
|
||||
const keys = keyString.split(",").map(k => k.trim());
|
||||
for (const key of keys) {
|
||||
citations.add(key);
|
||||
}
|
||||
@@ -24,59 +25,74 @@ export function collect_citations(dom=document) {
|
||||
return [...citations];
|
||||
}
|
||||
|
||||
export function inline_cite_short(keys){
|
||||
function cite_string(key){
|
||||
if (key in data.bibliography){
|
||||
var n = data.citations.indexOf(key)+1;
|
||||
return ''+n;
|
||||
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 "?";
|
||||
}
|
||||
}
|
||||
return '['+keys.map(cite_string).join(', ')+']';
|
||||
return "[" + keys.map(cite_string).join(", ") + "]";
|
||||
}
|
||||
|
||||
export function inline_cite_long(keys){
|
||||
function cite_string(key){
|
||||
if (key in data.bibliography){
|
||||
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 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;
|
||||
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 "?";
|
||||
}
|
||||
}
|
||||
return keys.map(cite_string).join(', ');
|
||||
return keys.map(cite_string).join(", ");
|
||||
}
|
||||
|
||||
function author_string(ent, template, sep, finalSep){
|
||||
if (ent.author == null) { return ''; }
|
||||
var names = ent.author.split(' and ');
|
||||
function author_string(ent, template, sep, finalSep) {
|
||||
if (ent.author == null) {
|
||||
return "";
|
||||
}
|
||||
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];
|
||||
if (name.indexOf(",") != -1) {
|
||||
var last = name.split(",")[0].trim();
|
||||
var firsts = name.split(",")[1];
|
||||
} else if (name.indexOf(" ") != -1) {
|
||||
var last = name
|
||||
.split(" ")
|
||||
.slice(-1)[0]
|
||||
.trim();
|
||||
var firsts = name
|
||||
.split(" ")
|
||||
.slice(0, -1)
|
||||
.join(" ");
|
||||
} else {
|
||||
var last = name.split(' ').slice(-1)[0].trim();
|
||||
var firsts = name.split(' ').slice(0,-1).join(' ');
|
||||
var last = name.trim();
|
||||
}
|
||||
var initials = '';
|
||||
var initials = "";
|
||||
if (firsts != undefined) {
|
||||
initials = firsts.trim().split(' ').map(s => s.trim()[0]);
|
||||
initials = initials.join('.')+'.';
|
||||
initials = firsts
|
||||
.trim()
|
||||
.split(" ")
|
||||
.map(s => s.trim()[0]);
|
||||
initials = initials.join(".") + ".";
|
||||
}
|
||||
return template.replace('${F}', firsts)
|
||||
.replace('${L}', last)
|
||||
.replace('${I}', initials);
|
||||
return template
|
||||
.replace("${F}", firsts)
|
||||
.replace("${L}", last)
|
||||
.replace("${I}", initials)
|
||||
.trim(); // in case one of first or last was empty
|
||||
});
|
||||
if (names.length > 1) {
|
||||
var str = name_strings.slice(0, names.length-1).join(sep);
|
||||
str += (finalSep || sep) + name_strings[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];
|
||||
@@ -84,69 +100,71 @@ function author_string(ent, template, sep, finalSep){
|
||||
}
|
||||
|
||||
function venue_string(ent) {
|
||||
var cite = (ent.journal || ent.booktitle || '');
|
||||
if ('volume' in 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;
|
||||
issue = issue != undefined ? "(" + issue + ")" : "";
|
||||
cite += ", Vol " + ent.volume + issue;
|
||||
}
|
||||
if ('pages' in ent){
|
||||
cite += ', pp. ' + ent.pages;
|
||||
if ("pages" in ent) {
|
||||
cite += ", pp. " + ent.pages;
|
||||
}
|
||||
if (cite != '') cite += '. ';
|
||||
if ('publisher' in ent){
|
||||
if (cite != "") cite += ". ";
|
||||
if ("publisher" in ent) {
|
||||
cite += ent.publisher;
|
||||
if (cite[cite.length-1] != '.') cite += '.';
|
||||
if (cite[cite.length - 1] != ".") cite += ".";
|
||||
}
|
||||
return cite;
|
||||
}
|
||||
|
||||
function link_string(ent){
|
||||
if ('url' in ent){
|
||||
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){
|
||||
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';
|
||||
if (url.slice(-4) == ".pdf") {
|
||||
var label = "PDF";
|
||||
} else if (url.slice(-5) == ".html") {
|
||||
var label = "HTML";
|
||||
}
|
||||
return `  <a href="${url}">[${label||'link'}]</a>`;
|
||||
}/* else if ("doi" in ent){
|
||||
return `  <a href="${url}">[${label || "link"}]</a>`;
|
||||
} /* else if ("doi" in ent){
|
||||
return `  <a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
|
||||
}*/ else {
|
||||
return '';
|
||||
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>`;
|
||||
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 '';
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function title_string(ent) {
|
||||
return '<span class="title">' + ent.title + '</span> ';
|
||||
return '<span class="title">' + ent.title + "</span> ";
|
||||
}
|
||||
|
||||
export function bibliography_cite(ent, fancy){
|
||||
if (ent){
|
||||
export function bibliography_cite(ent, fancy) {
|
||||
if (ent) {
|
||||
var cite = title_string(ent);
|
||||
cite += link_string(ent) + '<br>';
|
||||
cite += link_string(ent) + "<br>";
|
||||
if (ent.author) {
|
||||
cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
|
||||
cite += author_string(ent, "${L}, ${I}", ", ", " and ");
|
||||
if (ent.year || ent.date) {
|
||||
cite += ', ';
|
||||
cite += ", ";
|
||||
}
|
||||
}
|
||||
if (ent.year || ent.date) {
|
||||
cite += (ent.year || ent.date) + '. ';
|
||||
cite += (ent.year || ent.date) + ". ";
|
||||
} else {
|
||||
cite += '. ';
|
||||
cite += ". ";
|
||||
}
|
||||
cite += venue_string(ent);
|
||||
cite += doi_string(ent);
|
||||
@@ -163,39 +181,39 @@ export function bibliography_cite(ent, fancy){
|
||||
cite += link_string(ent);
|
||||
return cite*/
|
||||
} else {
|
||||
return '?';
|
||||
return "?";
|
||||
}
|
||||
}
|
||||
|
||||
export function hover_cite(ent){
|
||||
if (ent){
|
||||
var cite = '';
|
||||
cite += '<strong>' + ent.title + '</strong>';
|
||||
export function hover_cite(ent) {
|
||||
if (ent) {
|
||||
var cite = "";
|
||||
cite += "<strong>" + ent.title + "</strong>";
|
||||
cite += link_string(ent);
|
||||
cite += '<br>';
|
||||
cite += "<br>";
|
||||
|
||||
var a_str = author_string(ent, '${I} ${L}', ', ') + '.';
|
||||
var v_str = venue_string(ent).trim() + ' ' + ent.year + '. ' + doi_string(ent, true);
|
||||
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;
|
||||
if ((a_str + v_str).length < Math.min(40, ent.title.length)) {
|
||||
cite += a_str + " " + v_str;
|
||||
} else {
|
||||
cite += a_str + '<br>' + v_str;
|
||||
cite += a_str + "<br>" + v_str;
|
||||
}
|
||||
return cite;
|
||||
} else {
|
||||
return '?';
|
||||
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(' ')});
|
||||
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(" ") });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export function domContentLoaded() {
|
||||
return ['interactive', 'complete'].indexOf(document.readyState) !== -1;
|
||||
}
|
||||
@@ -13,7 +13,7 @@
|
||||
// limitations under the License.
|
||||
|
||||
export function addPolyfill(polyfill, polyfillLoadedCallback) {
|
||||
console.info('Runlevel 0: Polyfill required: ' + polyfill.name);
|
||||
console.debug('Runlevel 0: Polyfill required: ' + polyfill.name);
|
||||
const script = document.createElement('script');
|
||||
script.src = polyfill.url;
|
||||
script.async = false;
|
||||
@@ -58,11 +58,11 @@ export class Polyfills {
|
||||
// Define an intermediate callback that checks if all is loaded.
|
||||
const polyfillLoaded = function(polyfill) {
|
||||
polyfill.loaded = true;
|
||||
console.info('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
|
||||
// console.info(window[polyfill.name]);
|
||||
console.debug('Runlevel 0: Polyfill has finished loading: ' + polyfill.name);
|
||||
// console.debug(window[polyfill.name]);
|
||||
if (Polyfills.neededPolyfills.every((poly) => poly.loaded)) {
|
||||
console.info('Runlevel 0: All required polyfills have finished loading.');
|
||||
console.info('Runlevel 0->1.');
|
||||
console.debug('Runlevel 0: All required polyfills have finished loading.');
|
||||
console.debug('Runlevel 0->1.');
|
||||
window.distillRunlevel = 1;
|
||||
callback();
|
||||
}
|
||||
|
||||
@@ -40,6 +40,9 @@ export const Template = (name, templateString, useShadow = true) => {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if (this.hasAttribute('distill-prerendered')) {
|
||||
return;
|
||||
}
|
||||
if (useShadow) {
|
||||
if ('ShadyCSS' in window) {
|
||||
ShadyCSS.styleElement(this);
|
||||
|
||||
@@ -227,7 +227,7 @@ d-figure {
|
||||
/* KaTeX */
|
||||
|
||||
.katex, .katex-prerendered {
|
||||
contain: content;
|
||||
contain: style;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
d-byline {
|
||||
contain: content;
|
||||
contain: style;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
font-size: 0.8rem;
|
||||
|
||||
@@ -17,20 +17,20 @@ import { renderMathInElement } from '../helpers/katex-auto-render';
|
||||
|
||||
export default function(dom, data) {
|
||||
let needsCSS = false;
|
||||
const article = dom.querySelector('d-article');
|
||||
const body = dom.querySelector('body');
|
||||
|
||||
if (!article) {
|
||||
console.warn("No d-article tag found!");
|
||||
if (!body) {
|
||||
console.warn("No body tag found!");
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.katex && data.katex.delimiters) {
|
||||
global.document = dom;
|
||||
renderMathInElement(article, data.katex);
|
||||
renderMathInElement(body, data.katex);
|
||||
}
|
||||
|
||||
// render d-math tags
|
||||
const mathTags = article.querySelectorAll('d-math');
|
||||
const mathTags = body.querySelectorAll('d-math');
|
||||
if (mathTags.length > 0) {
|
||||
needsCSS = true;
|
||||
console.warn(`Prerendering ${mathTags.length} math tags...`);
|
||||
|
||||
@@ -67,7 +67,7 @@ export default function render(dom) {
|
||||
if (templateTag) {
|
||||
templateTag.parentNode.removeChild(templateTag);
|
||||
} else {
|
||||
console.info('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
|
||||
console.debug('FYI: Did not find template tag when trying to remove it. You may not have added it. Be aware that our polyfills will add it.')
|
||||
}
|
||||
|
||||
// add loader
|
||||
|
||||
+157
-114
@@ -14,75 +14,88 @@
|
||||
|
||||
/* global it, describe, before, beforeEach, after, afterEach */
|
||||
|
||||
const jsdom = require('jsdom');
|
||||
const jsdom = require("jsdom");
|
||||
const { JSDOM } = jsdom;
|
||||
|
||||
const expect = require('chai').expect;
|
||||
const distill = require('../dist/transforms.v2.js');
|
||||
const expect = require("chai").expect;
|
||||
const distill = require("../dist/transforms.v2.js");
|
||||
|
||||
// omitJSDOMErrors as JSDOM routinely can't parse modern CSS
|
||||
const virtualConsole = new jsdom.VirtualConsole();
|
||||
virtualConsole.sendTo(console, { omitJSDOMErrors: true });
|
||||
const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsole: virtualConsole };
|
||||
const options = {
|
||||
runScripts: "outside-only",
|
||||
QuerySelector: true,
|
||||
virtualConsole: virtualConsole
|
||||
};
|
||||
|
||||
describe('Distill V2 (transforms)', function() {
|
||||
|
||||
it('should export its expected interface', function() {
|
||||
expect(distill.testing).to.be.an('object');
|
||||
expect(distill.usesTemplateV2).to.be.a('function');
|
||||
expect(distill.render).to.be.a('function');
|
||||
expect(distill.distillify).to.be.a('function');
|
||||
describe("Distill V2 (transforms)", function() {
|
||||
it("should export its expected interface", function() {
|
||||
expect(distill.testing).to.be.an("object");
|
||||
expect(distill.usesTemplateV2).to.be.a("function");
|
||||
expect(distill.render).to.be.a("function");
|
||||
expect(distill.distillify).to.be.a("function");
|
||||
});
|
||||
|
||||
describe('#usesTemplateV2()', function() {
|
||||
|
||||
it('should detect v1', function() {
|
||||
const frag = JSDOM.fragment('<script src="https://distill.pub/template.v1.js"></script>');
|
||||
describe("#usesTemplateV2()", function() {
|
||||
it("should detect v1", function() {
|
||||
const frag = JSDOM.fragment(
|
||||
'<script src="https://distill.pub/template.v1.js"></script>'
|
||||
);
|
||||
expect(distill.usesTemplateV2(frag)).to.be.false;
|
||||
});
|
||||
|
||||
it('should detect v2', function() {
|
||||
const frag = JSDOM.fragment('<script src="https://distill.pub/template.v2.js"></script>');
|
||||
it("should detect v2", function() {
|
||||
const frag = JSDOM.fragment(
|
||||
'<script src="https://distill.pub/template.v2.js"></script>'
|
||||
);
|
||||
expect(distill.usesTemplateV2(frag)).to.be.true;
|
||||
});
|
||||
|
||||
it('should detect local scripts as well', function() {
|
||||
it("should detect local scripts as well", function() {
|
||||
const frag = JSDOM.fragment('<script src="/template.v2.js"></script>');
|
||||
expect(distill.usesTemplateV2(frag)).to.be.true;
|
||||
});
|
||||
|
||||
it('should error on unknown distill script', function() {
|
||||
const frag = JSDOM.fragment('<script src="https://distill.pub/template.v42.js"></script>');
|
||||
expect(()=> distill.usesTemplateV2(frag)).to.throw('unknown');
|
||||
it("should error on unknown distill script", function() {
|
||||
const frag = JSDOM.fragment(
|
||||
'<script src="https://distill.pub/template.v42.js"></script>'
|
||||
);
|
||||
expect(() => distill.usesTemplateV2(frag)).to.throw("unknown");
|
||||
});
|
||||
|
||||
it('should error on no distill script', function() {
|
||||
const frag = JSDOM.fragment('<script src="https://code.jquery.com/jquery-3.2.1.js"></script>');
|
||||
expect(()=> distill.usesTemplateV2(frag)).to.throw('at all');
|
||||
it("should error on no distill script", function() {
|
||||
const frag = JSDOM.fragment(
|
||||
'<script src="https://code.jquery.com/jquery-3.2.1.js"></script>'
|
||||
);
|
||||
expect(() => distill.usesTemplateV2(frag)).to.throw("at all");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('#render()', function() {
|
||||
|
||||
describe('should extract metadata', function() {
|
||||
|
||||
it('should extract citations', function() {
|
||||
const dom = new JSDOM('<d-cite key="test-citation-key">sth</d-cite>', options);
|
||||
describe("#render()", function() {
|
||||
describe("should extract metadata", function() {
|
||||
it("should extract citations", function() {
|
||||
const dom = new JSDOM(
|
||||
'<d-cite key="test-citation-key">sth</d-cite>',
|
||||
options
|
||||
);
|
||||
const data = {};
|
||||
const extractCitations = distill.testing.extractors.get('ExtractCitations');
|
||||
expect(extractCitations).to.be.a('function');
|
||||
const extractCitations = distill.testing.extractors.get(
|
||||
"ExtractCitations"
|
||||
);
|
||||
expect(extractCitations).to.be.a("function");
|
||||
extractCitations(dom.window.document, data);
|
||||
expect(data).to.have.property('citations');
|
||||
expect(data).to.have.property("citations");
|
||||
const citations = data.citations;
|
||||
expect(citations).to.be.an.instanceof(Array);
|
||||
expect(citations).to.have.lengthOf(1);
|
||||
const citation = citations[0];
|
||||
expect(citation).to.equal('test-citation-key');
|
||||
expect(citation).to.equal("test-citation-key");
|
||||
});
|
||||
|
||||
it('should extract bibliography', function() {
|
||||
const dom = new JSDOM(`
|
||||
it("should extract bibliography", function() {
|
||||
const dom = new JSDOM(
|
||||
`
|
||||
<d-cite key="mercier2011humans">sth</d-cite>
|
||||
<d-bibliography>
|
||||
<script type="text/bibtex">
|
||||
@@ -99,44 +112,58 @@ describe('Distill V2 (transforms)', function() {
|
||||
}
|
||||
</script>
|
||||
</d-bibliography>
|
||||
`, options);
|
||||
`,
|
||||
options
|
||||
);
|
||||
const data = {};
|
||||
const extractBibliography = distill.testing.extractors.get('ExtractBibliography');
|
||||
const extractBibliography = distill.testing.extractors.get(
|
||||
"ExtractBibliography"
|
||||
);
|
||||
extractBibliography(dom.window.document, data);
|
||||
expect(data.bibliography).to.be.an.instanceof(Map);
|
||||
const entry = data.bibliography.get('mercier2011humans');
|
||||
expect(entry).to.be.an('object');
|
||||
expect(entry).to.have.property('year', '2011');
|
||||
const entry = data.bibliography.get("mercier2011humans");
|
||||
expect(entry).to.be.an("object");
|
||||
expect(entry).to.have.property("year", "2011");
|
||||
});
|
||||
|
||||
it('should extract front-matter');
|
||||
|
||||
it("should extract front-matter");
|
||||
}); // metadata
|
||||
|
||||
describe('should transform the DOM', function() {
|
||||
|
||||
it('should add Google scholar citation information', function() {
|
||||
const dom = new JSDOM('', options);
|
||||
describe("should transform the DOM", function() {
|
||||
it("should add Google scholar citation information", function() {
|
||||
const dom = new JSDOM("", options);
|
||||
const data = {
|
||||
authors: [
|
||||
{firstName: 'Frank', lastName: 'Underwood', affiliation: 'Google Brain', affiliationURL: 'https://g.co/brain'},
|
||||
{firstName: 'Shan', lastName: 'Carter', affiliation: 'Google Brain', affiliationURL: 'https://g.co/brain'},
|
||||
{
|
||||
firstName: "Frank",
|
||||
lastName: "Underwood",
|
||||
affiliation: "Google Brain",
|
||||
affiliationURL: "https://g.co/brain"
|
||||
},
|
||||
{
|
||||
firstName: "Shan",
|
||||
lastName: "Carter",
|
||||
affiliation: "Google Brain",
|
||||
affiliationURL: "https://g.co/brain"
|
||||
}
|
||||
],
|
||||
doiSuffix: 'test-doi-suffix'
|
||||
doiSuffix: "test-doi-suffix"
|
||||
};
|
||||
const firstAuthorName = data.authors[0].firstName + ' ' + data.authors[0].lastName;
|
||||
const GSfirstAuthorName = data.authors[0].lastName + ', ' + data.authors[0].firstName;
|
||||
const firstAuthorName =
|
||||
data.authors[0].firstName + " " + data.authors[0].lastName;
|
||||
const GSfirstAuthorName =
|
||||
data.authors[0].lastName + ", " + data.authors[0].firstName;
|
||||
|
||||
const meta = distill.testing.transforms.get('Meta');
|
||||
expect(meta).to.be.a('function');
|
||||
const meta = distill.testing.transforms.get("Meta");
|
||||
expect(meta).to.be.a("function");
|
||||
|
||||
meta(dom.window.document, data);
|
||||
const metaTags = dom.window.document.querySelectorAll('meta');
|
||||
const metaTags = dom.window.document.querySelectorAll("meta");
|
||||
expect(metaTags).to.not.be.empty;
|
||||
|
||||
// Google Scholar
|
||||
const GSAuthorTags = Array.prototype.filter.call(metaTags, (tag) => {
|
||||
return tag.name === 'citation_author';
|
||||
const GSAuthorTags = Array.prototype.filter.call(metaTags, tag => {
|
||||
return tag.name === "citation_author";
|
||||
});
|
||||
expect(GSAuthorTags).to.have.lengthOf(2);
|
||||
const GSFirstAuthorTag = GSAuthorTags[0];
|
||||
@@ -144,74 +171,89 @@ describe('Distill V2 (transforms)', function() {
|
||||
expect(GSFirstAuthorTag.content).to.equal(GSfirstAuthorName);
|
||||
|
||||
// Schema.org Author tags
|
||||
const SOAuthorTags = Array.prototype.filter.call(metaTags, (tag) => {
|
||||
return tag.getAttribute('property') === 'article:author';
|
||||
const SOAuthorTags = Array.prototype.filter.call(metaTags, tag => {
|
||||
return tag.getAttribute("property") === "article:author";
|
||||
});
|
||||
expect(SOAuthorTags).to.have.lengthOf(2);
|
||||
const SOFirstAuthorTag = SOAuthorTags[0];
|
||||
expect(SOFirstAuthorTag.content).to.equal(firstAuthorName);
|
||||
|
||||
});
|
||||
|
||||
it('given already correct data, it should add Google scholar references information', function() {
|
||||
const dom = new JSDOM('', options);
|
||||
it("given already correct data, it should add Google scholar references information", function() {
|
||||
const dom = new JSDOM("", options);
|
||||
const data = {
|
||||
doiSuffix: 'test-doi-suffix',
|
||||
citations: ['test-citation-key'],
|
||||
bibliography: new Map([[
|
||||
'test-citation-key', {
|
||||
title: 'Why do humans reason? Arguments for an argumentative theory',
|
||||
author: 'Mercier, Hugo and Sperber, Dan',
|
||||
journal: 'Behavioral and brain sciences',
|
||||
volume: 34,
|
||||
number: 2
|
||||
}
|
||||
]])
|
||||
doiSuffix: "test-doi-suffix",
|
||||
citations: ["test-citation-key"],
|
||||
bibliography: new Map([
|
||||
[
|
||||
"test-citation-key",
|
||||
{
|
||||
title:
|
||||
"Why do humans reason? Arguments for an argumentative theory",
|
||||
author: "Mercier, Hugo and Sperber, Dan",
|
||||
journal: "Behavioral and brain sciences",
|
||||
volume: 34,
|
||||
number: 2
|
||||
}
|
||||
]
|
||||
])
|
||||
};
|
||||
const meta = distill.testing.transforms.get('Meta');
|
||||
expect(meta).to.be.a('function');
|
||||
const meta = distill.testing.transforms.get("Meta");
|
||||
expect(meta).to.be.a("function");
|
||||
meta(dom.window.document, data);
|
||||
const metaTags = [].slice.call(dom.window.document.querySelectorAll('meta[name="citation_reference"]'));
|
||||
const metaTags = [].slice.call(
|
||||
dom.window.document.querySelectorAll(
|
||||
'meta[name="citation_reference"]'
|
||||
)
|
||||
);
|
||||
expect(metaTags).to.not.be.empty;
|
||||
});
|
||||
|
||||
it('given an arxiv article, it should add a special Google scholar arxiv citation', function() {
|
||||
const dom = new JSDOM('', options);
|
||||
it("given an arxiv article, it should add a special Google scholar arxiv citation", function() {
|
||||
const dom = new JSDOM("", options);
|
||||
const data = {
|
||||
doiSuffix: 'test-doi-suffix',
|
||||
citations: ['dumoulin2016guide'],
|
||||
bibliography: new Map([[
|
||||
'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'
|
||||
}
|
||||
]])
|
||||
doiSuffix: "test-doi-suffix",
|
||||
citations: ["dumoulin2016guide"],
|
||||
bibliography: new Map([
|
||||
[
|
||||
"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"
|
||||
}
|
||||
]
|
||||
])
|
||||
};
|
||||
|
||||
const meta = distill.testing.transforms.get('Meta');
|
||||
expect(meta).to.be.a('function');
|
||||
const meta = distill.testing.transforms.get("Meta");
|
||||
expect(meta).to.be.a("function");
|
||||
meta(dom.window.document, data);
|
||||
|
||||
const metaTags = [].slice.call(dom.window.document.querySelectorAll('meta[name="citation_reference"]'));
|
||||
const metaTags = [].slice.call(
|
||||
dom.window.document.querySelectorAll(
|
||||
'meta[name="citation_reference"]'
|
||||
)
|
||||
);
|
||||
expect(metaTags).to.not.be.empty;
|
||||
|
||||
const metaTag = metaTags[0];
|
||||
expect(metaTag).to.have.property('content');
|
||||
expect(metaTag).to.have.property("content");
|
||||
|
||||
const content = metaTag.content;
|
||||
expect(content).to.include('citation_title');
|
||||
expect(content).to.include('citation_author');
|
||||
expect(content).to.include("citation_title");
|
||||
expect(content).to.include("citation_author");
|
||||
expect(content.match(/citation_author=/g).length).to.equal(2);
|
||||
expect(content).to.include('citation_publication_date');
|
||||
expect(content).to.include('citation_arxiv_id');
|
||||
expect(content).to.not.include('journal');
|
||||
expect(content).to.include("citation_publication_date");
|
||||
expect(content).to.include("citation_arxiv_id");
|
||||
expect(content).to.not.include("journal");
|
||||
});
|
||||
|
||||
it('given only a DOM (and publish data), it should add Google scholar references information', function() {
|
||||
const dom = new JSDOM(`
|
||||
it("given only a DOM (and publish data), it should add Google scholar references information", function() {
|
||||
const dom = new JSDOM(
|
||||
`
|
||||
<d-cite key="mercier2011humans">sth</d-cite>
|
||||
<d-bibliography>
|
||||
<script type="text/bibtex">
|
||||
@@ -228,27 +270,28 @@ describe('Distill V2 (transforms)', function() {
|
||||
}
|
||||
</script>
|
||||
</d-bibliography>
|
||||
`, options);
|
||||
`,
|
||||
options
|
||||
);
|
||||
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"]'));
|
||||
const metaTags = [].slice.call(
|
||||
dom.window.document.querySelectorAll(
|
||||
'meta[name="citation_reference"]'
|
||||
)
|
||||
);
|
||||
expect(metaTags).to.not.be.empty;
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}); // render
|
||||
|
||||
it('should export #distillify()', function() {
|
||||
expect(distill.distillify).to.be.a('function');
|
||||
it("should export #distillify()", function() {
|
||||
expect(distill.distillify).to.be.a("function");
|
||||
});
|
||||
|
||||
describe('#distillify()', function() {
|
||||
|
||||
it('should ensure existence of header');
|
||||
it('should ensure existence of footer');
|
||||
it('should ensure existence of distill appendix');
|
||||
|
||||
describe("#distillify()", function() {
|
||||
it("should ensure existence of header");
|
||||
it("should ensure existence of footer");
|
||||
it("should ensure existence of distill appendix");
|
||||
});
|
||||
|
||||
}); // describe 'Transform'
|
||||
|
||||
Reference in New Issue
Block a user