test

MozillaFoundation · Apr 25, 2024 · 871c4da · 871c4da
1 parent d9e6ae6
commit 871c4da
Show file tree

Hide file tree

Showing 7 changed files with 270 additions and 9 deletions.
diff --git a/network-api/networkapi/templates/pages/base.html b/network-api/networkapi/templates/pages/base.html
@@ -67,6 +67,8 @@
 
             <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
             <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,500,600,700,300i,400i,600i">
+
+            <link rel="stylesheet" href="{% static "_font/new-font.css" %}">
         {% 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
@@ -19,8 +19,11 @@
             <link rel="stylesheet" href="{% static "_css/main.compiled.css" %}">
             {% if debug %}<link rel="stylesheet" href="{% static "_css/tailwind.compiled.css" %}">{% endif %}
 
+
             <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,300,700,300i,800,900,400i">
             <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400,500,600,700,300i,400i,600i">
+
+            <link rel="stylesheet" href="{% static "_font/new-font.css" %}">
         {% endblock %}
     </head>
     <body class="{% block bodyclass %}{% endblock %}" id="view-{% block body_id %}{% endblock %}">

diff --git a/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html b/network-api/networkapi/wagtailcustomization/templates/wagtailadmin/404.html
@@ -15,6 +15,7 @@
     <link rel="stylesheet" href="{% static 'wagtailadmin/css/layouts/404-additionals.css' %}" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,300,700">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,400">
+    <link rel="stylesheet" href="{% static "_font/new-font.css" %}">
 {% endblock %}
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 = [