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

Add some front page content #5398

Merged
merged 7 commits into from
Oct 11, 2018
Merged

Add some front page content #5398

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5b9b338
Make the navigation easier to read on small devices
Oct 11, 2018
4ea222f
Add section about how to get started
Oct 11, 2018
8ea3222
Add section about updating
Oct 11, 2018
10110a6
Add a few more features to the bottom
Oct 11, 2018
740ff8b
Fix indentation mess
Oct 11, 2018
83542fc
Add missing period
Oct 11, 2018
9b75131
Remove punctuation for consistency
Oct 11, 2018
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
37 changes: 32 additions & 5 deletions docusaurus/website/pages/en/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,9 @@ class HomeSplash extends React.Component {
<Button href={docUrl('getting-started', language)}>
Get started
</Button>
<Button href={docUrl('documentation-intro', language)}>Documentation</Button>
<Button href={docUrl('documentation-intro', language)}>
Documentation
</Button>
</PromoSection>
</div>
</SplashContainer>
Expand All @@ -93,12 +95,16 @@ const Block = props => (
id={props.id}
background={props.background}
>
<GridBlock align="center" contents={props.children} layout={props.layout} />
<GridBlock
align={props.align}
contents={props.children}
layout={props.layout}
/>
</Container>
);

const Features = () => (
<Block layout="threeColumn" align="left">
const Features = props => (
<Block layout="threeColumn" {...props}>
{[
{
content:
Expand All @@ -119,6 +125,26 @@ const Features = () => (
</Block>
);

const GetStarted = props => (
<Block layout="twoColumn" background="light" {...props}>
{[
{
title: 'Get started coding in a matter of seconds!',
content: `With Create React App, you get to focus on **writing React, not boilerplate**.
All you need to do is run a command, install some dependencies, and decide what's for dinner.

npx create-react-app my-app
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can tweak the CSS so the left hand side margin isn't so large in code blocks, what do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure I'll try to tune it down a bit :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, that's actually indentation - I'll just remove the indentation and we should be good 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, yeah it seemed not as large in the .md files.

How did you generate https://create-react-app-stngeqjqos.now.sh/? When poking around, I followed this and pulled your branch locally.

Copy link
Contributor Author

@selbekk selbekk Oct 11, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you generate https://create-react-app-stngeqjqos.now.sh/?

I use now from zeit - it's free and pretty easy to use. Once you've installed their CLI and logged in, you can do something like:

cd docusaurus/webpage
yarn build # to generate the html files
cd build/create-react-app # this is where the built files are
now # deploy to a unique URL

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! I'll have to check that out, and carbon too

`,
},
{
image:
'https://camo.githubusercontent.com/29765c4a32f03bd01d44edef1cd674225e3c906b/68747470733a2f2f63646e2e7261776769742e636f6d2f66616365626f6f6b2f6372656174652d72656163742d6170702f323762343261632f73637265656e636173742e737667',
imageAlign: 'right',
},
]}
</Block>
);

class Index extends React.Component {
render() {
const language = this.props.language || '';
Expand All @@ -127,7 +153,8 @@ class Index extends React.Component {
<div>
<HomeSplash language={language} />
<div className="mainContainer">
<Features />
<Features align="center" />
<GetStarted align="left" />
</div>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions docusaurus/website/static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,17 @@
text-decoration: underline;
}

.navigationSlider .slidingNav ul {
background: #282c34;
}

@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}

@media only screen and (min-width: 1024px) {
.navigationSlider .slidingNav ul {
background: none;
}
}

@media only screen and (max-width: 1023px) {
Expand Down