VSCode Image Paste Support

This blog implements a seamless workflow for adding images to your posts using VSCode’s built-in image paste functionality. This allows you to focus on writing without worrying about manual file management.

Authoring Workflow

1. Open a Markdown file: Open any post in the src/data/post/ directory.
2. Paste an image: Copy an image to your clipboard and paste it directly into the Markdown editor (Cmd+V or Ctrl+V).
3. Automatic placement: VSCode will automatically:
   • Save the image into a subfolder: images/<post-name>/<image-name>.png.
   • Insert a correctly formatted link: ![Description](../../assets/images/<post-name>/<image-name>.png).

How it works (The Build Pipeline)

When you run bin/deploy, the blog-code repository performs the following behind the scenes:

1. Consolidation: Any images found in src/data/post/images/ are moved to the central src/assets/images/ directory.
2. Path Rewriting: The relative paths in your Markdown files are dynamically rewritten from images/... to ../../assets/images/....
3. Optimization: Astro’s image service takes over, converting your images to modern formats like WebP and applying responsive compression for faster page loads.

Benefits

• Clean Content Structure: Images for a specific post are neatly grouped in a folder named after the post.
• VSCode Preview Compatibility: Because the paths are relative, images display correctly in the VSCode editor preview.
• Source Integrity: Your original files in the blog-content repository remain untouched; optimization and path rewriting occur only during the build process.