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

Commit 9120a80

Browse files
sarthak-sehgalsarthak-sehgal
authored
Merge branch 'master' into master
2 parents 842c81c + 9507662 commit 9120a80

File tree

2 files changed

+213
-4
lines changed

2 files changed

+213
-4
lines changed

‎README.md

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@
88
## Build Setup
99

1010
``` bash
11+
# clone GitHub repository
12+
git clone https://github.com/biojs/biojs-frontend
13+
14+
# change directory
15+
cd biojs-frontend
16+
1117
# install dependencies
1218
npm install
1319

@@ -30,4 +36,207 @@ npm run e2e
3036
npm test
3137
```
3238

39+
## Website Documentation
40+
41+
### About
42+
#### The about section is an informational page which provides insights about BioJS and its foundation.
43+
44+
---
45+
46+
### Component
47+
#### A dynamic page for each component.
48+
49+
The component page gets the data from backend through an API call and renders it to display all the information for a specific component. A watcher has been added to the component to render the details dynamically when the component changes.
50+
51+
##### API structure
52+
53+
###### Various methods have been implemented:
54+
1. fetchData() fetches the data from the database through an API call and stores it.
55+
2. computeLicense() returns "Not available" is a license is not present in the data and returns the license otherwise.
56+
3. isAuthor() shows the author under the component's name is an author is present in the data received otherwise it does not show the author.
57+
58+
```
59+
<p id="author" v-if="isAuthor()">..rendered if author is present..</p>
60+
<p>{{description}}</p>
61+
<div id="install">..renders the npm install command..</div>
62+
<div id="tags">..renders the tags..</div>
63+
<div id="social>..displays social stats (stars, watchers, contirbutors, forks)..</div>
64+
<div id="stats>..displays general stats (downloads, last modified, commits, version, created at, open issues)..</div>
65+
<div id="contributors></div>
66+
<div id="legal>..displays the license information if it exists..</div>
67+
```
68+
---
69+
70+
### Components
71+
#### The components page
72+
73+
The components page renders the top ten components (icon, name, author, description, tags, downloads, stars and last modified) from the data received by the API call. It also has a search bar to search amongst all the components and displays top 3 component for each category.
74+
75+
##### Searchbar
76+
77+
A fuzzy search has been implemented. You can find the details of the search component in its documentation.
78+
79+
```
80+
<div id="component" v-for="component in components">
81+
..loop through the ten components..
82+
<div class="image"
83+
:style="{backgroundImage: 'url(' + component.icon_url + ')' }">
84+
..display the icon..
85+
</div>
86+
<div id="componentInfo">
87+
..render all the other component information..
88+
</div>
89+
</div>
90+
```
91+
92+
---
93+
94+
### ComponentStat
95+
#### A component for displaying inidividual statistics like stars for a component under the "Social" and "Stats" category.
96+
97+
The ComponentStat component renders the stat for each property. It renders an image and the statistic corresponding to that property. It is used in the "Component" component and is used in the individual page of a component to show the stats.
98+
99+
```
100+
<div id="stat">
101+
<img :src="imageURL" :alt="propName" />
102+
<span>{{ propValue }} {{ propName }}</span>
103+
</div>
104+
```
105+
NAME |TYPE | DEFAULT | NOTES
106+
------------ | ------------- | ------------ | ----------------------------
107+
propName | string | "" | The name of the property. e.g.: stars, downloads, etc.
108+
imageURL | string | "" | URL of the image of the property.
109+
propValue | any | "" | Statistic of the property (a numerical in most cases).
110+
111+
---
112+
113+
### ComponentTable
114+
#### Component table for loading the top 3 components for various categories: Most downloaded, Top starred, and Most recent.
115+
This component is a dynamic table to load and render the top 3 components of the desired category. An API call is made through Axios (npm package) for the desired category once the component is mounted.
116+
117+
##### UI
118+
119+
```
120+
<div id="componentTable">
121+
<div id="table">
122+
...
123+
</div>
124+
</div>
125+
```
126+
127+
NAME | TYPE | DEFAULT | NOTES
128+
------------ | ------------- | ------------ | -------------------------------------------------
129+
title | string | "undefined" | Title defines the heading of the table which is the category desired.
130+
components | string | "undefined" | Components prop accepts the category required. For example, passing "most_recent" would render the three most recent components.
131+
132+
---
133+
134+
### Contributor
135+
#### Render each contributor in the list of contributors in the component page.
136+
The Contributor component renders an image and the name of the contributor.
137+
138+
```
139+
<div id="contributor">
140+
<img :src="imageURL" :alt="name" />
141+
<span>{{ name }}</span>
142+
</div>
143+
```
144+
145+
NAME | TYPE | DEFAULT | NOTES
146+
------------ | ------------- | ------------ | ----------------------------
147+
imageURL | string | "" | Circular icon of the contributor.
148+
name | string | "" | Name of the contributor.
149+
150+
---
151+
152+
### Guide
153+
#### The guide component is indeed the documentation for the BioJS website.
154+
BioJS uses PropDoc with a custom stylesheet for enhanced responsiveness.
155+
156+
```
157+
<div id="documentation">
158+
<prop-doc :component="component_name"></prop-doc>
159+
</div>
160+
```
161+
162+
---
163+
164+
### Heading
165+
#### The heading component is meant for all the headings in each section.
166+
Heading component is undoubtedly the most used component. It defines the heading for each section. It accepts two props: title and color.
167+
168+
```
169+
<h1 :style="{color: color}">
170+
<u>{{ title }}</u>
171+
</h1>
172+
```
173+
174+
NAME | TYPE | DEFAULT | NOTES
175+
------------ | ------------- | ------------ | -------------------------------------------------
176+
title | string | "undefined" | Title simply accepts the name of heading of the section, for instance, "Components" for the Components' page.
177+
color | string | "#007E3A" | As you can see, almost all the headings in the website are green colored. Except one! The color component has a default value, the green color, and accepts any other color in any format acceptable by SASS (RGBA, Hex, etc.)
178+
179+
---
180+
181+
### Home
182+
#### The home component is a master component which combines most of the other components and renders the landing page.
183+
It uses various major components and compiles them to produce the home page: nav-bar, heading, visualization, component-table, testimonial.
184+
185+
```
186+
<div id="cover">
187+
...
188+
</div>
189+
<div id="visualize">
190+
...
191+
</div>
192+
<div id="components">
193+
...
194+
</div>
195+
<div id="testimonials">
196+
...
197+
</div>
198+
<div id="about">
199+
...
200+
</div>
201+
```
202+
---
203+
204+
### NavBar
205+
#### A custom navigation bar for the website
206+
The navigation bar is made up with pure CSS. Vue-Router has been used for links to various pages.
207+
208+
```
209+
<div class="navBar">
210+
<div id="nav">
211+
<router-link to="/"><span>..</span></router-link>
212+
</div>
213+
</div>
214+
```
215+
216+
NAME | TYPE | DEFAULT | NOTES
217+
------------ | ------------- | ------------ | -------------------------------------------------
218+
isShadow | boolean | true | The navigation can either have a shadow at the bottom as observed in this page or it can be without a shadow as observed in the landing page.
219+
220+
---
221+
222+
### SearchComponent
223+
#### Search bar to query across all the components.
224+
The SearchComponent component queries across all the components' names and tags. A fuzzy search is implemented, more about which can be found here: https://github.com/jeancroy/fuzz-aldrin-plus
225+
226+
---
227+
228+
### Testimonial
229+
#### Testimonials for the BioJS landing page written by awesome bioinformaticians!
230+
The testimonial component consists of three static testimonials as seen in the home page. It implements core vue-bootstrap design, the b-card template.
231+
232+
```
233+
<b-card-groups>
234+
<b-card v-for="" :key="">
235+
...
236+
</b-card>
237+
</b-card-groups>
238+
```
239+
240+
---
241+
33242
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

‎src/components/NavBar.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
<div id="mobileNavHeading">
1212
<router-link to="/"><h1 id="bio">Bio</h1><h1 id="js">JS</h1></router-link>
1313
</div>
14-
<router-link class="navLink" active-class="active" to="/components"><span>Components</span></router-link>
15-
<router-link class="navLink" active-class="active" to="/guide"><span>Guide</span></router-link>
16-
<router-link class="navLink" active-class="active" to="/about"><span>About</span></router-link>
17-
<router-link class="navLink" active-class="active" to="/contact"><span>Contact Us</span></router-link>
14+
<router-link class="navLink" :class="active=='components'?'active':''" to="/components"><span>Components</span></router-link>
15+
<a class="navLink" :class="active=='guide'?'active':''" target="_blank" href="https://edu.biojs.net"><span>Guide</span></a>
16+
<router-link class="navLink" :class="active=='about'?'active':''" to="/about"><span>About</span></router-link>
17+
<router-link class="navLink" :class="active=='contact_us'?'active':''" to="/contact"><span>Contact Us</span></router-link>
1818
<div class="close">
1919
<img @click="closeMenu()" src="../../static/close.png" alt="Close menu">
2020
</div>

0 commit comments

Comments
 (0)