Skip to content
This repository was archived by the owner on Mar 30, 2021. It is now read-only.

Commit 7f04c68

Browse files
sarthak-sehgalsarthak-sehgal
authored
Merge pull request #35 from Nikhil-Vats/improve_demo_pages
Improve demo pages
2 parents 1eae221 + 34339a7 commit 7f04c68

File tree

6 files changed

+107
-20
lines changed

6 files changed

+107
-20
lines changed

‎__tests__/app.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ describe("generator-biojs-webcomponents:app - Make a new Web Component", () => {
3535
"examples/index.html",
3636
'<test-component-tool geneId="BRCA1" class="BiojsTestComponent"></test-component-tool>'
3737
],
38-
["examples/index.html", "<h1>Biojs test component demo</h1>"],
38+
["examples/index.html", "<h1>Biojs test component Visualization</h1>"],
3939
["src/index.js", "define('test-component-tool', BiojsTestComponent);"],
4040
["src/style.less", ".BiojsTestComponent"]
4141
]);
@@ -54,7 +54,7 @@ describe("generator-biojs-webcomponents:app - Make a new Web Component", () => {
5454
"examples/index.html",
5555
'<biojs-webcomponent-tool-name-here geneId="BRCA1" class="BioJSComponent"></biojs-webcomponent-tool-name-here>'
5656
],
57-
["examples/index.html", "<h1>BioJS component demo</h1>"],
57+
["examples/index.html", "<h1>BioJS component Visualization</h1>"],
5858
[
5959
"src/index.js",
6060
"define('biojs-webcomponent-tool-name-here', BioJSComponent);"

‎generators/app/index.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,18 @@ module.exports = class extends Generator {
237237
'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"',
238238
validate: validators.toolNameHuman,
239239
default: "BioJS component"
240+
},
241+
{
242+
type: "input",
243+
name: "description",
244+
message:
245+
"That's an amazing name. Now, describe your component in 2-3 lines."
246+
},
247+
{
248+
type: "input",
249+
name: "githubURL",
250+
message:
251+
"Almost done! Provide the GitHub URL of this component. (optional)"
240252
}
241253
];
242254

@@ -372,15 +384,19 @@ module.exports = class extends Generator {
372384
{
373385
title: this.props.toolNameHuman,
374386
toolNameComputer: this.props.toolNameComputer,
375-
toolNameCamel: this.props.toolNameCamel
387+
toolNameCamel: this.props.toolNameCamel,
388+
githubURL: this.props.githubURL,
389+
description: this.props.description
376390
}
377391
);
378392
this.fs.copyTpl(
379393
this.templatePath("index.html"),
380394
this.destinationPath("index.html"),
381395
{
382396
title: this.props.toolNameHuman,
383-
toolNameComputer: this.props.toolNameComputer
397+
toolNameComputer: this.props.toolNameComputer,
398+
githubURL: this.props.githubURL,
399+
description: this.props.description
384400
}
385401
);
386402
this.fs.copyTpl(

‎generators/app/templates/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Some notes on usage:
2828

2929
- Download the bundle.js file from dist folder and link it to your index.html file.
3030
- You may use the style.css in dist folder file for styling the component.
31-
- Use the <<%= toolNameComputer %> element like any other HTML element wherever you want.
31+
- Use the <<%= toolNameComputer %>> element like any other HTML element wherever you want.
3232
- `attribute` must be a valid identifier with a valid `value`.
3333

3434

‎generators/app/templates/examples/index.html

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,43 @@
1818
align-items: center;
1919
justify-content: center;
2020
}
21+
#nav {
22+
display: flex;
23+
width: 100%;
24+
height: 10vh;
25+
justify-content: space-around;
26+
align-items: center;
27+
font-size: 20px;
28+
}
29+
#biojs_link {
30+
display: flex;
31+
justify-content: center;
32+
align-items: center;
33+
}
34+
#nav > a {
35+
width: 400px;
36+
text-align: center;
37+
}
38+
#icon {
39+
width: 50px;
40+
height: 50px;
41+
margin-right: 10px;
42+
}
43+
a {
44+
color: #007e3a;
45+
font-size: inherit;
46+
text-decoration: none;
47+
}
2148
</style>
2249
</head>
2350

2451
<body class="demo">
25-
26-
<h1><%= title %> demo</h1>
52+
<div id="nav">
53+
<a href="https://biojs.net" target="_blank" id="biojs_link"><img src="../img/favicon.png" id="icon">BioJS</a>
54+
<a href="../index.html"><%= title %></a>
55+
<a href="./index.html">Visualize <%= title %></a>
56+
</div>
57+
<h1><%= title %> Visualization</h1>
2758

2859
<!-- the geneId param below can be removed if needed - it's just an example of
2960
how to pass values to the component's JS behaviours. -->

‎generators/app/templates/index.html

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title><%= title %> demo index</title>
6+
<title><%= title %></title>
77
<link rel="icon" href="img/favicon.png">
88
<link rel="stylesheet" type="text/css" href="dist/style.css">
99
<style>
@@ -17,26 +17,63 @@
1717
align-items: center;
1818
justify-content: center;
1919
}
20+
#nav {
21+
display: flex;
22+
width: 100%;
23+
height: 10vh;
24+
justify-content: space-around;
25+
align-items: center;
26+
font-size: 20px;
27+
}
28+
#nav > a {
29+
width: 400px;
30+
text-align: center;
31+
}
32+
#biojs_link {
33+
display: flex;
34+
justify-content: center;
35+
align-items: center !important;
36+
}
37+
#icon {
38+
width: 50px;
39+
height: 50px;
40+
margin-right: 10px;
41+
}
42+
a {
43+
color: #007e3a;
44+
font-size: inherit;
45+
text-decoration: none;
46+
}
2047
</style>
2148
</head>
2249

2350
<body class="demo">
24-
25-
<h1><%= title %> demo pages</h1>
26-
27-
<a href="examples/index.html">Visit the example demo page.</a>
28-
<p> You can add links to more demos here if needed.</p>
29-
<h2></h2>
30-
<p></p>
51+
<div id="nav">
52+
<a href="https://biojs.net" target="_blank" id="biojs_link"><img src="img/favicon.png" id="icon">BioJS</a>
53+
<a href="index.html"><%= title %></a>
54+
<a href="examples/index.html">Visualize <%= title %></a>
55+
</div>
56+
<hr /><hr />
57+
<h1><%= title %></h1>
58+
<p><%= description %></p>
59+
<p>See an example visualization of this component <a href="examples/index.html">here.</a></p>
60+
<p>You can add links to more demos here if needed.</p>
61+
<!-- Remove the next line if this component's code is not on GitHub -->
62+
<p>Check out the code on <a href="<%= githubURL%>" target="_blank">GitHub.</a></p>
63+
<hr /><hr />
3164
<h2>Learn more about BioJS</h2>
3265
<ul>
3366
<li>To learn more about creating BioJS components, visit
34-
<a href="http://training.biojs.net">the BioJS training pages</a></li>
35-
<li>View a
36-
<a href="https://github.com/yochannah/biojs-webcomponent-prototype">
37-
demo biojs webcomponent example</a> you could emulate.</li>
67+
<a href="http://training.biojs.net" target="_blank">the BioJS training pages.</a></li>
68+
<li>View other demo biojs web component examples -
69+
<ul>
70+
<li><a href="https://github.com/Nikhil-Vats/BioJS-Homology-tool" target="_blank">BioJS Homology Tool</a></li>
71+
<li><a href="https://github.com/Nikhil-Vats/ComplexViewerWebComponent" target="_blank">Complex Viewer</a></li>
72+
<li><a href="https://github.com/Nikhil-Vats/bio-pv-web-component" target="_blank">Protein Viewer</a></li>
73+
</ul>
74+
</li>
3875
<li> To browse BioJS components, visit
39-
<a href="http://biojs.net">the BioJS Registry</a></li>.
76+
<a href="http://biojs.net" target="_blank">the BioJS Registry</a>.</li>
4077
</ul>
4178

4279

‎generators/app/templates/src/style.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
//
99
//here's some basic styling for the demo component. It's fine to remove it if needed.
1010
font-family: roboto, sans-serif;
11+
width: 500px;
12+
height: 500px;
13+
margin: 20px auto;
1114
//
1215
//
1316
// any css written below this bracket will apply to everything on the page -

0 commit comments

Comments
 (0)