update the readme to be a little more friendly and understandable, wi…

…th a link to the demo site

README.md

@@ -1,59 +1,73 @@
 # vue-nav-wheel
 
-## Project setup
+A lightweight and customisable component using SVG that takes a basic [vue-router](https://www.npmjs.com/package/vue-router) config and renders it radially.
 
-```
-npm install
-```
+There is a [demo page](https://vue-nav-wheel-demo.netlify.com/#/) which also serves as documentation.
 
-### Compiles and hot-reloads for development
+## Getting started
 
 ```
-npm run serve
+npm install vue-nav-wheel
 ```
 
-### Compiles and minifies for production
+In the app entrypoint file (main.js)
 
 ```
-npm run build
+import NavWheel from "vue-nav-wheel";
+import("vue-nav-wheel/dist/nav-wheel.css");
+Vue.component("nav-wheel", NavWheel);
 ```
 
-### Lints and fixes files
+Use the component with 2 parameters, as size and a config
 
 ```
-npm run lint
+<nav-wheel :size="600" :config="navWheelConfig" />
 ```
 
-### Customize configuration
+### CSS Styling customisation
 
-See [Configuration Reference](https://cli.vuejs.org/config/).
+Take a look at `node_modules/vue-nav-wheel/dist/nav-wheel.css` for the available classes to style.
+A custom css file with some or all of those classes can be loaded to override that stylesheet. There are some examples in the demo site.
 
-###
+```
+import("./nav-wheel-overrides.css")
+```
 
-Todo:
+### Nav wheel styling/functional toggles
 
-1. Suggest some style configs (Vue style, high contrast, plain, colourful)
+Take a look at the parameters available in `node_modules/vue-nav-wheel/src/nav-wheel-config.js` for the configurable parameters.
 
-Broad goals:
+```
+{
+    padAngle: 0.04,
+    spaceBetweenParentChild: 10,
+    shrinkRouteScale: 5,
+    scale: 1,
+    cornerSharpness: 100,
+    startRadius: 100,
+    childAngleSpread: 0.04,
+    defaultTransition: "fade",
+    isPanOnSelectEnabled: true, // For touch, should the touched route be panned into focus.
+    isPanOnMouseMoveEnabled: true, // Pan according to the currently mouse position.
+    hierarchyLevelsDisplayLimit: 3, // The limit of levels of hierarchy to display at once.
+    hierarchyLevelFocus: 2 // The limit at which routes stop displaying the parent's hierarchy.
+  }
+```
 
-1. NPM packaged, vue pluggable with readme, examples and prebuilt styles using essentially the same as the vue-router config
-2. Full customisation of the visual styles
-3. Good customisation of the functional styles
+## Development guidelines
 
-Shows:
+Built using Vue CLI, so the normal commands will work for setting up your development environment
 
-1. Community engagement
-2. Style customisation
-3. Interactive SVG
+### Project setup for hot-reload of the demo page
 
-Stretch:
+```
+npm install
+npm run test
+npm run serve
+```
 
-1. Toggle between styles (nested squares, radial)
-2. Using voice navigation
-3. Refactor the recursion of the components, fair amount of duplication
-4. Allow configuration when registering the component, overriding with props.
-5. Start expanded children
-6. Allow buttons to be focusable/disable the panning
-7. Animate expand/shrink from the center
-8. Play animations on load, as a feature toggle
-9. Ripple out from mouse click instead of from center
+### Build the project for production (hosted on Netlify)
+
+```
+npm run build:demo
+```

package.json

@@ -1,8 +1,17 @@
 {
   "name": "vue-nav-wheel",
   "version": "0.1.0-alpha.0",
-  "private": false,
   "license": "MIT",
+  "description": "",
+  "author": {
+    "name": "Richard Webb",
+    "email": "rwebb2305@gmail.com",
+    "url": "https://www.linkedin.com/in/richard-webb-09516a115/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jaeger2305/vue-nav-wheel"
+  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --target lib --name nav-wheel ./src/entry.js",