Merge branch 'main' into hashnode

Author: yanthomasdev

config/sidebar.ts

@@ -22,22 +22,30 @@ type StarlightSidebarConfig = NonNullable<Parameters<typeof starlight>[0]['sideb
 
 /** Generate a Starlight sidebar config object from our existing `nav.ts` files. */
 export function makeSidebar(): StarlightSidebarConfig {
+	let currentSubGroup: Extract<StarlightSidebarConfig[number], { items: any }>;
 	return navTranslations.en.reduce((sidebar, item) => {
 		if ('header' in item) {
-			sidebar.push({
+			const newGroup = {
 				label: item.text,
 				translations: getTranslations(item),
 				items: [],
-			});
-		} else {
-			const group = sidebar.at(-1);
-			if (group && 'items' in group) {
-				group.items.push({
-					label: item.text,
-					link: item.slug,
-					translations: getTranslations(item),
-				});
+				collapsed: item.collapsed,
+			};
+			if (item.nested) {
+				const parentGroup = sidebar.at(-1);
+				if (parentGroup && 'items' in parentGroup) {
+					parentGroup.items.push(newGroup);
+				}
+			} else {
+				sidebar.push(newGroup);
 			}
+			currentSubGroup = newGroup;
+		} else {
+			currentSubGroup.items.push({
+				label: item.text,
+				link: item.slug,
+				translations: getTranslations(item),
+			});
 		}
 		return sidebar;
 	}, [] as StarlightSidebarConfig);

src/content/docs/en/editor-setup.mdx

@@ -3,6 +3,7 @@ title: Editor Setup
 description: Set up your editor to build with Astro.
 i18nReady: true
 ---
+
 import Badge from '~/components/Badge.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
@@ -24,11 +25,14 @@ import ReadMore from '~/components/ReadMore.astro';
 
 <ReadMore>See how to [set up TypeScript](/en/guides/typescript/) in your Astro project.</ReadMore>
 
+## Zed
+
+[Zed](https://zed.dev/) is an open-source code editor that added support for Astro in version 0.123.2. You can install the [Astro extension](https://github.com/zed-industries/zed/tree/main/extensions/astro) in the IDE's Extensions tab. This extension includes features like syntax highlighting, code completion, and formatting.
+
 ## JetBrains IDEs
 
 Initial support for Astro landed in WebStorm 2023.1. You can install the official plugin through [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) or by searching for "Astro" in the IDE's Plugins tab. This plugin includes features like syntax highlighting, code completion, and formatting, and plans to add even more advanced features in the future. It is also available to all other [JetBrains IDEs with JavaScript support](https://www.jetbrains.com/products/#lang=js&type=ide).
 
-
 ## Other Code Editors
 
 Our amazing community maintains several extensions for other popular editors, including:
@@ -58,7 +62,7 @@ See [the project's User Guide](https://ota-meshi.github.io/eslint-plugin-astro/u
 
 ### Stylelint
 
-[Stylelint](https://stylelint.io/) is a popular linter for CSS. [A community maintained Stylelint configuration](https://github.com/ota-meshi/stylelint-config-html) provides Astro support. 
+[Stylelint](https://stylelint.io/) is a popular linter for CSS. [A community maintained Stylelint configuration](https://github.com/ota-meshi/stylelint-config-html) provides Astro support.
 
 Installation instructions, editor integration, and additional information can be found in the project's README.
 

src/content/docs/en/getting-started.mdx

@@ -7,13 +7,12 @@ editUrl: false
 next: false
 banner:
   content: |
-    <a href="https://astro.build/blog/astro-4/">Astro version 4.0 is here!</a>
-    Are you ready to upgrade? <a href="/en/guides/upgrade-to/v4/">Read our upgrade guide</a>.
+    Join us and 100+ Astro developers at <a href="https://lu.ma/astro-together-meetup-2024/">Astro Together</a> in Montreal on May 28th!
 hero:
   title: Astro Docs
   tagline: Guides, resources, and API references to help you build with Astro.
   actions:
-    - text: Get started
+    - text: Install Astro
       icon: rocket
       link: /en/install/auto/
       variant: primary

src/content/docs/en/guides/cms/apostrophecms.mdx

@@ -19,7 +19,7 @@ In this section, you will use the [Apostrophe integration](https://apostrophecms
 
 To get started, you will need to have the following:
 
-1. **An on-demand rendered Astro project** with the [Node.js adapter](https://docs.astro.build/en/guides/integrations-guide/node/) installed and `output: 'server'` configured - If you don't have an Astro project yet, our [installation guide](/en/install/auto/) will get you up and running in no time.
+1. **An on-demand rendered Astro project** with the [Node.js adapter](/en/guides/integrations-guide/node/) installed and `output: 'server'` configured - If you don't have an Astro project yet, our [installation guide](/en/install/auto/) will get you up and running in no time.
 
 2. **An ApostropheCMS project with a configured environment variable called `APOS_EXTERNAL_FRONT_KEY`** - This environment variable can be set to any random string. If you don't have an ApostropheCMS project yet, the [installation guide](https://docs.apostrophecms.org/guide/development-setup.html) will get one setup quickly. We highly recommend using the [Apostrophe CLI tool](https://apostrophecms.com/extensions/apos-cli) to facilitate this.
 
@@ -45,7 +45,7 @@ Your root directory should now include this new file:
 
 ### Installing dependencies
 
-To connect Astro with your ApostropheCMS project, install the official Apostrophe integration in your Astro project using the command below for your prefered package manager.
+To connect Astro with your ApostropheCMS project, install the official Apostrophe integration in your Astro project using the command below for your preferred package manager.
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```shell
@@ -460,4 +460,4 @@ For the ApostropheCMS project, follow the instructions for your hosting type in
 ## Community Resources
 - [Integrating ApostropheCMS with Astro, Pt. 1](https://apostrophecms.com/blog/how-to-integrate-astro-with-apostrophecms-pt-1) by Antonello Zaini
 - [Integrating ApostropheCMS with Astro, Pt. 2](https://apostrophecms.com/blog/how-to-integrate-astro-with-apostrophecms-pt-2) by Antonello Zaini
-- [Show & Tell Live | Astro & Apostrophe](https://youtu.be/cwJhtJhAhwA?si=6iUU9EjidfdnOdCh)
+- [Show & Tell Live | Astro & Apostrophe](https://youtu.be/cwJhtJhAhwA?si=6iUU9EjidfdnOdCh)

src/content/docs/en/guides/cms/builderio.mdx

@@ -219,7 +219,7 @@ const { results: posts } = await fetch(
   <body>
     <ul>
       {
-        posts.map(({ data: { slug, title } }) => (
+        posts.flatMap(({ data: { slug, title } }) => (
           <li>
             <a href={`/posts/${slug}`}>{title}</a>
           </li>
@@ -318,7 +318,7 @@ const { html: postHTML } = await fetch(
     <article>
       <Fragment set:html={postHTML} />
     </article>
-    <footer>The is your footer</footer>
+    <footer>This is your footer</footer>
   </body>
 </html>
 ```

src/content/docs/en/guides/cms/umbraco.mdx

@@ -20,7 +20,7 @@ In this section you will use Umbraco's native [Content Delivery API](https://doc
 
 To get started, you will need to have the following:
 
-1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](https://docs.astro.build/en/install/auto/) will get you up and running in no time.
+1. **An Astro project** - If you don’t have an Astro project yet, our [Installation guide](/en/install/auto/) will get you up and running in no time.
 2. **An Umbraco (v12+) project** - If you don’t have an Umbraco project yet, please see this [Installation guide](https://docs.umbraco.com/umbraco-cms/fundamentals/setup/install/).
 
 ### Setting up the Content Delivery API
@@ -64,7 +64,7 @@ const articles = await res.json();
 ```
 
 
-<ReadMore>Read more about [data fetching in Astro](https://docs.astro.build/en/guides/data-fetching/).</ReadMore>
+<ReadMore>Read more about [data fetching in Astro](/en/guides/data-fetching/).</ReadMore>
 
 ## Building a blog with Umbraco and Astro
 
@@ -150,7 +150,7 @@ const articles = await res.json();
 
 ### Generating individual blog posts
 
-Create the file `[...slug].astro` at the root of the `/pages/` directory. This file will be used to [generate the individual blog pages dynamically](https://docs.astro.build/en/guides/routing/#dynamic-routes).
+Create the file `[...slug].astro` at the root of the `/pages/` directory. This file will be used to [generate the individual blog pages dynamically](/en/guides/routing/#dynamic-routes).
 
 Note that the `params` property, which generates the URL path of the page, contains `article.route.path` from the API fetch. Similarly, the `props` property must include the entire `article` itself so that you can access all the information in your CMS entry.
 
@@ -196,7 +196,7 @@ With the dev server running, you should now be able to view your Umbraco-created
 
 ## Publishing your site
 
-To deploy your site visit our [deployment guides](https://docs.astro.build/en/guides/deploy/) and follow the instructions for your preferred hosting provider.
+To deploy your site visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider.
 
 ## Local dev, HTTPS and self-signed SSL certificates
 

src/content/docs/en/guides/data-fetching.mdx

@@ -8,7 +8,8 @@ i18nReady: true
 
 ## `fetch()` in Astro
 
-All [Astro components](/en/basics/astro-components/) have access to the [global `fetch()` function](https://developer.mozilla.org/en-US/docs/Web/API/fetch) in their component script to make HTTP requests to APIs using the full URL (e.g. https://example.com/api or `Astro.url + "/api"`).
+All [Astro components](/en/basics/astro-components/) have access to the [global `fetch()` function](https://developer.mozilla.org/en-US/docs/Web/API/fetch) in their component script to make HTTP requests to APIs using the full URL (e.g. https://example.com/api).
+Additionally, you can construct a URL to your project's pages and endpoints that are rendered on demand on the server using `new URL("/api", Astro.url)`.
 
 This fetch call will be executed at build time, and the data will be available to the component template for generating dynamic HTML. If [SSR](/en/guides/server-side-rendering/) mode is enabled, any fetch calls will be executed at runtime.
 

src/content/docs/en/guides/deploy/netlify.mdx

@@ -133,7 +133,7 @@ You can also create a new site on Netlify and link up your Git repository by ins
 
 ### Set a Node.js Version
 
-If you are using a legacy [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires `v18.14.1` or higher.
+If you are using a legacy [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) (Xenial) on Netlify, make sure that your Node.js version is set. Astro requires `v18.17.1` or `v20.3.0` or higher.
 
 You can [specify your Node.js version in Netlify](https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript) using:
 - a [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) file in your base directory.

src/content/docs/en/guides/deploy/render.mdx

@@ -20,7 +20,7 @@ You can deploy your Astro project to [Render](https://render.com/), a service to
 4. Give your website a name, select the branch and specify the build command and publish directory
    - **build command:** `npm run build`
    - **publish directory:** `dist`
-   - **Environment variables (advanced)**: By default, Render uses Node.js 14.17.0, but Astro [requires a higher version](/en/install/auto/#prerequisites). Add an environment variable with a **Variable key** of `NODE_VERSION` and a **Value** of `18.14.1` or higher to tell Render to use a compatible Node.js version. Alternatively, add a [`.node-version`](https://render.com/docs/node-version) or [`.nvmrc`](https://render.com/docs/node-version) file to your project to specify a Node.js version.
+   - **Environment variables (advanced)**: By default, Render uses Node.js 14.17.0, but Astro [requires a higher version](/en/install/auto/#prerequisites). Add an environment variable with a **Variable key** of `NODE_VERSION` and a **Value** of  `v18.17.1` or `v20.3.0` or higher to tell Render to use a compatible Node.js version. Alternatively, add a [`.node-version`](https://render.com/docs/node-version) or [`.nvmrc`](https://render.com/docs/node-version) file to your project to specify a Node.js version.
 
 5. Click the **Create Static Site** button
 </Steps>

src/content/docs/en/guides/deploy/vercel.mdx

@@ -93,7 +93,3 @@ After your project has been imported and deployed, all subsequent pushes to bran
 You can use `vercel.json` to override the default behavior of Vercel and to configure additional settings. For example, you may wish to attach headers to HTTP responses from your Deployments. 
 
 <ReadMore>Learn more about [Vercel’s project configuration](https://vercel.com/docs/project-configuration).</ReadMore>
-
-### Upgrading to Astro 2.0
-
-Astro v2.0 drops support for Node 14, so make sure your project is using **Node `18.14.1` or later**. You can [define the Node.js version](https://vercel.com/changelog/node-js-version-now-customizable-in-the-project-settings) used during the Build Step and Serverless Functions from the General page under Project Settings.