docs: add docz with custom links example

examples/with-custom-links/.gitignore

@@ -0,0 +1,2 @@
+.docz
+node_modules

examples/with-custom-links/README.md

@@ -0,0 +1,45 @@
+# Docz with Custom Links Example
+
+## Using `create-docz-app`
+
+```sh
+npx create-docz-app docz-app-with-custom-links --example with-custom-links
+# or
+yarn create docz-app docz-app-with-custom-links --example with-custom-links
+```
+
+## Download manually
+
+```sh
+curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/with-custom-links
+mv with-custom-links docz-with-custom-links-example
+cd docz-with-custom-links-example
+```
+
+## Notes
+
+A new component `a` was added and passed to the MDXProvider by shadowing `gatsby-theme-docz/components/index.js` and adding a custom implementation.
+
+## Setup
+
+```sh
+yarn # npm i
+```
+
+## Run
+
+```sh
+yarn dev # npm run dev
+```
+
+## Build
+
+```sh
+yarn build # npm run build
+```
+
+## Serve built app
+
+```sh
+yarn serve # npm run serve
+```

examples/with-custom-links/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "docz-example-basic",
+  "private": true,
+  "version": "2.0.0-rc.41",
+  "license": "MIT",
+  "files": [
+    "src/",
+    "doczrc.js",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "docz dev",
+    "build": "docz build",
+    "serve": "docz serve"
+  },
+  "dependencies": {
+    "docz": "latest",
+    "prop-types": "^15.7.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
+  }
+}

examples/with-custom-links/src/gatsby-theme-docz/components/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import * as headings from 'gatsby-theme-docz/src/components/Headings'
+import { Code } from 'gatsby-theme-docz/src/components/Code'
+import { Layout } from 'gatsby-theme-docz/src/components/Layout'
+import { Playground } from 'gatsby-theme-docz/src/components/Playground'
+import { Pre } from 'gatsby-theme-docz/src/components/Pre'
+import { Props } from 'gatsby-theme-docz/src/components/Props'
+
+const a = props =>
+  props.href.startsWith('http://') || props.href.startsWith('https://') ? (
+    <a {...props} target="_blank" rel="noreferrer nofollow">
+      {props.children}
+    </a>
+  ) : (
+    <a {...props}>{props.children}</a>
+  )
+
+export default {
+  ...headings,
+  code: Code,
+  a,
+  playground: Playground,
+  pre: Pre,
+  layout: Layout,
+  props: Props,
+}

examples/with-custom-links/src/index.mdx

@@ -0,0 +1,25 @@
+---
+name: Getting Started
+route: /
+---
+
+import { Playground } from 'docz'
+
+# Getting Started
+
+[Link that opens in new tab](https://duckduckgo.com)
+
+<Playground>
+  {() => {
+    const [toggle, setToggle] = React.useState(true)
+    return (
+      <button
+        onClick={() => {
+          setToggle(a => !a)
+        }}
+      >
+        {toggle ? 'Hello' : 'Good bye'}
+      </button>
+    )
+  }}
+</Playground>