data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix lighthouse score, add icons, inline global css

Browse source
This commit is contained in:
Nolan Lawson 2018-01-14 14:29:32 -08:00
parent c9a9ea8d40
commit ccc1efb42a
12 changed files with 60 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/icon-144.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
assets/icon-192.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
assets/icon-48.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
assets/icon-512.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
assets/icon-72.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
assets/icon-96.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

25
assets/manifest.json
View file

@ -6,10 +6,35 @@
"display": "minimal-ui", "display": "minimal-ui",
"start_url": "/", "start_url": "/",
"icons": [ "icons": [
{
"src": "icon-48.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "icon-72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icon-96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "icon-144.png",
"sizes": "144x144",
"type": "image/png"
},
{ {
"src": "icon-192.png", "src": "icon-192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png" "type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
} }
] ]
} }

15
bin/build-sass.js
View file

@ -9,12 +9,13 @@ const fs = require('fs')
const pify = require('pify') const pify = require('pify')
const writeFile = pify(fs.writeFile.bind(fs)) const writeFile = pify(fs.writeFile.bind(fs))
const readdir = pify(fs.readdir.bind(fs)) const readdir = pify(fs.readdir.bind(fs))
const readFile = pify(fs.readFile.bind(fs))
const render = pify(sass.render.bind(sass)) const render = pify(sass.render.bind(sass))
const now = require('performance-now') const now = require('performance-now')
const globalScss = path.join(__dirname, '../scss/global.scss') const globalScss = path.join(__dirname, '../scss/global.scss')
const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss') const defaultThemeScss = path.join(__dirname, '../scss/themes/_default.scss')
const globalCss = path.join(__dirname, '../assets/global.css') const html2xxFile = path.join(__dirname, '../templates/2xx.html')
const scssDir = path.join(__dirname, '../scss') const scssDir = path.join(__dirname, '../scss')
const themesScssDir = path.join(__dirname, '../scss/themes') const themesScssDir = path.join(__dirname, '../scss/themes')
const assetsDir = path.join(__dirname, '../assets') const assetsDir = path.join(__dirname, '../assets')
@ -35,13 +36,17 @@ function doWatch() {
async function compileGlobalSass() { async function compileGlobalSass() {
let results = await Promise.all([ let results = await Promise.all([
render({file: defaultThemeScss}), render({file: defaultThemeScss, outputStyle: argv.watch ? 'nested': 'compressed'}),
render({file: globalScss}) render({file: globalScss, outputStyle: argv.watch ? 'nested': 'compressed'})
]) ])
let css = results.map(_ => _.css).join('\n') let css = results.map(_ => _.css).join('')
await writeFile(globalCss, css, 'utf8') let html = await readFile(html2xxFile, 'utf8')
html = html.replace(/<style>[\s\S]+?<\/style>/,
`<style>\n/* auto-generated w/ build-sass.js */\n${css}\n</style>`)
await writeFile(html2xxFile, html, 'utf8')
} }
async function compileThemesSass() { async function compileThemesSass() {

2
scss/themes/_default.scss
View file

@ -8,6 +8,8 @@ $secondary-text-color: white;
$toast-border: #fafafa; $toast-border: #fafafa;
$toast-bg: #333; $toast-bg: #333;
$whatever: royalblue;
@import "_base.scss"; @import "_base.scss";
:root { :root {

10
templates/2xx.html
View file

@ -1,11 +1,10 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name='theme-color' content='#4169e1'> <meta name='theme-color' content='#4169e1'>
<link rel='stylesheet' href='/global.css'>
<link rel='manifest' href='/manifest.json'> <link rel='manifest' href='/manifest.json'>
<link rel='icon' type='image/png' href='/favicon.png'> <link rel='icon' type='image/png' href='/favicon.png'>
@ -15,6 +14,13 @@
} }
</script> </script>
<style>
/* auto-generated w/ build-sass.js */
:root{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#839deb;--action-button-fill-color-hover:#99afef;--action-button-fill-color-active:#577ae4;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff}
body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;font-size:14px;line-height:1.2;color:var(--body-text-color);background:var(--body-bg)}#svelte{display:flex;flex-direction:column}main{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:800px;padding:15px 15px;box-sizing:border-box;margin:85px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px}@media (max-width: 767px){main{padding:5px 5px;margin:75px auto 15px}}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px}button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover{background:var(--button-bg-hover)}button:active{background:var(--button-bg-active)}button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}
</style>
<noscript> <noscript>
<style> <style>
.not-logged-in-home.hidden { .not-logged-in-home.hidden {

2
templates/4xx.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">

2
templates/5xx.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">