diff --git a/package-lock.json b/package-lock.json index 16b9a4de..75033586 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "cssnano": "^6.0.1", "eslint": "^8.41.0", "eslint-webpack-plugin": "^4.0.1", + "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", @@ -4956,6 +4957,25 @@ "node": ">=4" } }, + "node_modules/mini-css-extract-plugin": { + "version": "2.7.6", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz", + "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==", + "dev": true, + "dependencies": { + "schema-utils": "^4.0.0" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -10893,6 +10913,15 @@ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", "dev": true }, + "mini-css-extract-plugin": { + "version": "2.7.6", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.6.tgz", + "integrity": "sha512-Qk7HcgaPkGG6eD77mLvZS1nmxlao3j+9PkrT9Uc7HAE1id3F41+DdBRYRYkbyfNRGzm8/YWtzhw7nVPmwhqTQw==", + "dev": true, + "requires": { + "schema-utils": "^4.0.0" + } + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", diff --git a/package.json b/package.json index e97174d5..987c3d5b 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "cssnano": "^6.0.1", "eslint": "^8.41.0", "eslint-webpack-plugin": "^4.0.1", + "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", diff --git a/public/assets/app.css b/public/assets/app.css new file mode 100644 index 00000000..71e197ea --- /dev/null +++ b/public/assets/app.css @@ -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} diff --git a/public/assets/app.css.br b/public/assets/app.css.br new file mode 100644 index 00000000..f38bc392 Binary files /dev/null and b/public/assets/app.css.br differ diff --git a/public/assets/app.js b/public/assets/app.js index 76b970d3..e69de29b 100644 --- a/public/assets/app.js +++ b/public/assets/app.js @@ -1 +0,0 @@ -!function(){"use strict";var n,o,r,e,t,i,a,s,c,A,l,C,d,m,p={661:function(n,o,r){var e=r(537),t=r.n(e),i=r(645),a=r.n(i)()(t());a.push([n.id,':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}',"",{version:3,sources:["webpack://./resources/css/variables.css","webpack://./resources/css/fonts.css","webpack://./resources/css/colours.css","webpack://./resources/css/layout.css","webpack://./resources/css/code.css","webpack://./resources/css/posse.css","webpack://./resources/css/h-card.css","webpack://./resources/css/content.css"],names:[],mappings:"AAAA,MAEI,0DAA6D,CAC7D,mDAAsD,CACtD,6EAAgF,CAGhF,sBAAuB,CACvB,qBAAsB,CACtB,sBAAuB,CACvB,qBAAsB,CACtB,sBAAuB,CACvB,oBAAqB,CACrB,wBAAyB,CAGzB,uBAAyC,CACzC,yBAA2C,CAC3C,oBAAwC,CACxC,4BAA+C,CAC/C,uCACJ,CArBA,0CAAA,MAgBI,yDAAyC,CACzC,2DAA2C,CAC3C,sDAAwC,CACxC,8DAA+C,CAC/C,oEACJ,CAAA,CArBA,gCAAA,MAgBI,wCAAyC,CACzC,0CAA2C,CAC3C,uCAAwC,CACxC,8CAA+C,CAC/C,sDACJ,CAAA,CCrBA,KCCI,uCAAwC,CACxC,0BAA2B,CDD3B,mCAAoC,CACpC,6BACJ,CAEA,KACI,wCACJ,CAEA,kBAMI,uCACJ,CEhBA,MACI,YAAa,CACb,iCAAkC,CAClC,8DAA+C,CAA/C,8CAA+C,CAC/C,YACJ,CAEA,aACI,eAAkB,CAClB,YACJ,CAEA,KAEI,YACJ,CAEA,YAJI,eAWJ,CAPA,OAEI,YAKJ,CAHI,iBACI,cACJ,CDlBJ,EACI,uBAKJ,CAHI,UACI,+BACJ,CAIA,uBACI,uBACJ,CEhBJ,MACI,mBACJ,CCFA,0BACI,YACJ,CCDI,mBAWI,2BAAsB,CAAtB,4BAAsB,CAJtB,uCAAwC,CAFxC,kBAAmB,CACnB,kEAA2D,CAA3D,0DAA2D,CAL3D,YAAa,CAUb,yBAAsB,CAAtB,qBAAsB,CACtB,SAAU,CAFV,SAAU,CANV,YAAa,CAFb,iBAAkB,CAOlB,0CAAoC,CAApC,kCAAoC,CADpC,yBAAkB,CAAlB,sBAAkB,CAAlB,iBAAkB,CALlB,WAmBJ,CARI,4BACI,cACJ,CAEA,gCAEI,WAAY,CADZ,UAEJ,CAIA,yBACI,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,SACJ,CC1BR,SACI,mDAAmD,CACnD,2BAA2B,CAD3B,kDAAmD,CACnD,0BA8BJ,CA5BI,mBACI,iBACJ,CAGI,sBACI,oBACJ,CAGJ,wBAEI,6BAAmB,CAAnB,4BAAmB,CADnB,mBAAa,CAAb,mBAAa,CAAb,YAAa,CACb,sBAAmB,CAAnB,kBAAmB,CACnB,QAcJ,CAZI,2CACI,6BAAmB,CAAnB,4BAAmB,CAAnB,sBAAmB,CAAnB,kBAUJ,CARI,6CACI,oBAMJ,CAJI,iDAEI,WAAY,CADZ,UAEJ",sourcesContent:[':root {\n /* Font Family */\n --font-family-headings: "Archer SSm A", "Archer SSm B", serif;\n --font-family-body: "Verlag A", "Verlag B", sans-serif;\n --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;\n\n /* Font Size */\n --font-size-sm: 0.75rem; /* 12px */\n --font-size-base: 1rem; /* 16px, base */\n --font-size-md: 1.25rem; /* 20px */\n --font-size-lg: 1.5rem; /* 24px */\n --font-size-xl: 1.75rem; /* 28px */\n --font-size-xxl: 2rem; /* 32px */\n --font-size-xxxl: 2.25rem; /* 36px */\n\n /* Colours */\n --color-primary: oklch(36.8% 0.1 125.505);\n --color-secondary: oklch(96.3% 0.1 125.505);\n --color-link: oklch(48.09% 0.146 241.41);\n --color-link-visited: oklch(70.44% 0.21 304.41);\n --color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);\n}\n',"body {\n font-family: var(--font-family-body);\n font-size: var(--font-size-md);\n}\n\ncode {\n font-family: var(--font-family-monospace);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: var(--font-family-headings);\n}\n","body {\n background-color: var(--color-secondary);\n color: var(--color-primary);\n}\n\na {\n color: var(--color-link);\n\n &:visited {\n color: var(--color-link-visited);\n }\n}\n\n#site-header {\n & a:visited {\n color: var(--color-link);\n }\n}\n",".grid {\n display: grid;\n grid-template-columns: 5vw 1fr 5vw;\n grid-template-rows: min-content 1fr min-content;\n row-gap: 1rem;\n}\n\n#site-header {\n grid-column: 2 / 3;\n grid-row: 1 / 2;\n}\n\nmain {\n grid-column: 2 / 3;\n grid-row: 2 / 3;\n}\n\nfooter {\n grid-column: 2 / 3;\n grid-row: 3 / 4;\n\n & .iwc-logo {\n max-width: 85vw;\n }\n}\n",".hljs {\n border-radius: .5rem;\n}\n",".p-bridgy-twitter-content {\n display: none;\n}\n",".h-card {\n & .hovercard {\n display: none;\n position: absolute;\n z-index: 100;\n padding: 1rem;\n border-radius: 1rem;\n box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);\n background-color: var(--color-secondary);\n width: fit-content;\n transition: opacity 0.5s ease-in-out;\n opacity: 0;\n flex-direction: column;\n gap: .5rem;\n\n & .u-photo {\n max-width: 6rem;\n }\n\n & .social-icon {\n width: 1rem;\n height: 1rem;\n }\n }\n\n &:hover {\n & .hovercard {\n display: flex;\n opacity: 1;\n }\n }\n}\n",'@import "posse.css";\n@import "h-card.css";\n\n.h-entry {\n border-inline-start: 1px solid var(--color-primary);\n padding-inline-start: .5rem;\n\n & .reply-to {\n font-style: italic;\n }\n\n & .post-info {\n & a {\n text-decoration: none;\n }\n }\n\n & .note-metadata {\n display: flex;\n flex-direction: row;\n gap: 1rem;\n\n & .syndication-links {\n flex-flow: row wrap;\n\n & a {\n text-decoration: none;\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n }\n }\n}\n'],sourceRoot:""}]),o.Z=a},645:function(n){n.exports=function(n){var o=[];return o.toString=function(){return this.map((function(o){var r="",e=void 0!==o[5];return o[4]&&(r+="@supports (".concat(o[4],") {")),o[2]&&(r+="@media ".concat(o[2]," {")),e&&(r+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),r+=n(o),e&&(r+="}"),o[2]&&(r+="}"),o[4]&&(r+="}"),r})).join("")},o.i=function(n,r,e,t,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(e)for(var s=0;s0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=i),r&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=r):l[2]=r),t&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=t):l[4]="".concat(t)),o.push(l))}},o}},537:function(n){n.exports=function(n){var o=n[1],r=n[3];if(!r)return o;if("function"==typeof btoa){var e=btoa(unescape(encodeURIComponent(JSON.stringify(r)))),t="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e),i="/*# ".concat(t," */");return[o].concat([i]).join("\n")}return[o].join("\n")}},379:function(n){var o=[];function r(n){for(var r=-1,e=0;e0?" ".concat(r.layer):""," {")),e+=r.css,t&&(e+="}"),r.media&&(e+="}"),r.supports&&(e+="}");var i=r.sourceMap;i&&"undefined"!=typeof btoa&&(e+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),o.styleTagTransform(e,n,o.options)}(o,n,r)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(o)}}}},589:function(n){n.exports=function(n,o){if(o.styleSheet)o.styleSheet.cssText=n;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(n))}}}},f={};function u(n){var o=f[n];if(void 0!==o)return o.exports;var r=f[n]={id:n,exports:{}};return p[n](r,r.exports,u),r.exports}u.n=function(n){var o=n&&n.__esModule?function(){return n.default}:function(){return n};return u.d(o,{a:o}),o},u.d=function(n,o){for(var r in o)u.o(o,r)&&!u.o(n,r)&&Object.defineProperty(n,r,{enumerable:!0,get:o[r]})},u.o=function(n,o){return Object.prototype.hasOwnProperty.call(n,o)},u.nc=void 0,n=u(379),o=u.n(n),r=u(795),e=u.n(r),t=u(569),i=u.n(t),a=u(565),s=u.n(a),c=u(216),A=u.n(c),l=u(589),C=u.n(l),d=u(661),(m={}).styleTagTransform=C(),m.setAttributes=s(),m.insert=i().bind(null,"head"),m.domAPI=e(),m.insertStyleElement=A(),o()(d.Z,m),d.Z&&d.Z.locals&&d.Z.locals}(); \ No newline at end of file diff --git a/public/assets/app.js.br b/public/assets/app.js.br index 824c5747..961f6a03 100644 Binary files a/public/assets/app.js.br and b/public/assets/app.js.br differ diff --git a/webpack.config.js b/webpack.config.js index 703b543a..447c6d42 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -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;