[website] Improve lighthouse score (mui#39011)

danilo-leal · Sep 17, 2023 · 53b9656 · 53b9656
1 parent 89635d1
commit 53b9656
Show file tree

Hide file tree

Showing 35 changed files with 229 additions and 527 deletions.
diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js
@@ -86,7 +86,6 @@ export default function BaseButtonPlainCss() {
       <style type="text/css">{css}</style>
       <Stack spacing={2} direction="row" className="demo">
         <Button className="github-button">Create Repository</Button>
-
         <button type="button" {...getRootProps()} className="github-button">
           Create Repository
         </button>

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx
@@ -86,7 +86,6 @@ export default function BaseButtonPlainCss() {
       <style type="text/css">{css}</style>
       <Stack spacing={2} direction="row" className="demo">
         <Button className="github-button">Create Repository</Button>
-
         <button type="button" {...getRootProps()} className="github-button">
           Create Repository
         </button>

diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview
@@ -2,7 +2,6 @@
   <style type="text/css">{css}</style>
   <Stack spacing={2} direction="row" className="demo">
     <Button className="github-button">Create Repository</Button>
-
     <button type="button" {...getRootProps()} className="github-button">
       Create Repository
     </button>

diff --git a/docs/data/joy/customization/dark-mode/dark-mode-pt.md b/docs/data/joy/customization/dark-mode/dark-mode-pt.md
diff --git a/docs/data/joy/customization/dark-mode/dark-mode-zh.md b/docs/data/joy/customization/dark-mode/dark-mode-zh.md
diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md
@@ -134,7 +134,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles';
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
           {getInitColorSchemeScript()}

diff --git a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md
@@ -39,7 +39,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles';
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
           {getInitColorSchemeScript()}

diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md
@@ -193,7 +193,7 @@ import { getInitColorSchemeScript } from '@mui/material/styles';
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
           {getInitColorSchemeScript()}

diff --git a/docs/data/material/experimental-api/css-theme-variables/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage.md
@@ -133,7 +133,7 @@ import { getInitColorSchemeScript } from '@mui/material/styles';
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
           {getInitColorSchemeScript()}

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -41,7 +41,7 @@ export default class MyDocument extends Document {
     const { canonicalAsServer, userLanguage } = this.props;
 
     return (
-      <Html lang={userLanguage}>
+      <Html lang={userLanguage} data-mui-color-scheme="light" data-joy-color-scheme="light">
         <Head>
           {/*
             manifest.json provides metadata used when your web app is added to the
@@ -146,6 +146,13 @@ export default class MyDocument extends Document {
               '.mode-dark .only-dark-mode': {
                 display: 'block',
               },
+              // TODO migrate to .only-dark-mode to .only-dark-mode-v2
+              '[data-mui-color-scheme="light"] .only-dark-mode-v2': {
+                display: 'none',
+              },
+              '[data-mui-color-scheme="dark"] .only-light-mode-v2': {
+                display: 'none',
+              },
               '.plan-pro, .plan-premium': {
                 display: 'inline-block',
                 height: '1em',

diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
@@ -457,7 +457,7 @@ function AboutContent() {
               "Excellence. We're aiming high, and we know it.",
             ].map((text) => (
               <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                <IconImage name="yes" />
+                <IconImage name="pricing/yes" />
                 <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1.5 }}>
                   {text}
                 </Typography>

diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md
@@ -103,7 +103,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles';
 export default class MyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
           {getInitColorSchemeScript()}

diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
@@ -346,7 +346,7 @@ function CareersContent() {
                 'Autonomy. We want to create a safe, high-trust team.',
               ].map((text) => (
                 <Box key={text} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                  <IconImage name="yes" />
+                  <IconImage name="pricing/yes" />
                   <Typography variant="body2" color="text.primary" fontWeight={600} sx={{ ml: 1 }}>
                     {text}
                   </Typography>
@@ -381,7 +381,7 @@ function CareersContent() {
               ['Time off:', 'We provide 33 days of paid time off globally.'],
             ].map((textArray) => (
               <Box key={textArray[0]} sx={{ display: 'flex', alignItems: 'center', mt: 1 }}>
-                <IconImage name="yes" />
+                <IconImage name="pricing/yes" />
                 <Typography variant="body2" color="text.primary" sx={{ ml: 1 }}>
                   <span style={{ fontWeight: 600 }}>{`${textArray[0]}  `}</span>
                   {textArray[1]}

diff --git a/docs/public/static/branding/companies/nasa-light.svg b/docs/public/static/branding/companies/nasa-light.svg
diff --git a/...c/static/branding/companies/nasa-dark.svg → ...public/static/branding/companies/nasa.svg b/...c/static/branding/companies/nasa-dark.svg → ...public/static/branding/companies/nasa.svg
diff --git a/docs/public/static/branding/companies/netflix-light.svg b/docs/public/static/branding/companies/netflix-light.svg
diff --git a/...tatic/branding/companies/netflix-dark.svg → ...lic/static/branding/companies/netflix.svg b/...tatic/branding/companies/netflix-dark.svg → ...lic/static/branding/companies/netflix.svg