Switch to statically-created favicons

This reduces the amount of memory (and time) required to build the site.
This commit is contained in:
Matt Isenhower 2017-08-13 11:42:55 -07:00
parent 7a04c40411
commit a629d63a74
19 changed files with 151 additions and 795 deletions

View File

@ -18,11 +18,11 @@
"bulma": "^0.5.0",
"clean-webpack-plugin": "^0.1.16",
"console-stamp": "^0.2.5",
"copy-webpack-plugin": "^4.0.1",
"cron": "^1.2.1",
"css-loader": "^0.28.4",
"dotenv": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"favicons-webpack-plugin": "^0.0.7",
"file-loader": "^0.11.2",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^2.30.1",

View File

@ -8,7 +8,18 @@
<meta name="description" content="Splatoon 2 map schedules">
<meta property="og:title" content="Splatoon 2 Map Schedules">
<meta property="og:description" content="Current/upcoming maps and Salmon Run schedules.">
<meta property="og:image" content="https://splatoon2.ink/<%= require('../img/opengraph.png') %>">
<meta property="og:image" content="https://splatoon2.ink/<%= require('../icons/apple-touch-icon.png') %>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Splatoon2.ink">
<link rel="apple-touch-icon" sizes="180x180" href="<%= require('../icons/apple-touch-icon.png') %>">
<link rel="icon" type="image/png" sizes="32x32" href="<%= require('../icons/favicon-32x32.png') %>">
<link rel="icon" type="image/png" sizes="16x16" href="<%= require('../icons/favicon-16x16.png') %>">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-config" content="/browserconfig.xml">
<link rel="mask-icon" href="<%= require('../icons/safari-pinned-tab.svg') %>" color="#ff470f">
<link rel="shortcut icon" href="<%= require('../icons/favicon.ico') %>">
<meta name="theme-color" content="#cccccc">
</head>
<body>
<div id="app"></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
src/icons/favicon-16x16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/icons/favicon-32x32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/icons/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>

View File

@ -0,0 +1,18 @@
{
"name": "Splatoon2.ink",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#cccccc",
"background_color": "#cccccc",
"display": "standalone"
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -0,0 +1,38 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M4750 6903 c-178 -27 -253 -42 -415 -83 -1069 -273 -2633 -1002
-3310 -1543 -389 -310 -539 -572 -469 -815 64 -221 297 -459 721 -736 73 -47
138 -89 146 -92 15 -5 15 -21 -4 -219 -29 -311 -101 -590 -181 -709 -13 -19
-66 -70 -118 -114 -245 -205 -359 -384 -390 -613 -20 -142 6 -308 73 -469 29
-72 172 -336 186 -344 9 -6 245 49 311 72 30 11 80 31 111 45 l56 25 7 -84
c14 -183 69 -323 180 -462 65 -80 66 -81 123 -88 73 -9 204 1 268 21 27 9 81
31 118 50 38 19 70 35 72 35 2 0 9 -26 15 -57 29 -139 93 -259 187 -350 l56
-53 86 0 c188 0 369 63 509 177 24 19 44 34 46 32 1 -2 13 -40 25 -84 21 -74
153 -359 173 -371 15 -9 326 56 415 87 171 61 266 121 376 240 56 60 88 106
121 173 73 148 87 218 95 461 l6 210 38 80 c78 164 199 320 418 540 l129 131
118 -38 c298 -97 560 -149 762 -151 307 -4 466 83 566 308 66 150 88 324 81
627 -7 296 -32 504 -108 903 -209 1090 -695 2490 -1041 2997 -61 90 -165 196
-219 224 -67 34 -237 53 -339 37z m-1708 -2127 c295 -57 521 -261 616 -556 27
-83 42 -169 42 -237 0 -29 2 -53 5 -53 3 0 29 18 57 41 67 52 212 122 313 150
109 30 286 30 397 1 289 -77 499 -292 580 -592 32 -122 32 -327 -1 -455 -95
-368 -383 -644 -736 -706 -97 -17 -272 -7 -360 21 -295 93 -493 317 -560 633
-8 38 -15 95 -15 128 0 36 -4 59 -11 59 -6 0 -28 -13 -48 -29 -182 -144 -449
-210 -669 -165 -332 68 -567 309 -637 654 -23 111 -16 300 14 413 43 162 135
322 255 443 204 205 494 301 758 250z"/>
<path d="M2881 4594 c-80 -21 -149 -62 -211 -125 -182 -184 -174 -468 19 -659
106 -105 214 -149 367 -150 294 -1 512 248 464 530 -32 190 -185 355 -375 404
-73 20 -192 19 -264 0z"/>
<path d="M4210 4019 c-185 -21 -350 -160 -395 -334 -80 -309 169 -615 500
-615 130 0 234 42 332 133 281 263 117 736 -282 812 -42 8 -77 14 -78 14 -1
-1 -36 -5 -77 -10z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.8 KiB

View File

@ -5,7 +5,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = function(env) {
const production = (env === 'production');
@ -19,7 +19,7 @@ module.exports = function(env) {
},
output: {
path: path.resolve(__dirname, './public'),
filename: 'assets/js/[name].[hash].js',
filename: 'assets/js/[name].[hash:6].js',
},
devtool: (production) ? false : '#cheap-module-eval-source-map',
module: {
@ -52,14 +52,14 @@ module.exports = function(env) {
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
loader: 'file-loader?name=assets/fonts/[name].[hash].[ext]',
loader: 'file-loader?name=assets/fonts/[name].[hash:6].[ext]',
},
{
test: /\.(png|jpe?g|gif)$/,
loader: 'file-loader?name=assets/img/[name].[hash].[ext]',
test: /\.(png|jpe?g|gif|svg)$/,
loader: 'file-loader?name=assets/img/[name].[hash:6].[ext]',
},
{
test:/^favicon\.ico$/,
test: /favicon\.ico$/,
loader: 'file-loader?name=favicon.ico',
}
],
@ -72,7 +72,7 @@ module.exports = function(env) {
// ]),
// Extract CSS to a separate file
new ExtractTextPlugin({
filename: 'assets/css/[name].[contenthash].css',
filename: 'assets/css/[name].[contenthash:6].css',
disable: !production,
}),
// Remove unused CSS styles
@ -91,28 +91,16 @@ module.exports = function(env) {
},
},
}),
// Favicon
new FaviconsWebpackPlugin({
logo: './src/img/favicon.svg',
prefix: 'assets/icons/[hash:5]/',
background: '#333',
icons: {
'android': true,
'appleIcon': { offset: 15 },
'appleStartup': false,
'coast': false,
'favicons': true,
'firefox': false,
'windows': true,
'yandex': false,
},
}),
// Build HTML
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/html/index.html',
minify: { collapseWhitespace: true },
}),
// Copy additional favicons
new CopyWebpackPlugin([
{ from: 'src/icons/public' },
]),
],
}
}

832
yarn.lock

File diff suppressed because it is too large Load Diff