diff --git a/README.md b/README.md index 7dfa127..f2d6781 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,32 @@ -![An Almost Static Stack](https://i.imgur.com/NStGYap.jpg) +# 🍉 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). diff --git a/package.json b/package.json index f64f4da..498e82a 100644 --- a/package.json +++ b/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" } } diff --git a/public/favicon.ico b/public/favicon.ico index 5c125de..67265eb 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aab5e3b..b26c522 100644 --- a/public/index.html +++ b/public/index.html @@ -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`. --> - React App + 🍉 HyperStatic
diff --git a/src/App.js b/src/App.js index 9275488..c7cab7d 100644 --- a/src/App.js +++ b/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 ( - - - YADG +
+
) } diff --git a/src/components/Logo.js b/src/components/Logo.js new file mode 100644 index 0000000..40c72d2 --- /dev/null +++ b/src/components/Logo.js @@ -0,0 +1,7 @@ +import styled from 'styled-components' + +export default styled.span` + display: block; + font-size: 2rem; + padding: 0 1rem; +` diff --git a/src/components/Nav.js b/src/components/Nav.js index 5ee9699..39fb1cf 100644 --- a/src/components/Nav.js +++ b/src/components/Nav.js @@ -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) => ( + +