CuteMachine

Scaffolding Articles With Plop

Now that I'm writing more articles than ever, I find it cumbersome to manually add them to my Gatsby-powered website.

Therefore I searched a way to scaffold new articles in Gatsby, but I found something better: Plop

With Plop, you can quickly generate files via the command line. You can have your custom handlebars templates, and the solution works not only with Gatsby but also with other static site generators.

Plop calls itself a micro-generator framework, because you can not only scaffold articles but even whole structures of files. Using this tool will help you to add consistency to your project as well.

In this article, we will learn how to install Plop and add a template to generate new pieces in the correct folder and with the necessary frontmatter set.

Let's get started.

Installing Plop.js

Add Plop to your project. In my case, I run the following command in the root of my Gatsby project.

npm install --save-dev plop

Then in your package.js add a new script.

 "scripts": { "plop": "plop" },

OK. Now we should be able to run the plop command and print its help information.

npm run plop -- --help

If we run it without passing the help flag, plop will let us know that there is no plopfile in the project. We'll create one shortly.

In the first step, we want Plop to ask us for the title of our new article. The generator then takes the title, creates a slug from the title, and creates the corresponding markdown file in our content folder.

Let's create the plopfile named plopfile.js in the root of your project.

const ARTICLE_PATH = './content/blog' // without trailing slash

function getSlug(string) {
  const a =
    'àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;'
  const b =
    'aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz------'
  const p = new RegExp(a.split('').join('|'), 'g')

  return string
    .toString()
    .toLowerCase()
    .replace(/\s+/g, '-') // Replace spaces with -
    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
    .replace(/&/g, '-and-') // Replace & with 'and'
    .replace(/[^\w\-]+/g, '') // Remove all non-word characters
    .replace(/\-\-+/g, '-') // Replace multiple - with single -
    .replace(/^-+/, '') // Trim - from start of text
    .replace(/-+$/, '') // Trim - from end of text
}

module.exports = function (plop) {
  // handlebar helpers
  plop.setHelper('slugify', (txt) => getSlug(txt))
  plop.setHelper('now', (txt) => new Date().toISOString())

  // article generator
  plop.setGenerator('article', {
    description: 'create new article in content',
    prompts: [
      {
        type: 'input',
        name: 'title',
        message: 'Title for article:',
      },
    ],
    actions: [
      {
        type: 'add',
        path: `${ARTICLE_PATH}/{{slugify title}}.md`,
      },
    ],
  })
}

Courtesy goes to Matthias Hagemann for the getSlug() function.

We register the slug function as a handlebars helper with plop.setHelper(). Plop uses handlebars for its templates.

We also register another helper now which we will use to set a created date for our article later.

With the generator set-up, we can now use it to scaffold a new (empty) article in our content folder with the following command:

$ npm run plop
 
> cutemachine@1.1.0 plop /Users/long/Projects/cutemachine
> plop

? Title for article: Scaffolding Articles With Plop
✔  ++ /content/blog/scaffolding-articles-with-plop.md

Great. This was easy. But we also want to have our frontmatter filled in the newly created article. Adding frontmatter and text to the created article can be done by using a template that Plop can use and fill in.

For this, we create a new folder at the root of our project, where we will store the handlebars template files Plop uses. Call the folder plop-templates/.

In this folder, we create a file called article.hbs. The file extension for Handlebar templates is .hbs.

The contents should be as follows:

---
title: {{titleCase title}}
description: 
author: 
date: {{now}}
category: 
---

As you can see, we have access to the title in the template file. We use two handlebars helpers. titleCase is provided by Plop, and the other is the now helper we defined earlier.

We have to let the generator know that it should use our new template when creating new article files. Add this to the generator action in the plopfile.js:


    actions: [
      {
        type: 'add',
        path: `${ARTICLE_PATH}/{{slugify title}}.md`,
        templateFile: 'plop-templates/article.hbs',
      },
    ],

When we run plop again, we will see that it is creating a new article with the correct title and date in the frontmatter.

---
title: Scaffolding Articles With Plop
description: 
author: 
date: 2020-06-12T12:47:02.393Z
category: 
---

Conclusion

Plop is a great tool for scaffolding structures with files and folders. You can use it with almost all blogging solutions. Well, at least those that facilitate creating content locally on your computer.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer