Creating a basic plugin

For our first example plugin, let’s take the multimedia shortcodes we created in Chapter 5 and convert them into a plugin.

Basic setup

To start, we need to configure our package.json file to be ready for inclusion in external projects. Give your plugin a name and description that will help users find it, and give it a proper version number. In this case, our media shortcode will start at a very low version number. When initializing an npm package, by default, the main variable will be index.js. This is the main file the package expects to run. Our main file isn’t index.js but instead eleventy.config.js. This is so we can run 11ty inside this plugin for testing purposes and external projects can ingest the code properly, as well.

For all the plugins in this chapter, the package.json file should be very similar with the only differences being additional npm packages that need to be installed:

{
  "name": "eleventy...