demo/content as data

[thescientist13]

Related Issue

Exploring some of the ideas being discussed in ProjectEvergreen/greenwood#1167

Summary of Changes

Ideas being explored

1. Rich (Active) Frontmatter (also works in HTML files!)
   • Playlist page
2. Collections (basically just a re-branding of the Menu)
   • Header
   • Blog Page
3. Guides Page w/ "static" Side Nav
4. "native" content server

Additional Explorations

1. content as data without GraphQL, e.g. getCollection (ex. - prototyping SSR GraphQL with prerendering and WCC #1)
   • I guess we'll need some sort of "content" server?
   • and all the GraphQL caching / hashing / hydration tricks for greenwood serve?
2. static side navs (ex. - Docs Page #31 / Guides Page #33 )
3. "on this page" sidebar (ex. - Docs Page #31 / Guides Page #33 / Blog Post Details Page #35 )
4. sorting / filtering (ex. blog post tags on the blog landing page - Blog Landing Page #34 )
5. side nav current link highlighting / interactivity
6. can we improve the DX for this pattern which relies on browser based rendering and GQL
   • Just pass active frontmatter to a "post" component as attributes (what to do about the content?)
   • pass <content-outlet> using HTML Web Components
   • scoped styles, ftw!
7. "active" frontmatter in HTML gets a little funny with prettier when using double quote option since we need to be able to serialize JSON inside HTML attributes, and so a surrounding " breaks that. So right now just pleasing the build and not Prettier 🙈 - have to use "?

   <!-- works fine with JSON.parse -->
   <app-header nav='${globalThis.collection.nav}'></app-header>
   
   <!-- breaks JSON.parse -->
   <app-header nav="${globalThis.collection.nav}"></app-header>

8. with hydration, e.g. APOLLO_DATA?
9. CSS Modules on nested pages are breaking in dev mode

   [Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/blog/components/footer/footer.module.css'] {
     errno: -2,
     code: 'ENOENT',
     syscall: 'open',
     path: '/Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/src/blog/components/footer/footer.module.css'
   }

---

Everything now being tracked in ProjectEvergreen/greenwood#1266

Thoughts / Questions

1. Greenwood misc plugin enhancements
   • better context stubbing in CLI loader.js
   • relax node_modules detection in Greenwood resolve loaders
2. could / should we get the list plugins from disk / the repo?
3. Is there something better than a content server for prerendering + CSR (at least its just an implementation detail)?
   • import maps
4. move GraphQL to a "community" plugin (and refactor on top of shared data)?
5. for "active" frontmatter, rethink globalThis namespace?

   <title>${globalThis.page.title}</title>

6. markdown / frontmatter feedback
   • rename linkheadings -> toc
   • Make more content as data available through active frontmatter

     <!-- so would be nice if we could use other content as data, e.g. -->
     <app-toc route="${globalThis.page.route}"></app-toc>
     
     <!-- for now, just using userland frontmatter -->
     <app-toc route="${globalThis.page.route}"></app-toc>

7. Misc docs
   • prerender caveat - only your components run once, not your generic inline <script> tags!
   • When to use active frontmatter vs CSR + prerendering vs hydration?
   • with active frontmatter, it's there in the HTML. With CSR prerender, no remnants left behind, a la carte via <script type="application/json">
   • This all feels somewhat "RSC-y" (e.g. fetch data close to your components). I think if we can come up with some sort of hydration / islands story here, this could become a really nice pattern, at least for static sites (what happens when you're graph "gets huge" though? Just read from the DOM to hydrate?
   • to the above point, instead of data-gwd-opt="static", should we create something like use static? 🤔
   • or could WCC "unwrap" a light DOM component? (e.g. <my-heading><h1>Hello World!</h1></my-heading> -> <h1>Hello World!</h1> 🤔 🤔

[netlify]

✅ Deploy Preview for super-tapioca-5987ce ready!

Name	Link
🔨 Latest commit	89a6371
🔍 Latest deploy log	https://app.netlify.com/sites/super-tapioca-5987ce/deploys/66b7a40f886bf800084e8d3f
😎 Deploy Preview	https://deploy-preview-49--super-tapioca-5987ce.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[thescientist13]

An implementation has landed as part of #33 / #94 and will be part of the next Greenwood RC after ProjectEvergreen/greenwood#1266 merges.