I’m excited to announce my first npm package,
astro-layouts. This package injects a layout property into MD and MDX files’ frontmatter, making it easier to use layouts in Astro without the need to define them for each page in the frontmatter.
Idea and Motivation
I came up with the idea for this package while helping people in the Astro Discord server. I noticed that many users were struggling to define layouts, especially when dealing with numerous pages. To simplify the process, I decided to create a package that would allow them to define layouts from the Astro config file using glob patterns. With this approach, users could define a layout once and use it across multiple pages.
How It Works
The package utilizes glob patterns to match pages with their respective layouts. It then injects the layout property into the frontmatter of each page. The package leverages
picomatch in the background to perform the glob pattern matching.
To install the package, run the following command:
To use the package, add it to the Astro config file in the remark plugin section. Here’s an example of an
layoutOptions object, you define the glob pattern and the layout to be used. The
key represents the glob pattern for selecting files, while the
value represents the absolute path to the layout component.
You can be as specific as needed with the glob patterns. Here are some examples:
pages/blog/**/*.mdmatches all markdown files in the blog folder.
pages/blog/**/*.mdxmatches all MDX files in the blog folder.
pages/projects/*matches all top-level files in the blog folder.
pages/**/* matchesall files in the pages folder.
You can target any file within the
src folder. For instance, if your content resides in the src/markdown folder, you can use the following configuration:
If you have aliases defined in your
tsconfig.json file, you can use them to create shorter layout paths. Here’s an example of a
Then you can use aliases in the
I hope you find this package useful. If you have any questions or suggestions, feel free to raise an issue on GitHub. I would appreciate any feedback. If you like the package, please consider giving it a star.
Writing this package was a lot of fun, and it provided me with valuable insights into the workings of npm packages and their publication process. I’m excited to create more packages in the future. Thank you for reading!