From 6535b5646b4325e1ea6d3432f75f4eb31cc12722 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Xalambr=C3=AD?= Date: Sat, 8 Jul 2017 07:05:46 -0500 Subject: [PATCH] Example Rebass (#2490) --- examples/with-rebass/.babelrc | 8 +++++ examples/with-rebass/README.md | 32 +++++++++++++++++++ examples/with-rebass/package.json | 15 +++++++++ examples/with-rebass/pages/_document.js | 25 +++++++++++++++ examples/with-rebass/pages/index.js | 42 +++++++++++++++++++++++++ 5 files changed, 122 insertions(+) create mode 100644 examples/with-rebass/.babelrc create mode 100644 examples/with-rebass/README.md create mode 100644 examples/with-rebass/package.json create mode 100644 examples/with-rebass/pages/_document.js create mode 100644 examples/with-rebass/pages/index.js diff --git a/examples/with-rebass/.babelrc b/examples/with-rebass/.babelrc new file mode 100644 index 00000000..43fff1d3 --- /dev/null +++ b/examples/with-rebass/.babelrc @@ -0,0 +1,8 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] + ] +} \ No newline at end of file diff --git a/examples/with-rebass/README.md b/examples/with-rebass/README.md new file mode 100644 index 00000000..7b7ab1c7 --- /dev/null +++ b/examples/with-rebass/README.md @@ -0,0 +1,32 @@ +[![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) + +# Example app with Rebass + +![Screenshot](https://cloud.githubusercontent.com/assets/304265/22472564/b2e04ff0-e7de-11e6-921e-d0c9833ac805.png) + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-rebass +cd with-rebass +``` + +Install it and run: + +```bash +npm install +ln -f -s ../node_modules/react-md/dist/react-md.light_blue-yellow.min.css static/react-md.light_blue-yellow.min.css +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how you use [Rebass](http://jxnblk.com/rebass/) functional UI library with Next.js. diff --git a/examples/with-rebass/package.json b/examples/with-rebass/package.json new file mode 100644 index 00000000..7ec6d4c7 --- /dev/null +++ b/examples/with-rebass/package.json @@ -0,0 +1,15 @@ +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "babel-plugin-styled-components": "^1.1.7", + "next": "^3.0.1-beta.8", + "react": "^15.6.1", + "react-dom": "^15.6.1", + "rebass": "1.0.0-1", + "styled-components": "^2.1.1" + } +} diff --git a/examples/with-rebass/pages/_document.js b/examples/with-rebass/pages/_document.js new file mode 100644 index 00000000..bf72ff12 --- /dev/null +++ b/examples/with-rebass/pages/_document.js @@ -0,0 +1,25 @@ +import Document, { Head, Main, NextScript } from 'next/document' +import { ServerStyleSheet } from 'styled-components' + +export default class MyDocument extends Document { + render () { + const sheet = new ServerStyleSheet() + const main = sheet.collectStyles(
) + const styleTags = sheet.getStyleElement() + + return ( + + + My page + {styleTags} + + +
+ {main} +
+ + + + ) + } +} diff --git a/examples/with-rebass/pages/index.js b/examples/with-rebass/pages/index.js new file mode 100644 index 00000000..a771d0e7 --- /dev/null +++ b/examples/with-rebass/pages/index.js @@ -0,0 +1,42 @@ +import { + Provider, + Container, + Heading, + Blockquote, + Toolbar, + NavLink, + Flex, + Box +} from 'rebass' + +function HomePage () { + return ( + + + + + + Next.js + + REBASS + + + + + +
+ "Next.js is a minimalistic framework for server-rendered React applications." +
+ + +
+ "Functional React UI component library, built with styled-components" +
+ + + + + ) +} + +export default HomePage