How to create a VSCode extension to scaffold Astro blog posts with AI header images

Image generated from the example in this post

Originally published at https://fek.io.

I recently moved my blog to Astro from Gatsby. Previously I created a VSCode extension for generating a stub or scaffold for a new blog post. I created a new one using Langchain and Open AI to generate a header image.

When I create new blog posts in my blog, I start with a folder with the same name as the current date, and a markdown file with frontmatter with meta information about the post. I also have cover image that I create that shows up as a header.

---
title: "How to create a VSCode extension to scaffold Astro blog posts with AI header images"
tags: ["Node.js"]
description: "How to create a VSCode extension to scaffold Astro blog posts with AI header images"
category:
date: 2024-11-10
cover_image: "./how-to-create-a-vs-code-extension-to-scaffold-astro-blog-posts-with-ai-header-images.png"
---

So the extension creates a file structure that looks like the following:

2024-11-10
  ↳how-to-create-a-vs-code-extension-to-scaffold-astro-blog-posts-with-ai-header-images.md
  ↳how-to-create-a-vs-code-extension-to-scaffold-astro-blog-posts-with-ai-header-images.png

Creating the VSCode extension