mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 13:45:52 +03:00
Edit docs
This commit is contained in:
parent
0bb58c2be1
commit
007ac302a9
19
docs/JSX.md
Normal file
19
docs/JSX.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
---
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using JSX
|
||||||
|
|
||||||
|
x0 supports Compositor JSX format, which allows writing files as pure JSX without any JavaScript syntax.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
---
|
||||||
|
title: JSX Example
|
||||||
|
---
|
||||||
|
import { Box, Heading } from 'rebass'
|
||||||
|
|
||||||
|
<Box p={3} bg='tomato'>
|
||||||
|
<Heading>
|
||||||
|
Hello
|
||||||
|
</Heading>
|
||||||
|
</Box>
|
||||||
|
```
|
@ -18,7 +18,8 @@ const navOrder = [
|
|||||||
'getting-started',
|
'getting-started',
|
||||||
'markdown',
|
'markdown',
|
||||||
'react',
|
'react',
|
||||||
'mdx',
|
'MDX',
|
||||||
|
'JSX',
|
||||||
'custom-app',
|
'custom-app',
|
||||||
'routing',
|
'routing',
|
||||||
'components',
|
'components',
|
||||||
@ -32,7 +33,6 @@ const navOrder = [
|
|||||||
]
|
]
|
||||||
const pageNames = {
|
const pageNames = {
|
||||||
index: 'Home',
|
index: 'Home',
|
||||||
mdx: 'MDX',
|
|
||||||
'cli-options': 'CLI Options'
|
'cli-options': 'CLI Options'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
17
docs/components/LiveEditor.md
Normal file
17
docs/components/LiveEditor.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
# LiveEditor
|
||||||
|
|
||||||
|
The LiveEditor component can be used in React components outside of markdown code fences.
|
||||||
|
When used within a [ScopeProvider](ScopeProvider) component, there's no need to pass a custom `scope` object.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
import { LiveEditor } from '@compositor/x0/components'
|
||||||
|
|
||||||
|
const code = `<Button>Hello</Button>`
|
||||||
|
|
||||||
|
export default props =>
|
||||||
|
<LiveEditor
|
||||||
|
code={code}
|
||||||
|
/>
|
||||||
|
```
|
17
docs/components/LivePreview.md
Normal file
17
docs/components/LivePreview.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
# LivePreview
|
||||||
|
|
||||||
|
The LivePreview component can be used in React components outside of markdown code fences.
|
||||||
|
When used within a [ScopeProvider](ScopeProvider) component, there's no need to pass a custom `scope` object.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
import { LivePreview } from '@compositor/x0/components'
|
||||||
|
|
||||||
|
const code = `<Button>Hello</Button>`
|
||||||
|
|
||||||
|
export default props =>
|
||||||
|
<LivePreview
|
||||||
|
code={code}
|
||||||
|
/>
|
||||||
|
```
|
134
docs/components/SidebarLayout.md
Normal file
134
docs/components/SidebarLayout.md
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
|
||||||
|
# SidebarLayout
|
||||||
|
|
||||||
|
The SidebarLayout component can be used to quickly create a documentation site with navigation.
|
||||||
|
This site uses the SidebarLayout component for navigation and pagination in the documentation section.
|
||||||
|
|
||||||
|
To use the component, import it in a [custom App](/custom-app).
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
import { SidebarLayout } from '@compositor/x0/components'
|
||||||
|
|
||||||
|
export default props =>
|
||||||
|
<SidebarLayout {...props} />
|
||||||
|
```
|
||||||
|
|
||||||
|
## Customizing navigation
|
||||||
|
|
||||||
|
The `props.routes` array can be altered to customize the order, names, and other aspects of the navigation.
|
||||||
|
|
||||||
|
### Sorting the routes
|
||||||
|
|
||||||
|
By default the `routes` array is in alphabetical order, with index pages occuring first.
|
||||||
|
To sort the array for display in navigation, pass a new `routes` prop to the SidebarLayout component.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
import { SidebarLayout } from '@compositor/x0/components'
|
||||||
|
import sortBy from 'lodash.sortby'
|
||||||
|
|
||||||
|
const navOrder = [
|
||||||
|
'index',
|
||||||
|
'getting-started',
|
||||||
|
'api'
|
||||||
|
]
|
||||||
|
|
||||||
|
export default props => {
|
||||||
|
const sortedRoutes = sortBy(props.routes, route => {
|
||||||
|
const i = navOrder.indexOf(route.name)
|
||||||
|
return i
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarLayout
|
||||||
|
{...props}
|
||||||
|
routes={sortedRoutes}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customizing Route Names
|
||||||
|
|
||||||
|
By default the layout will format the filename by capitalizing each word and removing hyphens.
|
||||||
|
To customize the name of the routes for navigation, pass a new `routes` prop to the SidebarLayout component.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
import { SidebarLayout } from '@compositor/x0/components'
|
||||||
|
import sortBy from 'lodash.sortby'
|
||||||
|
|
||||||
|
const routeNames = {
|
||||||
|
index: 'Home',
|
||||||
|
api: 'API'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default props => {
|
||||||
|
const renamedRoutes = props.routes.map(route => {
|
||||||
|
if (!routeNames[route.name]) return route
|
||||||
|
return {
|
||||||
|
...route,
|
||||||
|
name: routeNames[route.name]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SidebarLayout
|
||||||
|
{...props}
|
||||||
|
routes={renamedRoutes}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Full Width Pages
|
||||||
|
|
||||||
|
The SidebarLayout component will center the contents of the page by default.
|
||||||
|
To make a page span the full width of the main column, set the `fullWidth` option in default props or front-matter.
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
fullWidth: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# Full-width markdown page
|
||||||
|
```
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default class extends React.Component {
|
||||||
|
static defaultProps = {
|
||||||
|
fullWidth: true
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
return (
|
||||||
|
<h1>Full-width component</h1>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Page-Specific Layouts
|
||||||
|
|
||||||
|
Custom layouts can be specified as front-matter or default props, then handled in a custom App component to control the layout for specific pages.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
// example with custom layouts
|
||||||
|
import React from 'react'
|
||||||
|
import { SidebarLayout } from '@compositor/x0/components'
|
||||||
|
import HomeLayout from './_home-layout.js'
|
||||||
|
|
||||||
|
export default props => {
|
||||||
|
const { route } = this.props
|
||||||
|
const { layout } = route.props
|
||||||
|
|
||||||
|
const Layout = layout === 'home' ? HomeLayout : SidebarLayout
|
||||||
|
|
||||||
|
return <Layout {...this.props} />
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -97,3 +97,30 @@ export default class extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Props
|
||||||
|
|
||||||
|
Custom Apps receive the following props, which can expose greater control over the rendering.
|
||||||
|
|
||||||
|
- `children`: rendered content of the page
|
||||||
|
- `Component`: a component to pass props to the current route and render content
|
||||||
|
- `routes`: an array of route objects for the entire site – can be used for rendering navigation
|
||||||
|
- `route`: the current route object
|
||||||
|
- The [React Router][react-router] state is also passed to the App
|
||||||
|
|
||||||
|
### Route Object
|
||||||
|
|
||||||
|
Routes include the following properties:
|
||||||
|
|
||||||
|
- `key`: the filepath from webpack's `require.context`
|
||||||
|
- `name`: the basename of the file
|
||||||
|
- `path`: path used for routing
|
||||||
|
- `extname`: file extension
|
||||||
|
- `dirname`: file directory
|
||||||
|
- `exact`: (boolean) added to index pages for React Router
|
||||||
|
- `module`: the JS module for the file
|
||||||
|
- `Component`: the default export from the file
|
||||||
|
- `props`: default props or front-matter specified in the file
|
||||||
|
|
||||||
|
[react-router]: https://github.com/ReactTraining/react-router
|
||||||
|
|
||||||
|
@ -1,2 +1,4 @@
|
|||||||
|
|
||||||
# Exporting
|
# Exporting
|
||||||
|
|
||||||
|
|
||||||
|
@ -5,6 +5,9 @@ x0 also supports [MDX][mdx] format out of the box.
|
|||||||
MDX allows you to mix markdown syntax with JSX to render React components.
|
MDX allows you to mix markdown syntax with JSX to render React components.
|
||||||
|
|
||||||
```mdx
|
```mdx
|
||||||
|
---
|
||||||
|
title: MDX Example
|
||||||
|
---
|
||||||
import { Box } from 'rebass'
|
import { Box } from 'rebass'
|
||||||
|
|
||||||
# Hello
|
# Hello
|
||||||
|
@ -98,7 +98,7 @@ export const getRoutes = async (components = initialComponents) => {
|
|||||||
|
|
||||||
const RouterState = withRouter(({ render, ...props }) => {
|
const RouterState = withRouter(({ render, ...props }) => {
|
||||||
const { pathname } = props.location
|
const { pathname } = props.location
|
||||||
const route = props.routes.find(r => r.path === pathname || r.href === pathname)
|
const route = props.routes.find(r => r.path === pathname || r.href === pathname) || { props: {} }
|
||||||
return render({ ...props, route })
|
return render({ ...props, route })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user