diff --git a/apps/website/gatsby-ssr.tsx b/apps/website/gatsby-ssr.tsx index b6416fdfe..53b774838 100644 --- 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 - , - ]); + fonts.forEach((font) => { + setHeadComponents([ + , + ]); + }); }; diff --git a/packages/schema/src/schema.graphql b/packages/schema/src/schema.graphql index 9300972cb..0c8f4a4dd 100644 --- 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 new file mode 100644 index 000000000..b680994dd --- /dev/null +++ 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 new file mode 100644 index 000000000..26b7dc854 --- /dev/null +++ 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 index 3eaa7ab2c..e1cc59bac 100644 --- 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 index 1a575d846..64cdc5c17 100644 --- 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 index 7f21c97ee..c1c15e247 100644 --- 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 deleted file mode 100644 index b0068201f..000000000 --- a/packages/ui/static/public/fonts-async.js +++ /dev/null @@ -1,7 +0,0 @@ -function loadFonts(fontFaces) { - console.log('hi from font loader') - return fontFaces; -} - -// Export the loadFonts function for use in the PostCSS configuration -module.exports = {loadFonts}; diff --git a/packages/ui/static/public/fonts/NotoSansGurmukhi-Bold.woff2 b/packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Bold.woff2 similarity index 100% rename from packages/ui/static/public/fonts/NotoSansGurmukhi-Bold.woff2 rename to packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Bold.woff2 diff --git a/packages/ui/static/public/fonts/NotoSansGurmukhi-Light.woff2 b/packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Light.woff2 similarity index 100% rename from packages/ui/static/public/fonts/NotoSansGurmukhi-Light.woff2 rename to packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Light.woff2 diff --git a/packages/ui/static/public/fonts/NotoSansGurmukhi-Medium.woff2 b/packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Medium.woff2 similarity index 100% rename from packages/ui/static/public/fonts/NotoSansGurmukhi-Medium.woff2 rename to packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Medium.woff2 diff --git a/packages/ui/static/public/fonts/NotoSansGurmukhi-Regular.woff2 b/packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Regular.woff2 similarity index 100% rename from packages/ui/static/public/fonts/NotoSansGurmukhi-Regular.woff2 rename to packages/ui/static/public/fonts/preload/NotoSansGurmukhi-Regular.woff2 diff --git a/packages/ui/static/public/fonts/NotoSansGurmukhi-SemiBold.woff2 b/packages/ui/static/public/fonts/preload/NotoSansGurmukhi-SemiBold.woff2 similarity index 100% rename from packages/ui/static/public/fonts/NotoSansGurmukhi-SemiBold.woff2 rename to packages/ui/static/public/fonts/preload/NotoSansGurmukhi-SemiBold.woff2 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8aca358f2..469530557 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -522,7 +522,7 @@ importers: version: 8.0.0-alpha.14(jest@29.7.0)(vitest@1.1.1) '@storybook/test-runner': specifier: ^0.16.0 - version: 0.16.0(@types/node@18.19.31) + version: 0.16.0 '@swc/cli': specifier: ^0.1.63 version: 0.1.63(@swc/core@1.3.102) @@ -615,7 +615,7 @@ importers: version: 5.3.3 vite: specifier: ^5.0.10 - version: 5.0.10(@types/node@18.19.31) + version: 5.0.10 vite-imagetools: specifier: ^6.2.9 version: 6.2.9 @@ -624,7 +624,7 @@ importers: version: 1.0.3 vitest: specifier: ^1.1.1 - version: 1.1.1(@types/node@18.19.31)(happy-dom@12.10.3) + version: 1.1.1(happy-dom@12.10.3) tests/e2e: devDependencies: @@ -5581,7 +5581,7 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@5.3.3) typescript: 5.3.3 - vite: 5.0.10(@types/node@18.19.31) + vite: 5.0.10 dev: true /@jridgewell/gen-mapping@0.3.5: @@ -8250,7 +8250,7 @@ packages: magic-string: 0.30.9 rollup: 3.29.4 typescript: 5.3.3 - vite: 5.0.10(@types/node@18.19.31) + vite: 5.0.10 transitivePeerDependencies: - encoding - supports-color @@ -8759,7 +8759,7 @@ packages: react: 18.2.0 react-docgen: 7.0.3 react-dom: 18.2.0(react@18.2.0) - vite: 5.0.10(@types/node@18.19.31) + vite: 5.0.10 transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -8833,7 +8833,7 @@ packages: - supports-color dev: true - /@storybook/test-runner@0.16.0(@types/node@18.19.31): + /@storybook/test-runner@0.16.0: resolution: {integrity: sha512-LDmNbKFoEDW/VS9o6KR8e1r5MnbCc5ZojUfi5yqLdq80gFD7BvilgKgV0lUh/xWHryzoy+Ids5LYgrPJZmU2dQ==} engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true @@ -8853,7 +8853,7 @@ packages: commander: 9.5.0 expect-playwright: 0.8.0 glob: 10.3.12 - jest: 29.7.0(@types/node@18.19.31) + jest: 29.7.0 jest-circus: 29.7.0 jest-environment-node: 29.7.0 jest-junit: 16.0.0 @@ -9311,10 +9311,10 @@ packages: chalk: 3.0.0 css.escape: 1.5.1 dom-accessibility-api: 0.6.3 - jest: 29.7.0(@types/node@18.19.31) + jest: 29.7.0 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.1.1(@types/node@18.19.31)(happy-dom@12.10.3) + vitest: 1.1.1(happy-dom@12.10.3) dev: true /@testing-library/react@14.1.2(react-dom@18.2.0)(react@18.2.0): @@ -10764,7 +10764,7 @@ packages: vite: ^4 || ^5 dependencies: '@swc/core': 1.4.13 - vite: 5.0.10(@types/node@18.0.0) + vite: 5.0.10 transitivePeerDependencies: - '@swc/helpers' dev: true @@ -10780,7 +10780,7 @@ packages: '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) magic-string: 0.27.0 react-refresh: 0.14.0 - vite: 5.0.10(@types/node@18.19.31) + vite: 5.0.10 transitivePeerDependencies: - supports-color dev: true @@ -14296,7 +14296,7 @@ packages: dependencies: '@babel/runtime': 7.24.4 - /create-jest@29.7.0(@types/node@18.19.31): + /create-jest@29.7.0: resolution: {integrity: sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -14305,7 +14305,7 @@ packages: chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@18.19.31) + jest-config: 29.7.0 jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -22088,7 +22088,7 @@ packages: - supports-color dev: true - /jest-cli@29.7.0(@types/node@18.19.31): + /jest-cli@29.7.0: resolution: {integrity: sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -22102,10 +22102,10 @@ packages: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@18.19.31) + create-jest: 29.7.0 exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@18.19.31) + jest-config: 29.7.0 jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -22116,6 +22116,45 @@ packages: - ts-node dev: true + /jest-config@29.7.0: + resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} + engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + peerDependencies: + '@types/node': '*' + ts-node: '>=9.0.0' + peerDependenciesMeta: + '@types/node': + optional: true + ts-node: + optional: true + dependencies: + '@babel/core': 7.24.4 + '@jest/test-sequencer': 29.7.0 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.24.4) + chalk: 4.1.2 + ci-info: 3.9.0 + deepmerge: 4.3.1 + glob: 7.2.3 + graceful-fs: 4.2.11 + jest-circus: 29.7.0 + jest-environment-node: 29.7.0 + jest-get-type: 29.6.3 + jest-regex-util: 29.6.3 + jest-resolve: 29.7.0 + jest-runner: 29.7.0 + jest-util: 29.7.0 + jest-validate: 29.7.0 + micromatch: 4.0.5 + parse-json: 5.2.0 + pretty-format: 29.7.0 + slash: 3.0.0 + strip-json-comments: 3.1.1 + transitivePeerDependencies: + - babel-plugin-macros + - supports-color + dev: true + /jest-config@29.7.0(@types/node@18.19.31): resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -22294,7 +22333,7 @@ packages: jest-runner: ^29.3.1 dependencies: expect-playwright: 0.8.0 - jest: 29.7.0(@types/node@18.19.31) + jest: 29.7.0 jest-circus: 29.7.0 jest-environment-node: 29.7.0 jest-process-manager: 0.4.0 @@ -22505,7 +22544,7 @@ packages: dependencies: ansi-escapes: 6.2.1 chalk: 5.3.0 - jest: 29.7.0(@types/node@18.19.31) + jest: 29.7.0 jest-regex-util: 29.6.3 jest-watcher: 29.7.0 slash: 5.1.0 @@ -22553,7 +22592,7 @@ packages: supports-color: 8.1.1 dev: true - /jest@29.7.0(@types/node@18.19.31): + /jest@29.7.0: resolution: {integrity: sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} hasBin: true @@ -22566,7 +22605,7 @@ packages: '@jest/core': 29.7.0 '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@18.19.31) + jest-cli: 29.7.0 transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -25510,6 +25549,7 @@ packages: /p-limit@4.0.0: resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} + requiresBuild: true dependencies: yocto-queue: 1.0.0 @@ -32161,6 +32201,27 @@ packages: - terser optional: true + /vite-node@1.1.1: + resolution: {integrity: sha512-2bGE5w4jvym5v8llF6Gu1oBrmImoNSs4WmRVcavnG2me6+8UQntTqLiAMFyiAobp+ZXhj5ZFhI7SmLiFr/jrow==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + dependencies: + cac: 6.7.14 + debug: 4.3.4 + pathe: 1.1.2 + picocolors: 1.0.0 + vite: 5.2.8 + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /vite-node@1.1.1(@types/node@18.0.0): resolution: {integrity: sha512-2bGE5w4jvym5v8llF6Gu1oBrmImoNSs4WmRVcavnG2me6+8UQntTqLiAMFyiAobp+ZXhj5ZFhI7SmLiFr/jrow==} engines: {node: ^18.0.0 || >=20.0.0} @@ -32218,6 +32279,41 @@ packages: resolution: {integrity: sha512-p4D8CFVhZS412SyQX125qxyzOgIFouwOcvjZWk6bQbNPR1wtaEzFT6jZxAjf1dejlGqa6fqHcuCvQea6EWUkUA==} dev: true + /vite@5.0.10: + resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || >=20.0.0 + less: '*' + lightningcss: ^1.21.0 + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + dependencies: + esbuild: 0.19.12 + postcss: 8.4.32 + rollup: 4.14.1 + optionalDependencies: + fsevents: 2.3.3 + dev: true + /vite@5.0.10(@types/node@18.0.0): resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} engines: {node: ^18.0.0 || >=20.0.0} @@ -32254,8 +32350,8 @@ packages: fsevents: 2.3.3 dev: true - /vite@5.0.10(@types/node@18.19.31): - resolution: {integrity: sha512-2P8J7WWgmc355HUMlFrwofacvr98DAjoE52BfdbwQtyLH06XKwaL/FMnmKM2crF0iX4MpmMKoDlNCB1ok7zHCw==} + /vite@5.2.8: + resolution: {integrity: sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: @@ -32282,9 +32378,8 @@ packages: terser: optional: true dependencies: - '@types/node': 18.19.31 - esbuild: 0.19.12 - postcss: 8.4.32 + esbuild: 0.20.2 + postcss: 8.4.38 rollup: 4.14.1 optionalDependencies: fsevents: 2.3.3 @@ -32667,6 +32762,63 @@ packages: - terser dev: true + /vitest@1.1.1(happy-dom@12.10.3): + resolution: {integrity: sha512-Ry2qs4UOu/KjpXVfOCfQkTnwSXYGrqTbBZxw6reIYEFjSy1QUARRg5pxiI5BEXy+kBVntxUYNMlq4Co+2vD3fQ==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@types/node': ^18.0.0 || >=20.0.0 + '@vitest/browser': ^1.0.0 + '@vitest/ui': ^1.0.0 + happy-dom: '*' + jsdom: '*' + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@types/node': + optional: true + '@vitest/browser': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + dependencies: + '@vitest/expect': 1.1.1 + '@vitest/runner': 1.1.1 + '@vitest/snapshot': 1.1.1 + '@vitest/spy': 1.1.1 + '@vitest/utils': 1.1.1 + acorn-walk: 8.3.2 + cac: 6.7.14 + chai: 4.4.1 + debug: 4.3.4 + execa: 8.0.1 + happy-dom: 12.10.3 + local-pkg: 0.5.0 + magic-string: 0.30.9 + pathe: 1.1.2 + picocolors: 1.0.0 + std-env: 3.7.0 + strip-literal: 1.3.0 + tinybench: 2.6.0 + tinypool: 0.8.3 + vite: 5.2.8 + vite-node: 1.1.1 + why-is-node-running: 2.2.2 + transitivePeerDependencies: + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /wait-on@7.2.0: resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==} engines: {node: '>=12.0.0'}