Greenwood v0.21.0

Published: Jan 8, 2022

What's New

As the Greenwood teams continues on its path towards a 1.0 release, we are especially excited to share this new release which adds the capability to pull in content from external sources as part of generating a site. This is perfect for integrating with a Headless CMS, custom API, database, or even the filesystem. It's really up to you! ⚙️

We also improved the @greenwood/init command with the ability to scaffold from a template now!

External Data Sources

How It Works

With this new API added to Greenwood, pulling in external content into your site is super easy. At minimum, you will just need to define a route and a body for each page you want to add. For example, here is how you could pull from an "artists" API, returning an array of pages, that Greenwood will then use to statically generate a page for each artist with.

const customExternalSourcesPlugin = {
  type: "source",
  name: "source-plugin-artists",
  provider: () => {
    return async function () {
      const artists = await fetch("http://.../api/artists").then((resp) => resp.json());

      return artists.map((artist) => {
        const { bio, imageUrl, name } = artist;
        const route = `/artists/${name.toLowerCase().replace(/ /g, "-")}/`;

        // body and route are required fields
        return {
          route,
          title: name,
          body: `
            <p>${bio}</p>
            <img src='${imageUrl}'/>
          `,
        };
      });
    };
  },
};

export { customExternalSourcesPlugin };

And then when running the build, you would get the following output. ✨

.
└── public/
  ├── index.html
  ├── ...
  └── artists/
    ├── <name1>/index.html
    ├── <name2>/index.html
    └── <nameN>/index.html

Init Template

To scaffold your new project based on one of Greenwood's starter templates, pass the --template flag and then follow the prompts to complete the scaffolding.

# example
npx @greenwood/init@latest --template
-------------------------------------------------------
Initialize Greenwood Template ♻️
-------------------------------------------------------
? Which template would you like to use? (Use arrow keys)
❯ blog

You can also pass the template you want from the CLI too.

# example
npx @greenwood/init@latest --template=blog

Learn More

Read more in our docs on how to use this new API, learn more about using content as data in your project, and feel free to checkout and / or contribute to our discussion around future thoughts and enhancements around the local development for this workflow. Also, find more information on the init package here. All feedback appreciated! 🙌