add zero docs and example (#555)

* add zero docs and example

* added link to sidebar

* Update docs/getting-started/zero.md

Co-Authored-By: asadm <asad.lionpk@gmail.com>

docs/getting-started/index.md

@@ -19,7 +19,8 @@ the installation guides.
 [Create React App](/getting-started/create-react-app) \|
 [React Static](/getting-started/react-static) \|
 [Webpack](/getting-started/webpack) \|
-[Parcel](/getting-started/parcel)
+[Parcel](/getting-started/parcel) \|
+[Zero](/getting-started/zero)
 
 </Box>
 

docs/getting-started/zero.md

@@ -0,0 +1,29 @@
+# Zero
+
+[Zero](https://zeroserver.io) is a no-config web framework for React, MDX, Nodejs, and Vue. It has built in support for MDX. To get started, install Zero (globally or locally in your project).
+
+## Installation
+
+```shell
+npm install -g zero
+```
+
+## Writing MDX files
+
+Create a new directory for your project and add an `index.mdx` file  with the following markdown:
+
+```markdown
+# My first MDX Page
+
+some awesome content
+```
+
+Now, `cd` into your project directory and run `zero`.
+
+Zero has some additional features for MDX, you can [read them here](https://github.com/remoteinterview/zero/tree/master/docs/mdx).
+
+# Resources
+- [Example Project](https://github.com/mdx-js/mdx/tree/master/examples/zero)
+- [Zero GitHub](https://github.com/remoteinterview/zero/)
+- [Zero Website](https://zeroserver.io/)
+- [Zero MDX Docs](https://github.com/remoteinterview/zero/tree/master/docs/mdx)

examples/zero/_counter.jsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+
+module.exports = function Counter() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}

examples/zero/index.mdx

@@ -0,0 +1,8 @@
+import Counter from './_counter.jsx';
+
+# Hello, world!
+
+Zero supports MDX natively. 
+You can import React components in an `.mdx` file.
+
+<Counter />

examples/zero/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "zero-mdx",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "zero"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "zero": "latest"
+  }
+}

examples/zero/readme.md

@@ -0,0 +1,8 @@
+# Zero + MDX
+
+```shell
+npm install
+npm run dev
+```
+
+[See documentation](https://mdxjs.com/getting-started/zero)

packages/gatsby-theme-mdx/src/components/sidebar.mdx

@@ -6,6 +6,7 @@
   - [React Static](/getting-started/react-static)
   - [Webpack](/getting-started/webpack)
   - [Parcel](/getting-started/parcel)
+  - [Zero](/getting-started/zero)
 - [Migrating from v0 to v1](/migrating/v1)
 - [Guides](/guides)
   - [Syntax highlighting](/guides/syntax-highlighting)