[website] Fix a few regression #38050

oliviertassinari · 2023-07-19T15:42:25Z

https://deploy-preview-38050--material-ui.netlify.app/

mui-bot · 2023-07-19T15:47:06Z

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 62b81d0

oliviertassinari · 2023-07-19T15:44:32Z

docs/src/modules/components/MarkdownDocsV2.js

@@ -228,7 +246,7 @@ export default function MarkdownDocsV2(props) {
      >
        {disableAd ? null : (
          <BrandingProvider>
-            <AdGuest classSelector=".component-tabs">
+            <AdGuest classSelector={hasTabs ? '.component-tabs' : undefined}>


Fix the missing ad in https://mui.com/base-ui/all-components/.

oliviertassinari · 2023-07-19T15:45:13Z

docs/src/modules/components/DiamondSponsors.js

@@ -86,7 +86,7 @@ export default function DiamondSponsors() {
            (theme) => ({
              '& a': {
                width: '100%',
-                height: { xs: 40, sm: 50 },
+                height: { xs: 40, sm: 45 },


I'm struggling with the diamond sponsors at the bottom, the UX issue for me is when I expand a side nav I don't have enough vertical height to browse the list comfortably (desktop)

Seems aligned with what a community member is feeling too (#38033)... I'm considering changing it.

oliviertassinari · 2023-07-19T15:49:50Z

docs/src/layouts/HeroContainer.tsx

@@ -47,7 +47,7 @@ export default function HeroContainer({

  const renderRightWrapper = (sx?: BoxProps['sx']) => (
    <Box
-      id="hero-container-right-area"
+      ref={frame}


Open https://mui.com/, you can Tab between the different elements in the hero.

oliviertassinari · 2023-07-19T15:50:11Z

docs/src/components/productCore/CoreHero.tsx

+        <Typography variant="h2" sx={{ textAlign: 'center' }} gutterBottom>
          Ready to use components,
+          <br />


There is a missing space in https://mui.com/core/, but new line feels even better.

Much better, good catch!

oliviertassinari · 2023-07-19T15:51:26Z

docs/src/components/home/ProductsSwitcher.tsx

@@ -76,7 +76,7 @@ function ProductItem({
            event.stopPropagation();
          }}
        >
-          <span>Learn more</span>{' '}
+          <span>Learn more</span> <Box sx={visuallyHidden}>{label}</Box>


Fix

https://pagespeed.web.dev/analysis/https-mui-com/r8eujovg32?form_factor=desktop

oliviertassinari · 2023-07-19T15:52:02Z

docs/pages/base-ui/getting-started/customization.js

 import * as React from 'react';
-import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2';
+import AppFrame from 'docs/src/modules/components/AppFrame';
 import * as pageProps from 'docs/data/base/getting-started/customization/customization.md?@mui/markdown';

 export default function Page() {
  return <MarkdownDocs {...pageProps} />;
 }
+
+Page.getLayout = (page) => {
+  return <AppFrame>{page}</AppFrame>;
+};


What I believe we should do on ALL the pages of the docs. It's a continuation from #35938 (comment).

@alexfauquette I have tested https://www.notion.so/mui-org/Migrate-all-pages-to-Page-getLayout-212d920a9ab245f08ac3a2aea874f1bc with a few more pages. I had to fix 2 bugs in MarkdownDocsV2 (ad & codeblocks) but so far so good. The improvement is quite noticeable (before -> after):

I also love how the layout is stable (no more search flash, no more badge notification flash, etc.)

It will be a great step for https://www.notion.so/mui-org/Docs-page-transition-performance-regression-b9e887541f5e4380b991ba173f4c0f6e but I doubt it will be enough. Maybe Romain would enjoy this challenge, he has proven on the data grid that he's more than capable 😁.

danilo-leal

Some tiny considerations!

docs/src/components/home/ProductsSwitcher.tsx

danilo-leal · 2023-07-19T18:33:44Z

docs/src/modules/components/DiamondSponsors.js

@@ -86,7 +86,7 @@ export default function DiamondSponsors() {
            (theme) => ({
              '& a': {
                width: '100%',
-                height: { xs: 40, sm: 50 },
+                height: { xs: 40, sm: 45 },


Seems aligned with what a community member is feeling too (#38033)... I'm considering changing it.

danilo-leal · 2023-07-19T18:33:46Z

docs/src/modules/components/DiamondSponsors.js

-                    color: 'primary.300',
-                    borderColor: 'primaryDark.600',
-                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                    backgroundColor: theme.palette.primaryDark[700],


Any reason to remove the background opacity?

I'm outdoor, I could not see the difference, but no objections to revert.

I'm happy to change it, just wanted to know if there was a reason!

oliviertassinari · 2023-07-19T16:41:19Z

docs/src/modules/components/MarkdownDocs.js

-        {rendered.map((renderedMarkdownOrDemo, index) => {
-          if (typeof renderedMarkdownOrDemo === 'string') {
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />
-              </Wrapper>
-            );
-          }
-


This duplication was not great, we introduced the support for "codeblock" here and forgot about the V2 🙈

oliviertassinari · 2023-07-19T16:41:31Z

docs/src/modules/components/DemosDocs.js

-
-export default function DemosDocs(props) {
-  const { WrapperComponent: Wrapper, wrapperProps, rendered = [], ...rest } = props;
-  return (
-    <React.Fragment key="demos-docs">
-      {rendered.map((renderedMarkdownOrDemo, index) => {
-        return (
-          <MarkdownElement


oliviertassinari · 2023-07-19T16:41:41Z

docs/src/modules/components/MarkdownDocsV2.js

                  activeTab={activeTab}
-                  setActiveTab={setActiveTab}


oliviertassinari · 2023-07-19T16:49:13Z

docs/src/layouts/AppFooter.tsx

-            mt: 1,
+            pt: 0.5,
+            pb: 0.5,


Increase the link surface area for mobile:

It's also more enjoyable on desktop, no click gap when you move the cursor.

We go from 21px to 29px without visual changes. I haven't tried to hit 48px.

Much better indeed!

oliviertassinari · 2023-07-19T21:07:06Z

docs/src/modules/components/RichMarkdownElement.js

-MarkdownElementV2.propTypes = {
+RichMarkdownElement.propTypes = {


The name wa wrong, it's not the same level of abstraction.

docs/src/components/productCore/CoreHero.tsx

danilo-leal

Thanks for explaining some of the changes in the comments ⎯ it's a good learning resource! 🤙

oliviertassinari · 2023-07-21T20:09:01Z

I'm excited about these fixes, it's cleaner 😌

oliviertassinari added the website Pages that are not documentation-related, marketing-focused. label Jul 19, 2023

oliviertassinari force-pushed the batch-fixes branch 2 times, most recently from 3649651 to 2f5d308 Compare July 19, 2023 15:44

oliviertassinari force-pushed the batch-fixes branch from 2f5d308 to ac9efe8 Compare July 19, 2023 15:59

oliviertassinari commented Jul 19, 2023

View reviewed changes

oliviertassinari force-pushed the batch-fixes branch 3 times, most recently from 46b004d to 135d38d Compare July 19, 2023 16:29

[website] Fix a few regression

e14c641

oliviertassinari force-pushed the batch-fixes branch from 135d38d to e14c641 Compare July 19, 2023 16:47

danilo-leal reviewed Jul 19, 2023

View reviewed changes

oliviertassinari commented Jul 19, 2023

View reviewed changes

oliviertassinari mentioned this pull request Jul 19, 2023

[docs-infra] Diamond sponsors docs layout #38033

Closed

quick polish

7e91abd

oliviertassinari commented Jul 19, 2023

View reviewed changes

danilo-leal mentioned this pull request Jul 20, 2023

[docs] Fix a spacing issue in CoreHero.tsx #38074

Closed

oliviertassinari added 3 commits July 21, 2023 00:17

add missing alt

e27eb55

fix broken reference

cee73c8

add missing label

75a75cc

mbrookes reviewed Jul 20, 2023

View reviewed changes

docs/src/components/productCore/CoreHero.tsx Outdated Show resolved Hide resolved

oliviertassinari added 3 commits July 21, 2023 00:45

allow tabs on Base UI

31408b8

sync source with page code

ff1f294

fix spacing code

f86d838

oliviertassinari mentioned this pull request Jul 20, 2023

[website] Add Base UI marketing page #36622

Merged

13 tasks

oliviertassinari added 5 commits July 21, 2023 15:49

fix plan order display, premium last

ee478ae

fix 301 redirection

b162f33

sort based on the plan

5bb9e2d

shorter descriptions

abbe169

add missing h1

d70b3ef

oliviertassinari added 5 commits July 21, 2023 16:11

fix missing headers in the template

461bd12

reduce image from 4 MB to 335 KB

08adce6

compress images

518e524

fix ad layout shift

153eef5

Have the option above the fold

62b81d0

danilo-leal approved these changes Jul 21, 2023

View reviewed changes

oliviertassinari merged commit 71eea59 into mui:master Jul 21, 2023
21 checks passed

oliviertassinari deleted the batch-fixes branch July 21, 2023 19:33

oliviertassinari mentioned this pull request Feb 15, 2024

[docs-infra] Fix page load speed #41117

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Fix a few regression #38050

[website] Fix a few regression #38050

oliviertassinari commented Jul 19, 2023 •

edited

mui-bot commented Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023

danilo-leal Jul 19, 2023

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023

danilo-leal Jul 19, 2023

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023 •

edited

danilo-leal left a comment

danilo-leal Jul 19, 2023

danilo-leal Jul 19, 2023

oliviertassinari Jul 19, 2023 •

edited

danilo-leal Jul 19, 2023

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023

oliviertassinari Jul 19, 2023 •

edited

danilo-leal Jul 19, 2023

oliviertassinari Jul 19, 2023

danilo-leal left a comment

oliviertassinari commented Jul 21, 2023

		MarkdownElementV2.propTypes = {
		RichMarkdownElement.propTypes = {

[website] Fix a few regression #38050

[website] Fix a few regression #38050

Conversation

oliviertassinari commented Jul 19, 2023 • edited

mui-bot commented Jul 19, 2023 • edited

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jul 19, 2023 • edited

Choose a reason for hiding this comment

oliviertassinari Jul 19, 2023 • edited

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jul 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Jul 19, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danilo-leal left a comment

Choose a reason for hiding this comment

oliviertassinari commented Jul 21, 2023

oliviertassinari commented Jul 19, 2023 •

edited

mui-bot commented Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023 •

edited

oliviertassinari Jul 19, 2023 •

edited