feat!: new website frontend and app ui

[orvn]

Ships new NextJS website including:

• Marketing site
• App UI
• Docs

See commit list for details, since this is an initiative with a large collection of epics

Note: working on getting the build running correctly with Cloudflare pages

[olizilla]

Most of my comments so far are nitpicks that don't need to block this PR from landing if we are keen to get it live asap.

The only blocker currently is the .legacy directory. To cut over to the new site we should be confident that we have all the functionality from the old site ported over and the old site should be removed.

[orvn]

Most of my comments so far are nitpicks that don't need to block this PR from landing if we are keen to get it live asap.

The only blocker currently is the .legacy directory. To cut over to the new site we should be confident that we have all the functionality from the old site ported over and the old site should be removed.

Cool, removed that directory! It was just there for easy reference without jumping between commit hashes. The only thing that I do see missing comparing the current site and this site is the link to Filfox URLs for each Filecoin SP.

[olizilla]

@orvn do we track 404s in countly somewhere else? Looks like it's been removed from this 404 page.

[orvn]

No, this wasn't intentional—thanks for catching. We had some issues with the 404 at one point and this particular Countly event needs to be added back (we did a sweep of Countly throughout the site to ensure everything was still in there, but this particular one must have been missed).

[olizilla]

Notes

It looks lovely and the attention to detail is great. I like the pattern of splitting out the content as .json files, makes it easier to edit copy and see the words for the trees. tags.

Visually, it's a delight. I have a concern that logged in view of the app doesn't give enough space and focus to the users uploaded file listing, which i see as the main thing for this service. The file list feels tight / constrained and a little uncomfortable to use right now. We can iterate on this.

I have a non-blocking issue, and I feel ridiculous raising this, but I'm a little sad that the linting rules for the website are diverging further from those of the rest of the project. It doesn't feel like the JS in this project is trying to fit in with the prevailing style of the rest. This is a standard house. One to discuss over a virtual beverage after this lands.

Questions

• Where do the Zero Components come from?

TODO

at a minimum we still need to fix these snags or explain why they are needed

• revert change to packages/client/package-lock.json
• revert change to packages/client/tsconfig.json
• delete packages/website/.github/pull_request_template.md
• remove packages/website/.legacy

you will win more of my gratitude and affection for responding to or fixing other snags commented inline before merging.

[orvn]

Thanks for the review! Some of the fixes or enhancements are in PRs. Will merge them into this branch. Currently a cleanup of the readme files and legacy content in this PR as well.

[alanshaw]

Unfortunately I can't npm install on my M1 Mac:

npm ERR! code 1
npm ERR! path /Users/alan/Code/web3-storage/web3.storage/node_modules/optipng-bin
npm ERR! command failed
npm ERR! command sh -c node lib/install.js
npm ERR! node:internal/child_process:413
npm ERR!     throw errnoException(err, 'spawn');
npm ERR!     ^
npm ERR! 
npm ERR! Error: spawn Unknown system error -86
npm ERR!     at ChildProcess.spawn (node:internal/child_process:413:11)
npm ERR!     at spawn (node:child_process:700:9)
npm ERR!     at /Users/alan/Code/web3-storage/web3.storage/node_modules/bin-check/index.js:22:12
npm ERR!     at /Users/alan/Code/web3-storage/web3.storage/node_modules/executable/index.js:27:4
npm ERR!     at FSReqCallback.oncomplete (node:fs:199:5) {
npm ERR!   errno: -86,
npm ERR!   code: 'Unknown system error -86',
npm ERR!   syscall: 'spawn'
npm ERR! }

I'll look into this and maybe come back with more feedback once I get the site running locally.

In the mean time, there's a few things @olizilla has pointed out that need to be addressed before merging:

• Website: remove website/.github/pull_request_template.md
• Website: remove .legacy directory
• Website: revert the version number change in package.json
• Website: revert change to packages/client/package-lock.json
• Website: revert change to packages/client/tsconfig.json

Please create an issue (or multiple if you prefer) for the following snags and we’ll tackle them after the main PR lands:

• Docs: Algolia - make it run after deploy instead of on a cron
• Docs: Github workflows move to root and ensure are working
• Docs: Remove submodules
• Website: remove all references to yarn - this is an npm project
• Website/Docs: lint with standard for consistency with the other packages
• Website: some typesccript components - please convert to JS so we have a consistent language choice
• Website: Remove verbose commenting. It makes sense in the SCSS to group styles that apply to the same subject but everywhere else it seems to be describing very obvious sections of the code and does not add any value and we don’t do this anywhere else. e.g.
  • // ===================================================================== Imports
  • // ///////////////////////////////////////////////////////////////////// General
  • // -----------------------------------------------------------------------------
• Website: fix regression: 404’s are no longer tracked in countly
• Website: remove images with “-legacy” suffix

[alanshaw]

Please revert - release please will increment this, just ensure when merging the commit message contains a "!" i.e. feat!: new website frontend and app ui.

[orvn]

Ah, got it. Reverted and changed this PR title to feat!: format. So I assume this will be the squashed commit title and get incremented by release please as a major version?

[alanshaw]

yes exactly

[alanshaw]

Is this pinned to this version specifically for a reason?

[orvn]

At one point it was causing some build issues, but only for users running locally on Windows machines. Will try to unpin and have someone test again

[alanshaw]

Fix for M1 issue: #1120

Additional feedback:

Blocking:

• Docs: does not retain logged in state
• Website: the "about" link does not seem to scroll to the correct place on the page
• Website: maintenance message covers main nav:
  • 

Later:

• Website: fix regression in npm run dev - .env in root not used (need to add to packages/website). See here for solution
• Docs: header nav links are not relative, linking directly to https://web3.storage/...
• Website: Filecoin Storage Providers list in table needs to be truncated to 3 with "show more" link (see nft.storage)

[orvn]

Update

• Blocking cleanup and reverting above is done! (relevant tasks above are checked)
• For the remaining items and any discussion, I'll make a series of issues (I'll make sure to group them by type so it isn't too many)
  • This includes the ones described here
  • As well as anything else that hasn't been addressed in the code review comments above.

Additionally, the following recent enhancements were merged in (these were not critical for launch, just what we've been working on recently):

• Checkmark appears when an action is performed, clearly indicating that something changed on the table
• Fix to modal skew effect, which was being obscured by overflow
• Ellipsis on upload now blink, indicating progress, so the user doesn't think the app is stuck on large chunked uploads
• A toggle appears of the number of storage providers > 5
• Storage providers are linked to Filfox and have link styles
• Improvements to scrolling after pagination, or when loading a page with GET params, in a variety of cases
• Improvements for IE11 (there are still a lot of issues)
• Browser update banner for IE
• Fix for an issue where the marketing message bar would overlap content at the top of the page, when a long/multiline message was supplied
• Reduced an unintended layout-shift/blinking effect when the table was refreshed by adding a min height
• Optimized the token flow feedback so that it's more clear for users
• Restored the mailto: link in the usage bar on the account dashboard and removed the extra one in the footer

[alanshaw]

Ok so, the big issue I have is that the docs do not retain the logged in state. I realised this yesterday and listed it as a blocker.

It's the primary reason we moved from the subdomain so I'm disappointed it hasn't been considered.

I think we're going to have to launch with this as a known issue. It needs to be addressed with high priority ASAP though.

Many thanks for all the work, it looks incredible 🚀

[orvn]

Ok so, the big issue I have is that the docs do not retain the logged in state. I realised this yesterday and listed it as a blocker.

It's the primary reason we moved from the subdomain so I'm disappointed it hasn't been considered.

I think we're going to have to launch with this as a known issue. It needs to be addressed with high priority ASAP though.

Many thanks for all the work, it looks incredible 🚀

Thanks @alanshaw! Regarding the docs, there wasn't any particularly stable way to integrate them into the Next site in their current form (Docusaurus and the HTTP API in ReDoc).

After a chat with @yusefnapora, we proceeded with the reskin of all the styles, but didn't really spend time on all the visual details within it. The next (no pun intended) step is to use something like Nextra to bring the docs into the Next static app (will open a new issue for this).

Edit: issue added here #1138