fix remaining hard-coded paths & extend cache lifetimes with content hashes

This commit is contained in:
Jesse D. McDonald 2020-04-02 05:25:49 -05:00
parent 68f1618597
commit e1722cf589
8 changed files with 3240 additions and 69 deletions

3
.gitignore vendored
View File

@ -2,5 +2,4 @@ node_modules
.*.swp .*.swp
.*.swo .*.swo
*~ *~
dist/assets dist/
dist/bundled.js

View File

@ -1,2 +1,6 @@
Header always set Cache-Control "max-age=3600,no-transform,public" Header always set Cache-Control "max-age=86400,no-transform,public"
Header always set Content-Security-Policy "worker-src 'self';"
<Files "index.html">
Header always set Cache-Control "max-age=30,no-transform,public"
Header always set Content-Security-Policy "worker-src 'self';"
</Files>

View File

@ -2,13 +2,9 @@
<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">
<!-- <link rel="icon" sizes="160x160" type="image/png" href="<%=require('./png/pacosako-logo.png')%>">
<link rel="stylesheet" type="text/css" href="css/chess.css">
<link rel="stylesheet" type="text/css" href="css/theme/pacosako.css">
<link rel="stylesheet" type="text/css" href="jquery-ui/dist/jquery-ui.css">
-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Vollkorn:700&display=swap"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Vollkorn:700&display=swap">
<title>Paco Ŝako</title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<div id="page"> <div id="page">
@ -245,51 +241,29 @@
</div> </div>
<div class="badges"> <div class="badges">
<div class="badge official-badge"><a href="https://pacosako.com/" target="_blank"><img src="assets/png/pacosako-logo.png" alt="Official Site" title="Official Site"></a></div> <div class="badge official-badge"><a href="https://pacosako.com/" target="_blank"><img src="<%=require('./png/pacosako-logo.png')%>" alt="Official Site" title="Official Site"></a></div>
<div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" target="_blank"><img src="assets/png/gogs.png" alt="Source Code" title="Source Code"></a></div> <div class="badge gogs-badge"><a href="https://jessemcdonald.info/gogs/nybble/paco_sako" target="_blank"><img src="<%=require('./png/gogs.png')%>" alt="Source Code" title="Source Code"></a></div>
</div> </div>
<div id="cb_hidden" style="display: none"> <div id="cb_hidden" style="display: none">
<div id="cb_phantom" class="cb-phantom"></div> <div id="cb_phantom" class="cb-phantom"></div>
<div id="cb_pieces" style="display: none"> <div id="cb_pieces" style="display: none">
<img id="cb_piece_kd" src="assets/svg/Chess_kdt45.svg" alt="kd" class="cb-piece cb-dk-piece cb-king"> <img id="cb_piece_kd" src="<%=require('./svg/Chess_kdt45.svg')%>" alt="kd" class="cb-piece cb-dk-piece cb-king">
<img id="cb_piece_qd" src="assets/svg/Chess_qdt45.svg" alt="qd" class="cb-piece cb-dk-piece cb-queen"> <img id="cb_piece_qd" src="<%=require('./svg/Chess_qdt45.svg')%>" alt="qd" class="cb-piece cb-dk-piece cb-queen">
<img id="cb_piece_rd" src="assets/svg/Chess_rdt45.svg" alt="rd" class="cb-piece cb-dk-piece cb-rook"> <img id="cb_piece_rd" src="<%=require('./svg/Chess_rdt45.svg')%>" alt="rd" class="cb-piece cb-dk-piece cb-rook">
<img id="cb_piece_nd" src="assets/svg/Chess_ndt45.svg" alt="nd" class="cb-piece cb-dk-piece cb-knight"> <img id="cb_piece_nd" src="<%=require('./svg/Chess_ndt45.svg')%>" alt="nd" class="cb-piece cb-dk-piece cb-knight">
<img id="cb_piece_bd" src="assets/svg/Chess_bdt45.svg" alt="bd" class="cb-piece cb-dk-piece cb-bishop"> <img id="cb_piece_bd" src="<%=require('./svg/Chess_bdt45.svg')%>" alt="bd" class="cb-piece cb-dk-piece cb-bishop">
<img id="cb_piece_pd" src="assets/svg/Chess_pdt45.svg" alt="pd" class="cb-piece cb-dk-piece cb-pawn"> <img id="cb_piece_pd" src="<%=require('./svg/Chess_pdt45.svg')%>" alt="pd" class="cb-piece cb-dk-piece cb-pawn">
<img id="cb_piece_kl" src="assets/svg/Chess_klt45.svg" alt="kl" class="cb-piece cb-lt-piece cb-king"> <img id="cb_piece_kl" src="<%=require('./svg/Chess_klt45.svg')%>" alt="kl" class="cb-piece cb-lt-piece cb-king">
<img id="cb_piece_ql" src="assets/svg/Chess_qlt45.svg" alt="ql" class="cb-piece cb-lt-piece cb-queen"> <img id="cb_piece_ql" src="<%=require('./svg/Chess_qlt45.svg')%>" alt="ql" class="cb-piece cb-lt-piece cb-queen">
<img id="cb_piece_rl" src="assets/svg/Chess_rlt45.svg" alt="rl" class="cb-piece cb-lt-piece cb-rook"> <img id="cb_piece_rl" src="<%=require('./svg/Chess_rlt45.svg')%>" alt="rl" class="cb-piece cb-lt-piece cb-rook">
<img id="cb_piece_nl" src="assets/svg/Chess_nlt45.svg" alt="nl" class="cb-piece cb-lt-piece cb-knight"> <img id="cb_piece_nl" src="<%=require('./svg/Chess_nlt45.svg')%>" alt="nl" class="cb-piece cb-lt-piece cb-knight">
<img id="cb_piece_bl" src="assets/svg/Chess_blt45.svg" alt="bl" class="cb-piece cb-lt-piece cb-bishop"> <img id="cb_piece_bl" src="<%=require('./svg/Chess_blt45.svg')%>" alt="bl" class="cb-piece cb-lt-piece cb-bishop">
<img id="cb_piece_pl" src="assets/svg/Chess_plt45.svg" alt="pl" class="cb-piece cb-lt-piece cb-pawn"> <img id="cb_piece_pl" src="<%=require('./svg/Chess_plt45.svg')%>" alt="pl" class="cb-piece cb-lt-piece cb-pawn">
</div> </div>
</div> </div>
</div> </div>
<!--
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/dist/jquery-ui.min.js"></script>
<script src="jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
<script>
console.real_log = console.log;
console.log = () => {};
//console.STAT = console.real_log;
</script>
<script src="gun/gun.js"></script>
<script src="gun/nts.js"></script>
<script src="gun/sea.js"></script>
<script src="gun/lib/webrtc.js"></script>
<script>
console.log = console.real_log;
</script>
<script src="node-deep-equal/index.js"></script>
<script src="js/pacosako.js"></script>
<script src="js/pacosako_ui.js"></script>
-->
<script src="bundled.js"></script>
</body> </body>
</html> </html>
<!-- vim:set noexpandtab sw=2 ts=2: --> <!-- vim:set noexpandtab sw=2 ts=2: -->

View File

@ -1,13 +1,4 @@
require('webpack-jquery-ui/draggable'); import './css/chess.css';
require('webpack-jquery-ui/droppable'); import './css/theme/pacosako.css';
require('webpack-jquery-ui/selectmenu');
require('webpack-jquery-ui/css'); import './js/pacosako_ui.js';
window.Gun = require('gun');
require('gun/nts');
require('gun/sea');
window.deepEqual = require('deep-equal');
require('./css/chess.css');
require('./css/theme/pacosako.css');
require('./png/gogs.png');
require('./png/pacosako-logo.png');
require('./js/pacosako_ui.js');

View File

@ -1,4 +1,19 @@
'use strict'; 'use strict';
import PS from './pacosako.js';
import Gun from 'gun';
import 'gun/nts';
import 'gun/sea';
import 'gun/lib/webrtc';
import deepEqual from 'deep-equal';
import 'webpack-jquery-ui/draggable';
import 'webpack-jquery-ui/droppable';
import 'webpack-jquery-ui/selectmenu';
import 'webpack-jquery-ui/css';
$(function (){ $(function (){
/* workaround for persistent errors accumulating which break synchronization */ /* workaround for persistent errors accumulating which break synchronization */
if ('localStorage' in window) { if ('localStorage' in window) {
@ -36,8 +51,6 @@ $(function (){
window.logGunOut = false; window.logGunOut = false;
window.logDebug = false; window.logDebug = false;
const PS = require('./pacosako.js');
let currentGame = new PS.Game(); let currentGame = new PS.Game();
let visibleGame = new PS.Game(currentGame); let visibleGame = new PS.Game(currentGame);
let cancelGameCallback = function() {}; let cancelGameCallback = function() {};

3149
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -14,6 +14,11 @@
"author": "Jesse McDonald <nybble41@gmail.com>", "author": "Jesse McDonald <nybble41@gmail.com>",
"license": "CC-PDDC", "license": "CC-PDDC",
"devDependencies": { "devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"html-webpack-plugin": "^4.0.4",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"svgo": "^1.3.2", "svgo": "^1.3.2",
"svgo-loader": "^2.2.1", "svgo-loader": "^2.2.1",
"webpack": "^4.42.1", "webpack": "^4.42.1",

View File

@ -1,11 +1,18 @@
const path = require('path'); const path = require('path');
const webpack = require('webpack'); const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = { module.exports = {
entry: { entry: {
index: './index.js' index: './index.js'
}, },
output: { output: {
filename: 'bundled.js', filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'), path: path.resolve(__dirname, 'dist'),
publicPath: '' publicPath: ''
}, },
@ -13,13 +20,13 @@ module.exports = {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
loaders: ["style-loader","css-loader"] loaders: [MiniCssExtractPlugin.loader, "css-loader"]
}, },
{ {
test: { and: [ /\.(jpe?g|png|gif|svg)$/i, /jquery-ui/i ] }, test: { and: [ /\.(jpe?g|png|gif|svg)$/i, /jquery-ui/i ] },
loader: "file-loader", loader: "file-loader",
options: { options: {
name: '[name].[ext]', name: '[name].[contenthash].[ext]',
outputPath: 'assets/jquery-ui' outputPath: 'assets/jquery-ui'
} }
}, },
@ -27,7 +34,7 @@ module.exports = {
test: { and: [ /\.(jpe?g|png|gif)$/i, { not: [ /jquery-ui/i ] } ] }, test: { and: [ /\.(jpe?g|png|gif)$/i, { not: [ /jquery-ui/i ] } ] },
loader: "file-loader", loader: "file-loader",
options: { options: {
name: '[path][name].[ext]', name: '[path][name].[contenthash].[ext]',
outputPath: 'assets/' outputPath: 'assets/'
} }
}, },
@ -37,7 +44,7 @@ module.exports = {
{ {
loader: "file-loader", loader: "file-loader",
options: { options: {
name: '[path][name].[ext]', name: '[path][name].[contenthash].[ext]',
outputPath: 'assets/' outputPath: 'assets/'
} }
}, },
@ -47,12 +54,41 @@ module.exports = {
] ]
}, },
plugins: [ plugins: [
/* Use the ProvidePlugin constructor to inject jquery implicit globals */ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Paco Ŝako',
template: 'index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
new webpack.ProvidePlugin({ new webpack.ProvidePlugin({
$: "jquery", $: "jquery",
jQuery: "jquery", jQuery: "jquery",
"window.jQuery": "jquery'", "window.jQuery": "jquery'",
"window.$": "jquery" "window.$": "jquery"
}) }),
] new CopyPlugin([
{ from: '.htaccess' },
]),
],
optimization: {
moduleIds: 'hashed',
minimizer: [
new TerserJSPlugin({}),
new OptimizeCSSAssetsPlugin({}),
],
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
}; };
/* vim:set expandtab sw=2 ts=8: */