diff --git a/src/content/docs/en/guides/imports.mdx b/src/content/docs/en/guides/imports.mdx index cacc1eb6950c6..e9809da4d2294 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 2024 annual statement as a PDF. + +// To display /public/assets/cats/ginger.jpg +An orange cat sleeping on a bed. +``` ## Import statements @@ -183,16 +193,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. +[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. -`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()` 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" +```astro title="src/components/my-component.astro" {3,4} --- // 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); ---
@@ -206,12 +217,12 @@ const posts = await Astro.glob('../pages/post/*.md');
``` -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`](#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', { eager: true })); --- {components.map((component) => ( @@ -221,6 +232,96 @@ const components = await Astro.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 Object.values(await import.meta.glob("../pages/blog/*.md", { eager: true })); +const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost)); +--- + +

+ Take a look at my favorite post, {myFeaturedPost.frontmatter.title}! +

+``` + +### Import type utilities + +#### Markdown files + +Markdown files loaded with `import.meta.glob()` return the following `MarkdownInstance` interface: + +```ts +export interface MarkdownInstance> { + /* 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>('./posts/**/*.md'); +--- + + +``` + +#### 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; +} +const data = await import.meta.glob('../data/**/*.js'); +--- +``` ### Glob Patterns @@ -230,19 +331,18 @@ 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) - `../` (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). -#### `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 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 6bb7e86d4d10a..d1788fc0d7fc9 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()`](/en/guides/imports/#importmetaglob). ```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 })); ---

{greatPost.frontmatter.title}

@@ -272,30 +273,13 @@ import * as greatPost from '../pages/post/mdx-post.mdx';

{greatPost.description}

``` -You can optionally provide a type for the `frontmatter` variable using a TypeScript generic: - -```astro title="src/pages/index.astro" ins={2-5} ins="" ---- -interface Frontmatter { - title: string; - description?: string; -} -const posts = await Astro.glob('../pages/post/*.md'); ---- - -
    - {posts.map(post =>
  • {post.frontmatter.title}
    • )} - -
-``` - ### 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 `` 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()](/en/guides/imports/#importmetaglob) 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 =>

{post.title}

)} 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 `` 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 ``. In Astro, you will create separate HTML pages and control your page `` 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. 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..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 [`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()`](/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). @@ -383,7 +383,7 @@ See more about [specific `` 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 80a49ab7f352c..6cdadc62467ad 100644 --- a/src/content/docs/en/guides/routing.mdx +++ b/src/content/docs/en/guides/routing.mdx @@ -516,7 +516,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/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)); ---- - -

- Take a look at my favorite post, {myFeaturedPost.frontmatter.title}! -

-``` - ### 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`: diff --git a/src/content/docs/en/reference/api-reference.mdx b/src/content/docs/en/reference/api-reference.mdx index fb6df1f4d2743..1582ca9d21b08 100644 --- a/src/content/docs/en/reference/api-reference.mdx +++ b/src/content/docs/en/reference/api-reference.mdx @@ -12,6 +12,16 @@ The `Astro` global is available in all contexts in `.astro` files. It has the fo ### `Astro.glob()` +:::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. ```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..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'; @@ -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! - - 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 `` component for each list item @@ -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 -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"; --- @@ -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"; --- @@ -63,7 +63,7 @@ Now that you have a few blog posts to link to, it's time to configure the Blog p ``` - 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" --- @@ -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) +- [Importing glob patterns in Astro](/en/guides/imports/#importmetaglob) 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. @@ -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..37cb4154dbb85 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 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 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 ``` -### Replace `Astro.glob()` with `getCollection()` +### Replace `import.meta.glob()` with `getCollection()` -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 ### 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).
Show me the code.