Merge pull request #19 from code4rena-dev/samus/reduce-bundle-size

Move fonts to reduce bundle size

Author: SamusElderg

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   staticDirs: ["../public"],
@@ -22,5 +24,23 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve = {
+        ...config.resolve,
+        alias: {
+          ...config.resolve.alias,
+          "/fonts": path.resolve(__dirname, "../public/fonts"),
+        },
+      };
+    } else {
+      config.resolve = {
+        alias: {
+          "/fonts": path.resolve(__dirname, "../public/fonts"),
+        },
+      };
+    }
+    return config;
+  },
 };
 export default config;

src/styles/fonts/Satoshi-Variable.ttf renamed to public/fonts/Satoshi-Variable.ttf

@@ -7,9 +7,9 @@
 
 @font-face {
   font-family: "Satoshi Variable";
-  src: url("../fonts/Satoshi-Variable.woff2") format("woff2"),
-    url("../fonts/Satoshi-Variable.woff") format("woff"),
-    url("../fonts/Satoshi-Variable.ttf") format("truetype");
+  src: url("/fonts/Satoshi-Variable.woff2") format("woff2"),
+    url("/fonts/Satoshi-Variable.woff") format("woff"),
+    url("/fonts/Satoshi-Variable.ttf") format("truetype");
   font-weight: 300 900;
   font-display: swap;
   font-style: normal;

src/styles/fonts/Satoshi-Variable.woff renamed to public/fonts/Satoshi-Variable.woff

@@ -4,5 +4,6 @@
     "devCommand": "npm run storybook",
     "installCommand": "npm install",
     "framework": null,
-    "outputDirectory": "./storybook-static"
+    "outputDirectory": "./storybook-static",
+    "public": true
 }