Skip to content

Commit

Permalink
[website] Small tweaks for performance
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Sep 13, 2023
1 parent 6e45f83 commit 427aa20
Show file tree
Hide file tree
Showing 14 changed files with 25 additions and 26 deletions.
2 changes: 1 addition & 1 deletion docs/src/components/home/CompaniesGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function CompaniesGrid({ data }: { data: Array<IconImageProps> })
objectFit: 'contain',
}}
>
<IconImage alt={imgProps.alt || `${imgProps.name} logo`} {...imgProps} />
<IconImage alt={imgProps.alt || `${imgProps.name} logo`} loading="eager" {...imgProps} />
</Grid>
))}
</Grid>
Expand Down
9 changes: 4 additions & 5 deletions docs/src/components/home/DesignKits.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ const Anchor = styled('a')(({ theme }) => [
const DesignToolLink = React.forwardRef<
HTMLAnchorElement,
React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'adobexd' }>
>(function DesignToolLink({ brand, ...props }, ref) {
>(function DesignToolLink(props, ref) {
const { brand, ...other } = props;
return (
<Anchor
ref={ref}
Expand All @@ -80,10 +81,8 @@ const DesignToolLink = React.forwardRef<
}[brand]
}
target="_blank"
{...props}
>
{props.children}
</Anchor>
{...other}
/>
);
});

Expand Down
4 changes: 1 addition & 3 deletions docs/src/components/home/References.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export { CORE_CUSTOMERS, ADVANCED_CUSTOMERS, DESIGNKITS_CUSTOMERS, TEMPLATES_CUS

const CompaniesGrid = dynamic(() => import('./CompaniesGrid'));

function References({
export default function References({
companies,
}: {
companies:
Expand Down Expand Up @@ -50,5 +50,3 @@ function References({
</Section>
);
}

export default References;
2 changes: 2 additions & 0 deletions docs/src/components/home/StoreTemplatesBanner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const Image = styled('img')(({ theme }) => ({
borderColor: (theme.vars || theme).palette.grey[400],
borderRadius: (theme.vars || theme).shape.borderRadius,
objectFit: 'cover',
objectPosition: 'top',
boxShadow: '0px 4px 20px rgba(61, 71, 82, 0.25)',
...theme.applyDarkStyles({
borderColor: (theme.vars || theme).palette.grey[800],
Expand Down Expand Up @@ -108,6 +109,7 @@ const StoreTemplateImage = React.forwardRef<
Object.keys(linkMapping).indexOf(brand) + 1
}light.jpg`}
alt=""
loading="lazy"
sx={(theme) =>
theme.applyDarkStyles({
content: `url(/static/branding/store-templates/template-${
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/pricing/PricingTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function PlanName({
fontWeight="bold"
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', pr: 0.5 }}
>
<IconImage name={iconName} sx={{ mr: 1 }} /> {title}
<IconImage name={iconName} loading="eager" sx={{ mr: 1 }} /> {title}
</Typography>
{!disableDescription && (
<Typography
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productBaseUI/BaseUIHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export default function BaseUIHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-core" />{' '}
<IconImage width={28} height={28} loading="eager" name="product-core" />{' '}
<Link href={ROUTES.productCore}>MUI Core</Link>{' '}
<Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
/
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productCore/CoreHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export default function CoreHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-core" /> MUI Core
<IconImage loading="eager" width={28} height={28} name="product-core" /> MUI Core
</Typography>
<Typography component="h1" variant="h2" sx={{ textAlign: 'center' }} gutterBottom>
Ready to use components
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/productCore/CoreHeroEnd.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function CoreHeroEnd() {
data-mui-color-scheme="dark"
sx={{
background: (theme) =>
`linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%,
`linear-gradient(180deg, ${(theme.vars || theme).palette.primaryDark[800]} 50%,
${alpha(theme.palette.primary[800], 0.2)} 100%), ${
(theme.vars || theme).palette.primaryDark[800]
}`,
Expand Down Expand Up @@ -47,7 +47,7 @@ export default function CoreHeroEnd() {
endIcon={<KeyboardArrowRightRounded />}
sx={{ width: { xs: '100%', sm: 'auto' } }}
>
Learn more
Join our community
</Button>
</Box>
</Grid>
Expand Down
7 changes: 2 additions & 5 deletions docs/src/components/productCore/CoreProducts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const content = [
// logo:
title: 'Base UI',
description:
'A library of unstyled components with production-ready functionality, along with low-level hooks.',
'A library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app\'s CSS and accessibility features.',
link: '/base-ui/',
},
{
Expand Down Expand Up @@ -59,21 +59,18 @@ export default function CoreProducts() {
theme.palette.primary[50],
0.3,
)} 40%, ${alpha(theme.palette.grey[50], 0.2)} 100%)`,

'&:hover': {
borderColor: 'primary.500',
boxShadow:
'0px 1px 6px 0px rgba(194, 224, 255, 1), 0px 2px 30px 0px rgba(234, 237, 241, 0.3) inset',
},

...theme.applyDarkStyles({
bgcolor: 'primaryDark.900',
borderColor: 'primaryDark.700',
background: `linear-gradient(to top right, ${alpha(
theme.palette.primary[900],
0.1,
)} 40%, ${alpha(theme.palette.primaryDark[800], 0.2)} 100%)`,

'&:hover': {
boxShadow: '0px 1px 6px #0059B3, inset 0px 2px 30px rgba(0, 0, 0, 0.1)',
},
Expand Down Expand Up @@ -105,7 +102,7 @@ export default function CoreProducts() {
</Box> */}
<Typography
fontWeight="bold"
component="h3"
component="h2"
color="text.primary"
variant="body1"
// mt={2}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productDesignKit/DesignKitHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function TemplateHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-designkits" /> Design kits
<IconImage width={28} height={28} loading="eager" name="product-designkits" /> Design kits
</Typography>
<Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
Material UI
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productMaterial/MaterialHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ export default function MaterialHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-core" />{' '}
<IconImage loading="eager" width={28} height={28} name="product-core" />{' '}
<Link href={ROUTES.productCore}>MUI Core</Link>{' '}
<Typography component="span" variant="inherit" sx={{ color: 'divider' }}>
/
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productTemplate/TemplateHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export default function TemplateHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-templates" /> Templates
<IconImage width={28} height={28} loading="eager" name="product-templates" /> Templates
</Typography>
<Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
<GradientText>Fully built</GradientText> Material&nbsp;UI templates
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/productX/XHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export default function XHero() {
}),
})}
>
<IconImage width={28} height={28} name="product-advanced" /> MUI X
<IconImage width={28} height={28} loading="eager" name="product-advanced" /> MUI X
</Typography>
<Typography variant="h1" sx={{ my: 2, maxWidth: 500 }}>
Performant
Expand Down
9 changes: 6 additions & 3 deletions docs/src/modules/components/TopLayoutBlog.js
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ const Root = styled('div')(
}),
);

function TopLayoutBlog(props) {
export default function TopLayoutBlog(props) {
const { className, docs } = props;
const { description, rendered, title, headers } = docs.en;
const finalTitle = title || headers.title;
Expand Down Expand Up @@ -331,6 +331,11 @@ function TopLayoutBlog(props) {
</Link>
{headers.title ? (
<React.Fragment>
{/*
Depending on the timezone, the display date can change from one day to another.
e.g. Sunday vs. Monday
TODO: Move the date formating to the server.
*/}
<time dateTime={headers.date} className={classes.time}>
{new Intl.DateTimeFormat('en', {
weekday: 'long',
Expand Down Expand Up @@ -392,5 +397,3 @@ TopLayoutBlog.propTypes = {
if (process.env.NODE_ENV !== 'production') {
TopLayoutBlog.propTypes = exactProp(TopLayoutBlog.propTypes);
}

export default TopLayoutBlog;

0 comments on commit 427aa20

Please sign in to comment.