[docs] Improve "Example projects" page design #37007
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,188 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import Grid from '@mui/material/Unstable_Grid2'; | ||
| import Card from '@mui/material/Card'; | ||
| import Avatar from '@mui/material/Avatar'; | ||
| import Typography from '@mui/material/Typography'; | ||
| import Link from '@mui/material/Link'; | ||
| import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded'; | ||
| import FilterDramaIcon from '@mui/icons-material/FilterDrama'; | ||
|
|
||
| const examples = [ | ||
| { | ||
| name: 'Next.js', | ||
| label: 'View JS example', | ||
| tsLabel: 'View TS example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-next', | ||
| tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-next-ts', | ||
| src: '/static/images/examples/next.svg', | ||
| }, | ||
| { | ||
| name: 'Create React App', | ||
| label: 'View JS example', | ||
| tsLabel: 'View TS example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra', | ||
| tsLink: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-ts', | ||
| src: '/static/images/examples/cra.svg', | ||
| }, | ||
| { | ||
| name: 'Remix', | ||
| label: 'View example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-remix-ts', | ||
| src: '/static/images/examples/remix.svg', | ||
| }, | ||
| { | ||
| name: 'Tailwind CSS', | ||
| label: 'View example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-tailwind-ts', | ||
| src: '/static/images/examples/tailwindcss.svg', | ||
| }, | ||
| { | ||
| name: 'Vite.js', | ||
| label: 'View JS example', | ||
| tsLabel: 'View TS example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-vite', | ||
| src: '/static/images/examples/vite.svg', | ||
| }, | ||
| { | ||
| name: 'styled-components', | ||
| label: 'View JS example', | ||
| tsLabel: 'View TS example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components', | ||
| tsLink: | ||
| 'https://github.com/mui/material-ui/tree/master/examples/material-cra-styled-components-ts', | ||
| src: '/static/images/examples/styled.png', | ||
| }, | ||
| { | ||
| name: 'Gatsby', | ||
| label: 'View example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-gatsby', | ||
| src: '/static/images/examples/gatsby.svg', | ||
| }, | ||
| { | ||
| name: 'Preact', | ||
| label: 'View example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-preact', | ||
| src: '/static/images/examples/preact.svg', | ||
| }, | ||
| { | ||
| name: 'CDN', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-via-cdn', | ||
| label: 'View example', | ||
| src: <FilterDramaIcon />, | ||
| }, | ||
| { | ||
| name: 'Express.js (server-rendered)', | ||
| label: 'View example', | ||
| link: 'https://github.com/mui/material-ui/tree/master/examples/material-express-ssr', | ||
| src: '/static/images/examples/express.png', | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ExampleCollection() { | ||
| return ( | ||
| <Grid container spacing={2}> | ||
| {examples.map((example) => ( | ||
| <Grid key={example.name} item xs={12} sm={6}> | ||
| <Card | ||
| sx={[ | ||
| { | ||
| p: 2, | ||
| height: '100%', | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| gap: 2, | ||
| bgcolor: '#fff', | ||
| backgroundImage: 'none', | ||
| borderRadius: 1, | ||
| border: '1px solid', | ||
| borderColor: 'grey.200', | ||
| boxShadow: 'none', | ||
| '&:hover': { | ||
| borderColor: 'grey.300', | ||
| boxShadow: '0px 2px 8px rgba(170, 180, 190, 0.2)', | ||
| }, | ||
| }, | ||
| (theme) => | ||
| theme.applyDarkStyles({ | ||
| bgcolor: 'transparent', | ||
| borderColor: 'primaryDark.700', | ||
| '&:hover': { | ||
| borderColor: 'primaryDark.600', | ||
| boxShadow: '0px 2px 8px rgba(0, 13, 26, 1)', | ||
| }, | ||
| }), | ||
| ]} | ||
| > | ||
| <Avatar | ||
| imgProps={{ | ||
| width: '40', | ||
| height: '40', | ||
| loading: 'lazy', | ||
| }} | ||
| {...(typeof example.src === 'string' | ||
| ? { src: example.src } | ||
| : { children: example.src })} | ||
| alt={example.name} | ||
| /> | ||
| <div> | ||
| <Typography variant="body" fontWeight={600} sx={{ fontFamily: 'IBM Plex Sans' }}> | ||
danilo-leal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| {example.name} | ||
| </Typography> | ||
| <Box | ||
| sx={{ | ||
| display: 'flex', | ||
| flexWrap: 'wrap', | ||
| alignItems: 'baseline', | ||
| }} | ||
| > | ||
| <Link | ||
| href={example.link} | ||
| variant="body2" | ||
| sx={{ | ||
| fontFamily: 'IBM Plex Sans', | ||
| fontWeight: 500, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| mt: 0.5, | ||
| }} | ||
| > | ||
| {example.label} | ||
| <ChevronRightRoundedIcon fontSize="small" /> | ||
| </Link> | ||
| {!!example.tsLink && ( | ||
| <React.Fragment> | ||
| <Typography | ||
| variant="caption" | ||
| sx={{ | ||
| fontFamily: 'IBM Plex Sans', | ||
| display: { xs: 'none', sm: 'block' }, | ||
| opacity: 0.2, | ||
| mr: 0.75, | ||
| }} | ||
| > | ||
| / | ||
| </Typography> | ||
| <Link | ||
| href={example.tsLink} | ||
| variant="body2" | ||
| sx={{ | ||
| fontFamily: 'IBM Plex Sans', | ||
| fontWeight: 500, | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| }} | ||
| > | ||
| {example.tsLabel} | ||
| <ChevronRightRoundedIcon fontSize="small" /> | ||
| </Link> | ||
| </React.Fragment> | ||
| )} | ||
| </Box> | ||
| </div> | ||
| </Card> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -219,7 +219,9 @@ module.exports = async function demoLoader() { | |||||||||||
| ); | ||||||||||||
|
|
||||||||||||
| componentNames.forEach((componentName) => { | ||||||||||||
| const moduleID = path | ||||||||||||
| .join(this.rootContext, 'src', componentName.replace(/^docs\/src/, '')) | ||||||||||||
| .replace(/\\/g, '/'); | ||||||||||||
|
Comment on lines
+222
to
+224
There was a problem hiding this comment. Is this change needed? https://github.com/mui/material-ui/pull/37007/files#r1205292380
Suggested change
|
||||||||||||
|
|
||||||||||||
| components[moduleID] = componentName; | ||||||||||||
| componentModuleIDs.add(moduleID); | ||||||||||||
|
|
||||||||||||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we update the rest of the docs to use the full import path?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You tell me! Is it better, code-wise?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would imagine that
in the docs page would have worked without the need to change the docs-infra: https://github.com/mui/material-ui/pull/37007/files#diff-8896d42292e63fa8530b9808a333b4770fee0e9fbe33d57e0b4ab5b3b723ed3dR223.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh actually, the location of the demo. This is now with the rest of the global component:
docs/src/modules/components/. This folder is meant for global components.If this component is only used on this page, I think we should move it, we can host it in the same folder as the docs
docs/data/material/getting-started/example-projects/so that if we ever refactor the page, we would remove this dead demo at the same time.Shall we move the file?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll leave it up to @siriwatknp to decide on this one, then, as he pushed that commit on!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking back at this, I think one of the reasons to have it moved over to that global folder was so it could pick up the theme. Is there a way so that it sits locally with the markdown files but picking up the branding theme?