Frontmatter variables from imported Astro component

[kocv59]

Body

Astro.glob and import.meta.glob let you import .md files or .astro components. Frontmatter variables are possible to get from .md files but not .astro this should be possible.

You should be able to import lots of .astro files with different layouts and can use frontmatter variables to customize each dynamically.

[Fryuni]

Markdown files have static frontmatter, it is just a YAML document. Astro components are functions, their frontmatter values are computed on each instance, it is equivalent to this:

export default function AstroComponent(Astro: AstroGlobal) {
  const hereIsYourFrontmatter = Astro.props.something;

  return /* template referencing those _local_ values in the function */
}

Therefore it is not that we don't expose the frontmatter values outside the Astro component, is that they don't exist at that point. Each use of a component (<YourComponent />) creates different frontmatter values.

If you, as the author of the component, knows that a value is statically known for all instances of your component you can export it:

---
// This doesn't depend on any value from the Astro constant
// and is the same for every instance of the component.
// It will be visible from the outside.
export const staticFrontmatter = 'some value';

// This is computed for every instance and can't be
// seen from the outside since it won't exist yet.
const localFrontmatter = Astro.props.foo;
---
<p>You can use both:</p>
<ul>
  <li>{staticFrontmatter}</li>
  <li>{localFrontmatter}</li>
</ul>

Then you can access the static values from outside directly from the module:

---
// imports all files that end with `.astro` in `./src/components/`
const components = Object.values(import.meta.glob('../components/*.astro', { eager: true }));
---
<!-- Display all of our components -->
{components.map((Component) => (
  Component.staticFrontmatter === 'needs-div'
    ? (
        <div>
          <Component.default size={24} />
        </div>
      )
    : <Component.default size={24} />
))}