diff --git a/docs/pages/blog/2022-developer-survey-results.js b/docs/pages/blog/2022-developer-survey-results.js deleted file mode 100644 index 7ae503923480da..00000000000000 --- a/docs/pages/blog/2022-developer-survey-results.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; -import { docs } from './2022-developer-survey-results.md?@mui/markdown'; - -export default function Page() { - return ; -} diff --git a/docs/pages/blog/developer-survey-impacts.js b/docs/pages/blog/developer-survey-impacts.js new file mode 100644 index 00000000000000..501c1fcc2accf7 --- /dev/null +++ b/docs/pages/blog/developer-survey-impacts.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import TopLayoutSurvey from 'docs/src/modules/components/TopLayoutSurvey'; +import { docs } from './developer-survey-impacts.md?@mui/markdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/2022-developer-survey-results.md b/docs/pages/blog/developer-survey-impacts.md similarity index 78% rename from docs/pages/blog/2022-developer-survey-results.md rename to docs/pages/blog/developer-survey-impacts.md index fcb9d42bb053a4..74ca76ac5d2df6 100644 --- a/docs/pages/blog/2022-developer-survey-results.md +++ b/docs/pages/blog/developer-survey-impacts.md @@ -1,10 +1,10 @@ --- -title: 'The 2022 MUI developer survey and some of its impacts.' -description: Your feedback helped us to build better products. Here's what we learned about your needs in our 2022 developer survey. -date: 2022-08-15T00:00:00.000Z +title: 'The MUI developer survey and some of its impacts.' +description: Your feedback helped us to build better products. Here's what we learned about your needs in the past developer surveys. +date: 2024-11-15T00:00:00.000Z authors: ['josefreitas', 'oliviertassinari'] -tags: ['Developer survey'] -card: true +tags: ['Developer Survey'] +card: false --- Your participation in the previous developer survey has been vital to our growth, and we are grateful for the time you took to share your invaluable thoughts. @@ -15,6 +15,8 @@ And please accept our sincere apologies for the late delivery, especially if you Here's what we've learned. +{{"demo": "survey-charts/demo.js"}} + ## Table of contents - [About the community](#about-the-community) @@ -58,7 +60,7 @@ Here's what we've learned. As in the previous survey, most of the community members identified themselves as full-stack developers and represent today 41% of the total; that number was 52% that year, so we might be seeing a trend of specialization on front-end development, which increased 5%. Overall, the community is more diverse, and virtually every other category had their representation increased this year. -Pie chart: 41.32% Fullstack developer, 34.14% Front end developer, 8.13% Entrepeneurs. +Pie chart: 41.32% Fullstack developer, 34.14% Front end developer, 8.13% Entrepeneurs.

1907 respondents.

@@ -69,7 +71,7 @@ We plan on starting doing some videos as well, but we'd like to leave a big shou Thank you, and let us know what you're making! - +

1895 respondents.

@@ -77,7 +79,7 @@ Thank you, and let us know what you're making! Almost half of the community, around 45%, are engaged in building enterprise products on a variety of usages; 41% are involved in user-facing dashboards, and 35% are using MUI products to quickly build internal tools. - +

1899 respondents.

@@ -85,7 +87,7 @@ Almost half of the community, around 45%, are engaged in building enterprise pro Very similar to the previous survey, a significant proportion of the community (65%) is developing products for the companies they work at, but we've seen a significant rise in work for clients, from 12% previously to over 45% in 2022. - +

1896 respondents.

## About Your Needs @@ -95,7 +97,7 @@ Very similar to the previous survey, a significant proportion of the community ( If MUI ceased to exist, 64% of the community would be very disappointed. A very slight increase compared to the previous survey. This rise is within the survey's margin of error, though. Our goal is to continuously focus on user feedback and innovating our offerings to get a more significant increase in the future. - +

1163 respondents.

### How likely is it that you would recommend MUI to a friend or colleague? @@ -106,7 +108,7 @@ We deeply appreciate this show of support and trust! Nonetheless, we acknowledge that there is room for improvement. Our NPS decreased 6 points, and roughly 5% of the community stopped being a promoter to be a passive user. - +

1163 respondents.

### What are your most important criteria for choosing a UI library? @@ -114,7 +116,7 @@ Our NPS decreased 6 points, and roughly 5% of the community stopped being a prom When it comes to community priorities for choosing a library, “design and look and feel” still ranks first when looking the percentages for the first priority. But overall, documentation quality reached for the first time the highest score. The score is based on the weight of the option overall in all the answers. Documentation along with design and customizability, are paramount to both the community and MUI. -Ranked list: 1. The design - look and feel; 2. Customizability; 3. Documentation quality; 4. Comprehensiveness; 5. Performance; 6. Popularity; 7. Accessibility; 8. Offered support and help; 9. Bundle size +Ranked list: 1. The design - look and feel; 2. Customizability; 3. Documentation quality; 4. Comprehensiveness; 5. Performance; 6. Popularity; 7. Accessibility; 8. Offered support and help; 9. Bundle size

1151 respondents.

@@ -127,7 +129,7 @@ On a side note, 65%, a significant portion of the community, has not yet heard a It is crucial for us to increase the visibility of these tools and encourage more community members to try them out. We also see a big opportunity to reach those that are already interested in trying other MUI products. - +

1161 respondents.

### What is the main benefit you receive from using MUI libraries? @@ -140,7 +142,7 @@ Surprisingly, only 3% explicitly mentioned Material design as a requirement for The following chart is the top 20 most flagged benefits. - +

826 respondents

### How can we improve MUI for you? @@ -152,7 +154,7 @@ We hear you, and we've already started many efforts to cover this gap, like the Here are the Top 25 Categorized community requests. - +

716 respondents

### Please rate the following statements (our differentiators) @@ -160,7 +162,7 @@ Here are the Top 25 Categorized community requests. We are pleased to know that 88% of the community finds it easy to create visually appealing UIs using MUI. However, we are keen to understand and address the concerns of the 10% who find the components not as easily customizable; we passionately want to fix your pain points, and we're exploring BaseUI and other solutions to bring a concrete answer to your needs. - +

1107 respondents

### Please rate the following statements (our initiatives) @@ -172,7 +174,7 @@ Also, over 78% of you think it'd be good to have a discord server, so we've fina Another point worth noticing is that a good share of the community would also gladly have the opportunity to pay for support on the Core components. We're now testing a priority support offering that covers Material UI, Base UI and Joy UI as well as MUI X components. The plan is still on pilot, but we hope to be able to make it public soon. - +

1094 respondents.

## Community workspaces @@ -182,26 +184,26 @@ We're now testing a priority support offering that covers Material UI, Base UI a Almost a quarter of the respondents are based in the US, but this data doesn't match exactly the user traffic we have in our doc pages. This likely means that the channels we use to reach the community might be a bit biased. - +

1068 respondents

### How many front-end or full-stack developers are on your team? Teams with more than 5 developers are the most common, followed by teams with a single developer responsible for UIs. - +

1077 respondents.

### How many front-end or full-stack developers are in your company? Almost half, 48%, of the respondents, work in small tech departments with up to 5 developers, which might indicate a big presence of web startups and perhaps some businesses not strongly oriented to web development. - +

1069 respondents.

### How many total employees work at your company? - +

1068 respondent

## Community technical environment @@ -210,7 +212,7 @@ Almost half, 48%, of the respondents, work in small tech departments with up to Most developers are comfortable with Javascript and React. However, we see a drop in the level of comfort when it comes to CSS and MUI libraries, suggesting the need for more resources or support in these areas. - +

1077 respondents.

### What styling solutions are you using? @@ -219,18 +221,18 @@ It is encouraging to see that 79% have adopted the MUI System to build styles, i A significant share of the community, 20%, also uses Tailwind. We hear you, and we want to provide the best platform to connect with your favorite libraries. - +

1074 respondents.

### What other UI libraries do you use? What would you say are their strongest and weakest points? - +

354 respondents.

- +

354 respondents.

- +

354 respondents.

## Experience with MUI X @@ -239,7 +241,7 @@ We hear you, and we want to provide the best platform to connect with your favor Over 65% of the community uses MUI X components, showcasing the popularity and validating the need for these components. We're working to increase our advanced components portfolio to supply other community demands. - +

1108 respondents.

### What benefits do you get from the Data Grid? @@ -248,10 +250,10 @@ The survey results highlight that development speed is an important benefit the Surprisingly, column management emerged as the top use case among users of the commercial plans. The community seem to value a lot the ability to effectively control and manipulate data presentation on the user level. - +

323 respondents.

- +

239 respondents.

### How can we improve MUI X for you? @@ -263,16 +265,16 @@ We've already starting putting some gas on the development of new components, an Your Feedback also indicate a specific pain point with server-side integration, which is now being addressed as a priority in our plans for 2023. - +

123 respondents.

- +

128 respondents.

### What challenges do you face today that, if solved, could make you consider purchasing a commercial license? - +

124 respondents.

### Is a perpetual license in development important for you? @@ -280,7 +282,7 @@ Your Feedback also indicate a specific pain point with server-side integration, All our licenses, MIT and Commercial, are already perpetual in production. But we understand the importance of providing a perpetual alternative in development mode, as indicated by 77% of the community. Considering your feedback, We're bringing more alternative to the current model, so you can use MUI X libraries on the model that best suits your requirements. You can already access a perpetual in development license in our [pricing page](https://www.mui.com/pricing/). - +

436 respondents.

## Perception of low code tools @@ -289,33 +291,33 @@ But we understand the importance of providing a perpetual alternative in develop Our survey revealed that over 60% of respondents have not been exposed to low-code tools yet, and among those who have used these tools, a slight majority indicated they would not use them again. This feedback presents a significant opportunity to identify and address the challenges professional developers face with low-code tools. - +

955 respondents.

### What are your 3 most important features in a low-code tool to build admin apps? The ability to import and export code freely and easily emerged as a key expectation for low code for our community members, along with great documentation and look and feel of the output. We are attempting to address them through [MUI Toolpad](https://mui.com/toolpad/). - +

467 respondents.

### How many internal apps (interfaces for business operation) do you currently have in your organization? About 60% of respondents have between 1-5 internal applications within their companies, and surprisingly, over 10% reported having more than 21 internal applications, indicating that a sizeable portion of our community is engaged in large-scale, complex environments with a likely high degree of demand for diverse use cases in these applications. - +

775 respondents.

### How many people have access to the above apps? - +

724 respondents.

### How do your existing internal tools integrate the front end with the back end? The vast majority, 88%, utilize REST APIs as the backend for their internal applications, reflecting the popularity of this approach. - +

790 respondents.

### Which low-code products did you use? @@ -324,7 +326,7 @@ The community uses a wide variety of low-code products for use cases like intern Note: It was a broad question and in the chart below, we only showed products whose occurence was 3 or more. Apart from these, 90 more such tools were mentioned! - +

160 respondents.

## Conclusion diff --git a/docs/pages/blog/survey-charts/demo.js b/docs/pages/blog/survey-charts/demo.js new file mode 100644 index 00000000000000..3e99541b76cbf9 --- /dev/null +++ b/docs/pages/blog/survey-charts/demo.js @@ -0,0 +1,66 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { + DataGridPremium, + GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, + GridToolbar, + useGridApiRef, + useKeepGroupedColumnsHidden, +} from '@mui/x-data-grid-premium'; +import { useDemoData } from '@mui/x-data-grid-generator'; + +const visibleFields = [ + 'commodity', + 'quantity', + 'filledQuantity', + 'status', + 'isFilled', + 'unitPrice', + 'unitPriceCurrency', + 'subTotal', + 'feeRate', + 'feeAmount', + 'incoTerm', +]; + +export default function DataGridPremiumDemo() { + const { data, loading } = useDemoData({ + dataSet: 'Commodity', + rowLength: 100, + editable: true, + visibleFields, + }); + const apiRef = useGridApiRef(); + + const initialState = useKeepGroupedColumnsHidden({ + apiRef, + initialState: { + ...data.initialState, + rowGrouping: { + ...data.initialState?.rowGrouping, + model: ['commodity'], + }, + sorting: { + sortModel: [{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, sort: 'asc' }], + }, + aggregation: { + model: { + quantity: 'sum', + }, + }, + }, + }); + + return ( + + + + ); +} diff --git a/docs/public/static/blog/2022-developer-survey-results/1.png b/docs/public/static/blog/developer-survey-impacts/1.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/1.png rename to docs/public/static/blog/developer-survey-impacts/1.png diff --git a/docs/public/static/blog/2022-developer-survey-results/10.png b/docs/public/static/blog/developer-survey-impacts/10.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/10.png rename to docs/public/static/blog/developer-survey-impacts/10.png diff --git a/docs/public/static/blog/2022-developer-survey-results/11.png b/docs/public/static/blog/developer-survey-impacts/11.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/11.png rename to docs/public/static/blog/developer-survey-impacts/11.png diff --git a/docs/public/static/blog/2022-developer-survey-results/12.png b/docs/public/static/blog/developer-survey-impacts/12.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/12.png rename to docs/public/static/blog/developer-survey-impacts/12.png diff --git a/docs/public/static/blog/2022-developer-survey-results/13.png b/docs/public/static/blog/developer-survey-impacts/13.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/13.png rename to docs/public/static/blog/developer-survey-impacts/13.png diff --git a/docs/public/static/blog/2022-developer-survey-results/14.png b/docs/public/static/blog/developer-survey-impacts/14.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/14.png rename to docs/public/static/blog/developer-survey-impacts/14.png diff --git a/docs/public/static/blog/2022-developer-survey-results/15.png b/docs/public/static/blog/developer-survey-impacts/15.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/15.png rename to docs/public/static/blog/developer-survey-impacts/15.png diff --git a/docs/public/static/blog/2022-developer-survey-results/16.png b/docs/public/static/blog/developer-survey-impacts/16.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/16.png rename to docs/public/static/blog/developer-survey-impacts/16.png diff --git a/docs/public/static/blog/2022-developer-survey-results/17.png b/docs/public/static/blog/developer-survey-impacts/17.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/17.png rename to docs/public/static/blog/developer-survey-impacts/17.png diff --git a/docs/public/static/blog/2022-developer-survey-results/18.png b/docs/public/static/blog/developer-survey-impacts/18.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/18.png rename to docs/public/static/blog/developer-survey-impacts/18.png diff --git a/docs/public/static/blog/2022-developer-survey-results/19.1.png b/docs/public/static/blog/developer-survey-impacts/19.1.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/19.1.png rename to docs/public/static/blog/developer-survey-impacts/19.1.png diff --git a/docs/public/static/blog/2022-developer-survey-results/19.2.png b/docs/public/static/blog/developer-survey-impacts/19.2.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/19.2.png rename to docs/public/static/blog/developer-survey-impacts/19.2.png diff --git a/docs/public/static/blog/2022-developer-survey-results/19.3.png b/docs/public/static/blog/developer-survey-impacts/19.3.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/19.3.png rename to docs/public/static/blog/developer-survey-impacts/19.3.png diff --git a/docs/public/static/blog/2022-developer-survey-results/2.png b/docs/public/static/blog/developer-survey-impacts/2.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/2.png rename to docs/public/static/blog/developer-survey-impacts/2.png diff --git a/docs/public/static/blog/2022-developer-survey-results/20.png b/docs/public/static/blog/developer-survey-impacts/20.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/20.png rename to docs/public/static/blog/developer-survey-impacts/20.png diff --git a/docs/public/static/blog/2022-developer-survey-results/21.1.png b/docs/public/static/blog/developer-survey-impacts/21.1.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/21.1.png rename to docs/public/static/blog/developer-survey-impacts/21.1.png diff --git a/docs/public/static/blog/2022-developer-survey-results/21.2.png b/docs/public/static/blog/developer-survey-impacts/21.2.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/21.2.png rename to docs/public/static/blog/developer-survey-impacts/21.2.png diff --git a/docs/public/static/blog/2022-developer-survey-results/22.1.png b/docs/public/static/blog/developer-survey-impacts/22.1.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/22.1.png rename to docs/public/static/blog/developer-survey-impacts/22.1.png diff --git a/docs/public/static/blog/2022-developer-survey-results/22.2.png b/docs/public/static/blog/developer-survey-impacts/22.2.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/22.2.png rename to docs/public/static/blog/developer-survey-impacts/22.2.png diff --git a/docs/public/static/blog/2022-developer-survey-results/23.png b/docs/public/static/blog/developer-survey-impacts/23.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/23.png rename to docs/public/static/blog/developer-survey-impacts/23.png diff --git a/docs/public/static/blog/2022-developer-survey-results/24.png b/docs/public/static/blog/developer-survey-impacts/24.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/24.png rename to docs/public/static/blog/developer-survey-impacts/24.png diff --git a/docs/public/static/blog/2022-developer-survey-results/25.png b/docs/public/static/blog/developer-survey-impacts/25.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/25.png rename to docs/public/static/blog/developer-survey-impacts/25.png diff --git a/docs/public/static/blog/2022-developer-survey-results/26.png b/docs/public/static/blog/developer-survey-impacts/26.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/26.png rename to docs/public/static/blog/developer-survey-impacts/26.png diff --git a/docs/public/static/blog/2022-developer-survey-results/27.png b/docs/public/static/blog/developer-survey-impacts/27.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/27.png rename to docs/public/static/blog/developer-survey-impacts/27.png diff --git a/docs/public/static/blog/2022-developer-survey-results/28.png b/docs/public/static/blog/developer-survey-impacts/28.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/28.png rename to docs/public/static/blog/developer-survey-impacts/28.png diff --git a/docs/public/static/blog/2022-developer-survey-results/29.png b/docs/public/static/blog/developer-survey-impacts/29.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/29.png rename to docs/public/static/blog/developer-survey-impacts/29.png diff --git a/docs/public/static/blog/2022-developer-survey-results/3.png b/docs/public/static/blog/developer-survey-impacts/3.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/3.png rename to docs/public/static/blog/developer-survey-impacts/3.png diff --git a/docs/public/static/blog/2022-developer-survey-results/30.png b/docs/public/static/blog/developer-survey-impacts/30.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/30.png rename to docs/public/static/blog/developer-survey-impacts/30.png diff --git a/docs/public/static/blog/2022-developer-survey-results/4.png b/docs/public/static/blog/developer-survey-impacts/4.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/4.png rename to docs/public/static/blog/developer-survey-impacts/4.png diff --git a/docs/public/static/blog/2022-developer-survey-results/5.png b/docs/public/static/blog/developer-survey-impacts/5.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/5.png rename to docs/public/static/blog/developer-survey-impacts/5.png diff --git a/docs/public/static/blog/2022-developer-survey-results/6.png b/docs/public/static/blog/developer-survey-impacts/6.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/6.png rename to docs/public/static/blog/developer-survey-impacts/6.png diff --git a/docs/public/static/blog/2022-developer-survey-results/7.png b/docs/public/static/blog/developer-survey-impacts/7.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/7.png rename to docs/public/static/blog/developer-survey-impacts/7.png diff --git a/docs/public/static/blog/2022-developer-survey-results/8.png b/docs/public/static/blog/developer-survey-impacts/8.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/8.png rename to docs/public/static/blog/developer-survey-impacts/8.png diff --git a/docs/public/static/blog/2022-developer-survey-results/9.png b/docs/public/static/blog/developer-survey-impacts/9.png similarity index 100% rename from docs/public/static/blog/2022-developer-survey-results/9.png rename to docs/public/static/blog/developer-survey-impacts/9.png diff --git a/docs/src/modules/components/TopLayoutSurvey.js b/docs/src/modules/components/TopLayoutSurvey.js new file mode 100644 index 00000000000000..a2000cc7c7ab27 --- /dev/null +++ b/docs/src/modules/components/TopLayoutSurvey.js @@ -0,0 +1,437 @@ +import * as React from 'react'; +import dynamic from 'next/dynamic'; +import PropTypes from 'prop-types'; +import { styled, alpha } from '@mui/material/styles'; +import { useRouter } from 'next/router'; +import { exactProp } from '@mui/utils'; +import ChevronLeftRoundedIcon from '@mui/icons-material/ChevronLeftRounded'; +import Divider from '@mui/material/Divider'; +import Typography from '@mui/material/Typography'; +import Avatar from '@mui/material/Avatar'; +import Head from 'docs/src/modules/components/Head'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; +import AppHeader from 'docs/src/layouts/AppHeader'; +import AppContainer from 'docs/src/modules/components/AppContainer'; +import AppFooter from 'docs/src/layouts/AppFooter'; +import HeroEnd from 'docs/src/components/home/HeroEnd'; +import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; +import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; +import ROUTES from 'docs/src/route'; +import Link from 'docs/src/modules/components/Link'; + +export const authors = { + oliviertassinari: { + name: 'Olivier Tassinari', + avatar: 'https://avatars.githubusercontent.com/u/3165635', + github: 'oliviertassinari', + }, + mbrookes: { + name: 'Matt Brookes', + avatar: 'https://avatars.githubusercontent.com/u/357702', + github: 'mbrookes', + }, + eps1lon: { + name: 'Sebastian Silbermann', + avatar: 'https://avatars.githubusercontent.com/u/12292047', + github: 'eps1lon', + }, + mnajdova: { + name: 'Marija Najdova', + avatar: 'https://avatars.githubusercontent.com/u/4512430', + github: 'mnajdova', + }, + michaldudak: { + name: 'Michał Dudak', + avatar: 'https://avatars.githubusercontent.com/u/4696105', + github: 'michaldudak', + }, + siriwatknp: { + name: 'Siriwat Kunaporn', + avatar: 'https://avatars.githubusercontent.com/u/18292247', + github: 'siriwatknp', + }, + 'danilo-leal': { + name: 'Danilo Leal', + avatar: 'https://avatars.githubusercontent.com/u/67129314', + github: 'danilo-leal', + }, + m4theushw: { + name: 'Matheus Wichman', + avatar: 'https://avatars.githubusercontent.com/u/42154031', + github: 'm4theushw', + }, + flaviendelangle: { + name: 'Flavien Delangle', + avatar: 'https://avatars.githubusercontent.com/u/3309670', + github: 'flaviendelangle', + }, + DanailH: { + name: 'Danail Hadjiatanasov', + avatar: 'https://avatars.githubusercontent.com/u/5858539', + github: 'DanailH', + }, + alexfauquette: { + name: 'Alexandre Fauquette', + avatar: 'https://avatars.githubusercontent.com/u/45398769', + github: 'alexfauquette', + }, + samuelsycamore: { + name: 'Sam Sycamore', + avatar: 'https://avatars.githubusercontent.com/u/71297412', + github: 'samuelsycamore', + }, + josefreitas: { + name: 'José Freitas', + avatar: 'https://avatars.githubusercontent.com/u/550141', + github: 'joserodolfofreitas', + }, + cherniavskii: { + name: 'Andrew Cherniavskyi', + avatar: 'https://avatars.githubusercontent.com/u/13808724', + github: 'cherniavskii', + }, + mikailaread: { + name: 'Mikaila Read', + avatar: 'https://avatars.githubusercontent.com/u/76401606', + github: 'mikailaread', + }, + prakhargupta: { + name: 'Prakhar Gupta', + avatar: 'https://avatars.githubusercontent.com/u/92228082', + github: 'prakhargupta1', + }, + richbustos: { + name: 'Rich Bustos', + avatar: 'https://avatars.githubusercontent.com/u/92274722', + github: 'richbustos', + }, +}; + +const classes = { + back: 'TopLayoutBlog-back', + time: 'TopLayoutBlog-time', + container: 'TopLayoutBlog-container', +}; + +// Replicate the value used by https://medium.com/, a trusted reference. +const BLOG_MAX_WIDTH = 692; + +const AuthorsContainer = styled('div')(({ theme }) => ({ + display: 'flex', + flexWrap: 'wrap', + marginBottom: theme.spacing(2), + '& .author': { + display: 'flex', + alignItems: 'center', + paddingBottom: theme.spacing(2), + paddingRight: theme.spacing(3), + '& .MuiAvatar-root': { + marginRight: theme.spacing(1), + }, + }, +})); + +const Root = styled('div')( + ({ theme }) => ({ + flexGrow: 1, + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.grey[50] + } 0%, #FFFFFF 100%)`, + backgroundSize: '100% 500px', + backgroundRepeat: 'no-repeat', + [`& .${classes.back}`]: { + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), + marginLeft: theme.spacing(-1), + }, + [`& .${classes.container}`]: { + paddingTop: 60 + 20, + marginBottom: theme.spacing(12), + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`, + [theme.breakpoints.up('md')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`, + }, + [theme.breakpoints.up('lg')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`, + }, + '& h1': { + marginBottom: theme.spacing(3), + }, + }, + '& .markdown-body': { + lineHeight: 1.7, + '& img, & video': { + border: '1px solid', + borderColor: (theme.vars || theme).palette.grey[200], + borderRadius: 12, + display: 'block', + margin: 'auto', + marginBottom: 16, + }, + '& strong': { + color: (theme.vars || theme).palette.grey[900], + }, + '& summary': { + padding: 8, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightMedium, + color: (theme.vars || theme).palette.grey[900], + }, + '& details': { + paddingLeft: 16, + paddingRight: 16, + background: alpha(theme.palette.grey[50], 0.5), + border: '1px solid', + borderRadius: 10, + borderColor: (theme.vars || theme).palette.grey[200], + transitionProperty: 'all', + transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '200ms', + '&:hover, &:focus-visible': { + background: (theme.vars || theme).palette.grey[50], + borderColor: (theme.vars || theme).palette.grey[300], + }, + }, + '& th': { + width: '100%', + textAlign: 'left', + borderBottom: `3px solid rgba(62, 80, 96, 0.2) !important`, + }, + '& .blog-description': { + fontSize: theme.typography.pxToRem(13), + marginTop: 8, + textAlign: 'center', + color: (theme.vars || theme).palette.grey[700], + '& a': { + color: 'inherit', + textDecoration: 'underline', + }, + }, + '& .MuiCode-root + .blog-description': { + marginTop: -20 + 8, + }, + }, + [`& .${classes.time}`]: { + color: (theme.vars || theme).palette.text.secondary, + ...theme.typography.caption, + fontWeight: 500, + }, + }), + ({ theme }) => + theme.applyDarkStyles({ + background: `linear-gradient(180deg, ${alpha(theme.palette.primary[900], 0.2)} 0%, ${ + (theme.vars || theme).palette.primaryDark[900] + } 100%)`, + backgroundSize: '100% 1000px', + backgroundRepeat: 'no-repeat', + '& .markdown-body': { + '& strong': { + color: (theme.vars || theme).palette.grey[100], + }, + '& summary': { + color: (theme.vars || theme).palette.grey[300], + }, + '& img, & video': { + borderColor: alpha(theme.palette.primaryDark[600], 0.5), + }, + '& details': { + background: alpha(theme.palette.primary[900], 0.3), + borderColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover, &:focus-visible': { + background: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primaryDark[500], + }, + }, + '& .blog-description': { + color: (theme.vars || theme).palette.grey[500], + }, + }, + }), +); + +export default function TopLayoutSurvey(props) { + const { className, docs } = props; + const { description, rendered, title, headers } = docs.en; + const finalTitle = title || headers.title; + const router = useRouter(); + const slug = router.pathname.replace(/(.*)\/(.*)/, '$2'); + const { canonicalAsServer } = pathnameToLanguage(router.asPath); + const card = + headers.card === 'true' + ? `https://mui.com/static/blog/${slug}/card.png` + : 'https://mui.com/static/logo.png'; + + if (process.env.NODE_ENV !== 'production') { + if (headers.card === undefined) { + throw new Error( + [ + `MUI: the "card" markdown header for the blog post "${slug}" is missing.`, + `Set card: true or card: false header in docs/pages/blog/${slug}.md.`, + ].join('\n'), + ); + } + } + + const renderContent = (chunk, index) => { + if (typeof chunk === 'string') { + // Check for the custom demo syntax + const demoMatch = chunk.match(/\{\{"demo":\s*"([^"]+)"\}\}/); + if (demoMatch) { + const demoPath = demoMatch[1]; + // Dynamically import the demo component + const DemoComponent = dynamic(() => import(`../../${demoPath}`)); + return ; + } + // Render as Markdown if no demo syntax + return ; + } + + console.warn('Non-string chunk encountered:', chunk); + return null; // Skip rendering for non-string chunks + }; + + + return ( + + + + authors[key].name).join(', ')} /> + +