mirror of
https://github.com/c8r/x0.git
synced 2024-08-16 08:50:29 +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',
|
||||
'markdown',
|
||||
'react',
|
||||
'mdx',
|
||||
'MDX',
|
||||
'JSX',
|
||||
'custom-app',
|
||||
'routing',
|
||||
'components',
|
||||
@ -32,7 +33,6 @@ const navOrder = [
|
||||
]
|
||||
const pageNames = {
|
||||
index: 'Home',
|
||||
mdx: 'MDX',
|
||||
'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
|
||||
|
||||
|
||||
|
@ -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
|
||||
---
|
||||
title: MDX Example
|
||||
---
|
||||
import { Box } from 'rebass'
|
||||
|
||||
# Hello
|
||||
|
@ -98,7 +98,7 @@ export const getRoutes = async (components = initialComponents) => {
|
||||
|
||||
const RouterState = withRouter(({ render, ...props }) => {
|
||||
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 })
|
||||
})
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user