Initial commit
This commit is contained in:
commit
210dc0c65e
18 changed files with 7313 additions and 0 deletions
15
.gitignore
vendored
Normal file
15
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env
|
||||
npm-debug.log
|
||||
23
package.json
Normal file
23
package.json
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"react-scripts": "0.8.5",
|
||||
"standard": "^8.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^15.4.2",
|
||||
"react-dom": "^15.4.2",
|
||||
"react-helmet": "^4.0.0",
|
||||
"react-router-dom": "next",
|
||||
"react-snapshot": "^1.0.4",
|
||||
"styled-components": "^1.4.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build && react-snapshot",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
31
public/index.html
Normal file
31
public/index.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tag above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start`.
|
||||
To create a production bundle, use `npm run build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
51
src/App.js
Normal file
51
src/App.js
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React, { Component } from 'react'
|
||||
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
|
||||
import Helmet from 'react-helmet'
|
||||
import Home from './views/Home'
|
||||
import About from './views/About'
|
||||
import NoMatch from './views/NoMatch'
|
||||
import Wrapper from './components/Wrapper'
|
||||
import Title from './components/Title'
|
||||
import Nav from './components/Nav'
|
||||
import NavLink from './components/NavLink'
|
||||
|
||||
const title = 'You Are Doing Great'
|
||||
const routes = [
|
||||
{
|
||||
title: 'Home',
|
||||
path: '/',
|
||||
component: Home,
|
||||
exact: true
|
||||
}, {
|
||||
title: 'About',
|
||||
path: '/about',
|
||||
component: About
|
||||
}
|
||||
]
|
||||
|
||||
class App extends Component {
|
||||
render () {
|
||||
return (
|
||||
<Router>
|
||||
<Wrapper>
|
||||
<Helmet titleTemplate={`%s - ${title}`} />
|
||||
<Title>YADG</Title>
|
||||
<Nav>
|
||||
<h1>Navigation</h1>
|
||||
{routes.map((route, i) => (
|
||||
<NavLink key={i} {...route} />
|
||||
))}
|
||||
</Nav>
|
||||
<Switch>
|
||||
{routes.map((route, i) => (
|
||||
<Route key={i} {...route} />
|
||||
))}
|
||||
<Route component={NoMatch} />
|
||||
</Switch>
|
||||
</Wrapper>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
8
src/App.test.js
Normal file
8
src/App.test.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<App />, div);
|
||||
});
|
||||
17
src/components/Nav.js
Normal file
17
src/components/Nav.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.nav`
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
> * {
|
||||
margin: 0 10px;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
}
|
||||
`
|
||||
24
src/components/NavLink.js
Normal file
24
src/components/NavLink.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react'
|
||||
import { Route, Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const NavLink = styled.div`
|
||||
a {
|
||||
transition: color 0.2s, border-bottom-color 0.2s;
|
||||
color: ${props => props.active ? '#0000ff' : '#666'};
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid;
|
||||
border-bottom-color: ${props => props.active ? 'rgba(0, 0, 255, 0.1)' : 'transparent'};
|
||||
&:hover, &:active, &:focus {
|
||||
color: ${props => props.active ? '#0000ff' : '#222'};
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export default ({path, exact, ...props}) => (
|
||||
<Route path={path} exact={exact} children={({match}) => (
|
||||
<NavLink active={match}>
|
||||
<Link to={path}>{props.title}</Link>
|
||||
</NavLink>
|
||||
)} />
|
||||
)
|
||||
12
src/components/Page.js
Normal file
12
src/components/Page.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
h1 {
|
||||
font-size: 5vmin;
|
||||
font-weight: normal;
|
||||
color: #0000ff;
|
||||
}
|
||||
p {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
`
|
||||
7
src/components/Title.js
Normal file
7
src/components/Title.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.h1`
|
||||
font-size: 10vmin;
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
`
|
||||
10
src/components/Wrapper.js
Normal file
10
src/components/Wrapper.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
padding: 4rem 1rem;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 801px) {
|
||||
width: 80vw;
|
||||
}
|
||||
max-width: 1140px;
|
||||
`
|
||||
21
src/index.css
Normal file
21
src/index.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: 1em;
|
||||
line-height: 1.4em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
14
src/index.js
Normal file
14
src/index.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import React from 'react'
|
||||
import { render } from 'react-snapshot'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
const rootEl = document.getElementById('root')
|
||||
render(<App />, rootEl)
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept('./App', () => {
|
||||
const NextApp = require('./App').default
|
||||
render(<NextApp />, rootEl)
|
||||
})
|
||||
}
|
||||
16
src/views/About.js
Normal file
16
src/views/About.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import Page from '../components/Page'
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<h1>This is the <strong>About</strong> view.</h1>
|
||||
<p>Ante himenaeos a vestibulum dignissim cursus porta a amet blandit massa netus parturient ac diam faucibus a vestibulum scelerisque dapibus ante vivamus praesent diam. Est duis dapibus parturient a a tristique duis adipiscing nam vivamus natoque habitasse suspendisse eu curabitur pretium scelerisque sodales consectetur est a augue conubia natoque penatibus ligula lacus. Parturient sagittis vulputate parturient urna ipsum aliquam suspendisse diam adipiscing at a massa urna maecenas litora inceptos pulvinar tempus odio pharetra mi platea nunc viverra. Parturient venenatis ipsum suspendisse ullamcorper nam himenaeos natoque sem auctor non et odio ridiculus elit volutpat vestibulum nisl a vestibulum libero cum molestie vestibulum. Condimentum sem magnis erat curae duis ut gravida parturient accumsan egestas a vestibulum suscipit a a at turpis varius sociis.</p>
|
||||
<p>Quisque aliquet rhoncus est quisque torquent velit orci luctus consectetur pharetra consectetur ac proin cras a consequat scelerisque dictumst faucibus. Id condimentum consectetur gravida donec cursus duis a vehicula parturient volutpat euismod habitant litora vestibulum a ad vestibulum sed. Dui amet nam vestibulum ipsum consectetur dapibus eu tempus vel a nec proin ornare nibh. Nunc cras tristique a eu non nunc auctor phasellus nisi porttitor tempus ad sodales at. A parturient adipiscing non neque morbi felis libero taciti fusce quisque tortor a posuere augue diam placerat vestibulum varius montes suspendisse parturient id. Iaculis suspendisse consectetur vitae libero a lectus quisque enim vulputate adipiscing fames viverra gravida vestibulum ullamcorper.</p>
|
||||
<p>Accumsan dui nullam id suspendisse vestibulum fames lobortis id sit vehicula pretium mus accumsan non volutpat mi. Ad orci ligula dis venenatis a maecenas tempor per nullam egestas vestibulum penatibus a suspendisse vel nulla tempus per scelerisque elit sed quisque sapien vestibulum ac cum enim a. Eleifend quam vestibulum diam suspendisse eu inceptos est iaculis in eros vestibulum velit class a massa diam potenti. Parturient ligula a diam integer nullam vestibulum platea ad donec a a inceptos ac cubilia condimentum habitant in ridiculus quisque sit. Duis sit mi augue leo adipiscing condimentum nostra a eu adipiscing sapien massa felis vestibulum senectus et taciti sodales.</p>
|
||||
<p>Iaculis ac vestibulum ullamcorper parturient et dis a parturient congue enim ante nostra adipiscing lobortis a. Ullamcorper condimentum aliquet in commodo ligula velit himenaeos ad metus interdum eu fringilla mi vulputate eu platea sed integer. Gravida pulvinar per nisi fames nascetur ut metus ipsum leo scelerisque habitasse iaculis enim ad luctus molestie vestibulum a montes suspendisse nisi eget primis eleifend quisque dui parturient.</p>
|
||||
<p>Cum class adipiscing aenean primis sed a ultricies himenaeos senectus bibendum interdum vel eleifend at justo. At ultricies posuere ullamcorper turpis praesent quam curae convallis suspendisse nullam parturient consequat sem condimentum rutrum eget. Luctus turpis facilisi potenti condimentum consectetur euismod ut in eu ac fringilla pulvinar a magna. Nisi gravida eu quisque egestas adipiscing adipiscing magna nam integer suspendisse et cubilia parturient nisl ut in suscipit a sit dapibus vestibulum nec condimentum a a. Eros libero ac quis vestibulum potenti lorem a a consectetur facilisis porta ultrices at sodales. Vestibulum adipiscing iaculis velit lacus mollis consectetur scelerisque mattis sapien parturient porta bibendum ultricies id urna ligula gravida curae facilisis.</p>
|
||||
<p>A sem vel nec sodales mi vivamus senectus sed potenti a parturient nascetur tincidunt nisi pulvinar rhoncus a. Risus imperdiet taciti suspendisse facilisi a per metus cubilia varius a nostra adipiscing amet ultrices quisque ac mi a. Dictumst a ultrices mi a dignissim ad fermentum eget a nam et a blandit scelerisque. Taciti lorem tempor quam vestibulum dis habitasse vestibulum diam vel est ut proin dis auctor. Suscipit scelerisque orci magna interdum vel bibendum duis netus a consectetur dui magnis ac aliquet sem posuere tincidunt vestibulum.</p>
|
||||
<Helmet title='About' />
|
||||
</Page>
|
||||
)
|
||||
16
src/views/Home.js
Normal file
16
src/views/Home.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import Page from '../components/Page'
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<h1>This is the <strong>Home</strong> view.</h1>
|
||||
<p>Scelerisque venenatis nibh fames ad quam feugiat leo commodo vitae sed lacus duis habitant maecenas sem interdum quisque duis mauris scelerisque scelerisque dui elit a condimentum vestibulum ad vestibulum. Laoreet nostra dui vivamus vestibulum integer taciti suscipit consectetur in a nullam quam nam ad nunc class nec ullamcorper urna sed nascetur ad. Vestibulum a sem leo nunc condimentum vestibulum euismod sapien aenean adipiscing a mi volutpat non fames. Adipiscing parturient parturient sit nec viverra tristique dui senectus commodo sem eu vestibulum vestibulum lorem ullamcorper. A quis a volutpat posuere suspendisse commodo nec elit parturient parturient sit ac sed suspendisse nam ullamcorper. Sit in a ut vivamus fringilla penatibus suspendisse scelerisque eu bibendum a egestas sodales vel rhoncus phasellus suspendisse faucibus viverra ultricies fusce laoreet libero a taciti.</p>
|
||||
<p>Elementum cras id suspendisse mi ut eros elit a enim curabitur posuere adipiscing eleifend auctor dictumst hac porttitor iaculis dis. Ut porttitor neque etiam primis et vestibulum parturient consectetur a etiam class consectetur a in massa parturient hac sed litora massa. Arcu enim arcu ac interdum ullamcorper consectetur aptent natoque curae mattis adipiscing a non metus netus arcu accumsan nam quisque condimentum posuere platea congue nisl mollis id nascetur.</p>
|
||||
<p>Facilisis diam adipiscing ut eu porta cubilia donec scelerisque suspendisse suspendisse parturient a elit adipiscing in eu porttitor at suspendisse suspendisse placerat. Faucibus vestibulum habitasse ac dignissim a interdum fringilla nisi tortor eget dictum netus curae a pulvinar semper feugiat pharetra. Cras facilisis feugiat mi urna nec porttitor id leo suspendisse suspendisse phasellus parturient lacus lobortis condimentum a mus. Mi nam phasellus ridiculus est nisl nullam maecenas eu a erat proin facilisis at massa sit ac aenean tempus sed pharetra curabitur gravida nulla dapibus in. Dolor venenatis sit ullamcorper suspendisse eu ac ridiculus a adipiscing et a suscipit lectus turpis volutpat lectus tincidunt per rutrum vestibulum consectetur consectetur adipiscing quam.</p>
|
||||
<p>Ullamcorper enim morbi adipiscing ac lacinia vestibulum tempor a pulvinar mauris natoque litora lectus a senectus. Parturient a sagittis viverra consectetur convallis in auctor dapibus vestibulum facilisi parturient ullamcorper vulputate a ullamcorper pulvinar justo platea fermentum aptent. Lectus condimentum vestibulum ut faucibus vulputate a feugiat aliquet faucibus platea iaculis sed condimentum vulputate scelerisque a eu in mi ullamcorper scelerisque adipiscing et fames parturient mollis adipiscing varius.</p>
|
||||
<p>Donec et pulvinar mi elementum parturient penatibus id dui scelerisque adipiscing egestas urna pharetra praesent scelerisque. Ullamcorper quis hendrerit a elit mi sit dis vestibulum fringilla mi pulvinar in erat aptent vestibulum nisi a enim vestibulum parturient. Laoreet ad in aliquet magna accumsan donec fringilla tellus consectetur vulputate dui interdum nisl sociis aliquam sociis adipiscing quisque adipiscing et velit.</p>
|
||||
<p>Sit vitae id ullamcorper adipiscing adipiscing nunc a vitae litora dolor consectetur primis parturient ligula. Sit porttitor luctus hac eu purus parturient phasellus ullamcorper eros hac malesuada aliquet suspendisse duis laoreet cum augue proin consectetur feugiat a scelerisque taciti ullamcorper parturient. Ut vel parturient parturient consectetur vel eros quisque tellus etiam parturient integer eleifend quisque condimentum faucibus congue nisi facilisi quam a pharetra viverra montes. Ad magna a curae turpis auctor condimentum nulla massa ligula himenaeos tempor a integer condimentum integer.</p>
|
||||
<Helmet title='Home' />
|
||||
</Page>
|
||||
)
|
||||
10
src/views/NoMatch.js
Normal file
10
src/views/NoMatch.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import Page from '../components/Page'
|
||||
|
||||
export default () => (
|
||||
<Page>
|
||||
<h1>404?!</h1>
|
||||
<Helmet title='404' />
|
||||
</Page>
|
||||
)
|
||||
Loading…
Add table
Reference in a new issue