diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
index ecc799951bec5..1a4aa5d3efe58 100644
--- a/.github/workflows/deploy-preview.yml
+++ b/.github/workflows/deploy-preview.yml
@@ -1,6 +1,7 @@
name: Deploy Preview
on:
+ # zizmor: ignore[dangerous-triggers]
workflow_run:
workflows: ["Deploy"]
types: [completed]
@@ -23,6 +24,9 @@ jobs:
timeout-minutes: 10
permissions:
pull-requests: write
+ env:
+ HEAD_SHA: ${{ github.event.workflow_run.head_sha }}
+ RUN_URL: "${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}"
steps:
- name: Download PR metadata
uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
@@ -41,17 +45,17 @@ jobs:
- name: Comment deployment in progress
uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+ env:
+ PR_NUMBER: ${{ steps.metadata.outputs.pr_number }}
+ PREVIEW_URL: ${{ steps.metadata.outputs.preview_url }}
with:
script: |
- const prNumber = parseInt('${{ steps.metadata.outputs.pr_number }}', 10);
- const previewUrl = '${{ steps.metadata.outputs.preview_url }}';
- const commitSHA = '${{ github.event.workflow_run.head_sha }}';
- const runUrl = '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}';
+ const prNumber = parseInt(process.env.PR_NUMBER, 10);
const body = `**Preview deployment**\n\n`
+ `🔄 Deployment in progress...\n\n`
- + `- **Latest commit:** ${commitSHA}\n`
- + `- **Preview:** ${previewUrl}\n`
- + `- **Workflow run:** [View logs](${runUrl})`;
+ + `- **Latest commit:** ${process.env.HEAD_SHA}\n`
+ + `- **Preview:** ${process.env.PREVIEW_URL}\n`
+ + `- **Workflow run:** [View logs](${process.env.RUN_URL})`;
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
@@ -92,17 +96,17 @@ jobs:
- name: Comment deployment complete
if: success()
uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+ env:
+ PR_NUMBER: ${{ steps.metadata.outputs.pr_number }}
+ PREVIEW_URL: ${{ steps.metadata.outputs.preview_url }}
with:
script: |
- const prNumber = parseInt('${{ steps.metadata.outputs.pr_number }}', 10);
- const previewUrl = '${{ steps.metadata.outputs.preview_url }}';
- const commitSHA = '${{ github.event.workflow_run.head_sha }}';
- const runUrl = '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}';
+ const prNumber = parseInt(process.env.PR_NUMBER, 10);
const body = `**Preview deployment**\n\n`
+ `✅ Deployment complete!\n\n`
- + `- **Latest commit:** ${commitSHA}\n`
- + `- **Preview:** ${previewUrl}\n`
- + `- **Workflow run:** [View logs](${runUrl})`;
+ + `- **Latest commit:** ${process.env.HEAD_SHA}\n`
+ + `- **Preview:** ${process.env.PREVIEW_URL}\n`
+ + `- **Workflow run:** [View logs](${process.env.RUN_URL})`;
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
@@ -121,15 +125,15 @@ jobs:
- name: Comment deployment failed
if: failure()
uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+ env:
+ PR_NUMBER: ${{ steps.metadata.outputs.pr_number }}
with:
script: |
- const prNumber = parseInt('${{ steps.metadata.outputs.pr_number }}', 10);
- const commitSHA = '${{ github.event.workflow_run.head_sha }}';
- const runUrl = '${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}';
+ const prNumber = parseInt(process.env.PR_NUMBER, 10);
const body = `**Preview deployment**\n\n`
+ `❌ Deployment failed!\n\n`
- + `- **Latest commit:** ${commitSHA}\n`
- + `- **Workflow run:** [View logs](${runUrl})`;
+ + `- **Latest commit:** ${process.env.HEAD_SHA}\n`
+ + `- **Workflow run:** [View logs](${process.env.RUN_URL})`;
const { data: comments } = await github.rest.issues.listComments({
owner: context.repo.owner,
repo: context.repo.repo,
diff --git a/.github/workflows/lunaria.yml b/.github/workflows/lunaria.yml
index f951b3afb88d8..643bcbf9c481d 100644
--- a/.github/workflows/lunaria.yml
+++ b/.github/workflows/lunaria.yml
@@ -33,6 +33,6 @@ jobs:
uses: ./.github/actions/install
- name: Generate Lunaria Overview
- uses: lunariajs/action@4911ad0736d1e3b20af4cb70f5079aea2327ed8e # astro-docs
+ uses: lunariajs/action@e5ab09c3c8353fa80786d8c2149873ba3978a3a7 # v0.2.0
with:
token: ${{ secrets.FREDKBOT_GITHUB_TOKEN }}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a661afd021a08..efcd78b0134e2 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -160,7 +160,7 @@ git checkout -b add/partial-hydration-typo-fix
```
### Opening a PR
-One you have made your changes using any of the above methods, you’re ready to create a “Pull Request!”
+Once you have made your changes using any of the above methods, you’re ready to create a “Pull Request!”
This will let the Astro docs team know you have some changes to propose. At this point we can give you feedback and might request changes. For translations, we like to have at least one other person who knows the language you are translating into review the PR.
diff --git a/lunaria.config.ts b/lunaria.config.ts
index aaddd51d5dfa2..17741d053b718 100644
--- a/lunaria.config.ts
+++ b/lunaria.config.ts
@@ -1,3 +1,4 @@
+import { html } from '@lunariajs/core';
import { defineConfig } from '@lunariajs/core/config';
export default defineConfig({
@@ -132,4 +133,43 @@ export default defineConfig({
'i18nIgnore',
],
},
+ dashboard: {
+ title: 'Astro Docs Translation Status',
+ description:
+ 'Translation progress tracker for the Astro Docs site. See how much has been translated in your language and get involved!',
+ site: 'https://i18n.docs.astro.build/',
+ basesToHide: ['src/content/docs/en/', 'src/i18n/en/', 'src/content/docs/', 'src/content/'],
+ customCss: ['./scripts/lunaria/styles.css'],
+ favicon: {
+ external: [
+ { link: 'https://docs.astro.build/favicon.ico', type: 'image/x-icon' },
+ { link: 'https://docs.astro.build/favicon.svg', type: 'image/svg+xml' },
+ ],
+ },
+ ui: {
+ 'statusByLocale.heading': 'Translation progress by locale',
+ 'statusByLocale.outdatedLocalizationLink': 'outdated translation',
+ 'statusByLocale.incompleteLocalizationLink': 'incomplete translation',
+ 'statusByLocale.completeLocalization': 'This translation is complete, amazing job! 🎉',
+ 'statusByFile.heading': 'Translation status by file',
+ },
+ },
+ renderer: {
+ slots: {
+ head: () => html``,
+ afterTitle: () => html`
+
+ If you're interested in helping us translate
+ docs.astro.build into one of the languages listed
+ below, you've come to the right place! This auto-updating page always lists all the
+ content that could use your help right now.
+
+
+ Before starting, please read our
+ i18n Guide
+ to learn about our translation process and how you can get involved.
+
- If you're interested in helping us translate
- docs.astro.build into one of the languages listed below,
- you've come to the right place! This auto-updating page always lists all the content that could
- use your help right now.
-
-
- Before starting, please read our
- i18n Guide
- to learn about our translation process and how you can get involved.
-
-
-
-
-
diff --git a/src/components/RightSidebar/RandomizedAd.astro b/src/components/RightSidebar/RandomizedAd.astro
index 5540a7bfd8cd0..9afd5b199fe80 100644
--- a/src/components/RightSidebar/RandomizedAd.astro
+++ b/src/components/RightSidebar/RandomizedAd.astro
@@ -1,12 +1,10 @@
---
import ScrimbaAd from './ScrimbaAd.astro';
import LearnAstroAd from './LearnAstroAd.astro';
-import AstroJobsAd from './AstroJobsAd.astro';
const ads = [
- { component: ScrimbaAd, weight: 0.4 },
- { component: LearnAstroAd, weight: 0.4 },
- { component: AstroJobsAd, weight: 0.2 },
+ { component: ScrimbaAd, weight: 0.5 },
+ { component: LearnAstroAd, weight: 0.5 },
];
const totalWeight = ads.reduce((sum, ad) => sum + ad.weight, 0);
let random = Math.random() * totalWeight;
diff --git a/src/content/docs/de/recipes/tailwind-rendered-markdown.mdx b/src/content/docs/de/recipes/tailwind-rendered-markdown.mdx
new file mode 100644
index 0000000000000..a301844b335af
--- /dev/null
+++ b/src/content/docs/de/recipes/tailwind-rendered-markdown.mdx
@@ -0,0 +1,101 @@
+---
+title: Gestalte dein gerendertes Markdown mit dem Tailwind-CSS Typography-Plugin
+description: Erfahre, wie du @tailwind/typography nutzt, um das Aussehen deines gerenderten Markdowns zu gestalten.
+i18nReady: true
+sidebar:
+ label: Nutzung des Tailwind Typography-Plugins
+type: recipe
+---
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+
+Du kannst das Typography-Plugin von [Tailwind](https://tailwindcss.com) nutzen, um das Aussehen von gerenderten Markdown-Inhalten aus Quellen wie etwa [**Inhaltssammlungen**](/de/guides/content-collections/) von Astro zu gestalten.
+
+In diesem Rezept erfährst du, wie du eine wiederverwendbare Astro-Komponente erstellst, um das Aussehen deiner Markdown-Inhalte mithilfe der Utility-Klassen von Tailwind zu gestalten.
+
+## Voraussetzungen
+
+Ein Astro-Projekt, welches:
+
+ - das [Vite-Plugin von Tailwind](/de/guides/styling/#tailwind) installiert hat.
+ - Astros [Sammlungen von Inhalten](/de/guides/content-collections/) verwendet.
+
+## Einrichtung des `@tailwindcss/typography`-Plugins
+
+Installiere zunächst das `@tailwindcss/typography`-Plugin unter Nutzung des von dir bevorzugten Paketmanagers.
+
+
+
+ ```shell
+ npm install -D @tailwindcss/typography
+ ```
+
+
+ ```shell
+ pnpm add -D @tailwindcss/typography
+ ```
+
+
+ ```shell
+ yarn add --dev @tailwindcss/typography
+ ```
+
+
+
+Füge nun das Paket als Plugin in deine Tailwind Konfigurationsdatei ein.
+
+```css title="src/styles/global.css" ins={2}
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+```
+
+## Anleitung
+
+
+1. Erstelle eine ``-Komponente, um ein umschließendes `
`-Element mit einem `` für Ihren gerenderten Markdown-Text bereitzustellen. Fügen Sie die Stilklasse `prose` zusammen mit den gewünschten [Tailwind-Elementwandlern](https://tailwindcss.com/docs/typography-plugin#element-modifiers) im übergeordneten `
+ ```
+ :::tip
+ Das `@tailwindcss/typography`-Plugin nutzt [**Elementwandler**](https://tailwindcss.com/docs/typography-plugin#element-modifiers) um das Aussehen von untergeordneten Elementen innerhalb eines mit der `prose`-Klasse ausgezeichneten Containers zu gestalten.
+
+ Diese Elementwandler folgen der folgenden allgemeinen Syntax:
+
+ ```
+ prose-[Element]:anzuwendende-Klasse
+ ```
+
+ Beispielsweise weist `prose-h1:font-bold` allen `
`-Tags die Tailwind-Klasse `font-bold` zu.
+ :::
+
+2. Rufen Sie Ihren Collection-Eintrag auf der Seite ab, auf der Sie Ihr Markdown rendern möchten. Übergeben Sie die Komponente `` aus `await render(entry)` als untergeordnete Komponente an ``, um Ihren Markdown-Inhalt mit Tailwind-Stilen zu umgeben.
+
+ ```astro title="src/pages/index.astro"
+ ---
+ import Prose from '../components/Prose.astro';
+ import Layout from '../layouts/Layout.astro';
+ import { getEntry, render } from 'astro:content';
+
+ const entry = await getEntry('collection', 'entry');
+ const { Content } = await render(entry);
+ ---
+
+
+
+
+
+ ```
+
+
+## Ressourcen
+
+- [Dokumentation zum Tailwind Typography-Plugin (EN)](https://tailwindcss.com/docs/typography-plugin)
diff --git a/src/content/docs/en/guides/authentication.mdx b/src/content/docs/en/guides/authentication.mdx
index 25544d2ac4689..6c38149ed187a 100644
--- a/src/content/docs/en/guides/authentication.mdx
+++ b/src/content/docs/en/guides/authentication.mdx
@@ -4,7 +4,7 @@ description: An intro to authentication in Astro
i18nReady: true
---
-import { Steps } from '@astrojs/starlight/components'
+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import UIFrameworkTabs from '~/components/tabs/UIFrameworkTabs.astro'
import ReadMore from '~/components/ReadMore.astro'
@@ -66,12 +66,10 @@ Follow the [Better Auth Astro Guide](https://www.better-auth.com/docs/integratio
### Usage
-Better Auth offers a `createAuthClient` helper for various frameworks, including Vanilla JS, React, Vue, Svelte, and Solid.
+Better Auth offers a `createAuthClient()` helper for various frameworks, including Vanilla JS, React, Vue, Svelte, and Solid.
For example, to create a client for React, import the helper from `'better-auth/react'`:
-
-
```ts title="src/lib/auth-client.ts"
@@ -116,19 +114,26 @@ Once your client is set up, you can use it to authenticate users in your Astro c
```astro title="src/pages/index.astro"
---
-import Layout from 'src/layouts/Base.astro';
+import Layout from "../layouts/Base.astro";
---
+
```
@@ -137,12 +142,12 @@ You can then use the `auth` object to get the user's session data in your server
```astro title="src/pages/index.astro"
---
-import { auth } from "../../../lib/auth"; // import your Better Auth instance
+import { auth } from "../lib/auth"; // import your Better Auth instance
export const prerender = false; // Not needed in 'server' mode
-
+
const session = await auth.api.getSession({
- headers: Astro.request.headers,
+ headers: Astro.request.headers,
});
---
@@ -152,9 +157,9 @@ const session = await auth.api.getSession({
You can also use the `auth` object to protect your routes. The following example uses [Astro's advanced routing](/en/guides/routing/#advanced-routing) with [Hono](https://hono.dev/) to require an authenticated session for every route under `/dashboard`, redirecting to the home page otherwise:
```ts title="src/fetch.ts"
-import { Hono } from "hono";
+import { Hono, type Context, type Next } from "hono";
import { astro } from "astro/hono";
-import { auth } from "../auth"; // import your Better Auth instance
+import { auth } from "./lib/auth"; // import your Better Auth instance
const app = new Hono();
@@ -167,12 +172,14 @@ app.use(astro());
export default app;
-async function requireAuth(c, next) {
- const session = await auth.api.getSession({ headers: c.req.raw.headers });
- if (!session) {
- return c.redirect("/");
- }
- return next();
+async function requireAuth(c: Context, next: Next) {
+ const session = await auth.api.getSession({
+ headers: c.req.raw.headers,
+ });
+ if (!session) {
+ return c.redirect("/");
+ }
+ return next();
}
```
@@ -225,38 +232,67 @@ Clerk provides components that allow you to control the visibility of pages base
```astro title="src/pages/index.astro"
---
-import Layout from 'src/layouts/Base.astro';
-import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
+import Layout from "../layouts/Base.astro";
+import { Show, UserButton, SignInButton } from "@clerk/astro/components";
export const prerender = false; // Not needed in 'server' mode
---
-
-
-
-
-
-
+
+
+
+
+
+
```
-Clerk also allows you to protect routes on the server using middleware. Specify which routes are protected, and prompt unauthenticated users to sign in:
+Clerk also allows you to protect routes on the server using middleware:
-```ts title="src/middleware.ts"
-import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
+
-const isProtectedRoute = createRouteMatcher([
- '/dashboard(.*)',
- '/forum(.*)',
-]);
+1. Set `clerkMiddleware()` as the `onRequest` handler in your middleware:
-export const onRequest = clerkMiddleware((auth, context) => {
- if (!auth().userId && isProtectedRoute(context.request)) {
- return auth().redirectToSignIn();
- }
-});
-```
+ ```ts title="src/middleware.ts"
+ import { clerkMiddleware } from "@clerk/astro/server";
+
+ export const onRequest = clerkMiddleware({
+ /* options */
+ });
+ ```
+
+2. Access the authentication state in your pages and API routes with `locals.auth()`. This allows you to check if a user is authenticated and take appropriate actions (e.g. redirecting to the sign-in page or returning a different response).
+
+
+
+ ```astro title="src/pages/dashboard.astro"
+ ---
+ const { isAuthenticated, redirectToSignIn } = Astro.locals.auth();
+
+ if (!isAuthenticated) return redirectToSignIn();
+ ---
+
+
Dashboard
+ ```
+
+
+ ```ts title="src/pages/api/data.ts"
+ import type { APIRoute } from "astro";
+
+ export const GET: APIRoute = ({ locals }) => {
+ const { isAuthenticated, userId } = locals.auth();
+
+ if (!isAuthenticated) {
+ return new Response("Unauthorized", { status: 401 });
+ }
+
+ return Response.json({ userId });
+ };
+ ```
+
+
+
### Next Steps
@@ -286,7 +322,9 @@ export const onRequest = clerkMiddleware((auth, context) => {
## Scalekit
-[Scalekit](https://scalekit.com/) is an authentication platform built for B2B and AI applications. It provides social login, enterprise SSO, magic links, and more — managing the full OAuth 2.0 / OIDC flow so you get back tokens and a user profile without building any login UI. A single Scalekit environment supports multiple applications, so users authenticate once and share the same session across all your properties (for example, `app.yourcompany.com` and `docs.yourcompany.com`).
+[Scalekit](https://scalekit.com/) is an authentication platform for B2B and AI applications. It manages the full OAuth 2.0 and OIDC flow, supporting methods such as social login, enterprise SSO, and magic links. It then returns tokens and a user profile without requiring a custom login UI.
+
+A single Scalekit environment can support multiple applications. This allows you to authenticate once and share the same session across all your properties (e.g. `app.yourcompany.com` and `docs.yourcompany.com`).
### Guide
diff --git a/src/content/docs/en/guides/backend/firebase.mdx b/src/content/docs/en/guides/backend/firebase.mdx
index 9c0172a591926..0e36507d606aa 100644
--- a/src/content/docs/en/guides/backend/firebase.mdx
+++ b/src/content/docs/en/guides/backend/firebase.mdx
@@ -233,6 +233,7 @@ export const GET: APIRoute = async ({ request, cookies, redirect }) => {
cookies.set("__session", sessionCookie, {
path: "/",
+ maxAge: fiveDays / 1000,
});
return redirect("/dashboard");
diff --git a/src/content/docs/en/guides/build-with-ai.mdx b/src/content/docs/en/guides/build-with-ai.mdx
index caa15ed7bdd35..fd8877adec096 100644
--- a/src/content/docs/en/guides/build-with-ai.mdx
+++ b/src/content/docs/en/guides/build-with-ai.mdx
@@ -362,11 +362,11 @@ The same technology that powers Astro's MCP server is also available as a chatbo
-When an AI coding agent is detected, `astro dev` and, since v7.2.0, `astro preview` automatically start the server as a detached background process. This prevents the server from blocking the agent's terminal and allows it to continue working while the server runs.
+When an AI coding agent is detected on macOS and Linux, `astro dev` and, since v7.2.0, `astro preview` automatically start the server as a detached background process. This prevents the server from blocking the agent's terminal and allows it to continue working while the server runs.
-A lock file (`.astro/dev.json` or `.astro/preview.json`) is written when the server starts, recording the server's URL, port, and PID. This prevents duplicate servers from being started for the same project.
+On Windows, or without an AI coding agent, the server starts in the foreground and logs to the terminal. You can still opt in explicitly by passing the [`--background` flag](/en/reference/cli-reference/#--background).
-If you are not using an AI coding agent, the server starts in the foreground process and logs to the terminal.
+A lock file (`.astro/dev.json` or `.astro/preview.json`) is written when the server starts, recording the server's URL, port, and PID. This prevents duplicate servers from being started for the same project.
To opt out of automatic background mode, set the `ASTRO_DEV_BACKGROUND` or `ASTRO_PREVIEW_BACKGROUND` environment variable before running the command:
diff --git a/src/content/docs/en/guides/cms/apostrophecms.mdx b/src/content/docs/en/guides/cms/apostrophecms.mdx
index 614d7ecc64a07..0543c7f873ed9 100644
--- a/src/content/docs/en/guides/cms/apostrophecms.mdx
+++ b/src/content/docs/en/guides/cms/apostrophecms.mdx
@@ -391,24 +391,24 @@ const { page, pieces } = Astro.props.aposData;
To display individual blog posts, create a `BlogShow.astro` file in the Astro project `src/templates` folder with the following code:
-This component uses the `` component to display any widgets added to the `content` area and the `authorName` and `publicationDate` content entered into the fields of the same names.
+This component uses the `` component to display any widgets added to the `main` area and the `authorName` and `publicationDate` content entered into the fields of the same names.
```js title="src/templates/BlogShow.astro"
---
-import AposArea from '@apostrophecms/apostrophe-astro/components/AposArea.astro';
-import dayjs from 'dayjs';
+import AposArea from "@apostrophecms/apostrophe-astro/components/AposArea.astro";
+import dayjs from "dayjs";
const { page, piece } = Astro.props.aposData;
const { main } = piece;
---
-
{ piece.title }
-
Created by: { piece.authorName }
+
{piece.title}
+
Created by: {piece.authorName}
- Released On { dayjs(piece.publicationDate).format('MMMM D, YYYY') }
+ Released On {dayjs(piece.publicationDate).format("MMMM D, YYYY")}
-
+
```
diff --git a/src/content/docs/en/guides/cms/builderio.mdx b/src/content/docs/en/guides/cms/builderio.mdx
index 24202be12d448..e00f9d7a2635e 100644
--- a/src/content/docs/en/guides/cms/builderio.mdx
+++ b/src/content/docs/en/guides/cms/builderio.mdx
@@ -199,9 +199,8 @@ For more ideas, read [Builder's troubleshooting guide](https://www.builder.io/c/
Add the following content to `src/pages/index.astro` in order to fetch and display a list of all post titles, each linking to its own page:
-```astro title="src/pages/index.astro" {9}
+```astro title="src/pages/index.astro" {8}
---
-
const builderAPIpublicKey = import.meta.env.BUILDER_API_PUBLIC_KEY;
const builderModel = import.meta.env.BUILDER_BLOGPOST_MODEL;
@@ -223,16 +222,15 @@ const { results: posts } = await fetch(