Development Roadmap

[thescientist13]

Overview

Just wanted to start tracking at a high level across discussions and demo PRs (albeit without designs) the general set of work and upstream features from Greenwood we would need.

Goal would be to turn these into issues and link back here, but for now this is just a central dumping ground.

Repo Setup

Things to get the repo ready for CONTRIBUTION

1. ESLint / Stylelint / ls-lint / Prettier - Linting and Formatting #24
2. Testing (WTR) - chore/issue 20 storybook and unit testing development workflows #21
3. GitHub Actions - chore/issue 20 storybook and unit testing development workflows #21
4. Storybook - chore/issue 20 storybook and unit testing development workflows #21
5. README / CONTRIBUTING - chore/issue 20 storybook and unit testing development workflows #21

Components

Components and patterns we'll need

1. Styleguide - Styleguide and Design System #23
2. Header - Header Component #26
3. Footer - Footer Component #27
4. TBD / as needed

Pages

1. Home Page - Home Page #30
2. Docs Landing Page + Content - Docs Page #31
3. Guides Landing Page + Content - Guides Page #33
4. Blog Landing Page - Blog Landing Page #34
5. Blog Posts Content Migration - Blog Post Details Page #35

Upstream Needs

Things we'll need from Greenwood

1. Bundle @import font-face rules in CSS (Geist font) - support bundling of url properties (like for @font-face + src) during CSS file optimization greenwood#1199
2. Content as Data (side navs, header nav, blog landing all from content as data) - Content as Data greenwood#1167
3. Prerender in development - Rendering Strategies (prerender vs SSR vs CSR) greenwood#951
4. Constructable CSS Stylesheets w/ Modules plugin + Import Attributes
   • import attributes for standard module formats; CSS and JSON  greenwood#923 and
   • upgrade Rollup and all plugins to 3.x greenwood#1087

Ecosystem

Libraries / tools that would be nice to showcase on the home page

1. Lit Server(less)SR demo - Lit v3 upgrade and SSR Pages support and compatibility for renderer plugin greenwood#1197
2. Update all Greenwood adjacent demo repos with our new styleguide - TBD
3. AWS Adapter - AWS Adapter plugin greenwood#1142

[Auhseh]

Great work here Owen!

I think Greenwood is really cool and can be something.
I would like to contribute design to this project. Here are links to

Components & Pages:

https://www.figma.com/file/ePhyD5qNMrBAcHwQ08BnQC/GreenWood?type=design&node-id=0%3A1&mode=design&t=XBbBn43Uy8Bvdm0r-1

[thescientist13]

Hey @Auhseh, had a chance to review and thanks again for your support and contribution. I think the main feedback I would have is the overall aesthetic is a little too dark (reminds of the dark themed Vercel home page) but otherwise I think you're definitely nailing the general layout / approach for a marketing and documentation site! Definitely gonna take some influences from it.

For an example of the aesthetic I'm leaning towards, you can check out this deploy preview with the color palette I'm leaning towards and my overall layout ideas for the home page as well. It's fairly inspired by the Svelte / Sveltekit sites that are pretty clean, minimal and very easy to read.
https://deploy-preview-18--super-tapioca-5987ce.netlify.app/

One thing I was thinking you might really be able to help me with is making a nice treatment / experience for the code snippets section. I think you were on a good path with what you had in your mockups for that and so thought you might have some ideas for this section in particular.

The main challenge I am having is how to communicate web standards / components and usage within the framework to capture the message of building with standards from the ground up. For example, React, Angular, Svelte et all already have their dedicated framework pages, so the respective meta-frameworks for them like Next, Analog, Sveltkit don't have to worry about showcasing the underlying framework. Other than blogs and MDN, there really isn't a dedicated marketing / docs site for Web Components. So basically I'm trying to figure out the best way to communicate both at once! 😅

Anyway, let me know if you have any questions and if that's something you would be interested in working on.

Thanks again!

[Auhseh]

Hello Owen,
This is really good feedback and very much appreciated.

Valid point re; Vercel.
I have tweaked it, using your referenced page example as inspiration. Only suggestion I have, would be around your preferred color palette.

I suggest we pick one, especially with your preference for clean and minimal, I vote Green, and have implemented your shade of Green.

Re; the code snippets section,
I have tweaked it, I think this should work

Re; Communicating Web standards/ Components;
I think we should take a show not tell approach and show how easier/ more efficient it is building with web standards from the ground up.

This can even work in our advantage, because from what you’ve mentioned, if we execute properly, we can become the best practical reference/example for Web standards/ Components.

Also, Re; Communicating Web standards/ Components;
It’ll really help to position Greenwood as “cool”,
One way to think about it is: ‘If a user stumbles on 3 options for building their next project and Greenwood is one of them, which would they pick?
That’s why the Marketing and Doc sites are actually very important and we can take the Stripe/Vercel path of balancing a high level of Product Craft with Great underlying tech.

How we go about it:
What are some examples of things that are easier/more efficient with web standards/ components (I’ll need your help with these types of examples)

The Rows homepage has a great example of show not tell, where they show the same thing done in Excel and Rows, with Rows being clearly easier and more intuitive.
https://rows.com/product.

We should hop on that call.

https://www.figma.com/proto/ePhyD5qNMrBAcHwQ08BnQC/GreenWood?page-id=113%3A740&type=design&node-id=113-770&viewport=445%2C86%2C0.14&t=ZIqhGQp3V6kQPI8r-1&scaling=scale-down-width&mode=design

[thescientist13]

https://www.figma.com/proto/ePhyD5qNMrBAcHwQ08BnQC/GreenWood?page-id=113%3A740&type=design&node-id=113-770&viewport=445%2C86%2C0.14&t=ZIqhGQp3V6kQPI8r-1&scaling=scale-down-width&mode=design

This awesome, wow thank you so much @Auhseh ! 🤩

I think we should take a show not tell approach

very much agree. Its definitely the one change I wanted to make coming from the very dense content of the prior home page, so great to hear you're in that mindset as well.

we can become the best practical reference/example for Web standards/ Components.

Yeah, I would love to explore the balance of this for sure.

I definitely want to have a section on web standards Greenwood uses / promotes in an introductory section of the docs, like Import Maps, Web Components, URL, Fetch / Request / Response etc, but ideally be able to defer / delegate the reference material to something like MDN. Or more like, its just a Request object, do whatever you would do with a Request object.

In fact, I hope one advantage Greenwood can have is less docs (or at least less dense docs) because we will have less bespoke APIs since all of our implementation will ideally just be demonstrating Web APIs. That or supplemented through "community protocols".

One way to think about it is: ‘If a user stumbles on 3 options for building their next project and Greenwood is one of them, which would they pick?

That’s why the Marketing and Doc sites are actually very important and we can take the Stripe/Vercel path of balancing a high level of Product Craft with Great underlying tech.

Good points, there so many small but important things to consider and you are right about the framing and the references you shared as good examples of how to do it right. Its good to have someone to walk through all these with, as they are things I understand passively as I work on this, but never really "executed" on to this degree, so definitely hard to keep it all in my head. 🙇

We should hop on that call.

Indeed! Are you on slack or discord? We can chat via DM and make some arrangements for that. 💯

[Auhseh]

Thanks for the feedback!
I actually concur with “Less dense docs”.

Yea, Definitely, I’m on Discord:
@Auhseh

[thescientist13]

Looks like you'll need to add me first, mine is thescientist_13

[thescientist13]

I think this is good for now with the main contributing items now ready, additional development items can be identified as pages go under development.