From 594006c90397ff6e2768f89c24068449ddefae43 Mon Sep 17 00:00:00 2001 From: G r e y Date: Sun, 20 Mar 2022 20:23:24 +0000 Subject: [PATCH 1/2] 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 --- site/.storybook/preview.js | 1 + site/package.json | 2 ++ site/src/app.tsx | 1 + site/src/theme/global-fonts.ts | 7 +++++++ site/yarn.lock | 10 ++++++++++ 5 files changed, 21 insertions(+) create mode 100644 site/src/theme/global-fonts.ts diff --git a/site/.storybook/preview.js b/site/.storybook/preview.js index aba800b5cd3da..5096007d2cc61 100644 --- 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 index f20d3ccabb8f6..0ebe59ba4cd68 100644 --- a/site/package.json +++ b/site/package.json @@ -23,6 +23,8 @@ "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", diff --git a/site/src/app.tsx b/site/src/app.tsx index e375f60d5810f..e9078ef4105be 100644 --- 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 new file mode 100644 index 0000000000000..3510ab06a585e --- /dev/null +++ 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/yarn.lock b/site/yarn.lock index b6fe1d874f493..86ef6db17807f 100644 --- a/site/yarn.lock +++ b/site/yarn.lock @@ -1262,6 +1262,16 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@fontsource/fira-code@4.5.5": + version "4.5.5" + resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.5.tgz#6e3ccb1095e3411d2c62b8f8cefb546b973c6eb9" + integrity sha512-bwsPmA5HW11SR0oIkgqSJYI3A8KP8aQLRCCH/EnR9gLHRuTFi1iG7GQ3wDTKy/AhECQJAKjXZ+mkVKlMxUaYCQ== + +"@fontsource/inter@4.5.4": + version "4.5.4" + resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.4.tgz#d6906fdaaf81242d975a1f9b6dedab7bfba77997" + integrity sha512-D0icTFpt9bWvB/OEXMztYf0bhUQZoDIYpsco5C7GVfxgKDRl8Jdn3N2aHHQqwjgRUUvRuyMv8HrRM8Hrt4U52w== + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" From 2dac9725a38c22c9bff1a0c5766972bb7d915c8d Mon Sep 17 00:00:00 2001 From: G r e y Date: Mon, 21 Mar 2022 20:24:09 +0000 Subject: [PATCH 2/2] fixup! feat(site): configure global fonts --- site/package.json | 14 +- site/webpack.dev.ts | 16 ++ site/webpack.prod.ts | 33 ++- site/yarn.lock | 483 +++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 523 insertions(+), 23 deletions(-) diff --git a/site/package.json b/site/package.json index 0ebe59ba4cd68..1df8072216806 100644 --- a/site/package.json +++ b/site/package.json @@ -28,7 +28,7 @@ "@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", @@ -36,7 +36,7 @@ "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": { @@ -49,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", @@ -73,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/webpack.dev.ts b/site/webpack.dev.ts index ffa2f46f8f7af..84339f9ef62f2 100644 --- 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