mirror of
https://github.com/wassname/template.git
synced 2026-06-29 09:56:50 +08:00
Fix interstitial on localhost, distill-appendix crash on unpublished articles
This commit is contained in:
Ludwig Schubert
+8
-2
@@ -1,3 +1,10 @@
|
||||
/* Flag that we're being loaded */
|
||||
if (window.distillLoaded) {
|
||||
throw new Error('Distill Template is getting loaded more than once, aborting!');
|
||||
} else {
|
||||
window.distillLoaded = true;
|
||||
}
|
||||
|
||||
/* Static styles and other modules */
|
||||
import { makeStyleTag } from './styles/styles';
|
||||
makeStyleTag(document);
|
||||
@@ -20,8 +27,7 @@ import { References } from './components/d-references';
|
||||
import { TOC } from './components/d-toc';
|
||||
import { Figure } from './components/d-figure';
|
||||
import { Interstitial } from './components/d-interstitial';
|
||||
|
||||
import { Slider } from './ui/d-slider';
|
||||
import { Slider } from './ui/d-slider';
|
||||
|
||||
const components = [
|
||||
Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
|
||||
|
||||
@@ -14,9 +14,6 @@ export class Article extends HTMLElement {
|
||||
for (const mutation of mutations) {
|
||||
for (const addedNode of mutation.addedNodes) {
|
||||
switch (addedNode.nodeName) {
|
||||
// case 'HR':
|
||||
// console.warn('Use of <hr> tags in distill articles is discouraged as they interfere with layout! To separate sections, please just use h2 or h3 tags.');
|
||||
// break;
|
||||
case '#text': { // usually text nodes are only linebreaks.
|
||||
const text = addedNode.nodeValue;
|
||||
if (!isOnlyWhitespace.test(text)) {
|
||||
|
||||
@@ -1,9 +1,16 @@
|
||||
import { parseBibtex } from '../helpers/bibtex';
|
||||
|
||||
export function parseBibliography(element) {
|
||||
if (element.firstElementChild && element.firstElementChild.tagName === 'SCRIPT') {
|
||||
const bibtex = element.firstElementChild.textContent;
|
||||
return parseBibtex(bibtex);
|
||||
const scriptTag = element.firstElementChild;
|
||||
if (scriptTag && scriptTag.tagName === 'SCRIPT') {
|
||||
if (scriptTag.type == 'text/bibtex') {
|
||||
const bibtex = element.firstElementChild.textContent;
|
||||
return parseBibtex(bibtex);
|
||||
} else if (scriptTag.type == 'text/json') {
|
||||
return new Map(JSON.parse(scriptTag.textContent));
|
||||
} else {
|
||||
console.warn('Unsupported bibliography script tag type: ' + scriptTag.type);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -166,7 +166,6 @@ if (typeof window !== 'undefined') {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
Figure.isScrolling = false;
|
||||
console.log('Stopped Scrolling')
|
||||
Figure.runReadyQueue();
|
||||
}, 500);
|
||||
};
|
||||
|
||||
@@ -30,21 +30,34 @@ const styles = `
|
||||
`;
|
||||
|
||||
export function appendixTemplate(frontMatter) {
|
||||
return `
|
||||
${styles}
|
||||
let html = styles;
|
||||
|
||||
<h3 id="updates-and-corrections">Updates and Corrections</h3>
|
||||
<p><a href="">View all changes</a> to this article since it was first published. If you see mistakes or want to suggest changes, please <a href="${frontMatter.githubUrl + '/issues/new'}">create an issue on GitHub</a>. </p>
|
||||
if (typeof frontMatter.githubUrl !== 'undefined') {
|
||||
html += `
|
||||
<h3 id="updates-and-corrections">Updates and Corrections</h3>
|
||||
<p><a href="">View all changes</a> to this article since it was first published. If you see mistakes or want to suggest changes, please <a href="${frontMatter.githubUrl + '/issues/new'}">create an issue on GitHub</a>. </p>
|
||||
`;
|
||||
}
|
||||
|
||||
<h3 id="reuse">Reuse</h3>
|
||||
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> with the <a class="github" href="${frontMatter.githubUrl}">source available on GitHub</a>, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
|
||||
const journal = frontMatter.journal;
|
||||
if (typeof journal !== 'undefined' && journal.title === 'Distill') {
|
||||
html += `
|
||||
<h3 id="reuse">Reuse</h3>
|
||||
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a> with the <a class="github" href="${frontMatter.githubUrl}">source available on GitHub</a>, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.</p>
|
||||
`;
|
||||
}
|
||||
|
||||
<h3 id="citation">Citation</h3>
|
||||
<p>For attribution in academic contexts, please cite this work as</p>
|
||||
<pre class="citation short">${frontMatter.concatenatedAuthors}, "${frontMatter.title}", Distill, ${frontMatter.publishedYear}.</pre>
|
||||
<p>BibTeX citation</p>
|
||||
<pre class="citation long">${serializeFrontmatterToBibtex(frontMatter)}</pre>
|
||||
`;
|
||||
if (typeof frontMatter.publishedDate !== 'undefined') {
|
||||
html += `
|
||||
<h3 id="citation">Citation</h3>
|
||||
<p>For attribution in academic contexts, please cite this work as</p>
|
||||
<pre class="citation short">${frontMatter.concatenatedAuthors}, "${frontMatter.title}", Distill, ${frontMatter.publishedYear}.</pre>
|
||||
<p>BibTeX citation</p>
|
||||
<pre class="citation long">${serializeFrontmatterToBibtex(frontMatter)}</pre>
|
||||
`;
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
export class DistillAppendix extends HTMLElement {
|
||||
|
||||
@@ -4,80 +4,81 @@ import logo from '../assets/distill-logo.svg';
|
||||
|
||||
const T = Template('distill-header', `
|
||||
<style>
|
||||
:host {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
distill-header {
|
||||
position: relative;
|
||||
height: 60px;
|
||||
background-color: hsl(200, 60%, 15%);
|
||||
width: 100%;
|
||||
z-index: ${1e6};
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
contain: content;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.content > * {
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
padding: 3px 7px;
|
||||
margin: 8px 0;
|
||||
distill-header .content {
|
||||
height: 70px;
|
||||
grid-column: page;
|
||||
}
|
||||
|
||||
.name {
|
||||
grid-column-end: span 8;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.content a {
|
||||
font-size: 12px;
|
||||
distill-header a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 22px 0;
|
||||
}
|
||||
svg {
|
||||
display: none;
|
||||
background-color: hsl(0, 0%, 15%);
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
distill-header a:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
distill-header svg {
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
svg path {
|
||||
fill: white;
|
||||
stroke: rgba(255, 255, 255, 1.0);
|
||||
@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;
|
||||
}
|
||||
.content {
|
||||
grid-column: page;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
display: grid;
|
||||
grid-column-gap: 40px;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
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 grid">
|
||||
<div class="content">
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
</a>
|
||||
<div class='name'>
|
||||
Distill
|
||||
</a>
|
||||
<div class="nav">
|
||||
<a href="/about/">About</a>
|
||||
<a href="/prize/">Prize</a>
|
||||
<a href="/journal/">Submit</a>
|
||||
</div>
|
||||
<a href="/faq">Latest</a>
|
||||
<a href="/faq">About</a>
|
||||
<a href="/faq">Prize</a>
|
||||
<a href="/faq">Submit</a>
|
||||
</div>
|
||||
`);
|
||||
`, false);
|
||||
|
||||
// <div class="nav">
|
||||
// <a href="https://github.com/distillpub">GitHub</a>
|
||||
|
||||
+6
-2
@@ -143,7 +143,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.publishedDate = undefined;
|
||||
}
|
||||
|
||||
// Example:
|
||||
@@ -176,7 +176,11 @@ export class FrontMatter {
|
||||
|
||||
// 'https://github.com/distillpub/post--augmented-rnns',
|
||||
get githubUrl() {
|
||||
return 'https://github.com/' + this.githubPath;
|
||||
if (this.githubPath) {
|
||||
return 'https://github.com/' + this.githubPath;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO resolve differences in naming of URL/Url/url.
|
||||
|
||||
@@ -52,6 +52,17 @@ p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: -0.4em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.4em;
|
||||
}
|
||||
|
||||
.kicker,
|
||||
.marker {
|
||||
font-size: 15px;
|
||||
|
||||
+11
-2
@@ -52,7 +52,12 @@ const distillTransforms = new Map([
|
||||
/* Exported functions */
|
||||
|
||||
export function render(dom, data, verbose=true) {
|
||||
const frontMatter = FrontMatter.fromObject(data);
|
||||
let frontMatter;
|
||||
if (data instanceof FrontMatter) {
|
||||
frontMatter = data;
|
||||
} else {
|
||||
frontMatter = FrontMatter.fromObject(data);
|
||||
}
|
||||
// first, we collect static data from the dom
|
||||
for (const [name, extract] of extractors.entries()) {
|
||||
if (verbose) console.warn('Running extractor: ' + name);
|
||||
@@ -66,7 +71,11 @@ export function render(dom, data, verbose=true) {
|
||||
}
|
||||
dom.body.setAttribute('distill-prerendered', '');
|
||||
// the function calling us can now use the transformed dom and filled data object
|
||||
frontMatter.assignToObject(data);
|
||||
if (data instanceof FrontMatter) {
|
||||
// frontMatter will already have needed properties
|
||||
} else {
|
||||
frontMatter.assignToObject(data);
|
||||
}
|
||||
}
|
||||
|
||||
export function distillify(dom, data, verbose=true) {
|
||||
|
||||
@@ -9,17 +9,21 @@
|
||||
|
||||
export default function(dom, data) {
|
||||
const article = dom.querySelector('d-article');
|
||||
|
||||
if (!article) {
|
||||
console.warn('No d-article tag found!');
|
||||
console.warn('No d-article tag found; skipping adding optional components!');
|
||||
return;
|
||||
}
|
||||
|
||||
const hasPassword = typeof data.password !== 'undefined';
|
||||
let interstitial = dom.querySelector('d-interstitial');
|
||||
if (!interstitial && data.password) {
|
||||
interstitial = dom.createElement('d-interstitial');
|
||||
interstitial.password = data.password;
|
||||
dom.body.insertBefore(interstitial, dom.body.firstChild);
|
||||
if (hasPassword && !interstitial) {
|
||||
const inBrowser = typeof window !== 'undefined';
|
||||
const onLocalhost = inBrowser && window.location.hostname.includes('localhost');
|
||||
if (!inBrowser || !onLocalhost) {
|
||||
interstitial = dom.createElement('d-interstitial');
|
||||
interstitial.password = data.password;
|
||||
dom.body.insertBefore(interstitial, dom.body.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
// let h1 = dom.querySelector('h1');
|
||||
|
||||
Reference in New Issue
Block a user