[docs] Fix SEO issues (mui#34537)

jesrodri · Dec 6, 2022 · a9afa16 · a9afa16
1 parent 2a96c7e
commit a9afa16
Show file tree

Hide file tree

Showing 26 changed files with 142 additions and 144 deletions.
diff --git a/docs/data/joy/components/card/BasicCard.js b/docs/data/joy/components/card/BasicCard.js
@@ -9,13 +9,11 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: '320px' }}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-        <Typography level="h2" fontSize="md" sx={{ alignSelf: 'flex-start' }}>
-          Yosemite National Park
-        </Typography>
-        <Typography level="body2">April 24 to May 02, 2021</Typography>
-      </Box>
+    <Card variant="outlined" sx={{ width: 320 }}>
+      <Typography level="h2" fontSize="md" sx={{ mb: 0.5 }}>
+        Yosemite National Park
+      </Typography>
+      <Typography level="body2">April 24 to May 02, 2021</Typography>
       <IconButton
         aria-label="bookmark Bahamas Islands"
         variant="plain"
@@ -25,18 +23,19 @@ export default function BasicCard() {
       >
         <BookmarkAdd />
       </IconButton>
-
       <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
         <img
-          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&auto=format&fit=crop&w=3270"
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
+          srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
       <Box sx={{ display: 'flex' }}>
         <div>
           <Typography level="body3">Total price:</Typography>
           <Typography fontSize="lg" fontWeight="lg">
-            $2900
+            $2,900
           </Typography>
         </div>
         <Button

diff --git a/docs/data/joy/components/card/BasicCard.tsx b/docs/data/joy/components/card/BasicCard.tsx
@@ -9,13 +9,11 @@ import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined';
 
 export default function BasicCard() {
   return (
-    <Card variant="outlined" sx={{ minWidth: '320px' }}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
-        <Typography level="h2" fontSize="md" sx={{ alignSelf: 'flex-start' }}>
-          Yosemite National Park
-        </Typography>
-        <Typography level="body2">April 24 to May 02, 2021</Typography>
-      </Box>
+    <Card variant="outlined" sx={{ width: 320 }}>
+      <Typography level="h2" fontSize="md" sx={{ mb: 0.5 }}>
+        Yosemite National Park
+      </Typography>
+      <Typography level="body2">April 24 to May 02, 2021</Typography>
       <IconButton
         aria-label="bookmark Bahamas Islands"
         variant="plain"
@@ -25,18 +23,19 @@ export default function BasicCard() {
       >
         <BookmarkAdd />
       </IconButton>
-
       <AspectRatio minHeight="120px" maxHeight="200px" sx={{ my: 2 }}>
         <img
-          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?crop=entropy&auto=format&fit=crop&w=3270"
+          src="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286"
+          srcSet="https://images.unsplash.com/photo-1527549993586-dff825b37782?auto=format&fit=crop&w=286&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
       <Box sx={{ display: 'flex' }}>
         <div>
           <Typography level="body3">Total price:</Typography>
           <Typography fontSize="lg" fontWeight="lg">
-            $2900
+            $2,900
           </Typography>
         </div>
         <Button

diff --git a/docs/data/joy/components/card/CardVariables.js b/docs/data/joy/components/card/CardVariables.js
@@ -39,7 +39,7 @@ const vars = [
   },
 ];
 
-export default function GroupedAvatars() {
+export default function CardVariables() {
   const [sx, setSx] = React.useState({});
   return (
     <Box
@@ -71,16 +71,20 @@ export default function GroupedAvatars() {
           <CardOverflow>
             <AspectRatio>
               <img
+                src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198"
+                srcSet="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198&dpr=2 2x"
+                loading="lazy"
                 alt=""
-                src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?crop=entropy&auto=format&fit=crop&w=2148"
               />
             </AspectRatio>
           </CardOverflow>
           <Box sx={{ mt: -3, width: 48 }}>
             <AspectRatio ratio="1">
               <img
+                src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=48"
+                srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=48&dpr=2 2x"
+                loading="lazy"
                 alt=""
-                src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
               />
             </AspectRatio>
           </Box>
@@ -100,7 +104,9 @@ export default function GroupedAvatars() {
         >
           <CardCover>
             <img
-              src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?crop=entropy&auto=format&fit=crop&w=2148"
+              src="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198"
+              srcSet="https://images.unsplash.com/photo-1523404343994-489a5eefd760?auto=format&fit=crop&w=198&dpr=2 2x"
+              loading="lazy"
               alt=""
             />
           </CardCover>

diff --git a/docs/data/joy/components/card/ContainerResponsive.js b/docs/data/joy/components/card/ContainerResponsive.js
@@ -39,16 +39,17 @@ export default function ContainerResponsive() {
           }}
         >
           <img
+            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2000"
+            loading="lazy"
             alt=""
-            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2262"
           />
         </AspectRatio>
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            maxWidth: '200px',
+            maxWidth: 200,
           }}
         >
           <Box sx={{ display: 'flex' }}>

diff --git a/docs/data/joy/components/card/ContainerResponsive.tsx b/docs/data/joy/components/card/ContainerResponsive.tsx
@@ -39,16 +39,17 @@ export default function ContainerResponsive() {
           }}
         >
           <img
+            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2000"
+            loading="lazy"
             alt=""
-            src="https://images.unsplash.com/photo-1492305175278-3b3afaa2f31f?auto=format&fit=crop&w=2262"
           />
         </AspectRatio>
         <Box
           sx={{
             display: 'flex',
             flexDirection: 'column',
             gap: 2,
-            maxWidth: '200px',
+            maxWidth: 200,
           }}
         >
           <Box sx={{ display: 'flex' }}>

diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
@@ -16,7 +16,7 @@ export default function DribbbleShot() {
   return (
     <Card
       sx={{
-        minWidth: 300,
+        width: 300,
         bgcolor: 'initial',
         boxShadow: 'none',
         '--Card-padding': '0px',
@@ -26,15 +26,10 @@ export default function DribbbleShot() {
         <AspectRatio ratio="4/3">
           <figure>
             <img
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300&dpr=2 2x"
+              loading="lazy"
               alt="Yosemite by Casey Horner"
-              width="330"
-              height="247"
-              sizes="338px"
-              data-sizes="auto"
-              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
             />
           </figure>
         </AspectRatio>

diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -16,7 +16,7 @@ export default function DribbbleShot() {
   return (
     <Card
       sx={{
-        minWidth: 300,
+        width: 300,
         bgcolor: 'initial',
         boxShadow: 'none',
         '--Card-padding': '0px',
@@ -26,15 +26,10 @@ export default function DribbbleShot() {
         <AspectRatio ratio="4/3">
           <figure>
             <img
+              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300"
+              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?auto=format&fit=crop&w=300&dpr=2 2x"
+              loading="lazy"
               alt="Yosemite by Casey Horner"
-              width="330"
-              height="247"
-              sizes="338px"
-              data-sizes="auto"
-              data-srcset="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              data-src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              src="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
-              srcSet="https://images.unsplash.com/photo-1515825838458-f2a94b20105a?crop=entropy&auto=format&fit=crop&w=988"
             />
           </figure>
         </AspectRatio>

diff --git a/docs/data/joy/components/card/GradientCover.js b/docs/data/joy/components/card/GradientCover.js
@@ -7,10 +7,12 @@ import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 
 export default function GradientCover() {
   return (
-    <Card sx={{ minHeight: '280px', minWidth: 320 }}>
+    <Card sx={{ minHeight: '280px', width: 320 }}>
       <CardCover>
         <img
-          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?crop=entropy&auto=format&fit=crop&w=3271"
+          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320"
+          srcSet="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </CardCover>

diff --git a/docs/data/joy/components/card/GradientCover.tsx b/docs/data/joy/components/card/GradientCover.tsx
@@ -7,10 +7,12 @@ import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
 
 export default function GradientCover() {
   return (
-    <Card sx={{ minHeight: '280px', minWidth: 320 }}>
+    <Card sx={{ minHeight: '280px', width: 320 }}>
       <CardCover>
         <img
-          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?crop=entropy&auto=format&fit=crop&w=3271"
+          src="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320"
+          srcSet="https://images.unsplash.com/photo-1542773998-9325f0a098d7?auto=format&fit=crop&w=320&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </CardCover>

diff --git a/docs/data/joy/components/card/InstagramPost.js b/docs/data/joy/components/card/InstagramPost.js
@@ -56,7 +56,7 @@ export default function InstagramPost() {
       </Box>
       <CardOverflow>
         <AspectRatio>
-          <img src="/static/images/cards/yosemite.jpeg" alt="" />
+          <img src="/static/images/cards/yosemite.jpeg" alt="" loading="lazy" />
         </AspectRatio>
       </CardOverflow>
       <Box sx={{ display: 'flex', alignItems: 'center', mx: -1, my: 1 }}>

diff --git a/docs/data/joy/components/card/InstagramPost.tsx b/docs/data/joy/components/card/InstagramPost.tsx
@@ -56,7 +56,7 @@ export default function InstagramPost() {
       </Box>
       <CardOverflow>
         <AspectRatio>
-          <img src="/static/images/cards/yosemite.jpeg" alt="" />
+          <img src="/static/images/cards/yosemite.jpeg" alt="" loading="lazy" />
         </AspectRatio>
       </CardOverflow>
       <Box sx={{ display: 'flex', alignItems: 'center', mx: -1, my: 1 }}>

diff --git a/docs/data/joy/components/card/InteractiveCard.js b/docs/data/joy/components/card/InteractiveCard.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import AspectRatio from '@mui/joy/AspectRatio';
-import Box from '@mui/joy/Box';
 import Link from '@mui/joy/Link';
 import Card from '@mui/joy/Card';
 import Chip from '@mui/joy/Chip';
@@ -12,42 +11,42 @@ export default function InteractiveCard() {
       variant="outlined"
       row
       sx={{
-        minWidth: '320px',
+        width: 320,
         gap: 2,
         '&:hover': { boxShadow: 'md', borderColor: 'neutral.outlinedHoverBorder' },
       }}
     >
       <AspectRatio ratio="1" sx={{ width: 90 }}>
         <img
-          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?crop=entropy&auto=format&fit=crop&w=3387"
+          src="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90"
+          srcSet="https://images.unsplash.com/photo-1507833423370-a126b89d394b?auto=format&fit=crop&w=90&dpr=2 2x"
+          loading="lazy"
           alt=""
         />
       </AspectRatio>
-      <Box>
-        <Box sx={{ ml: 0.5 }}>
-          <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
-            Yosemite Park
-          </Typography>
-          <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
-            <Link
-              overlay
-              underline="none"
-              href="#interactive-card"
-              sx={{ color: 'text.tertiary' }}
-            >
-              California, USA
-            </Link>
-          </Typography>
-          <Chip
-            variant="outlined"
-            color="primary"
-            size="sm"
-            sx={{ pointerEvents: 'none' }}
+      <div>
+        <Typography level="h2" fontSize="lg" id="card-description" mb={0.5}>
+          Yosemite Park
+        </Typography>
+        <Typography fontSize="sm" aria-describedby="card-description" mb={1}>
+          <Link
+            overlay
+            underline="none"
+            href="#interactive-card"
+            sx={{ color: 'text.tertiary' }}
           >
-            Cool weather all day long
-          </Chip>
-        </Box>
-      </Box>
+            California, USA
+          </Link>
+        </Typography>
+        <Chip
+          variant="outlined"
+          color="primary"
+          size="sm"
+          sx={{ pointerEvents: 'none' }}
+        >
+          Cool weather all day long
+        </Chip>
+      </div>
     </Card>
   );
 }