Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[docs] Extract landing-only modules #20187

Merged
merged 6 commits into from
Mar 20, 2020
Merged

[docs] Extract landing-only modules #20187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8578134
[docs] Move landing page components to makeStyles
eps1lon Mar 19, 2020
3a5efed
modules/Home* -> pages/landing/*
eps1lon Mar 19, 2020
0869de0
patch regression
oliviertassinari Mar 20, 2020
870dc85
Merge branch 'master' into docs/landing-refactor
eps1lon Mar 20, 2020
d5b8276
remove unused pattern
eps1lon Mar 20, 2020
f23bca0
Consistent naming
eps1lon Mar 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 76 additions & 73 deletions docs/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import Container from '@material-ui/core/Container';
import HomeSteps from 'docs/src/modules/components/HomeSteps';
import HomeThemes from 'docs/src/modules/components/HomeThemes';
import HomeQuickWord from 'docs/src/modules/components/HomeQuickWord';
import HomeSponsors from 'docs/src/modules/components/HomeSponsors';
import HomeUsers from 'docs/src/modules/components/HomeUsers';
import HomeQuotes from 'docs/src/modules/components/HomeQuotes';
import HomePro from 'docs/src/modules/components/HomePro';
import Steps from 'docs/src/pages/landing/Steps';
import Themes from 'docs/src/pages/landing/Themes';
import QuickWord from 'docs/src/pages/landing/QuickWord';
import Sponsors from 'docs/src/pages/landing/Sponsors';
import Users from 'docs/src/pages/landing/Users';
import Quotes from 'docs/src/pages/landing/Quotes';
import Pro from 'docs/src/pages/landing/Pro';
import AppFooter from 'docs/src/modules/components/AppFooter';
import AppFrame from 'docs/src/modules/components/AppFrame';
import Link from 'docs/src/modules/components/Link';
Expand All @@ -30,75 +30,78 @@ function loadDependencies() {
loadScript('https://platform.twitter.com/widgets.js', document.querySelector('head'));
}

const useStyles = makeStyles(theme => ({
root: {
flex: '1 0 100%',
},
hero: {
paddingTop: theme.spacing(8),
color: theme.palette.primary.main,
},
content: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(8),
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(16),
paddingBottom: theme.spacing(16),
flexDirection: 'row',
alignItems: 'flex-start',
textAlign: 'left',
const useStyles = makeStyles(
theme => ({
root: {
flex: '1 0 100%',
},
},
title: {
marginLeft: -12,
whiteSpace: 'nowrap',
letterSpacing: '.7rem',
textIndent: '.7rem',
fontWeight: theme.typography.fontWeightLight,
[theme.breakpoints.only('xs')]: {
fontSize: 28,
hero: {
paddingTop: theme.spacing(8),
color: theme.palette.primary.main,
},
},
logo: {
flexShrink: 0,
width: 120,
height: 120,
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginRight: theme.spacing(8),
width: 195,
height: 175,
},
},
button: {
marginTop: theme.spacing(4),
},
social: {
padding: theme.spacing(2, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 21,
boxSizing: 'content-box',
'& span': {
content: {
display: 'flex',
marginRight: theme.spacing(1),
flexDirection: 'column',
alignItems: 'center',
textAlign: 'center',
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(8),
[theme.breakpoints.up('md')]: {
paddingTop: theme.spacing(16),
paddingBottom: theme.spacing(16),
flexDirection: 'row',
alignItems: 'flex-start',
textAlign: 'left',
},
},
title: {
marginLeft: -12,
whiteSpace: 'nowrap',
letterSpacing: '.7rem',
textIndent: '.7rem',
fontWeight: theme.typography.fontWeightLight,
[theme.breakpoints.only('xs')]: {
fontSize: 28,
},
},
logo: {
flexShrink: 0,
width: 120,
height: 120,
marginBottom: theme.spacing(2),
[theme.breakpoints.up('md')]: {
marginRight: theme.spacing(8),
width: 195,
height: 175,
},
},
'& a': {
color: theme.palette.background.paper,
button: {
marginTop: theme.spacing(4),
},
social: {
padding: theme.spacing(2, 0),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 21,
boxSizing: 'content-box',
'& span': {
display: 'flex',
marginRight: theme.spacing(1),
},
'& a': {
color: theme.palette.background.paper,
},
},
},
}));
}),
{ name: 'LandingPage' },
);

const GettingStartedLink = React.forwardRef((props, ref) => {
return <Link href="/getting-started/installation" naked ref={ref} {...props} />;
});

export default function HomePage() {
export default function LandingPage() {
React.useEffect(() => {
if (window.location.hash !== '' && window.location.hash !== '#main=content') {
window.location.replace(`https://v0.material-ui.com/${window.location.hash}`);
Expand Down Expand Up @@ -158,13 +161,13 @@ export default function HomePage() {
Follow
</a>
</div>
<HomePro />
<HomeQuickWord />
<HomeSteps />
<HomeThemes />
<HomeSponsors />
<HomeQuotes />
<HomeUsers />
<Pro />
<QuickWord />
<Steps />
<Themes />
<Sponsors />
<Quotes />
<Users />
</main>
<AppFooter />
</div>
Expand Down
47 changes: 0 additions & 47 deletions docs/src/modules/components/HomePro.js
View file
Open in desktop

This file was deleted.

43 changes: 43 additions & 0 deletions docs/src/pages/landing/Pro.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import classNames from 'classnames';
import { makeStyles } from '@material-ui/core/styles';
import Link from 'docs/src/modules/components/Link';
import { useSelector } from 'react-redux';

const useStyles = makeStyles(
theme => ({
root: {
padding: theme.spacing(1, 2, 1, 2),
right: 0,
left: 0,
color: theme.palette.common.white,
backgroundColor: '#626980',
position: 'relative',
display: 'none',
[theme.breakpoints.up('sm')]: {
display: 'flex',
top: 100,
left: 'auto',
position: 'absolute',
borderBottomLeftRadius: 36 / 2,
borderTopLeftRadius: 36 / 2,
},
},
}),
{ name: 'Pro' },
);

export default function Pro() {
const classes = useStyles();
const t = useSelector(state => state.options.t);

return (
<Link
variant="body2"
className={classNames(classes.root, 'mui-fixed')}
href="/getting-started/support/#professional-support-premium"
>
{t('getProfessionalSupport')}
</Link>
);
}
30 changes: 13 additions & 17 deletions docs/src/modules/components/HomeQuickWord.js → docs/src/pages/landing/QuickWord.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import NoSsr from '@material-ui/core/NoSsr';
import Link from 'docs/src/modules/components/Link';
Expand All @@ -25,16 +24,19 @@ const backers = [
},
];

const styles = theme => ({
root: {
textAlign: 'center',
minHeight: 60,
paddingBottom: theme.spacing(2),
},
});
const useStyles = makeStyles(
theme => ({
root: {
textAlign: 'center',
minHeight: 60,
paddingBottom: theme.spacing(2),
},
}),
{ name: 'QuickWord' },
);

function HomeQuickWord(props) {
const { classes } = props;
export default function QuickWord() {
const classes = useStyles();
const t = useSelector(state => state.options.t);
const backer = backers[Math.floor(backers.length * Math.random())];

Expand All @@ -58,9 +60,3 @@ function HomeQuickWord(props) {
</div>
);
}

HomeQuickWord.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HomeQuickWord);
Loading