Giter Site home page Giter Site logo

5t3ph / eleventy-plugin-collection-schemas Goto Github PK

View Code? Open in Web Editor NEW
16.0 2.0 2.0 61 KB

Enforce a typed frontmatter schema for templates within an Eleventy collection.

Home Page: https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-collection-schemas

JavaScript 93.26% Nunjucks 6.74%
eleventy 11ty 11ty-plugin eleventy-plugin schema

eleventy-plugin-collection-schemas's Introduction

Eleventy Plugin: Collection Schemas

Enforce a typed frontmatter schema for templates within an Eleventy collection.

Define a unique schema per collection, then receive output during development and builds to note incorrectly typed, missing, invalid, or misplaced custom data keys.

Terminal output example shown in VS Code using the theme Apollo Midnight

Conditions evaluted for:

  • Missing required meta keys: [LIST]
  • Possibly misplaced meta keys: [LIST]
  • Incorrect type for meta [KEY], change to [TYPE]
  • Invalid meta keys: [LIST]

Invalid catches typos or extra, untyped keys that may need to be added to the schema.

Installation and Usage

Install the plugin:

npm install @11tyrocks/eleventy-plugin-collection-schemas

Then, include it in your .eleventy.js config file:

const collectionSchemas = require("@11tyrocks/eleventy-plugin-collection-schemas");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(collectionSchemas);
};

You'll also need to create or add to a global eleventyComputed.js file which should live in your global data directory (default: _data). This is to enable access of the total computed page data to the plugin.

module.exports = {
  metaSchema: function (data) {
    return this.metaSchema(data);
  },
};

The plugin works by adding a custom data extension (plugin default: .meta). This .meta file works similar to a directory data file, so it will need the same name as the parent directory of your collection. To associate the schema with the collection, the collection will also need the same name.

For each collection you want to enforce a schema for, you'll need to have the following setup, which assumes a collection named pages:

pages/
  pages.meta
  pages.json
  page-one.md <- content in any templating language

Where pages.json is a directory data file that creates the collection via the tags mechanism:

{
  "tags": "pages"
}

โœจ Tip: You can also use the directory data file to change the permalink for all templates in a collection if you don't want them to have the collection name as URL base.

Schema Format

The content of the .meta file is JSON formatted, with the parent key being the name of your custom data key, and the child properties of type and required.

{
  "title": {
    "type": "string",
    "required": true
  },
  "draft": {
    "type": "boolean",
    "required": false
  },
  "categories": {
    "type": "array",
    "required": false
  },
  "order": {
    "type": "number",
    "required": true
  }
}

Note

Data that Eleventy expects such as date should not be included in your schema, only custom data.

Use in templates

To adhere to your schema within templates, the default is to nest the schema-defined properties under a meta key (configurable).

---
meta:
  title: "My Page Title"
  order: 3
  description: "One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin."
---

Config Options

Option Type Default Description
metaKey string 'meta' Key to define data within templates
metaExtension string 'meta' File extension to use for schemas

Schema Limitations

  • Only one level of schema data is currently possible
  • Only the top-level collection is used to locate schemas

eleventy-plugin-collection-schemas's People

Contributors

5t3ph avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.