refactor(SLB-222): preload fonts by directory

AmazeeLabs · Apr 19, 2024 · 9cdaf73 · 9cdaf73
1 parent 6de4958
commit 9cdaf73
Show file tree

Hide file tree

Showing 14 changed files with 240 additions and 53 deletions.
diff --git a/apps/website/gatsby-ssr.tsx b/apps/website/gatsby-ssr.tsx
@@ -1,5 +1,5 @@
 import { Locale } from '@custom/schema';
-import { loadFonts } from '@custom/ui/fonts-async';
+import { fonts } from '@custom/ui/fonts';
 import { GatsbySSR } from 'gatsby';
 import React from 'react';
 
@@ -26,15 +26,16 @@ export const onRenderBody: GatsbySSR['onRenderBody'] = ({
     }
   }
 
-  setHeadComponents([
-    // here you will map config file consumed
-    <link
-      rel="preload"
-      href="/fonts/NotoSansGurmukhi-Regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossOrigin="anonymous"
-      key="NotoSansGurmukhi"
-    />,
-  ]);
+  fonts.forEach((font) => {
+    setHeadComponents([
+      <link
+        rel="preload"
+        href={font}
+        as="font"
+        type="font/woff2"
+        crossOrigin="anonymous"
+        key="NotoSansGurmukhi"
+      />,
+    ]);
+  });
 };
diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql
@@ -194,7 +194,7 @@ type Hero {
 }
 
 union PageContent @resolveEditorBlockType =
-    BlockMarkup
+  | BlockMarkup
   | BlockMedia
   | BlockForm
   | BlockImageTeasers

diff --git a/packages/ui/fonts.d.ts b/packages/ui/fonts.d.ts
@@ -0,0 +1 @@
+export const fonts: string[];
diff --git a/packages/ui/fonts.js b/packages/ui/fonts.js
@@ -0,0 +1,7 @@
+import { readdirSync } from 'fs';
+
+export const fonts = readdirSync('./static/public/fonts/preload').map(
+  (font) => {
+    return `/fonts/preload/${font}`;
+  },
+);
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -13,14 +13,17 @@
     "./styles.css": [
       "./build/styles.css"
     ],
-    "./fonts-async": [
-      "./build/fonts-async.js"
+    "./fonts": [
+      "./fonts.js"
     ]
   },
   "typesVersions": {
     "*": {
       "routes/*": [
         "build/components/Routes/*.d.ts"
+      ],
+      "fonts": [
+        "fonts.d.ts"
       ]
     }
   },
@@ -96,7 +99,6 @@
     "nyc": "^15.1.0",
     "postcss": "^8.4.32",
     "postcss-cli": "^11.0.0",
-    "postcss-font-magician": "^4.0.0",
     "postcss-import": "^16.0.0",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-prefix-selector": "^1.16.0",

diff --git a/packages/ui/src/components/Atoms/Fonts.css b/packages/ui/src/components/Atoms/Fonts.css
@@ -1,3 +1,38 @@
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/preload/NotoSansGurmukhi-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/preload/NotoSansGurmukhi-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/preload/NotoSansGurmukhi-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/preload/NotoSansGurmukhi-SemiBold.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Noto Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/preload/NotoSansGurmukhi-Bold.woff2') format('woff2');
+}
+
 html, body {
   font-family: 'Noto Sans', 'Helvetica', sans-serif;
 }
diff --git a/packages/ui/src/postcss.config.cjs b/packages/ui/src/postcss.config.cjs
@@ -11,9 +11,5 @@ module.exports = {
             '.gutenberg__editor .edit-post-visual-editor__content-area',
         }[process.env.PREFIX] || '',
     },
-		'postcss-font-magician': {
-      hosted: ['../static/public/fonts'],
-      // async: '../static/public/fonts-async.js',
-		}
   },
 };
diff --git a/packages/ui/static/public/fonts-async.js b/packages/ui/static/public/fonts-async.js
diff --git a/.../public/fonts/NotoSansGurmukhi-Bold.woff2 → ...fonts/preload/NotoSansGurmukhi-Bold.woff2 b/.../public/fonts/NotoSansGurmukhi-Bold.woff2 → ...fonts/preload/NotoSansGurmukhi-Bold.woff2
diff --git a/...public/fonts/NotoSansGurmukhi-Light.woff2 → ...onts/preload/NotoSansGurmukhi-Light.woff2 b/...public/fonts/NotoSansGurmukhi-Light.woff2 → ...onts/preload/NotoSansGurmukhi-Light.woff2
diff --git a/...ublic/fonts/NotoSansGurmukhi-Medium.woff2 → ...nts/preload/NotoSansGurmukhi-Medium.woff2 b/...ublic/fonts/NotoSansGurmukhi-Medium.woff2 → ...nts/preload/NotoSansGurmukhi-Medium.woff2
diff --git a/...blic/fonts/NotoSansGurmukhi-Regular.woff2 → ...ts/preload/NotoSansGurmukhi-Regular.woff2 b/...blic/fonts/NotoSansGurmukhi-Regular.woff2 → ...ts/preload/NotoSansGurmukhi-Regular.woff2
diff --git a/...lic/fonts/NotoSansGurmukhi-SemiBold.woff2 → ...s/preload/NotoSansGurmukhi-SemiBold.woff2 b/...lic/fonts/NotoSansGurmukhi-SemiBold.woff2 → ...s/preload/NotoSansGurmukhi-SemiBold.woff2