refactor: replace how raleway font is loaded and move assert source to be local file

Author: OliverDudgeon

next.config.ts

@@ -38,13 +38,6 @@ let nextConfig: NextConfig = {
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || undefined,
   transpilePackages: MONOREPO_MODE ? ["@squonk/mui-theme", "@squonk/sdf-parser"] : [],
-  sassOptions: {
-    silenceDeprecations: ["legacy-js-api"],
-    prependData: `$assetsURL: "${process.env.ASSET_URL ?? "https://squonk.informaticsmatters.org"}";`,
-  },
-  images: {
-    domains: ["squonk.informaticsmatters.org"],
-  },
   // Allow mdx content and mdx files as pages
   webpack(config, options) {
     if (options.isServer) {

package.json

@@ -95,7 +95,6 @@
     "react-dropzone": "14.3.5",
     "react-hook-form": "7.54.2",
     "react-plotly.js": "2.6.0",
-    "sass": "1.83.1",
     "sharp": "0.33.5",
     "typescript": "5.7.2",
     "use-immer": "0.7.0",

pnpm-lock.yaml

@@ -1,5 +1,7 @@
 import Image from "next/image";
 
+import logo from "../../../assets/graphics/app-logos/data-manager.svg";
+import logoWhite from "../../../assets/graphics/app-logos/data-manager-white-tear-variant.svg";
 import { useColorScheme } from "../../state/colorScheme";
 
 export interface LogoImageProps {
@@ -8,8 +10,6 @@ export interface LogoImageProps {
 
 const alt = "Squonk (animal) logo with title text 'Squonk' and subtitle 'Data Manager'";
 
-const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
-
 export const LogoImage = ({ variant }: LogoImageProps) => {
   const [scheme] = useColorScheme();
 
@@ -18,14 +18,8 @@ export const LogoImage = ({ variant }: LogoImageProps) => {
   }
 
   return variant === "dark" ? (
-    <Image
-      priority
-      alt={alt}
-      height="60"
-      src={basePath + "/DataManager_WhiteOpt2.svg"}
-      width="206"
-    />
+    <Image priority alt={alt} height="60" src={logoWhite} width="206" />
   ) : (
-    <Image priority alt={alt} height="60" src={basePath + "/DataManager.svg"} width="206" />
+    <Image priority alt={alt} height="60" src={logo} width="206" />
   );
 };

src/components/logo/LogoImage.tsx

@@ -1,4 +1,5 @@
 import { Fira_Mono as firaMono, Open_Sans as openSans } from "next/font/google";
+import localFont from "next/font/local";
 
 export const openSansFont = openSans({
   weight: "variable",
@@ -11,3 +12,20 @@ export const firaMonoFont = firaMono({
   weight: "400",
   subsets: ["latin"],
 });
+
+export const ralewayFont = localFont({
+  src: [
+    {
+      path: "../../assets/fonts/Raleway/Raleway-Regular.woff2",
+      style: "normal",
+    },
+    {
+      path: "../../assets/fonts/Raleway/Raleway-Italic.woff2",
+      style: "italic",
+    },
+    {
+      path: "../../assets/fonts/Raleway/Raleway-Bold.woff2",
+      weight: "700",
+    },
+  ],
+});

src/constants/fonts.ts

@@ -12,6 +12,7 @@ import {
 import A from "next/link";
 
 import { AppVersions } from "../components/AppVersions";
+import { ralewayFont } from "../constants/fonts";
 
 export const Footer = () => {
   const small = useMediaQuery((theme: Theme) => theme.breakpoints.up("sm"));
@@ -23,7 +24,7 @@ export const Footer = () => {
         <Grid container sx={{ p: 2 }}>
           <Grid size={{ sm: 6, xs: 12 }}>
             <Typography variant="h4">
-              <strong style={{ fontFamily: "Raleway" }}>
+              <strong style={{ fontFamily: ralewayFont.style.fontFamily }}>
                 <Link href="https://squonk.it/" rel="noopener noreferrer" target="_blank">
                   Squonk
                 </Link>

src/layouts/Footer.tsx

@@ -21,11 +21,10 @@ import { openSansFont } from "../constants/fonts";
 import { AS_API_URL, DM_API_URL } from "../constants/proxies";
 import { MDXComponentProvider } from "../context/MDXComponentProvider";
 
-import "../styles/globalStyles.scss";
-
 const openSansFontCss = `
-html {
+:root {
   font-family: ${openSansFont.style.fontFamily};
+  font-size: 14px;
 }
 `;
 

src/pages/_app.tsx

@@ -3,6 +3,7 @@ import { Box, Container, Grid2 as Grid, Typography } from "@mui/material";
 import Head from "next/head";
 import Image from "next/image";
 
+import sadderSquonk from "../../assets/graphics/sadder-squonk.svg";
 import { RoleRequired } from "../components/auth/RoleRequired";
 import { ProjectSelection } from "../components/projects/ProjectSelection";
 import { SelectProject } from "../components/userContext/SelectProject";
@@ -69,7 +70,7 @@ const Project = () => {
                   <Image
                     alt="Squonk in tears that you haven't selected a project"
                     height={150}
-                    src="https://squonk.informaticsmatters.org/assets/sadderSquonk.svg"
+                    src={sadderSquonk}
                     width={150}
                   />
                   <Box sx={{ marginY: 1 }}>