diff --git a/bin/render b/bin/render index 1619718..3702d39 100755 --- a/bin/render +++ b/bin/render @@ -1,9 +1,8 @@ #!/usr/bin/env node -const fs = require('fs'); -const jsdom = require('jsdom').jsdom; -const serialize = require('jsdom').serializeDocument; const program = require('commander'); +const jsdom = require('jsdom'); +const { JSDOM } = jsdom; const transforms = require('../dist/transforms.v2.js'); program @@ -11,10 +10,19 @@ program .option('-i, --input ', 'path to input file.') .parse(process.argv); -const htmlString = fs.readFileSync(program.input, 'utf8'); -const data = new transforms.FrontMatter; -const dom = jsdom(htmlString, {features: {ProcessExternalResources: false, FetchExternalResources: false, runScripts: 'dangerously'}}); -transforms.render(dom, data); -transforms.distillify(dom, data); -const transformedHtml = serialize(dom); -process.stdout.write(transformedHtml); +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 => { + const window = dom.window; + const document = window.document; + + const data = new transforms.FrontMatter; + transforms.render(document, data); + transforms.distillify(document, data); + + const transformedHtml = dom.serialize(); + process.stdout.write(transformedHtml); +}).catch(console.error); diff --git a/package-lock.json b/package-lock.json index 5a99ae7..01f369e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -114,6 +114,11 @@ "repeat-string": "1.6.1" } }, + "alphanum-sort": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz", + "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=" + }, "amdefine": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", @@ -129,14 +134,12 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "anymatch": { "version": "1.3.2", @@ -170,7 +173,6 @@ "version": "1.0.9", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz", "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=", - "dev": true, "requires": { "sprintf-js": "1.0.3" } @@ -277,6 +279,19 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, + "autoprefixer": { + "version": "6.7.7", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-6.7.7.tgz", + "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=", + "requires": { + "browserslist": "1.7.7", + "caniuse-db": "1.0.30000721", + "normalize-range": "0.1.2", + "num2fraction": "1.2.2", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, "aws-sign2": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz", @@ -869,6 +884,15 @@ "pako": "0.2.9" } }, + "browserslist": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz", + "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=", + "requires": { + "caniuse-db": "1.0.30000721", + "electron-to-chromium": "1.3.18" + } + }, "buble": { "version": "0.15.2", "resolved": "https://registry.npmjs.org/buble/-/buble-0.15.2.tgz", @@ -957,6 +981,22 @@ "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=", "dev": true }, + "caniuse-api": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", + "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=", + "requires": { + "browserslist": "1.7.7", + "caniuse-db": "1.0.30000721", + "lodash.memoize": "4.1.2", + "lodash.uniq": "4.5.0" + } + }, + "caniuse-db": { + "version": "1.0.30000721", + "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000721.tgz", + "integrity": "sha1-zcUu/o+C3RORZhW3job3BOzmGAI=" + }, "caseless": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", @@ -987,7 +1027,6 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, "requires": { "ansi-styles": "2.2.1", "escape-string-regexp": "1.0.5", @@ -1029,6 +1068,14 @@ "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==", "dev": true }, + "clap": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/clap/-/clap-1.2.0.tgz", + "integrity": "sha1-WckP4+E3EEdG/xlGmiemNP9oyFc=", + "requires": { + "chalk": "1.1.3" + } + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -1078,26 +1125,41 @@ "clone": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz", - "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=", - "dev": true, - "optional": true + "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=" }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=" }, + "coa": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", + "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", + "requires": { + "q": "1.5.0" + } + }, "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", "dev": true }, + "color": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/color/-/color-0.11.4.tgz", + "integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=", + "requires": { + "clone": "1.0.2", + "color-convert": "1.9.0", + "color-string": "0.3.0" + } + }, "color-convert": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz", "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=", - "dev": true, "requires": { "color-name": "1.1.3" } @@ -1105,14 +1167,30 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "color-string": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz", + "integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=", + "requires": { + "color-name": "1.1.3" + } + }, + "colormin": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz", + "integrity": "sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=", + "requires": { + "color": "0.11.4", + "css-color-names": "0.0.4", + "has": "1.0.1" + } }, "colors": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz", - "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=", - "dev": true + "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=" }, "combined-stream": { "version": "1.0.5", @@ -1269,6 +1347,66 @@ "randombytes": "2.0.5" } }, + "css-color-names": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=" + }, + "cssnano": { + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-3.10.0.tgz", + "integrity": "sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=", + "requires": { + "autoprefixer": "6.7.7", + "decamelize": "1.2.0", + "defined": "1.0.0", + "has": "1.0.1", + "object-assign": "4.1.1", + "postcss": "5.2.17", + "postcss-calc": "5.3.1", + "postcss-colormin": "2.2.2", + "postcss-convert-values": "2.6.1", + "postcss-discard-comments": "2.0.4", + "postcss-discard-duplicates": "2.1.0", + "postcss-discard-empty": "2.1.0", + "postcss-discard-overridden": "0.1.1", + "postcss-discard-unused": "2.2.3", + "postcss-filter-plugins": "2.0.2", + "postcss-merge-idents": "2.1.7", + "postcss-merge-longhand": "2.0.2", + "postcss-merge-rules": "2.1.2", + "postcss-minify-font-values": "1.0.5", + "postcss-minify-gradients": "1.0.5", + "postcss-minify-params": "1.2.2", + "postcss-minify-selectors": "2.1.1", + "postcss-normalize-charset": "1.1.1", + "postcss-normalize-url": "3.0.8", + "postcss-ordered-values": "2.2.3", + "postcss-reduce-idents": "2.4.0", + "postcss-reduce-initial": "1.0.1", + "postcss-reduce-transforms": "1.0.4", + "postcss-svgo": "2.1.6", + "postcss-unique-selectors": "2.0.2", + "postcss-value-parser": "3.3.0", + "postcss-zindex": "2.2.0" + } + }, + "csso": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", + "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", + "requires": { + "clap": "1.2.0", + "source-map": "0.5.7" + }, + "dependencies": { + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + } + } + }, "cssom": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz", @@ -1328,8 +1466,7 @@ "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", - "dev": true + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" }, "deep-eql": { "version": "0.1.3", @@ -1370,6 +1507,11 @@ "clone": "1.0.2" } }, + "defined": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz", + "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=" + }, "del": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz", @@ -1471,6 +1613,11 @@ "jsbn": "0.1.1" } }, + "electron-to-chromium": { + "version": "1.3.18", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz", + "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw=" + }, "elliptic": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.4.0.tgz", @@ -1525,8 +1672,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "escodegen": { "version": "1.8.1", @@ -1844,6 +1990,11 @@ "write": "0.2.1" } }, + "flatten": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", + "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -2814,6 +2965,11 @@ "minimatch": "3.0.4" } }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, "functional-red-black-tree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz", @@ -2995,11 +3151,18 @@ "har-schema": "1.0.5" } }, + "has": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz", + "integrity": "sha1-hGFzP1OLCDfJNh45qauelwTcLyg=", + "requires": { + "function-bind": "1.1.1" + } + }, "has-ansi": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -3087,6 +3250,11 @@ "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==", "dev": true }, + "html-comment-regex": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz", + "integrity": "sha1-ZouTd26q5V696POtRkswekljYl4=" + }, "html-encoding-sniffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz", @@ -3134,6 +3302,11 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=" + }, "indexof": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", @@ -3256,6 +3429,11 @@ "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", "dev": true }, + "is-absolute-url": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz", + "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=" + }, "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", @@ -3370,6 +3548,11 @@ "path-is-inside": "1.0.2" } }, + "is-plain-obj": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz", + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=" + }, "is-posix-bracket": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz", @@ -3397,6 +3580,14 @@ "tryit": "1.0.3" } }, + "is-svg": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-2.1.0.tgz", + "integrity": "sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=", + "requires": { + "html-comment-regex": "1.1.1" + } + }, "is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", @@ -3434,6 +3625,11 @@ "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" }, + "js-base64": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz", + "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=" + }, "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", @@ -3471,9 +3667,9 @@ "dev": true }, "jsdom": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-9.12.0.tgz", - "integrity": "sha1-6MVG//ywbADUgzyoRBD+1/igl9Q=", + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.2.0.tgz", + "integrity": "sha512-+5wd6vJuh/Evw3wkmCuKXKibDd5RS7PYZjKaP4s2Hj5W7tvmbuFuaDN4erbH07VznTBFcK+lcsrGVnP6EugXow==", "dev": true, "requires": { "abab": "1.0.3", @@ -3486,22 +3682,29 @@ "escodegen": "1.8.1", "html-encoding-sniffer": "1.0.1", "nwmatcher": "1.4.1", - "parse5": "1.5.1", + "parse5": "3.0.2", + "pn": "1.0.0", "request": "2.81.0", + "request-promise-native": "1.0.4", "sax": "1.2.4", "symbol-tree": "3.2.2", "tough-cookie": "2.3.2", "webidl-conversions": "4.0.1", "whatwg-encoding": "1.0.1", - "whatwg-url": "4.8.0", + "whatwg-url": "6.1.0", "xml-name-validator": "2.0.1" }, "dependencies": { - "parse5": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", - "integrity": "sha1-m387DeMr543CQBsXVzzK8Pb1nZQ=", - "dev": true + "whatwg-url": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.1.0.tgz", + "integrity": "sha1-X8gnm5PXVIO5ztiyYjmFSEehhXg=", + "dev": true, + "requires": { + "lodash.sortby": "4.7.0", + "tr46": "0.0.3", + "webidl-conversions": "4.0.1" + } } } }, @@ -3764,12 +3967,28 @@ "lodash.isarray": "3.0.4" } }, + "lodash.memoize": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", + "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=" + }, "lodash.some": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz", "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=", "dev": true }, + "lodash.sortby": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz", + "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=", + "dev": true + }, + "lodash.uniq": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", + "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=" + }, "longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -3795,6 +4014,11 @@ "yallist": "2.1.2" } }, + "macaddress": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/macaddress/-/macaddress-0.2.8.tgz", + "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI=" + }, "magic-string": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.19.1.tgz", @@ -3815,6 +4039,11 @@ "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.0.tgz", "integrity": "sha1-9WHncJ/5oQW4XMYsa47nwVvyTzE=" }, + "math-expression-evaluator": { + "version": "1.2.17", + "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", + "integrity": "sha1-3oGf282E3M2PrlnGrreWFbnSZqw=" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -3914,14 +4143,12 @@ "minimist": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" }, "mkdirp": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "dev": true, "requires": { "minimist": "0.0.8" } @@ -4112,6 +4339,22 @@ "remove-trailing-separator": "1.0.2" } }, + "normalize-range": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", + "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=" + }, + "normalize-url": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz", + "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=", + "requires": { + "object-assign": "4.1.1", + "prepend-http": "1.0.4", + "query-string": "4.3.4", + "sort-keys": "1.1.2" + } + }, "npmlog": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", @@ -4125,6 +4368,11 @@ "set-blocking": "2.0.0" } }, + "num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=" + }, "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", @@ -4144,8 +4392,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object.omit": { "version": "2.0.1", @@ -4374,11 +4621,303 @@ "resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz", "integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k=" }, + "postcss": { + "version": "5.2.17", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", + "integrity": "sha1-z09Ze4ZNZcikkrLqvp1wbIecOIs=", + "requires": { + "chalk": "1.1.3", + "js-base64": "2.1.9", + "source-map": "0.5.7", + "supports-color": "3.2.3" + }, + "dependencies": { + "has-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" + }, + "source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "1.0.0" + } + } + } + }, + "postcss-calc": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-5.3.1.tgz", + "integrity": "sha1-d7rnypKK2FcW4v2kLyYb98HWW14=", + "requires": { + "postcss": "5.2.17", + "postcss-message-helpers": "2.0.0", + "reduce-css-calc": "1.3.0" + } + }, + "postcss-colormin": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-2.2.2.tgz", + "integrity": "sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=", + "requires": { + "colormin": "1.1.2", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-convert-values": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz", + "integrity": "sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=", + "requires": { + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-discard-comments": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz", + "integrity": "sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-discard-duplicates": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz", + "integrity": "sha1-uavye4isGIFYpesSq8riAmO5GTI=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-discard-empty": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz", + "integrity": "sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-discard-overridden": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz", + "integrity": "sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-discard-unused": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz", + "integrity": "sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=", + "requires": { + "postcss": "5.2.17", + "uniqs": "2.0.0" + } + }, + "postcss-filter-plugins": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz", + "integrity": "sha1-bYWGJTTXNaxCDkqFgG4fXUKG2Ew=", + "requires": { + "postcss": "5.2.17", + "uniqid": "4.1.1" + } + }, + "postcss-merge-idents": { + "version": "2.1.7", + "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz", + "integrity": "sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=", + "requires": { + "has": "1.0.1", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-merge-longhand": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz", + "integrity": "sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-merge-rules": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz", + "integrity": "sha1-0d9d+qexrMO+VT8OnhDofGG19yE=", + "requires": { + "browserslist": "1.7.7", + "caniuse-api": "1.6.1", + "postcss": "5.2.17", + "postcss-selector-parser": "2.2.3", + "vendors": "1.0.1" + } + }, + "postcss-message-helpers": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz", + "integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=" + }, + "postcss-minify-font-values": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz", + "integrity": "sha1-S1jttWZB66fIR0qzUmyv17vey2k=", + "requires": { + "object-assign": "4.1.1", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-minify-gradients": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz", + "integrity": "sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=", + "requires": { + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-minify-params": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz", + "integrity": "sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=", + "requires": { + "alphanum-sort": "1.0.2", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0", + "uniqs": "2.0.0" + } + }, + "postcss-minify-selectors": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz", + "integrity": "sha1-ssapjAByz5G5MtGkllCBFDEXNb8=", + "requires": { + "alphanum-sort": "1.0.2", + "has": "1.0.1", + "postcss": "5.2.17", + "postcss-selector-parser": "2.2.3" + } + }, + "postcss-normalize-charset": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz", + "integrity": "sha1-757nEhLX/nWceO0WL2HtYrXLk/E=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-normalize-url": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz", + "integrity": "sha1-EI90s/L82viRov+j6kWSJ5/HgiI=", + "requires": { + "is-absolute-url": "2.1.0", + "normalize-url": "1.9.1", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-ordered-values": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz", + "integrity": "sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=", + "requires": { + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-reduce-idents": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz", + "integrity": "sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=", + "requires": { + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-reduce-initial": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz", + "integrity": "sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=", + "requires": { + "postcss": "5.2.17" + } + }, + "postcss-reduce-transforms": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz", + "integrity": "sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=", + "requires": { + "has": "1.0.1", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0" + } + }, + "postcss-selector-parser": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz", + "integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=", + "requires": { + "flatten": "1.0.2", + "indexes-of": "1.0.1", + "uniq": "1.0.1" + } + }, + "postcss-svgo": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz", + "integrity": "sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=", + "requires": { + "is-svg": "2.1.0", + "postcss": "5.2.17", + "postcss-value-parser": "3.3.0", + "svgo": "0.7.2" + } + }, + "postcss-unique-selectors": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz", + "integrity": "sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=", + "requires": { + "alphanum-sort": "1.0.2", + "postcss": "5.2.17", + "uniqs": "2.0.0" + } + }, + "postcss-value-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=" + }, + "postcss-zindex": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-2.2.0.tgz", + "integrity": "sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=", + "requires": { + "has": "1.0.1", + "postcss": "5.2.17", + "uniqs": "2.0.0" + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=" }, + "prepend-http": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", + "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" + }, "preserve": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz", @@ -4448,11 +4987,25 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" }, + "q": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/q/-/q-1.5.0.tgz", + "integrity": "sha1-3QG6ydBtMObyGa7LglPunr3DCPE=" + }, "qs": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz", "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=" }, + "query-string": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz", + "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=", + "requires": { + "object-assign": "4.1.1", + "strict-uri-encode": "1.1.0" + } + }, "querystring": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", @@ -4593,6 +5146,38 @@ "set-immediate-shim": "1.0.1" } }, + "reduce-css-calc": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz", + "integrity": "sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=", + "requires": { + "balanced-match": "0.4.2", + "math-expression-evaluator": "1.2.17", + "reduce-function-call": "1.0.2" + }, + "dependencies": { + "balanced-match": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", + "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=" + } + } + }, + "reduce-function-call": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/reduce-function-call/-/reduce-function-call-1.0.2.tgz", + "integrity": "sha1-WiAL+S4ON3UXUv5FsKszD9S2vpk=", + "requires": { + "balanced-match": "0.4.2" + }, + "dependencies": { + "balanced-match": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz", + "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=" + } + } + }, "regenerator-runtime": { "version": "0.10.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", @@ -5026,6 +5611,14 @@ "hoek": "2.16.3" } }, + "sort-keys": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz", + "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=", + "requires": { + "is-plain-obj": "1.1.0" + } + }, "source-list-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.0.tgz", @@ -5082,8 +5675,7 @@ "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", - "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", - "dev": true + "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=" }, "sshpk": { "version": "1.13.1", @@ -5135,6 +5727,11 @@ "xtend": "4.0.1" } }, + "strict-uri-encode": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz", + "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=" + }, "string_decoder": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", @@ -5180,7 +5777,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { "ansi-regex": "2.1.1" } @@ -5203,8 +5799,32 @@ "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + }, + "svgo": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", + "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", + "requires": { + "coa": "1.0.4", + "colors": "1.1.2", + "csso": "2.3.2", + "js-yaml": "3.7.0", + "mkdirp": "0.5.1", + "sax": "1.2.4", + "whet.extend": "0.9.9" + }, + "dependencies": { + "js-yaml": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", + "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "requires": { + "argparse": "1.0.9", + "esprima": "2.7.3" + } + } + } }, "symbol-tree": { "version": "3.2.2", @@ -5407,6 +6027,24 @@ "dev": true, "optional": true }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=" + }, + "uniqid": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-4.1.1.tgz", + "integrity": "sha1-iSIN32t1GuUrX3JISGNShZa7hME=", + "requires": { + "macaddress": "0.2.8" + } + }, + "uniqs": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz", + "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=" + }, "universalify": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz", @@ -5460,6 +6098,11 @@ "spdx-expression-parse": "1.0.4" } }, + "vendors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.1.tgz", + "integrity": "sha1-N61zyO5Bf7PVgOeFMSMH0nSEfyI=" + }, "verror": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", @@ -5666,6 +6309,11 @@ } } }, + "whet.extend": { + "version": "0.9.9", + "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz", + "integrity": "sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=" + }, "which": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz", diff --git a/package.json b/package.json index 0101cdd..e321c50 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "eslint": "^4.3.0", "eslint-config-google": "^0.9.1", "js-yaml": "^3.7.0", - "jsdom": "^9.10.0", + "jsdom": "^11.2.0", "marked": "^0.3.6", "mocha": "^3.2.0", "prismjs": "^1.6.0", diff --git a/src/components/d-math.js b/src/components/d-math.js index 3a9b691..1662b06 100644 --- a/src/components/d-math.js +++ b/src/components/d-math.js @@ -2,8 +2,11 @@ import { Mutating } from '../mixins/mutating.js'; import { Template } from '../mixins/template.js'; -const katexJSURL = 'https://distill.pub/third-party/katex/katex.min.js'; -const katexCSSTag = ''; +// 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 = ''; const T = Template('d-math', ` ${katexCSSTag} @@ -38,38 +28,66 @@ ${katexCSSTag} `); -// DMath, not Math, because that's a JS built-in +// DMath, not Math, because that would conflict with the JS built-in export class DMath extends Mutating(T(HTMLElement)) { + static set katexOptions(options) { + DMath._katexOptions = options; + if (DMath.katexOptions.delimiters && !DMath.katexAdded) { + DMath.addKatex(); + } + } + + static get katexOptions() { + if (!DMath._katexOptions) { + DMath._katexOptions = {}; + } + return DMath._katexOptions; + } + static katexLoadedCallback() { + // render all d-math tags const mathTags = document.querySelectorAll('d-math'); for (const mathTag of mathTags) { mathTag.renderContent(); } + // transform inline delimited math to d-math tags + if (DMath.katexOptions.delimiters) { + const article = document.querySelector('d-article'); + renderMathInElement(article, DMath.katexOptions); + } + } + + static addKatex() { + // script tag has to be created to work properly + const scriptTag = document.createElement('script'); + scriptTag.src = katexJSURL; + scriptTag.async = true; + scriptTag.onload = DMath.katexLoadedCallback; + scriptTag.crossorigin = 'anonymous'; + document.head.appendChild(scriptTag); + // css tag can use this convenience function + document.head.insertAdjacentHTML('beforeend', katexCSSTag); + + DMath.katexAdded = true; + } + + get options() { + const localOptions = { displayMode: this.hasAttribute('block') }; + return Object.assign(localOptions, DMath.katexOptions); } connectedCallback() { super.connectedCallback(); if (!DMath.katexAdded) { - // script tag has to be created to work properly - const scriptTag = document.createElement('script'); - scriptTag.src = katexJSURL; - scriptTag.async = true; - scriptTag.onload = DMath.katexLoadedCallback; - scriptTag.crossorigin = 'anonymous'; - document.head.appendChild(scriptTag); - // css tag can use this convenience function - document.head.insertAdjacentHTML('beforeend', katexCSSTag); - - DMath.katexAdded = true; + DMath.addKatex(); } } renderContent() { if (typeof katex !== 'undefined') { - const options = { displayMode: this.hasAttribute('block') }; const container = this.root.querySelector('#katex-container'); - katex.render(this.textContent, container, options); + katex.render(this.textContent, container, this.options); } } diff --git a/src/controller.js b/src/controller.js index 831cb35..6b6f7e2 100644 --- a/src/controller.js +++ b/src/controller.js @@ -1,4 +1,5 @@ import { FrontMatter } from './front-matter'; +import { DMath } from './components/d-math'; import { collectCitations } from './components/d-cite'; import { parseFrontmatter } from './components/d-front-matter'; @@ -116,6 +117,10 @@ export const Controller = { if (byline && !byline.getAttribute('prerendered')) { byline.frontMatter = frontMatter; } + + if (data.katex) { + DMath.katexOptions = data.katex; + } }, DOMContentLoaded() { diff --git a/src/front-matter.js b/src/front-matter.js index bcab128..dc33cfe 100644 --- a/src/front-matter.js +++ b/src/front-matter.js @@ -96,6 +96,8 @@ export class FrontMatter { // issue: 9, this.publishedDate = new Date(); + this.katex = {}; + // // Assigned from publishing process // @@ -121,6 +123,7 @@ export class FrontMatter { this.publishedDate = new Date(data.published); this.description = data.description; this.authors = data.authors.map( (authorObject) => new Author(authorObject)); + this.katex = data.katex; } // diff --git a/src/helpers/katex-auto-render.js b/src/helpers/katex-auto-render.js new file mode 100644 index 0000000..e9e5b7b --- /dev/null +++ b/src/helpers/katex-auto-render.js @@ -0,0 +1,204 @@ +// This is a straight concatenation of code from KaTeX's contrib folder, +// but we aren't using some of their helpers that don't work well outside a browser environment. + +/*global katex */ + +const findEndOfMath = function(delimiter, text, startIndex) { + // Adapted from + // https://github.com/Khan/perseus/blob/master/src/perseus-markdown.jsx + let index = startIndex; + let braceLevel = 0; + + const delimLength = delimiter.length; + + while (index < text.length) { + const character = text[index]; + + if (braceLevel <= 0 && + text.slice(index, index + delimLength) === delimiter) { + return index; + } else if (character === '\\') { + index++; + } else if (character === '{') { + braceLevel++; + } else if (character === '}') { + braceLevel--; + } + + index++; + } + + return -1; +}; + +const splitAtDelimiters = function(startData, leftDelim, rightDelim, display) { + const finalData = []; + + for (let i = 0; i < startData.length; i++) { + if (startData[i].type === 'text') { + const text = startData[i].data; + + let lookingForLeft = true; + let currIndex = 0; + let nextIndex; + + nextIndex = text.indexOf(leftDelim); + if (nextIndex !== -1) { + currIndex = nextIndex; + finalData.push({ + type: 'text', + data: text.slice(0, currIndex), + }); + lookingForLeft = false; + } + + while (true) { // eslint-disable-line no-constant-condition + if (lookingForLeft) { + nextIndex = text.indexOf(leftDelim, currIndex); + if (nextIndex === -1) { + break; + } + + finalData.push({ + type: 'text', + data: text.slice(currIndex, nextIndex), + }); + + currIndex = nextIndex; + } else { + nextIndex = findEndOfMath( + rightDelim, + text, + currIndex + leftDelim.length); + if (nextIndex === -1) { + break; + } + + finalData.push({ + type: 'math', + data: text.slice( + currIndex + leftDelim.length, + nextIndex), + rawData: text.slice( + currIndex, + nextIndex + rightDelim.length), + display: display, + }); + + currIndex = nextIndex + rightDelim.length; + } + + lookingForLeft = !lookingForLeft; + } + + finalData.push({ + type: 'text', + data: text.slice(currIndex), + }); + } else { + finalData.push(startData[i]); + } + } + + return finalData; +}; + + +const splitWithDelimiters = function(text, delimiters) { + let data = [{type: 'text', data: text}]; + for (let i = 0; i < delimiters.length; i++) { + const delimiter = delimiters[i]; + data = splitAtDelimiters( + data, delimiter.left, delimiter.right, + delimiter.display || false); + } + return data; +}; + +/* Note: optionsCopy is mutated by this method. If it is ever exposed in the + * API, we should copy it before mutating. + */ +const renderMathInText = function(text, optionsCopy) { + const data = splitWithDelimiters(text, optionsCopy.delimiters); + const fragment = document.createDocumentFragment(); + + for (let i = 0; i < data.length; i++) { + if (data[i].type === 'text') { + fragment.appendChild(document.createTextNode(data[i].data)); + } else { + const tag = document.createElement('d-math'); + const math = data[i].data; + // Override any display mode defined in the settings with that + // defined by the text itself + optionsCopy.displayMode = data[i].display; + try { + tag.textContent = math; + if (optionsCopy.displayMode) { + tag.setAttribute('block', ''); + } + } catch (e) { + if (!(e instanceof katex.ParseError)) { + throw e; + } + optionsCopy.errorCallback( + 'KaTeX auto-render: Failed to parse `' + data[i].data + + '` with ', + e + ); + fragment.appendChild(document.createTextNode(data[i].rawData)); + continue; + } + fragment.appendChild(tag); + } + } + + return fragment; +}; + +const renderElem = function(elem, optionsCopy) { + for (let i = 0; i < elem.childNodes.length; i++) { + const childNode = elem.childNodes[i]; + if (childNode.nodeType === 3) { + // Text node + const frag = renderMathInText(childNode.textContent, optionsCopy); + i += frag.childNodes.length - 1; + elem.replaceChild(frag, childNode); + } else if (childNode.nodeType === 1) { + // Element node + const shouldRender = optionsCopy.ignoredTags.indexOf( + childNode.nodeName.toLowerCase()) === -1; + + if (shouldRender) { + renderElem(childNode, optionsCopy); + } + } + // Otherwise, it's something else, and ignore it. + } +}; + +const defaultAutoRenderOptions = { + delimiters: [ + {left: '$$', right: '$$', display: true}, + {left: '\\[', right: '\\]', display: true}, + {left: '\\(', right: '\\)', display: false}, + // LaTeX uses this, but it ruins the display of normal `$` in text: + // {left: '$', right: '$', display: false}, + ], + + ignoredTags: [ + 'script', 'noscript', 'style', 'textarea', 'pre', 'code', 'svg', + ], + + errorCallback: function(msg, err) { + console.error(msg, err); + }, +}; + +export const renderMathInElement = function(elem, options) { + if (!elem) { + throw new Error('No element provided to render'); + } + + const optionsCopy = Object.assign({}, defaultAutoRenderOptions, options); + renderElem(elem, optionsCopy); +}; diff --git a/src/styles/styles-article.css b/src/styles/styles-article.css index 273f59a..0c21ce1 100644 --- a/src/styles/styles-article.css +++ b/src/styles/styles-article.css @@ -185,3 +185,22 @@ d-figure { overflow: hidden; height: 300px; } + +/* KaTeX */ + +d-article .katex-display { + text-align: left; + padding: 8px 0 8px 0; + margin: 20px 0; +} + +d-article .katex { + -webkit-font-smoothing: antialiased; + color: rgba(0, 0, 0, 0.8); + font-size: 1.18em; +} + +.katex, .katex-prerendered { + contain: content; + display: inline-block; +} diff --git a/src/styles/styles.js b/src/styles/styles.js index b301def..98bde29 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -5,14 +5,18 @@ import print from './styles-print.css'; import { style as byline } from '../components/d-byline.js'; export const styles = base + layout + byline + article + print; -const styleTagId = 'distill-prerendered-styles'; export function makeStyleTag(dom) { + + const styleTagId = 'distill-prerendered-styles'; const prerenderedTag = dom.getElementById(styleTagId); if (!prerenderedTag) { - let styleTag = dom.createElement('style'); + const styleTag = dom.createElement('style'); styleTag.id = styleTagId; - styleTag.textContent = styles; + styleTag.type = 'text/css'; + const cssTextTag = dom.createTextNode(styles); + styleTag.appendChild(cssTextTag); dom.head.insertBefore(styleTag, dom.head.firstChild); } + } diff --git a/src/transforms.js b/src/transforms.js index dcd6b83..c893499 100644 --- a/src/transforms.js +++ b/src/transforms.js @@ -17,14 +17,15 @@ const extractors = [ import HTML from './transforms/html'; import Byline from './transforms/byline'; import Polyfills from './transforms/polyfills'; +import Mathematics from './transforms/mathematics'; import Meta from './transforms/meta'; import { makeStyleTag } from './styles/styles'; import TOC from './transforms/toc'; -// import Typeset from './transforms/typeset'; +import Typeset from './transforms/typeset'; // import Bibliography from './transforms/bibliography'; const transforms = [ - HTML, makeStyleTag, TOC, Byline, Polyfills, Meta//, Typeset//, Bibliography + HTML, makeStyleTag, TOC, Byline, Polyfills, Mathematics, Meta, Typeset//, Bibliography ]; /* Distill Transforms */ @@ -41,18 +42,21 @@ const distillTransforms = [ export function render(dom, data) { // first, we collect static data from the dom for (const extract of extractors) { + // console.warn('Running extractor: ', extract); extract(dom, data); } // secondly we use it to transform parts of the dom for (const transform of transforms) { + // console.warn('Running transform: ', transform); transform(dom, data); } // the function calling us can now use the transformed dom and filled data object } export function distillify(dom, data) { - // thirdly, we optionally use these additional transforms when publishing on the Distill website + // thirdly, we can use these additional transforms when publishing on the Distill website for (const transform of distillTransforms) { + // console.warn('Running distillify: ', transform); transform(dom, data); } } diff --git a/src/transforms/bibliography.js b/src/transforms/bibliography.js index 633f29b..b04a88c 100644 --- a/src/transforms/bibliography.js +++ b/src/transforms/bibliography.js @@ -14,7 +14,6 @@ export default function(dom, data) { const prerenderedBibliography = dom.createElement('d-bibliography-prerendered'); - const template = dom.createElement('template'); template.innerHTML = templateString; const clone = dom.importNode(template.content, true); diff --git a/src/transforms/mathematics.js b/src/transforms/mathematics.js new file mode 100644 index 0000000..a498b1a --- /dev/null +++ b/src/transforms/mathematics.js @@ -0,0 +1,34 @@ +import katex from 'katex'; +import { renderMathInElement } from '../helpers/katex-auto-render'; + +export default function(dom, data) { + let needsCSS = false; + const article = dom.querySelector('d-article'); + + if (data.katex && data.katex.delimiters) { + global.document = dom; + renderMathInElement(article, data.katex); + } + + // render d-math tags + const mathTags = article.querySelectorAll('d-math'); + if (mathTags.length > 0) { + needsCSS = true; + console.warn(`Prerendering ${mathTags.length} math tags...`); + for (const mathTag of mathTags) { + const localOptions = { displayMode: mathTag.hasAttribute('block') }; + const options = Object.assign(localOptions, data.katex); + const html = katex.renderToString(mathTag.textContent, options); + const container = dom.createElement('span'); + container.innerHTML = html; + mathTag.parentElement.insertBefore(container, mathTag); + mathTag.parentElement.removeChild(mathTag); + } + } + + if (needsCSS) { + const katexCSSTag = ''; + dom.head.insertAdjacentHTML('beforeend', katexCSSTag); + } + +} diff --git a/src/transforms/styles-article.css b/src/transforms/styles-article.css deleted file mode 100644 index 379f46d..0000000 --- a/src/transforms/styles-article.css +++ /dev/null @@ -1,269 +0,0 @@ -dt-article { - display: block; - color: rgba(0, 0, 0, 0.8); - font: 17px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", sans-serif; - padding-bottom: 72px; - overflow: hidden; - background: white; - min-height: calc(100vh - 70px - 182px); -} - -@media(min-width: 1024px) { - dt-article { - font-size: 20px; - } -} - -/* H1 */ - -dt-article h1 { - margin-top: 18px; - font-weight: 400; - font-size: 40px; - line-height: 1em; - font-family: HoeflerText-Regular, Cochin, Georgia, serif; -} -@media(min-width: 768px) { - dt-article h1 { - font-size: 46px; - margin-top: 48px; - margin-bottom: 12px; - } -} - -@media(min-width: 1080px) { - .centered h1 { - text-align: center; - } - - dt-article h1 { - font-size: 50px; - letter-spacing: -0.02em; - } - - dt-article > h1:first-of-type, - dt-article section > h1:first-of-type { - margin-top: 80px; - } -} - - -@media(min-width: 1200px) { - dt-article h1 { - font-size: 56px; - } - - dt-article > h1:first-of-type { - margin-top: 100px; - } -} - -/* H2 */ - -dt-article h2 { - font-family: HoeflerText-Regular, Cochin, Georgia, serif; - font-weight: 400; - font-size: 26px; - line-height: 1.25em; - margin-top: 36px; - margin-bottom: 24px; -} - -@media(min-width: 1024px) { - dt-article h2 { - margin-top: 48px; - font-size: 30px; - } -} - -dt-article h1 + h2 { - font-weight: 300; - font-size: 20px; - line-height: 1.4em; - margin-top: 8px; - font-style: normal; -} - - -@media(min-width: 1080px) { - .centered h1 + h2 { - text-align: center; - } - dt-article h1 + h2 { - margin-top: 12px; - font-size: 24px; - } -} - -/* H3 */ - -dt-article h3 { - font-family: HoeflerText-Regular, Georgia, serif; - font-weight: 400; - font-size: 20px; - line-height: 1.4em; - margin-top: 36px; - margin-bottom: 18px; - font-style: italic; -} - -dt-article h1 + h3 { - margin-top: 48px; -} - -@media(min-width: 1024px) { - dt-article h3 { - font-size: 26px; - } -} - -/* H4 */ - -dt-article h4 { - font-weight: 600; - text-transform: uppercase; - font-size: 14px; - line-height: 1.4em; -} - -dt-article a { - color: inherit; -} - -dt-article p, -dt-article ul, -dt-article ol { - margin-bottom: 24px; - font-family: Georgia, serif; -} - -dt-article p b, -dt-article ul b, -dt-article ol b { - -webkit-font-smoothing: antialiased; -} - -dt-article a { - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - text-decoration: none; -} - -dt-article a:hover { - border-bottom: 1px solid rgba(0, 0, 0, 0.8); -} - -dt-article .link { - text-decoration: underline; - cursor: pointer; -} - -dt-article ul, -dt-article ol { - padding-left: 24px; -} - -dt-article li { - margin-bottom: 24px; - margin-left: 0; - padding-left: 0; -} - -dt-article pre { - font-size: 14px; - margin-bottom: 20px; -} - - -dt-article hr { - border: none; - border-bottom: 1px solid rgba(0, 0, 0, 0.2); - margin-top: 60px; - margin-bottom: 60px; -} - -dt-article section { - margin-top: 60px; - margin-bottom: 60px; -} - - -/* Figure */ - -dt-article figure { - position: relative; - margin-top: 30px; - margin-bottom: 30px; -} - -@media(min-width: 1024px) { - dt-article figure { - margin-top: 48px; - margin-bottom: 48px; - } -} - -dt-article figure img { - width: 100%; -} - -dt-article figure svg text, -dt-article figure svg tspan { -} - -dt-article figure figcaption { - color: rgba(0, 0, 0, 0.6); - font-size: 12px; - line-height: 1.5em; -} -@media(min-width: 1024px) { - dt-article figure figcaption { - font-size: 13px; - } -} - -dt-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; -} - -dt-article figure figcaption a { - color: rgba(0, 0, 0, 0.6); -} - -/*dt-article figure figcaption::before { - position: relative; - display: block; - top: -20px; - content: ""; - width: 25px; - border-top: 1px solid rgba(0, 0, 0, 0.3); -}*/ - -dt-article span.equation-mimic { - font-family: georgia; - font-size: 115%; - font-style: italic; -} - -dt-article figure figcaption b { - font-weight: 600; - color: rgba(0, 0, 0, 1.0); -} - -dt-article > dt-code, -dt-article section > dt-code { - display: block; -} - -dt-article .citation { - color: #668; - cursor: pointer; -} - -dt-include { - width: auto; - display: block; -} diff --git a/src/transforms/styles-base.css b/src/transforms/styles-base.css deleted file mode 100644 index 5ac85ac..0000000 --- a/src/transforms/styles-base.css +++ /dev/null @@ -1,67 +0,0 @@ -html { - font: 400 16px/1.55em -apple-system, BlinkMacSystemFont, "Roboto", Helvetica, sans-serif; - /*background-color: hsl(223, 9%, 25%);*/ - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - text-size-adjust: 100%; -} -body { - margin: 0; - /*background-color: hsl(223, 9%, 25%);*/ -} - -a { - color: #004276; -} - -figure { - margin: 0; -} - -h1 { - font-family: Cochin, Georgia, serif; -} - -/* -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -}*/ diff --git a/src/transforms/styles-code.css b/src/transforms/styles-code.css deleted file mode 100644 index 64d0168..0000000 --- a/src/transforms/styles-code.css +++ /dev/null @@ -1,147 +0,0 @@ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ - -code { - white-space: nowrap; - background: rgba(0, 0, 0, 0.04); - border-radius: 2px; - padding: 4px 7px; - font-size: 15px; - color: rgba(0, 0, 0, 0.6); -} - -pre code { - display: block; - background: white; - border-left: 3px solid rgba(0, 0, 0, 0.05); - padding: 0 0 0 24px; -} - - -code[class*="language-"], -pre[class*="language-"] { - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, pre[class*="language-"] ::selection, -code[class*="language-"]::selection, code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - overflow: auto; -} - -:not(pre) > code[class*="language-"], -pre[class*="language-"] { -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #a67f59; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/src/transforms/styles-layout.css b/src/transforms/styles-layout.css deleted file mode 100644 index bd63ce5..0000000 --- a/src/transforms/styles-layout.css +++ /dev/null @@ -1,353 +0,0 @@ -/* - Column: 60px - Gutter: 24px - - Body: 648px - - 8 columns - - 7 gutters - Middle: 816px - Page: 984px - - 12 columns - - 11 gutters -*/ - -.l-body, -.l-body-outset, -.l-page, -.l-page-outset, -.l-middle, -.l-middle-outset, -dt-article > div, -dt-article > p, -dt-article > h1, -dt-article > h2, -dt-article > h3, -dt-article > h4, -dt-article > figure, -dt-article > ul, -dt-article > dt-byline, -dt-article > dt-code, -dt-article section > div, -dt-article section > p, -dt-article section > h1, -dt-article section > h2, -dt-article section > h3, -dt-article section > h4, -dt-article section > figure, -dt-article section > ul, -dt-article section > dt-byline, -dt-article section > dt-code { - width: auto; - margin-left: 24px; - margin-right: 24px; - box-sizing: border-box; -} - -@media(min-width: 768px) { - .l-body, - .l-body-outset, - .l-page, - .l-page-outset, - .l-middle, - .l-middle-outset, - dt-article > div, - dt-article > p, - dt-article > h1, - dt-article > h2, - dt-article > h3, - dt-article > h4, - dt-article > figure, - dt-article > ul, - dt-article > dt-byline, - dt-article > dt-code, - dt-article section > div, - dt-article section > p, - dt-article section > h1, - dt-article section > h2, - dt-article section > h3, - dt-article section > h4, - dt-article section > figure, - dt-article section > ul, - dt-article section > dt-byline, - dt-article section > dt-code { - margin-left: 72px; - margin-right: 72px; - } -} - -@media(min-width: 1080px) { - .l-body, - dt-article > div, - dt-article > p, - dt-article > h2, - dt-article > h3, - dt-article > h4, - dt-article > figure, - dt-article > ul, - dt-article > dt-byline, - dt-article > dt-code, - dt-article section > div, - dt-article section > p, - dt-article section > h2, - dt-article section > h3, - dt-article section > h4, - dt-article section > figure, - dt-article section > ul, - dt-article section > dt-byline, - dt-article section > dt-code { - margin-left: calc(50% - 984px / 2); - width: 648px; - } - .l-body-outset, - dt-article .l-body-outset { - margin-left: calc(50% - 984px / 2 - 96px/2); - width: calc(648px + 96px); - } - .l-middle, - dt-article .l-middle { - width: 816px; - margin-left: calc(50% - 984px / 2); - margin-right: auto; - } - .l-middle-outset, - dt-article .l-middle-outset { - width: calc(816px + 96px); - margin-left: calc(50% - 984px / 2 - 48px); - margin-right: auto; - } - dt-article > h1, - dt-article section > h1, - .l-page, - dt-article .l-page, - dt-article.centered .l-page { - width: 984px; - margin-left: auto; - margin-right: auto; - } - .l-page-outset, - dt-article .l-page-outset, - dt-article.centered .l-page-outset { - width: 1080px; - margin-left: auto; - margin-right: auto; - } - .l-screen, - dt-article .l-screen, - dt-article.centered .l-screen { - margin-left: auto; - margin-right: auto; - width: auto; - } - .l-screen-inset, - dt-article .l-screen-inset, - dt-article.centered .l-screen-inset { - margin-left: 24px; - margin-right: 24px; - width: auto; - } - .l-gutter, - dt-article .l-gutter { - clear: both; - float: right; - margin-top: 0; - margin-left: 24px; - margin-right: calc((100vw - 984px) / 2 + 168px); - width: calc((984px - 648px) / 2 - 24px); - } - - /* Side */ - .side.l-body, - dt-article .side.l-body { - clear: both; - float: right; - margin-top: 0; - margin-left: 48px; - margin-right: calc((100vw - 984px + 648px) / 2); - width: calc(648px / 2 - 24px - 84px); - } - .side.l-body-outset, - dt-article .side.l-body-outset { - clear: both; - float: right; - margin-top: 0; - margin-left: 48px; - margin-right: calc((100vw - 984px + 648px - 48px) / 2); - width: calc(648px / 2 - 48px + 24px); - } - .side.l-middle, - dt-article .side.l-middle { - clear: both; - float: right; - width: calc(456px - 84px); - margin-left: 48px; - margin-right: calc((100vw - 984px) / 2 + 168px); - } - .side.l-middle-outset, - dt-article .side.l-middle-outset { - clear: both; - float: right; - width: 456px; - margin-left: 48px; - margin-right: calc((100vw - 984px) / 2 + 168px); - } - .side.l-page, - dt-article .side.l-page { - clear: both; - float: right; - margin-left: 48px; - width: calc(624px - 84px); - margin-right: calc((100vw - 984px) / 2); - } - .side.l-page-outset, - dt-article .side.l-page-outset { - clear: both; - float: right; - width: 624px; - margin-right: calc((100vw - 984px) / 2); - } -} - -/* Centered */ - -@media(min-width: 1080px) { - .centered .l-body, - .centered.l-body, - dt-article.centered > div, - dt-article.centered > p, - dt-article.centered > h2, - dt-article.centered > h3, - dt-article.centered > h4, - dt-article.centered > figure, - dt-article.centered > ul, - dt-article.centered > dt-byline, - dt-article.centered > dt-code, - dt-article.centered section > div, - dt-article.centered section > p, - dt-article.centered section > h2, - dt-article.centered section > h3, - dt-article.centered section > h4, - dt-article.centered section > figure, - dt-article.centered section > ul, - dt-article.centered section > dt-byline, - dt-article.centered section > dt-code, - dt-article section.centered > div, - dt-article section.centered > p, - dt-article section.centered > h2, - dt-article section.centered > h3, - dt-article section.centered > h4, - dt-article section.centered > figure, - dt-article section.centered > ul, - dt-article section.centered > dt-byline, - dt-article section.centered > dt-code { - margin-left: auto; - margin-right: auto; - width: 648px; - } - .centered .l-body-outset, - .centered.l-body-outset, - dt-article.centered .l-body-outset { - margin-left: auto; - margin-right: auto; - width: calc(648px + 96px); - } - dt-article.centered > h1, - dt-article.centered section > h1, - dt-article section.centered > h1, - .centered .l-middle, - .centered.l-middle, - dt-article.centered .l-middle { - width: 816px; - margin-left: auto; - margin-right: auto; - } - - .centered .l-middle-outset, - .centered.l-middle-outset, - dt-article.centered .l-middle-outset { - width: calc(816px + 96px); - margin-left: auto; - margin-right: auto; - } - - /* page and screen are already centered */ - - /* Side */ - - .centered .side.l-body, - .centered dt-article .side.l-body { - clear: both; - float: right; - margin-top: 0; - margin-left: 48px; - margin-right: calc((100vw - 648px) / 2); - width: calc(4 * 60px + 3 * 24px); - } - .centered .side.l-body-outset, - .centered dt-article .side.l-body-outset { - clear: both; - float: right; - margin-top: 0; - margin-left: 48px; - margin-right: calc((100vw - 648px) / 2); - width: calc(4 * 60px + 3 * 24px); - } - .centered .side.l-middle, - .centered dt-article .side.l-middle { - clear: both; - float: right; - width: 396px; - margin-left: 48px; - margin-right: calc((100vw - 984px) / 2 + 168px / 2); - } - .centered .side.l-middle-outset, - .centered dt-article .side.l-middle-outset { - clear: both; - float: right; - width: 456px; - margin-left: 48px; - margin-right: calc((100vw - 984px) / 2 + 168px); - } - .centered .side.l-page, - .centered dt-article .side.l-page { - clear: both; - float: right; - width: 480px; - margin-right: calc((100vw - 984px) / 2); - } - .centered .side.l-page-outset, - .centered dt-article .side.l-page-outset { - clear: both; - float: right; - width: 480px; - margin-right: calc((100vw - 984px) / 2); - } - .centered .l-gutter, - .centered.l-gutter, - dt-article.centered .l-gutter { - clear: both; - float: right; - margin-top: 0; - margin-left: 24px; - margin-right: calc((100vw - 984px) / 2); - width: calc((984px - 648px) / 2 - 24px); - } - -} - -/* Rows and Columns */ - -.row { - display: flex; -} -.column { - flex: 1; - box-sizing: border-box; - margin-right: 24px; - margin-left: 24px; -} -.row > .column:first-of-type { - margin-left: 0; -} -.row > .column:last-of-type { - margin-right: 0; -} diff --git a/src/transforms/styles-print.css b/src/transforms/styles-print.css deleted file mode 100644 index ea5d50e..0000000 --- a/src/transforms/styles-print.css +++ /dev/null @@ -1,20 +0,0 @@ - -@media print { - @page { - size: 8in 11in; - } - html { - } - p, code { - page-break-inside: avoid; - } - h2, h3 { - page-break-after: avoid; - } - dt-header { - visibility: hidden; - } - dt-footer { - display: none!important; - } -} diff --git a/src/transforms/styles.js b/src/transforms/styles.js deleted file mode 100644 index 206e9b6..0000000 --- a/src/transforms/styles.js +++ /dev/null @@ -1,11 +0,0 @@ -import base from './styles-base.css'; -import layout from './styles-layout.css'; -import article from './styles-article.css'; -import code from './styles-code.css'; -import print from './styles-print.css'; - -export default function(dom) { - let s = dom.createElement('style'); - s.textContent = base + layout + article + code + print; - dom.querySelector('head').appendChild(s); -}