feat: Include component

CONTRIBUTING.md

@@ -24,6 +24,14 @@ There are a couple of custom components in this project that you can use:
   <FormatsBanner />
   ```
 
+- `Include` - A component that allows you to include content from another file. It's useful when you want to reuse content across multiple pages.
+
+  ```mdx
+  import Include from '~/components/Include.astro';
+
+  <Include file="file.mdx" />
+  ```
+
 ## Icons
 
 You can use Starlight's [`Icon`](https://starlight.astro.build/guides/components/#icon) component. It provides some basic set of icons.

src/components/Include.astro

@@ -0,0 +1,22 @@
+---
+interface Props {
+  file: string;
+}
+
+const { file } = Astro.props;
+
+// Look up all the Markdown files in the includes folder.
+// TODO: handle current locale
+const includes = import.meta.glob('../content/includes/**/*.mdx');
+
+// Find the file that matches the passed `file` prop.
+const loader = includes[`../content/includes/${file}`];
+
+if (!loader) {
+  throw new Error(`Could not find \`${file}\`.`)
+}
+
+const { Content } = await loader() as any;
+---
+
+<Content />