diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html index f48e91af86d..c50ddaf110a 100644 --- a/network-api/networkapi/templates/pages/base.html +++ b/network-api/networkapi/templates/pages/base.html @@ -67,6 +67,8 @@ + + {% endblock %} {% block extended_head %}{% endblock %} diff --git a/network-api/networkapi/templates/pattern_library_base.html b/network-api/networkapi/templates/pattern_library_base.html index 317e69bf916..5c0500b9b7e 100644 --- a/network-api/networkapi/templates/pattern_library_base.html +++ b/network-api/networkapi/templates/pattern_library_base.html @@ -19,8 +19,11 @@ {% if debug %}{% endif %} + + + {% endblock %} diff --git a/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html b/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html index 90b1c84b4c2..af2bcc514a9 100644 --- a/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html +++ b/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html @@ -15,6 +15,7 @@ + {% endblock %} diff --git a/package-lock.json b/package-lock.json index 2367b41f28d..c7b2186f5a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,6 +51,7 @@ "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.1", "optipng-bin": "^9.0.0", + "postcss-custom-properties": "^8.0.11", "prettier": "^3.2.5", "stylelint": "^15.11.0", "stylelint-config-standard": "^34.0.0", @@ -204,9 +205,9 @@ } }, "node_modules/@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz", + "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==", "dev": true, "funding": [ { @@ -4892,6 +4893,13 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "node_modules/flatten": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz", + "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==", + "deprecated": "flatten is deprecated in favor of utility frameworks such as lodash.", + "dev": true + }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -5562,6 +5570,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==", + "dev": true + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -7710,6 +7724,42 @@ "postcss": "^8.4.31" } }, + "node_modules/postcss-custom-properties": { + "version": "8.0.11", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz", + "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==", + "dev": true, + "dependencies": { + "postcss": "^7.0.17", + "postcss-values-parser": "^2.0.1" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/postcss-custom-properties/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/postcss-custom-properties/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, "node_modules/postcss-discard-comments": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz", @@ -8210,6 +8260,20 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/postcss-values-parser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz", + "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==", + "dev": true, + "dependencies": { + "flatten": "^1.0.2", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + }, + "engines": { + "node": ">=6.14.4" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -9478,6 +9542,15 @@ "node": ">=0.10.0" } }, + "node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -10472,6 +10545,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==", + "dev": true + }, "node_modules/universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -11079,9 +11158,9 @@ "requires": {} }, "@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.3.tgz", + "integrity": "sha512-KEPNw4+WW5AVEIyzC80rTbWEUatTW2lXpN8+8ILC8PiPeWPjwUzrPZDIOZ2wwqDmeqOYTdSGyL3+vE5GC3FB3Q==", "dev": true, "requires": {} }, @@ -14502,6 +14581,12 @@ "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "dev": true }, + "flatten": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz", + "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==", + "dev": true + }, "follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -14971,6 +15056,12 @@ "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", "dev": true }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -16513,6 +16604,34 @@ "postcss-value-parser": "^4.2.0" } }, + "postcss-custom-properties": { + "version": "8.0.11", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz", + "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==", + "dev": true, + "requires": { + "postcss": "^7.0.17", + "postcss-values-parser": "^2.0.1" + }, + "dependencies": { + "picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "requires": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + } + } + } + }, "postcss-discard-comments": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz", @@ -16788,6 +16907,17 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "postcss-values-parser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz", + "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==", + "dev": true, + "requires": { + "flatten": "^1.0.2", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -17751,6 +17881,12 @@ "sort-keys": "^1.0.0" } }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, "source-map-js": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", @@ -18488,6 +18624,12 @@ "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz", "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==" }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==", + "dev": true + }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", diff --git a/package.json b/package.json index ee2e8349e0c..5517f7eba77 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,11 @@ "node": "20.x" }, "scripts": { - "build": "run-s build:clean && run-p build:common build:js:prod && npm run postcss:build", + "build": "run-s build:clean && run-p build:common build:js:prod && npm run postcss:build && npm run postcss:font", "build:clean": "shx rm -rf network-api/networkapi/temp/frontend && shx rm -rf network-api/networkapi/frontend && shx mkdir -p network-api/networkapi/frontend/_js", - "build:common": "run-p build:images build:css build:contribute", + "build:common": "run-p build:images build:css build:font build:contribute", "build:contribute": "shx cp contribute.json network-api/networkapi/frontend/", + "build:font": "shx rm -rf network-api/networkapi/frontend/_font && shx cp -r source/font network-api/networkapi/frontend/_font", "build:images": "shx rm -rf network-api/networkapi/frontend/_images && shx cp -r source/images network-api/networkapi/frontend/_images", "build:js:dev": "node esbuild.config.js -- --node-env development", "build:js:prod": "node esbuild.config.js -- --node-env production", @@ -37,6 +38,7 @@ "lint:css:network": "stylelint \"network-api/networkapi/{,!(frontend)/**/}*.css\" --custom-syntax postcss-scss", "postcss:build": "postcss network-api/networkapi/temp/frontend/_css/*.css --dir network-api/networkapi/frontend/_css --verbose", "postcss:watch": "TAILWIND_MODE=watch postcss network-api/networkapi/temp/frontend/_css/*.css --dir network-api/networkapi/frontend/_css --watch --verbose", + "postcss:font": "postcss source/sass/new-font.css --o network-api/networkapi/frontend/_font/new-font.css --verbose", "optimize:svg": "svgo --multipass --folder ./source/images/ --recursive", "optimize:jpg": "find source/images -type f -name '*.jpg' -print0 | xargs -0 -n 1 -P 6 -I '{}' guetzli --quality 93 '{}' '{}'", "optimize:png": "find source/images -type f -name '*.png' -print0 | xargs -0 -n 1 -P 6 optipng", @@ -59,7 +61,7 @@ "start": "docker-compose up", "sync": "browser-sync start --proxy \"localhost:8000\" --reload-debounce 50 --files \"./network-api/networkapi/**/*.html\" \"./network-api/networkapi/frontend/_css/*.css\" \"./network-api/networkapi/frontend/_js/*.js\"", "test": "npm run lint", - "watch": "run-s build:clean && run-p build:common && run-p build:js:dev postcss:watch watch:**", + "watch": "run-s build:clean && run-p build:common postcss:font && run-p build:js:dev postcss:watch watch:**", "watch:images": "chokidar \"source/images/**/*\" -c \"npm run build:images\"", "watch:scss": "chokidar \"source/**/*.scss\" -c \"npm run build:css\"" }, @@ -114,6 +116,7 @@ "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.1", "optipng-bin": "^9.0.0", + "postcss-custom-properties": "^8.0.11", "prettier": "^3.2.5", "stylelint": "^15.11.0", "stylelint-config-standard": "^34.0.0", diff --git a/postcss.config.js b/postcss.config.js index 4f2bca71558..5f27bbd9437 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,6 +2,23 @@ let commonPlugins = [ require("postcss-import"), require("tailwindcss"), require("autoprefixer"), + require("postcss-custom-properties")({ + importFrom: [ + { + customProperties: { + "--asset-domain": process.env.ASSET_DOMAIN, + "--font-sans-300": `url("${process.env.FONT_SANS_300}")`, + "--font-sans-400": `url("${process.env.FONT_SANS_400}")`, + "--font-sans-700": `url("${process.env.FONT_SANS_700}")`, + "--font-semi-slab-300": `url("${process.env.FONT_SEMI_SLAB_300}")`, + "--font-semi-slab-400": `url("${process.env.FONT_SEMI_SLAB_400}")`, + "--font-semi-slab-600": `url("${process.env.FONT_SEMI_SLAB_600}")`, + "--font-semi-slab-700": `url("${process.env.FONT_SEMI_SLAB_700}")`, + }, + }, + ], + preserve: false, + }), ]; let prodPlugins = [ diff --git a/source/sass/new-font.css b/source/sass/new-font.css new file mode 100644 index 00000000000..0f29ec8d401 --- /dev/null +++ b/source/sass/new-font.css @@ -0,0 +1,93 @@ +/* stylelint-disable prettier/prettier */ +body { + /* background: var(--test) !important; */ +} + +/* https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i */ + +@font-face { + font-display: swap; + font-family: Nunito Sans; + font-style: normal; + font-weight: 300; + src: var(--font-sans-300) format("woff2"); +} + +@font-face { + font-display: swap; + font-family: Nunito Sans; + font-style: normal; + font-weight: 400; + src: var(--font-sans-400) format("woff2"); +} + +@font-face { + font-display: swap; + font-family: Nunito Sans; + font-style: normal; + font-weight: 700; + src: var(--font-sans-700) format("woff2"); +} + +@font-face { + font-display: swap; + font-family: Nunito Sans; + font-style: normal; + font-weight: 800; + /* src: url("../_font/Sans/Normal/MozillaSansNormalBETA03-Light.woff2") + format("woff2"); */ +} + +@font-face { + font-display: swap; + font-family: Nunito Sans; + font-style: normal; + font-weight: 900; + /* src: url("../_font/Sans/Normal/MozillaSansNormalBETA03-Light.woff2") + format("woff2"); */ +} + + + + + +/* https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,500,600,700,300i,400i,600i */ + +@font-face { + font-display: swap; + font-family: Zilla Slab; + font-style: normal; + font-weight: 300; + src: var(--font-semi-slab-300) format("woff2"); +} + +@font-face { + font-display: swap; + font-family: Zilla Slab; + font-style: normal; + font-weight: 400; + src: var(--font-semi-slab-400) format("woff2"); +} + +/* @font-face { + font-display: swap; + font-family: Zilla Slab; + font-style: normal; + font-weight: 500; +} */ + +@font-face { + font-display: swap; + font-family: Zilla Slab; + font-style: normal; + font-weight: 600; + src: var(--font-semi-slab-600) format("woff2"); +} + +@font-face { + font-display: swap; + font-family: Zilla Slab; + font-style: normal; + font-weight: 700; + src: var(--font-semi-slab-700) format("woff2"); +}