Official website of teamwaterloop
git clone https://github.com/teamwaterloop/waterloop-website.git --depth=1
(remove the --depth flag if you are a contributor and don't want the entire commit history)cd waterloop-website
npm install
npm start
http://pm2.keymetrics.io/docs/usage/deployment/
All the data is stored within routes/teamStructure.json
. The file contains a JSON array of the team. It has the list of members by team alongside the faculty and alumni advisors.
Images of team leads are stored in public/images
and can be updated in views/team.ejs
accordingly
All the data is stored within routes/flock.json
. The file contains a JSON array of the pods. A pod has few properties:
name
: The name of the pod, used for titles and suchthumbnail
: The image used to display on the flock pageurl
: The location of the pod page within /flock/
.desc
: A short description of the podbanner
: The parallax image src to display on the pod pagesections
: Objects of the sections on the pod page
title
: The header of the sectioncontent
: An array of text (paragraphs)parallax
: An optional image for a parallax slide above the sectionimg
: An optional array containing image srcsAll the data is stored within routes/downloads.json
. The file contains a JSON array of the downloads. A download has few properties:
name
: The name of the pod, used for titles and suchthumbnail
: The image used to display on the pagemobile
: The URL of the mobile image version of the downloaddesktop
: The URL of the full image version of the downloadroutes/siteRoutes.js
router.get('/', function(req, res, next) {
res.render('index', { title: '[TITLE]' });
});
/
is the url that you want to renderindex
is name of ejs file that you want to render[TITLE]
is the title of the page, generally in the form Waterloop – [page]
File Name | Purpose |
---|---|
style.css | Holds the CSS for the entire website |
A great tutorial here http://www.embeddedjs.com/getting_started.html
We have a folder /views
where we store all of our EJS files. The advantage of EJS is that we can include a predefined elements and reuse them that way. So for example, we have a index.ejs
file that has multiple includes inside it
<%- include('header', {active: "Home"}); %>
This line would include another EJS file header.ejs
, meaning that the contents of header will be inserted at that place in the index
file. This is the main feature of EJS.
We also have a folder /public
where we store all of our static content. So things like stylesheet, javascript, font files and images go here.
Element | Color |
---|---|
Titles | #262626 |
Sub-titles | #27282B |
Text (Including Navbar) | #808080 |
Downloads link - Navbar | #C1C1C1 |
Navbar-BG | #FFFFFF |
Main-BG | #FAFAFA |
Primary-Gold | #FFD550 |
Secondary-Gold | #FFC64F |
Fonts | |
---|---|
Main | Proxima Nova |
Secondary 1 | Montserrat |
Secondary 2 | Helvetica |
Light: #FCFCFC
overlay at 95% opacity.
Dark: #27282B
overlay at 75% opacity.
Button drop-shadows: x:0, Y:5, B:5
npm run lint
and fix all linting errors before committing.