mco.life | Unofficial MCO Community Website

An UNOFFICIAL website built using Vue.js for the MCO community. Feel free to update things, ask me to update things, pick apart the code or anything in between! All feedback is good feedback :)

Requirements

1. Node.js (8.9.4) - This can be installed using $ nvm install
2. Yarn (1.13.0) - This can be installed using brew install yarn --without-node

Build Setup

# install dependencies
yarn install

# serve with hot reload (so cool) at localhost:8080
yarn dev

Pull Request Steps

1. Checkout a branch prefixed with either feature/your-branch, fix/your-brach, or hotfix/your-branch (depending on what type of PR it is)
2. Make your awesome changes
3. Make sure your changes are rebased on top of master (git pull origin master, git rebase master)
4. Test it out by running yarn dev again, just to make sure :)
5. Run a visual BackstopJS test by running yarn vtest (you must run yarn dev and yarn vtest-init before visual testing). Check that your changes look correct.
6. Submit your pull request!

Once it's merged into master, I'll:

1. Pull it in
2. Run yarn build on it to build our website into the /dist folder
3. Push it live!

NOTE: Check out server.js to see the simple way we're using express.js to host it live on Heroku from the /dist folder

Code Structure (and where things are)

1. All pages will be found in src/components/pages
   1. They will have a .pug file for the template and a .vue file for the .js and .scss.
2. The main calculations for the 'supply and demand' page are in src/components/data/cards
3. The daily data is in src/components/data/daily
4. FUD responses can be found and edited in src/components/data/fud-responses

Modifying Styles

One thing to note about how Vue.js works (my framework of choice) is that .scss styles will be found inside of the .vue component that they relate to. So, for example, if we want to create a new component for a nice big blue button you'd find the styles for that in the big-blue-button.vue file inside of a <style> tag.

If it's a global style that will be used on all (or multiple) pages you'll find it in /src/assets/styles/_common.

Lastly, we store the variables (currently only colors) in the /src/assets/styles/shared/variables file that's auto-included in all files, so common colors and such should go there!

Things to do

Ooooh where to begin.

1. Live updating of the reservation counter
2. Make it possible to link to each FUD Response
3. Finish allowing a specific set of annual reservations (vs continuous growth)
4. Move some of the repeated code into helpers, i hate that
5. Code Cleanup / Bug fixes / whatever else we come up with
6. Tests, obviously

Amazing contributors (and fellow believers)

@sashamorozov - Doing some awesome work with styling and UI testing!

Where to find me

Monaco Slack: @mfogg (Request access at [email protected])

Twitter: @mcolife

Github: @mikefogg

Medium: @mikefogg

Email: [email protected]