add running docs for component users to the readme

yochannah · yochannah · commit 39df0e8391a2 · 2018-12-14T14:09:36.000+09:00
diff --git a/generators/app/templates/README.md b/generators/app/templates/README.md
@@ -2,9 +2,39 @@
 
 FIXME: fill out a description of your tool here! :)
 
+## Component user docs: adding this component to your webpage
+
+Hey! If you'd like to use this component on your webpage, please do the following:
+
+### In the `<head>`, add:
+```html
+<!-- the library for the webcomponent -->
+<script src="dist/bundle.js" type="module"></script>
+```
+
+This links to the relevant scripts to define the component and fetch data.
+
+### In the `<body>`
+
+Where you want your WebComponent to appear, add the following:
+
+```html
+<<%= toolNameComputer %>
+   geneId="BRCA1">
+ </<%= toolNameComputer %>>
+```
+
+Some notes on usage:
+
+- `geneId` value must must be an identifier for a gene. You can replace it
+with your favourite gene id instead!
+
+
 ## Licence
 <%= licence %>
 
+## Developer docs
+
 ### To set up locally for development
 
 1. Clone the repo
@@ -42,5 +72,6 @@ To serve your page at [http://localhost:3456](http://localhost:3456):
 ```bash
 npm run server
 ```
-
-To see a demo component implemented similarly to this component, visit 
+#### Example comonent
+To see a demo component implemented similarly to this component, visit
+[biojs-webcomponent-prototype](https://github.com/yochannah/biojs-webcomponent-prototype).
diff --git a/generators/app/templates/index.html b/generators/app/templates/index.html
@@ -26,12 +26,18 @@ <h1><%= title %> demo pages</h1>
 
   <a href="examples/index.html">Visit the example demo page.</a>
   <p> You can add links to more demos here if needed.</p>
-  <p>
-    To learn more about creating BioJS components, visit
-    <a href="http://training.biojs.net">the BioJS training pages</a>,
-    and to browse BioJS components, visit
-    <a href="http://biojs.net">the BioJS Registry</a>.
-  </p>
+  <h2></h2>
+  <p></p>
+  <h2>Learn more about BioJS</h2>
+  <ul>
+    <li>To learn more about creating BioJS components, visit
+    <a href="http://training.biojs.net">the BioJS training pages</a></li>
+    <li>View a
+      <a href="https://github.com/yochannah/biojs-webcomponent-prototype">
+        demo biojs webcomponent example</a> you could emulate.</li>
+    <li> To browse BioJS components, visit
+    <a href="http://biojs.net">the BioJS Registry</a></li>.
+  </ul>
 
 
 </body>
