Merge next into master, include both Gatsby.js and Next.js

[humphd]

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

I want to make it easier to run the Gatsby and Next frontends side-by-side. The current branch-based separation makes it really hard to switch back and forth with dependencies. To do that, I've merged the next branch into master, and created a temporary parallel front-end structure:

└──frontend
      └──next        
      └──gatsby

Our default front-end continues to be Gatsby, and all references to src/frontend have been updated to src/frontend/gatsby.

I've adjusted our scripts to work for both next and gatsby, and added temporary docs in src/frontend/README.md.

I've renamed the env variable PROXY_GATSBY To PROXY_FRONTEND, since it will work for both cases.

I've cleaned up the next.js deps and eslint config to be more accurate and up-to-date.

I've separated the front-end specific bits of .gitignore into each of the frontend dirs.

I think everything is working, but check my math please.

[humphd]

This is ready for review. I've streamlined the eslint stuff so we only have a single code base, but it works across node, JS, and TS. I had to fix a bunch of existing lint issues that were hiding in our code.

[c3ho]

Tested with npm run develop was able to run it with local backend. All expected front-end functionality was still working. Also ran npm run develop:next and it built successfully

[humphd]

For testing this, I'll up-level the docs that are buried in this PR:

---

Telescope Frontend Development

Introduction

Telescope is in the process of porting the front-end from GatsbyJS
to Next.js, see #1316.

To facilitate this conversion, we are hosting both front-ends in the src/frontend folder. For
the time being, the root npm scripts will default to run the GatsbyJS front-end. However, when
we finish the conversion, we'll switch that to Next.js and delete the GatsbyJS code.

NOTE: if you are only working on the front-end code, set PROXY_FRONTEND=1 in your .env to use
the development server (https://dev.telescope.cdot.systems) as your back-end.

Running GatsbyJS

From the root of the project, you can run a number of GatsbyJS specific npm scripts:

1. npm run develop to start the development server
2. npm run build to build the site in src/frontend/gatsby/public for production
3. npm run serve to serve the production site in src/frontend/gatsby/public for testing
4. npm run clean to delete generated build files and folders

Running Next.js

From the root of the project, you can run a number of GatsbyJS specific npm scripts:

1. npm run develop:next to start the development server
2. npm run build:next to build the site in src/frontend/next/public for production
3. npm run serve:next to serve the production site in src/frontend/next/.next for testing

[manekenpix]

In gatsby-config.js, line 7, it needs an extra ../:

path: path.join(__dirname, '../../../', '.env'),

[humphd]

@manekenpix great catch, thanks for reviewing this so closely. I'll correct and rebase soon to deal with these new changes.

[humphd]

Pushed a fix for the gatsby-config.js issue. I think I'll wait for approval to do a rebase at the end, since it's going to be a bit of work.

[chrispinkney]

NOTE: if you are only working on the front-end code, set PROXY_FRONTEND=1 in your .env to use
the development server (https://dev.telescope.cdot.systems) as your back-end.

Also, API_URL should be set to API_URL=https://dev.telescope.cdot.systems as I was getting no timeline until this was set. Might be an obvious thing that I just missed though, haha.

[chrispinkney]

Tested all the above commands using your remote, runs both Gatsby and Next start page; LGTM. (always wanted to say that)

[cindyorangis]

I've tested this using Docker on Windows and I'm able to run both Gatsby and Next frontends :D

[humphd]

This is pretty close to being ready to merge. When I do, it's going to affect all of these open PRs:

• Closes #1193: Feature: add synchronized author/post outline in desktop view #1368 @manekenpix
• Fixes issue-1371: Make the picture sticky in About page #1372 @lixiaoqity
• Don't scale images up beyond their natural size #1370 @phast184
• Showing BLANK with search terms return NO result #1376 @NathanPang001
• Closes Issue #77. Adds dark theme and modified dependent files. #1414 @abhaseen
• Fix Issue1432: Mouse hover on search textField makes border disappeared #1433 @PedroFonsecaDEV
• Implementing a Bottom Bar #1440 @jiyoungsin
• Port SearchPage from Gatsby to NextJS(TS) #1445 @c3ho
• Issue-1449: Fix Post header overlap (z-index) issue with hamburger menu. #1452 @tianlangwu

Those of you working on anything in src/frontend/* will have to rebase after this goes in, and your code will need to move to src/frontend/gatsby/*.

I'm giving you all a heads up today, in case you want to get your stuff merged soon, so the rebase is my problem.

@c3ho, @manekenpix can I get another r? on this.

[manekenpix]

@humphd Vercel failed, and there are still conflicts. Are we ok merging with the conflicts?

[humphd]

Vercel is just wanting me to approve the changes to the config (happens every time I push), and I'll fix merge conflicts once it's approved.

[humphd]

I've now merged this on master (see 6195af3) and it's quite possible I've broken things. We'll see how it does on https://dev.telescope.cdot.systems in a few mins, and adjust as needed.

I the mean time, I wanted to mention a few things to everyone that has open PRs touching the frontend (@manekenpix, @lixiaoqity, @phast184, @NathanPang001, @abhaseen, @PedroFonsecaDEV, @jiyoungsin, @c3ho, @tianlangwu):

1. you should update your master branch git checkout master and git pull upstream master to get this change.
2. you should run npm install again
3. you should rebase your branch on master git checkout your-branch and git rebase master. Fix any conflicts.
4. when you finish the rebase, confirm that you don't have new code in src/frontend/* and that all your changes are in src/frontend/gatsby/* (i.e., all frontend code has been moved to gatsby/).

If you have problems or need help, let us know in your PR.