Example Rebass (#2490)

2024-01-19 02:48:18 +00:00 · 2017-07-08 07:05:46 -05:00 · 2017-07-08 07:05:46 -05:00 · 6535b5646b
parent 6715da98ac
commit 6535b5646b
5 changed files with 122 additions and 0 deletions
--- a/examples/with-rebass/.babelrc
+++ b/examples/with-rebass/.babelrc
@ -0,0 +1,8 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
+  ]
+}
--- a/examples/with-rebass/README.md
+++ 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.
--- a/examples/with-rebass/package.json
+++ 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"
+  }
+}
--- a/examples/with-rebass/pages/_document.js
+++ 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(<Main />)
+    const styleTags = sheet.getStyleElement()
+
+    return (
+      <html>
+        <Head>
+          <title>My page</title>
+          {styleTags}
+        </Head>
+        <body>
+          <div className='root'>
+            {main}
+          </div>
+          <NextScript />
+        </body>
+      </html>
+    )
+  }
+}
--- a/examples/with-rebass/pages/index.js
+++ 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 (
+    <Provider>
+      <Heading is='h1' children='Next.js + Rebass' mb={3} center />
+
+      <Container>
+        <Toolbar bg='black'>
+          <NavLink href='https://github.com/zeit/next.js/' target='_blank'>Next.js</NavLink>
+          <NavLink ml='auto' href='http://jxnblk.com/rebass/' target='_blank'>
+            REBASS
+          </NavLink>
+        </Toolbar>
+
+        <Flex justify='center'>
+          <Box width={1 / 2}>
+            <Blockquote center fontSize={3} py={4}>
+              "Next.js is a minimalistic framework for server-rendered React applications."
+            </Blockquote>
+          </Box>
+          <Box width={6 / 12}>
+            <Blockquote center fontSize={3} py={4}>
+              "Functional React UI component library, built with styled-components"
+            </Blockquote>
+          </Box>
+        </Flex>
+      </Container>
+    </Provider>
+  )
+}
+
+export default HomePage