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