Merge pull request #466 from mwskwong/canary

Canary

next.config.ts

@@ -83,6 +83,7 @@ const config = {
   experimental: {
     reactCompiler: true,
     ppr: true,
+    pprFallbacks: true,
     optimizePackageImports: ['@mui/joy'],
   },
 } satisfies NextConfig;

package.json

@@ -25,8 +25,8 @@
     "@icons-pack/react-simple-icons": "^10.0.0",
     "@mui/base": "next",
     "@mui/joy": "next",
-    "@mui/material-nextjs": "^6.0.0",
-    "@mui/styled-engine": "^6.0.0",
+    "@mui/material-nextjs": "^6.0.1",
+    "@mui/styled-engine": "^6.0.1",
     "@prisma/client": "^5.19.0",
     "@react-email/body": "^0.0.10",
     "@react-email/container": "^0.0.14",
@@ -43,7 +43,7 @@
     "geist": "^1.3.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.436.0",
-    "merge-sx": "^3.0.1",
+    "merge-sx": "^3.2.0",
     "next": "canary",
     "next-mdx-remote": "^5.0.0",
     "react": "rc",
@@ -55,8 +55,8 @@
     "resend": "^4.0.0",
     "schema-dts": "^1.1.2",
     "server-only": "^0.0.1",
-    "shiki": "^1.14.1",
-    "valibot": "^0.39.0"
+    "shiki": "^1.15.1",
+    "valibot": "^0.40.0"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "canary",
@@ -75,11 +75,11 @@
     "prettier": "^3.3.3",
     "prettier-plugin-prisma": "^5.0.0",
     "prisma": "^5.19.0",
-    "type-fest": "^4.25.0",
+    "type-fest": "^4.26.0",
     "typescript": "^5.5.4"
   },
   "overrides": {
-    "@mui/system": "^6.0.0",
+    "@mui/system": "^6.0.1",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc"
   }

src/app/blog/[slug]/page.tsx

@@ -153,7 +153,7 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
                     size="sm"
                     target="_blank"
                   >
-                    <SiRss viewBox="-2 -2 28 28" />
+                    <SiRss className="si" />
                   </IconButton>
                 </Stack>
               </Stack>

src/components/blog/share-dropdown.tsx

@@ -76,7 +76,7 @@ export const ShareDropdown: FC<ShareDropdownProps> = ({ blog, ...props }) => {
         {socialMediaOptions.map(({ Icon, name, url }) => (
           <MenuItem key={name} component="a" href={url} target="_blank">
             <ListItemDecorator>
-              <Icon viewBox="-2 -2 28 28" />
+              <Icon className="si" />
             </ListItemDecorator>
             Share on {name}
           </MenuItem>

src/components/contentful.tsx

@@ -24,7 +24,7 @@ import * as contentfulIds from '@/constants/contentful-ids';
 
 const generateSimpleIcon = (SiIcon: IconType) => {
   const Icon: FC<ComponentProps<IconType>> = (props) => (
-    <SiIcon viewBox="-2 -2 28 28" {...props} />
+    <SiIcon className="si" {...props} />
   );
   Icon.displayName = SiIcon.displayName;
   return Icon;

src/components/footer.tsx

@@ -52,7 +52,7 @@ export const Footer: FC<FooterProps> = async (props) => {
             size="sm"
             target="_blank"
           >
-            <SiRss viewBox="-2 -2 28 28" />
+            <SiRss className="si" />
           </IconButton>
         </Stack>
 

src/components/guestbook/submission-list.tsx

@@ -144,7 +144,7 @@ export const SubmissionListError: FC<SubmissionListErrorProps> = ({
       sx={mergeSx({ '--Icon-fontSize': '4rem', alignItems: 'center' }, sx)}
       {...props}
     >
-      <Frown absoluteStrokeWidth size={4 * 16} />
+      <Frown strokeWidth={1} />
       <Typography sx={{ textAlign: 'center' }}>
         Something went wrong. Please try again later.
       </Typography>

src/components/home/hero.tsx

@@ -86,7 +86,7 @@ export const Hero: FC<HeroProps> = async ({ sx, ...props }) => {
             component="a"
             href={linkedinProfile?.url}
             size="lg"
-            startDecorator={<SiLinkedin viewBox="-2 -2 28 28" />}
+            startDecorator={<SiLinkedin className="si" />}
             target="_blank"
             variant="outlined"
           >

src/theme.ts → src/theme.tsx

@@ -3,6 +3,7 @@ import { type PaletteOptions } from '@mui/joy/styles/types';
 import { type Interpolation } from '@mui/styled-engine';
 import { GeistMono } from 'geist/font/mono';
 import { GeistSans } from 'geist/font/sans';
+import { Check } from 'lucide-react';
 import { type PartialDeep } from 'type-fest';
 
 declare module '@mui/joy/styles/types/zIndex' {
@@ -30,6 +31,9 @@ export const theme = extendTheme({
   },
   components: {
     JoyCheckbox: {
+      defaultProps: {
+        checkedIcon: <Check />,
+      },
       styleOverrides: {
         root: {
           WebkitTapHighlightColor: 'transparent',
@@ -59,8 +63,16 @@ export const theme = extendTheme({
   },
 });
 
-export const globalStyles = (theme: Theme) =>
-  ({
+export const globalStyles = (theme: Theme) => {
+  const iconStyle = {
+    color: 'var(--Icon-color, var(--joy-palette-text-icon))',
+    margin: 'var(--Icon-margin)',
+    fontSize: 'var(--Icon-fontSize, 1.5rem)',
+    width: '1em',
+    height: '1em',
+  };
+
+  return {
     ':root': {
       '--Section-paddingY': theme.spacing(10),
       '--Footer-paddingY': theme.spacing(6),
@@ -104,17 +116,8 @@ export const globalStyles = (theme: Theme) =>
     },
     main: { flex: 1 },
     section: { paddingBlock: 'var(--Section-paddingY)' },
-    svg: {
-      display: 'block',
-      // match icons, the 2nd one is for Simple Icons with modified view box
-      // such that the icon will appears to have the same size as Lucide icons
-      '&[viewBox="0 0 24 24"], &[viewBox="-2 -2 28 28"]': {
-        color: 'var(--Icon-color, var(--joy-palette-text-icon))',
-        margin: 'var(--Icon-margin)',
-        fontSize: 'var(--Icon-fontSize, 1.5rem)',
-        width: '1em',
-        height: '1em',
-        flexShrink: 0,
-      },
-    },
-  }) satisfies Interpolation<Theme>;
+    svg: { display: 'block' },
+    '.lucide': iconStyle,
+    '.si': { ...iconStyle, padding: '0.083em' },
+  } satisfies Interpolation<Theme>;
+};