Initial work on GatsbyJS based frontend

[humphd]

What would you like to be added:

Bootstrap the new GatsbyJS based frontend. I want to use a monorepo for Telescope, which means we will have to deal with having multiple projects (web server, web frontend, etc) all in the same repo.

In this issue, I'd like to see us add a new GatsbyJS project inside our repo living at /src/app.

Why would you like this to be added:

In discussions with devs on the team, I've heard a lot of interest in using frontend tooling like React and Components (#514) to build our UI. I've also heard from multiple students who enjoyed working with GatsbyJS.

Since we're building a pretty simple UI, and it's heavily data driven and mostly static, GatsbyJS should be a nice fit, and let us also leverage React at the same time.

This issue can be about getting a basic "hello world" type GatsbyJS project bootstrapped into our repo, and connecting the various scripts so we can do development. From there, we can start making it look, feel, and work the way we want.

I'm going to assign this to @agarcia-caicedo to lead, and she can pull in other people/delegate as necessary.

NOTE: I suspect that we'll need to refactor our tree to better reflect that fact that we have more than 1 project in the repo. After this code goes in, we'll essentially have 3 different projects all living in the tree: 1) a feed parser pipeline; 2) an Express web server; 3) a GatsbyJS frontend web app. We'll probably want to move these out of src/ and into the top level to dirs like /feed-parser, /api, and /app. But that can happen later.

[humphd]

I filed #532 for the qraphql work.

[miggs125]

I would like to be part of front end

[humphd]

I notice that the GatsbyJS repo itself does exactly what I'm suggesting we do, namely, their website and docs are sub-dirs within the root of the project's monorepo. See their www/ directory as an example.

In our project root's package.json, we could augment the install script to also install deps in our Gatsby dir. Assuming it lives in src/app/, we'd do something like this in package.json at the top level:

"scripts": {
  "postinstall": "cd src/app && npm install",

}

Then when you run npm install from the root, it will also do it for the Gatsby app.

[miggs125]

I've made some initial work to get the ball rolling. We need some action on the front-end. It currently looks like so:

I have the code in the frontend branch of my copy of telescope. @humphd maybe we should put it in a development branch. I'll make a PR to master so everyone can see the code. Not intending to get this merged yet since it still needs a lot of work.

I've set up the infrastructure for styling, updated scripts and added some dependencies to package.json.

To run the frontend, make sure you have the gatsby cli installed globally:
npm install -g gatsby-cli

install dependencies:
npm i

then start the gatsby dev server:
cd src/frontend/ && gastby develop

This will start a server on port 8000.

I added sass to make the styling easier to maintain in the future. It is very similar to CSS with the added bonus that you can use variables, mixins and other cool functionality that makes writing CSS less of a pain in the a**.

To compile scss, run npm run compile-sass this will compile sass files on save and watch for any changes, re-compiling if any changes are made (and saved). There is no need to write to the css/style.css file directly.

[miggs125]

Here are some screenshots of what I have been working on:

The line beside "Telescope" on the header is supposed to be a hamburger button which toggles the sidebar. There are lots of bugs to fix and features we can add.