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

Fix interstitial on localhost, distill-appendix crash on unpublished articles

Browse Source
This commit is contained in:
Ludwig Schubert
2017-10-19 13:44:56 -07:00
parent 02563c32d6
commit 1a4cd694cd
10 changed files with 134 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/distill-components/distill-appendix.js
+25 -12
View File
@@ -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 {
src/distill-components/distill-header.js
+53 -52
View File
@@ -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>