[docs] Fix template page issues

.eslintrc.js

@@ -529,5 +529,13 @@ module.exports = /** @type {Config} */ ({
         'react/react-in-jsx-scope': 'off',
       },
     },
+    {
+      files: ['docs/data/material/getting-started/templates/**/*'],
+      rules: {
+        // So we can use # to improve the page UX
+        // and so developer get eslint warning to remind them to fix the links
+        'jsx-a11y/anchor-is-valid': 'off',
+      },
+    },
   ],
 });

docs/data/material/getting-started/templates/marketing-page/components/FAQ.js

@@ -6,14 +6,15 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function FAQ() {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React.useState([]);
 
   const handleChange = (panel) => (event, isExpanded) => {
-    setExpanded(isExpanded ? panel : false);
+    setExpanded(
+      isExpanded ? [...expanded, panel] : expanded.filter((item) => item !== panel),
+    );
   };
 
   return (
@@ -42,7 +43,7 @@ export default function FAQ() {
       </Typography>
       <Box sx={{ width: '100%' }}>
         <Accordion
-          expanded={expanded === 'panel1'}
+          expanded={expanded.includes('panel1')}
           onChange={handleChange('panel1')}
         >
           <AccordionSummary
@@ -60,15 +61,15 @@ export default function FAQ() {
               gutterBottom
               sx={{ maxWidth: { sm: '100%', md: '70%' } }}
             >
-              You can reach our customer support team by emailing
-              <Link> [email protected] </Link>
-              or calling our toll-free number. We&apos;re here to assist you
+              You can reach our customer support team by emailing&nbsp;
+              <Link href="mailto:[email protected]">[email protected]</Link>
+              &nbsp;or calling our toll-free number. We&apos;re here to assist you
               promptly.
             </Typography>
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel2'}
+          expanded={expanded.includes('panel2')}
           onChange={handleChange('panel2')}
         >
           <AccordionSummary
@@ -93,7 +94,7 @@ export default function FAQ() {
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel3'}
+          expanded={expanded.includes('panel3')}
           onChange={handleChange('panel3')}
         >
           <AccordionSummary
@@ -118,7 +119,7 @@ export default function FAQ() {
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel4'}
+          expanded={expanded.includes('panel4')}
           onChange={handleChange('panel4')}
         >
           <AccordionSummary

docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx

@@ -6,15 +6,18 @@ import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 export default function FAQ() {
-  const [expanded, setExpanded] = React.useState<string | false>(false);
+  const [expanded, setExpanded] = React.useState<string[]>([]);
 
   const handleChange =
     (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-      setExpanded(isExpanded ? panel : false);
+      setExpanded(
+        isExpanded
+          ? [...expanded, panel]
+          : expanded.filter((item) => item !== panel),
+      );
     };
 
   return (
@@ -43,7 +46,7 @@ export default function FAQ() {
       </Typography>
       <Box sx={{ width: '100%' }}>
         <Accordion
-          expanded={expanded === 'panel1'}
+          expanded={expanded.includes('panel1')}
           onChange={handleChange('panel1')}
         >
           <AccordionSummary
@@ -61,15 +64,15 @@ export default function FAQ() {
               gutterBottom
               sx={{ maxWidth: { sm: '100%', md: '70%' } }}
             >
-              You can reach our customer support team by emailing
-              <Link> [email protected] </Link>
-              or calling our toll-free number. We&apos;re here to assist you
+              You can reach our customer support team by emailing&nbsp;
+              <Link href="mailto:[email protected]">[email protected]</Link>
+              &nbsp;or calling our toll-free number. We&apos;re here to assist you
               promptly.
             </Typography>
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel2'}
+          expanded={expanded.includes('panel2')}
           onChange={handleChange('panel2')}
         >
           <AccordionSummary
@@ -94,7 +97,7 @@ export default function FAQ() {
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel3'}
+          expanded={expanded.includes('panel3')}
           onChange={handleChange('panel3')}
         >
           <AccordionSummary
@@ -119,7 +122,7 @@ export default function FAQ() {
           </AccordionDetails>
         </Accordion>
         <Accordion
-          expanded={expanded === 'panel4'}
+          expanded={expanded.includes('panel4')}
           onChange={handleChange('panel4')}
         >
           <AccordionSummary

docs/data/material/getting-started/templates/sign-in-side/SignInCard.js

@@ -10,9 +10,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
-
 import ForgotPassword from './ForgotPassword';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
 

docs/data/material/getting-started/templates/sign-in-side/SignInCard.tsx

@@ -10,9 +10,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Link from '@mui/material/Link';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
-
 import ForgotPassword from './ForgotPassword';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
 

docs/scripts/generateTemplateScreenshots.ts

@@ -24,6 +24,14 @@ import { chromium } from 'playwright';
  * - Set `chromium.launch({ headless: false })` in line:50 to see the browser
  */
 
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
 const host = process.env.DEPLOY_PREVIEW || 'http://localhost:3000';
 
 /**
@@ -33,7 +41,7 @@ const projects = {
   'material-ui': {
     input: path.join(process.cwd(), 'docs/pages/material-ui/getting-started/templates'),
     output: 'docs/public/static/screenshots',
-    viewport: { width: 1680, height: 1092 },
+    viewport: { width: 813 * 2, height: 457 * 2 },
   },
   'joy-ui': {
     input: path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
@@ -78,10 +86,9 @@ const names = new Set(process.argv.slice(2));
               await page.click('[data-screenshot="toggle-mode"]');
               await page.getByRole('menuitem').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]');
               await page
@@ -92,10 +99,9 @@ const names = new Set(process.argv.slice(2));
               await page.click('[data-screenshot="toggle-mode"]');
               await page.getByRole('option').filter({ hasText: /dark/i }).click();
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]');
               await page
@@ -105,10 +111,9 @@ const names = new Set(process.argv.slice(2));
             } else {
               await page.click('[data-screenshot="toggle-mode"]');
               await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-              await page.screenshot({
-                path: outputPath,
-                animations: 'disabled',
-              });
+              await sleep(100); // give time for image decoding, resizing, rendering
+
+              await page.screenshot({ path: outputPath, animations: 'disabled' });
 
               await page.click('[data-screenshot="toggle-mode"]'); // switch back to light
             }

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -74,12 +74,12 @@ function layouts(translatation) {
   ];
 }
 
-export default function Templates() {
+export default function MaterialFreeTemplatesCollection() {
   const translatation = useTranslate();
   const materialTemplates = sourceMaterialTemplates();
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, mb: 4 }}>
-      {layouts(translatation).map((layout) => {
+      {layouts(translatation).map((layout, index) => {
         const templateId = layout.source.split('/').pop();
         const templateName = pascalCase(templateId);
         const item = materialTemplates.map.get(templateId);
@@ -100,7 +100,8 @@ export default function Templates() {
                 borderColor: 'divider',
               }}
             >
-              <Box
+              <Link
+                href={layout.href}
                 sx={{
                   position: 'relative',
                   '&:hover > .MuiCardMedia-root': {
@@ -115,7 +116,8 @@ export default function Templates() {
                   component="img"
                   // The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
                   image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
-                  title={layout.title}
+                  alt={layout.title}
+                  fetchPriority={index === 0 ? 'high' : undefined}
                   sx={(theme) => ({
                     aspectRatio: '16 / 9',
                     objectPosition: 'top',
@@ -133,11 +135,12 @@ export default function Templates() {
                 <Button
                   variant="text"
                   endIcon={<OpenInNewRoundedIcon />}
-                  component={Link}
-                  href={layout.href}
+                  component="div"
                   data-ga-event-category="material-ui-template"
                   data-ga-event-label={layout.title}
                   data-ga-event-action="preview-img"
+                  tabIndex={null}
+                  role="none"
                   sx={{
                     position: 'absolute',
                     top: '50%',
@@ -153,7 +156,7 @@ export default function Templates() {
                 >
                   See live preview
                 </Button>
-              </Box>
+              </Link>
               <Box
                 sx={{
                   display: 'flex',

docs/src/modules/components/MaterialShowcase.js

@@ -437,7 +437,7 @@ const sortFunctions = {
   stars: sortFactory('stars'),
 };
 
-export default function Showcase() {
+export default function MaterialShowcase() {
   const [sortFunctionName, setSortFunctionName] = React.useState('similarWebVisits');
   const sortFunction = sortFunctions[sortFunctionName];
   const t = useTranslate();