mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 13:45:52 +03:00
Edit docs site
This commit is contained in:
parent
64f925fcd0
commit
53f9813cb4
8
docs/_app.js
Normal file
8
docs/_app.js
Normal file
@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import { Provider } from 'rebass'
|
||||
import theme from './theme'
|
||||
|
||||
export default ({ render }) =>
|
||||
<Provider theme={theme}>
|
||||
{render()}
|
||||
</Provider>
|
33
docs/_scope.js
Normal file
33
docs/_scope.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react'
|
||||
import * as Rebass from 'rebass'
|
||||
import { heading } from '@compositor/md'
|
||||
|
||||
export default {
|
||||
...Rebass,
|
||||
h1: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h1'
|
||||
fontSize={6}
|
||||
mt={3}
|
||||
/>),
|
||||
h2: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h2'
|
||||
fontSize={5}
|
||||
mt={3}
|
||||
/>),
|
||||
h3: heading(props =>
|
||||
<Rebass.Heading
|
||||
{...props}
|
||||
is='h3'
|
||||
fontSize={4}
|
||||
mt={2}
|
||||
/>),
|
||||
pre: props =>
|
||||
<Rebass.Pre
|
||||
{...props}
|
||||
p={3}
|
||||
/>
|
||||
}
|
24
docs/docs.js
Normal file
24
docs/docs.js
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Container
|
||||
} from 'rebass'
|
||||
import styled from 'styled-components'
|
||||
import Readme from '../README.md'
|
||||
import scope from './_scope'
|
||||
|
||||
const Prose = styled.div([], {
|
||||
'& img': {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
}
|
||||
})
|
||||
|
||||
export default props =>
|
||||
<Container py={5}>
|
||||
<Prose>
|
||||
<Readme
|
||||
scope={scope}
|
||||
/>
|
||||
</Prose>
|
||||
</Container>
|
101
docs/index.js
101
docs/index.js
@ -1,33 +1,88 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
import {
|
||||
Container,
|
||||
Box,
|
||||
Flex,
|
||||
Caps,
|
||||
Heading,
|
||||
Text,
|
||||
Button,
|
||||
Pre,
|
||||
} from 'rebass'
|
||||
import { Logo } from '@compositor/logo'
|
||||
|
||||
const Video = styled.video([], {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
borderRadius: '16px',
|
||||
})
|
||||
|
||||
// <Link to='/'>Home</Link>
|
||||
// <Link to='/docs'>Documentation</Link>
|
||||
|
||||
export default class extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<h1>Hello x0</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to='/'>Home</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to='/hello'>Hello JSX</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to='/mdx'>MDX</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<video
|
||||
style={{
|
||||
maxWidth: '100%',
|
||||
height: 'auto'
|
||||
}}
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline>
|
||||
<source src='/demo.mp4' />
|
||||
</video>
|
||||
<Container py={5}>
|
||||
<Flex
|
||||
mb={4}
|
||||
alignItems='center'>
|
||||
<Logo size={32} />
|
||||
<Caps fontWeight='bold'>
|
||||
Compositor
|
||||
</Caps>
|
||||
</Flex>
|
||||
<Heading is='h1'
|
||||
mb={2}
|
||||
fontSize={[ 5, 6, 7 ]}>
|
||||
x0
|
||||
</Heading>
|
||||
<Text
|
||||
mb={4}
|
||||
fontWeight='bold'
|
||||
fontSize={4}>
|
||||
Zero-config React development environment & static site generator
|
||||
</Text>
|
||||
<Box mb={4}>
|
||||
<Video
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
playsInline
|
||||
poster='demo.gif'
|
||||
src='demo.mp4'
|
||||
/>
|
||||
</Box>
|
||||
<Pre>npm i -g @compositor/x0</Pre>
|
||||
<Flex py={4}>
|
||||
<Button
|
||||
is='a'
|
||||
px={4}
|
||||
py={3}
|
||||
bg='black'
|
||||
href='https://github.com/c8r/x0'>
|
||||
GitHub
|
||||
</Button>
|
||||
<Box mx={1} />
|
||||
<Button
|
||||
is={Link}
|
||||
px={4}
|
||||
py={3}
|
||||
bg='black'
|
||||
to='/docs'>
|
||||
Documentation
|
||||
</Button>
|
||||
</Flex>
|
||||
<Flex py={4} mt={5}>
|
||||
<Text fontSize={0}>
|
||||
© 2018 Compositor, Inc. All rights reserved
|
||||
</Text>
|
||||
</Flex>
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
8
docs/theme.js
Normal file
8
docs/theme.js
Normal file
@ -0,0 +1,8 @@
|
||||
import { theme } from 'rebass'
|
||||
|
||||
export default {
|
||||
...theme,
|
||||
radii: [
|
||||
0, 4, 8, 16
|
||||
]
|
||||
}
|
@ -3,7 +3,20 @@ module.exports = {
|
||||
rules: [
|
||||
{
|
||||
test: /\.md$/,
|
||||
use: 'raw-loader'
|
||||
use: [
|
||||
// 'raw-loader'
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'env',
|
||||
'stage-0',
|
||||
'react'
|
||||
]
|
||||
}
|
||||
},
|
||||
'@compositor/md-loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -55,10 +55,13 @@
|
||||
"webpack-serve": "^1.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@compositor/logo": "^1.3.5",
|
||||
"@compositor/md-loader": "^1.0.27",
|
||||
"ava": "^0.25.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"nano-style": "^1.0.0",
|
||||
"nyc": "^11.8.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"rebass": "^2.0.0-2",
|
||||
"refunk": "^3.0.1",
|
||||
"rimraf": "^2.6.2",
|
||||
@ -67,7 +70,7 @@
|
||||
},
|
||||
"x0": {
|
||||
"title": "Compositor x0",
|
||||
"basename": "/x0"
|
||||
"_basename": "/x0"
|
||||
},
|
||||
"ava": {
|
||||
"files": [
|
||||
|
Loading…
Reference in New Issue
Block a user