Website redesign, branding, and long term structure

[thescientist13]

Discussed in #503

^{Originally posted by thescientist13 April 3, 2021}
As we plan for the next set of features to get Greenwood to a 1.0 release it would be to start discussing some related issues around structure, navigation, discoverability, and design.

Some previous related issues on this topic were

• website layout, organization, and navigation #325
• improve the responsiveness and user experience for mobile sidenav / shelf #112
• articulate Greenwood's vision / value through the home page #268

Some things we would like to consider are:

1. Tell a better story on the home page, with code snippets of newer features like SSR / hybrid rendering, API routes, Adapters, etc (from zero to hero as it were). Including a showcase here would be nice
2. Re-org of docs - too many clicks to get around, sections like Frontmatter and Markdown could probably be consolidated
3. Rebrand / theme the whole website (new logo at least)
   • we got a new logo - Website/new greenwood logo #1094
4. Start tracking deprecations providing more idiomatic choices / duplication of overlapping concepts
5. I think its time to decouple the website from the monorepo. This would also let us re-evaluate our release branching / merging strategy, since commits wouldn't be tied to automatic documentation deployment.

Details

These are the things we should do as part of the actual cutover

1. Location redirects for new website
   • content/issue 33 guides pages www.greenwoodjs.dev#94
2. Refresh README.md
3. Refresh contributing.md
   • How to contribute? #594
   • CONTRIBUTING.md corrections #1168
4. Review any open Greenwood issues / discussions and see if they should be updated / closed / etc
   • E2E Testing the Greenwood website (with GitHub Actions) #560
   • Examples and Starter Kits #523 (should these belong to greenwood or the website?)
   • [RFC] Design Systems + Theming #800

---

These are the things to track after the cutover

1. Workspace changes
   • delete www from workspace
   • remove odd rollup bundling work around
     • remove local development symlink workaround from rollup.config.js #623
     • https://github.com/ProjectEvergreen/greenwood/blob/v0.30.0-alpha.1/packages/cli/src/config/rollup.config.js#L77
   • revisit linting / config files - Linting and Formatting www.greenwoodjs.dev#24
   • update issue templates
   • update actions (remove master / release actions)
2. consider introducing conventional commits
3. Adopt npm (workspaces) over Yarn
4. Upgrade / refine usage of Lerna (as per its its recent versions)

[thescientist13]

Should probably consider E2E testing (finally) when considering going out with our "final" docs. - #560

[thescientist13]

After reviewing the initial design for the #1094 , some good discussions around rethinking parts of the website came up

1. Consider making more space on the home page by moving the new Greenwood logo banner up into the corner
2. We should brainstorm what elements we want on the home page and what kind of users we want to make sure to connect with
   • those just looking to see what a repo looks like
   • those wanting to jump right to stackblitz (see the above) or some sort of quick(er) getting started
3. As they say in movies, show don't tell. Perhaps a snazzy code snippet of some web standards focused code, like custom elements as pages?
4. We could / should consider updating the "features" boxes and README since a lot of work and new features have been added since those were originally authored.

One good exercise we considered was doing a live mockup with all the elements we want, and just drag and drop them in real time. We can use it as forcing function to really understand what we care about most in terms of showing off and what to prioritize. All these items are important, unfortunately they can't all be above the fold, so we'll have to pick something, and ideally that also works well on mobile to make sure we retain the "above the fold" experience.

[thescientist13]

For anyone following along, please feel free to get involved in some discussions i've started for the new website. ✌️