feat: updated docs

Author: macrozone

docs/README.md

@@ -6,7 +6,7 @@
 
 ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of `contenteditable`, you are in the right place.
 
-<img width="60%" alt="ReactPage Demo" src="images/quick-example.gif">
+<a href="..">Check out the demo here</a>
 
 ## Philosophy
 

docs/_sidebar.md

@@ -1,6 +1,6 @@
 <!-- docs/_sidebar.md -->
 
-- [Home](//)
+- [Home](/)
 - [Getting started](/quick-start.md)
 - [`<Editor />`](/editor.md)
 - [Rich text editing](/slate.md)
@@ -11,4 +11,3 @@
   - [SSR](/server-side-rendering.md)
   - [Bundle size](/bundle-size.md)
   - [IE11](/ie11.md)
-  

docs/examples

@@ -0,0 +1 @@
+../../examples/pages

docs/examples/pages

@@ -0,0 +1 @@
+../../examples/plugins

docs/examples/plugins

@@ -16,14 +16,13 @@ $ yarn add @react-page/plugins-slate
 $ npm i --save @react-page/plugins-slate
 ```
 
-
 ## Simple example
 
 To get off the ground as soon as possible, simply create a component like so:
 
 [simple.tsx](examples/pages/examples/simple.tsx ':include :type=code typescript')
 
-That's it, congratulations! 
+That's it, congratulations!
 
 [You should see something like this now (click for the demo)](//demo/simple)
 
@@ -35,10 +34,6 @@ Simply provide a `readOnly={true}` prop to your editor.
 
 We won't load any UI related code unless readOnly changes to `false`. In this case, the ui will be lazy loaded if your bundler supports that (e.g. webpack)
 
-
 [simple.tsx](examples/pages/examples/readonly.tsx ':include :type=code typescript')
 
 (see demo here)](//demo/readonly)
-
-
-

docs/quick-start.md

@@ -2,14 +2,12 @@ We provide an advanced rich text editor as a `CellPlugin` based on [slate](http:
 
 It has to be installed separatly:
 
-
 ```bash
 $ yarn add @react-page/plugins-slate
 # OR
 $ npm i --save @react-page/plugins-slate
 ```
 
-
 <p>
   <figure align="center">
     <img alt="Text editing plugin" src="./images/text-editing-plugin.gif"><br>
@@ -36,23 +34,21 @@ By default we provide the following plugins:
 
 [See the full list here](/packages/plugins/content/slate/plugins/index.tsx)
 
-
 ## Customization
 
-the slate plugin itself is highly customizable and has even itself its own plugin sytem! 
-Not only can you perfectly control how any paragraph, headline or other markup is rendereed, 
+the slate plugin itself is highly customizable and has even itself its own plugin sytem!
+Not only can you perfectly control how any paragraph, headline or other markup is rendereed,
 you can also add custom plugins with their own control.
 
-A common example is to create internal links, where the pages are stored in a database. Instead of asking for the full url, 
-the user will see a select field of all pages. When the user makes a selection, ReactPage will only store the id of that page. 
+A common example is to create internal links, where the pages are stored in a database. Instead of asking for the full url,
+the user will see a select field of all pages. When the user makes a selection, ReactPage will only store the id of that page.
 That way the links will still be valid when the page is moved or renamed.
 
 Another example: if you create a landing page for an ecomerce project, you can enable the webmasters
 that will edit this landing page to create links to products from your shop.
 
 To create a customized slate plugin, call it with a function that changes its default configuration:
 
-
 ```typescript
 import Editor from '@react-page/editor';
 import slate from '@react-page/plugins-slate';
@@ -124,7 +120,6 @@ const slatePlugin = slate(def => ({
 
 Notice: `yourCustomNamespace` and `myCustomPlugin` can be named arbitrary. Typescript users will find the existing type definition on def.plugins usefull to see which plugins do exist.
 
-
 ### Create your own custom plugin
 
 If you want to create your own slate plugin, we provide a bunch of factory functions to help you with that:
@@ -137,11 +132,8 @@ If you want to create your own slate plugin, we provide a bunch of factory funct
 
 ```typescript
 import { pluginFactories } from '@react-page/plugins-slate';
-
 ```
 
-
-
 ### Slate-Plugins with custom data
 
 Some plugins require custom data that the user has to provide. E.g. the `link` plugin needs a `href: string`. Easiest way is to define a jsonSchema for your slate plugin. This will auto-generate a form that can update your plugin.
@@ -300,7 +292,6 @@ const infobox: CellPlugin = {
  onChange={save} />
 ```
 
-
 ### Examples
 
 #### Example: Simple color plugin
@@ -309,4 +300,4 @@ const infobox: CellPlugin = {
 
 #### Example: Katex plugin
 
-[katexSlatePlugin.tsx](examples/plugins/katexSlatePlugin.tsx ':include :type=code typescript')
+[katexSlatePlugin.tsx](examples/plugins/katexSlatePlugin.tsx ':include :type=code typescript')

docs/slate.md

@@ -17,6 +17,11 @@ const Navigation: React.FC = () => {
     <div>
       <div className={classes.toolbar} />
       <Divider />
+
+      <ListItem component="a" href="/docs">
+        <ListItemText primary={'Docs'} />
+      </ListItem>
+
       <Link passHref href="/">
         <ListItem component="a">
           <ListItemText primary={'Home'} />

examples/components/Navigation.tsx

@@ -4,4 +4,12 @@ module.exports = {
       ? '/'
       : '/' + process.env.RELEASE_CHANNEL
     : undefined,
+  async rewrites() {
+    return [
+      {
+        source: '/docs',
+        destination: '/docs/index.html',
+      },
+    ];
+  },
 };

examples/next.config.js

@@ -0,0 +1 @@
+../../docs/

examples/public/docs

@@ -15,7 +15,7 @@
     "jsx": "preserve"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", "build", "public"],
   "references": [
     {
       "path": "../packages/editor"

examples/tsconfig.json

@@ -29,7 +29,6 @@
     "cross-env": "^5.2.0",
     "docsify": "^4.11.6",
     "docsify-cli": "^4.4.2",
-
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "1.7.1",
     "eslint": "^7.1.0",
@@ -59,7 +58,7 @@
     "unexpected": "^11.14.0"
   },
   "scripts": {
-    "start:docs": "docsify serve -p 3100 ./docs",
+    "docs": "docsify serve -p 3100 ./docs",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "bootstrap": "lerna bootstrap",
     "build": "cross-env NODE_ENV=production lerna run build --stream",