Skip to content

Commit 6535b56

Browse files
sergiodxatimneutkens
authored andcommitted
Example Rebass (vercel#2490)
1 parent 6715da9 commit 6535b56

File tree

5 files changed

+122
-0
lines changed

5 files changed

+122
-0
lines changed

examples/with-rebass/.babelrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": [
3+
"next/babel"
4+
],
5+
"plugins": [
6+
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
7+
]
8+
}

examples/with-rebass/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-rebass)
2+
3+
# Example app with Rebass
4+
5+
![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png)
6+
7+
## How to use
8+
9+
Download the example [or clone the repo](https://github.com/zeit/next.js):
10+
11+
```bash
12+
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-rebass
13+
cd with-rebass
14+
```
15+
16+
Install it and run:
17+
18+
```bash
19+
npm install
20+
ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css static/react-md.light_blue-yellow.min.css
21+
npm run dev
22+
```
23+
24+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
25+
26+
```bash
27+
now
28+
```
29+
30+
## The idea behind the example
31+
32+
This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js.

examples/with-rebass/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"scripts": {
3+
"dev": "next",
4+
"build": "next build",
5+
"start": "next start"
6+
},
7+
"dependencies": {
8+
"babel-plugin-styled-components": "^1.1.7",
9+
"next": "^3.0.1-beta.8",
10+
"react": "^15.6.1",
11+
"react-dom": "^15.6.1",
12+
"rebass": "1.0.0-1",
13+
"styled-components": "^2.1.1"
14+
}
15+
}
+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Document, { Head, Main, NextScript } from 'next/document'
2+
import { ServerStyleSheet } from 'styled-components'
3+
4+
export default class MyDocument extends Document {
5+
render () {
6+
const sheet = new ServerStyleSheet()
7+
const main = sheet.collectStyles(<Main />)
8+
const styleTags = sheet.getStyleElement()
9+
10+
return (
11+
<html>
12+
<Head>
13+
<title>My page</title>
14+
{styleTags}
15+
</Head>
16+
<body>
17+
<div className='root'>
18+
{main}
19+
</div>
20+
<NextScript />
21+
</body>
22+
</html>
23+
)
24+
}
25+
}

examples/with-rebass/pages/index.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
Provider,
3+
Container,
4+
Heading,
5+
Blockquote,
6+
Toolbar,
7+
NavLink,
8+
Flex,
9+
Box
10+
} from 'rebass'
11+
12+
function HomePage () {
13+
return (
14+
<Provider>
15+
<Heading is='h1' children='Next.js + Rebass' mb={3} center />
16+
17+
<Container>
18+
<Toolbar bg='black'>
19+
<NavLink href='https://github.com/zeit/next.js/' target='_blank'>Next.js</NavLink>
20+
<NavLink ml='auto' href='http://jxnblk.com/rebass/' target='_blank'>
21+
REBASS
22+
</NavLink>
23+
</Toolbar>
24+
25+
<Flex justify='center'>
26+
<Box width={1 / 2}>
27+
<Blockquote center fontSize={3} py={4}>
28+
"Next.js is a minimalistic framework for server-rendered React applications."
29+
</Blockquote>
30+
</Box>
31+
<Box width={6 / 12}>
32+
<Blockquote center fontSize={3} py={4}>
33+
"Functional React UI component library, built with styled-components"
34+
</Blockquote>
35+
</Box>
36+
</Flex>
37+
</Container>
38+
</Provider>
39+
)
40+
}
41+
42+
export default HomePage

0 commit comments

Comments
 (0)