[docs] Improve Base UI index page #37761
Conversation
oliviertassinari
added
docs
| <Typography component="h2" variant="body2" fontWeight={600} sx={{ px: 2, py: 1.5 }}> | ||
| <Typography | ||
| component="h2" | ||
| variant="body2" | ||
| fontWeight="semiBold" | ||
| sx={{ px: 2, py: 1.5 }} | ||
| > |
There was a problem hiding this comment.
Replace the hard-coded 600 value for the design token theme.typography.fontWeightSemiBold (600)
| <CardMedia | ||
| component="img" | ||
| alt={component.title} | ||
| alt="" |
There was a problem hiding this comment.
This is a decorative image, it shouldn't have an alt https://www.w3.org/WAI/tutorials/images/decorative/. It was flagged by https://wave.webaim.org/
There was a problem hiding this comment.
Ah, nice ⎯ thanks for explaining. Thought every image should receive an alt text 🤙
| component="a" | ||
| component={Link} | ||
| noLinkStyle | ||
| variant="outlined" | ||
| rel="nofollow" | ||
| target="_blank" |
There was a problem hiding this comment.
I believe opening in a new tab is a strange UX, none of the benchmark in https://www.notion.so/mui-org/Build-a-components-index-page-20e993e49ee9473fac1ef0aa1a00ab39 do this.
There was a problem hiding this comment.
Makes sense, good catch!
| href: '/base/react-textarea-autosize/', | ||
| srcLight: '/static/base-ui/react-components/textarea-light.png', | ||
| srcDark: '/static/base-ui/react-components/textarea-dark.png', | ||
| href: '/base-ui/react-textarea-autosize/', |
There was a problem hiding this comment.
This is the initial issue, we change these docs pages location.
| srcDark: '/static/images/base-ui-components/textarea-dark.png', | ||
| href: '/base/react-textarea-autosize/', | ||
| srcLight: '/static/base-ui/react-components/textarea-light.png', | ||
| srcDark: '/static/base-ui/react-components/textarea-dark.png', |
There was a problem hiding this comment.
I think that we can reorganize the images to have a root folder per product, in this case,/base-ui/. This better isolates each open-source project.
There was a problem hiding this comment.
I compressed the images with https://www.notion.so/mui-org/Content-tips-5a1686758f4f4267989b67a1c2c270da?pvs=4#483bd111c6e1440da7ed6da45bc56e17 because https://pagespeed.web.dev/ complained a bit about the image weight on the page.
I landed here from https://app.ahrefs.com/site-audit/3992793/44/data-explorer?columns=pageRating%2Curl%2Ctraffic%2ChttpCode%2CredirectChainUrls%2CisRedirectLoop%2CincomingAllLinks%2CincomingRedirect%2Corigin&filterId=808b08e88c934ee19e04fdec4ed87a5a&issueId=c64d12c1-d0f4-11e7-8ed1-001e67ed4656&sorting=-pageRating
A quick follow-up on #37536.
https://deploy-preview-37761--material-ui.netlify.app/base-ui/react-components/