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

Commit 03b8177

Browse files
Nikhil-VatsNikhil-Vats
committed
Improve demo pages
- Adds prompts to ask description and GitHub URL of component - Improves demo and visualization pages
1 parent 96ea5da commit 03b8177

File tree

4 files changed

+80
-15
lines changed

4 files changed

+80
-15
lines changed

‎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/examples/index.html

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,34 @@
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+
#icon {
30+
width: 50px;
31+
height: 50px;
32+
margin-right: 10px;
33+
}
34+
a {
35+
color: #007e3a;
36+
font-size: inherit;
37+
text-decoration: none;
38+
}
2139
</style>
2240
</head>
2341

2442
<body class="demo">
25-
26-
<h1><%= title %> demo</h1>
43+
<div id="nav">
44+
<a href="https://biojs.net" target="_blank" style="display: flex;align-items:center;"><img src="../img/favicon.png" id="icon">BioJS</a>
45+
<a href="../index.html"><%= title %></a>
46+
<a href="./index.html">Visualize <%= title %></a>
47+
</div>
48+
<h1><%= title %> Visualization</h1>
2749

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

‎generators/app/templates/index.html

Lines changed: 35 additions & 11 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,50 @@
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+
#icon {
29+
width: 50px;
30+
height: 50px;
31+
margin-right: 10px;
32+
}
33+
a {
34+
color: #007e3a;
35+
font-size: inherit;
36+
text-decoration: none;
37+
}
2038
</style>
2139
</head>
2240

2341
<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>
42+
<div id="nav">
43+
<a href="https://biojs.net" target="_blank" style="display: flex;align-items:center;"><img src="img/favicon.png" id="icon">BioJS</a>
44+
<a href="index.html"><%= title %></a>
45+
<a href="examples/index.html">Visualize <%= title %></a>
46+
</div>
47+
<hr /><hr />
48+
<h1><%= title %></h1>
49+
<p><%= description %></p>
50+
<p>See an example visualization of this component <a href="examples/index.html">here.</a></p>
51+
<p>You can add links to more demos here if needed.</p>
52+
<!-- Remove the next line if this component's code is not on GitHub -->
53+
<p>Check out the code on <a href="<%= githubURL%>" target="_blank">GitHub.</a></p>
54+
<hr /><hr />
3155
<h2>Learn more about BioJS</h2>
3256
<ul>
3357
<li>To learn more about creating BioJS components, visit
34-
<a href="http://training.biojs.net">the BioJS training pages</a></li>
58+
<a href="http://training.biojs.net" target="_blank">the BioJS training pages.</a></li>
3559
<li>View a
36-
<a href="https://github.com/yochannah/biojs-webcomponent-prototype">
60+
<a href="https://github.com/yochannah/biojs-webcomponent-prototype" target="_blank">
3761
demo biojs webcomponent example</a> you could emulate.</li>
3862
<li> To browse BioJS components, visit
39-
<a href="http://biojs.net">the BioJS Registry</a></li>.
63+
<a href="http://biojs.net" target="_blank">the BioJS Registry</a>.</li>
4064
</ul>
4165

4266

‎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)