-
-
Notifications
You must be signed in to change notification settings - Fork 32.6k
[docs] Refresh the home page #19430
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
+512
−188
Merged
[docs] Refresh the home page #19430
Changes from all commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
6f71077
[docs] Add new user logos
mbrookes 09becd6
Update homepage layout
mbrookes 65fed52
Add testamonials
mbrookes 9e7ca2c
random quote
mbrookes 1137653
Center sponsors
mbrookes aa5af5b
clean up sponsors
mbrookes 5e249c1
refresh homepage themes images
mbrookes 0e3b0ae
Merge branch 'master' into docs-new-logos
mbrookes d45247e
smaller quotes
mbrookes b8f641e
3 quotes across
mbrookes 168f2fc
lint
mbrookes fa8678c
merge HomeQuote into HomeQuotes
mbrookes 5142a98
Link to source tweet
mbrookes 578db85
reduce vertical whitespace
mbrookes d63ccd0
prettier
mbrookes 7d02b58
lint
mbrookes 1c6cd93
Update docs/src/modules/components/HomeQuotes.js
6ffab39
Update docs/src/modules/components/HomeQuotes.js
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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,218 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { makeStyles } from '@material-ui/core/styles'; | ||
| import Link from 'docs/src/modules/components/Link'; | ||
| import Card from '@material-ui/core/Card'; | ||
| import CardActionArea from '@material-ui/core/CardActionArea'; | ||
| import CardContent from '@material-ui/core/CardContent'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Avatar from '@material-ui/core/Avatar'; | ||
| import TwitterIcon from '@material-ui/icons/Twitter'; | ||
| import NoSsr from '@material-ui/core/NoSsr'; | ||
| import Container from '@material-ui/core/Container'; | ||
| import Divider from '@material-ui/core/Divider'; | ||
|
|
||
| const quotes = [ | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/1134188599170215936/9CUB-yeB_400x400.jpg', | ||
| name: 'Aumit Leon', | ||
| username: '@aumitleon', | ||
| tweet: 'https://twitter.com/aumitleon/status/1210396946566963200', | ||
| quote: | ||
| 'Material-UI continues to blow my mind how easily I can put together really aesthetic and functional components and minimize overhead.', | ||
| }, | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/1169043984561389568/pEdFvVIW_400x400.jpg', | ||
| name: 'Derek Shanks', | ||
| username: '@fragileglass', | ||
| tweet: 'https://twitter.com/fragileglass/status/1205256087290753025', | ||
| quote: | ||
| 'It’s a game changer with how nicely it works with React. It’s made working with React so much more enjoyable. Everything is configurable and predictable. Bootstrap was killing me. It was hijacking my whole project.', | ||
| }, | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/1220819548523331584/3T1G8g1q_400x400.jpg', | ||
| name: 'Mohamed EL AYADI', | ||
| username: '@MohamedELAYAD19', | ||
| tweet: 'https://twitter.com/MohamedELAYAD19/status/1208118580430229504', | ||
| quote: | ||
| "Such a great library. I have used Material-UI for the last two years as the main react ui library in my projects (in more than 4 companies!) and I find that it's really great! A lot of good work and dedication are put in there. Salute to the team!", | ||
| }, | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/1144184864754851840/WIVBqpWM_400x400.jpg', | ||
| name: 'Matthias Margot', | ||
| username: '@matthiasmargot', | ||
| tweet: 'https://twitter.com/matthiasmargot/status/1215482285681795072', | ||
| quote: | ||
| 'The DX on Material-UI is absolutely insane and that package has shaped my approach to Component API Design / Composition Design & Style System Design. I think those guys got it idiomatically right, wonderful product.', | ||
| }, | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/849731047625502720/nudIAz2B_400x400.jpg', | ||
| name: 'Rodrigo Ciprian', | ||
| username: '@rodrigocipriani', | ||
| tweet: 'https://twitter.com/rodrigocipriani/status/1215578130217340929', | ||
| quote: | ||
| 'I always use Material-UI, it is really awesome, and it have a looot of very good and easy to use components.', | ||
| }, | ||
| { | ||
| avatar: 'https://pbs.twimg.com/profile_images/1129370929409056769/Zkwjy9_I_400x400.jpg', | ||
| name: 'Samantha Durrant', | ||
| username: '@SamDurrant_', | ||
| tweet: 'https://twitter.com/SamDurrant_/status/1214741763455209473', | ||
| quote: | ||
| 'Began coding out the front end of my app today. Used MaterialUI for the first time and love how easy it is to make things look nice. It’s also really cool to see all the hard work building out the backend of my app come to life in the front end!', | ||
| }, | ||
| ]; | ||
|
|
||
| const useStyles = makeStyles(theme => ({ | ||
| root: { | ||
| minHeight: 160, | ||
| paddingTop: theme.spacing(5), | ||
| margin: theme.spacing(0, 2), | ||
| }, | ||
| container: { | ||
| marginBottom: theme.spacing(4), | ||
| }, | ||
| users: { | ||
| padding: theme.spacing(10, 0, 0), | ||
| }, | ||
| grid: { | ||
| marginTop: theme.spacing(5), | ||
| marginBottom: theme.spacing(5), | ||
| }, | ||
| img: { | ||
| margin: theme.spacing(1.5, 3), | ||
| }, | ||
| button: { | ||
| margin: theme.spacing(2, 0, 0), | ||
| }, | ||
| })); | ||
|
|
||
| const useQuoteStyles = makeStyles(theme => ({ | ||
| card: { | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| height: '100%', | ||
| }, | ||
| cardAction: { | ||
| height: '100%', | ||
| }, | ||
| avatar: { | ||
| width: 48, | ||
| height: 48, | ||
| }, | ||
| twitter: { | ||
| marginLeft: 'auto', | ||
| color: theme.palette.primary.light, | ||
| }, | ||
| name: { | ||
| fontSize: 16, | ||
| }, | ||
| quote: { | ||
| paddingBottom: '16px !important', | ||
| paddingTop: 0, | ||
| }, | ||
| })); | ||
|
|
||
| const HomeQuoteLink = React.forwardRef((props, ref) => { | ||
| return ( | ||
| <Link | ||
| data-ga-event-category="quote" | ||
| data-ga-event-action="click" | ||
| data-ga-event-label="home-link" | ||
| target="_blank" | ||
| rel="noopener nofollow" | ||
| naked | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| function HomeQuote(props) { | ||
| const { avatar, href, name, quote, userName } = props; | ||
| const classes = useQuoteStyles(); | ||
|
|
||
| return ( | ||
| <Card variant="outlined" className={classes.card}> | ||
| <CardActionArea component={HomeQuoteLink} href={href} className={classes.cardAction}> | ||
| <CardContent> | ||
| <Grid container spacing={3}> | ||
| <Grid item> | ||
| <Avatar src={avatar} alt={name} className={classes.avatar} /> | ||
| </Grid> | ||
| <Grid item> | ||
| <Typography variant="h6" color="textPrimary" className={classes.name}> | ||
| {name} | ||
| </Typography> | ||
| <Typography variant="subtitle2" color="textSecondary"> | ||
| {userName} | ||
| </Typography> | ||
| </Grid> | ||
| <Grid item className={classes.twitter}> | ||
| <TwitterIcon /> | ||
| </Grid> | ||
| </Grid> | ||
| </CardContent> | ||
| <CardContent className={classes.quote}> | ||
| <Typography color="textPrimary" variant="body2"> | ||
| {quote} | ||
| </Typography> | ||
| </CardContent> | ||
| </CardActionArea> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| HomeQuote.propTypes = { | ||
| avatar: PropTypes.string, | ||
| href: PropTypes.string, | ||
| name: PropTypes.string, | ||
| quote: PropTypes.string, | ||
| userName: PropTypes.string, | ||
| }; | ||
|
|
||
| const startIndex = Math.floor(Math.random() * quotes.length); | ||
| const selectedQuotes = []; | ||
| for (let i = 0; i < 3; i += 1) { | ||
| selectedQuotes.push(quotes[(startIndex + i) % quotes.length]); | ||
| } | ||
|
|
||
| function HomeQuotes() { | ||
| const classes = useStyles(); | ||
| const t = useSelector(state => state.options.t); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <NoSsr> | ||
| <Container maxWidth="md" className={classes.container} disableGutters> | ||
| <Divider /> | ||
| <div className={classes.users}> | ||
| <Typography variant="h4" component="h2" align="center" gutterBottom> | ||
| {t('praise')} | ||
| </Typography> | ||
| <Typography variant="body1" align="center" gutterBottom> | ||
| {t('praiseDescr')} | ||
| </Typography> | ||
| <Grid container spacing={2} className={classes.grid}> | ||
| {selectedQuotes.map(quote => ( | ||
| <Grid item xs={12} md={4} key={quote.username}> | ||
| <HomeQuote | ||
| avatar={quote.avatar} | ||
| href={quote.tweet} | ||
| name={quote.name} | ||
| userName={quote.username} | ||
| quote={quote.quote} | ||
| /> | ||
| </Grid> | ||
| ))} | ||
| </Grid> | ||
| </div> | ||
| </Container> | ||
| </NoSsr> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default HomeQuotes; | ||
This file contains hidden or 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
This file contains hidden or 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
This file contains hidden or 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,96 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { withStyles, useTheme } from '@material-ui/core/styles'; | ||
| import Typography from '@material-ui/core/Typography'; | ||
| import Container from '@material-ui/core/Container'; | ||
| import Grid from '@material-ui/core/Grid'; | ||
| import Button from '@material-ui/core/Button'; | ||
| import NoSsr from '@material-ui/core/NoSsr'; | ||
| import Link from 'docs/src/modules/components/Link'; | ||
|
|
||
| const styles = theme => ({ | ||
| root: { | ||
| padding: theme.spacing(2), | ||
| minHeight: 160, | ||
| marginTop: theme.spacing(8), | ||
| }, | ||
|
|
||
| link: { | ||
| marginTop: theme.spacing(1), | ||
| display: 'block', | ||
| }, | ||
| img: { | ||
| maxWidth: 960, | ||
| width: '100%', | ||
| height: 'auto', | ||
| marginTop: theme.spacing(4), | ||
| }, | ||
| button: { | ||
| margin: theme.spacing(4, 0, 6), | ||
| }, | ||
| }); | ||
|
|
||
| const PremiumThemesLink = React.forwardRef((props, ref) => { | ||
| return ( | ||
| <Link | ||
| data-ga-event-category="premium-themes" | ||
| data-ga-event-action="click" | ||
| data-ga-event-label="home-link" | ||
| href="https://themes.material-ui.com/" | ||
| naked | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| function HomeThemes(props) { | ||
| const { classes } = props; | ||
| const t = useSelector(state => state.options.t); | ||
| const theme = useTheme(); | ||
|
|
||
| return ( | ||
| <div className={classes.root}> | ||
| <NoSsr> | ||
| <Container maxWidth="md"> | ||
| <Typography variant="h4" component="h2" align="center" gutterBottom> | ||
| {t('themes')} | ||
| </Typography> | ||
| <Typography variant="body1" align="center" gutterBottom> | ||
| {t('themesDescr')} | ||
| </Typography> | ||
| <Link | ||
| href="https://themes.material-ui.com/" | ||
| data-ga-event-category="premium-themes" | ||
| data-ga-event-action="click" | ||
| data-ga-event-label="home-image" | ||
| className={classes.link} | ||
| > | ||
| <NoSsr> | ||
| <img | ||
| className={classes.img} | ||
| alt={t('themesButton')} | ||
| src={`/static/images/themes-${theme.palette.type}.jpg`} | ||
| loading="eager" | ||
| width={500} | ||
| height={307} | ||
| /> | ||
| </NoSsr> | ||
| </Link> | ||
| <Grid container justify="center"> | ||
| <Button variant="outlined" component={PremiumThemesLink} className={classes.button}> | ||
| {t('themesButton')} | ||
| </Button> | ||
| </Grid> | ||
| </Container> | ||
| </NoSsr> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| HomeThemes.propTypes = { | ||
| classes: PropTypes.object.isRequired, | ||
| }; | ||
|
|
||
| export default withStyles(styles)(HomeThemes); |
This file contains hidden or 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
This file contains hidden or 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 |
|---|---|---|
| @@ -1,31 +1,22 @@ | ||
| <h2 align="center">Material-UI's sponsors</h2> | ||
|
|
||
| The core of Material-UI is a [crowd-funded](/discover-more/backers/) open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. | ||
| The continued development and maintenance of Material-UI is made possible by these generous sponsors: | ||
|
|
||
| ### Diamond 💎 | ||
|
|
||
| *3/3 slots available* | ||
|
|
||
| Diamond Sponsors are those who have pledged $2,000/month or more to Material-UI. | ||
| Please contact us at diamond@material-ui.com to subscribe to this tier. | ||
|
|
||
| ### Gold 🏆 | ||
|
|
||
| via [Patreon](https://www.patreon.com/oliviertassinari) | ||
|
|
||
| <p style="display: flex; justify-content: center;"> | ||
| <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="tidelift" href="https://tidelift.com/subscription/pkg/npm-material-ui?utm_source=material_ui&utm_medium=referral&utm_campaign=homepage" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/tidelift.png?size=96" alt="tidelift" title="Enterprise-ready open source software" /></a> | ||
| <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="bitsrc" href="https://bit.dev" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img width="96" src="https://github.com/teambit.png?size=96" alt="bitsrc" title="The fastest way to share code" /></a> | ||
| </p> | ||
|
|
||
| via [OpenCollective](https://opencollective.com/material-ui) | ||
|
|
||
| <p style="display: flex; justify-content: center; flex-wrap: wrap;"> | ||
| <a data-ga-event-category="sponsors" data-ga-event-action="logo" data-ga-event-label="callemall" href="https://www.call-em-all.com" rel="noopener sponsored" target="_blank" style="margin-right: 16px;"><img src="https://images.opencollective.com/proxy/images?src=https%3A%2F%2Fopencollective-production.s3-us-west-1.amazonaws.com%2Ff4053300-e0ea-11e7-acf0-0fa7c0509f4e.png&height=100" alt="call-em-all" title="The easy way to message your group" width="100" loading="lazy"></a> | ||
| </p> | ||
|
|
||
| Gold Sponsors are those who have pledged $500/month or more to Material-UI. | ||
|
|
||
| ### There are more! | ||
|
|
||
| See the full list of [our backers](/discover-more/backers/). | ||
| See the full list of [our sponsors](/discover-more/backers/), and learn how you can contribute to the future of Material-UI. |
This file contains hidden or 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
This file contains hidden or 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or 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
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.
Uh oh!
There was an error while loading. Please reload this page.