Merge pull request #35 from Nikhil-Vats/improve_demo_pages

Improve demo pages
biojs · Aug 18, 2019 · 7f04c68 · 7f04c68
2 parents 1eae221 + 34339a7
commit 7f04c68
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 20 deletions.
diff --git a/__tests__/app.js b/__tests__/app.js
@@ -35,7 +35,7 @@ describe("generator-biojs-webcomponents:app - Make a new Web Component", () => {
         "examples/index.html",
         '<test-component-tool geneId="BRCA1" class="BiojsTestComponent"></test-component-tool>'
       ],
-      ["examples/index.html", "<h1>Biojs test component demo</h1>"],
+      ["examples/index.html", "<h1>Biojs test component Visualization</h1>"],
       ["src/index.js", "define('test-component-tool', BiojsTestComponent);"],
       ["src/style.less", ".BiojsTestComponent"]
     ]);
@@ -54,7 +54,7 @@ describe("generator-biojs-webcomponents:app - Make a new Web Component", () => {
             "examples/index.html",
             '<biojs-webcomponent-tool-name-here geneId="BRCA1" class="BioJSComponent"></biojs-webcomponent-tool-name-here>'
           ],
-          ["examples/index.html", "<h1>BioJS component demo</h1>"],
+          ["examples/index.html", "<h1>BioJS component Visualization</h1>"],
           [
             "src/index.js",
             "define('biojs-webcomponent-tool-name-here', BioJSComponent);"

diff --git a/generators/app/index.js b/generators/app/index.js
@@ -237,6 +237,18 @@ module.exports = class extends Generator {
           'Thanks! Now, give me a human name for the project with only letters and NO special characters apart from the whitespace (space). e.g. "Genome Browser"',
         validate: validators.toolNameHuman,
         default: "BioJS component"
+      },
+      {
+        type: "input",
+        name: "description",
+        message:
+          "That's an amazing name. Now, describe your component in 2-3 lines."
+      },
+      {
+        type: "input",
+        name: "githubURL",
+        message:
+          "Almost done! Provide the GitHub URL of this component. (optional)"
       }
     ];
 
@@ -372,15 +384,19 @@ module.exports = class extends Generator {
       {
         title: this.props.toolNameHuman,
         toolNameComputer: this.props.toolNameComputer,
-        toolNameCamel: this.props.toolNameCamel
+        toolNameCamel: this.props.toolNameCamel,
+        githubURL: this.props.githubURL,
+        description: this.props.description
       }
     );
     this.fs.copyTpl(
       this.templatePath("index.html"),
       this.destinationPath("index.html"),
       {
         title: this.props.toolNameHuman,
-        toolNameComputer: this.props.toolNameComputer
+        toolNameComputer: this.props.toolNameComputer,
+        githubURL: this.props.githubURL,
+        description: this.props.description
       }
     );
     this.fs.copyTpl(

diff --git a/generators/app/templates/README.md b/generators/app/templates/README.md
@@ -28,7 +28,7 @@ Some notes on usage:
 
 - Download the bundle.js file from dist folder and link it to your index.html file.
 - You may use the style.css in dist folder file for styling the component.
-- Use the <<%= toolNameComputer %> element like any other HTML element wherever you want.
+- Use the <<%= toolNameComputer %>> element like any other HTML element wherever you want.
 - `attribute` must be a valid identifier with a valid `value`.
 
 

diff --git a/generators/app/templates/examples/index.html b/generators/app/templates/examples/index.html
@@ -18,12 +18,43 @@
     align-items: center;
     justify-content: center;
   }
+  #nav {
+    display: flex;
+    width: 100%;
+    height: 10vh;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 20px;
+  }
+  #biojs_link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  #nav > a {
+    width: 400px;
+    text-align: center;
+  }
+  #icon {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+  }
+  a {
+    color: #007e3a;
+    font-size: inherit;
+    text-decoration: none;
+  }
   </style>
 </head>
 
 <body class="demo">
-
-  <h1><%= title %> demo</h1>
+  <div id="nav">
+    <a href="https://biojs.net" target="_blank" id="biojs_link"><img src="../img/favicon.png" id="icon">BioJS</a>
+    <a href="../index.html"><%= title %></a>
+    <a href="./index.html">Visualize <%= title %></a>
+  </div>
+  <h1><%= title %> Visualization</h1>
 
   <!-- the geneId param below can be removed if needed - it's just an example of
        how to pass values to the component's JS behaviours. -->

diff --git a/generators/app/templates/index.html b/generators/app/templates/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <title><%= title %> demo index</title>
+  <title><%= title %></title>
   <link rel="icon" href="img/favicon.png">
   <link rel="stylesheet" type="text/css" href="dist/style.css">
   <style>
@@ -17,26 +17,63 @@
     align-items: center;
     justify-content: center;
   }
+  #nav {
+    display: flex;
+    width: 100%;
+    height: 10vh;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 20px;
+  }
+  #nav > a {
+    width: 400px;
+    text-align: center;
+  }
+  #biojs_link {
+    display: flex;
+    justify-content: center;
+    align-items: center !important;
+  }
+  #icon {
+    width: 50px;
+    height: 50px;
+    margin-right: 10px;
+  }
+  a {
+    color: #007e3a;
+    font-size: inherit;
+    text-decoration: none;
+  }
   </style>
 </head>
 
 <body class="demo">
-
-  <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>
-  <h2></h2>
-  <p></p>
+  <div id="nav">
+    <a href="https://biojs.net" target="_blank" id="biojs_link"><img src="img/favicon.png" id="icon">BioJS</a>
+    <a href="index.html"><%= title %></a>
+    <a href="examples/index.html">Visualize <%= title %></a>
+  </div>
+  <hr /><hr />
+  <h1><%= title %></h1>
+  <p><%= description %></p>
+  <p>See an example visualization of this component <a href="examples/index.html">here.</a></p>
+  <p>You can add links to more demos here if needed.</p>
+  <!-- Remove the next line if this component's code is not on GitHub -->
+  <p>Check out the code on <a href="<%= githubURL%>" target="_blank">GitHub.</a></p>
+  <hr /><hr />
   <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>
+    <a href="http://training.biojs.net" target="_blank">the BioJS training pages.</a></li>
+    <li>View other demo biojs web component examples -
+      <ul>
+        <li><a href="https://github.com/Nikhil-Vats/BioJS-Homology-tool" target="_blank">BioJS Homology Tool</a></li>
+        <li><a href="https://github.com/Nikhil-Vats/ComplexViewerWebComponent" target="_blank">Complex Viewer</a></li>
+        <li><a href="https://github.com/Nikhil-Vats/bio-pv-web-component" target="_blank">Protein Viewer</a></li>
+      </ul>
+    </li>
     <li> To browse BioJS components, visit
-    <a href="http://biojs.net">the BioJS Registry</a></li>.
+    <a href="http://biojs.net" target="_blank">the BioJS Registry</a>.</li>
   </ul>
 
 

diff --git a/generators/app/templates/src/style.less b/generators/app/templates/src/style.less
@@ -8,6 +8,9 @@
   //
   //here's some basic styling for the demo component. It's fine to remove it if needed.
   font-family: roboto, sans-serif;
+  width: 500px;
+  height: 500px;
+  margin: 20px auto;
   //
   //
   // any css written below this bracket will apply to everything on the page -