Skip to content
This repository has been archived by the owner on Feb 18, 2022. It is now read-only.

Add overview page from v0 #8

Merged
merged 9 commits into from Mar 30, 2020
Merged

Add overview page from v0 #8

merged 9 commits into from Mar 30, 2020

Conversation

szhu
Copy link
Contributor

@szhu szhu commented Mar 30, 2020

This adds the overview page over from v1!

@macfarlandian please read these important notes:

  • You can visit the page by running bin/parcel serve index.html and going to http://localhost:1234/overview
    • You can instead run yarn dev after Add form page and development scripts #3 is merged!
    • I just picked /overview, but I can change the URL if you have an opinion.
    • Once you're there, the page looks exactly the same as before!
      Screen Shot 2020-03-29 at 8 34 51 PM
  • Here's where your files have gone:
    • src/index.html -> src/page-overview/OverviewPage.tsx
    • src/style.css -> Also src/page-overview/OverviewPage.tsx! (Check the top of the file)
    • The tailwind built-in styles -> src/page-overview/assets/output.css_
    • src/*.js -> src/page-overview/assets/*.js_ (the nonstandard file extension tells Parcel to not preprocess the file)
    • src/icons/* -> src/page-overview/assets/icons/*
  • Normally, in development mode, the page will instantly update, without even reloading, as soon as you save a file. Because the current JS isn't aware of the React rendering lifecycle, you'll instead get a blank page. Just reload the page to see your updates for now.
  • To build the page for deployment, just run yarn build as usual. I tested it and I think it works perfectly.

Things that are hacky that we should eventually migrate off of:

  • [Really hacky] Since we use react-router, we should migrate the JS to (1) not use global variables update: this is done! and (2) to be aware of the React lifecycle. Note: Currently your v0 overview page JS is run on all pages, not just the overview page!
  • [Really hacky] We currently have two style systems (the styles imported from v0 by this PR and the styles added in Add global styles + base for form page #2) that might clash with each other. We should take a look at that. (Note: I am investigating this in a larger scale, having a conversation with Juan about what the design system of this website will be.)
  • [Not a big deal] We should migrate the JS to be proper React code.
  • [Not a big deal] There's a really big SVG included in the the HTML. Nothing's technically wrong, but we should move the SVG into another file and import it.

@szhu szhu requested a review from macfarlandian March 30, 2020 03:52
@macfarlandian
Copy link
Collaborator

@szhu given that output.css is a generated file, is it necessary to track it?

@szhu
Copy link
Contributor Author

szhu commented Mar 30, 2020

@macfarlandian Hmm… it looks like we can just use a pre-compiled version.

Thanks! This PR's diff is way smaller now!

Copy link
Collaborator

@macfarlandian macfarlandian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems mostly fine ... a few minor things broke but they are all things I am going to change anyway so I think this is good to merge! Thanks for taking care of this

@szhu
Copy link
Contributor Author

szhu commented Mar 30, 2020

@macfarlandian the js files are fixed! They are now complied through the Parcel pipeline rather than included verbatim. Saving JS files should no longer cause errors, but note that since they are still not aware of the React lifecycle, you'll need to reload the page to see most updates.

@szhu szhu merged commit 4a1a4a4 into master Mar 30, 2020
@szhu szhu deleted the szhu/overview-page branch March 30, 2020 05:51
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants