feat: initial

pages/docs/getting-started/installation.mdx

@@ -0,0 +1,58 @@
+import Layout from 'lib/components/layout'
+import { Note, Link, Code, Spacer } from 'components'
+
+export const meta = {
+  title: 'installation',
+  description: 'description',
+  index: 10,
+}
+
+## Installation
+
+### Install package
+
+<Note>
+Ensure your have the latest version of <Link href="https://nodejs.org/en/download/">NodeJS</Link>,
+and also need a package manager of NodeJS: <Link href="https://www.npmjs.com/">NPM</Link> or <Link href="https://yarnpkg.com/">Yarn</Link>.
+</Note>
+
+1. Run script to download:
+
+<Code bash darkBash>npm i @zeit-ui/react</Code>
+
+2. Import `@zeit-ui/react` to your React project:
+
+```jsx
+import { CSSBaseline, ZEITUIProvider, useTheme } from '@zeit-ui/react'
+
+const Application = () => {
+  return (
+    <ZEITUIProvider>   // ---> Base provider
+      <CSSBaseline />  // ---> normalize styles
+      <Component />    // ---> Your App Component
+    </ZEITUIProvider>
+  )
+}
+```
+
+3. Use Components in any where:
+
+```jsx
+import { Button } from '@zeit-ui/react'
+
+const MyComponent = () =>  <Button>click me</Button>
+```
+
+<Spacer y={3} />
+
+### Import a component
+
+`@zeit-ui/react` supports import components when you actually need. e.g.:
+
+```js
+import { Button } from '@zeit-ui/react/components/button'
+
+const MyComponent = () =>  <Button>click me</Button>
+```
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/docs/getting-started/introduction.mdx

@@ -0,0 +1,35 @@
+import Layout from 'lib/components/layout'
+import { Code, Link, Text, Spacer } from 'components'
+
+export const meta = {
+  title: 'introduction',
+  description: 'description',
+  index: 5,
+}
+
+
+## Introduction
+
+### Why @zeit-ui/react
+
+`@zeit-ui/react` is a React implementation for [Styles](https://github.com/zeit-ui/zeit-style) originating from [ZEIT's Design](https://zeit.co/design).
+
+The design of the **ZEIT** is concise and aesthetic feeling, this is an important reason for popular of ZEIT.
+Now you can use them through the `@zeit-ui/react`.
+
+<Text><Link color href="https://github.com/zeit-ui/react">Lean more at Github</Link></Text>
+
+<Spacer y={3} />
+
+### Contact
+
+- [Report a issue](https://github.com/zeit-ui/react/issues/new)
+- Welcome share your feedback and ideas. We also love PRs.
+
+<Spacer y={3} />
+
+### License
+
+Licensed under the [MIT LICENSE](https://github.com/zeit-ui/react/blob/master/LICENSE).
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/docs/getting-started/server-render.mdx

@@ -0,0 +1,96 @@
+import Layout from 'lib/components/layout'
+import { Code, Link, Text, Spacer, Note } from 'components'
+
+export const meta = {
+  title: 'Server Render',
+  description: 'description',
+  index: 15,
+}
+
+
+## Server Render
+
+### ZEIT-UI React on the Server
+
+All Components of `@zeit-ui/react` are compatible with **Server Render**. In fact, the document you see now is rendered by the server.
+
+<Note>If you deploy by static files, you can skip this section.</Note>
+
+<Spacer y={3} />
+
+### Next.js
+
+In `next.js` framework, you need customization file `_document.js`,
+please refer to <Link href="https://nextjs.org/docs/advanced-features/custom-document" rel="nofollow">Next.js document here</Link>
+to create file `_document.js`.
+
+Then we add the following codes to the file:
+
+```js
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CSSBaseline } from '@zeit-ui/react'
+
+class MyDocument extends Document {
+  static async getInitialProps (ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = CSSBaseline.flush()
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {styles}
+        </>
+      )
+    }
+  }
+
+  render() { ... }
+}
+```
+
+Here's an examples that might help you: <Link href="https://github.com/unix/unix.bio/blob/template/pages/_document.jsx" rel="nofollow">_document.jsx</Link>.
+
+<Spacer y={3} />
+
+### Custom Server
+
+In the custom server, also get the style set from function `CSSBaseLine.flush`.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom/server'
+import { CSSBaseLine } from 'zeit-ui/react'
+import App from './app'
+
+export default (req, res) => {
+  const app = ReactDOM.renderToString(<App />)
+  const styles = CSSBaseLine.flush()
+  const html = ReactDOM.renderToStaticMarkup(<html>
+    <head>{ styles }</head>
+    <body>
+      <div id="root" dangerouslySetInnerHTML={{__html: app}} />
+    </body>
+  </html>)
+  res.end('<!doctype html>' + html)
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>