HyperStatic Init
This commit is contained in:
Jinksi
parent
349dad5613
commit
f444038d92
19 changed files with 381 additions and 735 deletions
30
README.md
30
README.md
|
|
@ -1,30 +1,32 @@
|
|||
|
||||
# 🍉 HyperStatic
|
||||
|
||||
# An Almost Static Stack
|
||||
A not-so-static site boilerplate:
|
||||
|
||||
This repo serves as a companion to the [tutorial of the same name, over on Medium](https://medium.com/superhighfives/).
|
||||
- **Create React App** for simplicity
|
||||
- **Styled Components** for component-based css
|
||||
- **React Router** for routing (v4)
|
||||
- **React Helmet** for document titles, descriptions, meta
|
||||
- **React Snapshot** for pre-rendering to static html so it works without Javascript ⭐️
|
||||
|
||||
## Getting started
|
||||
## Get going
|
||||
|
||||
``` shell
|
||||
git clone https://github.com/superhighfives/an-almost-static-stack.git
|
||||
cd an-almost-static-stack
|
||||
git clone https://github.com/jinksi/hyperstatic.git
|
||||
cd hyperstatic
|
||||
yarn install
|
||||
yarn start
|
||||
```
|
||||
|
||||
Once you're ready to deploy to [Surge](https://surge.sh), run:
|
||||
## Build
|
||||
|
||||
``` shell
|
||||
yarn deploy
|
||||
yarn build
|
||||
```
|
||||
|
||||
Voila!
|
||||
This will generate static html files for each route into the `./build` directory. Ready for deployment!
|
||||
|
||||
If you're not into [Yarn](https://yarnpkg.com/), `npm install`, `npm start` and `npm run deploy` all work as well.
|
||||
## Thanks
|
||||
|
||||
## create-react-app
|
||||
Originally forked from [superhighfives/an-almost-static-stack](https://github.com/superhighfives/an-almost-static-stack). Check this out if you want a similar starting point for your own project.
|
||||
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
|
||||
|
||||
You can find more information [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
|
||||
Bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -1,24 +1,24 @@
|
|||
{
|
||||
"name": "app",
|
||||
"version": "0.1.0",
|
||||
"name": "hyper-static",
|
||||
"version": "0.1.1",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"react-scripts": "0.8.5",
|
||||
"standard": "^8.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"normalize.css": "^5.0.0",
|
||||
"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"
|
||||
"styled-components": "^1.4.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build && react-snapshot",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject",
|
||||
"deploy": "npm run build && surge -p build"
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 83 KiB |
|
|
@ -13,7 +13,7 @@
|
|||
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>
|
||||
<title>🍉 HyperStatic</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
16
src/App.js
16
src/App.js
|
|
@ -4,12 +4,13 @@ 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 { Container } from './components/common'
|
||||
import PageHeader from './components/PageHeader'
|
||||
import Nav from './components/Nav'
|
||||
import NavLink from './components/NavLink'
|
||||
import Logo from './components/Logo'
|
||||
|
||||
const title = 'You Are Doing Great'
|
||||
const siteTitle = 'HyperStatic'
|
||||
const routes = [
|
||||
{
|
||||
title: 'Home',
|
||||
|
|
@ -27,11 +28,10 @@ class App extends Component {
|
|||
render () {
|
||||
return (
|
||||
<Router>
|
||||
<Wrapper>
|
||||
<Helmet titleTemplate={`%s - ${title}`} />
|
||||
<Title>YADG</Title>
|
||||
<div>
|
||||
<Helmet titleTemplate={`${siteTitle} | %s`} />
|
||||
<Nav>
|
||||
<h1>Navigation</h1>
|
||||
<Logo>🍉</Logo>
|
||||
{routes.map((route, i) => (
|
||||
<NavLink key={i} {...route} />
|
||||
))}
|
||||
|
|
@ -42,7 +42,7 @@ class App extends Component {
|
|||
))}
|
||||
<Route component={NoMatch} />
|
||||
</Switch>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</Router>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
7
src/components/Logo.js
Normal file
7
src/components/Logo.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.span`
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
padding: 0 1rem;
|
||||
`
|
||||
|
|
@ -1,17 +1,15 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Container } from './common'
|
||||
|
||||
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;
|
||||
}
|
||||
const Nav = styled.nav`
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`
|
||||
|
||||
export default (props) => (
|
||||
<Container>
|
||||
<Nav {...props} />
|
||||
</Container>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,15 +2,18 @@ import React from 'react'
|
|||
import { Route, Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
|
||||
const NavLink = styled.div`
|
||||
const NavLink = styled.span`
|
||||
a {
|
||||
padding: .5rem 1rem;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
transition: color 0.2s, border-bottom-color 0.2s;
|
||||
color: ${props => props.active ? '#0000ff' : '#666'};
|
||||
color: ${props => props.active ? 'var(--col1)' : 'inherit'};
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid;
|
||||
border-bottom-color: ${props => props.active ? 'rgba(0, 0, 255, 0.1)' : 'transparent'};
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: ${props => props.active ? 'var(--col1)' : 'transparent'};
|
||||
&:hover, &:active, &:focus {
|
||||
color: ${props => props.active ? '#0000ff' : '#222'};
|
||||
color: ${props => props.active ? 'var(--col1)' : 'inherit'};
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
h1 {
|
||||
font-size: 5vmin;
|
||||
font-weight: normal;
|
||||
color: #0000ff;
|
||||
}
|
||||
p {
|
||||
font-size: 0.9375rem;
|
||||
p{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
`
|
||||
|
|
|
|||
29
src/components/PageHeader.js
Normal file
29
src/components/PageHeader.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import { Section, Container } from './common'
|
||||
|
||||
const Header = styled(Section)`
|
||||
line-height: 1em;
|
||||
color: var(--col1);
|
||||
background: var(--col1);
|
||||
color: white;
|
||||
h2{
|
||||
font-weight: 100;
|
||||
}
|
||||
`
|
||||
|
||||
const PageHeader = (props) => (
|
||||
<Header>
|
||||
<Container>
|
||||
<h1>{props.title}</h1>
|
||||
{props.subTitle ? <h2>{props.subTitle}</h2> : ''}
|
||||
</Container>
|
||||
</Header>
|
||||
)
|
||||
|
||||
PageHeader.propTypes = {
|
||||
title: React.PropTypes.string,
|
||||
subTitle: React.PropTypes.string,
|
||||
}
|
||||
|
||||
export default PageHeader
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.h1`
|
||||
font-size: 10vmin;
|
||||
line-height: 1em;
|
||||
font-weight: bold;
|
||||
`
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.div`
|
||||
padding: 4rem 1rem;
|
||||
margin: 0 auto;
|
||||
@media (min-width: 801px) {
|
||||
width: 80vw;
|
||||
}
|
||||
max-width: 1140px;
|
||||
`
|
||||
12
src/components/common.js
Normal file
12
src/components/common.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export const Container = styled.div`
|
||||
margin: 0 auto;
|
||||
max-width: 1111px;
|
||||
width: 90vw;
|
||||
`
|
||||
|
||||
export const Section = styled.section`
|
||||
width: 100%;
|
||||
padding: 5rem 0;
|
||||
`
|
||||
|
|
@ -1,7 +1,21 @@
|
|||
:root{
|
||||
--col1: #FA5463;
|
||||
--col2: #212121;
|
||||
}
|
||||
|
||||
html{
|
||||
box-sizing: border-box;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-family: 'Avenir', sans-serif;
|
||||
color: var(--col2);
|
||||
font-size: 1.6em;
|
||||
font-weight: 300;
|
||||
letter-spacing: .01em;
|
||||
line-height: 1.6;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -10,12 +24,7 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
font-size: 1em;
|
||||
line-height: 1.4em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* + * {
|
||||
margin-top: 1rem;
|
||||
a{
|
||||
color: var(--col1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import { render } from 'react-snapshot'
|
||||
import App from './App'
|
||||
import 'normalize.css'
|
||||
import './index.css'
|
||||
|
||||
const rootEl = document.getElementById('root')
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import Page from '../components/Page'
|
||||
import PageHeader from '../components/PageHeader'
|
||||
import { Container } from '../components/common'
|
||||
|
||||
export default () => (
|
||||
export default (props) => (
|
||||
<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>
|
||||
<PageHeader title={props.title} subTitle="Welcome"/>
|
||||
<Container>
|
||||
<h1>About</h1>
|
||||
<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>
|
||||
</Container>
|
||||
<Helmet title='About' />
|
||||
</Page>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React from 'react'
|
||||
import Helmet from 'react-helmet'
|
||||
import Page from '../components/Page'
|
||||
import { Container } from '../components/common'
|
||||
import PageHeader from '../components/PageHeader'
|
||||
|
||||
export default () => (
|
||||
export default (props) => (
|
||||
<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>
|
||||
<PageHeader title={props.title}/>
|
||||
<Container>
|
||||
<h1>Welcome.</h1>
|
||||
<p>Hello!</p>
|
||||
</Container>
|
||||
<Helmet title='Home' />
|
||||
</Page>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,6 +5,6 @@ import Page from '../components/Page'
|
|||
export default () => (
|
||||
<Page>
|
||||
<h1>404?!</h1>
|
||||
<Helmet title='404' />
|
||||
<Helmet title='404 – Page Not Found' />
|
||||
</Page>
|
||||
)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue