refactor(dependencies): migrate to Material 7

.github/actions/setup/action.yaml

@@ -0,0 +1,12 @@
+runs:
+  steps:
+    - uses: pnpm/action-setup@v4
+      with:
+        version: latest
+    - uses: actions/setup-node@v4
+      with:
+        cache: pnpm
+        node-version-file: package.json
+    - shell: bash
+      run: pnpm install --frozen-lockfile
+  using: 'composite'

.github/workflows/release.yaml

@@ -0,0 +1,69 @@
+name: Release
+
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+
+on: push
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Setup dependencies
+        uses: ./.github/actions/setup
+      - name: Run lint tasks
+        run: pnpm lint
+
+  tests:
+    name: Tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Setup dependencies
+        uses: ./.github/actions/setup
+      - name: Run tests
+        run: pnpm test:coverage >> $GITHUB_STEP_SUMMARY
+
+  preview:
+    name: Preview
+    needs: [lint, tests]
+    outputs:
+      url: ${{ steps.deploy.outputs.url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Setup dependencies
+        uses: ./.github/actions/setup
+      - name: Set up Vercel
+        run: pnpm add --global vercel@latest
+      - name: Pulling project settings
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} >> $GITHUB_STEP_SUMMARY
+
+  release:
+    name: Release
+    if: ${{ github.ref == 'refs/heads/master' }}
+    needs: preview
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v6
+      - name: Setup dependencies
+        uses: ./.github/actions/setup
+      - name: Set up Vercel
+        run: pnpm add --global vercel@latest
+      - name: Pulling project settings
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} >> $GITHUB_STEP_SUMMARY

.gitignore

@@ -1,7 +1,5 @@
-.husky/_/
 .next/
-.vercel/
+build/
 coverage/
 node_modules/
-.env*.local
 tsconfig.tsbuildinfo

.nvmrc

@@ -1 +1 @@
-22.19.0
+24.12.0

CONTRIBUTING.org

@@ -52,9 +52,8 @@ simpler titles.
 A number of custom directives are parsed within Markdown content. This allows
 more feature than what Markdown already supports by default. Visit =/markdown=
 anywhere the Wiki is hosted to see what it actually looks like. For the
-technicalities, the supported specifications for directives in Markdown are
-presented
-[[https://talk.commonmark.org/t/generic-directives-plugins-syntax/444][here]].
+technicalities, see the supported specifications for
+[[https://talk.commonmark.org/t/generic-directives-plugins-syntax/444][directives]].
 
 We will assume you know the differences between /inline/, /leaf/ and /container/
 directives.

app/(welcome)/Articles.tsx

@@ -1,14 +1,19 @@
 'use client';
 
-import { Button, ButtonGroup, Grid2 as Grid } from '@mui/material';
-import { useEffect, useRef, useState, type ComponentProps } from 'react';
+import { Button, ButtonGroup, Grid } from '@mui/material';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+} from 'react';
 
 import { ArticleCard } from '@/components/ArticleCard/ArticleCard';
 
 const INITIAL_SIZE = 4;
 
 type Props = {
-  articles: ComponentProps<typeof ArticleCard>[];
+  articles: ComponentPropsWithoutRef<typeof ArticleCard>[];
 };
 
 export const Articles = ({ articles }: Props) => {

app/(welcome)/page.tsx

@@ -1,4 +1,4 @@
-import { Grid2 as Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 import { type Metadata } from 'next';
 
 import { Markdown } from '@/components/Markdown/Markdown';

app/layout.tsx

@@ -8,35 +8,42 @@ import {
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 import { type Metadata, type Viewport } from 'next';
-import { Roboto } from 'next/font/google';
+import { Libre_Baskerville, Roboto } from 'next/font/google';
 import { type PropsWithChildren } from 'react';
 
 import { Drawer } from '@/components/Drawer/Drawer';
 import { Footer } from '@/components/Footer/Footer';
 import { Header } from '@/components/Header/Header';
 import { Sidebar } from '@/components/Sidebar/Sidebar';
 import { LayoutProvider } from '@/contexts/Layout';
-import { TrackingProvider } from '@/contexts/Tracking';
+import { Tracking } from '@/contexts/Tracking';
 import { primary } from '@/theme/palette';
 import { theme } from '@/theme/theme';
 import { getClock } from '@/tools/clock/getClock';
 import { MENU } from '@/tools/markdown/menu';
 
-import '@fontsource/libre-baskerville';
-
 export const dynamicParams = false;
 
 export const metadata: Metadata = {
   description: 'The Doomsday Wiki',
+  keywords: ['Doomsday', 'Legacy', 'Magic: the Gathering'],
   title: { default: 'doomsday.wiki', template: '%s • doomsday.wiki' },
 };
 
 export const viewport: Viewport = {
   initialScale: 1,
+  minimumScale: 1,
   themeColor: primary[500],
   width: 'device-width',
 };
 
+const baskerville = Libre_Baskerville({
+  display: 'swap',
+  subsets: ['latin'],
+  variable: '--font-baskerville',
+  weight: ['400', '700'],
+});
+
 const roboto = Roboto({
   display: 'swap',
   subsets: ['latin'],
@@ -47,65 +54,59 @@ const roboto = Roboto({
 export default async ({ children }: PropsWithChildren) => {
   const clock = await getClock();
   return (
-    <Box
-      component="html"
+    <html
       lang="en"
       suppressHydrationWarning
       // NOTE Pad with the tallest toolbar: extra spacing in mobile, who's going
       //      to complain?
-      sx={{ scrollPaddingTop: 64 }}
     >
-      <Box
-        className={roboto.variable}
-        component="body"
-        sx={{ display: 'flex' }}
-      >
-        <InitColorSchemeScript attribute="class" />
-        <TrackingProvider>
-          <AppRouterCacheProvider>
-            <ThemeProvider theme={theme}>
-              <CssBaseline />
-              <LayoutProvider>
-                <Sidebar>
-                  <Drawer clock={clock} menu={MENU} />
-                </Sidebar>
-                <Header />
-                <Container
-                  component="main"
-                  maxWidth="xl"
+      <body className={[baskerville.variable, roboto.variable].join(' ')}>
+        <InitColorSchemeScript attribute="data" />
+        <AppRouterCacheProvider>
+          <ThemeProvider theme={theme}>
+            <Tracking />
+            <CssBaseline />
+            <LayoutProvider>
+              <Sidebar>
+                <Drawer clock={clock} menu={MENU} />
+              </Sidebar>
+              <Header />
+              <Container
+                component="main"
+                maxWidth="xl"
+                sx={{
+                  display: 'grid',
+                  gridTemplateAreas:
+                    '"offset offset" "banner banner" "content toc" "footer toc"',
+                  gridTemplateColumns: '1fr auto',
+                  gridTemplateRows: 'auto auto 1fr auto',
+                  minHeight: '100vh',
+                }}
+              >
+                <Toolbar role="presentation" sx={{ gridArea: 'offset' }} />
+                <Box
                   sx={{
-                    display: 'grid',
-                    gridTemplateAreas:
-                      '"offset offset" "banner banner" "content toc" "footer toc"',
-                    gridTemplateColumns: '1fr auto',
-                    gridTemplateRows: 'auto auto 1fr auto',
-                    minHeight: '100vh',
+                    display: 'contents',
+                    overflowWrap: 'anywhere',
+                    '> *': { mt: { xs: 2, sm: 3 } },
                   }}
                 >
-                  <Toolbar role="presentation" sx={{ gridArea: 'offset' }} />
-                  <Box
-                    sx={{
-                      display: 'contents',
-                      overflowWrap: 'anywhere',
-                      '> *': { mt: { xs: 2, sm: 3 } },
-                    }}
-                  >
-                    {children}
-                  </Box>
-                  <Footer
-                    sx={{
-                      gridArea: 'footer',
-                      pb: 3,
-                      position: 'relative', // NOTE Force content above 404 background
-                      pt: 8,
-                    }}
-                  />
-                </Container>
-              </LayoutProvider>
-            </ThemeProvider>
-          </AppRouterCacheProvider>
-        </TrackingProvider>
-      </Box>
-    </Box>
+                  {children}
+                </Box>
+                <Footer
+                  sx={{
+                    gridArea: 'footer',
+                    pb: { xs: 2, sm: 3 },
+                    // NOTE Force content above 404 background
+                    position: 'relative',
+                    pt: 8,
+                  }}
+                />
+              </Container>
+            </LayoutProvider>
+          </ThemeProvider>
+        </AppRouterCacheProvider>
+      </body>
+    </html>
   );
 };