Context

Context plugins allow users to extend where Greenwood can look for certain files and folders, like templates and pages. This allows plugin authors to publish a full set of assets like HTML, CSS and images (a "theme pack") so that Greenwood users can simply "wrap up" their content in a nice custom layout and theme just by installing a package from npm! 💯

Similar in spirit to CSS Zen Garden

🔎 For more information on developing and publishing a Theme Pack, check out our guide on theme packs.

API

At present, Greenwood allows for configuring the following locations as array of (absolute) paths

  • Templates directory - where additional custom page templates can be found

We plan to expand the scope of this as use cases are identified.

Templates

By providing paths to directories of templates, plugin authors can share complete pages, themes, and UI complete with JavaScript and CSS to Greenwood users, and all a user has to do (besides installing the plugin), is specify a template filename in their frontmatter.

---
template: 'acme-theme-blog-layout'
---

## Welcome to my blog!

Your plugin might look like this:

/*
 * For context, when your plugin is installed via npm or Yarn, import.meta.url will be /path/to/node_modules/<your-package-name>/
 *
 * You can then choose how to organize and publish your files.  In this case, we have published the template under a _dist/_ folder, which was specified in the package.json `files` field.
 *
 * node_modules/
 *   acme-theme-pack/
 *     dist/
 *       layouts/
 *         acme-theme-blog-layout.html
 *     acme-theme-pack.js
 *     package.json
 */
import { fileURLToPath } from 'url';

export function myCopyPlugin() {
  return {
    type: 'context',
    name: 'acme-theme-pack:context',
    provider: () => {
      return {
        templates: [
          // when the plugin is installed import.meta.url will be /path/to/node_modules/<your-package>/
          fileURLToPath(new URL('./dist/layouts', import.meta.url))
        ]
      };
    }
  };
}

Additionally, you can provide the default app.html and page.html templates this way as well!