mirror of
https://github.com/wassname/template.git
synced 2026-07-22 13:00:30 +08:00
Appendix
This commit is contained in:
Shan Carter
@@ -1,12 +1,15 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
|
||||
const T = Template("d-abstract", `
|
||||
<style>
|
||||
d-abstract {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 23px;
|
||||
line-height: 1.7em;
|
||||
margin-bottom: 140px;
|
||||
}
|
||||
${body("d-abstract")}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {page} from "./layout";
|
||||
|
||||
const T = Template("d-appendix", `
|
||||
<style>
|
||||
d-appendix {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 0;
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
color: rgba(0,0,0,0.5);
|
||||
background: rgb(250, 250, 250);
|
||||
padding-top: 36px;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
${page("d-appendix p, d-appendix h3, d-appendix pre")}
|
||||
d-appendix h3 {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 0;
|
||||
color: rgba(0,0,0,0.65);
|
||||
line-height: 1em;
|
||||
}
|
||||
d-appendix .citation {
|
||||
font-size: 11px;
|
||||
line-height: 15px;
|
||||
border-left: 2px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 0 0 0 18px;
|
||||
overflow: hidden;
|
||||
margin-top: 0px;
|
||||
}
|
||||
d-appendix .references {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
d-appendix a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
d-appendix ol,
|
||||
d-appendix ul {
|
||||
padding-left: 24px;
|
||||
}
|
||||
</style>
|
||||
<!-- slot -->
|
||||
<d-references></d-references>
|
||||
<distill-appendix></distill-appendix>
|
||||
`, false);
|
||||
|
||||
export default class Appendix extends T(HTMLElement) {
|
||||
static get is() { return "d-appendix"; }
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
//TODO: Check for distill journal
|
||||
let distillAppendix = document.createElement("distill-appendix");
|
||||
let journalData = [];
|
||||
distillAppendix.render(journalData);
|
||||
this.appendChild(distillAppendix);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(Appendix.is, Appendix);
|
||||
|
||||
+6
-38
@@ -8,35 +8,31 @@ const T = Template("d-article", `
|
||||
padding-top: 36px;
|
||||
padding-bottom: 72px;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
min-height: calc(100vh - 70px - 182px);
|
||||
font-size: 20px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 16px;
|
||||
line-height: 1.6em;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H2 */
|
||||
|
||||
d-article h2 {
|
||||
font-weight: 400;
|
||||
font-weight: 500;
|
||||
font-size: 26px;
|
||||
line-height: 1.25em;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h2 {
|
||||
margin-top: 48px;
|
||||
font-size: 30px;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article h1 + h2 {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
@@ -44,7 +40,6 @@ const T = Template("d-article", `
|
||||
margin-top: 8px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
.centered h1 + h2 {
|
||||
text-align: center;
|
||||
@@ -65,11 +60,9 @@ const T = Template("d-article", `
|
||||
margin-bottom: 18px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
d-article h1 + h3 {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h3 {
|
||||
font-size: 26px;
|
||||
@@ -84,67 +77,54 @@ const T = Template("d-article", `
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
d-article a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
d-article p,
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
d-article p b,
|
||||
d-article ul b,
|
||||
d-article ol b {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
d-article a {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
d-article a:hover {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
d-article .link {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
d-article li {
|
||||
margin-bottom: 24px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
d-article pre {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
d-article hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
d-article section {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
|
||||
/* Figure */
|
||||
|
||||
d-article figure {
|
||||
@@ -152,22 +132,18 @@ const T = Template("d-article", `
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article figure {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
d-article figure svg text,
|
||||
d-article figure svg tspan {
|
||||
}
|
||||
|
||||
d-article figure figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
@@ -178,7 +154,6 @@ const T = Template("d-article", `
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article figure.external img {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
@@ -186,11 +161,9 @@ const T = Template("d-article", `
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
d-article figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
/*d-article figure figcaption::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
@@ -199,28 +172,23 @@ const T = Template("d-article", `
|
||||
width: 25px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}*/
|
||||
|
||||
d-article span.equation-mimic {
|
||||
font-family: georgia;
|
||||
font-size: 115%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
d-article figure figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
d-article > d-code,
|
||||
d-article section > d-code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-article .citation {
|
||||
color: #668;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
d-include {
|
||||
width: auto;
|
||||
display: block;
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
import bibtexParse from "bibtex-parse-js";
|
||||
|
||||
const T = Template("d-bibliography", `
|
||||
<style>
|
||||
d-bibliography {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class Bibliography extends T(HTMLElement) {
|
||||
static get is() { return "d-bibliography"; }
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
let s = this.querySelector('script[type="text/bibtex"]');
|
||||
if (s) {
|
||||
let bibliography = {};
|
||||
let rawBib = s.textContent;
|
||||
let parsed = bibtexParse.toJSON(rawBib);
|
||||
if(parsed) {
|
||||
parsed.forEach(e => {
|
||||
for (var k in e.entryTags){
|
||||
var val = e.entryTags[k];
|
||||
val = val.replace(/[\t\n ]+/g, " ");
|
||||
val = val.replace(/{\\["^`\.'acu~Hvs]( )?([a-zA-Z])}/g,
|
||||
(full, x, char) => char);
|
||||
val = val.replace(/{\\([a-zA-Z])}/g,
|
||||
(full, char) => char);
|
||||
e.entryTags[k] = val;
|
||||
}
|
||||
bibliography[e.citationKey] = e.entryTags;
|
||||
bibliography[e.citationKey].type = e.entryType;
|
||||
});
|
||||
}
|
||||
console.log(bibliography);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(Bibliography.is, Bibliography);
|
||||
+12
-8
@@ -6,15 +6,14 @@ const T = Template("d-byline", `
|
||||
<style>
|
||||
d-byline {
|
||||
box-sizing: border-box;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
background-color: grey;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
${page("d-byline .byline")}
|
||||
d-article.centered d-byline {
|
||||
@@ -22,7 +21,7 @@ const T = Template("d-byline", `
|
||||
}
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
@@ -34,6 +33,7 @@ const T = Template("d-byline", `
|
||||
text-align: left;
|
||||
}
|
||||
d-byline .name {
|
||||
font-weight: 600;
|
||||
display: inline;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -137,14 +137,18 @@ const mustacheTemplate = `
|
||||
</div>
|
||||
{{/authors}}
|
||||
</div>
|
||||
{{#publishedDate}}
|
||||
<div class="date">
|
||||
<div class="month">{{publishedMonth}}. {{publishedDay}}</div>
|
||||
<div class="month">{{publishedMonth}}. {{publishedDay}} {{publishedYear}</div>
|
||||
<div class="year">{{publishedYear}}</div>
|
||||
</div>
|
||||
{{/publishedDate}}
|
||||
{{#citation}}
|
||||
<a class="citation" href="#citation">
|
||||
<div>Citation:</div>
|
||||
<div>{{concatenatedAuthors}}, {{publishedYear}}</div>
|
||||
</a>
|
||||
{{/citation}}
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
|
||||
const T = Template("d-references", `
|
||||
<style>
|
||||
d-references {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
export default class References extends T(HTMLElement) {
|
||||
static get is() { return "d-references"; }
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(References.is, References);
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
import {page} from "./layout";
|
||||
|
||||
const T = Template("d-title", `
|
||||
<style>
|
||||
@@ -7,18 +7,17 @@ d-title {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: hsl(200, 0%, 95%);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
d-title h1 {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 36px;
|
||||
padding-top: 140px;
|
||||
padding-bottom: 24px;
|
||||
margin: 0;
|
||||
line-height: 1em;
|
||||
font-size: 60px;
|
||||
font-weight: 400;
|
||||
font-size: 48px;
|
||||
font-weight: 600;
|
||||
}
|
||||
${body("d-title h1")}
|
||||
${page("d-title h1")}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
import {Template} from "../mixins/template";
|
||||
import {body} from "./layout";
|
||||
import mustache from "mustache";
|
||||
|
||||
|
||||
const T = Template("distill-appendix", `
|
||||
<style>
|
||||
d-appendix {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
`, false);
|
||||
|
||||
let mustacheTemplate = `
|
||||
<h3>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="">create an issue on GitHub</a>.
|
||||
|
||||
<h3>Reuse</h3>
|
||||
<p>Diagrams and text are licensed under Creative Commons Attribution <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a>, unless noted otherwise, with the <a class="github" href="https://github.com/distillpub/post--augmented-rnns">source available on GitHub</a>. 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>Citation</h3>
|
||||
<p>For attribution in academic contexts, please cite this work as</p>
|
||||
<pre class="citation short">Olah & Carter, "Attention and Augmented Recurrent Neural Networks", Distill, 2016.</pre>
|
||||
<p>BibTeX citation</p>
|
||||
<pre class="citation long">@article{olah2016attention,
|
||||
author = {Olah, Chris and Carter, Shan},
|
||||
title = {Attention and Augmented Recurrent Neural Networks},
|
||||
journal = {Distill},
|
||||
year = {2016},
|
||||
note = {http://distill.pub/2016/augmented-rnns}
|
||||
}</pre>
|
||||
`;
|
||||
|
||||
export default class DistillAppendix extends T(HTMLElement) {
|
||||
static get is() { return "distill-appendix"; }
|
||||
render(data) {
|
||||
this.innerHTML = mustache.render(mustacheTemplate, data);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(DistillAppendix.is, DistillAppendix);
|
||||
@@ -1,7 +1,8 @@
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 1rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
|
||||
/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;*/
|
||||
font-family: "Libre Franklin", "Helvetica Neue", sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
|
||||
Reference in New Issue
Block a user