Support `yaml toolingGallery` and `yaml imageGallery` Code Blocks in AstroMarkdown

Summary

Enables users to create toolingGallery and imageGallery blocks using YAML code fences in Markdown.
Supports both [[link]] and tag: syntax for toolingGallery.

Why Care

This change improves author flexibility and Markdown readability, allowing for structured block syntax while preserving backwards compatibility with existing ```toolingGallery` blocks. It also introduces tag-based filtering in toolingGallery, enabling dynamic tool displays.

Implementation

Changes Made

  • Added support in AstroMarkdown.astro for:
    • node.lang === 'yaml' && node.meta === 'toolingGallery'
    • node.lang === 'yaml' && node.meta === 'imageGallery'
  • Modified existing toolingGallery parsing logic to support:
  • Added normalizeTag() utility to ensure tag matching is slug-safe and case-insensitive.
  • Refactored toolGalleryTools builder logic to combine tools specified directly with tools matching tags.
  • Updated ToolingGallery.astro to support new small prop for leaner gallery display.
  • Example usage:

Technical Details

Changes in AstroMarkdown.astro

js 
const isToolingGallery = node.type === 'code' && (
  node.lang === 'toolingGallery' || (node.lang === 'yaml' && node.meta === 'toolingGallery')
);

const isImageGallery = node.type === 'code' && (
  node.lang === 'imageGallery' || (node.lang === 'yaml' && node.meta === 'imageGallery')
);
  • YAML lines are parsed line-by-line:
js 
const tagMatch = line.match(/^- tag:\s*(?:\[\[(.*?)\]\]|(.*))/i);
  • Tag filters and tool IDs are separately collected and merged:
js 
const tagFilteredTools = allTools
  .filter(tool => tool.tags?.some(tag =>
    tagFilters.some(filterTag =>
      normalizeTag(filterTag) === normalizeTag(tag)
    )
  ));

Changes in ToolingGallery.astro

astro 
<ToolingGallery tools={tools} small={true} />
  • When small is true, gallery and card sizes are reduced via .small CSS class.

Integration Points

  • No breaking changes — existing ```toolingGallery` and ```imageGallery` blocks remain supported.
  • Works seamlessly with ToolingGallery and ImageGallery components.
  • Compatible with existing slugify and tag conventions.
  • Optional new small display mode in ToolingGallery.

Documentation

  • See example usage above.
  • Example articles using the new syntax:
    • content/articles/2025-06-13_testing_toolingGallery.yaml.md

Example Entries

Example entries can be found in the content/changelog--code directory, including this file.