[docs] Fix template page issues #44466

oliviertassinari · 2024-11-18T23:09:55Z

Push #44253 forward (so asking a review from the same people).

Preview: https://deploy-preview-44466--material-ui.netlify.app/material-ui/getting-started/templates/

I landed here a bit by chance, I thought I would get a bit in the details 😄

mui-bot · 2024-11-18T23:12:48Z

Netlify deploy preview

https://deploy-preview-44466--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 4165747

oliviertassinari · 2024-11-18T23:12:57Z

docs/data/material/getting-started/templates/.eslintrc.js

-module.exports = {
-  rules: {
-    'jsx-a11y/anchor-is-valid': 'off',
-  },
-};


Initially, I wanted to do a small PR, wanted to move this to the root per mui/mui-public#213.

oliviertassinari · 2024-11-18T23:13:32Z

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

 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

 export default function FAQ() {
-  const [expanded, setExpanded] = React.useState<string | false>(false);


I hate this UX so much anytime I land on a website that does this (FAQ accordions close themselves, let me open everything). I think https://tailwindui.com/all-access or https://mui.com/pricing/ does this right.

oliviertassinari · 2024-11-18T23:14:57Z

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

 import Typography from '@mui/material/Typography';
-
 import { styled } from '@mui/material/styles';
-
 import ForgotPassword from './ForgotPassword';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';


oliviertassinari · 2024-11-18T23:15:12Z

docs/scripts/generateTemplateScreenshots.ts

-    viewport: { width: 1680, height: 1092 },
+    viewport: { width: 813 * 2, height: 457 * 2 },


To match the layout of the page where those are shown.

oliviertassinari · 2024-11-18T23:16:33Z

docs/src/modules/components/MaterialFreeTemplatesCollection.js

-export default function Templates() {
+export default function MaterialFreeTemplatesCollection() {


Should match the filename

oliviertassinari · 2024-11-18T23:17:06Z

docs/src/modules/components/MaterialFreeTemplatesCollection.js

@@ -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}


I wasn't sure that we wanted to use loading="lazy" so I went for this instead. The goal is to reduce LCP.

Oh, annoying vercel/next.js#65161 only really works with React 19.

oliviertassinari · 2024-11-18T23:17:31Z

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

-              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


This looked broken:

oliviertassinari · 2024-11-18T23:18:11Z

docs/src/modules/components/MaterialFreeTemplatesCollection.js

+              <Link
+                href={layout.href}


Make the whole image clickable, reduce the distance the mouse has to travel, so much more enjoyable on my end 😌.

oliviertassinari · 2024-11-18T23:18:59Z

packages/markdown/prepareMarkdown.js

-      <symbol id="copied-icon" viewBox="0 0 24 24">
-        <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.24 11.28L9.69 11.2c-.38-.39-.38-1.01 0-1.4.39-.39 1.02-.39 1.41 0l1.36 1.37 4.42-4.46c.39-.39 1.02-.39 1.41 0 .38.39.38 1.01 0 1.4l-5.13 5.17c-.37.4-1.01.4-1.4 0zM3 6c-.55 0-1 .45-1 1v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1z" />
-      </symbol>
-      </svg>`);
+      rendered.unshift(`<svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
+<symbol id="comment-link-icon" viewBox="0 0 24 24">
+<path d="M22.8481 4C22.8481 2.9 21.9481 2 20.8481 2H4.84814C3.74814 2 2.84814 2.9 2.84814 4V16C2.84814 17.1 3.74814 18 4.84814 18H18.8481L22.8481 22V4ZM16.8481 11H13.8481V14C13.8481 14.55 13.3981 15 12.8481 15C12.2981 15 11.8481 14.55 11.8481 14V11H8.84814C8.29814 11 7.84814 10.55 7.84814 10C7.84814 9.45 8.29814 9 8.84814 9H11.8481V6C11.8481 5.45 12.2981 5 12.8481 5C13.3981 5 13.8481 5.45 13.8481 6V9H16.8481C17.3981 9 17.8481 9.45 17.8481 10C17.8481 10.55 17.3981 11 16.8481 11Z" />
+</symbol>
+</svg>`);


Those spaces were strange, fix:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fmui.com%2Fmaterial-ui%2Fgetting-started%2Ftemplates%2F

Did a quick dive, this is a regression from #37664.

zanivan

Thanks for the improvement! I still have a couple questions, though

docs/data/material/getting-started/templates/blog/components/Footer.js

docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg

zanivan

Cool, great improvement! 👍

oliviertassinari added the docs Improvements or additions to the documentation label Nov 18, 2024

oliviertassinari commented Nov 18, 2024

View reviewed changes

oliviertassinari added the bug 🐛 Something doesn't work label Nov 19, 2024

oliviertassinari requested review from zanivan and aarongarciah November 20, 2024 00:27

zanivan reviewed Nov 20, 2024

View reviewed changes

docs/data/material/getting-started/templates/blog/components/Footer.js Outdated Show resolved Hide resolved

docs/public/static/screenshots/material-ui/getting-started/templates/marketing-page-dark.jpg Outdated Show resolved Hide resolved

oliviertassinari force-pushed the fix-template-page branch from 0f7e6a0 to 21d7870 Compare November 21, 2024 00:25

oliviertassinari added 9 commits November 21, 2024 01:28

should match file name

54b04ca

fix UX issues

db30615

remove

d0c166c

update images

e0bb1de

more fixes

254831c

more fixes

9466c60

compress

3bc15da

Victor's review

7bf670f

more review from Victor

9a92d9c

oliviertassinari force-pushed the fix-template-page branch from 21d7870 to 83c80e0 Compare November 21, 2024 00:28

last issue

4165747

oliviertassinari force-pushed the fix-template-page branch from 83c80e0 to 4165747 Compare November 21, 2024 01:03

zanivan self-requested a review November 21, 2024 13:25

zanivan approved these changes Nov 21, 2024

View reviewed changes

oliviertassinari merged commit 7d0e66b into mui:master Nov 22, 2024
22 checks passed

oliviertassinari deleted the fix-template-page branch November 22, 2024 23:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Fix template page issues #44466

[docs] Fix template page issues #44466

oliviertassinari commented Nov 18, 2024 •

edited

Loading

mui-bot commented Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024

oliviertassinari Nov 18, 2024

oliviertassinari Nov 18, 2024

oliviertassinari Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 21, 2024

oliviertassinari Nov 18, 2024

oliviertassinari Nov 18, 2024

oliviertassinari Nov 18, 2024

oliviertassinari Nov 22, 2024

oliviertassinari Nov 22, 2024

zanivan left a comment

zanivan left a comment

		viewport: { width: 1680, height: 1092 },
		viewport: { width: 813 * 2, height: 457 * 2 },

		export default function Templates() {
		export default function MaterialFreeTemplatesCollection() {

[docs] Fix template page issues #44466

[docs] Fix template page issues #44466

Conversation

oliviertassinari commented Nov 18, 2024 • edited Loading

mui-bot commented Nov 18, 2024 • edited Loading

Netlify deploy preview

Bundle size report

oliviertassinari Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

oliviertassinari Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zanivan left a comment

Choose a reason for hiding this comment

zanivan left a comment

Choose a reason for hiding this comment

oliviertassinari commented Nov 18, 2024 •

edited

Loading

mui-bot commented Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024 •

edited

Loading

oliviertassinari Nov 18, 2024 •

edited

Loading