Merge branch 'withastro:main' into main

src/components/starlight/Search.astro

@@ -46,7 +46,7 @@ const docSearchStrings = getDocSearchStrings(Astro);
 				// We transform the absolute URL into a relative URL to
 				// work better on localhost, preview URLS.
 				const url = new URL(item.url);
-				if (url.hash === '#overview') url.hash = '';
+				if (url.hash === '#_top') url.hash = '';
 				return {
 					...item,
 					url: url.href.replace(url.origin, ''),

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

@@ -74,7 +74,7 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm install -D prettier prettier-plugin-astro
+  pnpm add -D prettier prettier-plugin-astro
   ```
   </Fragment>
   <Fragment slot="yarn">

src/content/docs/de/guides/deploy/cloudflare.mdx

@@ -61,7 +61,7 @@ Nachdem du deine Assets hochgeladen hast, gibt dir Wrangler eine Vorschau-URL, m
 Damit die Vorschau funktioniert, musst du `wrangler` installieren
 
 ```bash
-pnpm install wrangler --save-dev
+pnpm add wrangler --save-dev
 ```
 
 Es ist dann möglich, das Vorschauskript zu aktualisieren, um `wrangler` anstelle des in Astro eingebauten Vorschau-Befehls auszuführen:

src/content/docs/de/guides/fonts.mdx

@@ -73,7 +73,7 @@ Das [Fontsource](https://fontsource.org/)-Projekt ermöglicht die Verwendung von
       </Fragment>
       <Fragment slot="pnpm">
       ```shell
-      pnpm install @fontsource/twinkle-star
+      pnpm add @fontsource/twinkle-star
       ```
       </Fragment>
       <Fragment slot="yarn">

src/content/docs/de/guides/rss.mdx

@@ -23,7 +23,7 @@ Das `@astrojs/rss`-Paket bietet Hilfsfunktionen zur Erzeugung von RSS-Feeds mith
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm install @astrojs/rss
+  pnpm add @astrojs/rss
   ```
   </Fragment>
   <Fragment slot="yarn">

src/content/docs/de/guides/typescript.mdx

@@ -46,7 +46,7 @@ Wenn du nicht VSCode verwendest, kannst du das [Astro TypeScript Plugin](https:/
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm install @astrojs/ts-plugin
+  pnpm add @astrojs/ts-plugin
   ```
   </Fragment>
   <Fragment slot="yarn">

src/content/docs/de/guides/upgrade-to/v2.mdx

@@ -28,10 +28,10 @@ Aktualisiere die Astro-Version deines Projekts mit deinem Paketmanager auf die n
   <Fragment slot="pnpm">
   ```shell
   # Upgrade auf Astro v2.x
-  pnpm install astro@latest
+  pnpm add astro@latest
 
   # Beispiel: React- und Tailwind-Integrationen aktualisieren
-  pnpm install @astrojs/react@latest @astrojs/tailwind@latest
+  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
   ```
   </Fragment>
   <Fragment slot="yarn">

src/content/docs/de/guides/upgrade-to/v3.mdx

@@ -28,10 +28,10 @@ Aktualisiere die Astro-Version deines Projekts mit deinem Paketmanager auf die n
   <Fragment slot="pnpm">
   ```shell
   # Upgrade auf Astro v3.x
-  pnpm install astro@latest
+  pnpm add astro@latest
 
   # Beispiel: React- und Tailwind-Integrationen aktualisieren 
-  pnpm install @astrojs/react@latest @astrojs/tailwind@latest
+  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
   ```
   </Fragment>
   <Fragment slot="yarn">
@@ -522,7 +522,7 @@ Astro v3.0 enthält jetzt standardmäßig Sharp als Bildverarbeitungsdienst und
 Bei Verwendung eines [strikten Paketmanagers](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) wie `pnpm` musst du möglicherweise Sharp manuell in dein Projekt installieren, obwohl es eine Abhängigkeit von Astro ist:
 
 ```bash
-pnpm install sharp
+pnpm add sharp
 ```
 :::
 

src/content/docs/de/reference/api-reference.mdx

@@ -900,7 +900,7 @@ Um die Textmarker-Komponente `Prism` zu verwenden, musst du zuerst das Paket `@a
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm install @astrojs/prism
+  pnpm add @astrojs/prism
   ```
   </Fragment>
   <Fragment slot="yarn">

src/content/docs/en/guides/authentication.mdx

@@ -0,0 +1,189 @@
+---
+title: Authentication
+description: An intro to authentication in Astro
+i18nReady: true
+---
+
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import ReadMore from '~/components/ReadMore.astro'
+
+Authentication and authorization are two security processes that help you control who has access to different parts of your website or app. Authentication is the process of verifying a vistor's identity, and authorization is the process of allowing visitors access to protected routes and resources.
+
+Authentication allows you to customize areas of your site for logged-in individuals and provides the greatest protection for personal or private information. Authentication libraries (e.g. [Lucia Auth](https://lucia-auth.com/), [Auth.js](https://authjs.dev/)) provide utilities for multiple authentication methods such as email sign-in and OAuth providers.
+
+:::tip
+There is no official authentication solution for Astro, but you can find [community "auth" integrations](https://astro.build/integrations/?search=auth) in the integrations directory.
+:::
+
+<ReadMore>See how to [add authentication with Supabase](/en/guides/backend/supabase/#adding-authentication-with-supabase) or [add authentication with Firebase](/en/guides/backend/google-firebase/#adding-authentication-with-firebase) in our dedicated guides for these backend services.</ReadMore>
+
+## Lucia
+
+Lucia is a framework-agnostic, session-based authentication library with great Astro support.
+
+### Installation
+
+Install Lucia using the package manager of your choice.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install lucia
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add lucia
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add lucia
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+### Configuration
+
+Use [Lucia's "Getting started in Astro"](https://lucia-auth.com/getting-started/astro) guide to initialize Lucia with an adapter and set up a database to store users and sessions.
+
+### Usage
+
+:::tip
+Follow one of Lucia's complete Astro tutorials to add [username and password authentication](https://lucia-auth.com/tutorials/username-and-password/astro) or [GitHub OAuth](https://lucia-auth.com/tutorials/username-and-password/astro) to your Astro project.
+:::
+
+### Next Steps
+
+- [Example Astro + Lucia OAuth project](https://github.com/lucia-auth/examples/tree/main/astro/github-oauth)
+- [Example Astro + Lucia username and password project](https://github.com/lucia-auth/examples/tree/main/astro/username-and-password)
+
+## Auth.js
+
+Auth.js is a framework agnostic solution for authentication. A community framework adapter [`auth-astro`](https://www.npmjs.com/package/auth-astro) is available for Astro.
+
+### Installation
+
+Use the `astro add` command for your preferred package manager to add the `astro-auth` integration.
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npx astro add auth-astro
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm astro add auth-astro
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn astro add auth-astro
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+#### Manual installation
+
+To install `astro-auth` manually, install the required package for your package manager:
+
+<PackageManagerTabs>
+  <Fragment slot="npm">
+  ```shell
+  npm install auth-astro
+  ```
+  </Fragment>
+  <Fragment slot="pnpm">
+  ```shell
+  pnpm add auth-astro @auth/core
+  ```
+  </Fragment>
+  <Fragment slot="yarn">
+  ```shell
+  yarn add auth-astro
+  ```
+  </Fragment>
+</PackageManagerTabs>
+
+Then, apply the integration to your `astro.config.*` file using the `integrations` property:
+
+```ts title="astro.config.mjs" ins={2,6}
+import { defineConfig } from 'astro/config';
+import auth from 'auth-astro';
+
+export default defineConfig({
+  // ...
+  integrations: [auth()],
+});
+```
+
+### Configuration
+
+Create an `auth.config.mjs` file in your project's root directory. Add any auth [providers](https://authjs.dev/getting-started/providers) or methods you wish to support, along with any environment variables they require.
+
+```ts title="auth.config.mjs"
+import GitHub from '@auth/core/providers/github';
+import { defineConfig } from 'auth-astro';
+
+export default defineConfig({
+	providers: [
+		GitHub({
+			clientId: import.meta.env.GITHUB_CLIENT_ID,
+			clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
+		}),
+	],
+});
+```
+
+Create a `.env` file in the root of your project if it does not already exist. Add the following two environment variables. `AUTH_SECRET` should be a private string with a minimum of 32 characters.
+
+```sh title=".env"
+AUTH_TRUST_HOST=true
+AUTH_SECRET=<my-auth-secret>
+```
+
+### Usage
+
+You can add sign-in and sign-out buttons using the `auth-astro/client` module in a script tag or client-side framework component.
+
+```astro title="src/pages/index.astro" {9}
+---
+import Layout from 'src/layouts/Base.astro';
+---
+<Layout>
+  <button id="login">Login</button>
+  <button id="logout">Logout</button>
+
+  <script>
+    const { signIn, signOut } = await import("auth-astro/client")
+    document.querySelector("#login").onclick = () => signIn("github")
+    document.querySelector("#logout").onclick = () => signOut()
+  </script>
+</Layout>
+```
+
+You can fetch the user's session using the `getSession` method.
+
+```astro title="src/pages/index.astro" {3,5}
+---
+import Layout from 'src/layouts/Base.astro';
+import { getSession } from 'auth-astro/server';
+
+const session = await getSession(Astro.request);
+---
+<Layout>
+  {
+    session ? (
+      <p>Welcome {session.user?.name}</p>
+    ) : (
+      <p>Not logged in</p>
+    )
+  }
+</Layout>
+```
+
+### Next Steps
+
+- [`auth-astro` on GitHub](https://github.com/nowaythatworked/auth-astro?tab=readme-ov-file#auth-astro)
+- [Auth.js documentation](https://authjs.dev/)

src/content/docs/en/guides/backend/xata.mdx

@@ -106,5 +106,5 @@ It's important to note the SDK needs to be regenerated everytime your schema cha
 
 
 ## Official Resources
-- [Xata Astro Starter](https://github.com/xataio/examples/tree/main/apps/starter-astro)
+- [Xata Astro Starter](https://github.com/xataio/examples/tree/main/apps/getting-started-astro)
 - [Xata Docs: Quick Start Guide](https://xata.io/docs/getting-started/quickstart-astro)

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

@@ -16,7 +16,7 @@ import Card from '~/components/ShowcaseCard.astro'
 
 1. **An Astro project**- If you’d like to start with a fresh Astro project, read the [installation guide](/en/install/auto/). This guide follows a simplified version of the [Astro Headless CMS Theme](https://astro.build/themes/details/cosmic-cms-blog/) with [Tailwind CSS](https://tailwindcss.com/) for styling.
 2. **A Cosmic account and Bucket** - [Create a free Cosmic account](https://app.cosmicjs.com/signup) if you don’t have one. After creating your account, you'll be prompted to create a new empty project. There's also a [Simple Astro Blog template](https://www.cosmicjs.com/marketplace/templates/simple-astro-blog) available (this is the same template as the Astro Headless CMS Theme) to automatically import all of the content used in this guide.
-3. **Your Cosmic API keys**  - From your Cosmic dasboard, you will need to locate both the **Bucket slug** and **Bucket read key** in order to connect to Cosmic.
+3. **Your Cosmic API keys**  - From your Cosmic dashboard, you will need to locate both the **Bucket slug** and **Bucket read key** in order to connect to Cosmic.
 
 ## Integrating Cosmic with Astro
 

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

@@ -110,7 +110,7 @@ const posts: Post[] = json.data.blogPosts;
 
 To set up a webhook in Netlify:
 
-1. Deploy your site to Netlify with [this guide](/en/guides/deploy/netlify/). Remember to add your `HYGRAPH_ENDPOINT` to the enviroment variables.
+1. Deploy your site to Netlify with [this guide](/en/guides/deploy/netlify/). Remember to add your `HYGRAPH_ENDPOINT` to the environment variables.
 
 2. Then Go to your Hygraph project dashboard and click on **Apps**. 
 

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

@@ -104,7 +104,7 @@ export default async function fetchApi<T>({
 
 This function requires an object with the following properties:
 
-1. `endpoint` - The enpoint you are fetching.
+1. `endpoint` - The endpoint you are fetching.
 2. `query` - The query parameters to add to the end of URL
 3. `wrappedByKey` - The `data` key in the object that wraps your `Response`.
 4. `wrappedByList` - A parameter to "unwrap" the list returned by Strapi, and return only the first item.

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

@@ -157,7 +157,7 @@ let [post] = await res.json();
 ---
 ```
 
-The `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url` property is returned, and can be used to display the featured image on each dinosuar page. (Replace `medium` with your desired image size.)
+The `_embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url` property is returned, and can be used to display the featured image on each dinosaur page. (Replace `medium` with your desired image size.)
 
 ```astro title="/src/pages/dinos/[slug].astro" {3}
 <Layout title={post.title.rendered}>