Merge pull request #874 from jonnybarnes/develop

MTM Use separate CSS file in production
This commit is contained in:
Jonny Barnes 2023-05-29 13:04:38 +01:00 committed by GitHub
commit 2f40e83568
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 931 additions and 726 deletions

View file

@ -25,7 +25,7 @@ class CSPHeader
->header(
'Content-Security-Policy',
"default-src 'self'; " .
"style-src 'self' 'unsafe-inline' cloud.typography.com jonnybarnes.uk; " .
"style-src 'self' cloud.typography.com jonnybarnes.uk; " .
"img-src 'self' data: blob: https://pbs.twimg.com https://jbuk-media.s3-eu-west-1.amazonaws.com https://jbuk-media-dev.s3-eu-west-1.amazonaws.com https://secure.gravatar.com https://graph.facebook.com *.fbcdn.net https://*.cdninstagram.com https://*.4sqi.net https://upload.wikimedia.org; " .
"font-src 'self' data:; " .
"frame-src 'self' https://www.youtube.com blob:; " .

1565
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -5,22 +5,23 @@
"repository": "https://github.com/jonnybarnes/jonnybarnes.uk",
"license": "CC0-1.0",
"devDependencies": {
"@babel/core": "^7.21.8",
"@babel/preset-env": "^7.21.5",
"@babel/core": "^7.22.1",
"@babel/preset-env": "^7.22.2",
"@csstools/postcss-oklab-function": "^2.2.2",
"autoprefixer": "^10.4.14",
"babel-loader": "^9.1.2",
"browserlist": "^1.0.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.4",
"css-loader": "^6.8.1",
"cssnano": "^6.0.1",
"eslint": "^8.41.0",
"eslint-webpack-plugin": "^4.0.1",
"postcss": "^8.4.23",
"mini-css-extract-plugin": "^2.7.6",
"postcss": "^8.4.24",
"postcss-combine-duplicated-selectors": "^10.0.2",
"postcss-combine-media-query": "^1.0.1",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.3.1",
"postcss-loader": "^7.3.2",
"postcss-nesting": "^11.2.2",
"style-loader": "^3.3.3",
"stylelint": "^15.6.2",

1
public/assets/app.css vendored Normal file
View file

@ -0,0 +1 @@
:root{--font-family-headings:"Archer SSm A","Archer SSm B",serif;--font-family-body:"Verlag A","Verlag B",sans-serif;--font-family-monospace:"Operator Mono SSm A","Operator Mono SSm B",monospace;--font-size-sm:0.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:#334700;--color-secondary:#e3ffb7;--color-link:#00649e;--color-link-visited:#bc7aff;--color-primary-shadow:rgba(16,25,0,.4)}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 0.21567 0.27838 0.03615);--color-secondary:color(display-p3 0.91016 0.99842 0.74082);--color-link:color(display-p3 0.01045 0.38351 0.63618);--color-link-visited:color(display-p3 0.70467 0.47549 0.99958);--color-primary-shadow:color(display-p3 0.06762 0.09646 0.00441/0.4)}}@supports (color:oklch(0% 0 0)){:root{--color-primary:oklch(36.8% 0.1 125.505);--color-secondary:oklch(96.3% 0.1 125.505);--color-link:oklch(48.09% 0.146 241.41);--color-link-visited:oklch(70.44% 0.21 304.41);--color-primary-shadow:oklch(19.56% 0.054 125.505/40%)}}body{background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{display:grid;grid-template-columns:5vw 1fr 5vw;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;row-gap:1rem}#site-header{grid-column:2/3;grid-row:1/2}main{grid-row:2/3}footer,main{grid-column:2/3}footer{grid-row:3/4}footer .iwc-logo{max-width:85vw}a{color:var(--color-link)}a:visited{color:var(--color-link-visited)}#site-header a:visited{color:var(--color-link)}.hljs{border-radius:.5rem}.p-bridgy-twitter-content{display:none}.h-card .hovercard{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--color-secondary);border-radius:1rem;-webkit-box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);display:none;-ms-flex-direction:column;flex-direction:column;gap:.5rem;opacity:0;padding:1rem;position:absolute;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.h-card .hovercard .u-photo{max-width:6rem}.h-card .hovercard .social-icon{height:1rem;width:1rem}.h-card:hover .hovercard{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.h-entry{-webkit-border-start:1px solid var(--color-primary);-webkit-padding-start:.5rem;border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem}.h-entry .reply-to{font-style:italic}.h-entry .post-info a{text-decoration:none}.h-entry .note-metadata{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}.h-entry .note-metadata .syndication-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.h-entry .note-metadata .syndication-links a{text-decoration:none}.h-entry .note-metadata .syndication-links a svg{height:1rem;width:1rem}

BIN
public/assets/app.css.br Normal file

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

View file

@ -8,6 +8,9 @@
<link rel="stylesheet" href="{{ config('app.font_link') }}">
@endif
<link rel="stylesheet" href="/assets/highlight/zenburn.css">
@production
<link rel="stylesheet" href="/assets/app.css">
@endproduction
<link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/blog/feed.rss">
<link rel="alternate" type="application/atom+xml" title="Blog Atom Feed" href="/blog/feed.atom">
<link rel="alternate" type="application/json" title="Blog JSON Feed" href="/blog/feed.json">

74
webpack.config.js vendored
View file

@ -3,6 +3,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');
const EslintPlugin = require('eslint-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const config = {
entry: ['./resources/js/app.js'],
@ -12,29 +13,6 @@ const config = {
},
module: {
rules: [{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production'
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
sourceMap: process.env.NODE_ENV !== 'production'
}
}
]
}, {
test: /\.js$/,
exclude: /node_modules/,
use: {
@ -74,6 +52,56 @@ const config = {
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'eval-source-map';
config.module.rules.push({
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
sourceMap: true
}
}
]
});
}
if (argv.mode === 'production') {
config.module.rules.push({
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
}
}
]
});
config.plugins.push(new MiniCssExtractPlugin({filename: 'app.css'}));
}
return config;