diff --git a/.gitignore b/.gitignore index eb30721..ac2ab45 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,6 @@ jspm_packages examples/fonts dist article-rendered.html + +# dependency graph +rollup-grapher.html diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..97d624f --- /dev/null +++ b/.npmignore @@ -0,0 +1,9 @@ +src +build +.editorconfig +.eslintrc.json +.gitignore +.travis.yml +rollup.config.dev.js +rollup.config.js +yarn-error.log diff --git a/bin/render b/bin/render.js similarity index 56% rename from bin/render rename to bin/render.js index 1b9f247..6e893ec 100755 --- a/bin/render +++ b/bin/render.js @@ -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 to input file.') + .version('1.0.0') + .description('Pre-renders distill articles for publication.') + .usage('-i -o ') + .option('-i, --input-path ', 'path to input HTML file.') + .option('-o, --output-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); diff --git a/package-lock.json b/package-lock.json index 6d6818c..932eedd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 76d8ece..2ef483d 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/rollup.config.dev.js b/rollup.config.dev.js index ead6872..4347e9d 100644 --- a/rollup.config.dev.js +++ b/rollup.config.dev.js @@ -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, diff --git a/src/components.js b/src/components.js index 8e38cec..32eb8f0 100644 --- a/src/components.js +++ b/src/components.js @@ -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 */ diff --git a/src/components/d-article.js b/src/components/d-article.js index 1ebf3ee..dc2c305 100644 --- a/src/components/d-article.js +++ b/src/components/d-article.js @@ -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*$/; diff --git a/src/components/d-byline.js b/src/components/d-byline.js index dd8d5e8..c518adc 100644 --- a/src/components/d-byline.js +++ b/src/components/d-byline.js @@ -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 ` diff --git a/src/components/d-cite.js b/src/components/d-cite.js index c3d18da..7f4b299 100644 --- a/src/components/d-cite.js +++ b/src/components/d-cite.js @@ -4,31 +4,55 @@ import { HoverBox } from '../helpers/hover-box'; const T = Template('d-cite', ` -
+
+
@@ -37,18 +61,6 @@ const T = Template('d-cite', ` `); -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 */ diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js index 6ea6bda..36471e1 100644 --- a/src/components/d-footnote.js +++ b/src/components/d-footnote.js @@ -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); +} + -
- +
+
+ +
- + + + `); diff --git a/src/components/d-front-matter.js b/src/components/d-front-matter.js index 7a67bd2..e244c6b 100644 --- a/src/components/d-front-matter.js +++ b/src/components/d-front-matter.js @@ -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.'); diff --git a/src/components/d-interstitial.js b/src/components/d-interstitial.js new file mode 100644 index 0000000..c980424 --- /dev/null +++ b/src/components/d-interstitial.js @@ -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', ` + + +
+
+

This article is in review.

+

Do not share this URL, or the contents of this article. Thank you!

+ +

Enter the password we shared with you as part of the review process to view the article.

+
+
+`); + +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); + } + } + +} diff --git a/src/components/d-title.js b/src/components/d-title.js index a7f3747..bdc559d 100644 --- a/src/components/d-title.js +++ b/src/components/d-title.js @@ -31,7 +31,7 @@ const T = Template('d-title', ` } -
✓ Peer Reviewed
+ `); diff --git a/src/controller.js b/src/controller.js index e0a7ea8..20ddee0 100644 --- a/src/controller.js +++ b/src/controller.js @@ -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(); diff --git a/src/extractors/citations.js b/src/extractors/citations.js index 41f20fe..ce2a504 100644 --- a/src/extractors/citations.js +++ b/src/extractors/citations.js @@ -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); } diff --git a/src/front-matter.js b/src/front-matter.js index dc33cfe..eed187e 100644 --- a/src/front-matter.js +++ b/src/front-matter.js @@ -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; } // diff --git a/src/helpers/citation.js b/src/helpers/citation.js index 8062b6f..bedbc76 100644 --- a/src/helpers/citation.js +++ b/src/helpers/citation.js @@ -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){ diff --git a/src/helpers/hover-box.js b/src/helpers/hover-box.js index be19f57..d59d5f3 100644 --- a/src/helpers/hover-box.js +++ b/src/helpers/hover-box.js @@ -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(); } diff --git a/src/styles/d-article.css b/src/styles/d-article.css new file mode 100644 index 0000000..883516c --- /dev/null +++ b/src/styles/d-article.css @@ -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; +} diff --git a/src/styles/d-byline.css b/src/styles/d-byline.css new file mode 100644 index 0000000..4fd0935 --- /dev/null +++ b/src/styles/d-byline.css @@ -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 { + +} diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css index 9eee0d2..8a184cf 100644 --- a/src/styles/styles-base.css +++ b/src/styles/styles-base.css @@ -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); +} diff --git a/src/styles/styles.js b/src/styles/styles.js index 6409aea..5206d46 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -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; diff --git a/src/transforms/optional-components.js b/src/transforms/optional-components.js index be99ffb..bbe30de 100644 --- a/src/transforms/optional-components.js +++ b/src/transforms/optional-components.js @@ -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');