Updated 3-26-2024: Added timestamp to date to make my RSS feed better

I have been thinking for a long time that it would be nice to have a script that would easily scaffold out the frontmatter for a new post on my blog (aka this site). I thought I'd need to write a node script or something, and so haven't done it.

But, I realized there is a much simpler way to do this in my code editor of choice, VS Code: Snippets!

In the command palette (cmd + shift + p), I selected "Configure User Snippets", then created a new global snippets file scoped to the workspace. That creates a file in the .vscode folder where my snippet will go. This is rather handy; if I commit that file in git as part of my website, the nice snippet I am making will follow me to any new machines where I am working on this site in VS Code, without extra configuration.

Here is what I put in my snippet:

{
	"add post frontmatter": {
		"prefix": "frontmatter",
		"scope": "plaintext,markdown,html",
		"body": [
			"---",
			"layout: post",
			"title: $TM_FILENAME_BASE"
			"tags: ['posts']",
			"description: ''",
			"date: $CURRENT_YEAR-$CURRENT_MONTH-${CURRENT_DATE}T$CURRENT_HOUR:$CURRENT_MINUTE:00-05:00",
			"---",
			"$2"
		],
		"description": "Add frontmatter for new post"
	},
}

Note that 'html' is the VS Code language identfier that is used in my current setup when I'm working in a Nunjucks or Liquid file.

Now when I have created a new file to add a new post to, I can start typing frontmatter and then tell the editor to autocomplete, which fills out a nice new frontmatter entry that I can fill in.

If I haven't saved the file yet, I'll get something like Untitled-1 as the title; if I have, I'll get the file slug instead. I'll get today's date, and a placeholder for the description and tags I might want to add, as well as the tag I need for all my posts in the blog section.

Neat!!

---
layout: post
title: ssg-frontmatter-template
tags: ['posts']
description: ''
date: 2024-01-13T12:29:00-05:00
---

A note on dates: We want our date to be a valid format for Eleventy frontmatter dates and we want to make sure our RSS feed doesn't get jumbled in order if we make two posts on the same day. (Thanks Robb Knight for raising the alarm on this!). So we should make sure the date we're using includes the actual time. I'm hard-coding my time zone offset because whatever, close enough. Maybe you want to do something different here - tell me about if so! And if you don't live in US Central time, probably you want a different offset at the end.

Note I spent way too much time debugging my snippet here because somehow I ended up with the wrong kind of dash in my snippet file. If you're having trouble with a format that seems like it should be right but isn't working when you do the snippet vs typing it in by hand, be sure to watch out for that!

Webmentions: 26 Likes 14 Retweets

8 Replies

Marijke Luttekes 13 Jan 2024 at 07:40PM

@cassey Thank you!I should have spent more time reading the Snippets documentation. I use them often but missed the part when you can use variable replacement, it's amazing! source

keith kurson 13 Jan 2024 at 05:25PM

@cassey Ohhh i bet there are so many good uses for snippets that id never considered them for! source

Cory Dransfeldt :prami: 13 Jan 2024 at 05:09PM

@cassey love this! Definitely going to set it up. source

Stephanie Eckles 13 Jan 2024 at 05:02PM

@cassey Nice! In case it helps, I also created this little plugin that helps re-enforce "types" for your frontmatter per collection type (ex. blog vs. page), but I really like the snippet idea, too!... source

Cassey Lottman 13 Jan 2024 at 05:15PM

@cferdinandi nothing built in! source

Chris Ferdinandi ⚓️ 13 Jan 2024 at 04:54PM

@cassey Does 11ty not have something like Hugos' archetypes? https://gohugo.io/content-management/archetypes/ Archetypes source

Christopher Kennedy-Nuñez 13 Jan 2024 at 11:29PM

@cassey this is magic, Cassey! source

Robb Knight 26 Mar 2024 at 06:00PM

@cassey ???? source

These are webmentions via the IndieWeb and webmention.io.