From 37ae9f70447dfe80ac4e3e7c214db96876689174 Mon Sep 17 00:00:00 2001 From: Derrick Hammer Date: Wed, 27 Dec 2023 10:18:07 -0500 Subject: [PATCH] fix: need to add fonts back in --- app/root.tsx | 7 +++--- package-lock.json | 59 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 +++ tailwind.config.ts | 4 ++-- tsconfig.json | 3 ++- vite.config.ts | 17 ++++++++++++- 6 files changed, 85 insertions(+), 8 deletions(-) diff --git a/app/root.tsx b/app/root.tsx index d2e31b7..7d153d7 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -12,11 +12,10 @@ import Footer from "@/components/LayoutFooter"; // Adjust the import path as nee import "../styles/global.scss"; import { cssBundleHref } from "@remix-run/css-bundle"; // Adjust the import path as needed +import "unfonts.css"; + export const links: LinksFunction = () => [ ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), - // Add your Google font links here - // Example: { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400&display=swap" }, - // Example: { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Jaldi:wght@400&display=swap" }, ]; export const meta: MetaFunction = () => [ @@ -33,7 +32,7 @@ export default function Root() { - +
diff --git a/package-lock.json b/package-lock.json index 0829182..cad349f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "version": "0.1.0", "hasInstallScript": true, "dependencies": { + "@fontsource/be-vietnam-pro": "^5.0.18", + "@fontsource/jaldi": "^5.0.8", "@heroicons/react": "^2.0.18", "@lumeweb/s5-js": "^0.1.0-develop.24", "@prisma/client": "^5.6.0", @@ -55,6 +57,7 @@ "tailwindcss-animate": "^1.0.7", "ts-node": "^10.9.1", "typescript": "^5.2.2", + "unplugin-fonts": "^1.1.1", "vite": "^5.0.10", "vite-tsconfig-paths": "^4.2.2" } @@ -1283,6 +1286,16 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, + "node_modules/@fontsource/be-vietnam-pro": { + "version": "5.0.18", + "resolved": "https://registry.npmjs.org/@fontsource/be-vietnam-pro/-/be-vietnam-pro-5.0.18.tgz", + "integrity": "sha512-deIb6HgHYbz2onsmTC678cFvnQTZ4vojdn/LY+y/GTX12zAW4TWrw7C/4QwoTNgmzHROx7Rrazi2WGj6iogEgg==" + }, + "node_modules/@fontsource/jaldi": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/@fontsource/jaldi/-/jaldi-5.0.8.tgz", + "integrity": "sha512-SVOKAId55vGfjDvRBu6OAyN4tLVGk/G+AOGM+aFgGy16DvC+9/nH1qgJNGMyHX0blnH/01DWV3vyy/l60EceMg==" + }, "node_modules/@heroicons/react": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz", @@ -13346,6 +13359,37 @@ "node": ">= 0.8" } }, + "node_modules/unplugin": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.6.0.tgz", + "integrity": "sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==", + "dev": true, + "dependencies": { + "acorn": "^8.11.2", + "chokidar": "^3.5.3", + "webpack-sources": "^3.2.3", + "webpack-virtual-modules": "^0.6.1" + } + }, + "node_modules/unplugin-fonts": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/unplugin-fonts/-/unplugin-fonts-1.1.1.tgz", + "integrity": "sha512-/Aw/rL9D2aslGGM0vi+2R2aG508RSwawLnnBuo+JDSqYc4cHJO1R1phllhN6GysEhBp/6a4B6+vSFPVapWyAAw==", + "dev": true, + "dependencies": { + "fast-glob": "^3.2.12", + "unplugin": "^1.3.1" + }, + "peerDependencies": { + "@nuxt/kit": "^3.0.0", + "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "@nuxt/kit": { + "optional": true + } + } + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -14560,6 +14604,21 @@ "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" }, + "node_modules/webpack-sources": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", + "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==", + "dev": true, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/webpack-virtual-modules": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz", + "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==", + "dev": true + }, "node_modules/whatwg-fetch": { "version": "3.6.20", "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.20.tgz", diff --git a/package.json b/package.json index 220750e..e689b08 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,8 @@ "postinstall": "patch-package" }, "dependencies": { + "@fontsource/be-vietnam-pro": "^5.0.18", + "@fontsource/jaldi": "^5.0.8", "@heroicons/react": "^2.0.18", "@lumeweb/s5-js": "^0.1.0-develop.24", "@prisma/client": "^5.6.0", @@ -66,6 +68,7 @@ "tailwindcss-animate": "^1.0.7", "ts-node": "^10.9.1", "typescript": "^5.2.2", + "unplugin-fonts": "^1.1.1", "vite": "^5.0.10", "vite-tsconfig-paths": "^4.2.2" } diff --git a/tailwind.config.ts b/tailwind.config.ts index ca2ed52..97ed34b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,8 +13,8 @@ const config: Config = { }, extend: { fontFamily: { - main: "var(--font-be-vietnam-pro)", - secondary: "var(--font-jaldi)", + main: '"Be Vietnam Pro"', + secondary: '"Jaldi"', }, colors: { border: "hsl(var(--border))", diff --git a/tsconfig.json b/tsconfig.json index 22706a1..27b8b15 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -30,6 +30,7 @@ ] }, // Remix takes care of building everything in `remix build`. - "noEmit": true + "noEmit": true, + "types": ["unplugin-fonts/client"] } } diff --git a/vite.config.ts b/vite.config.ts index 44138dd..35b164b 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,9 +2,24 @@ import { unstable_vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; import { installGlobals } from "@remix-run/node"; import tsconfigPaths from "vite-tsconfig-paths"; +import Unfonts from "unplugin-fonts/vite"; installGlobals(); export default defineConfig({ - plugins: [remix({ ignoredRouteFiles: ["**/.*"] }), tsconfigPaths()], + plugins: [ + remix({ ignoredRouteFiles: ["**/.*"] }), + tsconfigPaths(), + Unfonts({ + fontsource: { + /** + * Fonts families lists + */ + families: [ + { name: "Be Vietnam Pro", weights: [400], subset: "latin" }, + { name: "Jaldi", weights: [400], subset: "latin" }, + ], + }, + }), + ], });