Chores: Reorganising source files for better maintainability in the future

[0xifis]

• Split Styles to separate files and import using scss
• Use yarn/npm to install 3rd Party libraries (https://github.com/ORCID/bibtexParseJs & https://github.com/scienceai/crossref)
• Use Webpacker to transform and transpile source files

These are just some of my suggestions. Someone else can get started on these before me. If not I will try my best to send in some pull requests in couple of weeks time.

[barney-walker]

Splitting the css is definately a good idea. What do you think would be the most logical way to split it up?

As for the external libraries, I modified the bibTex parser to fix some issues parsing files exported from Papers but for crossref npm is probably the way to go.

I'm not familiar with Webpacker, what does it do/

[0xifis]

With regards to CSS, there are some great methodologies out there. Personally, a fan of SMACSS https://smacss.com/book/type-base. I use some variants of it for most of my front-end web projects.

For the external JS libraries, it is almost always better to use a package manager.

Webpack (not webpacker, my bad) basically transforms source files to a desired format. For instance, if you use SCSS to write styles, you could instruct webpack to transform them to an output CSS. That way, you do not have duplicate content in the repository (ie. source file and its compiled version).

[barney-walker]

I've had a go at restructuring the css (see css-restructure branch) along with the javascript for the ui.

At the moment I'm using gulp to transpile the source files manually but I'll look into using Webpack to do it automatically over the next few days.

[barney-walker]

Started a new branch (webpack) that uses webpack for transpiling the javascript. Still working out the kinks. Will move on to include css once the javascript is all working nicely.