From 43691c97e2c24e7dc71b3be8f4c288c4e95ab369 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Fri, 23 Aug 2024 10:59:38 -0500
Subject: [PATCH 01/11] Suggest using import.meta.glob

---
 src/content/docs/en/guides/imports.mdx        | 19 +++++-----
 .../docs/en/guides/markdown-content.mdx       | 36 ++++++-------------
 .../guides/migrate-to-astro/from-nextjs.mdx   |  8 ++---
 src/content/docs/en/guides/routing.mdx        |  2 +-
 .../docs/en/reference/api-reference.mdx       |  4 +++
 .../docs/en/tutorial/5-astro-api/1.mdx        | 20 +++++------
 .../docs/en/tutorial/5-astro-api/2.mdx        |  8 ++---
 .../docs/en/tutorial/5-astro-api/3.mdx        |  6 ++--
 .../en/tutorials/add-content-collections.mdx  | 10 +++---
 9 files changed, 52 insertions(+), 61 deletions(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index cacc1eb6950c6..40771dbfb324f 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -183,16 +183,17 @@ import logoUrl from '@assets/logo.png?url';
 These aliases are also integrated automatically into [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) and other editors.
 
 
-## `Astro.glob()`
+## `import.meta.glob()`
 
-[`Astro.glob()`](/en/reference/api-reference/#astroglob) is a way to import many files at once.
+[`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) is a way to import many files at once.
 
-`Astro.glob()` only takes one parameter: a relative [glob pattern](/en/guides/imports/#glob-patterns) matching the local files you'd like to import. It’s asynchronous, and returns an array of each matching file's exports.
+`import.meta.glob()` only takes one parameter: a relative [glob pattern](/en/guides/imports/#glob-patterns) matching the local files you'd like to import. It’s asynchronous, and returns an array of each matching file's exports.
 
 ```astro title="src/components/my-component.astro"
 ---
 // imports all files that end with `.md` in `./src/pages/post/`
-const posts = await Astro.glob('../pages/post/*.md'); 
+const matches = await import.meta.glob('../pages/post/*.md', { eager: true }); 
+const posts = Object.values(matches);
 ---
 <!-- Renders an <article> for the first 5 blog posts -->
 <div>
@@ -206,12 +207,12 @@ const posts = await Astro.glob('../pages/post/*.md');
 </div>
 ```
 
-Astro components imported using `Astro.glob` are of type [`AstroInstance`](/en/reference/api-reference/#astro-files). You can render each component instance using its `default` property:
+Astro components imported using `import.meta.glob` are of type [`AstroInstance`](/en/reference/api-reference/#astro-files). You can render each component instance using its `default` property:
 
 ```astro title="src/pages/component-library.astro" {8}
 ---
 // imports all files that end with `.astro` in `./src/components/`
-const components = await Astro.glob('../components/*.astro');
+const components = Object.values(await import.meta.glob('../components/*.astro'));
 ---
 <!-- Display all of our components -->
 {components.map((component) => (
@@ -230,7 +231,7 @@ For example, the glob pattern `./pages/**/*.{md,mdx}` starts within the pages su
 
 #### Glob Patterns in Astro
 
-To use with `Astro.glob()`, the glob pattern must be a string literal and cannot contain any variables. See [the troubleshooting guide](/en/guides/troubleshooting/#astroglob---no-matches-found) for a workaround.
+To use with `import.meta.glob()`, the glob pattern must be a string literal and cannot contain any variables.
 
 Additionally, glob patterns must begin with one of the following:
 - `./` (to start in the current directory)
@@ -240,9 +241,9 @@ Additionally, glob patterns must begin with one of the following:
 
 [Read more about the glob pattern syntax](https://github.com/mrmlnc/fast-glob#pattern-syntax).
 
-#### `Astro.glob()` vs `getCollection()`
+#### `import.meta.glob()` vs `getCollection()`
 
-[Content collections](/en/guides/content-collections/) provide a [`getCollection()` API](/en/reference/api-reference/#getcollection) for loading multiple files instead of `Astro.glob()`. If your content files (e.g. Markdown, MDX, Markdoc) are located in collections within the `src/content/` directory, use `getCollection()` to [query a collection](/en/guides/content-collections/#querying-collections) and return content entries.
+[Content collections](/en/guides/content-collections/) provide a [`getCollection()` API](/en/reference/api-reference/#getcollection) for loading multiple files instead of `import.meta.glob()`. If your content files (e.g. Markdown, MDX, Markdoc) are located in collections within the `src/content/` directory, use `getCollection()` to [query a collection](/en/guides/content-collections/#querying-collections) and return content entries.
 
 ## WASM
 
diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx
index 6bb7e86d4d10a..19320c306c220 100644
--- a/src/content/docs/en/guides/markdown-content.mdx
+++ b/src/content/docs/en/guides/markdown-content.mdx
@@ -211,15 +211,16 @@ Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list
 
 You can import Markdown and MDX files directly into your Astro files. This gives you access to their Markdown content, as well as other properties such as frontmatter values that can be used within Astro's JSX-like expressions.
 
-You can import one specific page with an `import` statement, or multiple pages with [`Astro.glob()`](/en/guides/imports/#astroglob).
+You can import one specific page with an `import` statement, or multiple pages with [`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import).
 
 ```astro title="src/pages/index.astro"
 ---
 // Import a single file
 import * as myPost from '../pages/post/my-post.md';
 
-// Import multiple files with Astro.glob
-const posts = await Astro.glob('../pages/post/*.md');
+// Import multiple files with import.meta.glob
+const matches = await import.meta.glob('../pages/post/*.md', { eager: true });
+const posts = Object.values(posts);
 ---
 ```
 
@@ -238,7 +239,7 @@ Here is my _great_ post!
 ---
 import * as greatPost from '../pages/post/great-post.md';
 
-const posts = await Astro.glob('../pages/post/*.md');
+const posts = Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));
 ---
 
 <p>{greatPost.frontmatter.title}</p>
@@ -272,30 +273,13 @@ import * as greatPost from '../pages/post/mdx-post.mdx';
 <p>{greatPost.description}</p>
 ```
 
-You can optionally provide a type for the `frontmatter` variable using a TypeScript generic:
-
-```astro title="src/pages/index.astro" ins={2-5} ins="<Frontmatter>"
----
-interface Frontmatter {
-  title: string;
-  description?: string;
-}
-const posts = await Astro.glob<Frontmatter>('../pages/post/*.md');
----
-
-<ul>
-  {posts.map(post => <li>{post.frontmatter.title}</li>)}
-  <!-- post.frontmatter.title will be `string`! -->
-</ul>
-```
-
 ### Exported Properties
 
 :::note[Using an Astro layout?]
 See the [properties exported to an Astro layout component](/en/basics/layouts/#markdown-layout-props) when using Astro's special [frontmatter layout](#frontmatter-layout).
 :::
 
-The following properties are available to a `.astro` component when using an `import` statement or `Astro.glob()`:
+The following properties are available to a `.astro` component when using an `import` statement or `import.meta.glob()`:
 
 - **`file`** - The absolute file path (e.g. `/home/user/projects/.../file.md`).
 - **`url`** - If it's a page, the URL of the page (e.g. `/en/guides/markdown-content`).
@@ -329,7 +313,8 @@ To access your Markdown content, pass the `<Content/>` component through the Ast
 ```astro title="src/pages/[slug].astro" {9-11} "Content" "Astro.props.post"
 ---
 export async function getStaticPaths() {
-  const posts = await Astro.glob('../posts/**/*.md')
+  const matches = await import.meta.glob('../posts/**/*.md', { eager: true })
+  const posts = Object.values(matches);
 
   return posts.map(post => ({
     params: {
@@ -359,12 +344,13 @@ For example, you can export a `title` field from an MDX page or component.
 export const title = 'My first MDX post'
 ```
 
-This `title` will be accessible from `import` and [Astro.glob()](/en/reference/api-reference/#astroglob) statements:
+This `title` will be accessible from `import` and [import.meta.glob()](https://vitejs.dev/guide/features.html#glob-import) statements:
 
 ```astro
 ---
 // src/pages/index.astro
-const posts = await Astro.glob('./*.mdx');
+const matches = await import.meta.glob('./*.mdx', { eager: true });
+const posts = Object.values(posts);
 ---
 
 {posts.map(post => <p>{post.title}</p>)}
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
index 79a4691758f0b..0b583362e1c06 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
@@ -119,7 +119,7 @@ Here are some tips for converting a Next `.js` component into a `.astro` compone
 
 5. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
 
-6. Replace `getStaticProps()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.
+6. Replace `getStaticProps()` with import statements or [`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) to query your local files. Use `fetch()` to fetch external data.
 
 See [an example of a Next `.js` file converted step-by-step](#guided-example-next-data-fetching-to-astro).
 
@@ -383,7 +383,7 @@ See more about [specific `<slot />` usage in Astro](/en/basics/astro-components/
 
 ### Next Data Fetching to Astro
 
-Convert any instances of `getStaticProps()` to either `Astro.glob()` or `getCollection()`/`getEntryBySlug()` in order to access data from other files in your project source. To [fetch remote data](/en/guides/data-fetching/), use `fetch()`.
+Convert any instances of `getStaticProps()` to either `import.meta.glob()` or `getCollection()`/`getEntryBySlug()` in order to access data from other files in your project source. To [fetch remote data](/en/guides/data-fetching/), use `fetch()`.
 
 These data requests are made in the frontmatter of the Astro component and use top-level await.
 
@@ -395,7 +395,7 @@ import { getCollection } from 'astro:content';
 const allBlogPosts = await getCollection('blog');
 
 // Get all `src/pages/posts/` entries
-const allPosts = await Astro.glob('../pages/posts/*.md');
+const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true }));
 
 const response = await fetch('https://randomuser.me/api/');
 const data = await response.json();
@@ -403,7 +403,7 @@ const randomUser = data.results[0];
 ---
 ```
 
-See more about [local files imports with `Astro.glob()`](/en/guides/imports/#astroglob), [querying using the Collections API](/en/guides/content-collections/#querying-collections) or [fetching remote data](/en/guides/data-fetching/).
+See more about [local files imports with `import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import), [querying using the Collections API](/en/guides/content-collections/#querying-collections) or [fetching remote data](/en/guides/data-fetching/).
 
 ### Next Styling to Astro
 
diff --git a/src/content/docs/en/guides/routing.mdx b/src/content/docs/en/guides/routing.mdx
index feaf1a5f60fb2..fb2d363adaf4f 100644
--- a/src/content/docs/en/guides/routing.mdx
+++ b/src/content/docs/en/guides/routing.mdx
@@ -512,7 +512,7 @@ In the following example, we will implement nested pagination to build the URLs
 // src/pages/[tag]/[page].astro
 export async function getStaticPaths({ paginate }) {
   const allTags = ['red', 'blue', 'green'];
-  const allPosts = await Astro.glob('../../posts/*.md');
+  const allPosts = Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));
   // For every tag, return a paginate() result.
   // Make sure that you pass `{params: {tag}}` to `paginate()`
   // so that Astro knows which tag grouping the result is for.
diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
index 35dcff09e3cfd..63c1c817cbd85 100644
--- a/src/content/docs/en/reference/api-reference.mdx
+++ b/src/content/docs/en/reference/api-reference.mdx
@@ -12,6 +12,10 @@ The `Astro` global is available in all contexts in `.astro` files. It has the fo
 
 ### `Astro.glob()`
 
+:::caution[Deprecated]
+Use [`import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) to query project files. Usage of `Astro.glob` can be replaced with `Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));`.
+:::
+
 `Astro.glob()` is a way to load many local files into your static site setup.
 
 ```astro
diff --git a/src/content/docs/en/tutorial/5-astro-api/1.mdx b/src/content/docs/en/tutorial/5-astro-api/1.mdx
index e864c5559ca5b..7645611ea757a 100644
--- a/src/content/docs/en/tutorial/5-astro-api/1.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx
@@ -16,7 +16,7 @@ import { Steps } from '@astrojs/starlight/components';
 Now that you have a few blog posts to link to, it's time to configure the Blog page to create a list of them automatically!
 
 <PreCheck>
-  - Access data from all your posts at once using `Astro.glob()`
+  - Access data from all your posts at once using `import.meta.glob()`
   - Display a dynamically generated list of posts on your Blog page
   - Refactor to use a `<BlogPost />` component for each list item
 </PreCheck>
@@ -24,12 +24,12 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p
 ## Dynamically display a list of posts
 
 <Steps>
-1. Add the following code to `blog.astro` to return information about all your Markdown files. `Astro.glob()` will return an array of objects, one for each blog post.
+1. Add the following code to `blog.astro` to return information about all your Markdown files. `import.meta.glob()` will return an array of objects, one for each blog post.
 
     ```astro title="src/pages/blog.astro" ins={3}
     ---
     import BaseLayout from '../layouts/BaseLayout.astro'
-    const allPosts = await Astro.glob('./posts/*.md');
+    const allPosts = Object.values(await import.meta.glob('./posts/*.md', { eager: true }));
     const pageTitle = "My Astro Learning Blog";
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -48,7 +48,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p
     ```astro title="src/pages/blog.astro" del={9,10,11} ins={13}
     ---
     import BaseLayout from '../layouts/BaseLayout.astro'
-    const allPosts = await Astro.glob('./posts/*.md');
+    const allPosts = await Object.values(import.meta.glob('./posts/*.md', { eager: true }));
     const pageTitle = "My Astro Learning Blog";
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -63,7 +63,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p
     </BaseLayout>
     ```
 
-    Your entire list of blog posts is now being generated dynamically, by mapping over the array returned by `Astro.glob()`.
+    Your entire list of blog posts is now being generated dynamically, by mapping over the array returned by `import.meta.glob()`.
 
 3. Add a new blog post by creating a new `post-4.md` file in `src/pages/posts/` and adding some Markdown content. Be sure to include at least the frontmatter properties used below.
 
@@ -79,7 +79,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p
     pubDate: 2022-08-08
     tags: ["astro", "successes"]
     ---
-    This post should show up with my other blog posts, because `Astro.glob()` is returning a list of all my posts in order to create my list.
+    This post should show up with my other blog posts, because `import.meta.glob()` is returning a list of all my posts in order to create my list.
     ```
 
 4. Revisit your blog page in your browser preview at `http://localhost:4321/blog` and look for an updated list with four items, including your new blog post!
@@ -141,7 +141,7 @@ Try on your own to make all the necessary changes to your Astro project so that
     ---
     import BaseLayout from '../layouts/BaseLayout.astro';
     import BlogPost from '../components/BlogPost.astro';
-    const allPosts = await Astro.glob('../pages/posts/*.md');
+    const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true }));
     const pageTitle = "My Astro Learning Blog";
     ---
     ```
@@ -161,7 +161,7 @@ Try on your own to make all the necessary changes to your Astro project so that
     ---
     import BaseLayout from '../layouts/BaseLayout.astro';
     import BlogPost from '../components/BlogPost.astro';
-    const allPosts = await Astro.glob('../pages/posts/*.md');
+    const allPosts = Object.values(await import.meta.glob('../pages/posts/*.md', { eager: true }));
     const pageTitle = "My Astro Learning Blog"
     ---
     <BaseLayout pageTitle={pageTitle}>
@@ -186,7 +186,7 @@ If your Astro component contains the following line of code:
 
 ```astro
 ---
-const myPosts = await Astro.glob('./posts/*.md');
+const myPosts = Object.values(await import.meta.glob('./posts/*.md', { eager:  true }));
 ---
 ```
 
@@ -248,4 +248,4 @@ Choose the syntax you could write to represent:
 
 ### Resources
 
-- [`Astro.glob()` API documentation](/en/reference/api-reference/#astroglob)
+- [`Glob import API documentation](https://vitejs.dev/guide/features.html#glob-import)
diff --git a/src/content/docs/en/tutorial/5-astro-api/2.mdx b/src/content/docs/en/tutorial/5-astro-api/2.mdx
index 16d12295f030b..336c4d8ed3a6c 100644
--- a/src/content/docs/en/tutorial/5-astro-api/2.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/2.mdx
@@ -70,7 +70,7 @@ You can create entire sets of pages dynamically using `.astro` files that export
     import BaseLayout from '../../layouts/BaseLayout.astro';
 
     export async function getStaticPaths() {
-      const allPosts = await Astro.glob('../posts/*.md');
+      const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
 
       return [
         {params: {tag: "astro"}, props: {posts: allPosts}},
@@ -129,7 +129,7 @@ You can create entire sets of pages dynamically using `.astro` files that export
 
 For each of the following, state whether the code is written **inside** the `getStaticPaths()` function, or **outside** of it.
 
-1. The `Astro.glob()` call to receive information about all your `.md` files to pass to each page route.
+1. The `import.meta.glob()` call to receive information about all your `.md` files to pass to each page route.
 
     <MultipleChoice>
     <Option isCorrect>inside `getStaticPaths`</Option>
@@ -183,7 +183,7 @@ Even if it looks challenging, you can try following along with the steps to buil
    import BaseLayout from '../../layouts/BaseLayout.astro';
 
    export async function getStaticPaths() {
-     const allPosts = await Astro.glob('../posts/*.md');
+     const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
 
      const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
    }
@@ -249,7 +249,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import BlogPost from '../../components/BlogPost.astro';
 
 export async function getStaticPaths() {
-  const allPosts = await Astro.glob('../posts/*.md');
+  const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
   
   const uniqueTags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
 
diff --git a/src/content/docs/en/tutorial/5-astro-api/3.mdx b/src/content/docs/en/tutorial/5-astro-api/3.mdx
index aa0ff4b2cc245..70a3c62c42398 100644
--- a/src/content/docs/en/tutorial/5-astro-api/3.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx
@@ -114,7 +114,7 @@ Fortunately, you already know a way to grab the data from all your Markdown file
     ```astro title = "src/pages/tags/index.astro" ins={3}
     ---
     import BaseLayout from '../../layouts/BaseLayout.astro';
-    const allPosts = await Astro.glob('../posts/*.md');
+    const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
     const pageTitle = "Tag Index";
     ---
     ```
@@ -125,7 +125,7 @@ Fortunately, you already know a way to grab the data from all your Markdown file
     ```astro title = "src/pages/tags/index.astro" ins={4}
     ---
     import BaseLayout from '../../layouts/BaseLayout.astro';
-    const allPosts = await Astro.glob('../posts/*.md');
+    const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
     const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
     const pageTitle = "Tag Index";
     ---
@@ -209,7 +209,7 @@ Here is what your new page should look like:
 ```astro title="src/pages/tags/index.astro"
 --- 
 import BaseLayout from '../../layouts/BaseLayout.astro';
-const allPosts = await Astro.glob('../posts/*.md');
+const allPosts = Object.values(await Astro.glob('../posts/*.md', { eager: true }));
 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
 const pageTitle = "Tag Index";
 ---
diff --git a/src/content/docs/en/tutorials/add-content-collections.mdx b/src/content/docs/en/tutorials/add-content-collections.mdx
index a1c1a03a236c6..06d900e670b45 100644
--- a/src/content/docs/en/tutorials/add-content-collections.mdx
+++ b/src/content/docs/en/tutorials/add-content-collections.mdx
@@ -243,10 +243,10 @@ The steps below show you how to extend the final product of the Build a Blog tut
     ```
 </Steps>
 
-### Replace `Astro.glob()` with `getCollection()`
+### Replace `import.meta.glob()` with `getCollection()`
 
 <Steps>
-11. Anywhere you have a list of blog posts, like the tutorial's Blog page (`src/pages/blog.astro/`), you will need to replace `Astro.glob()` with [`getCollection()`](/en/reference/api-reference/#getcollection) as the way to fetch content and metadata from your Markdown files.
+11. Anywhere you have a list of blog posts, like the tutorial's Blog page (`src/pages/blog.astro/`), you will need to replace `import.meta.glob()` with [`getCollection()`](/en/reference/api-reference/#getcollection) as the way to fetch content and metadata from your Markdown files.
 
     ```astro title="src/pages/blog.astro" "post.data" "getCollection(\"posts\")" "/posts/${post.slug}/" del={7} ins={2,8}
     ---
@@ -255,7 +255,7 @@ The steps below show you how to extend the final product of the Build a Blog tut
     import BlogPost from "../components/BlogPost.astro";
 
     const pageTitle = "My Astro Learning Blog";
-    const allPosts = await Astro.glob("../pages/posts/*.md");
+    const allPosts = Object.values(await import.meta.glob("../pages/posts/*.md", { eager: true }));
     const allPosts = await getCollection("posts");
     ---
     ```
@@ -288,7 +288,7 @@ The steps below show you how to extend the final product of the Build a Blog tut
    
           Apply the same changes as above to these two files:
       
-          - fetch data about all your blog posts using `getCollection("posts")` instead of using `Astro.glob()`
+          - fetch data about all your blog posts using `getCollection("posts")` instead of using `import.meta.glob()`
           - access all frontmatter values using `data` instead of `frontmatter`
           - create a page URL by adding the post's `slug` to the `/posts/` path
         
@@ -330,7 +330,7 @@ The steps below show you how to extend the final product of the Build a Blog tut
         <Box icon="puzzle-piece">
           ### Try it yourself - Update the query in the Tag Index page
 
-          Import and use `getCollection` to fetch the tags used in the blog posts on `src/pages/tags/index.astro`, following the [same steps as above](#replace-astroglob-with-getcollection).
+          Import and use `getCollection` to fetch the tags used in the blog posts on `src/pages/tags/index.astro`, following the [same steps as above](#replace-importmetaglob-with-getcollection).
 
           <details>
           <summary>Show me the code.</summary>

From 3add4296304dc77af6954428c1671bd08edf1843 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 10:34:34 -0300
Subject: [PATCH 02/11] mostly updating links to Vite's docs and our own
 imports page

---
 src/content/docs/en/guides/imports.mdx                      | 6 +++---
 src/content/docs/en/guides/markdown-content.mdx             | 4 ++--
 src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx | 2 +-
 src/content/docs/en/reference/api-reference.mdx             | 2 +-
 src/content/docs/en/tutorial/5-astro-api/1.mdx              | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index 40771dbfb324f..7836ead8c7701 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -185,11 +185,11 @@ These aliases are also integrated automatically into [VS Code](https://code.visu
 
 ## `import.meta.glob()`
 
-[`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) is a way to import many files at once.
+[Vite's `import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) is a way to import many files at once using wildcards to create a list of pathnames.
 
 `import.meta.glob()` only takes one parameter: a relative [glob pattern](/en/guides/imports/#glob-patterns) matching the local files you'd like to import. It’s asynchronous, and returns an array of each matching file's exports.
 
-```astro title="src/components/my-component.astro"
+```astro title="src/components/my-component.astro" {3,4}
 ---
 // imports all files that end with `.md` in `./src/pages/post/`
 const matches = await import.meta.glob('../pages/post/*.md', { eager: true }); 
@@ -243,7 +243,7 @@ Additionally, glob patterns must begin with one of the following:
 
 #### `import.meta.glob()` vs `getCollection()`
 
-[Content collections](/en/guides/content-collections/) provide a [`getCollection()` API](/en/reference/api-reference/#getcollection) for loading multiple files instead of `import.meta.glob()`. If your content files (e.g. Markdown, MDX, Markdoc) are located in collections within the `src/content/` directory, use `getCollection()` to [query a collection](/en/guides/content-collections/#querying-collections) and return content entries.
+[Content collections](/en/guides/content-collections/) provide a [`getCollection()` API](/en/reference/api-reference/#getcollection) for loading multiple collection entries instead of `import.meta.glob()`. If your files exist in a collection, use `getCollection()` to [query a collection](/en/guides/content-collections/#querying-collections) and return content entries.
 
 ## WASM
 
diff --git a/src/content/docs/en/guides/markdown-content.mdx b/src/content/docs/en/guides/markdown-content.mdx
index 19320c306c220..d1788fc0d7fc9 100644
--- a/src/content/docs/en/guides/markdown-content.mdx
+++ b/src/content/docs/en/guides/markdown-content.mdx
@@ -211,7 +211,7 @@ Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list
 
 You can import Markdown and MDX files directly into your Astro files. This gives you access to their Markdown content, as well as other properties such as frontmatter values that can be used within Astro's JSX-like expressions.
 
-You can import one specific page with an `import` statement, or multiple pages with [`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import).
+You can import one specific page with an `import` statement, or multiple pages with [`import.meta.glob()`](/en/guides/imports/#importmetaglob).
 
 ```astro title="src/pages/index.astro"
 ---
@@ -344,7 +344,7 @@ For example, you can export a `title` field from an MDX page or component.
 export const title = 'My first MDX post'
 ```
 
-This `title` will be accessible from `import` and [import.meta.glob()](https://vitejs.dev/guide/features.html#glob-import) statements:
+This `title` will be accessible from `import` and [import.meta.glob()](/en/guides/imports/#importmetaglob) statements:
 
 ```astro
 ---
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
index 0b583362e1c06..ff07dac14709c 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
@@ -119,7 +119,7 @@ Here are some tips for converting a Next `.js` component into a `.astro` compone
 
 5. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
 
-6. Replace `getStaticProps()` with import statements or [`import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) to query your local files. Use `fetch()` to fetch external data.
+6. Replace `getStaticProps()` with import statements or [`import.meta.glob()`](/en/guides/imports/#importmetaglob) to query your local files. Use `fetch()` to fetch external data.
 
 See [an example of a Next `.js` file converted step-by-step](#guided-example-next-data-fetching-to-astro).
 
diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
index 4f3decd5adf20..91abbc7399377 100644
--- a/src/content/docs/en/reference/api-reference.mdx
+++ b/src/content/docs/en/reference/api-reference.mdx
@@ -13,7 +13,7 @@ The `Astro` global is available in all contexts in `.astro` files. It has the fo
 ### `Astro.glob()`
 
 :::caution[Deprecated]
-Use [`import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) to query project files. Usage of `Astro.glob` can be replaced with `Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));`.
+Use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) to query project files. Usage of `Astro.glob` can be replaced with `Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));`.
 :::
 
 `Astro.glob()` is a way to load many local files into your static site setup.
diff --git a/src/content/docs/en/tutorial/5-astro-api/1.mdx b/src/content/docs/en/tutorial/5-astro-api/1.mdx
index 7645611ea757a..a6f1b6af53dc5 100644
--- a/src/content/docs/en/tutorial/5-astro-api/1.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx
@@ -248,4 +248,4 @@ Choose the syntax you could write to represent:
 
 ### Resources
 
-- [`Glob import API documentation](https://vitejs.dev/guide/features.html#glob-import)
+- [Importing glob patterns in Astro](/en/guides/imports/#importmetaglob)

From 1e68439d4c57b78d2924e63f94c6585e52aa7bb8 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 14:37:10 +0000
Subject: [PATCH 03/11] update imports page to reflect characteristics of
 import.meta.glob and unrelated public assets update

---
 src/content/docs/en/guides/imports.mdx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index 7836ead8c7701..3ef6cdb17bfdf 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -22,11 +22,21 @@ The following file types are supported out-of-the-box by Astro:
 - CSS Modules (`.module.css`)
 - Images & Assets (`.svg`, `.jpg`, `.png`, etc.)
 
-Additionally, you can extend Astro to add support for different [UI Frameworks](/en/guides/framework-components/) like React, Svelte and Vue components. You can also install the [Astro MDX integration](/en/guides/integrations-guide/mdx/) and use `.mdx` files in your project.
+Additionally, you can extend Astro to add support for different [UI Frameworks](/en/guides/framework-components/) like React, Svelte and Vue components. You can also install the [Astro MDX integration](/en/guides/integrations-guide/mdx/) or the [Astro Markdoc integration](/en/guides/integrations-guide/markdoc/) to use `.mdx` or `.mdoc` files in your project.
 
 ### Files in `public/`
 
-You can place any static asset in the [`public/` directory](/en/basics/project-structure/#public) of your project, and Astro will copy it directly into your final build untouched. `public/` files are not built or bundled by Astro, which means that any type of file is supported. You can reference a `public/` file by a URL path directly in your HTML templates.
+You can place any static asset in the [`public/` directory](/en/basics/project-structure/#public) of your project, and Astro will copy it directly into your final build untouched. `public/` files are not built or bundled by Astro, which means that any type of file is supported.
+
+You can reference a `public/` file by a URL path directly in your HTML templates.
+
+```astro
+// To link to /public/reports/annual/2024.pdf
+Download the <a href="/reports/annual/2024.pdf">2024 annual statement as a PDF</a>.
+
+// To display /public/assets/cats/ginger.jpg
+<img src="/assets/cats/ginger.jpg" alt="An orange cat sleeping on a bed.">
+```
 
 ## Import statements
 
@@ -187,7 +197,7 @@ These aliases are also integrated automatically into [VS Code](https://code.visu
 
 [Vite's `import.meta.glob()`](https://vitejs.dev/guide/features.html#glob-import) is a way to import many files at once using wildcards to create a list of pathnames.
 
-`import.meta.glob()` only takes one parameter: a relative [glob pattern](/en/guides/imports/#glob-patterns) matching the local files you'd like to import. It’s asynchronous, and returns an array of each matching file's exports.
+`import.meta.glob()` takes a relative [glob pattern](/en/guides/imports/#glob-patterns) matching the local files you'd like to import as a parameter. It returns an array of each matching file's exports. To load all matched modules up front, pass `{ eager: true }` as the second argument:
 
 ```astro title="src/components/my-component.astro" {3,4}
 ---

From 73f8f723a602dc9ba9dd2c5f7344b7a691467e9b Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 14:39:12 +0000
Subject: [PATCH 04/11] add a missing loading: eager

---
 src/content/docs/en/guides/imports.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index 3ef6cdb17bfdf..f495e3abc6777 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -222,7 +222,7 @@ Astro components imported using `import.meta.glob` are of type [`AstroInstance`]
 ```astro title="src/pages/component-library.astro" {8}
 ---
 // imports all files that end with `.astro` in `./src/components/`
-const components = Object.values(await import.meta.glob('../components/*.astro'));
+const components = Object.values(await import.meta.glob('../components/*.astro', { eager: true }));
 ---
 <!-- Display all of our components -->
 {components.map((component) => (

From ca5437b0a3a888987d5990e1eafcdf3cfcc67bfc Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 14:55:57 +0000
Subject: [PATCH 05/11] update API reference deprecation notice

---
 src/content/docs/en/reference/api-reference.mdx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx
index 91abbc7399377..1f4eb271efbf6 100644
--- a/src/content/docs/en/reference/api-reference.mdx
+++ b/src/content/docs/en/reference/api-reference.mdx
@@ -12,8 +12,14 @@ The `Astro` global is available in all contexts in `.astro` files. It has the fo
 
 ### `Astro.glob()`
 
-:::caution[Deprecated]
-Use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) to query project files. Usage of `Astro.glob` can be replaced with `Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));`.
+:::caution[Deprecated in v5.0]
+Use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.html#glob-import) to query project files. 
+
+`Astro.glob('../pages/post/*.md')` can be replaced with:
+
+`Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));`
+
+See the [imports guide](/en/guides/imports/#importmetaglob) for more information and usage.
 :::
 
 `Astro.glob()` is a way to load many local files into your static site setup.

From cd82400c9b87ed4bea22178b3128e6ac592e9d24 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 15:04:10 +0000
Subject: [PATCH 06/11] removed troubleshooting section about astro.glob, moved
 pattern to imports guide

---
 src/content/docs/en/guides/imports.mdx        | 21 +++++++++++-
 .../docs/en/guides/troubleshooting.mdx        | 33 -------------------
 2 files changed, 20 insertions(+), 34 deletions(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index f495e3abc6777..7a76941565dce 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -232,6 +232,26 @@ const components = Object.values(await import.meta.glob('../components/*.astro',
 ))}
 ```
 
+#### Supported Values
+
+Vite's `import.meta.glob()` function only supports static string literals. It does not support dynamic variables and string interpolation.
+
+A common workaround is to instead import a larger set of files that includes all the files you need, then filter them:
+
+```astro {6-7}
+---
+// src/components/featured.astro
+const { postSlug } = Astro.props;
+const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;
+
+const posts = await Astro.glob('../pages/blog/*.md');
+const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
+---
+
+<p>
+  Take a look at my favorite post, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>!
+</p>
+```
 
 ### Glob Patterns
 
@@ -248,7 +268,6 @@ Additionally, glob patterns must begin with one of the following:
 - `../` (to start in the parent directory)
 - `/` (to start at the root of the project)
  
-
 [Read more about the glob pattern syntax](https://github.com/mrmlnc/fast-glob#pattern-syntax).
 
 #### `import.meta.glob()` vs `getCollection()`
diff --git a/src/content/docs/en/guides/troubleshooting.mdx b/src/content/docs/en/guides/troubleshooting.mdx
index 5d344fa1e9ac5..8cfd096f8ebdc 100644
--- a/src/content/docs/en/guides/troubleshooting.mdx
+++ b/src/content/docs/en/guides/troubleshooting.mdx
@@ -145,39 +145,6 @@ npm install @astrojs/react react react-dom
 ```
 See [Astro's integration guide](/en/guides/integrations-guide/) for instructions on adding framework renderers, CSS tools and other packages to Astro.
 
-### `Astro.glob()` - no matches found
-
-When using `Astro.glob()` to import files, be sure to use the correct glob syntax that will match all the files you need.
-
-#### Filepaths
-
-For example, use `../components/**/*.js` in `src/pages/index.astro` to import both of the following files:
-- `src/components/MyComponent.js`
-- `src/components/includes/MyOtherComponent.js`
-
-#### Supported Values
-
- `Astro.glob()` does not support dynamic variables and string interpolation.
-
-This is not a bug in Astro. It is due to a limitation of [Vite's `import.meta.glob()` function](https://vitejs.dev/guide/features.html#glob-import) which only supports static string literals.
-
-A common workaround is to instead import a larger set of files that includes all the files you need using `Astro.glob()`, then filter them:
-
-```astro {6-7}
----
-// src/components/featured.astro
-const { postSlug } = Astro.props;
-const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;
-
-const posts = await Astro.glob('../pages/blog/*.md');
-const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
----
-
-<p>
-  Take a look at my favorite post, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>!
-</p>
-```
-
 ### Using Astro with Yarn 2+ (Berry)
 
 Yarn 2+, a.k.a. Berry, uses a technique called [Plug'n'Play (PnP)](https://yarnpkg.com/features/pnp) to store and manage Node modules, which can [cause problems](https://github.com/withastro/astro/issues/3450) while initializing a new Astro project using `create astro` or while working with Astro. A workaround is to set the [`nodeLinker` property](https://yarnpkg.com/configuration/yarnrc#nodeLinker) in `.yarnrc.yml` to `node-modules`:

From aa5c61a4c9319c989d482f76dc0dbc323d2df2e4 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 15:06:19 +0000
Subject: [PATCH 07/11] replace more instances from the tutorial in
 descriptions etc.

---
 src/content/docs/en/tutorial/5-astro-api/1.mdx     | 2 +-
 src/content/docs/en/tutorial/5-astro-api/3.mdx     | 2 +-
 src/content/docs/en/tutorial/5-astro-api/index.mdx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/docs/en/tutorial/5-astro-api/1.mdx b/src/content/docs/en/tutorial/5-astro-api/1.mdx
index a6f1b6af53dc5..ba1c9089a88d4 100644
--- a/src/content/docs/en/tutorial/5-astro-api/1.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/1.mdx
@@ -3,7 +3,7 @@ type: tutorial
 title: Create a blog post archive
 description: |-
   Tutorial: Build your first Astro blog —
-  Use Astro.glob() to access data from files in your project
+  Use import.meta.glob() to access data from files in your project
 i18nReady: true
 ---
 import Box from '~/components/tutorial/Box.astro';
diff --git a/src/content/docs/en/tutorial/5-astro-api/3.mdx b/src/content/docs/en/tutorial/5-astro-api/3.mdx
index 70a3c62c42398..37cb4154dbb85 100644
--- a/src/content/docs/en/tutorial/5-astro-api/3.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/3.mdx
@@ -209,7 +209,7 @@ Here is what your new page should look like:
 ```astro title="src/pages/tags/index.astro"
 --- 
 import BaseLayout from '../../layouts/BaseLayout.astro';
-const allPosts = Object.values(await Astro.glob('../posts/*.md', { eager: true }));
+const allPosts = Object.values(await import.meta.glob('../posts/*.md', { eager: true }));
 const tags = [...new Set(allPosts.map((post) => post.frontmatter.tags).flat())];
 const pageTitle = "Tag Index";
 ---
diff --git a/src/content/docs/en/tutorial/5-astro-api/index.mdx b/src/content/docs/en/tutorial/5-astro-api/index.mdx
index bffe2351de3d3..de288e78a63b1 100644
--- a/src/content/docs/en/tutorial/5-astro-api/index.mdx
+++ b/src/content/docs/en/tutorial/5-astro-api/index.mdx
@@ -22,7 +22,7 @@ Now that you have some blog posts, it's time to use Astro's API to work with you
 In this unit, you'll supercharge your blog with an index page, tag pages, and an RSS feed. 
 
 Along the way, you'll learn how to use:
-- `Astro.glob()` to access data from files in your project
+- `import.meta.glob()` to access data from files in your project
 - `getStaticPaths()` to create multiple pages (routes) at once
 - The Astro RSS package to create an RSS feed
 

From 127b247b694f1dbcd7b77d8726a97932aa77dd17 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 15:10:47 +0000
Subject: [PATCH 08/11] updated migration guides - code examples and links

---
 .../en/guides/migrate-to-astro/from-create-react-app.mdx  | 8 ++++----
 .../docs/en/guides/migrate-to-astro/from-gatsby.mdx       | 8 ++++----
 .../docs/en/guides/migrate-to-astro/from-gridsome.mdx     | 4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx b/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx
index 3e3768993dc14..e66f130898081 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-create-react-app.mdx
@@ -274,7 +274,7 @@ Here are some tips for converting a CRA `.js` component into a `.astro` componen
 
 5. Decide whether any imported components also need to be converted to Astro. You can keep them as React components for now, or forever. But, you may eventually want to convert them to `.astro` components, especially if they do not need to be interactive!
 
-6. Replace `useEffect()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.
+6. Replace `useEffect()` with import statements or [`import.meta.glob()`](/en/guides/imports/#importmetaglob) to query your local files. Use `fetch()` to fetch external data.
 
 ### Migrating Tests
 
@@ -325,7 +325,7 @@ See more about [specific `<slot />` usage in Astro](/en/basics/astro-components/
 
 Fetching data in a Create React App component is similar to Astro, with some slight differences.
 
-You will need to remove any instances of a side effect hook (`useEffect`) for either `Astro.glob()` or `getCollection()`/`getEntryBySlug()` to access data from other files in your project source.
+You will need to remove any instances of a side effect hook (`useEffect`) for either `import.meta.glob()` or `getCollection()`/`getEntryBySlug()` to access data from other files in your project source.
 
 To [fetch remote data](/en/guides/data-fetching/), use `fetch()`.
 
@@ -339,7 +339,7 @@ import { getCollection } from 'astro:content';
 const allBlogPosts = await getCollection('blog');
 
 // Get all `src/pages/posts/` entries
-const allPosts = await Astro.glob('../pages/posts/*.md');
+const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));
 
 // Fetch remote data
 const response = await fetch('https://randomuser.me/api/');
@@ -348,7 +348,7 @@ const randomUser = data.results[0];
 ---
 ```
 
-See more about [local files imports with `Astro.glob()`](/en/guides/imports/#astroglob), [querying using the Collections API](/en/guides/content-collections/#querying-collections) or [fetching remote data](/en/guides/data-fetching/).
+See more about [local files imports with [`import.meta.glob()`](/en/guides/imports/#importmetaglob), [querying using the Collections API](/en/guides/content-collections/#querying-collections) or [fetching remote data](/en/guides/data-fetching/).
 
 ### CRA Styling to Astro
 
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
index e674eb43c44b3..50c8aa1e7b3e4 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-gatsby.mdx
@@ -34,7 +34,7 @@ When you rebuild your Gatsby site in Astro, you will notice some important diffe
 
 - [Astro components](/en/basics/astro-components/) are not written as exported functions that return page templating. Instead, you'll split your code into a "code fence" for your JavaScript and a body exclusively for the HTML you generate.
 
-- [Local file data](/en/guides/imports/): Gatsby uses GraphQL to retrieve data from your project files. Astro uses ESM imports and top-level await functions (e.g. [`Astro.glob()`](/en/guides/imports/#astroglob), [`getCollection()`](/en/guides/content-collections/#querying-collections)) to import data from your project files. You can manually add GraphQL to your Astro project but it is not included by default.
+- [Local file data](/en/guides/imports/): Gatsby uses GraphQL to retrieve data from your project files. Astro uses ESM imports and top-level await functions (e.g. [`import.meta.glob()`](/en/guides/imports/#importmetaglob), [`getCollection()`](/en/guides/content-collections/#querying-collections)) to import data from your project files. You can manually add GraphQL to your Astro project but it is not included by default.
 
 ## Convert your Gatsby Project
 
@@ -123,7 +123,7 @@ Here are some tips for converting a Gatsby `.js` component into a `.astro` compo
 
 5. Decide whether any imported components also need to be converted to Astro. With the official React integration installed, you can [use existing React components in your Astro files](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
 
-6. Remove any GraphQL queries. Instead, use import and [`Astro.glob()`](/en/reference/api-reference/#astroglob) statements to query your local files.
+6. Remove any GraphQL queries. Instead, use import and [`import.meta.glob()`](/en/guides/imports/#importmetaglob) statements to query your local files.
 
 See [an example from Gatsby's Blog starter template converted step-by-step](#guided-example-gatsby-layout-to-astro)
 
@@ -351,7 +351,7 @@ You can learn more about [using images in Astro](/en/guides/images/) in the Imag
 
 ### Gatsby GraphQL to Astro
 
-Remove all references to GraphQL queries, and instead use [`Astro.glob()`](/en/guides/imports/#astroglob) to access data from your local files. 
+Remove all references to GraphQL queries, and instead use [`import.meta.glob()`](/en/guides/imports/#importmetaglob) to access data from your local files. 
 
 Or, if using content collections, query your Markdown and MDX files in `src/content/` using [`getEntry()` and `getCollection()`](/en/guides/content-collections/#querying-collections). 
 
@@ -366,7 +366,7 @@ import { getCollection } from 'astro:content';
 const allBlogPosts = await getCollection('blog');
 
 // Get all `src/pages/posts/` entries
-const allPosts = await Astro.glob('../pages/posts/*.md');
+const allPosts = await Object.values(await import.meta.glob('../pages/post/*.md', { eager: true }));
 ---
 
 export const pageQuery = graphql`
diff --git a/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx b/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx
index 1707e924d54cb..e0d8d6e2d51d2 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-gridsome.mdx
@@ -31,7 +31,7 @@ When you rebuild your Gridsome site in Astro, you will notice some important dif
 
 - As an SPA, Gridsome uses `vue-router` for SPA routing, and `vue-meta` for managing `<head>`. In Astro, you will create separate HTML pages and control your page `<head>` directly, or in a [layout component](/en/basics/layouts/).
 
-- [Local file data](/en/guides/imports/): Gridsome uses GraphQL to retrieve data from your project files. Astro uses ESM imports and the [`Astro.glob()`](/en/guides/imports/#astroglob) helper to import data from local project files. Remote resources can be loaded using the standard `fetch()` API. GraphQL may be optionally added to your project, but is not included by default.
+- [Local file data](/en/guides/imports/): Gridsome uses GraphQL to retrieve data from your project files. Astro uses ESM imports and [`import.meta.glob()`](/en/guides/imports/#importmetaglob) to import data from local project files. Remote resources can be loaded using the standard `fetch()` API. GraphQL may be optionally added to your project, but is not included by default.
 
 ## Switch from Gridsome to Astro
 
@@ -61,7 +61,7 @@ Bring your existing Markdown (or MDX, with our optional integration) files as co
 
 Since Gridsome's project structure is similar to Astro's, you may be able to copy several existing files from your project into the same location in your new Astro project. However, the two project structures are not identical. You may want to examine [Astro's project structure](/en/basics/project-structure/) to see what the differences are.
 
-Since Astro queries and imports your local files differently than Gridsome, you may want to read about [how to load files using `Astro.glob()`](/en/guides/imports/#astroglob) to understand how to work with your local files.
+Since Astro queries and imports your local files differently than Gridsome, you may want to read about [how to load files using [`import.meta.glob()`](/en/guides/imports/#importmetaglob) to understand how to work with your local files.
 
 To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on [astro.new](https://astro.new). You'll find a link to each project's GitHub repository, as well as one-click links to open a working project in StackBlitz, CodeSandbox and Gitpod online development environments.
 

From 16ebfdd3ce6d3178f22fdaaa16fde1dfc9b62a5f Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 16:01:39 +0000
Subject: [PATCH 09/11] new import type utilities section to replace content
 when Astro.glob API reference goes away

---
 src/content/docs/en/guides/imports.mdx | 74 +++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index 7a76941565dce..cdca2f28f3530 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -232,7 +232,7 @@ const components = Object.values(await import.meta.glob('../components/*.astro',
 ))}
 ```
 
-#### Supported Values
+### Supported Values
 
 Vite's `import.meta.glob()` function only supports static string literals. It does not support dynamic variables and string interpolation.
 
@@ -253,6 +253,76 @@ const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPos
 </p>
 ```
 
+### Import type utilities
+
+#### Markdown files
+
+Markdown files loaded with `import.meta.glob()` return the following `MarkdownInstance` interface:
+
+```ts
+export interface MarkdownInstance<T extends Record<string, any>> {
+  /* Any data specified in this file's YAML frontmatter */
+	frontmatter: T;
+  /* The absolute file path of this file */
+	file: string;
+  /* The rendered path of this file */
+	url: string | undefined;
+  /* Astro Component that renders the contents of this file */
+	Content: AstroComponentFactory;
+  /** (Markdown only) Raw Markdown file content, excluding layout HTML and YAML frontmatter */
+	rawContent(): string;
+  /** (Markdown only) Markdown file compiled to HTML, excluding layout HTML */
+	compiledContent(): string;
+  /* Function that returns an array of the h1...h6 elements in this file */
+	getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
+	default: AstroComponentFactory;
+}
+```
+
+You can optionally provide a type for the `frontmatter` variable using a TypeScript generic.
+
+```astro
+---
+interface Frontmatter {
+    title: string;
+    description?: string;
+}
+
+const posts = import.meta.glob<MarkdownInstance<Frontmatter>>('./posts/**/*.md');
+---
+
+<ul>
+  {posts.map(post => <li>{post.frontmatter.title}</li>)}
+</ul>
+```
+
+#### Astro files
+
+Astro files have the following interface:
+
+```ts
+export interface AstroInstance {
+  /* The file path of this file */
+  file: string;
+  /* The URL for this file (if it is in the pages directory) */
+	url: string | undefined;
+	default: AstroComponentFactory;
+}
+```
+
+#### Other files
+
+Other files may have various different interfaces, but `import.meta.glob()` accepts a TypeScript generic if you know exactly what an unrecognized file type contains.
+
+```ts
+---
+interface CustomDataFile {
+  default: Record<string, any>;
+}
+const data = await import.meta.glob<CustomDataFile>('../data/**/*.js');
+---
+```
+
 ### Glob Patterns
 
 A glob pattern is a file path that supports special wildcard characters. This is used to reference multiple files in your project at once.
@@ -270,7 +340,7 @@ Additionally, glob patterns must begin with one of the following:
  
 [Read more about the glob pattern syntax](https://github.com/mrmlnc/fast-glob#pattern-syntax).
 
-#### `import.meta.glob()` vs `getCollection()`
+### `import.meta.glob()` vs `getCollection()`
 
 [Content collections](/en/guides/content-collections/) provide a [`getCollection()` API](/en/reference/api-reference/#getcollection) for loading multiple collection entries instead of `import.meta.glob()`. If your files exist in a collection, use `getCollection()` to [query a collection](/en/guides/content-collections/#querying-collections) and return content entries.
 

From 6c8014d4207790318a76b71744c7cc5a78db9aa5 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Tue, 3 Sep 2024 16:32:13 +0000
Subject: [PATCH 10/11] update link to astro files to the one on this page

---
 src/content/docs/en/guides/imports.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index cdca2f28f3530..834e81b4fc7b4 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -217,7 +217,7 @@ const posts = Object.values(matches);
 </div>
 ```
 
-Astro components imported using `import.meta.glob` are of type [`AstroInstance`](/en/reference/api-reference/#astro-files). You can render each component instance using its `default` property:
+Astro components imported using `import.meta.glob` are of type [`AstroInstance`](#astro-files). You can render each component instance using its `default` property:
 
 ```astro title="src/pages/component-library.astro" {8}
 ---

From 42ff6695ab94eae418d6ff5886c03d71c9b6a531 Mon Sep 17 00:00:00 2001
From: Sarah Rainsberger <sarah@rainsberger.ca>
Date: Wed, 4 Sep 2024 17:11:28 -0300
Subject: [PATCH 11/11] update another glob

---
 src/content/docs/en/guides/imports.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx
index 834e81b4fc7b4..e9809da4d2294 100644
--- a/src/content/docs/en/guides/imports.mdx
+++ b/src/content/docs/en/guides/imports.mdx
@@ -244,7 +244,7 @@ A common workaround is to instead import a larger set of files that includes all
 const { postSlug } = Astro.props;
 const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;
 
-const posts = await Astro.glob('../pages/blog/*.md');
+const posts = await Object.values(await import.meta.glob("../pages/blog/*.md", { eager: true }));
 const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
 ---