feat(theme): optimize Libre Baskerville

angrybacon · angrybacon · commit 3183162c4282 · 2025-12-22T23:45:21.000+01:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -8,7 +8,7 @@ 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';
@@ -22,8 +22,6 @@ 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 = {
@@ -39,6 +37,13 @@ export const viewport: Viewport = {
   width: 'device-width',
 };
 
+const baskerville = Libre_Baskerville({
+  display: 'swap',
+  subsets: ['latin'],
+  variable: '--font-baskerville',
+  weight: ['400', '700'],
+});
+
 const roboto = Roboto({
   display: 'swap',
   subsets: ['latin'],
@@ -49,19 +54,13 @@ 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' }}
-      >
+      <body className={[baskerville.variable, roboto.variable].join(' ')}>
         <InitColorSchemeScript attribute="data" />
         <AppRouterCacheProvider>
           <ThemeProvider theme={theme}>
@@ -107,7 +106,7 @@ export default async ({ children }: PropsWithChildren) => {
             </LayoutProvider>
           </ThemeProvider>
         </AppRouterCacheProvider>
-      </Box>
-    </Box>
+      </body>
+    </html>
   );
 };
diff --git a/components/Markdown/renderers/Code.tsx b/components/Markdown/renderers/Code.tsx
@@ -10,24 +10,26 @@ const CodeBlock = ({
   children,
   language,
 }: PropsWithChildren<{ language: string }>) => (
-  <Box
-    component={Prism}
-    customStyle={{
-      borderRadius: undefined,
-      margin: undefined,
-      padding: undefined,
-    }}
-    language={language || 'text'}
-    style={style}
-    sx={{
-      borderRadius: 4,
-      display: 'block',
-      fontSize: 'body2.fontSize',
-      overscrollBehaviorInline: 'contain',
-      p: 2,
-    }}
-  >
-    {typeof children === 'string' ? children.trim() : children}
+  <Box sx={{ borderRadius: 4, overflow: 'hidden' }}>
+    <Box
+      component={Prism}
+      customStyle={{
+        borderRadius: undefined,
+        margin: undefined,
+        padding: undefined,
+      }}
+      language={language || 'text'}
+      style={style}
+      sx={{
+        borderRadius: 'inherit',
+        display: 'block',
+        fontSize: 'body2.fontSize',
+        overscrollBehaviorInline: 'contain',
+        p: 2,
+      }}
+    >
+      {typeof children === 'string' ? children.trim() : children}
+    </Box>
   </Box>
 );
 
diff --git a/components/Markdown/renderers/Heading.tsx b/components/Markdown/renderers/Heading.tsx
@@ -19,7 +19,7 @@ export const Heading: Components[`h${1 | 2 | 3 | 4 | 5 | 6}`] = ({
     throw new Error('Could not guess heading level');
   }
   return (
-    <Typography id={id} sx={{ pt: 2 }} variant={node.tagName}>
+    <Typography id={id} sx={{ pt: { xs: 2, sm: 3 } }} variant={node.tagName}>
       {children}
     </Typography>
   );
diff --git a/components/Markdown/renderers/Quote.tsx b/components/Markdown/renderers/Quote.tsx
@@ -7,9 +7,6 @@ export const Quote: Components['blockquote'] = ({ children }) => (
     sx={{
       color: 'text.secondary',
       display: 'grid',
-      fontDisplay: 'swap',
-      fontFamily: 'Libre Baskerville, serif',
-      fontStyle: 'italic',
       gap: 2,
       pl: 2,
       py: 1,
@@ -24,9 +21,7 @@ export const Quote: Components['blockquote'] = ({ children }) => (
         position: 'absolute',
         width: 4,
       },
-      '> *': {
-        fontFamily: 'inherit',
-      },
+      '> *': { fontFamily: 'inherit' },
     }}
   >
     {children}
diff --git a/package.json b/package.json
@@ -27,7 +27,6 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "@fontsource/libre-baskerville": "5.2.10",
     "@korumite/kiwi": "3.4.2",
     "@mdi/js": "7.4.47",
     "@mdi/react": "1.6.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/theme/theme.ts b/theme/theme.ts
@@ -111,13 +111,18 @@ export const theme = responsiveFontSizes(
       MuiCssBaseline: {
         styleOverrides: {
           'blockquote, ol, p, pre, ul': { margin: 0, padding: 0 },
-          html: { fontSize: 18, scrollBehavior: 'smooth' },
-          em: {
+          'blockquote, em': {
             fontDisplay: 'swap',
             fontFamily: 'Libre Baskerville, serif',
             fontSize: '0.9em',
             fontStyle: 'italic',
           },
+          body: { display: 'flex' },
+          html: {
+            fontSize: 18,
+            scrollBehavior: 'smooth',
+            scrollPaddingTop: 64,
+          },
           'ol, ul': { paddingLeft: '1em' },
         },
       },

Original file line number	Diff line number	Diff line change
@@ -19,7 +19,7 @@ export const Heading: Components[`h${1 \| 2 \| 3 \| 4 \| 5 \| 6}`] = ({
`19`	`19`	`throw new Error('Could not guess heading level');`
`20`	`20`	`}`
`21`	`21`	`return (`
`22`		`- <Typography id={id} sx={{ pt: 2 }} variant={node.tagName}>`
	`22`	`+ <Typography id={id} sx={{ pt: { xs: 2, sm: 3 } }} variant={node.tagName}>`
`23`	`23`	`{children}`
`24`	`24`	`</Typography>`
`25`	`25`	`);`