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

Remove d-acknowledgements (useless) and d-title (actively hindering modularization)

Browse Source
This commit is contained in:
Ludwig Schubert
2017-09-01 15:05:31 -07:00
parent 1fe29b6a32
commit 31982778f8
11 changed files with 105 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/article.html
+15 -8
View File
@@ -20,7 +20,12 @@
"affiliation":"Google Brain",
"affiliationURL":"https://g.co/brain"
}
]
],
"katex": {
"delimiters": [
{"left": "$$", "right": "$$", "display": false}
]
}
}</script>
</d-front-matter>
@@ -29,10 +34,8 @@
<body>
<d-article>
<d-title>
<h1>How to Use t-SNE Effectively</h1>
<h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
</d-title>
<h1>How to Use t-SNE Effectively</h1>
<h2>Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading.</h2>
<d-byline></d-byline>
<!-- <d-abstract>
<p>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;dash -- here it is.</p>
@@ -41,7 +44,7 @@
<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>This is the first paragraph of the article. Test a long&thinsp;&mdash;&thinsp;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>
<p>Here's a test of an inline equation <d-math>c = a^2 + b^2</d-math>. And then there's a block equation:</p>
<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>
@@ -107,15 +110,17 @@
</script>
<p>That's it for the example article!</p>
<aside>Some text.</aside>
</d-article>
<d-appendix>
<d-acknowledgements>
<div id='contributions'>
<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-acknowledgements>
</div>
<d-footnote-list></d-footnote-list>
@@ -224,5 +229,7 @@
</script></d-bibliography>
<distill-appendix> </distill-appendix>
</d-appendix>
</body>
src/components.js
+2 -4
View File
@@ -4,7 +4,6 @@ makeStyleTag(document);
/* Components */
import { Abstract } from './components/d-abstract';
import { Acknowledgements } from './components/d-acknowledgements';
import { Appendix } from './components/d-appendix';
import { Article } from './components/d-article';
import { Bibliography } from './components/d-bibliography';
@@ -16,14 +15,13 @@ import { FootnoteList } from './components/d-footnote-list';
import { FrontMatter } from './components/d-front-matter';
import { DMath } from './components/d-math';
import { References } from './components/d-references';
import { Title } from './components/d-title';
import { TOC } from './components/d-toc';
import { Figure } from './components/d-figure';
const components = [
Abstract, Acknowledgements, Appendix, Article, Bibliography,
Abstract, Appendix, Article, Bibliography,
Byline, Cite, Code, Footnote, FootnoteList, FrontMatter, DMath,
References, Title, TOC, Figure,
References, TOC, Figure,
];
/* Distill website specific components */
src/components/d-acknowledgements.js
-30
View File
@@ -1,30 +0,0 @@
import { Template } from '../mixins/template';
const T = Template('d-acknowledgements', `
<style>
:host {
contain: content;
}
::slotted(h3) {
font-size: 15px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 0;
color: rgba(0,0,0,0.65);
line-height: 1em;
}
::slotted(*) a {
color: rgba(0, 0, 0, 0.6);
}
</style>
<slot></slot>
`);
export class Acknowledgements extends T(HTMLElement) {
}
src/components/d-appendix.js
+19 -11
View File
@@ -4,10 +4,8 @@ import { body } from '../helpers/layout';
const T = Template('d-appendix', `
<style>
:host {
box-sizing: border-box;
display: block;
width: 100%;
d-appendix {
contain: content;
font-size: 13px;
line-height: 1.7em;
@@ -16,18 +14,28 @@ const T = Template('d-appendix', `
color: rgba(0,0,0,0.5);
padding-top: 36px;
padding-bottom: 48px;
contain: content;
}
${body('.content')}
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 a {
color: rgba(0, 0, 0, 0.6);
}
d-appendix > * {
grid-column: margin-left / body;
}
</style>
<div class='content'>
<slot></slot>
</div>
`, true);
`, false);
export class Appendix extends T(HTMLElement) {
src/components/d-math.js
+7 -21
View File
@@ -2,30 +2,16 @@
import { Mutating } from '../mixins/mutating.js';
import { Template } from '../mixins/template.js';
import style from '../styles/d-math.css';
// attaches renderMathInElement to window
import { renderMathInElement } from '../helpers/katex-auto-render';
export const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js';
export const katexCSSTag = '<link rel="stylesheet" href="https://distill.pub/third-party/katex/katex.min.css" crossorigin="anonymous">';
export const style = `
.katex-display {
text-align: left;
padding: 8px 0 8px 0;
margin: 20px 0 20px 24px;
}
.katex {
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
font-size: 1.18em;
}
`;
const T = Template('d-math', `
${katexCSSTag}
<style>
:host {
@@ -38,13 +24,10 @@ ${katexCSSTag}
}
${style}
</style>
<span id="katex-container"></span>
<span id='katex-container'></span>
`);
// DMath, not Math, because that would conflict with the JS built-in
export class DMath extends Mutating(T(HTMLElement)) {
@@ -57,7 +40,9 @@ export class DMath extends Mutating(T(HTMLElement)) {
static get katexOptions() {
if (!DMath._katexOptions) {
DMath._katexOptions = {};
DMath._katexOptions = {
delimiters: [ { 'left':'$', 'right':'$', 'display':true } ]
};
}
return DMath._katexOptions;
}
@@ -111,4 +96,5 @@ export class DMath extends Mutating(T(HTMLElement)) {
}
DMath.katexAdded = false;
DMath.inlineMathRendered = false;
window.DMath = DMath; // TODO: check if this can be removed, or if we should expose a distill global
src/components/d-title.js
-58
View File
@@ -1,58 +0,0 @@
import { Template } from '../mixins/template';
import { page } from '../helpers/layout';
const T = Template('d-title', `
<style>
:host {
box-sizing: border-box;
display: block;
width: 100%;
}
::slotted(h1) {
padding-top: 16px;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 18px;
line-height: 1.15;
font-size: 32px;
font-weight: 700;
}
::slotted(h2) {
border-bottom: none !important;
font-size: 26px !important;
font-weight: 300 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.6em !important;
margin-top: -2px !important;
margin-bottom: 36px !important;
border: none !important;
}
@media screen and (min-width: 768px), print {
::slotted(h1) {
font-size: 42px;
}
}
@media(min-width: 1024px) {
::slotted(h1) {
padding-top: 64px;
font-size: 42px;
}
}
@media(min-width: 1280px) {
::slotted(h1) {
padding-top: 96px;
}
}
</style>
<slot></slot>
`);
export class Title extends T(HTMLElement) {
}
src/controller.js
+4
View File
@@ -121,6 +121,10 @@ export const Controller = {
if (data.katex) {
DMath.katexOptions = data.katex;
}
if (data.title) {
}
},
DOMContentLoaded() {
src/styles/d-math.css
+11
View File
@@ -0,0 +1,11 @@
d-article .katex-display {
text-align: left;
padding: 8px 0 8px 0;
margin: 20px 0 20px 24px;
}
d-article .katex {
-webkit-font-smoothing: antialiased;
color: rgba(0, 0, 0, 0.8);
font-size: 1.18em;
}
src/styles/styles-article.css
+39 -7
View File
@@ -18,14 +18,46 @@ d-article {
}
}
/*h1::before {
content: "";
display: block;
border-bottom: solid 1px #999;
width: 40px;
margin-bottom: 24px;
}*/
d-article h1 {
grid-column: margin-left / page;
padding-top: 16px;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 18px;
line-height: 1.15;
font-size: 32px;
font-weight: 700;
}
d-article h1+h2 {
grid-column: margin-left / page;
border-bottom: none !important;
font-size: 26px !important;
font-weight: 300 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.6em !important;
margin-top: -2px !important;
margin-bottom: 36px !important;
border: none !important;
}
@media screen and (min-width: 768px), print {
d-article h1 {
font-size: 42px;
}
}
@media(min-width: 1024px) {
d-article h1 {
padding-top: 64px;
font-size: 42px;
}
}
@media(min-width: 1280px) {
d-article h1 {
padding-top: 96px;
}
}
/* H2 */
src/styles/styles-layout.css
+6 -11
View File
@@ -1,8 +1,7 @@
@supports not (display: grid) {
d-article,
d-title,
d-byline,
d-appendix,
d-byline,
distill-footer {
display: block;
padding: 8px;
@@ -10,9 +9,8 @@
}
d-article,
d-title,
d-byline,
d-appendix,
d-byline,
distill-footer {
display: grid;
justify-items: stretch;
@@ -22,9 +20,8 @@ distill-footer {
@media(min-width: 768px) {
d-article,
d-title,
d-byline,
d-appendix,
d-byline,
distill-footer {
grid-template-columns: [start] 32px [margin-left-outset] 32px [margin-left] 3fr [body] 32px [body-outset] 1fr [page] 32px [page-outset] 32px [end];
}
@@ -32,16 +29,15 @@ distill-footer {
@media(min-width: 1024px) {
d-article,
d-title,
d-byline,
d-appendix,
d-byline,
distill-footer {
grid-template-columns: [start] 1fr [margin-left-outset] 32px [margin-left] 672px [body] 32px [body-outset] 224px [page] 32px [page-outset] 1fr [end];
}
}
d-article,
d-appendix,
d-article > d-title,
d-article > d-byline,
d-article > distill-footer {
grid-column: start / end;
@@ -53,8 +49,7 @@ d-article > * {
}
.l-page,
d-figure,
d-title > * {
d-figure {
grid-column: margin-left / page;
}
src/styles/styles.js
+2 -2
View File
@@ -2,8 +2,8 @@ import base from './styles-base.css';
import layout from './styles-layout.css';
import article from './styles-article.css';
import print from './styles-print.css';
import { style as byline } from '../components/d-byline.js';
import { style as math } from '../components/d-math.js';
import { style as byline } from '../components/d-byline';
import math from './d-math.css';
export const styles = base + layout + byline + math + article + print;