README.md

@fujocoded/astro-remark-collect-components

Collects a series of attributes from Astro components used in .md or .mdx files and adds a list of them to the Astro remarkFrontmatter property for later usage.

Important

This remark plugin can only be used in Astro since it relies on the existence of the Astro frontmatter property

Sample usage

In astro.config.js:

import { astroRemarkCollectComponents } from "@fujocoded/astro-remark-collect-components";

export default defineConfig({
  // ...
  integrations: [
    mdx({
      remarkPlugins: [
        [
          astroRemarkCollectComponents,
          {
            components: [
              {
                // Name of the component
                name: "Callout",
                // Attributes to collect
                attributes: ["title", "slug", "type"],
                // Name of property in remarkPluginFrontmatter where the list of attributes will be stored
                frontmatterName: "callouts",
              },
              {
                name: "ScenarioCallout",
                attributes: ["title", "slug"],
                frontmatterName: "scenarios",
              },
            ],
          },
        ],
      ],
    }),
  ],
});

In an astro file:

const chapters = await getCollection("chapters");
chapters.map(async (a) => {
  const rendered = await a.render();
  console.log(rendered.remarkPluginFrontmatter.callouts);
});