mirror of
https://github.com/wassname/template.git
synced 2026-07-15 11:27:10 +08:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Ludwig Schubert
|
7fcd24a07b | ||
|
Ludwig Schubert
|
f569b07151 | ||
|
Ludwig Schubert
|
042da68b9a | ||
|
Ludwig Schubert
|
4adbf9dcd2 |
+1
-44
@@ -1,44 +1 @@
|
|||||||
# Logs
|
.DS_Store
|
||||||
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
|
|
||||||
|
|||||||
+118
-85
@@ -17,14 +17,14 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script src="../dist/template.v2.js"></script>
|
<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">
|
<meta charset="utf8">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<distill-header></distill-header>
|
<distill-header></distill-header>
|
||||||
<d-front-matter>
|
<d-front-matter>
|
||||||
<script id='distill-front-matter' type="text/json">{
|
<script id='distill-front-matter' type="text/json">{
|
||||||
"title": "Why Momentum Really Works",
|
"title": "Why Momentum Really Works",
|
||||||
"description": "Although \" extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
|
"description": "Although \" extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.",
|
||||||
"published": "Jan 10, 2017",
|
"published": "Jan 10, 2017",
|
||||||
@@ -54,96 +54,129 @@
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
}</script>
|
}</script>
|
||||||
</d-front-matter>
|
</d-front-matter>
|
||||||
<d-title>
|
<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>
|
<figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png"
|
||||||
<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>
|
style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);" /></figure>
|
||||||
</d-title>
|
<p>We often think of Momentum<d-cite key="mercier2011humans"></d-cite> as a means of dampening oscillations and
|
||||||
<d-byline></d-byline>
|
speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a
|
||||||
<d-article>
|
larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
|
||||||
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
|
</d-title>
|
||||||
<h2>A Brief Survey of Techniques</h2>
|
<d-byline></d-byline>
|
||||||
<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>
|
<d-article>
|
||||||
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
<a class="marker" href="#section-1" id="section-1"><span>1</span></a>
|
||||||
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for diving.</p>
|
<h2>A Brief Survey of Techniques</h2>
|
||||||
<aside>Some text in an aside, margin notes, etc...</aside>
|
<p>Before diving in: if you haven’t encountered t-SNE before, here’s what you need to know about the math behind it.
|
||||||
<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>
|
The goal is to take a set of points in a high-dimensional space and find a faithful representation of those points
|
||||||
<d-math block>
|
in a lower-dimensional space, typically the 2D plane. The algorithm is non-linear and adapts to the underlying
|
||||||
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
data, performing different transformations on different regions. Those differences can be a major source of
|
||||||
</d-math>
|
confusion.</p>
|
||||||
<p>Math can also be quite involved:</p>
|
<p>This is the first paragraph of the article. Test a long — dash -- here it is.</p>
|
||||||
<d-math block>
|
<p>Test for owner's possessive. Test for "quoting a passage." And another sentence. Or two. Some flopping fins; for
|
||||||
\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} } } }
|
diving.</p>
|
||||||
</d-math>
|
<aside>Some text in an aside, margin notes, etc...</aside>
|
||||||
<a class="marker" href="#section-1.1" id="section-1.1"><span>1.1</span></a>
|
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. Also with configurable katex standards just
|
||||||
<h3>Citations</h3>
|
using inline '$' signs: $$x^2$$ And then there's a block equation:</p>
|
||||||
<p><d-slider style="width: 200px;"></d-slider></p>
|
<d-math block>
|
||||||
<p>We can<d-cite 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>
|
c = \pm \sqrt{ \sum_{i=0}^{n}{a^{222} + b^2}}
|
||||||
<a class="marker" href="#section-2" id="section-2"><span>2</span></a>
|
</d-math>
|
||||||
<h2>Displaying code snippets</h2>
|
<p>Math can also be quite involved:</p>
|
||||||
<p>Some inline javascript:<d-code language="javascript">var x = 25;</d-code>. And here's a javascript code block.</p>
|
<d-math block>
|
||||||
<d-code block language="javascript">
|
\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;
|
var x = 25;
|
||||||
function(x){
|
function(x){
|
||||||
return x * x;
|
return x * x;
|
||||||
}
|
}
|
||||||
</d-code>
|
</d-code>
|
||||||
<p>We also support python.</p>
|
<p>We also support python.</p>
|
||||||
<d-code block language="python">
|
<d-code block language="python">
|
||||||
# Python 3: Fibonacci series up to n
|
# Python 3: Fibonacci series up to n
|
||||||
def fib(n):
|
def fib(n):
|
||||||
a, b = 0, 1
|
a, b = 0, 1
|
||||||
while a < n:
|
while a < n: print(a, end=' ' ) a, b=b, a+b </d-code> <p>And a table</p>
|
||||||
print(a, end=' ')
|
<table>
|
||||||
a, b = b, a+b
|
<thead>
|
||||||
</d-code>
|
<tr>
|
||||||
<p>And a table</p>
|
<th>First</th>
|
||||||
<table>
|
<th>Second</th>
|
||||||
<thead>
|
<th>Third</th>
|
||||||
<tr><th>First</th><th>Second</th><th>Third</th></tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr><td>23</td><td>654</td><td>23</td></tr>
|
<tr>
|
||||||
<tr><td>14</td><td>54</td><td>34</td></tr>
|
<td>23</td>
|
||||||
<tr><td>234</td><td>54</td><td>23</td></tr>
|
<td>654</td>
|
||||||
</tbody>
|
<td>23</td>
|
||||||
</table>
|
</tr>
|
||||||
<d-figure id="last-figure"></d-figure>
|
<tr>
|
||||||
<script>
|
<td>14</td>
|
||||||
const figure = document.querySelector("d-figure#last-figure");
|
<td>54</td>
|
||||||
const initTag = document.createElement("span");
|
<td>34</td>
|
||||||
initTag.textContent = "initialized!"
|
</tr>
|
||||||
figure.appendChild(initTag);
|
<tr>
|
||||||
figure.addEventListener("ready", function() {
|
<td>234</td>
|
||||||
const initTag = figure.querySelector("span");
|
<td>54</td>
|
||||||
initTag.textContent = "ready"
|
<td>23</td>
|
||||||
console.log('ready')
|
</tr>
|
||||||
});
|
</tbody>
|
||||||
figure.addEventListener("onscreen", function() {
|
</table>
|
||||||
const initTag = figure.querySelector("span");
|
<d-figure id="last-figure"></d-figure>
|
||||||
initTag.textContent = "onscreen"
|
<script>
|
||||||
console.log('onscreen')
|
const figure = document.querySelector("d-figure#last-figure");
|
||||||
});
|
const initTag = document.createElement("span");
|
||||||
figure.addEventListener("offscreen", function() {
|
initTag.textContent = "initialized!"
|
||||||
const initTag = figure.querySelector("span");
|
figure.appendChild(initTag);
|
||||||
initTag.textContent = "offscreen!"
|
figure.addEventListener("ready", function () {
|
||||||
console.log('offscreen')
|
const initTag = figure.querySelector("span");
|
||||||
});
|
initTag.textContent = "ready"
|
||||||
</script>
|
console.log('ready')
|
||||||
<p>That's it for the example article!</p>
|
});
|
||||||
|
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>
|
<h3>Contributions</h3>
|
||||||
<p>Some text describing who did what.</p>
|
<p>Some text describing who did what.</p>
|
||||||
<h3>Reviewers</h3>
|
<h3>Reviewers</h3>
|
||||||
<p>Some text with links describing who reviewed the article.</p>
|
<p>Some text with links describing who reviewed the article.</p>
|
||||||
|
|
||||||
<d-bibliography src="bibliography.bib"></d-bibliography>
|
<d-bibliography src="bibliography.bib"></d-bibliography>
|
||||||
</d-appendix>
|
</d-appendix>
|
||||||
|
|
||||||
<distill-footer></distill-footer>
|
<distill-footer></distill-footer>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
Generated
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "distill-template",
|
"name": "distill-template",
|
||||||
"version": "2.4.2",
|
"version": "2.5.0",
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "distill-template",
|
"name": "distill-template",
|
||||||
"version": "2.4.2",
|
"version": "2.5.0",
|
||||||
"description": "Template for creating Distill articles.",
|
"description": "Template for creating Distill articles.",
|
||||||
"main": "dist/template.v2.js",
|
"main": "dist/template.v2.js",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|||||||
+31
-27
@@ -12,10 +12,12 @@
|
|||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
|
|
||||||
import { Template } from '../mixins/template';
|
import { Template } from "../mixins/template";
|
||||||
import { hover_cite, bibliography_cite } from '../helpers/citation';
|
import { hover_cite, bibliography_cite } from "../helpers/citation";
|
||||||
|
|
||||||
const T = Template('d-cite', `
|
const T = Template(
|
||||||
|
"d-cite",
|
||||||
|
`
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
@@ -69,10 +71,10 @@ ul li:last-of-type {
|
|||||||
<div id="citation-" class="citation">
|
<div id="citation-" class="citation">
|
||||||
<span class="citation-number"></span>
|
<span class="citation-number"></span>
|
||||||
</div>
|
</div>
|
||||||
`);
|
`
|
||||||
|
);
|
||||||
|
|
||||||
export class Cite extends T(HTMLElement) {
|
export class Cite extends T(HTMLElement) {
|
||||||
|
|
||||||
/* Lifecycle */
|
/* Lifecycle */
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@@ -81,53 +83,53 @@ export class Cite extends T(HTMLElement) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.outerSpan = this.root.querySelector('#citation-');
|
this.outerSpan = this.root.querySelector("#citation-");
|
||||||
this.innerSpan = this.root.querySelector('.citation-number');
|
this.innerSpan = this.root.querySelector(".citation-number");
|
||||||
this.hoverBox = this.root.querySelector('d-hover-box');
|
this.hoverBox = this.root.querySelector("d-hover-box");
|
||||||
window.customElements.whenDefined('d-hover-box').then(() => {
|
window.customElements.whenDefined("d-hover-box").then(() => {
|
||||||
this.hoverBox.listen(this);
|
this.hoverBox.listen(this);
|
||||||
});
|
});
|
||||||
// in case this component got connected after values were set
|
// in case this component got connected after values were set
|
||||||
if (this.numbers) {
|
if (this.numbers) {
|
||||||
this.displayNumbers(this.numbers)
|
this.displayNumbers(this.numbers);
|
||||||
}
|
}
|
||||||
if (this.entries) {
|
if (this.entries) {
|
||||||
this.displayEntries(this.entries)
|
this.displayEntries(this.entries);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//TODO This causes an infinite loop on firefox with polyfills.
|
//TODO This causes an infinite loop on firefox with polyfills.
|
||||||
// This is only needed for interactive editing so no priority.
|
// This is only needed for interactive editing so no priority.
|
||||||
// disconnectedCallback() {
|
// disconnectedCallback() {
|
||||||
// const options = { detail: [this, this.keys], bubbles: true };
|
// const options = { detail: [this, this.keys], bubbles: true };
|
||||||
// const event = new CustomEvent('onCiteKeyRemoved', options);
|
// const event = new CustomEvent('onCiteKeyRemoved', options);
|
||||||
// document.dispatchEvent(event);
|
// document.dispatchEvent(event);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
/* observe 'key' attribute */
|
/* observe 'key' attribute */
|
||||||
|
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ['key'];
|
return ["key", "bibtex-key"];
|
||||||
}
|
}
|
||||||
|
|
||||||
attributeChangedCallback(name, oldValue, newValue) {
|
attributeChangedCallback(name, oldValue, newValue) {
|
||||||
const eventName = oldValue ? 'onCiteKeyChanged' : 'onCiteKeyCreated';
|
const eventName = oldValue ? "onCiteKeyChanged" : "onCiteKeyCreated";
|
||||||
const keys = newValue.split(',').map(k => k.trim());
|
const keys = newValue.split(",").map(k => k.trim());
|
||||||
const options = { detail: [this, keys], bubbles: true };
|
const options = { detail: [this, keys], bubbles: true };
|
||||||
const event = new CustomEvent(eventName, options);
|
const event = new CustomEvent(eventName, options);
|
||||||
document.dispatchEvent(event);
|
document.dispatchEvent(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
set key(value) {
|
set key(value) {
|
||||||
this.setAttribute('key', value);
|
this.setAttribute("key", value);
|
||||||
}
|
}
|
||||||
|
|
||||||
get key() {
|
get key() {
|
||||||
return this.getAttribute('key');
|
return this.getAttribute("key") || this.getAttribute("bibtex-key");
|
||||||
}
|
}
|
||||||
|
|
||||||
get keys() {
|
get keys() {
|
||||||
return this.getAttribute('key').split(',');
|
return this.key.split(",");
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Setters & Rendering */
|
/* Setters & Rendering */
|
||||||
@@ -143,16 +145,16 @@ export class Cite extends T(HTMLElement) {
|
|||||||
|
|
||||||
displayNumbers(numbers) {
|
displayNumbers(numbers) {
|
||||||
if (!this.innerSpan) return;
|
if (!this.innerSpan) return;
|
||||||
const numberStrings = numbers.map( index => {
|
const numberStrings = numbers.map(index => {
|
||||||
return index == -1 ? '?' : index + 1 + '';
|
return index == -1 ? "?" : index + 1 + "";
|
||||||
});
|
});
|
||||||
const textContent = '[' + numberStrings.join(', ') + ']';
|
const textContent = "[" + numberStrings.join(", ") + "]";
|
||||||
this.innerSpan.textContent = textContent;
|
this.innerSpan.textContent = textContent;
|
||||||
}
|
}
|
||||||
|
|
||||||
set entries(entries) {
|
set entries(entries) {
|
||||||
this._entries = entries;
|
this._entries = entries;
|
||||||
this.displayEntries(entries)
|
this.displayEntries(entries);
|
||||||
}
|
}
|
||||||
|
|
||||||
get entries() {
|
get entries() {
|
||||||
@@ -160,10 +162,12 @@ export class Cite extends T(HTMLElement) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
displayEntries(entries) {
|
displayEntries(entries) {
|
||||||
if (!this.hoverBox) return
|
if (!this.hoverBox) return;
|
||||||
this.hoverBox.innerHTML = `<ul>
|
this.hoverBox.innerHTML = `<ul>
|
||||||
${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
|
${entries
|
||||||
|
.map(hover_cite)
|
||||||
|
.map(html => `<li>${html}</li>`)
|
||||||
|
.join("\n")}
|
||||||
</ul>`;
|
</ul>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
+4
-2
@@ -173,8 +173,10 @@ export const Controller = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const frontMatterTag = document.querySelector('d-front-matter');
|
const frontMatterTag = document.querySelector('d-front-matter');
|
||||||
const data = parseFrontmatter(frontMatterTag);
|
if (frontMatterTag) {
|
||||||
Controller.listeners.onFrontMatterChanged({detail: data});
|
const data = parseFrontmatter(frontMatterTag);
|
||||||
|
Controller.listeners.onFrontMatterChanged({detail: data});
|
||||||
|
}
|
||||||
|
|
||||||
// Resolving "citations" dependency due to initial DOM load
|
// Resolving "citations" dependency due to initial DOM load
|
||||||
frontMatter.citations = collect_citations();
|
frontMatter.citations = collect_citations();
|
||||||
|
|||||||
@@ -13,20 +13,20 @@ export const footerTemplate = `
|
|||||||
contain: content;
|
contain: content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo svg {
|
.footer-container .logo svg {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo svg path {
|
.footer-container .logo svg path {
|
||||||
fill: none;
|
fill: none;
|
||||||
stroke: rgba(255, 255, 255, 0.8);
|
stroke: rgba(255, 255, 255, 0.8);
|
||||||
stroke-width: 3px;
|
stroke-width: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.footer-container .logo {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
@@ -34,16 +34,16 @@ export const footerTemplate = `
|
|||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.footer-container {
|
||||||
grid-column: text;
|
grid-column: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.footer-container .nav {
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-top: 1.5em;
|
margin-top: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a {
|
.footer-container .nav a {
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -51,7 +51,7 @@ export const footerTemplate = `
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class='container'>
|
<div class='footer-container'>
|
||||||
|
|
||||||
<a href="/" class="logo">
|
<a href="/" class="logo">
|
||||||
${logo}
|
${logo}
|
||||||
|
|||||||
+103
-90
@@ -12,74 +12,85 @@
|
|||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
|
|
||||||
export function collect_citations(dom=document) {
|
export function collect_citations(dom = document) {
|
||||||
const citations = new Set();
|
const citations = new Set();
|
||||||
const citeTags = dom.querySelectorAll('d-cite');
|
const citeTags = dom.querySelectorAll("d-cite");
|
||||||
for (const tag of citeTags) {
|
for (const tag of citeTags) {
|
||||||
const keys = tag.getAttribute('key').split(',');
|
for (const key of tag.keys) {
|
||||||
for (const key of keys) {
|
|
||||||
citations.add(key);
|
citations.add(key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return [...citations];
|
return [...citations];
|
||||||
}
|
}
|
||||||
|
|
||||||
export function inline_cite_short(keys){
|
export function inline_cite_short(keys) {
|
||||||
function cite_string(key){
|
function cite_string(key) {
|
||||||
if (key in data.bibliography){
|
if (key in data.bibliography) {
|
||||||
var n = data.citations.indexOf(key)+1;
|
var n = data.citations.indexOf(key) + 1;
|
||||||
return ''+n;
|
return "" + n;
|
||||||
} else {
|
} else {
|
||||||
return '?';
|
return "?";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return '['+keys.map(cite_string).join(', ')+']';
|
return "[" + keys.map(cite_string).join(", ") + "]";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function inline_cite_long(keys){
|
export function inline_cite_long(keys) {
|
||||||
function cite_string(key){
|
function cite_string(key) {
|
||||||
if (key in data.bibliography){
|
if (key in data.bibliography) {
|
||||||
var ent = data.bibliography[key];
|
var ent = data.bibliography[key];
|
||||||
var names = ent.author.split(' and ');
|
var names = ent.author.split(" and ");
|
||||||
names = names.map(name => name.split(',')[0].trim());
|
names = names.map(name => name.split(",")[0].trim());
|
||||||
var year = ent.year;
|
var year = ent.year;
|
||||||
if (names.length == 1) return names[0] + ', ' + 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] + " & " + names[1] + ", " + year;
|
||||||
if (names.length > 2) return names[0] + ', et al., ' + year;
|
if (names.length > 2) return names[0] + ", et al., " + year;
|
||||||
} else {
|
} else {
|
||||||
return '?';
|
return "?";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return keys.map(cite_string).join(', ');
|
return keys.map(cite_string).join(", ");
|
||||||
}
|
}
|
||||||
|
|
||||||
function author_string(ent, template, sep, finalSep){
|
function author_string(ent, template, sep, finalSep) {
|
||||||
if (ent.author == null) { return ''; }
|
if (ent.author == null) {
|
||||||
var names = ent.author.split(' and ');
|
return "";
|
||||||
|
}
|
||||||
|
var names = ent.author.split(" and ");
|
||||||
let name_strings = names.map(name => {
|
let name_strings = names.map(name => {
|
||||||
name = name.trim();
|
name = name.trim();
|
||||||
if (name.indexOf(',') != -1){
|
if (name.indexOf(",") != -1) {
|
||||||
var last = name.split(',')[0].trim();
|
var last = name.split(",")[0].trim();
|
||||||
var firsts = name.split(',')[1];
|
var firsts = name.split(",")[1];
|
||||||
} else if (name.indexOf(' ') != -1) {
|
} else if (name.indexOf(" ") != -1) {
|
||||||
var last = name.split(' ').slice(-1)[0].trim();
|
var last = name
|
||||||
var firsts = name.split(' ').slice(0,-1).join(' ');
|
.split(" ")
|
||||||
|
.slice(-1)[0]
|
||||||
|
.trim();
|
||||||
|
var firsts = name
|
||||||
|
.split(" ")
|
||||||
|
.slice(0, -1)
|
||||||
|
.join(" ");
|
||||||
} else {
|
} else {
|
||||||
var last = name.trim();
|
var last = name.trim();
|
||||||
}
|
}
|
||||||
var initials = '';
|
var initials = "";
|
||||||
if (firsts != undefined) {
|
if (firsts != undefined) {
|
||||||
initials = firsts.trim().split(' ').map(s => s.trim()[0]);
|
initials = firsts
|
||||||
initials = initials.join('.')+'.';
|
.trim()
|
||||||
|
.split(" ")
|
||||||
|
.map(s => s.trim()[0]);
|
||||||
|
initials = initials.join(".") + ".";
|
||||||
}
|
}
|
||||||
return template.replace('${F}', firsts)
|
return template
|
||||||
.replace('${L}', last)
|
.replace("${F}", firsts)
|
||||||
.replace('${I}', initials)
|
.replace("${L}", last)
|
||||||
|
.replace("${I}", initials)
|
||||||
.trim(); // in case one of first or last was empty
|
.trim(); // in case one of first or last was empty
|
||||||
});
|
});
|
||||||
if (names.length > 1) {
|
if (names.length > 1) {
|
||||||
var str = name_strings.slice(0, names.length-1).join(sep);
|
var str = name_strings.slice(0, names.length - 1).join(sep);
|
||||||
str += (finalSep || sep) + name_strings[names.length-1];
|
str += (finalSep || sep) + name_strings[names.length - 1];
|
||||||
return str;
|
return str;
|
||||||
} else {
|
} else {
|
||||||
return name_strings[0];
|
return name_strings[0];
|
||||||
@@ -87,69 +98,71 @@ function author_string(ent, template, sep, finalSep){
|
|||||||
}
|
}
|
||||||
|
|
||||||
function venue_string(ent) {
|
function venue_string(ent) {
|
||||||
var cite = (ent.journal || ent.booktitle || '');
|
var cite = ent.journal || ent.booktitle || "";
|
||||||
if ('volume' in ent){
|
if ("volume" in ent) {
|
||||||
var issue = ent.issue || ent.number;
|
var issue = ent.issue || ent.number;
|
||||||
issue = (issue != undefined)? '('+issue+')' : '';
|
issue = issue != undefined ? "(" + issue + ")" : "";
|
||||||
cite += ', Vol ' + ent.volume + issue;
|
cite += ", Vol " + ent.volume + issue;
|
||||||
}
|
}
|
||||||
if ('pages' in ent){
|
if ("pages" in ent) {
|
||||||
cite += ', pp. ' + ent.pages;
|
cite += ", pp. " + ent.pages;
|
||||||
}
|
}
|
||||||
if (cite != '') cite += '. ';
|
if (cite != "") cite += ". ";
|
||||||
if ('publisher' in ent){
|
if ("publisher" in ent) {
|
||||||
cite += ent.publisher;
|
cite += ent.publisher;
|
||||||
if (cite[cite.length-1] != '.') cite += '.';
|
if (cite[cite.length - 1] != ".") cite += ".";
|
||||||
}
|
}
|
||||||
return cite;
|
return cite;
|
||||||
}
|
}
|
||||||
|
|
||||||
function link_string(ent){
|
function link_string(ent) {
|
||||||
if ('url' in ent){
|
if ("url" in ent) {
|
||||||
var url = ent.url;
|
var url = ent.url;
|
||||||
var arxiv_match = (/arxiv\.org\/abs\/([0-9\.]*)/).exec(url);
|
var arxiv_match = /arxiv\.org\/abs\/([0-9\.]*)/.exec(url);
|
||||||
if (arxiv_match != null){
|
if (arxiv_match != null) {
|
||||||
url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
|
url = `http://arxiv.org/pdf/${arxiv_match[1]}.pdf`;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (url.slice(-4) == '.pdf'){
|
if (url.slice(-4) == ".pdf") {
|
||||||
var label = 'PDF';
|
var label = "PDF";
|
||||||
} else if (url.slice(-5) == '.html') {
|
} else if (url.slice(-5) == ".html") {
|
||||||
var label = 'HTML';
|
var label = "HTML";
|
||||||
}
|
}
|
||||||
return `  <a href="${url}">[${label||'link'}]</a>`;
|
return `  <a href="${url}">[${label || "link"}]</a>`;
|
||||||
}/* else if ("doi" in ent){
|
} /* else if ("doi" in ent){
|
||||||
return `  <a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
|
return `  <a href="https://doi.org/${ent.doi}" >[DOI]</a>`;
|
||||||
}*/ else {
|
}*/ else {
|
||||||
return '';
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function doi_string(ent, new_line){
|
function doi_string(ent, new_line) {
|
||||||
if ('doi' in ent) {
|
if ("doi" in ent) {
|
||||||
return `${new_line?'<br>':''} <a href="https://doi.org/${ent.doi}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
|
return `${new_line ? "<br>" : ""} <a href="https://doi.org/${
|
||||||
|
ent.doi
|
||||||
|
}" style="text-decoration:inherit;">DOI: ${ent.doi}</a>`;
|
||||||
} else {
|
} else {
|
||||||
return '';
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function title_string(ent) {
|
function title_string(ent) {
|
||||||
return '<span class="title">' + ent.title + '</span> ';
|
return '<span class="title">' + ent.title + "</span> ";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function bibliography_cite(ent, fancy){
|
export function bibliography_cite(ent, fancy) {
|
||||||
if (ent){
|
if (ent) {
|
||||||
var cite = title_string(ent);
|
var cite = title_string(ent);
|
||||||
cite += link_string(ent) + '<br>';
|
cite += link_string(ent) + "<br>";
|
||||||
if (ent.author) {
|
if (ent.author) {
|
||||||
cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
|
cite += author_string(ent, "${L}, ${I}", ", ", " and ");
|
||||||
if (ent.year || ent.date) {
|
if (ent.year || ent.date) {
|
||||||
cite += ', ';
|
cite += ", ";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (ent.year || ent.date) {
|
if (ent.year || ent.date) {
|
||||||
cite += (ent.year || ent.date) + '. ';
|
cite += (ent.year || ent.date) + ". ";
|
||||||
} else {
|
} else {
|
||||||
cite += '. ';
|
cite += ". ";
|
||||||
}
|
}
|
||||||
cite += venue_string(ent);
|
cite += venue_string(ent);
|
||||||
cite += doi_string(ent);
|
cite += doi_string(ent);
|
||||||
@@ -166,39 +179,39 @@ export function bibliography_cite(ent, fancy){
|
|||||||
cite += link_string(ent);
|
cite += link_string(ent);
|
||||||
return cite*/
|
return cite*/
|
||||||
} else {
|
} else {
|
||||||
return '?';
|
return "?";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hover_cite(ent){
|
export function hover_cite(ent) {
|
||||||
if (ent){
|
if (ent) {
|
||||||
var cite = '';
|
var cite = "";
|
||||||
cite += '<strong>' + ent.title + '</strong>';
|
cite += "<strong>" + ent.title + "</strong>";
|
||||||
cite += link_string(ent);
|
cite += link_string(ent);
|
||||||
cite += '<br>';
|
cite += "<br>";
|
||||||
|
|
||||||
var a_str = author_string(ent, '${I} ${L}', ', ') + '.';
|
var a_str = author_string(ent, "${I} ${L}", ", ") + ".";
|
||||||
var v_str = venue_string(ent).trim() + ' ' + ent.year + '. ' + doi_string(ent, true);
|
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)) {
|
if ((a_str + v_str).length < Math.min(40, ent.title.length)) {
|
||||||
cite += a_str + ' ' + v_str;
|
cite += a_str + " " + v_str;
|
||||||
} else {
|
} else {
|
||||||
cite += a_str + '<br>' + v_str;
|
cite += a_str + "<br>" + v_str;
|
||||||
}
|
}
|
||||||
return cite;
|
return cite;
|
||||||
} else {
|
} else {
|
||||||
return '?';
|
return "?";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
|
//https://scholar.google.com/scholar?q=allintitle%3ADocument+author%3Aolah
|
||||||
function get_GS_URL(ent){
|
function get_GS_URL(ent) {
|
||||||
if (ent){
|
if (ent) {
|
||||||
var names = ent.author.split(' and ');
|
var names = ent.author.split(" and ");
|
||||||
names = names.map(name => name.split(',')[0].trim());
|
names = names.map(name => name.split(",")[0].trim());
|
||||||
var title = ent.title.split(' ');//.replace(/[,:]/, "")
|
var title = ent.title.split(" "); //.replace(/[,:]/, "")
|
||||||
var url = 'http://search.labs.crossref.org/dois?';//""https://scholar.google.com/scholar?"
|
var url = "http://search.labs.crossref.org/dois?"; //""https://scholar.google.com/scholar?"
|
||||||
url += uris({q: names.join(' ') + ' ' + title.join(' ')});
|
url += uris({ q: names.join(" ") + " " + title.join(" ") });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user