mirror of
https://github.com/wassname/template.git
synced 2026-07-16 11:22:25 +08:00
Slider checkpoint
This commit is contained in:
Shan Carter
@@ -39,3 +39,6 @@ jspm_packages
|
||||
examples/fonts
|
||||
dist
|
||||
article-rendered.html
|
||||
|
||||
# dependency graph
|
||||
rollup-grapher.html
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
src
|
||||
build
|
||||
.editorconfig
|
||||
.eslintrc.json
|
||||
.gitignore
|
||||
.travis.yml
|
||||
rollup.config.dev.js
|
||||
rollup.config.js
|
||||
yarn-error.log
|
||||
@@ -1,31 +1,37 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const program = require('commander');
|
||||
const jsdom = require('jsdom');
|
||||
const { JSDOM } = jsdom;
|
||||
const transforms = require('../dist/transforms.v2.js');
|
||||
|
||||
program
|
||||
.version('0.0.1')
|
||||
.option('-i, --input <path>', 'path to input file.')
|
||||
.version('1.0.0')
|
||||
.description('Pre-renders distill articles for publication.')
|
||||
.usage('-i <input_path> -o <output_path>')
|
||||
.option('-i, --input-path <path>', 'path to input HTML file.')
|
||||
.option('-o, --output-path <path>', 'path to write rendered HTML file to.')
|
||||
.parse(process.argv);
|
||||
|
||||
console.warn(program);
|
||||
|
||||
const virtualConsole = new jsdom.VirtualConsole();
|
||||
// omitJSDOMErrors as JSDOM routinely can't parse modern CSS
|
||||
virtualConsole.sendTo(console, { omitJSDOMErrors: true });
|
||||
|
||||
const options = { runScripts: 'outside-only', QuerySelector: true, virtualConsole: virtualConsole };
|
||||
JSDOM.fromFile(program.input, options).then(dom => {
|
||||
JSDOM.fromFile(program.inputPath, options).then(dom => {
|
||||
const window = dom.window;
|
||||
const document = window.document;
|
||||
|
||||
const data = new transforms.FrontMatter;
|
||||
data.inputHTMLPath = program.input; // may be needed to resolve relative links!
|
||||
data.inputDirectory = path.dirname(program.input);
|
||||
data.inputHTMLPath = program.inputPath; // may be needed to resolve relative links!
|
||||
data.inputDirectory = path.dirname(program.inputPath);
|
||||
transforms.render(document, data);
|
||||
transforms.distillify(document, data);
|
||||
|
||||
const transformedHtml = dom.serialize();
|
||||
process.stdout.write(transformedHtml);
|
||||
fs.writeFileSync(program.outputPath, transformedHtml);
|
||||
}).catch(console.error);
|
||||
Generated
+58
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "distill-template",
|
||||
"version": "2.0.0-alpha",
|
||||
"version": "2.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
@@ -117,8 +117,7 @@
|
||||
"amdefine": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
|
||||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
|
||||
"optional": true
|
||||
"integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
|
||||
},
|
||||
"ansi-escapes": {
|
||||
"version": "2.0.0",
|
||||
@@ -3042,6 +3041,35 @@
|
||||
"integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
|
||||
"dev": true
|
||||
},
|
||||
"handlebars": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz",
|
||||
"integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async": "1.5.2",
|
||||
"optimist": "0.6.1",
|
||||
"source-map": "0.4.4",
|
||||
"uglify-js": "2.8.29"
|
||||
},
|
||||
"dependencies": {
|
||||
"async": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
|
||||
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.4.4",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
|
||||
"integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"amdefine": "1.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"har-schema": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
|
||||
@@ -4255,6 +4283,24 @@
|
||||
"integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
|
||||
"dev": true
|
||||
},
|
||||
"optimist": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
|
||||
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8",
|
||||
"wordwrap": "0.0.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"wordwrap": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
|
||||
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"optionator": {
|
||||
"version": "0.8.2",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
|
||||
@@ -4900,6 +4946,15 @@
|
||||
"fs-extra": "3.0.1"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-grapher": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-grapher/-/rollup-plugin-grapher-0.2.0.tgz",
|
||||
"integrity": "sha1-FtbJZkRfV6LgjDgFiFCUuZsiyv4=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"handlebars": "4.0.10"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-gzip": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-gzip/-/rollup-plugin-gzip-1.2.0.tgz",
|
||||
|
||||
+10
-5
@@ -1,8 +1,11 @@
|
||||
{
|
||||
"name": "distill-template",
|
||||
"version": "2.0.0-alpha",
|
||||
"version": "2.1.0",
|
||||
"description": "Template for creating Distill articles.",
|
||||
"main": "dist/template.js",
|
||||
"main": "dist/template.v2.js",
|
||||
"bin": {
|
||||
"distill-render": "./bin/render.js"
|
||||
},
|
||||
"author": "Shan Carter",
|
||||
"homepage": "https://github.com/distillpub/distill-template#readme",
|
||||
"bugs": {
|
||||
@@ -13,7 +16,8 @@
|
||||
"serve": "python3 -m http.server --bind 127.0.0.1 8888",
|
||||
"test": "mocha",
|
||||
"lint": "eslint",
|
||||
"build": "rollup -c rollup.config.js"
|
||||
"build": "rollup -c rollup.config.js",
|
||||
"prepare": "npm run build"
|
||||
},
|
||||
"repository": {
|
||||
"url": "git+https://github.com/distillpub/distill-template.git",
|
||||
@@ -22,11 +26,9 @@
|
||||
"devDependencies": {
|
||||
"bibtex-parse-js": "^0.0.23",
|
||||
"chai": "^3.5.0",
|
||||
"commander": "^2.9.0",
|
||||
"eslint": "^4.3.0",
|
||||
"eslint-config-google": "^0.9.1",
|
||||
"js-yaml": "^3.7.0",
|
||||
"jsdom": "^11.2.0",
|
||||
"marked": "^0.3.6",
|
||||
"mocha": "^3.2.0",
|
||||
"prismjs": "^1.6.0",
|
||||
@@ -35,6 +37,7 @@
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^7.0.0",
|
||||
"rollup-plugin-copy": "^0.2.3",
|
||||
"rollup-plugin-grapher": "^0.2.0",
|
||||
"rollup-plugin-gzip": "^1.2.0",
|
||||
"rollup-plugin-node-resolve": "^2.0.0",
|
||||
"rollup-plugin-serve": "^0.1.0",
|
||||
@@ -51,6 +54,8 @@
|
||||
"d3-selection": "^1.1.0",
|
||||
"d3-time-format": "^2.0.3",
|
||||
"intersection-observer": "^0.4.0",
|
||||
"commander": "^2.9.0",
|
||||
"jsdom": "^11.2.0",
|
||||
"jsdom-wc": "^11.0.0-alpha-1",
|
||||
"katex": "^0.7.1"
|
||||
}
|
||||
|
||||
+14
-1
@@ -3,6 +3,9 @@ import string from 'rollup-plugin-string';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import buble from 'rollup-plugin-buble';
|
||||
|
||||
// uncomment to show dependencies [1/2]
|
||||
// import rollupGrapher from 'rollup-plugin-grapher'
|
||||
|
||||
const componentsConfig = {
|
||||
input: 'src/components.js',
|
||||
output: [{ format: 'umd', name: 'dl', file: 'dist/template.v2.js' }],
|
||||
@@ -25,6 +28,7 @@ const defaultConfig = {
|
||||
include: ['**/*.txt', '**/*.svg', '**/*.html', '**/*.css', '**/*.base64']
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
@@ -35,7 +39,16 @@ Object.assign(transformsConfig, defaultConfig);
|
||||
transformsConfig.plugins.push(
|
||||
buble({
|
||||
target: { 'node': 6 }
|
||||
}));
|
||||
})
|
||||
);
|
||||
|
||||
// uncomment to show dependencies [2/2]
|
||||
// transformsConfig.plugins.push(
|
||||
// rollupGrapher({
|
||||
// dest: '/dev/null',
|
||||
// verbose: true
|
||||
// })
|
||||
// );
|
||||
|
||||
export default [
|
||||
componentsConfig,
|
||||
|
||||
+18
-17
@@ -3,29 +3,30 @@ import { makeStyleTag } from './styles/styles';
|
||||
makeStyleTag(document);
|
||||
|
||||
/* Components */
|
||||
import { Abstract } from './components/d-abstract';
|
||||
import { Appendix } from './components/d-appendix';
|
||||
import { Article } from './components/d-article';
|
||||
import { Bibliography } from './components/d-bibliography';
|
||||
import { Byline } from './components/d-byline';
|
||||
import { Cite } from './components/d-cite';
|
||||
import { CitationList } from './components/d-citation-list';
|
||||
import { Code } from './components/d-code';
|
||||
import { Footnote } from './components/d-footnote';
|
||||
import { FootnoteList } from './components/d-footnote-list';
|
||||
import { FrontMatter } from './components/d-front-matter';
|
||||
import { Title } from './components/d-title';
|
||||
import { DMath } from './components/d-math';
|
||||
import { References } from './components/d-references';
|
||||
import { TOC } from './components/d-toc';
|
||||
import { Figure } from './components/d-figure';
|
||||
import { Abstract } from './components/d-abstract';
|
||||
import { Appendix } from './components/d-appendix';
|
||||
import { Article } from './components/d-article';
|
||||
import { Bibliography } from './components/d-bibliography';
|
||||
import { Byline } from './components/d-byline';
|
||||
import { Cite } from './components/d-cite';
|
||||
import { CitationList } from './components/d-citation-list';
|
||||
import { Code } from './components/d-code';
|
||||
import { Footnote } from './components/d-footnote';
|
||||
import { FootnoteList } from './components/d-footnote-list';
|
||||
import { FrontMatter } from './components/d-front-matter';
|
||||
import { Title } from './components/d-title';
|
||||
import { DMath } from './components/d-math';
|
||||
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';
|
||||
|
||||
const components = [
|
||||
Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
|
||||
Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure,
|
||||
Slider
|
||||
Slider, Interstitial
|
||||
];
|
||||
|
||||
/* Distill website specific components */
|
||||
|
||||
+1
-241
@@ -1,246 +1,6 @@
|
||||
import { Template } from '../mixins/template';
|
||||
import { Controller } from '../controller';
|
||||
|
||||
export const style =`
|
||||
d-article {
|
||||
contain: content;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 2rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-article {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* H2 */
|
||||
|
||||
|
||||
d-article .marker {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
counter-reset: section;
|
||||
grid-column: kicker;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
d-article .marker:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
d-article .marker span {
|
||||
padding: 0 3px 4px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
d-article .marker:hover span {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
d-article h2 {
|
||||
grid-column-end: page-end;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.25em;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H3 */
|
||||
|
||||
d-article h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H4 */
|
||||
|
||||
d-article h4 {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
d-article a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
d-article p,
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
font-family: georgia, serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.7em;
|
||||
-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 {
|
||||
position: relative;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
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;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article figure figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article figure.external img {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
d-article figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
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 > d-math[block],
|
||||
d-article section > d-math[block] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-article .citation {
|
||||
color: #668;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
d-include {
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-figure {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* KaTeX */
|
||||
|
||||
.katex, .katex-prerendered {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
|
||||
// export function addInferableTags(dom, frontMatter) {
|
||||
// const title = frontMatter.title;
|
||||
// if (title) {
|
||||
// const titleTag = document.querySelector()
|
||||
//
|
||||
// }
|
||||
// }
|
||||
import style from '../styles/d-article.css';
|
||||
|
||||
const isOnlyWhitespace = /^\s*$/;
|
||||
|
||||
|
||||
@@ -1,49 +1,4 @@
|
||||
export const style = `
|
||||
d-byline {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
contain: content;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.8em;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
d-byline .byline {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
d-byline p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-article d-byline a:hover {
|
||||
text-decoration: underline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-byline .authors p {
|
||||
font-weight: 600;
|
||||
}
|
||||
d-byline .affiliations {
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
import style from '../styles/d-byline.css';
|
||||
|
||||
export function bylineTemplate(frontMatter) {
|
||||
return `
|
||||
|
||||
+47
-35
@@ -4,31 +4,55 @@ import { HoverBox } from '../helpers/hover-box';
|
||||
|
||||
const T = Template('d-cite', `
|
||||
<style>
|
||||
.citation {
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
.citation-number {
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
|
||||
font-size: 75%;
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
display: inline-block;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
figcaption .citation-number {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
top: -2px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.citation {
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
}
|
||||
|
||||
.citation-number {
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif;
|
||||
font-size: 75%;
|
||||
color: hsla(206, 90%, 20%, 0.7);
|
||||
display: inline-block;
|
||||
line-height: 1.1em;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
figcaption .citation-number {
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
top: -2px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dt-hover-box {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
max-width: 700px;
|
||||
background-color: #FFF;
|
||||
opacity: 0.95;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<div class="container">
|
||||
<div id="hover-box" class="dt-hover-box"></div>
|
||||
</div>
|
||||
|
||||
<span id="citation-" class="citation">
|
||||
@@ -37,18 +61,6 @@ const T = Template('d-cite', `
|
||||
</span>
|
||||
`);
|
||||
|
||||
export function collectCitations(dom=document) {
|
||||
const citations = new Set();
|
||||
const citeTags = dom.querySelectorAll('d-cite');
|
||||
for (const tag of citeTags) {
|
||||
const keys = tag.getAttribute('key').split(',');
|
||||
for (const key of keys) {
|
||||
citations.add(key);
|
||||
}
|
||||
}
|
||||
return [...citations];
|
||||
}
|
||||
|
||||
export class Cite extends T(HTMLElement) {
|
||||
|
||||
/* Lifecycle */
|
||||
|
||||
@@ -8,14 +8,16 @@ d-math[block] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
sup {
|
||||
line-height: 1em;
|
||||
font-size: 0.75em;
|
||||
position: relative;
|
||||
top: 0;
|
||||
top: -.5em;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -23,13 +25,36 @@ span {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dt-hover-box {
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
max-width: 700px;
|
||||
background-color: #FFF;
|
||||
opacity: 0.95;
|
||||
border: 1px solid rgba(0, 0, 0, 0.25);
|
||||
padding: 8px 16px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<slot id="slot"></slot>
|
||||
<div class="container">
|
||||
<div id="hover-box" class="dt-hover-box">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sup><span id="fn-" data-hover-ref=""></span></sup>
|
||||
<sup>
|
||||
<span id="fn-" data-hover-ref=""></span>
|
||||
</sup>
|
||||
|
||||
`);
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ export function parseFrontmatter(element) {
|
||||
const content = scriptTag.textContent;
|
||||
return JSON.parse(content);
|
||||
} else {
|
||||
console.error('Distill only supoprts JSON frontmatter tags anymore; no more YAML.');
|
||||
console.error('Distill only supports JSON frontmatter tags anymore; no more YAML.');
|
||||
}
|
||||
} else {
|
||||
console.error('You added a frontmatter tag but did not provide a script tag with front matter data in it. Please take a look at our templates.');
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Template } from '../mixins/template';
|
||||
|
||||
// This overlay is not secure.
|
||||
// It is only meant as a social deterrent.
|
||||
|
||||
const T = Template('d-interstitial', `
|
||||
<style>
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: white;
|
||||
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
z-index: 2147483647 /* MaxInt32 */
|
||||
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: hsl(0,100%,40%);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
-webkit-border-radius: none;
|
||||
-moz-border-radius: none;
|
||||
-ms-border-radius: none;
|
||||
-o-border-radius: none;
|
||||
border-radius: none;
|
||||
outline: none;
|
||||
|
||||
font-size: 18px;
|
||||
background: none;
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-bottom: solid 2px #999;
|
||||
transition: border .3s;
|
||||
}
|
||||
|
||||
input[type="password"]:focus {
|
||||
border-bottom: solid 2px #333;
|
||||
}
|
||||
|
||||
input[type="password"].wrong {
|
||||
border-bottom: solid 2px hsl(0,100%,40%);
|
||||
}
|
||||
|
||||
p small {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="overlay">
|
||||
<div class="container">
|
||||
<h1>This article is in review.</h1>
|
||||
<p>Do not share this URL, or the contents of this article. Thank you!</p>
|
||||
<input id="interstitial-password-input" type="password" name="password" autofocus/>
|
||||
<p><small>Enter the password we shared with you as part of the review process to view the article.</small></p>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
export class Interstitial extends T(HTMLElement) {
|
||||
|
||||
connectedCallback() {
|
||||
const passwordInput = this.root.querySelector('#interstitial-password-input');
|
||||
passwordInput.oninput = (event) => this.passwordChanged(event);
|
||||
}
|
||||
|
||||
passwordChanged(event) {
|
||||
const entered = event.target.value;
|
||||
if (entered === this.password) {
|
||||
console.log('Correct password entered.');
|
||||
event.target.classList.add('correct');
|
||||
this.parentElement.removeChild(this);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -31,7 +31,7 @@ const T = Template('d-title', `
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="status"><span>✓ Peer Reviewed</span></div>
|
||||
<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
|
||||
<slot></slot>
|
||||
`);
|
||||
|
||||
|
||||
+8
-3
@@ -1,6 +1,6 @@
|
||||
import { FrontMatter } from './front-matter';
|
||||
import { DMath } from './components/d-math';
|
||||
import { collectCitations } from './components/d-cite';
|
||||
import { collect_citations } from './helpers/citation.js';
|
||||
import { parseFrontmatter } from './components/d-front-matter';
|
||||
import optionalComponents from './transforms/optional-components';
|
||||
|
||||
@@ -42,7 +42,7 @@ export const Controller = {
|
||||
// const [citeTag, keys] = event.detail;
|
||||
|
||||
// update citations
|
||||
frontMatter.citations = collectCitations();
|
||||
frontMatter.citations = collect_citations();
|
||||
frontMatter.citationsCollected = true;
|
||||
for (const waitingCallback of Controller.waitingOn.citations.slice()) {
|
||||
waitingCallback();
|
||||
@@ -109,6 +109,11 @@ export const Controller = {
|
||||
const data = event.detail;
|
||||
frontMatter.mergeFromYMLFrontmatter(data);
|
||||
|
||||
const interstitial = document.querySelector('d-interstitial');
|
||||
if (interstitial) {
|
||||
interstitial.password = frontMatter.password;
|
||||
}
|
||||
|
||||
const prerendered = document.body.hasAttribute('distill-prerendered');
|
||||
if (!prerendered) {
|
||||
optionalComponents(document, frontMatter);
|
||||
@@ -138,7 +143,7 @@ export const Controller = {
|
||||
Controller.listeners.onFrontMatterChanged({detail: data});
|
||||
|
||||
// console.debug('Resolving "citations" dependency due to initial DOM load.');
|
||||
frontMatter.citations = collectCitations();
|
||||
frontMatter.citations = collect_citations();
|
||||
frontMatter.citationsCollected = true;
|
||||
for (const waitingCallback of Controller.waitingOn.citations.slice()) {
|
||||
waitingCallback();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { collectCitations } from '../components/d-cite';
|
||||
import { collect_citations } from '../helpers/citation.js';
|
||||
|
||||
export default function(dom, data) {
|
||||
data.citations = collectCitations(dom);
|
||||
data.citations = collect_citations(dom);
|
||||
}
|
||||
|
||||
@@ -124,6 +124,7 @@ export class FrontMatter {
|
||||
this.description = data.description;
|
||||
this.authors = data.authors.map( (authorObject) => new Author(authorObject));
|
||||
this.katex = data.katex;
|
||||
this.password = data.password;
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
@@ -1,3 +1,15 @@
|
||||
export function collect_citations(dom=document) {
|
||||
const citations = new Set();
|
||||
const citeTags = dom.querySelectorAll('d-cite');
|
||||
for (const tag of citeTags) {
|
||||
const keys = tag.getAttribute('key').split(',');
|
||||
for (const key of keys) {
|
||||
citations.add(key);
|
||||
}
|
||||
}
|
||||
return [...citations];
|
||||
}
|
||||
|
||||
export function inline_cite_short(keys){
|
||||
function cite_string(key){
|
||||
if (key in data.bibliography){
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
function make_hover_css(pos) {
|
||||
function make_hover_css(target_node, pos) {
|
||||
const pretty = window.innerWidth > 600;
|
||||
const padding = pretty? 18 : 12;
|
||||
const outer_padding = pretty ? 18 : 0;
|
||||
const bbox = document.querySelector('body').getBoundingClientRect();
|
||||
// const bbox = document.querySelector('body').getBoundingClientRect();
|
||||
const bbox = target_node.offsetParent.getBoundingClientRect();
|
||||
let left = pos[0] - bbox.left, top = pos[1] - bbox.top;
|
||||
let width = Math.min(window.innerWidth-2*outer_padding, 648);
|
||||
left = Math.min(left, window.innerWidth-width-outer_padding);
|
||||
@@ -77,8 +78,8 @@ export class HoverBox {
|
||||
|
||||
show(position) {
|
||||
this.visible = true;
|
||||
const css = make_hover_css(position);
|
||||
this.div.setAttribute('style', css );
|
||||
// const css = make_hover_css(this.triggerElement, position);
|
||||
this.div.setAttribute('style', 'display: block;' );
|
||||
}
|
||||
|
||||
showAtNode(node) {
|
||||
@@ -88,7 +89,7 @@ export class HoverBox {
|
||||
|
||||
hide() {
|
||||
this.visible = false;
|
||||
this.div.setAttribute('style', 'display:none');
|
||||
this.div.setAttribute('style', 'display: none;');
|
||||
this.stopTimeout();
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
d-article {
|
||||
contain: content;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 2rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-article {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* H2 */
|
||||
|
||||
|
||||
d-article .marker {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
counter-reset: section;
|
||||
grid-column: kicker;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
d-article .marker:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
d-article .marker span {
|
||||
padding: 0 3px 4px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
d-article .marker:hover span {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
d-article h2 {
|
||||
grid-column-end: page-end;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.25em;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H3 */
|
||||
|
||||
d-article h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H4 */
|
||||
|
||||
d-article h4 {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
d-article a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
d-article p,
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
/*font-family: georgia, serif;*/
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.7em;
|
||||
-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 {
|
||||
grid-column: screen;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
d-article span.equation-mimic {
|
||||
font-family: georgia;
|
||||
font-size: 115%;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
d-article > d-code,
|
||||
d-article section > d-code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-article > d-math[block],
|
||||
d-article section > d-math[block] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-article .citation {
|
||||
color: #668;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
d-include {
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-figure {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* KaTeX */
|
||||
|
||||
.katex, .katex-prerendered {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
d-byline {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
contain: content;
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.8em;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
d-byline .byline {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
font-size: 0.55rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
d-byline p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
d-byline a,
|
||||
d-article d-byline a {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-decoration: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-article d-byline a:hover {
|
||||
text-decoration: underline;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
d-byline .authors p {
|
||||
font-weight: 600;
|
||||
}
|
||||
d-byline .affiliations {
|
||||
|
||||
}
|
||||
@@ -52,3 +52,48 @@ pre {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
/* Figure */
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
figure svg text,
|
||||
figure svg tspan {
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
figure figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
figure.external img {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
figure figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import base from './styles-base.css';
|
||||
import layout from './styles-layout.css';
|
||||
import print from './styles-print.css';
|
||||
import { style as byline } from '../components/d-byline';
|
||||
import { style as article } from '../components/d-article';
|
||||
import byline from './d-byline.css';
|
||||
import article from './d-article.css';
|
||||
import math from './d-math.css';
|
||||
|
||||
export const styles = base + layout + byline + article + math + print;
|
||||
|
||||
@@ -9,7 +9,14 @@
|
||||
|
||||
export default function(dom, data) {
|
||||
const article = dom.querySelector('d-article');
|
||||
const abstract = dom.querySelector('d-abstract');
|
||||
// const abstract = dom.querySelector('d-abstract');
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
// let h1 = dom.querySelector('h1');
|
||||
// if (h1) {
|
||||
@@ -17,18 +24,18 @@ export default function(dom, data) {
|
||||
// data.title = h1.textContent;
|
||||
// }
|
||||
// } else {
|
||||
if (data.title) {
|
||||
let headline = dom.createElement('d-title');
|
||||
let h1 = dom.createElement('h1');
|
||||
headline.appendChild(h1);
|
||||
h1.textContent = data.title;
|
||||
abstract.parentNode.insertBefore(headline, abstract);
|
||||
}
|
||||
// if (data.description) {
|
||||
// const h2 = dom.createElement('h2');
|
||||
// h2.textContent = data.description;
|
||||
// article.insertBefore(h2, h1.nextSibling);
|
||||
// }
|
||||
// if (data.title) {
|
||||
// let headline = dom.createElement('d-title');
|
||||
// let h1 = dom.createElement('h1');
|
||||
// headline.appendChild(h1);
|
||||
// h1.textContent = data.title;
|
||||
// abstract.parentNode.insertBefore(headline, abstract);
|
||||
// }
|
||||
// if (data.description) {
|
||||
// const h2 = dom.createElement('h2');
|
||||
// h2.textContent = data.description;
|
||||
// article.insertBefore(h2, h1.nextSibling);
|
||||
// }
|
||||
// }
|
||||
|
||||
let byline = dom.querySelector('d-byline');
|
||||
|
||||
Reference in New Issue
Block a user