mirror of
https://github.com/c8r/x0.git
synced 2024-10-27 07:29:15 +03:00
Add layout components for docs
This commit is contained in:
parent
a7256ff76d
commit
dc5ebecb45
39
docs/App.js
39
docs/App.js
@ -1,11 +1,13 @@
|
||||
import React from 'react'
|
||||
import connect from 'refunk'
|
||||
import Title from './Title'
|
||||
import cxs from 'cxs/component'
|
||||
import Router from '../lib/Router'
|
||||
import pkg from '../package.json'
|
||||
import Title from './Title'
|
||||
import Style from './Style'
|
||||
import Flex from './Flex'
|
||||
import Box from './Box'
|
||||
|
||||
const { Route, Link } = Router
|
||||
import Debug from './Debug'
|
||||
|
||||
const App = connect(props => (
|
||||
<div>
|
||||
@ -13,18 +15,39 @@ const App = connect(props => (
|
||||
<title>{props.title}</title>
|
||||
<meta name='description' content={props.description} />
|
||||
<Style css={props.css} />
|
||||
<pre>Compositor</pre>
|
||||
<Title>x0</Title>
|
||||
<div>{pkg.description}</div>
|
||||
<div>v{pkg.version}</div>
|
||||
<pre>video</pre>
|
||||
<pre>tweet</pre>
|
||||
<pre>github</pre>
|
||||
<pre>
|
||||
- Isolated development environment
|
||||
- Static site generator
|
||||
- Hot reloading
|
||||
- Works with virtually any React component
|
||||
- No convoluted APIs to learn
|
||||
- No boilerplate required
|
||||
- Routing with react-router
|
||||
- Works with CSS-in-JS libraries like styled-components
|
||||
- Support for async data fetching
|
||||
</pre>
|
||||
<pre>Get Started</pre>
|
||||
</div>
|
||||
))
|
||||
|
||||
App.getInitialProps = async ({ Component, html, pathname }) => {
|
||||
const fetch = require('isomorphic-fetch')
|
||||
const endpoint = 'https://microbeats.now.sh/tracks'
|
||||
const microbeats = await fetch(endpoint)
|
||||
const tracks = await microbeats.json()
|
||||
// const fetch = require('isomorphic-fetch')
|
||||
// const endpoint = 'https://microbeats.now.sh/tracks'
|
||||
// const microbeats = await fetch(endpoint)
|
||||
// const tracks = await microbeats.json()
|
||||
const css = cxs.css()
|
||||
|
||||
return { hello: 'hi', css, tracks }
|
||||
return {
|
||||
css,
|
||||
// tracks
|
||||
}
|
||||
}
|
||||
|
||||
export default App
|
||||
|
19
docs/Box.js
Normal file
19
docs/Box.js
Normal file
@ -0,0 +1,19 @@
|
||||
import styled from 'cxs/component'
|
||||
import {
|
||||
space,
|
||||
width,
|
||||
fontSize,
|
||||
color,
|
||||
propTypes
|
||||
} from 'styled-system'
|
||||
|
||||
const Box = styled('div')(space, width, fontSize, color)
|
||||
|
||||
Box.propTypes = {
|
||||
...propTypes.space,
|
||||
...propTypes.width,
|
||||
...propTypes.fontSize,
|
||||
...propTypes.color
|
||||
}
|
||||
|
||||
export default Box
|
20
docs/Flex.js
Normal file
20
docs/Flex.js
Normal file
@ -0,0 +1,20 @@
|
||||
import styled from 'cxs/component'
|
||||
import {
|
||||
alignItems,
|
||||
justifyContent,
|
||||
wrap,
|
||||
propTypes
|
||||
} from 'styled-system'
|
||||
import Box from './Box'
|
||||
|
||||
const Flex = styled(Box)({
|
||||
display: 'flex'
|
||||
}, alignItems, justifyContent, wrap)
|
||||
|
||||
Flex.propTypes = {
|
||||
...propTypes.alignItems,
|
||||
...propTypes.justifyContent,
|
||||
...propTypes.wrap
|
||||
}
|
||||
|
||||
export default Flex
|
@ -12,6 +12,7 @@ const base = `
|
||||
*{box-sizing:border-box}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
font-family: 'Roboto Mono', Menlo, monospace;
|
||||
line-height: 1.5;
|
||||
color: white;
|
||||
background-color: black;
|
||||
|
@ -1,7 +1,14 @@
|
||||
import cxs from 'cxs/component'
|
||||
import { space } from 'styled-system'
|
||||
|
||||
const Title = cxs('h1')({
|
||||
color: 'tomato'
|
||||
})
|
||||
display: 'inline-block',
|
||||
color: 'black',
|
||||
backgroundColor: 'cyan'
|
||||
}, space)
|
||||
|
||||
Title.defaultProps = {
|
||||
px: 2
|
||||
}
|
||||
|
||||
export default Title
|
||||
|
File diff suppressed because one or more lines are too long
@ -3,7 +3,8 @@ const webpack = require('webpack')
|
||||
|
||||
// dev webpack config
|
||||
module.exports = {
|
||||
devtool: 'eval',
|
||||
// devtool: 'eval',
|
||||
devtool: 'source-map',
|
||||
entry: [
|
||||
path.join(__dirname, './entry'),
|
||||
],
|
||||
@ -39,6 +40,6 @@ module.exports = {
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin()
|
||||
// new webpack.HotModuleReplacementPlugin()
|
||||
]
|
||||
}
|
||||
|
@ -34,14 +34,16 @@
|
||||
"read-pkg-up": "^2.0.0",
|
||||
"update-notifier": "^2.2.0",
|
||||
"webpack": "^3.5.6",
|
||||
"webpack-dev-server": "2.7.1"
|
||||
"webpack-dev-server": "^2.9.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@compositor/logo": "^1.2.2",
|
||||
"ava": "^0.22.0",
|
||||
"cxs": "^6.1.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"nyc": "^11.2.1",
|
||||
"refunk": "^2.0.0-1"
|
||||
"refunk": "^2.0.0-1",
|
||||
"styled-system": "^1.0.7"
|
||||
},
|
||||
"x0": {
|
||||
"title": "Compositor x0",
|
||||
|
Loading…
Reference in New Issue
Block a user