From 427aa2067eacf3e991a1304b902a241a2dd66a18 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Thu, 14 Sep 2023 00:26:13 +0200
Subject: [PATCH] [website] Small tweaks for performance

---
 docs/src/components/home/CompaniesGrid.tsx             | 2 +-
 docs/src/components/home/DesignKits.tsx                | 9 ++++-----
 docs/src/components/home/References.tsx                | 4 +---
 docs/src/components/home/StoreTemplatesBanner.tsx      | 2 ++
 docs/src/components/pricing/PricingTable.tsx           | 2 +-
 docs/src/components/productBaseUI/BaseUIHero.tsx       | 2 +-
 docs/src/components/productCore/CoreHero.tsx           | 2 +-
 docs/src/components/productCore/CoreHeroEnd.tsx        | 4 ++--
 docs/src/components/productCore/CoreProducts.tsx       | 7 ++-----
 docs/src/components/productDesignKit/DesignKitHero.tsx | 2 +-
 docs/src/components/productMaterial/MaterialHero.tsx   | 2 +-
 docs/src/components/productTemplate/TemplateHero.tsx   | 2 +-
 docs/src/components/productX/XHero.tsx                 | 2 +-
 docs/src/modules/components/TopLayoutBlog.js           | 9 ++++++---
 14 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx
index a708cfd1269849..0f6b963bda358d 100644
--- a/docs/src/components/home/CompaniesGrid.tsx
+++ b/docs/src/components/home/CompaniesGrid.tsx
@@ -170,7 +170,7 @@ export default function CompaniesGrid({ data }: { data: Array<IconImageProps> })
             objectFit: 'contain',
           }}
         >
-          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} {...imgProps} />
+          <IconImage alt={imgProps.alt || `${imgProps.name} logo`} loading="eager" {...imgProps} />
         </Grid>
       ))}
     </Grid>
diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx
index 1958d119791547..e1e51ea089bc7e 100644
--- a/docs/src/components/home/DesignKits.tsx
+++ b/docs/src/components/home/DesignKits.tsx
@@ -64,7 +64,8 @@ const Anchor = styled('a')(({ theme }) => [
 const DesignToolLink = React.forwardRef<
   HTMLAnchorElement,
   React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'adobexd' }>
->(function DesignToolLink({ brand, ...props }, ref) {
+>(function DesignToolLink(props, ref) {
+  const { brand, ...other } = props;
   return (
     <Anchor
       ref={ref}
@@ -80,10 +81,8 @@ const DesignToolLink = React.forwardRef<
         }[brand]
       }
       target="_blank"
-      {...props}
-    >
-      {props.children}
-    </Anchor>
+      {...other}
+    />
   );
 });
 
diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx
index 290c13e6c61824..54a8d76e109410 100644
--- a/docs/src/components/home/References.tsx
+++ b/docs/src/components/home/References.tsx
@@ -15,7 +15,7 @@ export { CORE_CUSTOMERS, ADVANCED_CUSTOMERS, DESIGNKITS_CUSTOMERS, TEMPLATES_CUS
 
 const CompaniesGrid = dynamic(() => import('./CompaniesGrid'));
 
-function References({
+export default function References({
   companies,
 }: {
   companies:
@@ -50,5 +50,3 @@ function References({
     </Section>
   );
 }
-
-export default References;
diff --git a/docs/src/components/home/StoreTemplatesBanner.tsx b/docs/src/components/home/StoreTemplatesBanner.tsx
index d00990c7441821..b71858367e3545 100644
--- a/docs/src/components/home/StoreTemplatesBanner.tsx
+++ b/docs/src/components/home/StoreTemplatesBanner.tsx
@@ -28,6 +28,7 @@ const Image = styled('img')(({ theme }) => ({
   borderColor: (theme.vars || theme).palette.grey[400],
   borderRadius: (theme.vars || theme).shape.borderRadius,
   objectFit: 'cover',
+  objectPosition: 'top',
   boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
   ...theme.applyDarkStyles({
     borderColor: (theme.vars || theme).palette.grey[800],
@@ -108,6 +109,7 @@ const StoreTemplateImage = React.forwardRef<
         Object.keys(linkMapping).indexOf(brand) + 1
       }light.jpg`}
       alt=""
+      loading="lazy"
       sx={(theme) =>
         theme.applyDarkStyles({
           content: `url(/static/branding/store-templates/template-${
diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
index 619633036f17c4..3e2c12975d1b15 100644
--- a/docs/src/components/pricing/PricingTable.tsx
+++ b/docs/src/components/pricing/PricingTable.tsx
@@ -57,7 +57,7 @@ export function PlanName({
         fontWeight="bold"
         sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', pr: 0.5 }}
       >
-        <IconImage name={iconName} sx={{ mr: 1 }} /> {title}
+        <IconImage name={iconName} loading="eager" sx={{ mr: 1 }} /> {title}
       </Typography>
       {!disableDescription && (
         <Typography
diff --git a/docs/src/components/productBaseUI/BaseUIHero.tsx b/docs/src/components/productBaseUI/BaseUIHero.tsx
index 1ca67b2e25f77e..71eb65e11592f1 100644
--- a/docs/src/components/productBaseUI/BaseUIHero.tsx
+++ b/docs/src/components/productBaseUI/BaseUIHero.tsx
@@ -55,7 +55,7 @@ export default function BaseUIHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-core" />{' '}
+            <IconImage width={28} height={28} loading="eager" name="product-core" />{' '}
             <Link href={ROUTES.productCore}>MUI Core</Link>{' '}
             <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
               /
diff --git a/docs/src/components/productCore/CoreHero.tsx b/docs/src/components/productCore/CoreHero.tsx
index 569ea94e531e1f..d370dd80f81a12 100644
--- a/docs/src/components/productCore/CoreHero.tsx
+++ b/docs/src/components/productCore/CoreHero.tsx
@@ -33,7 +33,7 @@ export default function CoreHero() {
             }),
           })}
         >
-          <IconImage width={28} height={28} name="product-core" /> MUI Core
+          <IconImage loading="eager" width={28} height={28} name="product-core" /> MUI Core
         </Typography>
         <Typography component="h1" variant="h2" sx={{ textAlign: 'center' }} gutterBottom>
           Ready to use components
diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
index cfadb5cb74ce1e..21c1ae09fd2a2d 100644
--- a/docs/src/components/productCore/CoreHeroEnd.tsx
+++ b/docs/src/components/productCore/CoreHeroEnd.tsx
@@ -19,7 +19,7 @@ export default function CoreHeroEnd() {
       data-mui-color-scheme="dark"
       sx={{
         background: (theme) =>
-          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%, 
+          `linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%,
         ${alpha(theme.palette.primary[800], 0.2)} 100%), ${
             (theme.vars || theme).palette.primaryDark[800]
           }`,
@@ -47,7 +47,7 @@ export default function CoreHeroEnd() {
               endIcon={<KeyboardArrowRightRounded />}
               sx={{ width: { xs: '100%', sm: 'auto' } }}
             >
-              Learn more
+              Join our community
             </Button>
           </Box>
         </Grid>
diff --git a/docs/src/components/productCore/CoreProducts.tsx b/docs/src/components/productCore/CoreProducts.tsx
index 9df73570a2d0a1..46b551a737e937 100644
--- a/docs/src/components/productCore/CoreProducts.tsx
+++ b/docs/src/components/productCore/CoreProducts.tsx
@@ -27,7 +27,7 @@ const content = [
     // logo:
     title: 'Base UI',
     description:
-      'A library of unstyled components with production-ready functionality, along with low-level hooks.',
+      'A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app\'s CSS and accessibility features.',
     link: '/base-ui/',
   },
   {
@@ -59,13 +59,11 @@ export default function CoreProducts() {
                   theme.palette.primary[50],
                   0.3,
                 )} 40%, ${alpha(theme.palette.grey[50], 0.2)} 100%)`,
-
                 '&:hover': {
                   borderColor: 'primary.500',
                   boxShadow:
                     '0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
                 },
-
                 ...theme.applyDarkStyles({
                   bgcolor: 'primaryDark.900',
                   borderColor: 'primaryDark.700',
@@ -73,7 +71,6 @@ export default function CoreProducts() {
                     theme.palette.primary[900],
                     0.1,
                   )} 40%, ${alpha(theme.palette.primaryDark[800], 0.2)} 100%)`,
-
                   '&:hover': {
                     boxShadow: '0px 1px 6px #0059B3, inset 0px 2px 30px rgba(0, 0, 0, 0.1)',
                   },
@@ -105,7 +102,7 @@ export default function CoreProducts() {
               </Box> */}
               <Typography
                 fontWeight="bold"
-                component="h3"
+                component="h2"
                 color="text.primary"
                 variant="body1"
                 // mt={2}
diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx
index cbb801f79cf5af..8651c294cca2cf 100644
--- a/docs/src/components/productDesignKit/DesignKitHero.tsx
+++ b/docs/src/components/productDesignKit/DesignKitHero.tsx
@@ -34,7 +34,7 @@ export default function TemplateHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-designkits" /> Design kits
+            <IconImage width={28} height={28} loading="eager" name="product-designkits" /> Design kits
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             Material UI
diff --git a/docs/src/components/productMaterial/MaterialHero.tsx b/docs/src/components/productMaterial/MaterialHero.tsx
index 08f6218d55c07a..b0360b0fcd3d7c 100644
--- a/docs/src/components/productMaterial/MaterialHero.tsx
+++ b/docs/src/components/productMaterial/MaterialHero.tsx
@@ -237,7 +237,7 @@ export default function MaterialHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-core" />{' '}
+            <IconImage loading="eager" width={28} height={28} name="product-core" />{' '}
             <Link href={ROUTES.productCore}>MUI Core</Link>{' '}
             <Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
               /
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index 2cd600b2c3b53f..036acd556e6bc0 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -32,7 +32,7 @@ export default function TemplateHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-templates" /> Templates
+            <IconImage width={28} height={28} loading="eager" name="product-templates" /> Templates
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             <GradientText>Fully built</GradientText> Material&nbsp;UI templates
diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx
index dcaecbf0f57f09..f40e12ce0771fa 100644
--- a/docs/src/components/productX/XHero.tsx
+++ b/docs/src/components/productX/XHero.tsx
@@ -104,7 +104,7 @@ export default function XHero() {
               }),
             })}
           >
-            <IconImage width={28} height={28} name="product-advanced" /> MUI X
+            <IconImage width={28} height={28} loading="eager" name="product-advanced" /> MUI X
           </Typography>
           <Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
             Performant
diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
index 46667eea7cffdb..4a5075ee4137d0 100644
--- a/docs/src/modules/components/TopLayoutBlog.js
+++ b/docs/src/modules/components/TopLayoutBlog.js
@@ -242,7 +242,7 @@ const Root = styled('div')(
     }),
 );
 
-function TopLayoutBlog(props) {
+export default function TopLayoutBlog(props) {
   const { className, docs } = props;
   const { description, rendered, title, headers } = docs.en;
   const finalTitle = title || headers.title;
@@ -331,6 +331,11 @@ function TopLayoutBlog(props) {
           </Link>
           {headers.title ? (
             <React.Fragment>
+              {/*
+                Depending on the timezone, the display date can change from one day to another.
+                e.g. Sunday vs. Monday
+                TODO: Move the date formating to the server.
+              */}
               <time dateTime={headers.date} className={classes.time}>
                 {new Intl.DateTimeFormat('en', {
                   weekday: 'long',
@@ -392,5 +397,3 @@ TopLayoutBlog.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
 }
-
-export default TopLayoutBlog;