feat: implement typography system updates, integrate custom Google fonts via next/font, and add marquee animation utilities

.github/workflows/build-preview.yml

@@ -38,7 +38,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-         node-version: 20
+         node-version: 24
 
       - name: Install dependencies
         run: yarn install --immutable

.github/workflows/ci.yml

@@ -17,13 +17,13 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
 
-      - name: Corepack enable 
+      - name: Corepack enable
         run: corepack enable
-        
+
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'yarn'
 
       - name: Install dependencies
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
           cache: 'yarn'
 
       - name: Install dependencies

.github/workflows/link-checker.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Get Token 
         uses: actions/create-github-app-token@v1

.github/workflows/production-deployment.yml

@@ -29,7 +29,7 @@ jobs:
             - name: Setup Node.js
               uses: actions/setup-node@v4
               with:
-                node-version: 20
+                node-version: 24
                 cache: 'yarn'
 
             - name: Install dependencies

.github/workflows/validate-tooling-data.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '24'
 
       - name: Install dependencies
         run: yarn add ajv ajv-formats js-yaml

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine
+FROM node:24-alpine
 
 WORKDIR /app
 

components/Code.tsx

@@ -7,11 +7,16 @@ export default function Code({ children }: { children: any }) {
   const blockContext = useContext(BlockContext);
   return (
     <code
-      className={classnames('font-mono rounded px-1.5 py-0.5', {
-        'bg-slate-100 dark:bg-slate-900': blockContext === null,
-        'bg-amber-200': blockContext === BlockContextValue.Information,
-        'text-white': blockContext === BlockContextValue.CodeBlock,
-      })}
+      className={classnames(
+        'font-mono text-[0.9em] tracking-tight rounded px-1.5 py-0.5',
+        {
+          'bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200':
+            blockContext === null,
+          'bg-amber-200 text-slate-900':
+            blockContext === BlockContextValue.Information,
+          'text-white': blockContext === BlockContextValue.CodeBlock,
+        },
+      )}
       data-test='code'
     >
       {children}

components/Headlines.tsx

@@ -66,7 +66,7 @@ const Headline = ({
     ...propAttributes,
     id: propAttributes?.slug || slug,
     className: cn(
-      'group cursor-pointer hover:underline',
+      'group cursor-pointer hover:underline scroll-mt-28',
       isActive && 'text-startBlue dark:text-startBlue',
       propAttributes?.className,
     ),
@@ -97,7 +97,7 @@ const Headline1Tag = ({ children, attributes }: TagProps) => (
   <h1
     {...attributes}
     className={cn(
-      'text-h1mobile md:text-h1 dark:text-slate-200  font-bold pt-10 mb-6',
+      'text-h1mobile md:text-h1 font-bold tracking-tighter pt-10 mb-6 text-slate-900 dark:text-slate-100',
       attributes?.className,
     )}
   >
@@ -108,7 +108,7 @@ const Headline2Tag = ({ children, attributes }: TagProps) => (
   <h2
     {...attributes}
     className={cn(
-      'text-h2mobile md:text-h2 dark:text-slate-200 font-semibold mt-10 mb-4',
+      'text-h2mobile md:text-h2 font-semibold tracking-tighter mt-12 mb-4 text-slate-900 dark:text-slate-100',
       attributes?.className,
     )}
   >
@@ -119,7 +119,7 @@ const Headline3Tag = ({ children, attributes }: TagProps) => (
   <h3
     {...attributes}
     className={cn(
-      'text-h3mobile dark:text-slate-200 md:text-h3 font-semibold mt-6 mb-3',
+      'text-h3mobile md:text-h3 font-semibold tracking-tight mt-8 mb-3 text-slate-800 dark:text-slate-200',
       attributes?.className,
     )}
   >
@@ -130,7 +130,7 @@ const Headline4Tag = ({ children, attributes }: TagProps) => (
   <h4
     {...attributes}
     className={cn(
-      'text-h4mobile dark:text-slate-200 md:text-h4 font-semibold mt-4 mb-2',
+      'text-h4mobile md:text-h4 font-semibold tracking-tight mt-6 mb-2 text-slate-800 dark:text-slate-200',
       attributes?.className,
     )}
   >

components/StyledMarkdownBlock.tsx

@@ -48,7 +48,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             p: {
               component: ({ children }) => (
-                <p className='text-slate-600 block leading-7 pb-4 dark:text-slate-300'>
+                <p className='text-[1.0625rem] leading-relaxed text-slate-700 dark:text-slate-300 block pb-5 max-w-prose'>
                   {children}
                 </p>
               ),
@@ -109,21 +109,21 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             ol: {
               component: ({ children }) => (
-                <ol className='list-decimal mt-2 mb-4 ml-5'>{children}</ol>
+                <ol className='list-decimal mt-3 mb-5 ml-6 space-y-1.5 max-w-prose text-[1.0625rem] text-slate-700 dark:text-slate-300'>
+                  {children}
+                </ol>
               ),
             },
             ul: {
               component: ({ children }) => (
-                <ul className='mt-2 mb-4 list-disc list-outside ml-5'>
+                <ul className='mt-3 mb-5 list-disc list-outside ml-6 space-y-1.5 max-w-prose text-[1.0625rem] text-slate-700 dark:text-slate-300'>
                   {children}
                 </ul>
               ),
             },
             li: {
               component: ({ children }) => (
-                <li className='mt-1 leading-7 text-slate-600 dark:text-slate-300'>
-                  {children}
-                </li>
+                <li className='leading-relaxed'>{children}</li>
               ),
             },
             table: {
@@ -151,7 +151,10 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             td: {
               component: ({ children, rowSpan }) => (
-                <td className='border border-slate-200 p-4' rowSpan={rowSpan}>
+                <td
+                  className='border border-slate-200 dark:border-slate-700 p-4 text-slate-700 dark:text-slate-300'
+                  rowSpan={rowSpan}
+                >
                   {children}
                 </td>
               ),
@@ -196,7 +199,7 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             },
             blockquote: {
               component: ({ children }) => (
-                <div className='bg-slate-50/50 dark:bg-slate-700 px-4 pt-4 mt-2 mb-4 border-l-2 border-slate-300'>
+                <div className='bg-slate-50/50 dark:bg-slate-700/50 px-5 pt-4 mt-3 mb-5 border-l-2 border-slate-300 dark:border-slate-500 rounded-r-md'>
                   {children}
                 </div>
               ),
@@ -366,16 +369,16 @@ export const StyledMarkdownBlock = ({ markdown }: StyledMarkdownBlockProps) => {
             Bigquote: {
               component: ({ children }) => {
                 return (
-                  <div className='text-h2mobile md:text-h2 text-center p-10 py-16 font-semibold text-slate-500 dark:text-slate-300 bg-slate-50 dark:bg-slate-700 mb-4 rounded-xl'>
-                    "{children}"
+                  <div className='font-serif text-h2mobile md:text-h3 italic text-center px-6 py-12 md:py-16 font-medium text-slate-600 dark:text-slate-200 bg-slate-50/70 dark:bg-slate-700/40 mb-6 mt-2 rounded-2xl border-y border-slate-200/60 dark:border-slate-600/40 tracking-tight'>
+                    &ldquo;{children}&rdquo;
                   </div>
                 );
               },
             },
             Regularquote: {
               component: ({ children }) => {
                 return (
-                  <div className='text-2xl my-5 mx-8 border-gray-300 bg-gray-300 dark:bg-gray-300 p-4 p-t-6 text-center dark:text-slate-800 rounded-xl'>
+                  <div className='font-serif text-xl md:text-2xl italic my-6 mx-4 md:mx-10 border-l-4 border-slate-300 dark:border-slate-500 bg-slate-50 dark:bg-slate-800/60 p-5 text-slate-700 dark:text-slate-200 rounded-r-xl leading-snug'>
                     {children}
                   </div>
                 );

lib/fonts.js

@@ -0,0 +1,23 @@
+import { Inter, JetBrains_Mono, Source_Serif_4 } from 'next/font/google';
+
+export const inter = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['300', '400', '500', '600', '700', '800'],
+  variable: '--font-sans',
+});
+
+export const jetbrainsMono = JetBrains_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '500', '700'],
+  variable: '--font-mono',
+});
+
+export const sourceSerif = Source_Serif_4({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '600', '700'],
+  style: ['normal', 'italic'],
+  variable: '--font-serif',
+});

next.config.js

@@ -10,7 +10,7 @@ const nextConfig = {
     if (dev && !isServer) {
       config.module.rules.push({
         test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/, /lib\/fonts/],
         use: [
           {
             loader: 'babel-loader',

package.json

@@ -23,7 +23,7 @@
     "test:coverage:all": "yarn test:coverage:e2e && yarn test:coverage:component && nyc merge .nyc_output coverage.json && nyc report --reporter=html --reporter=text"
   },
   "engines": {
-    "node": "^20.0.0"
+    "node": ">=20.0.0"
   },
   "dependencies": {
     "@docsearch/react": "3.9.0",
@@ -115,7 +115,7 @@
   },
   "packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb",
   "volta": {
-    "node": "20.9.0",
+    "node": "24.0.0",
     "yarn": "4.4.0"
   }
 }

pages/_app.page.tsx

@@ -3,15 +3,20 @@ import 'tailwindcss/tailwind.css';
 import React from 'react';
 import type { AppProps } from 'next/app';
 import { ThemeProvider } from 'next-themes';
+import { inter, jetbrainsMono, sourceSerif } from '~/lib/fonts';
 
 function MyApp({ Component, pageProps }: AppProps) {
   // @ts-ignore
   const getLayout = Component.getLayout || ((page: JSX.Element) => page);
   const AnyComponent = Component as any;
   return (
-    <ThemeProvider attribute='class'>
-      {getLayout(<AnyComponent {...pageProps} />, pageProps)}
-    </ThemeProvider>
+    <div
+      className={`${inter.variable} ${jetbrainsMono.variable} ${sourceSerif.variable}`}
+    >
+      <ThemeProvider attribute='class'>
+        {getLayout(<AnyComponent {...pageProps} />, pageProps)}
+      </ThemeProvider>
+    </div>
   );
 }
 

pages/_document.page.tsx

@@ -17,16 +17,6 @@ class MyDocument extends Document {
     return (
       <Html lang='en'>
         <Head>
-          <link rel='preconnect' href='https://fonts.googleapis.com' />
-          <link
-            rel='preconnect'
-            href='https://fonts.gstatic.com'
-            crossOrigin=''
-          />
-          <link
-            href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&family=JetBrains+Mono:wght@300;400&display=swap'
-            rel='stylesheet'
-          />
           <link
             rel='stylesheet'
             href='https://cdn.jsdelivr.net/npm/@docsearch/css@3'