Load web app fonts using next.js (#40)

Also dd web-app prod build to CI
carlgieringer · Nov 28, 2024 · 13adcc2 · 13adcc2
1 parent 9af2132
commit 13adcc2
Show file tree

Hide file tree

Showing 27 changed files with 62 additions and 49 deletions.
diff --git a/.github/workflows/ci-checks.yml b/.github/workflows/ci-checks.yml
@@ -41,7 +41,9 @@ jobs:
       - name: Build Dev
         run: npm run build-dev --workspace=packages/browser-extension
       - name: Build Prod
-        run: npm run build-prod --workspace=packages/browser-extension
+        run: |
+          npm run build-prod --workspace=packages/browser-extension
+          npm run build --workspace=packages/web-app
   playwright:
     runs-on: ubuntu-latest
     container:

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/graph-view/src/graphView/GraphView.scss b/packages/graph-view/src/graphView/GraphView.scss
@@ -1,20 +1,20 @@
 @use "sass:color";
-@import "../colors";
+@use "../colors" as c;
 
 p {
   margin: 0;
 }
 
 .hover-highlight {
   border-width: 3px;
-  border-color: $carrot;
+  border-color: c.$carrot;
   border-style: solid;
   transition: border 0.1s ease;
 }
 
 .selected {
   border-width: 3px;
-  border-color: $sunflower;
+  border-color: c.$sunflower;
   border-style: solid;
   transition: border 0.1s ease;
 }
@@ -32,8 +32,8 @@ p {
   cursor: pointer;
 }
 
-$positive-color: color.scale($nephritis, $lightness: 40%);
-$negative-color: color.scale($pomegranate, $lightness: 60%);
+$positive-color: color.scale(c.$nephritis, $lightness: 40%);
+$negative-color: color.scale(c.$pomegranate, $lightness: 60%);
 
 .node-outcome-positive {
   background-color: $positive-color;
@@ -42,7 +42,7 @@ $negative-color: color.scale($pomegranate, $lightness: 60%);
   background-color: $negative-color;
 }
 .node-outcome-neutral {
-  background-color: color.scale($belizeHole, $lightness: 80%);
+  background-color: color.scale(c.$belizeHole, $lightness: 80%);
 }
 .node-outcome-contradictory {
   background-image: linear-gradient(

diff --git a/packages/web-app/next.config.js b/packages/web-app/next.config.js
@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: [
@@ -25,15 +26,6 @@ const nextConfig = {
       ...config.resolve.extensions,
     ];
 
-    // Add rule for font files
-    config.module.rules.push({
-      test: /\.(woff|woff2|eot|ttf|otf)$/i,
-      type: "asset/resource",
-      generator: {
-        filename: "static/fonts/[hash][ext][query]",
-      },
-    });
-
     return config;
   },
   experimental: {

diff --git a/packages/web-app/package.json b/packages/web-app/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "connect-db-local": "psql -h localhost -p 5432 -U sophistree -d sophistree",
     "dev": "npm run prisma:generate && NODE_OPTIONS=--inspect next dev",
-    "build": "next build",
+    "build": "npm run prisma:generate && next build",
     "start": "next start",
     "check-all": "time (npm run type-check && npm run lint && npm run format-check && npm test) || { echo 'Checks failed'; exit 1; }",
     "format-fix": "prettier --write .",

diff --git a/packages/web-app/public/fonts/AntDesign.ttf b/packages/web-app/public/fonts/AntDesign.ttf
diff --git a/packages/web-app/public/fonts/Entypo.ttf b/packages/web-app/public/fonts/Entypo.ttf
diff --git a/packages/web-app/public/fonts/EvilIcons.ttf b/packages/web-app/public/fonts/EvilIcons.ttf
diff --git a/packages/web-app/public/fonts/Feather.ttf b/packages/web-app/public/fonts/Feather.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome.ttf b/packages/web-app/public/fonts/FontAwesome.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome5_Brands.ttf b/packages/web-app/public/fonts/FontAwesome5_Brands.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome5_Regular.ttf b/packages/web-app/public/fonts/FontAwesome5_Regular.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome5_Solid.ttf b/packages/web-app/public/fonts/FontAwesome5_Solid.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome6_Brands.ttf b/packages/web-app/public/fonts/FontAwesome6_Brands.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome6_Regular.ttf b/packages/web-app/public/fonts/FontAwesome6_Regular.ttf
diff --git a/packages/web-app/public/fonts/FontAwesome6_Solid.ttf b/packages/web-app/public/fonts/FontAwesome6_Solid.ttf
diff --git a/packages/web-app/public/fonts/Fontisto.ttf b/packages/web-app/public/fonts/Fontisto.ttf
diff --git a/packages/web-app/public/fonts/Foundation.ttf b/packages/web-app/public/fonts/Foundation.ttf
diff --git a/packages/web-app/public/fonts/Ionicons.ttf b/packages/web-app/public/fonts/Ionicons.ttf
diff --git a/packages/web-app/public/fonts/MaterialCommunityIcons.ttf b/packages/web-app/public/fonts/MaterialCommunityIcons.ttf
diff --git a/packages/web-app/public/fonts/MaterialIcons.ttf b/packages/web-app/public/fonts/MaterialIcons.ttf
diff --git a/packages/web-app/public/fonts/Octicons.ttf b/packages/web-app/public/fonts/Octicons.ttf
diff --git a/packages/web-app/public/fonts/SimpleLineIcons.ttf b/packages/web-app/public/fonts/SimpleLineIcons.ttf
diff --git a/packages/web-app/public/fonts/Zocial.ttf b/packages/web-app/public/fonts/Zocial.ttf
diff --git a/packages/web-app/src/app/layout.tsx b/packages/web-app/src/app/layout.tsx
@@ -1,10 +1,17 @@
+"use client";
+
 import React from "react";
 import { Providers } from "./providers";
+import { Roboto } from "next/font/google";
+import localFont from "next/font/local";
 
-export const metadata = {
-  title: "Sophistree",
-  description: "Argument mapping platform",
-};
+const roboto = Roboto({ weight: ["400", "500", "700"], subsets: ["latin"] });
+const materialIcons = localFont({
+  src: "../../public/fonts/MaterialIcons.ttf",
+});
+const materialCommunityIcons = localFont({
+  src: "../../public/fonts/MaterialCommunityIcons.ttf",
+});
 
 export default function RootLayout({
   children,
@@ -13,13 +20,18 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" style={{ height: "100%" }}>
-      <head>
-        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
-        <link
-          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-          rel="stylesheet"
-        />
-      </head>
+      <style jsx global>{`
+        html {
+          font-family: ${roboto.style.fontFamily};
+        }
+        // Override react-native-vector-icons font-family with next.js's local fonts
+        [style*="font-family: MaterialIcons;"] {
+          font-family: ${materialIcons.style.fontFamily} !important;
+        }
+        [style*="font-family: MaterialCommunityIcons;"] {
+          font-family: ${materialCommunityIcons.style.fontFamily} !important;
+        }
+      `}</style>
       <body style={{ height: "100%", margin: 0 }}>
         <Providers>{children}</Providers>
       </body>

diff --git a/packages/web-app/src/app/metadata.ts b/packages/web-app/src/app/metadata.ts
@@ -0,0 +1,6 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Sophistree",
+  description: "Argument mapping platform",
+};
diff --git a/packages/web-app/src/app/providers.tsx b/packages/web-app/src/app/providers.tsx
@@ -1,23 +1,12 @@
 "use client";
 
 import React from "react";
-import { Platform } from "react-native";
 import { PaperProvider } from "react-native-paper";
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <PaperProvider>
-      <div style={{ height: "100vh" }}>
-        {Platform.OS === "web" ? (
-          <style type="text/css">{`
-            @font-face {
-              font-family: "MaterialCommunityIcons";
-              src: url(${require("react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf")}) format('truetype');
-            }
-          `}</style>
-        ) : null}
-        {children}
-      </div>
+      <div style={{ height: "100vh" }}>{children}</div>
     </PaperProvider>
   );
 }