v0.30.0-alpha.7

Overview

This release in the v0.30.0 release introduces a robust set of "Content as Data" APIs for Greenwood, a CSS Modules ™️ plugin, support for HTML (Light DOM) Web Components, and added the ability for the init to create a directory.

In progress docs available here. Full release blog will come out with the final release.

If using Yarn, you can can upgrade all your Greenwood packages at once

$ yarn upgrade --scope @greenwood --latest

Changelog

https://github.com/ProjectEvergreen/greenwood/issues?q=label%3Av0.30.0+label%3Aalpha.7

1. CSS Nesting Support
2. add initial directory option for init scaffolding
3. HTML Web Components
4. CSS Modules ™️ plugin
5. Content as Data

Breaking Changes

Active Frontmatter

The activeFrontmatter configuration setting has been renamed to activeContent and now enabled with it all the related Content as Data feature set. The old interpolateFrontmatter behavior is still there, and now additional frontmatter is has been exposed to users. The full list includes

• id
• route
• title
• label
• data
• tableOfContents (which is Array<Object{ label, route }>

Menus

Menus have been renamed / re-implemented as Collections and their usage for GraphQL users will need to be updated to adopt that convention.

In general, these will the steps you will need to take:

1. Frontmatter

   <!-- before -->
   ---
   menu: navigation
   ---
   
   <!-- after -->
   ---
   collection: navigation
   order: 1
   ---

2. MenuQuery will need to be renamed to CollectionQuery and you will pass a name instead of menu property

   // before
   import MenuQuery from '@greenwood/plugin-graphql/src/queries/menu.gql';
   
   const response = await client.query({
     query: MenuQuery,
     variables: {
       menu: 'navigation'
     }
   });
   
   const navigation = response.data.menu.children.map(item => item.item);
   
   // after
   import CollectionQuery from '@greenwood/plugin-graphql/src/queries/collection.gql';
   
   const response = await client.query({
     query: CollectionQuery,
     variables: {
       name: 'navigation'
     }
   });
   
   this.navigation = response.data.collection;

Known Issues

1. init scaffolding can give misleading / broken next steps instructions
2. ensure Lit SSR hydration script loads after importmaps

Diff

v0.30.0-alpha.6...v0.30.0-alpha.7