mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Add example using glamorous 💄 (#1620)
* Add example using glamorous 💄
* Fix linting errors
* Fix FOUC with server rendering and rehydration
* Camelcase CSS property names
* Fix title in README
* Fix typo in README
This commit is contained in:
Paul Molluzzo
Guillermo Rauch
parent
897ff6c010
commit
12a7610d9a
30
examples/with-glamorous/README.md
Normal file
30
examples/with-glamorous/README.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
# Example app with [glamorous](https://github.com/kentcdodds/glamorous)
|
||||
|
||||
## 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-glamorous
|
||||
cd with-glamorous
|
||||
```
|
||||
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
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 to use [glamorous](https://github.com/kentcdodds/glamorous) as the styling solution instead of [styled-jsx](https://github.com/zeit/styled-jsx). It also incorporates [glamor](https://github.com/threepointone/glamor) since `glamor` is a dependency for `glamorous`.
|
||||
|
||||
We are creating three `div` elements with custom styles being shared across the elements. The styles includes the use of pseedo-elements and CSS animations.
|
||||
18
examples/with-glamorous/package.json
Normal file
18
examples/with-glamorous/package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "with-glamorous",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"glamor": "^2.20.24",
|
||||
"glamorous": "^1.0.0",
|
||||
"next": "^2.0.1",
|
||||
"react": "^15.4.2",
|
||||
"react-dom": "^15.4.2"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
}
|
||||
33
examples/with-glamorous/pages/_document.js
Normal file
33
examples/with-glamorous/pages/_document.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
import { renderStatic } from 'glamor/server'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
static async getInitialProps ({ renderPage }) {
|
||||
const page = renderPage()
|
||||
const styles = renderStatic(() => page.html)
|
||||
return { ...page, ...styles }
|
||||
}
|
||||
|
||||
constructor (props) {
|
||||
super(props)
|
||||
const { __NEXT_DATA__, ids } = props
|
||||
if (ids) {
|
||||
__NEXT_DATA__.ids = this.props.ids
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<html>
|
||||
<Head>
|
||||
<title>With Glamorous</title>
|
||||
<style dangerouslySetInnerHTML={{ __html: this.props.css }} />
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
||||
66
examples/with-glamorous/pages/index.js
Normal file
66
examples/with-glamorous/pages/index.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React from 'react'
|
||||
import { rehydrate, css } from 'glamor'
|
||||
import glamorous from 'glamorous'
|
||||
|
||||
// Adds server generated styles to glamor cache.
|
||||
// Has to run before any `style()` calls
|
||||
// '__NEXT_DATA__.ids' is set in '_document.js'
|
||||
if (typeof window !== 'undefined') {
|
||||
rehydrate(window.__NEXT_DATA__.ids)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
css.global('html, body', { padding: '3rem 1rem', margin: 0, background: 'papayawhip', 'min-height': '100%', 'font-family': 'Helvetica, Arial, sans-serif', 'font-size': '24px' })
|
||||
|
||||
const basicStyles = {
|
||||
backgroundColor: 'white',
|
||||
color: 'cornflowerblue',
|
||||
border: '1px solid lightgreen',
|
||||
borderRight: 'none',
|
||||
borderBottom: 'none',
|
||||
boxShadow: '5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow',
|
||||
transition: 'all 0.1s linear',
|
||||
margin: `3rem 0`,
|
||||
padding: `1rem 0.5rem`
|
||||
}
|
||||
|
||||
const hoverStyles = {
|
||||
':hover': {
|
||||
color: 'white',
|
||||
backgroundColor: 'lightgray',
|
||||
borderColor: 'aqua',
|
||||
boxShadow: `-15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue`
|
||||
},
|
||||
'& code': {
|
||||
backgroundColor: 'linen'
|
||||
}
|
||||
}
|
||||
|
||||
const crazyStyles = props => {
|
||||
const crazyStyles = hoverStyles
|
||||
const bounce = css.keyframes({
|
||||
'0%': { transform: `scale(1.01)` },
|
||||
'100%': { transform: `scale(0.99)` }
|
||||
})
|
||||
crazyStyles.animation = `${bounce} 0.2s infinite ease-in-out alternate`
|
||||
return crazyStyles
|
||||
}
|
||||
|
||||
const Basic = glamorous.div(basicStyles)
|
||||
const Combined = glamorous.div(basicStyles, hoverStyles)
|
||||
const Animated = glamorous.div(basicStyles, hoverStyles, crazyStyles)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Basic>
|
||||
Cool Styles
|
||||
</Basic>
|
||||
<Combined>
|
||||
With <code>:hover</code>.
|
||||
</Combined>
|
||||
<Animated>
|
||||
Let's bounce.
|
||||
</Animated>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue