│ └─install Files used for installing on the server └─public Global public files, like index.html and favicon └─scripts Dev scripts, pretty useless └─src └──codingworkshops Vue code for all the codingworkshops UI (pages, CodeAcademy-like instruction slides). └──components Global Vue components └──nico Vue code for the nico editor. This includes code for all the tabs (code editor and image editors), and also Python compilation, transformation, and running. └──styles Global styles main.js Main entry point rest.js Custom REST API request "framework". See below. endpoints.js Endpoint definitions for rest.js globals.js Debugging globals so you can write 'c' instead of 'console' store.js Global Vuex store. Vuex is really cool because it lets you have 'modules' which have local state but can be accessed from outside. This is how all state in this project is stored. This file combines the modules from codingworkshops and nico. generateSet.js Convenience function for automatically generating setters for Vuex. directives.js Global Vue directives. auth.js Authentication "framework". Adds a "$auth" property to Vue components and Vuex so that it's easier to login/logout.
Making requests to the server produces a lot of boilerplate-y code, so this is really just a mixin that removes some of the boilerplate that's needed for page components that need information from the server, like the list of workshops. A component can specify the endpoint it needs in a
rest key, and then the information is automatically put in
$rest and loading is tracked in
endpoints.js contains a mapping of endpoint keys that are used in components to actual endpoints.
Please use eslint. In general, use lodash/pipe operators everywhere you can (they significantly improve the quality of your code. I strongly recommend learning lodash.)
The CSS in this project follows a slightly abnormal convention: for all simple styles, like margins and font colors, use inline bootstrap classes. This leads to more maintainable html because you don't have to create CSS classes for every little style.
The same applies for flexbox. Use
d-flex when you just want elements side-by-side, or Bootstrap's
row when you need those elements to be responsive.
When you notice that you're writing >6 inline classes for a certain element, you should probably separate them into a scoped Vue component style tag. When you notice that there's a lot of repeating styles that have to do with the theme, you should separate those into the
styles folder and declare a global class. That goes
.styl stylus files that are still floating around are from before I started using bootstrap, and still exist because I was too lazy to rewrite the Nico styles. TODO this.