feat: app migration scripts and fonts (#1267)

Author: annarhughes

.babelrc

@@ -26,7 +26,7 @@ jobs:
       - name: Use NodeJs
         uses: actions/setup-node@v4
         with:
-          node-version: "20.x"
+          node-version: '20.x'
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile --non-interactive

.github/workflows/build-and-test-prs.yml

@@ -10,7 +10,7 @@ name: Issue Comment Workflows
 
 on:
   workflow_run:
-    workflows: ["Label Stale Contributions"]
+    workflows: ['Label Stale Contributions']
     types:
       - completed
   issues:

.github/workflows/community-issue-comment.yml

@@ -4,7 +4,7 @@ const GoogleTagManagerScript = () => {
   return (
     <Script
       id="gtag"
-      strategy="worker"
+      strategy="afterInteractive"
       dangerouslySetInnerHTML={{
         __html: `
             window.dataLayer = window.dataLayer || [];

components/head/GoogleTagManagerScript.tsx

@@ -6,6 +6,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { NextComponentType } from 'next';
 import { IntlError, NextIntlClientProvider } from 'next-intl';
 import type { AppProps } from 'next/app';
+import { Montserrat, Open_Sans } from 'next/font/google';
 import { useRouter } from 'next/router';
 import { NextPageContext } from 'next/types';
 import { Hotjar } from 'nextjs-hotjar';
@@ -27,6 +28,25 @@ import { wrapper } from '../store/store';
 import '../styles/globals.css';
 import theme from '../styles/theme';
 
+// <link
+//   href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap"
+//   rel="stylesheet"
+// />;
+
+export const openSans = Open_Sans({
+  subsets: ['latin'],
+  weight: ['300', '400', '600'],
+  variable: '--font-open-sans',
+  display: 'swap',
+});
+
+export const montserrat = Montserrat({
+  subsets: ['latin'],
+  weight: ['300', '400', '500'],
+  variable: '--font-montserrat',
+  display: 'swap',
+});
+
 // For SSG compatibility with MUI
 // Client-side emotion cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
@@ -65,31 +85,33 @@ function MyApp(props: MyAppProps) {
   }
 
   return (
-    <ErrorBoundary>
-      <NextIntlClientProvider
-        messages={pageProps.messages}
-        locale={router.locale}
-        timeZone="Europe/London"
-        onError={onIntlError}
-      >
-        <DefaultHeadMetadata />
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <TopBar />
-          {pathHead !== 'partner-admin' && <LeaveSiteButton />}
-          <AuthGuard>
-            <Component {...pageProps} />
-          </AuthGuard>
-          <Footer />
-          <Consent />
-          {!!process.env.NEXT_PUBLIC_HOTJAR_ID && process.env.NEXT_PUBLIC_ENV !== 'local' && (
-            <Hotjar id={process.env.NEXT_PUBLIC_HOTJAR_ID} sv={6} strategy="lazyOnload" />
-          )}
-          {/* Vercel analytics */}
-          <Analytics />
-        </ThemeProvider>
-      </NextIntlClientProvider>
-    </ErrorBoundary>
+    <div className={`${openSans.variable} ${montserrat.variable}`}>
+      <ErrorBoundary>
+        <NextIntlClientProvider
+          messages={pageProps.messages}
+          locale={router.locale}
+          timeZone="Europe/London"
+          onError={onIntlError}
+        >
+          <DefaultHeadMetadata />
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <TopBar />
+            {pathHead !== 'partner-admin' && <LeaveSiteButton />}
+            <AuthGuard>
+              <Component {...pageProps} />
+            </AuthGuard>
+            <Footer />
+            <Consent />
+            {!!process.env.NEXT_PUBLIC_HOTJAR_ID && process.env.NEXT_PUBLIC_ENV !== 'local' && (
+              <Hotjar id={process.env.NEXT_PUBLIC_HOTJAR_ID} sv={6} strategy="lazyOnload" />
+            )}
+            {/* Vercel analytics */}
+            <Analytics />
+          </ThemeProvider>
+        </NextIntlClientProvider>
+      </ErrorBoundary>
+    </div>
   );
 }
 

pages/_app.tsx

@@ -21,10 +21,6 @@ export default class MyDocument extends Document<NewRelicProps> {
             type="text/javascript"
             dangerouslySetInnerHTML={{ __html: this.props.browserTimingHeader }}
           />
-          <link
-            href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap"
-            rel="stylesheet"
-          />
           <GoogleTagManagerScript />
           <RollbarScript />
         </Head>

pages/_document.tsx

@@ -39,21 +39,21 @@ let theme = createTheme({
     borderRadius: 20,
   },
   typography: {
-    fontFamily: 'Open Sans, sans-serif',
+    fontFamily: 'var(--font-open-sans)',
     h1: {
-      fontFamily: 'Montserrat, sans-serif',
+      fontFamily: 'var(--font-montserrat)',
       fontSize: '2.25rem',
       fontWeight: 500,
       marginBottom: '1.75rem',
     },
     h2: {
-      fontFamily: 'Montserrat, sans-serif',
+      fontFamily: 'var(--font-montserrat)',
       fontSize: '1.875rem',
       fontWeight: 400,
       marginBottom: '1rem',
     },
     h3: {
-      fontFamily: 'Montserrat, sans-serif',
+      fontFamily: 'var(--font-montserrat)',
       fontSize: '1.375rem',
       marginBottom: '1rem',
       lineHeight: 1.4,
@@ -64,7 +64,7 @@ let theme = createTheme({
     },
     subtitle1: {
       fontSize: '1.375rem',
-      fontFamily: 'Montserrat, sans-serif',
+      fontFamily: 'var(--font-montserrat)',
       fontStyle: 'italic',
     },
     body1: {