Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Fix SEO issues #34537

Merged
merged 2 commits into from Oct 3, 2022
Merged

[docs] Fix SEO issues #34537

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
948653a
[docs] Fix SEO issues
oliviertassinari Sep 30, 2022
518af4f
simpler
oliviertassinari Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 9 additions & 10 deletions docs/data/joy/components/card/BasicCard.js
View file
Open in desktop
Expand Up @@ -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"
Expand All @@ -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
Expand Down
19 changes: 9 additions & 10 deletions docs/data/joy/components/card/BasicCard.tsx
View file
Open in desktop
Expand Up @@ -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 }}>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unecessary, removed

<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"
Expand All @@ -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"
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

solve https://app.ahrefs.com/site-audit/3524616/32/data-explorer?columns=pageRating%2Curl%2ChttpCode%2CcontentType%2Csize%2CloadingTime%2CincomingImage&filterCollapsed=true&filterId=6f5b087348c1e7b419e1440717205958&issueId=c64d8113-d0f4-11e7-8ed1-001e67ed4656&sorting=-size

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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

en-US locale number format

</Typography>
</div>
<Button
Expand Down
14 changes: 10 additions & 4 deletions docs/data/joy/components/card/CardVariables.js
View file
Open in desktop
Expand Up @@ -39,7 +39,7 @@ const vars = [
},
];

export default function GroupedAvatars() {
export default function CardVariables() {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Match filename

const [sx, setSx] = React.useState({});
return (
<Box
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions docs/data/joy/components/card/ContainerResponsive.js
View file
Open in desktop
Expand Up @@ -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' }}>
Expand Down
5 changes: 3 additions & 2 deletions docs/data/joy/components/card/ContainerResponsive.tsx
View file
Open in desktop
Expand Up @@ -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' }}>
Expand Down
13 changes: 4 additions & 9 deletions docs/data/joy/components/card/DribbbleShot.js
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ export default function DribbbleShot() {
return (
<Card
sx={{
minWidth: 300,
width: 300,
bgcolor: 'initial',
boxShadow: 'none',
'--Card-padding': '0px',
Expand All @@ -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>
Expand Down
13 changes: 4 additions & 9 deletions docs/data/joy/components/card/DribbbleShot.tsx
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ export default function DribbbleShot() {
return (
<Card
sx={{
minWidth: 300,
width: 300,
bgcolor: 'initial',
boxShadow: 'none',
'--Card-padding': '0px',
Expand All @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions docs/data/joy/components/card/GradientCover.js
View file
Open in desktop
Expand Up @@ -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>
Expand Down
6 changes: 4 additions & 2 deletions docs/data/joy/components/card/GradientCover.tsx
View file
Open in desktop
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/card/InstagramPost.js
View file
Open in desktop
Expand Up @@ -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 }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/card/InstagramPost.tsx
View file
Open in desktop
Expand Up @@ -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 }}>
Expand Down
53 changes: 26 additions & 27 deletions docs/data/joy/components/card/InteractiveCard.js
View file
Open in desktop
@@ -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';
Expand All @@ -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>
);
}