Enhancement/upgrade greenwood 0.10.0

[thescientist13]

Overview

This starts the process of migrating to an upcoming (significant) version of Greenwood for 0.10.0 release.
https://github.com/ProjectEvergreen/greenwood/releases/tag/v0.10.0-alpha.4

Changes

1. Converted page templates to be HTML based, while maintaining JS based "page" components - would be nice to get this at some point - https://github.com/ProjectEvergreen/greenwood/issues?q=is%3Aissue+is%3Aopen+one++off
2. Converted serve npm script to use greenwood serve
3. Added additional webpack dependencies to keep unit tests running
4. Also fixes add support for maintaining inline scripts during development mode #163 🎉
5. Also fixes blog posts are being shown out of order #174 🎉 🎉
6. Also fixes blog post heading styles differ between development and production builds #171 🎉 🎉 🎉

Already hitting! 💯

Known Issues / TODO

1. Blog Post Details is suffering from this issue because it is using (multiple) <slot>s - instances of <slot>-ed content and lit-element are rendering twice ProjectEvergreen/greenwood#433
2. Styling will need to be updated after the PostCSS portion of this is released - restore Babel / PostCSS / Browserslist for no bundle development ProjectEvergreen/greenwood#426
3. Double check / test font loading (move to app.html?)
4. Restore devServer configuration (should be supported already?) - N / A, deprecated
5. restore optimization, or turn it off until until CSS in JS can be undone in the project? (deferred to restore optimization settings / final 0.10.0 upgrade #184) - Progressive Enhancement ("RedactJS") ProjectEvergreen/greenwood#354
   • CSS in JS styles wont work in strict mode (inline hack work around) - blog post heading styles differ between development and production builds #171
   • inline scripts not working in development mode (invalid) - add support for maintaining inline scripts during development mode #163
6. restore queries in greenwood.config.js - GraphQL (Apollo) data as its own package ProjectEvergreen/greenwood#278
7. restore plugins greenwood.config.js - [RFC] Plugins: Transforms ProjectEvergreen/greenwood#185
8. Validate post ordering fix - blog posts are being shown out of order #174
9. Get default <meta> - default <meta> tags are missing from default app template in 0.10.0-alpha.0 ProjectEvergreen/greenwood#446
10. missing <meta> still, poor Lighthouse score
11. emoji on home page is borked :/ - fixed by upgrading to Node v14? - created wave emoji on home page doesn't render on local yarn serve #192
12. before / after performance benchmarks

TODOs / New Issues (for the project, not this PR)

1. Since Greenwood is longer based on webpack, had to port and sustain those dependencies here. Maybe a good chance to use something like @web/test-runner?
2. also need to make an issue to add tests / coverage for new components added - made add unit tests for all newly added components as part of greenwood upgrade #186
3. Should revert from using CSS-in-JS solution, as with strict optimization mode, it will fail - made move away from CSS-in-JS solution and go all in on regular CSS #185
4. Even with compress banner image #179 , it's still ~90k. Should find a way to see if this can be improved further, either through more compression or some HTML attributes - made further improve compression / performance of banner image #187
5. Enable using <app-blog-post-details> in post.html instead of having a post.js, probably depends on getting this solve so we can reference ../ paths in page templates? Otherwise, relative paths within relatives paths not working right now - resolve (deeply) nested relative template paths to expected workspace path ProjectEvergreen/greenwood#435 .... or - made refactor post template to use blog post details directly from template #188
6. If using import from within markdown front matter, i could reuse the same page.html template, then I wouldn't need a custom page template just for one offs like about or projects, that just need markdown + a single custom element. I think this will need support from resolve (deeply) nested relative template paths to expected workspace path ProjectEvergreen/greenwood#435 - made refactor post template to use blog post details directly from template #188
7. Better loading / management of (recent) blog post images. Test against Lighthouse - made enhancements to improve performance when loading media files (videos, gifs) for about and blog post pages #191
8. Avenir Next font cant be used anymore since it is not available in Google Fonts anymore - made current font family Avenir Next is not available on Google Fonts #189
   
   
9. Cant use google fonts in HTML, bug in Greenwood - made <link> tags that reference remote URLs break the build (v0.10.0 alpha) ProjectEvergreen/greenwood#491
   
10. Get rid of Google Analytics (to hit 100 in lighthouse?) - made get rid of Google Analytics #190

[thescientist13]

Article on FOUC + Lighthouse
https://css-tricks.com/how-to-load-fonts-in-a-way-that-fights-fout-and-makes-lighthouse-happy/

[thescientist13]

Couple new issues after the last update

[thescientist13]

So from the before

to the after

---

Final Stats:

• Lighthouse: 96 -> 💯 (+ 4)
• Network Tab: 251KB -> 281 KB (+30KB), but...

This is even with the current version disabling / removing <script> tags 🤯