Cleanup, docs and added GH buttons for fun

etiennemarais · Jan 8, 2018 · 78a2732 · 78a2732
1 parent f9aa4f2
commit 78a2732
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 3 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,5 +18,7 @@
     </noscript>
     <!-- Scripts -->
     <script src="js/index.js"></script>
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>
diff --git a/demo/js/App.vue b/demo/js/App.vue
@@ -27,8 +27,12 @@
                         </div>
                         <div class="column is-1">&nbsp;</div>
                     </div>
+                    <div class="columns"><div class="column is-full">&nbsp;</div></div>
                     <div class="columns">
-                        <div class="column is-full">&nbsp;</div>
+                        <div class="column is-full has-text-centered">
+                            <a class="github-button" href="https://github.com/etiennemarais/vue-monograms/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork etiennemarais/vue-monograms on GitHub">Fork</a>
+                            <a class="github-button" href="https://github.com/etiennemarais/vue-monograms" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star etiennemarais/vue-monograms on GitHub">Star</a>
+                        </div>
                     </div>
                     <div class="columns">
                         <div class="column is-full">

diff --git a/demo/js/index.js b/demo/js/index.js
@@ -7,7 +7,6 @@ if (process.env.NODE_ENV === 'development') {
  * Application bootstrap
  */
 import App from './App';
-// import Monogram from '../../src/js';
 import Monogram from '../..';
 Vue.component('monogram', Monogram);
 

diff --git a/docs/index.html b/docs/index.html
@@ -18,5 +18,7 @@
     </noscript>
     <!-- Scripts -->
     <script src="js/index.js"></script>
+    <!-- Place this tag in your head or just before your close body tag. -->
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>
diff --git a/docs/js/index.js b/docs/js/index.js
diff --git a/readme.md b/readme.md
@@ -1,3 +1,52 @@
 # Vue Monograms
 
 Vue Component to generate a SVG monogram shape with letters in that resembles your first/last name.
+
+### Supports
+
+- [x] Hexagons (Plain)
+- [ ] Hexagons (With internal patterns)
+- [ ] Rectangles (Plain or with internal patterns)
+- [ ] Circles (Plain or with internal patterns)
+- [ ] Octagons (Plain or with internal patterns)
+
+## Installation
+
+You can include this plugin into your application by installing this package via `yarn`
+
+```sh
+yarn add vue-monograms
+```
+
+## Usage
+
+Register the component in your `App.vue`.
+
+```vue
+import Monogram from 'vue-monograms';
+Vue.component('monogram', Monogram);
+```
+
+You will be able to use this component throughout your application.
+
+```
+<template>
+...
+<monogram width="80" letters="XB" :primary-color="'#00a8e8'" />
+...
+</template>
+```
+
+# Properties
+
+## `width`
+
+The width attribute is required to calculate the sides and points coordinates of the hexagon, calculated in pixels as a number value.
+
+## `letters`
+
+The letters provide the reference to a name/surname, but can be any string.
+
+## `primary-color` 
+
+Primary background color fill for the shape. Identified as a string hex color value ex: `'#00a8e8'`