WIP Website redesign

[jenweber]

Building on @chriskrycho's work to update our dependencies, we can now install the latest styleguide and get it rendering.

This PR is largely based on #645

To do before this can be merged:

• Finish balancing typography - especially the Methods section needs work
• Styles for mobile experience
• Fix anchor link styles (they are invisible until you hover...)
• Search bar - use the findings from restyling the Guides search bar (unlaunched). Do not need to do this from scratch.
• Consider using the sidebar used in the upcoming Guides restyle. Non-blocking.
• Pray to the fastboot gods
• Accessibility check & fixes
• Click test in staging
• Learning team review

Progress so far

Goals

My goals are to get this out the door as soon as possible without compromising end user experience, and to not conflict with the efforts to prember this app in #815 . It helps unblock progress in the overall API docs project, and I am ok with some style hacks. My aim is continuous delivery of refactors and enhancements following the initial deploy, and to utilize the current momentum of the API docs refresh project.

[chriskrycho]

🤩

[jenweber]

@MinThaMie I heard you were possibly interested in helping with this project! Here's some info about what this PR is and why it exists.

Over the past 48 hours, Chris K updated a ton of dependencies, which unblock installing v7 of the styleguide 🎉 You can see the proof in this branch.

The bulk of the changes in this PR are from a PR I did 3 years ago to try and use the beta redesign (v4-beta). I rebased it on the main branch, installed v7, updated some class names that have changed, and deleted even more CSS.

The app has a ton of CSS still in this revived branch, and it would be great to get to a place where we can delete more of it. Let's chat at the next learning team meeting. I would like to get your advice on the strategy, find out if you have any work in progress already, and see which parts you are interested in helping with, if any. In terms of advice, I am especially wondering about how to approach the search and sidebar.

Lastly, here's the deploy strategy I am envisioning:

1. At the learning team meeting Monday, we chat about deploying what has already been merged into the main branch. Those are the dependency updates with no visual changes
2. Meanwhile collaborators continue working on this branch with visuals, and identify the essentials for MVP
3. Once we have something that is good enough to ship, we ask for learning team review based on our MVP goals

The most immediate benefit to this work is that it makes it easier for other folks to contribute, which helps move forward the API docs modernization project. Right now it takes seconds to open dev tools in Chrome when looking at the tests b/c of the thousand deprecation warnings.

[MinThaMie]

I recently started on the same thing :) I did it a bit differently. I threw away all the CSS. One thing I ran into and discussed with @mansona was the way the code blocks are currently provided. They are created somewhere by dark magic :( So styling them the way we are currently doing code blocks is not possible.

I can push my branch too if that would help. I agree with all the dependency updates, that would be great!

[jenweber]

I would love to take a look at your branch! I am curious to dig into the code blocks question and get your take on how much effort is involved in the “delete all css” approach.

[MinThaMie]

You can check it out here #833. I don't think it's too much work, especially if we were to team up a session, because some of the nooks are weird. The code blocks on the other hand are a mess and we've to decide if those are part of the MVP

[mansona]

The new website redesign branch can be tracked on #868 👍