docs: Refined contributor docs and documentation site

CONTRIBUTING.md

@@ -4,6 +4,23 @@ It's great that you want to contribute to this library and make things better.
 
 Below you'll find a general outline of how to use TSDX, which handles the boilerplate around managing a react component lib.
 
+# Updating Documentation
+
+All documentation exists in the `./docs` subfolder and is powered by [docsify](https://docsify.js.org/#/quickstart). 
+
+Currently there is only one `README.md` file in the `docs` folder, but this can be expanded into more files if necessary (unlikely).
+
+To run the documentation site install docsify globally: 
+```sh
+npm i docsify-cli -g
+```
+
+Then you can run the following command and open the URL locally for the documentation site. 
+```sh
+docsify serve docs
+```
+
+
 # Developer User Guide
 
 Let’s get you oriented with what’s here and how to use it.
@@ -29,40 +46,38 @@ Then run either example playground or storybook:
 Run inside another terminal:
 
 ```
-yarn storybook
+npm run storybook
 ```
 
 This loads the stories from `./stories`.
 
-> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
-
 ### Example
 
 Then run the example inside another:
 
 ```
 cd example
-npm i # or yarn to install dependencies
-npm start # or yarn start
+npm i
+npm start
 ```
 
 The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, [we use Parcel's aliasing](https://github.com/palmerhq/tsdx/pull/88/files).
 
-To do a one-off build, use `npm run build` or `yarn build`.
+To do a one-off build, use `npm run build.
 
-To run tests, use `npm test` or `yarn test`.
+To run tests, use `npm test`.
 
 ## Configuration
 
-Code quality is [set up for you](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
+Static code checking is [set up ](https://github.com/palmerhq/tsdx/pull/45/files) with `prettier`, `eslint`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
 
 ### [Jest](https://jestjs.io/) Testing
 
-Jest tests are set up to run with `npm test` or `yarn test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
+Jest tests are set up to run with `npm test`. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
 
 ### Setup Files
 
-This is the folder structure we set up for you:
+This is the folder structure:
 
 ```
 /example

README.md

@@ -84,7 +84,7 @@ By default there is a 1px divider with a grabbable surface of 1rem width or heig
 
 There is also no limit to the number of divs you have as children.  The `SplitPane` will split them all accordingly.
 
-## But what about collapsing the panels, styling the resizer, or RTL support? :sob:
+## But what about *collapsing* the panels, *styling* the resizer, or *RTL* support? :sob:
 
 This library supports all of these things and more! 
 
@@ -96,16 +96,12 @@ Documentation can be found at https://collapse-pane.zurg.dev
 
 If you notice an issue then please make an issue or a PR!  All docs are generated from the `docs` folder in the master branch.
 
-
-
 # Contributing and PRs :sparkling_heart:
 
 If you would like to contribute please check out the [contributor guide](/CONTRIBUTING.md)
 
 All contributions are welcome! All issues and feature requests are welcome!
 
-
-
 # Credit and Attribution :pray:
 
 This project did not start off from scratch.  The foundation of the project was the excellently written [react-multi-split-pane](https://github.com/neoraider/react-multi-split-pane) library which is itself a typescript rewrite of the [react-split-pane](https://github.com/tomkp/react-split-pane) library.  

docs/README.md

@@ -2,17 +2,16 @@
 
 This is intended to be **the** simple, reliable, configurable, and elegant solution to having splittable, draggable and collapsible panes in your React application. 
 
-
-## [[click for storybook demo]](https://storybook.collapse-pane.zurg.dev/)
-
 # Getting Started 🚀
 
 Install react-collapse-pane:
 ```sh
-npm i --save-dev react-collapse-pane
-```
-```sh
-yarn add --dev react-collapse-pane
+npm i react-collapse-pane
+
+# or for yarn
+
+yarn add react-collapse-pane
+
 ```
 
 Once installed you can import the `SplitPane` component.

docs/_coverpage.md

@@ -11,6 +11,7 @@
 - Easy styling and configuration
 
 [GitHub](https://github.com/b-zurg/react-collapse-pane/)
+[Storybook](https://storybook.collapse-pane.zurg.dev/)
 [Get Started](/?id=react-collapse-pane)
 
 ![color](#2E2E2E)

docs/index.html

@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>react-collapse-pane</title>
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="description" content="Description">
-  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/dark.css">
   <link rel='shortcut icon' type='image/x-icon' href='/icon.svg' />
 </head>
+
 <body>
   <div id="app"></div>
   <script>
@@ -19,11 +22,12 @@
       autoHeader: true,
       themeColor: '#ff96d8',
       search: 'auto',
-      search: [ '/' ]
+      search: ['/']
     }
   </script>
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
 </body>
-</html>
+
+</html>