feat(site): configure global fonts (#503)

G r e y · web-flow · commit 2818b3ce6d39 · 2022-03-22T13:57:12.000-04:00
* feat(site): configure global fonts

Summary:

Installs fira code and Inter

Impact:

A more pleasant dashboard experience in v2 that matches our prefer font
families from v1
diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js
@@ -4,6 +4,7 @@ import { light, dark } from "../src/theme"
 import { addDecorator } from "node_modules/@storybook/react"
 import { createMemoryHistory } from "history"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
+import "../src/theme/global-fonts"
 
 addDecorator(withThemes(ThemeProvider, [light, dark]))
 
diff --git a/site/package.json b/site/package.json
@@ -23,18 +23,20 @@
     "typegen": "xstate typegen 'src/**/*.ts'"
   },
   "dependencies": {
+    "@fontsource/fira-code": "4.5.5",
+    "@fontsource/inter": "4.5.4",
     "@material-ui/core": "4.9.4",
     "@material-ui/icons": "4.5.1",
     "@material-ui/lab": "4.0.0-alpha.42",
-    "@xstate/react": "^2.0.1",
+    "@xstate/react": "2.0.1",
     "axios": "0.26.1",
     "formik": "2.2.9",
     "history": "5.3.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-router-dom": "6.2.2",
     "swr": "1.2.2",
-    "xstate": "^4.30.6",
+    "xstate": "4.30.6",
     "yup": "0.32.11"
   },
   "devDependencies": {
@@ -47,15 +49,17 @@
     "@storybook/react": "6.4.19",
     "@testing-library/react": "12.1.4",
     "@types/express": "4.17.13",
-    "@types/jest": "^27.4.1",
+    "@types/jest": "27.4.1",
     "@types/node": "14.18.12",
     "@types/react": "17.0.40",
     "@types/react-dom": "17.0.13",
     "@types/superagent": "4.1.15",
     "@typescript-eslint/eslint-plugin": "5.15.0",
     "@typescript-eslint/parser": "5.15.0",
-    "@xstate/cli": "^0.1.4",
+    "@xstate/cli": "0.1.4",
     "copy-webpack-plugin": "10.2.4",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "3.4.1",
     "eslint": "8.11.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-import-resolver-alias": "1.1.2",
@@ -71,10 +75,12 @@
     "jest": "27.5.1",
     "jest-junit": "13.0.0",
     "jest-runner-eslint": "1.0.0",
-    "msw": "^0.39.2",
+    "mini-css-extract-plugin": "2.6.0",
+    "msw": "0.39.2",
     "prettier": "2.6.0",
     "react-hot-loader": "4.13.0",
     "sql-formatter": "4.0.2",
+    "style-loader": "3.3.1",
     "ts-jest": "27.1.3",
     "ts-loader": "9.2.8",
     "ts-node": "10.7.0",
diff --git a/site/src/app.tsx b/site/src/app.tsx
@@ -16,6 +16,7 @@ import { WorkspacePage } from "./pages/workspaces/[workspace]"
 import { HealthzPage } from "./pages/healthz"
 import { AuthAndNav, RequireAuth } from "./components/Page"
 import { XServiceProvider } from "./xServices/StateContext"
+import "./theme/global-fonts"
 
 export const App: React.FC = () => {
   return (
diff --git a/site/src/theme/global-fonts.ts b/site/src/theme/global-fonts.ts
@@ -0,0 +1,7 @@
+// Monospace fonts used for code, button styles, and banners
+import "@fontsource/fira-code/400.css"
+import "@fontsource/fira-code/600.css"
+// Main body copy font
+import "@fontsource/inter/300.css"
+import "@fontsource/inter/400.css"
+import "@fontsource/inter/600.css"
diff --git a/site/webpack.dev.ts b/site/webpack.dev.ts
@@ -10,6 +10,8 @@ import { commonWebpackConfig } from "./webpack.common"
 
 const commonPlugins = commonWebpackConfig.plugins || []
 
+const commonRules = commonWebpackConfig.module?.rules || []
+
 const config: Configuration = {
   ...commonWebpackConfig,
 
@@ -68,6 +70,20 @@ const config: Configuration = {
   // https://webpack.js.org/configuration/mode/#mode-development
   mode: "development",
 
+  module: {
+    rules: [
+      ...commonRules,
+
+      {
+        test: /\.css$/i,
+        // Use simple style-loader for CSS modules. This places styles directly
+        // in <style> tags which is great for development, but poor for loading
+        // in production
+        use: ["style-loader", "css-loader"],
+      },
+    ],
+  },
+
   output: {
     ...commonWebpackConfig.output,
 
diff --git a/site/webpack.prod.ts b/site/webpack.prod.ts
@@ -2,24 +2,46 @@
  * @fileoverview This file contains a production configuration for webpack
  * meant for producing optimized builds.
  */
-
 import CopyWebpackPlugin from "copy-webpack-plugin"
+import CSSMinimizerPlugin from "css-minimizer-webpack-plugin"
+import MiniCSSExtractPlugin from "mini-css-extract-plugin"
 import { Configuration } from "webpack"
 import { commonWebpackConfig } from "./webpack.common"
 
 const commonPlugins = commonWebpackConfig.plugins || []
 
+const commonRules = commonWebpackConfig.module?.rules || []
+
 export const config: Configuration = {
   ...commonWebpackConfig,
+
   mode: "production",
 
   // Don't produce sourcemaps in production, to minmize bundle size
   devtool: false,
 
+  module: {
+    rules: [
+      ...commonRules,
+      // CSS files -> optimized
+      {
+        test: /\.css$/i,
+        use: [MiniCSSExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+
+  optimization: {
+    minimizer: [
+      `...`, // This extends the 'default'/'existing' minimizers
+      new CSSMinimizerPlugin(),
+    ],
+  },
+
   output: {
     ...commonWebpackConfig.output,
 
-    // regenerate the entire out/ directory when producing production builds
+    // regenerate the entire dist/ directory when producing production builds
     clean: true,
   },
 
@@ -30,6 +52,13 @@ export const config: Configuration = {
     new CopyWebpackPlugin({
       patterns: [{ from: "static", to: "." }],
     }),
+
+    // MiniCSSExtractPlugin optimizes CSS
+    new MiniCSSExtractPlugin({
+      // REMARK: It's important to use [contenthash] here to invalidate caches.
+      filename: "[name].[contenthash].css",
+      chunkFilename: "[id].css",
+    }),
   ],
 }
 
diff --git a/site/yarn.lock b/site/yarn.lock
