From 8b64375b82474b0634a8710a2583f5b619424101 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 27 Jan 2018 12:48:22 -0800 Subject: [PATCH] build svgs automatically --- bin/build-svg.js | 43 ++++++++ bin/svgs.js | 17 ++++ original-assets/sailboat.svg | 3 + package-lock.json | 184 ++++++++++++++++++++++++++++++----- package.json | 11 ++- templates/2xx.html | 98 ++++--------------- 6 files changed, 250 insertions(+), 106 deletions(-) create mode 100755 bin/build-svg.js create mode 100644 bin/svgs.js create mode 100644 original-assets/sailboat.svg diff --git a/bin/build-svg.js b/bin/build-svg.js new file mode 100755 index 00000000..67d00b14 --- /dev/null +++ b/bin/build-svg.js @@ -0,0 +1,43 @@ +#!/usr/bin/env node + +const svgs = require('./svgs') +const path = require('path') +const fs = require('fs') +const pify = require('pify') +const SVGO = require('svgo') +const svgo = new SVGO() +const $ = require('cheerio') + +const readFile = pify(fs.readFile.bind(fs)) +const writeFile = pify(fs.writeFile.bind(fs)) + +async function main() { + let result = (await Promise.all(svgs.map(async svg => { + let filepath = path.join(__dirname, '../', svg.src) + let content = await readFile(filepath, 'utf8') + let optimized = (await svgo.optimize(content)) + let $optimized = $(optimized.data) + let $path = $optimized.find('path').removeAttr('fill') + let $symbol = $('') + .attr('id', svg.id) + .attr('viewBox', `0 0 ${optimized.info.width} ${optimized.info.height}`) + .append($('').val(svg.title)) + .append($path) + return $.xml($symbol) + }))).join('\n') + + result = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">\n${result}\n</svg>` + + let html2xxFilepath = path.join(__dirname, '../templates/2xx.html') + let html2xxFile = await readFile(html2xxFilepath, 'utf8') + html2xxFile = html2xxFile.replace( + /<!-- insert svg here -->[\s\S]+<!-- end insert svg here -->/, + '<!-- insert svg here -->' + result + '<!-- end insert svg here -->' + ) + await writeFile(html2xxFilepath, html2xxFile, 'utf8') +} + +main().catch(err => { + console.error(err) + process.exit(1) +}) \ No newline at end of file diff --git a/bin/svgs.js b/bin/svgs.js new file mode 100644 index 00000000..6f0ea638 --- /dev/null +++ b/bin/svgs.js @@ -0,0 +1,17 @@ +module.exports = [ + {id: 'pinafore-logo', src: 'original-assets/sailboat.svg', title: 'Home'}, + {id:'fa-bell', src:'node_modules/font-awesome-svg-png/white/svg/bell.svg', title: 'Notifications'}, + {id:'fa-users', src:'node_modules/font-awesome-svg-png/white/svg/users.svg', title: 'Local'}, + {id:'fa-globe', src:'node_modules/font-awesome-svg-png/white/svg/globe.svg', title: 'Federated'}, + {id:'fa-gears', src:'node_modules/font-awesome-svg-png/white/svg/gears.svg', title: 'Settings'}, + {id:'fa-reply', src:'node_modules/font-awesome-svg-png/white/svg/reply.svg', title: 'Reply'}, + {id:'fa-retweet', src:'node_modules/font-awesome-svg-png/white/svg/retweet.svg', title: 'Boost'}, + {id:'fa-star', src:'node_modules/font-awesome-svg-png/white/svg/star.svg', title: 'Favorite'}, + {id:'fa-ellipsis-h', src:'node_modules/font-awesome-svg-png/white/svg/ellipsis-h.svg', title: 'More'}, + {id:'fa-spinner', src:'node_modules/font-awesome-svg-png/white/svg/spinner.svg', title: 'Spinner'}, + {id:'fa-user', src:'node_modules/font-awesome-svg-png/white/svg/user.svg', title: 'Empty user profile'}, + {id:'fa-play-circle', src:'node_modules/font-awesome-svg-png/white/svg/play-circle.svg', title: 'Play'}, + {id:'fa-eye', src:'node_modules/font-awesome-svg-png/white/svg/eye.svg', title: 'Show Sensitive Content'}, + {id:'fa-eye-slash', src:'node_modules/font-awesome-svg-png/white/svg/eye-slash.svg', title: 'Hide Sensitive Content'}, + {id:'fa-hashtag', src:'node_modules/font-awesome-svg-png/white/svg/hashtag.svg', title: 'Hashtag'}, +] \ No newline at end of file diff --git a/original-assets/sailboat.svg b/original-assets/sailboat.svg new file mode 100644 index 00000000..2f6ca568 --- /dev/null +++ b/original-assets/sailboat.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"> + <path d="M92.12,59.93H59.87V8.23C70.4,14.9,87.34,30,92.12,59.93ZM31,26.9A122.4,122.4,0,0,1,9.39,60.35H31ZM37.76,99H62.24A30.67,30.67,0,0,0,92.91,68.33H50.52V6.27A5.27,5.27,0,0,0,40,6.27V68.33H7.09A30.67,30.67,0,0,0,37.76,99Z"/> +</svg> \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0a405720..90ea73b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -781,9 +781,9 @@ "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=" }, "coa": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", - "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.1.tgz", + "integrity": "sha512-5wfTTO8E2/ja4jFSxePXlG5nRu5bBtL/r1HCIpJW/lzT6yDtKl0u0Z4o/Vpz32IpKmBn7HerheEZQgA9N2DarQ==", "requires": { "q": "1.5.1" } @@ -1167,6 +1167,11 @@ "nth-check": "1.0.1" } }, + "css-select-base-adapter": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.0.tgz", + "integrity": "sha1-AQKz0UYw34bD65+p9UVicBBs+ZA=" + }, "css-selector-tokenizer": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz", @@ -1177,6 +1182,20 @@ "regexpu-core": "1.0.0" } }, + "css-tree": { + "version": "1.0.0-alpha25", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha25.tgz", + "integrity": "sha512-XC6xLW/JqIGirnZuUWHXCHRaAjje2b3OIB0Vj5RIJo6mIi/AdJo30quQl5LxUl0gkXDIrTrFGbMlcZjyFplz1A==", + "requires": { + "mdn-data": "1.1.0", + "source-map": "0.5.7" + } + }, + "css-url-regex": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/css-url-regex/-/css-url-regex-1.1.0.tgz", + "integrity": "sha1-g4NCMMyfdMRX3lnuvRVD/uuDt+w=" + }, "css-what": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz", @@ -1227,12 +1246,22 @@ } }, "csso": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz", - "integrity": "sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/csso/-/csso-3.5.0.tgz", + "integrity": "sha512-WtJjFP3ZsSdWhiZr4/k1B9uHPgYjFYnDxfbaJxk1hz5PDLIJ5BCRWkJqaztZ0DbP8d2ZIVwUPIJb2YmCwkPaMw==", "requires": { - "clap": "1.2.3", - "source-map": "0.5.7" + "css-tree": "1.0.0-alpha.27" + }, + "dependencies": { + "css-tree": { + "version": "1.0.0-alpha.27", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.27.tgz", + "integrity": "sha512-BAYp9FyN4jLXjfvRpTDchBllDptqlK9I7OsagXCG9Am5C+5jc8eRZHgqb9x500W2OKS14MMlpQc/nmh/aA7TEQ==", + "requires": { + "mdn-data": "1.1.0", + "source-map": "0.5.7" + } + } } }, "currently-unhandled": { @@ -1646,9 +1675,9 @@ } }, "esprima": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", - "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=" + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", + "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" }, "esrecurse": { "version": "4.2.0", @@ -3778,12 +3807,12 @@ "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" }, "js-yaml": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz", - "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=", + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.10.0.tgz", + "integrity": "sha512-O2v52ffjLa9VeM43J4XocZE//WT9N0IiwDa3KSHH7Tu8CtH+1qM8SIZvnsTh6v+4yFy5KUY3BHUVwjpfAWsjIA==", "requires": { "argparse": "1.0.9", - "esprima": "2.7.3" + "esprima": "4.0.0" } }, "jsbn": { @@ -4152,6 +4181,11 @@ } } }, + "mdn-data": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.1.0.tgz", + "integrity": "sha512-jC6B3BFC07cCOU8xx1d+sQtDkVIpGKWv4TzK7pN7PyObdbwlIFJbHYk8ofvr0zrU8SkV1rSi87KAHhWCdLGw1Q==" + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -4786,6 +4820,15 @@ } } }, + "object.getownpropertydescriptors": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", + "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", + "requires": { + "define-properties": "1.1.2", + "es-abstract": "1.10.0" + } + }, "object.omit": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz", @@ -4810,6 +4853,17 @@ } } }, + "object.values": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.0.4.tgz", + "integrity": "sha1-5STaCbT2b/Bd9FdUbscqyZ8TBpo=", + "requires": { + "define-properties": "1.1.2", + "es-abstract": "1.10.0", + "function-bind": "1.1.1", + "has": "1.0.1" + } + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -5596,6 +5650,53 @@ "postcss": "5.2.18", "postcss-value-parser": "3.3.0", "svgo": "0.7.2" + }, + "dependencies": { + "coa": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz", + "integrity": "sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=", + "requires": { + "q": "1.5.1" + } + }, + "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.3", + "source-map": "0.5.7" + } + }, + "esprima": { + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz", + "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=" + }, + "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" + } + }, + "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" + } + } } }, "postcss-unique-selectors": { @@ -6825,6 +6926,11 @@ "safe-buffer": "5.1.1" } }, + "stable": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.6.tgz", + "integrity": "sha1-kQ9dKu17Ugxud3SZwfMuE5/eyxA=" + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -7099,17 +7205,37 @@ } }, "svgo": { - "version": "0.7.2", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz", - "integrity": "sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.0.3.tgz", + "integrity": "sha512-1/ZmC89pyy0OtUaM6+/ffe7NpbeRNaPjHd0fxF3cXCpjaGKmER2RlRKxvmxnsi7EcWI0K7niK1wQtHIu8wOdXA==", "requires": { - "coa": "1.0.4", + "coa": "2.0.1", "colors": "1.1.2", - "csso": "2.3.2", - "js-yaml": "3.7.0", + "css-select": "1.3.0-rc0", + "css-select-base-adapter": "0.1.0", + "css-tree": "1.0.0-alpha25", + "css-url-regex": "1.1.0", + "csso": "3.5.0", + "js-yaml": "3.10.0", "mkdirp": "0.5.1", + "object.values": "1.0.4", "sax": "1.2.4", - "whet.extend": "0.9.9" + "stable": "0.1.6", + "unquote": "1.1.1", + "util.promisify": "1.0.0" + }, + "dependencies": { + "css-select": { + "version": "1.3.0-rc0", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.3.0-rc0.tgz", + "integrity": "sha1-b5MZaqrnN2ZuoQNqjLFKj8t6kjE=", + "requires": { + "boolbase": "1.0.0", + "css-what": "2.1.0", + "domutils": "1.5.1", + "nth-check": "1.0.1" + } + } } }, "tapable": { @@ -7467,6 +7593,11 @@ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" }, + "unquote": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz", + "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=" + }, "unset-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", @@ -7647,6 +7778,15 @@ "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, + "util.promisify": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz", + "integrity": "sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==", + "requires": { + "define-properties": "1.1.2", + "object.getownpropertydescriptors": "2.0.3" + } + }, "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", diff --git a/package.json b/package.json index 7a04fbae..195fdc6e 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,12 @@ "description": "TODO", "version": "0.0.1", "scripts": { - "dev": "concurrently --kill-others \"npm run build-sass-watch\" \"node server.js\"", - "build": "npm run globalize-css && npm run build-sass && sapper build && npm run deglobalize-css", + "dev": "npm run build-svg && concurrently --kill-others \"npm run build-sass-watch\" \"node server.js\"", + "build": "npm run globalize-css && npm run build-sass && npm run build-svg && sapper build && npm run deglobalize-css", "start": "cross-env NODE_ENV=production node server.js", - "build-sass": "node ./bin/build-sass", - "build-sass-watch": "node ./bin/build-sass --watch", + "build-svg": "node ./bin/build-svg.js", + "build-sass": "node ./bin/build-sass.js", + "build-sass-watch": "node ./bin/build-sass.js --watch", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run", @@ -15,6 +16,7 @@ "deglobalize-css": "node ./bin/globalize-css.js --reverse" }, "dependencies": { + "cheerio": "^1.0.0-rc.2", "chokidar": "^2.0.0", "compression": "^1.7.1", "concurrently": "^3.5.1", @@ -48,6 +50,7 @@ "svelte-extras": "^1.6.0", "svelte-loader": "^2.3.3", "svelte-transitions": "^1.1.1", + "svgo": "^1.0.3", "uglifyjs-webpack-plugin": "^1.1.5", "url-search-params": "^0.10.0", "webpack": "^3.10.0", diff --git a/templates/2xx.html b/templates/2xx.html index 3468d420..a96c57dd 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -62,86 +62,24 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o } </script> <svg xmlns="http://www.w3.org/2000/svg" style="display:none;"> - - <symbol id="pinafore-logo" viewBox="0 0 100 100"> - <title>Home - - - - - Notifications - - - - - Local - - - - - Federated - - - - - Settings - - - - - - Reply - - - - - Boost - - - - - Favorite - - - - - More - - - - - Spinner - - - - - Empty user profile - - - - - Play - - - - - Show Sensitive Content - - - - - Hide Sensitive Content - - - - - Hashtag - - - - - - + + + + + + + + + + + + + + + + + +