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
-
-
-
-
-
-
- Favorite
-
-
-
-
- More
-
-
-
-
- Spinner
-
-
-
-
- Empty user profile
-
-
-
-
- Play
-
-
-
-
- Show Sensitive Content
-
-
-
-
- Hide Sensitive Content
-
-
-
-
- Hashtag
-
-
-
-
-
-
+
+