feat(redesign): synchronize new download page to upstream

[darkweak]

[francislavoie]

I think we should use a different button style for this one, it doesn't stand out very well here. That button style is used on the front page because it's placed on top of a dark background, but here placing it on a white background doesn't look good. Maybe using the rainbow-ish button style would look better maybe, I dunno.

I think the download button should probably be right-aligned instead of floating in the middle. Along with that, I think we could add a (?) button which displays a help dialog with a bit more info about what to do after downloading (like "on Windows you should run this from your terminal, double-clicking does nothing" and "read here in the docs for how to swap in the new binary" and "here's how you write a Dockerfile" and "this is what xcaddy is")

Also dark mode should be considered. For the home page we kinda ignored it because it's designed to alternate between dark and light, but for a functional page I think it should work.

I don't like how this part looks; the | looks out of place, it's also too close to the link below, I think. Maybe removing that border + padding might look better (I'm not sure it adds anything useful).

The download number is misaligned with the icons. This could use some adjusting.

The Add/Remove button doesn't look significantly different from eachother, so if you enable a module it's hard to find it again visually because it doesn't stand out very much when scrolling quickly through the long list. For example you added a module, go back to the top, notice "oh well maybe I don't need that one" and trying to find it again can be tricky. (Yes the user could Ctrl+F or whatever but that's besides the point)

In the current page, the module IDs are links to the JSON docs, which is a nice and quick way to get documentation about the module. Here, it's just text (and not <code>) so it doesn't look right.

Also, I think it's not a good idea that each one is limited to X number of lines, many packages have a lot more modules than just the one and it that hides that.

Overall this is a regression in terms of the amount of information presented.

[mholt]

I think it's still progrsss, not a regression. Let me look at it more this week and we'll take it somewhere. Good feedback though.

[francislavoie]

I think it's still progrsss, not a regression.

It is displaying less information than before, therefore it's a regression.

I'm not saying I'm rejecting the change, that's not what regression means.

Of course it's a step forwards overall, I'm just saying I think we need to spend more time on the design of information display.

[mholt]

Ok so I like where this is going, but a couple of requests. Can we improve the information density by using a table or list format? Our current download page has cards in a single-column layout, but I actually quite like it -- it's easy to scan and find things. But I think it could use improvements:

• Along one side, show the list of selected packages
• Have a filter by category (module type/namespace; e.g. "HTTP handlers", "DNS providers", etc.)
• (And obviously, keep the freeform filter input like you did already.)

And maybe we need to implement some simple client-side pagination? Showing 100+ modules on a page might be overwhelming, especially with no filters. Either that, or maybe we require the user to choose a category before listing modules. Or show the top 10-20 by default and then paginate...

What do you think?

[francislavoie]

I'm not a fan of paginating honestly, it makes it harder to navigate and just quickly scan (especially on mobile). Paginating is more important if it's necessary for performance reasons (like when you get to tens of thousands of entries and HTML get sluggish) but we don't have that problem yet.