Merge remote-tracking branch 'upstream/main'

.changeset/calm-houses-carry.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+fix(astro): add support for `src/content/config.mts` files

.changeset/chatty-walls-happen.md

@@ -1,5 +0,0 @@
----
-'astro': patch
----
-
-Fixed a case where dynamic imports tried to preload inlined stylesheets.

.changeset/empty-rings-bow.md

@@ -1,5 +0,0 @@
----
-'astro': patch
----
-
-Fixes remote assets caching logic to not use expired assets

.changeset/fair-countries-admire.md

@@ -1,5 +0,0 @@
----
-'@astrojs/svelte': patch
----
-
-Removed vite warnings.

.changeset/friendly-clocks-act.md

@@ -1,6 +0,0 @@
----
-'create-astro': patch
-'astro': patch
----
-
-Support detecting Bun when logging messages with package manager information.

.changeset/gold-weeks-hammer.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Minify the HTML of the redicts emitted during the build.

.changeset/gorgeous-dancers-divide.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Do not add type="text/css" to inline style tag

.changeset/grumpy-hotels-heal.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Prevent client:only styles from being removed in dev (View Transitions)

.changeset/hip-cats-jump.md

@@ -1,5 +0,0 @@
----
-'astro': patch
----
-
-Fix missing type for `imageConfig` export from `astro:assets`

.changeset/itchy-clouds-design.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+chore: correct description of `attribute` option in `scopedStyleStrategy`

.changeset/modern-guests-float.md

@@ -1,5 +0,0 @@
----
-'@astrojs/vercel': patch
----
-
-Fix serverless function naming conflicts for routes with identical filenames but different directory structures

.changeset/poor-pears-wash.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix lang unspecified code blocks (markdownlint MD040)

.changeset/smart-dragons-taste.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/cloudflare': minor
+---
+
+Add support for Cloudflare Runtime (env vars, caches and req object), using `astro dev`

.changeset/spotty-glasses-grin.md

@@ -1,5 +0,0 @@
----
-'@astrojs/mdx': patch
----
-
-Add location data to MDX compile errors

.changeset/spotty-tools-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+fix(types): make `image.service` optional

.changeset/twelve-cars-tell.md

@@ -1,5 +0,0 @@
----
-'astro': patch
----
-
-Fix markdown page HMR

.changeset/weak-kids-roll.md

@@ -1,5 +0,0 @@
----
-'astro': patch
----
-
-Fix scroll position when navigating back from page w/o ViewTransitions

.changeset/witty-readers-behave.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bugfixes for back navigation in the view transition client-side router

.github/workflows/ci.yml

@@ -108,7 +108,7 @@ jobs:
     strategy:
       matrix:
         OS: [ubuntu-latest]
-        NODE_VERSION: [18, 20]
+        NODE_VERSION: [18, 20.5.1]
         include:
           - os: macos-latest
             NODE_VERSION: 18

.github/workflows/cleanup-cache.yml

@@ -1,11 +1,12 @@
 name: Cleanup cache
 
 on:
+  schedule:
+    - cron: "0 11 * * *"
   pull_request:
     types:
       - closed
 
-# Workflow copied from https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
 jobs:
   cleanup:
     runs-on: ubuntu-latest
@@ -13,7 +14,15 @@ jobs:
       - name: Check out code
         uses: actions/checkout@v3
 
-      - name: Cleanup
+      - name: Cleanup caches older than 5 days
+        if: github.event_name == 'schedule'
+        uses: MyAlbum/purge-cache@v2
+        with:
+          max-age: 432000
+
+      # https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows#force-deleting-cache-entries
+      - name: Cleanup on PR close
+        if: github.event_name == 'pull_request'
         run: |
           gh extension install actions/gh-actions-cache
           

.prettierignore

@@ -1,10 +1,3 @@
-# Ignoring these files for now due to https://github.com/withastro/compiler/issues/585
-examples/basics/src/layouts
-examples/with-nanostores/src/layouts
-
-# Ignoring this file for now due to https://github.com/withastro/compiler/issues/485
-packages/markdown/component/Markdown.astro
-
 # Benchmark artifacts
 benchmark/projects/
 benchmark/results/

.prettierrc.cjs

@@ -1,24 +0,0 @@
-// Heads up: This file should be renamed to `.cjs`, however if we did that, changesets wouldn't be able to load it
-module.exports = {
-  printWidth: 100,
-  semi: true,
-  singleQuote: true,
-  tabWidth: 2,
-  trailingComma: 'es5',
-  useTabs: true,
-  plugins: ['prettier-plugin-astro'],
-  overrides: [
-    {
-      files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
-      options: {
-        useTabs: false,
-      },
-    },
-    {
-      files: ['**/*.astro'],
-      options: {
-        parser: 'astro',
-      },
-    },
-  ],
-};

README.md

@@ -83,7 +83,7 @@ Several official projects are maintained outside of this repo:
 
 ## Sponsors
 
-Astro is generously supported by Netlify, Storyblok, and several other amazing organizations.
+Astro is free, open source software made possible by these wonderful sponsors.
 
 [❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
 
@@ -91,7 +91,7 @@ Astro is generously supported by Netlify, Storyblok, and several other amazing o
   <a target="_blank" href="https://github.com/sponsors/withastro">
 
 [![Astro's sponsors.](https://astro.build/sponsors.png "Astro's sponsors.
-Platinum sponsors: Netlify, storyblok, Vercel, Ship Shape, Google Chrome
+Platinum sponsors: Vercel, storyblok, Netlify, Ship Shape, Google Chrome
 Gold sponsors: ‹div›RIOTS, DEEPGRAM, Transloadit, CloudCannon
 Sponsors: Monogram, Qoddi, Dimension")](https://github.com/sponsors/withastro)
 

examples/README.md

@@ -2,7 +2,7 @@
 
 The easiest way to check out one of these examples on your machine is by running this command in an empty directory:
 
-```
+```sh
 npm create astro@latest -- --template [EXAMPLE_NAME]
 ```
 
@@ -10,12 +10,12 @@ npm create astro@latest -- --template [EXAMPLE_NAME]
 
 Visit [awesome-astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm create astro@latest` to check out any community examples:
 
-```
+```sh
 npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]
 ```
 
 Paths to examples nested inside of a repo are also supported:
 
-```
+```sh
 npm create astro@latest -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
 ```

examples/basics/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Basics
 
-```
+```sh
 npm create astro@latest -- --template basics
 ```
 
@@ -16,7 +16,7 @@ npm create astro@latest -- --template basics
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 │   └── favicon.svg

examples/basics/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/basics/src/layouts/Layout.astro

@@ -6,11 +6,11 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description">
+		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="generator" content={Astro.generator} />
@@ -25,15 +25,27 @@ const { title } = Astro.props;
 		--accent: 136, 58, 234;
 		--accent-light: 224, 204, 250;
 		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+		--accent-gradient: linear-gradient(
+			45deg,
+			rgb(var(--accent)),
+			rgb(var(--accent-light)) 30%,
+			white 60%
+		);
 	}
 	html {
 		font-family: system-ui, sans-serif;
-		background: #13151A;
+		background: #13151a;
 		background-size: 224px;
 	}
 	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+		font-family:
-			Bitstream Vera Sans Mono, Courier New, monospace;
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
 	}
 </style>

examples/blog/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Blog
 
-```
+```sh
 npm create astro@latest -- --template blog
 ```
 
@@ -25,7 +25,7 @@ Features:
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 ├── public/
 ├── src/
 │   ├── components/

examples/blog/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/mdx": "^1.0.3",
     "@astrojs/rss": "^3.0.0",
     "@astrojs/sitemap": "^3.0.0",
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/blog/src/pages/blog/index.astro

@@ -11,7 +11,7 @@ const posts = (await getCollection('blog')).sort(
 );
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />

examples/blog/src/pages/index.astro

@@ -5,7 +5,7 @@ import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
@@ -16,14 +16,14 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 			<h1>🧑‍🚀 Hello, Astronaut!</h1>
 			<p>
 				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
+				template serves as a lightweight, minimally-styled starting point for anyone looking to
-				a personal website, blog, or portfolio with Astro.
+				build a personal website, blog, or portfolio with Astro.
 			</p>
 			<p>
 				This template comes with a few integrations already configured in your
 				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
+				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like
-				React, or Vue to your project.
+				Tailwind, React, or Vue to your project.
 			</p>
 			<p>Here are a few ideas on how to get started with the template:</p>
 			<ul>

examples/component/README.md

@@ -2,7 +2,7 @@
 
 This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
 
-```
+```sh
 npm create astro@latest -- --template component
 ```
 
@@ -14,7 +14,7 @@ npm create astro@latest -- --template component
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── index.ts
 ├── src

examples/component/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   },
   "peerDependencies": {
     "astro": "^2.0.0-beta.0"

examples/deno/README.md

@@ -4,7 +4,7 @@
 [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/deno)
 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/deno/devcontainer.json)
 
-```
+```sh
 npm create astro@latest -- --template deno
 ```
 
@@ -16,7 +16,7 @@ npm create astro@latest -- --template deno
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 │   └── favicon.svg

examples/deno/package.json

@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   },
   "devDependencies": {
     "@astrojs/deno": "^5.0.0"

examples/deno/src/components/Layout.astro

@@ -6,7 +6,7 @@ interface Props {
 const { title } = Astro.props as Props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -46,8 +46,15 @@ const { title } = Astro.props as Props;
 			}
 
 			:global(code) {
-				font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+				font-family:
-					Bitstream Vera Sans Mono, Courier New, monospace;
+					Menlo,
+					Monaco,
+					Lucida Console,
+					Liberation Mono,
+					DejaVu Sans Mono,
+					Bitstream Vera Sans Mono,
+					Courier New,
+					monospace;
 			}
 		</style>
 	</body>

examples/framework-alpine/README.md

@@ -1,6 +1,6 @@
 # Astro + AlpineJS Example
 
-```
+```sh
 npm create astro@latest -- --template framework-alpine
 ```
 

examples/framework-alpine/package.json

@@ -14,6 +14,6 @@
     "@astrojs/alpinejs": "^0.3.0",
     "@types/alpinejs": "^3.7.2",
     "alpinejs": "^3.12.3",
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/framework-lit/README.md

@@ -1,6 +1,6 @@
 # Astro + Lit Example
 
-```
+```sh
 npm create astro@latest -- --template framework-lit
 ```
 

examples/framework-lit/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/lit": "^3.0.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "lit": "^2.8.0"
   }
 }

examples/framework-lit/src/pages/index.astro

@@ -7,7 +7,7 @@ import { MyCounter } from '../components/my-counter.js';
 // https://docs.astro.build/core-concepts/astro-components/
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

examples/framework-multiple/README.md

@@ -1,6 +1,6 @@
 # Kitchen Sink: Microfrontends with Astro
 
-```
+```sh
 npm create astro@latest -- --template framework-multiple
 ```
 

examples/framework-multiple/package.json

@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@astrojs/preact": "^3.0.0",
-    "@astrojs/react": "^3.0.0",
+    "@astrojs/react": "^3.0.2",
-    "@astrojs/solid-js": "^3.0.0",
+    "@astrojs/solid-js": "^3.0.1",
-    "@astrojs/svelte": "^4.0.0",
+    "@astrojs/svelte": "^4.0.2",
     "@astrojs/vue": "^3.0.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "preact": "^10.17.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/framework-preact/README.md

@@ -1,6 +1,6 @@
 # Astro + Preact Example
 
-```
+```sh
 npm create astro@latest -- --template framework-preact
 ```
 

examples/framework-preact/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/preact": "^3.0.0",
     "@preact/signals": "^1.2.1",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "preact": "^10.17.1"
   }
 }

examples/framework-react/README.md

@@ -1,6 +1,6 @@
 # Astro + React Example
 
-```
+```sh
 npm create astro@latest -- --template framework-react
 ```
 

examples/framework-react/package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.0",
+    "@astrojs/react": "^3.0.2",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

examples/framework-solid/README.md

@@ -1,6 +1,6 @@
 # Astro + Solid.js Example
 
-```
+```sh
 npm create astro@latest -- --template framework-solid
 ```
 

examples/framework-solid/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^3.0.0",
+    "@astrojs/solid-js": "^3.0.1",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "solid-js": "^1.7.11"
   }
 }

examples/framework-svelte/README.md

@@ -1,6 +1,6 @@
 # Astro + Svelte Example
 
-```
+```sh
 npm create astro@latest -- --template framework-svelte
 ```
 

examples/framework-svelte/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^4.0.0",
+    "@astrojs/svelte": "^4.0.2",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "svelte": "^4.2.0"
   }
 }

examples/framework-vue/README.md

@@ -1,6 +1,6 @@
 # Astro + Vue Example
 
-```
+```sh
 npm create astro@latest -- --template framework-vue
 ```
 

examples/framework-vue/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@astrojs/vue": "^3.0.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "vue": "^3.3.4"
   }
 }

examples/hackernews/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Hackernews
 
-```
+```sh
 npm create astro@latest -- --template hackernews
 ```
 
@@ -14,7 +14,7 @@ npm create astro@latest -- --template hackernews
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 │   └── favicon.svg

examples/hackernews/package.json

@@ -12,6 +12,6 @@
   },
   "dependencies": {
     "@astrojs/node": "^6.0.0",
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/integration/README.md

@@ -2,7 +2,7 @@
 
 This is a template for an Astro integration. Use this template for writing integrations to use in multiple projects or publish to NPM.
 
-```
+```sh
 npm create astro@latest -- --template integration
 ```
 
@@ -14,7 +14,7 @@ npm create astro@latest -- --template integration
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── index.ts
 ├── tsconfig.json

examples/integration/package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   },
   "peerDependencies": {
     "astro": "^2.0.0-beta.0"

examples/middleware/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@astrojs/node": "^6.0.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "html-minifier": "^4.0.0"
   }
 }

examples/middleware/src/components/Card.astro

@@ -30,7 +30,9 @@ const { href, title, body } = Astro.props;
 		border-radius: 0.6rem;
 		background-position: 100%;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -2px rgba(0, 0, 0, 0.1);
 	}
 
 	.link-card > a {

examples/middleware/src/layouts/Layout.astro

@@ -6,7 +6,7 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -29,7 +29,14 @@ const { title } = Astro.props;
 		background-color: #f6f6f6;
 	}
 	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+		font-family:
-			Bitstream Vera Sans Mono, Courier New, monospace;
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
 	}
 </style>

examples/minimal/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Minimal
 
-```
+```sh
 npm create astro@latest -- --template minimal
 ```
 
@@ -14,7 +14,7 @@ npm create astro@latest -- --template minimal
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 ├── src/

examples/minimal/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/minimal/src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <html lang="en">

examples/non-html-pages/README.md

@@ -4,7 +4,7 @@ Documentation for "Non-HTML Pages":
 
 https://docs.astro.build/en/core-concepts/endpoints/#static-file-endpoints
 
-```
+```sh
 npm create astro@latest -- --template non-html-pages
 ```
 
@@ -18,7 +18,7 @@ npm create astro@latest -- --template non-html-pages
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 ├── src/

examples/non-html-pages/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/portfolio/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Portfolio
 
-```
+```sh
 npm create astro@latest -- --template portfolio
 ```
 

examples/portfolio/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/portfolio/src/components/Nav.astro

@@ -321,7 +321,9 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		.link {
 			padding: 0.5rem 1rem;
 			border-radius: 999rem;
-			transition: color var(--theme-transition), background-color var(--theme-transition);
+			transition:
+				color var(--theme-transition),
+				background-color var(--theme-transition);
 		}
 
 		.link:hover,

examples/portfolio/src/components/ThemeToggle.astro

@@ -54,7 +54,9 @@ import Icon from './Icon.astro';
 	@media (prefers-reduced-motion: no-preference) {
 		.icon,
 		.icon.light::before {
-			transition: transform var(--theme-transition), color var(--theme-transition);
+			transition:
+				transform var(--theme-transition),
+				color var(--theme-transition);
 		}
 	}
 

examples/portfolio/src/layouts/BaseLayout.astro

@@ -92,13 +92,18 @@ const { title, description } = Astro.props;
 				min-height: 100%;
 				isolation: isolate;
 				background:
-					/*noise*/ url('/assets/backgrounds/noise.png') top center/220px repeat,
+					/*noise*/
+					url('/assets/backgrounds/noise.png') top center/220px repeat,
 					/*footer*/ var(--bg-image-footer) bottom center/var(--bg-gradient-size) no-repeat,
 					/*header1*/ var(--bg-image-main-curves) top center/var(--bg-gradient-size) no-repeat,
 					/*header2*/ var(--bg-image-main) top center/var(--bg-gradient-size) no-repeat,
 					/*base*/ var(--gray-999);
-				background-blend-mode: /*noise*/ overlay, /*footer*/ var(--bg-blend-mode),
+				background-blend-mode: /*noise*/
-					/*header1*/ var(--bg-svg-blend-mode), /*header2*/ normal, /*base*/ normal;
+					overlay,
+					/*footer*/ var(--bg-blend-mode),
+					/*header1*/ var(--bg-svg-blend-mode),
+					/*header2*/ normal,
+					/*base*/ normal;
 			}
 			@media (forced-colors: active) {
 				/* Deactivate custom backgrounds for high contrast users. */

examples/portfolio/src/pages/about.astro

@@ -25,9 +25,10 @@ import Hero from '../components/Hero.astro';
 				<div class="content">
 					<p>
 						Lorem ipsum dolor sit amet, <a href="https://astro.build/">Astro</a> makes people happy.
-						Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl condimentum
+						Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin nibh nisl
-						id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu odio ut sem nulla
+						condimentum id venenatis a condimentum vitae. Dapibus ultrices in iaculis nunc. Arcu
-						pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare.
+						odio ut sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum
+						dui faucibus in ornare.
 					</p>
 					<p>
 						Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Eget gravida cum sociis

examples/portfolio/src/pages/index.astro

@@ -169,8 +169,10 @@ const projects = (await getCollection('work'))
 		aspect-ratio: calc(2.25 / var(--bg-scale));
 		top: 0;
 		transform: translateY(-75%) translateX(-50%);
-		background: url('/assets/backgrounds/noise.png') top center/220px repeat,
+		background:
-			var(--hero-bg) center center / var(--bg-gradient-size) no-repeat, var(--gray-999);
+			url('/assets/backgrounds/noise.png') top center/220px repeat,
+			var(--hero-bg) center center / var(--bg-gradient-size) no-repeat,
+			var(--gray-999);
 		background-blend-mode: overlay, normal, normal, normal;
 		mix-blend-mode: var(--bg-blend-mode);
 		z-index: -1;

examples/ssr/package.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@astrojs/node": "^6.0.0",
-    "@astrojs/svelte": "^4.0.0",
+    "@astrojs/svelte": "^4.0.2",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "svelte": "^4.2.0"
   }
 }

examples/with-markdoc/README.md

@@ -2,7 +2,7 @@
 
 This starter showcases the experimental Markdoc integration.
 
-```
+```sh
 npm create astro@latest -- --template with-markdoc
 ```
 
@@ -15,7 +15,7 @@ npm create astro@latest -- --template with-markdoc
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 ├── src/

examples/with-markdoc/package.json

@@ -12,6 +12,6 @@
   },
   "dependencies": {
     "@astrojs/markdoc": "^0.5.0",
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/with-markdoc/src/layouts/Layout.astro

@@ -6,7 +6,7 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
@@ -25,8 +25,15 @@ const { title } = Astro.props;
 		background-color: #f6f6f6;
 	}
 	code {
-		font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+		font-family:
-			Bitstream Vera Sans Mono, Courier New, monospace;
+			Menlo,
+			Monaco,
+			Lucida Console,
+			Liberation Mono,
+			DejaVu Sans Mono,
+			Bitstream Vera Sans Mono,
+			Courier New,
+			monospace;
 	}
 	main {
 		margin: auto;

examples/with-markdown-plugins/README.md

@@ -1,6 +1,6 @@
 # Astro Example: Markdown with Plugins
 
-```
+```sh
 npm create astro@latest -- --template with-markdown-plugins
 ```
 

examples/with-markdown-plugins/package.json

@@ -11,8 +11,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^3.0.0",
+    "@astrojs/markdown-remark": "^3.1.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "hast-util-select": "^5.0.5",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",

examples/with-markdown-shiki/README.md

@@ -1,6 +1,6 @@
 # Astro Example: Markdown with Shiki
 
-```
+```sh
 npm create astro@latest -- --template with-markdown-shiki
 ```
 

examples/with-markdown-shiki/package.json

@@ -11,6 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8"
+    "astro": "^3.0.12"
   }
 }

examples/with-mdx/README.md

@@ -1,6 +1,6 @@
 # Astro Example: MDX
 
-```
+```sh
 npm create astro@latest -- --template with-mdx
 ```
 

examples/with-mdx/package.json

@@ -11,9 +11,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/mdx": "^1.0.3",
     "@astrojs/preact": "^3.0.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "preact": "^10.17.1"
   }
 }

examples/with-nanostores/README.md

@@ -1,6 +1,6 @@
 # Astro Example: Nanostores
 
-```
+```sh
 npm create astro@latest -- --template with-nanostores
 ```
 

examples/with-nanostores/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/preact": "^3.0.0",
     "@nanostores/preact": "^0.5.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "nanostores": "^0.9.3",
     "preact": "^10.17.1"
   }

examples/with-nanostores/src/layouts/Layout.astro

@@ -9,25 +9,27 @@ interface Props {
 const { title } = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+	<head>
-	<meta charset="UTF-8">
+		<meta charset="UTF-8" />
-	<meta name="viewport" content="width=device-width">
+		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<title>{title}</title>
-</head>
+	</head>
-<body>
+	<body>
 		<header>
 			<nav>
-			<a href="/" class="nav-header"><span style="color: var(--astro-blue)">Astro</span> storefront</a>
+				<a href="/" class="nav-header"
+					><span style="color: var(--astro-blue)">Astro</span> storefront</a
+				>
 				<CartFlyoutToggle client:load />
 			</nav>
 		</header>
 		<slot />
 		<CartFlyout client:load />
-</body>
+	</body>
 </html>
 
 <style is:global>
@@ -35,14 +37,14 @@ const { title } = Astro.props;
 		--font-family: system-ui, sans-serif;
 		--font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
 		--font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem);
-		--font-size-xl: clamp(2.0rem, 1.75vw + 1.35rem, 2.75rem);
+		--font-size-xl: clamp(2rem, 1.75vw + 1.35rem, 2.75rem);
 
 		--color-text: hsl(12, 5%, 4%);
 		--color-bg: hsl(17, 20%, 97%);
 		--color-bg-2: hsl(17, 20%, 94%);
 		--color-bg-3: hsl(17, 20%, 88%);
-		--astro-blue: #4F39FA;
+		--astro-blue: #4f39fa;
-		--astro-pink: #DA62C4;
+		--astro-pink: #da62c4;
 
 		--content-max-width: 90ch;
 		--nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
@@ -56,7 +58,9 @@ const { title } = Astro.props;
 		border: none;
 		color: var(--astro-blue);
 		border: 2px solid var(--astro-blue);
-		transition: color 0.2s, background-color 0.2s;
+		transition:
+			color 0.2s,
+			background-color 0.2s;
 		background-color: transparent;
 		padding: 0.4rem 0.8rem;
 		border-radius: 0.4rem;
@@ -98,7 +102,8 @@ const { title } = Astro.props;
 		align-items: center;
 	}
 
-	.nav-header, .nav-header:visited {
+	.nav-header,
+	.nav-header:visited {
 		font-size: var(--font-size-base);
 		font-weight: bold;
 		color: inherit;

examples/with-tailwindcss/README.md

@@ -1,6 +1,6 @@
 # Astro with Tailwind
 
-```
+```sh
 npm create astro@latest -- --template with-tailwindcss
 ```
 

examples/with-tailwindcss/package.json

@@ -11,10 +11,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^1.0.0",
+    "@astrojs/mdx": "^1.0.3",
     "@astrojs/tailwind": "^5.0.0",
     "@types/canvas-confetti": "^1.6.0",
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "autoprefixer": "^10.4.15",
     "canvas-confetti": "^1.6.0",
     "postcss": "^8.4.28",

examples/with-vite-plugin-pwa/README.md

@@ -1,6 +1,6 @@
 # Astro Starter Kit: Vite PWA
 
-```
+```sh
 npm create astro@latest -- --template with-vite-plugin-pwa
 ```
 
@@ -14,7 +14,7 @@ npm create astro@latest -- --template with-vite-plugin-pwa
 
 Inside of your Astro project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
 ├── src/

examples/with-vite-plugin-pwa/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "vite-plugin-pwa": "0.16.4",
     "workbox-window": "^7.0.0"
   }

examples/with-vite-plugin-pwa/src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <html lang="en">

examples/with-vitest/README.md

@@ -1,6 +1,6 @@
 # Astro + [Vitest](https://vitest.dev/) Example
 
-```
+```sh
 npm create astro@latest -- --template with-vitest
 ```
 

examples/with-vitest/package.json

@@ -12,7 +12,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "astro": "^3.0.8",
+    "astro": "^3.0.12",
     "vitest": "^0.34.2"
   }
 }

examples/with-vitest/src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <html lang="en">

package.json

@@ -1,5 +1,6 @@
 {
   "name": "root",
+  "type": "module",
   "version": "0.0.0",
   "private": true,
   "repository": {
@@ -14,7 +15,7 @@
     "dev": "turbo run dev --concurrency=40 --parallel --filter=astro --filter=create-astro --filter=\"@astrojs/*\" --filter=\"@benchmark/*\"",
     "format": "pnpm run format:code",
     "format:ci": "pnpm run format:imports && pnpm run format:code",
-    "format:code": "prettier -w . --cache",
+    "format:code": "prettier -w \"**/*\" --ignore-unknown --cache",
     "format:imports": "organize-imports-cli ./packages/*/tsconfig.json ./packages/*/*/tsconfig.json",
     "test": "turbo run test --concurrency=1 --filter=astro --filter=create-astro --filter=\"@astrojs/*\"",
     "test:match": "cd packages/astro && pnpm run test:match",
@@ -89,7 +90,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "only-allow": "^1.1.1",
     "organize-imports-cli": "^0.10.0",
-    "prettier": "^3.0.2",
+    "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0",
     "tiny-glob": "^0.2.9",
     "turbo": "^1.10.12",

packages/astro/CHANGELOG.md

@@ -1,5 +1,57 @@
 # astro
 
+## 3.0.12
+
+### Patch Changes
+
+- [#8449](https://github.com/withastro/astro/pull/8449) [`7eea37a07`](https://github.com/withastro/astro/commit/7eea37a075c6abb1de715de76d1911ff41e8ab13) Thanks [@matthewp](https://github.com/matthewp)! - Fix multi-layout head injection
+
+## 3.0.11
+
+### Patch Changes
+
+- [#8441](https://github.com/withastro/astro/pull/8441) [`f66053a1e`](https://github.com/withastro/astro/commit/f66053a1ea0a4e3bdb0b0df12bb1bf56e1ea2618) Thanks [@martrapp](https://github.com/martrapp)! - Only transition between pages where both have ViewTransitions enabled
+
+- [#8443](https://github.com/withastro/astro/pull/8443) [`0fa483283`](https://github.com/withastro/astro/commit/0fa483283e54c94f173838cd558dc0dbdd11e699) Thanks [@the-dijkstra](https://github.com/the-dijkstra)! - Fix "Cannot read properties of null" error in CLI code
+
+- Updated dependencies [[`f3f62a5a2`](https://github.com/withastro/astro/commit/f3f62a5a20f4881bb04f65f192df8e1ccf7fb601)]:
+  - @astrojs/markdown-remark@3.1.0
+
+## 3.0.10
+
+### Patch Changes
+
+- [#8437](https://github.com/withastro/astro/pull/8437) [`b3cf1b327`](https://github.com/withastro/astro/commit/b3cf1b32765c76cfc90e497a68280ad52f02cb1f) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix imports of images with uppercased file extensions not working
+
+- [#8440](https://github.com/withastro/astro/pull/8440) [`b92d066b7`](https://github.com/withastro/astro/commit/b92d066b737f64f08a9cf293bd07c9263ef8f32d) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fix issue where `renderToFinalDestination` would throw in internal Astro code
+
+## 3.0.9
+
+### Patch Changes
+
+- [#8351](https://github.com/withastro/astro/pull/8351) [`7d95bd9ba`](https://github.com/withastro/astro/commit/7d95bd9baaf755239fd7d35e4813861b2dbccf42) Thanks [@lilnasy](https://github.com/lilnasy)! - Fixed a case where dynamic imports tried to preload inlined stylesheets.
+
+- [#8353](https://github.com/withastro/astro/pull/8353) [`1947ef7a9`](https://github.com/withastro/astro/commit/1947ef7a99ce3d1d6ea797842edd31d5edffa5de) Thanks [@elevatebart](https://github.com/elevatebart)! - Astro will now skip asset optimization when there is a query in the import. Instead, it will let vite deal with it using plugins.
+
+  ```vue
+  <script>
+  // This will not return an optimized asset
+  import Component from './Component.vue?component';
+  </script>
+  ```
+
+- [#8424](https://github.com/withastro/astro/pull/8424) [`61ad70fdc`](https://github.com/withastro/astro/commit/61ad70fdc52035964c43ecdb4cf7468f6c2b61e7) Thanks [@itsmatteomanf](https://github.com/itsmatteomanf)! - Fixes remote assets caching logic to not use expired assets
+
+- [#8306](https://github.com/withastro/astro/pull/8306) [`d2f2a11cd`](https://github.com/withastro/astro/commit/d2f2a11cdb42b0de79be21c798eda8e7e7b2a277) Thanks [@jacobthesheep](https://github.com/jacobthesheep)! - Support detecting Bun when logging messages with package manager information.
+
+- [#8414](https://github.com/withastro/astro/pull/8414) [`5126c6a40`](https://github.com/withastro/astro/commit/5126c6a40f88bff66ee5d3c3a21eea8c4a44ce7a) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix missing type for `imageConfig` export from `astro:assets`
+
+- [#8416](https://github.com/withastro/astro/pull/8416) [`48ff7855b`](https://github.com/withastro/astro/commit/48ff7855b238536a3df17cb29335c90029fc41a4) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Installing will no longer fail when Sharp can't be installed
+
+- [#8418](https://github.com/withastro/astro/pull/8418) [`923a443cb`](https://github.com/withastro/astro/commit/923a443cb060a0e936a0e1cc87c0360232f77914) Thanks [@bluwy](https://github.com/bluwy)! - Fix markdown page HMR
+
+- [#8332](https://github.com/withastro/astro/pull/8332) [`8935b3b46`](https://github.com/withastro/astro/commit/8935b3b4672d6c54c7b79e6c4575298f75eeb9f4) Thanks [@martrapp](https://github.com/martrapp)! - Fix scroll position when navigating back from page w/o ViewTransitions
+
 ## 3.0.8
 
 ### Patch Changes

packages/astro/client.d.ts

@@ -57,17 +57,15 @@ declare module 'astro:assets' {
 		Image: typeof import('./components/Image.astro').default;
 	};
 
-	type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+	type ImgAttributes = import('./dist/type-utils.js').WithRequired<
-	type Simplify<T> = { [KeyType in keyof T]: T[KeyType] } & {};
-	type ImgAttributes = WithRequired<
 		Omit<import('./types').HTMLAttributes<'img'>, 'src' | 'width' | 'height'>,
 		'alt'
 	>;
 
-	export type LocalImageProps = Simplify<
+	export type LocalImageProps = import('./dist/type-utils.js').Simplify<
 		import('./dist/assets/types.js').LocalImageProps<ImgAttributes>
 	>;
-	export type RemoteImageProps = Simplify<
+	export type RemoteImageProps = import('./dist/type-utils.js').Simplify<
 		import('./dist/assets/types.js').RemoteImageProps<ImgAttributes>
 	>;
 	export const { getImage, getConfiguredImageService, imageConfig, Image }: AstroAssets;

packages/astro/components/ViewTransitions.astro

@@ -19,7 +19,9 @@ const { fallback = 'animate' } = Astro.props as Props;
 	};
 	type Events = 'astro:page-load' | 'astro:after-swap';
 
-	const persistState = (state: State) => history.replaceState(state, '');
+	// only update history entries that are managed by us
+	// leave other entries alone and do not accidently add state.
+	const persistState = (state: State) => history.state && history.replaceState(state, '');
 	const supportsViewTransitions = !!document.startViewTransition;
 	const transitionEnabledOnThisPage = () =>
 		!!document.querySelector('[name="astro-view-transitions-enabled"]');
@@ -32,11 +34,13 @@ const { fallback = 'animate' } = Astro.props as Props;
 	// can use that to determine popstate if going forward or back.
 	let currentHistoryIndex = 0;
 	if (history.state) {
-		// we reloaded a page with history state (e.g. back button or browser reload)
+		// we reloaded a page with history state
+		// (e.g. history navigation from non-transition page or browser reload)
 		currentHistoryIndex = history.state.index;
 		scrollTo({ left: 0, top: history.state.scrollY });
+	} else if (transitionEnabledOnThisPage()) {
+		history.replaceState({ index: currentHistoryIndex, scrollY }, '');
 	}
-
 	const throttle = (cb: (...args: any[]) => any, delay: number) => {
 		let wait = false;
 		// During the waiting time additional events are lost.
@@ -102,20 +106,19 @@ const { fallback = 'animate' } = Astro.props as Props;
 
 	function isInfinite(animation: Animation) {
 		const effect = animation.effect;
-		if(
+		if (!effect || !(effect instanceof KeyframeEffect) || !effect.target) return false;
-			!effect ||
-			!(effect instanceof KeyframeEffect) ||
-			!effect.target
-		) return false;
 		const style = window.getComputedStyle(effect.target, effect.pseudoElement);
-    return style.animationIterationCount === "infinite";
+		return style.animationIterationCount === 'infinite';
-}
+	}
 
 	const parser = new DOMParser();
 
-	async function updateDOM(html: string, state?: State, fallback?: Fallback) {
+	// A noop element used to prevent styles from being removed
-		const doc = parser.parseFromString(html, 'text/html');
+	if (import.meta.env.DEV) {
+		var noopEl: string | undefined = document.createElement('div');
+	}
 
+	async function updateDOM(doc: Document, loc: URL, state?: State, fallback?: Fallback) {
 		// Check for a head element that should persist, either because it has the data
 		// attribute or is a link el.
 		const persistedHeadElement = (el: Element): Element | null => {
@@ -141,6 +144,18 @@ const { fallback = 'animate' } = Astro.props as Props;
 					}
 				}
 			}
+			// Only run this in dev. This will get stripped from production builds and is not needed.
+			if (import.meta.env.DEV) {
+				if (el.tagName === 'STYLE' && el.dataset.viteDevId) {
+					const devId = el.dataset.viteDevId;
+					// If this same style tag exists, remove it from the new page
+					return (
+						doc.querySelector(`style[data-astro-dev-id="${devId}"]`) ||
+						// Otherwise, keep it anyways. This is client:only styles.
+						noopEl
+					);
+				}
+			}
 			return null;
 		};
 
@@ -193,19 +208,17 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// Chromium based browsers (Chrome, Edge, Opera, ...)
 			scrollTo({ left: 0, top: 0, behavior: 'instant' });
 
-			if (state?.scrollY === 0 && location.hash) {
+			let initialScrollY = 0;
-				const id = decodeURIComponent(location.hash.slice(1));
+			if (!state && loc.hash) {
+				const id = decodeURIComponent(loc.hash.slice(1));
 				const elem = document.getElementById(id);
 				// prefer scrollIntoView() over scrollTo() because it takes scroll-padding into account
-				if (elem) {
+				elem && (initialScrollY = elem.offsetTop) && elem.scrollIntoView();
-					state.scrollY = elem.offsetTop;
-					persistState(state); // first guess, later updated by scroll handler
-					elem.scrollIntoView(); // for Firefox, this should better be {behavior: 'instant'}
-				}
 			} else if (state && state.scrollY !== 0) {
 				scrollTo(0, state.scrollY); // usings default scrollBehavior
 			}
-
+			!state &&
+				history.pushState({ index: ++currentHistoryIndex, scrollY: initialScrollY }, '', loc.href);
 			triggerEvent('astro:after-swap');
 		};
 
@@ -236,8 +249,10 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// Trigger the animations
 			const currentAnimations = document.getAnimations();
 			document.documentElement.dataset.astroTransitionFallback = 'old';
-			const newAnimations = document.getAnimations().filter(a => !currentAnimations.includes(a) && !isInfinite(a));
+			const newAnimations = document
-			const finished = Promise.all(newAnimations.map(a => a.finished));
+				.getAnimations()
+				.filter((a) => !currentAnimations.includes(a) && !isInfinite(a));
+			const finished = Promise.all(newAnimations.map((a) => a.finished));
 			const fallbackSwap = () => {
 				swap();
 				document.documentElement.dataset.astroTransitionFallback = 'new';
@@ -249,19 +264,29 @@ const { fallback = 'animate' } = Astro.props as Props;
 		}
 	}
 
-	async function navigate(dir: Direction, href: string, state?: State) {
+	async function navigate(dir: Direction, loc: URL, state?: State) {
 		let finished: Promise<void>;
+		const href = loc.href;
 		const { html, ok } = await getHTML(href);
 		// If there is a problem fetching the new page, just do an MPA navigation to it.
 		if (!ok) {
 			location.href = href;
 			return;
 		}
+		const doc = parser.parseFromString(html, 'text/html');
+		if (!doc.querySelector('[name="astro-view-transitions-enabled"]')) {
+			location.href = href;
+			return;
+		}
+
+		// Now we are sure that we will push state, and it is time to create a state if it is still missing.
+		!state && history.replaceState({ index: currentHistoryIndex, scrollY }, '');
+
 		document.documentElement.dataset.astroTransition = dir;
 		if (supportsViewTransitions) {
-			finished = document.startViewTransition(() => updateDOM(html, state)).finished;
+			finished = document.startViewTransition(() => updateDOM(doc, loc, state)).finished;
 		} else {
-			finished = updateDOM(html, state, getFallback());
+			finished = updateDOM(doc, loc, state, getFallback());
 		}
 		try {
 			await finished;
@@ -313,11 +338,11 @@ const { fallback = 'animate' } = Astro.props as Props;
 				ev.shiftKey || // new window
 				ev.defaultPrevented ||
 				!transitionEnabledOnThisPage()
-			)
+			) {
 				// No page transitions in these cases,
 				// Let the browser standard action handle this
 				return;
-
+			}
 			// We do not need to handle same page links because there are no page transitions
 			// Same page means same path and same query params (but different hash)
 			if (location.pathname === link.pathname && location.search === link.search) {
@@ -330,31 +355,29 @@ const { fallback = 'animate' } = Astro.props as Props;
 					// But we want to handle it like any other same page navigation
 					// So we scroll to the top of the page but do not start page transitions
 					ev.preventDefault();
-					persistState({ ...history.state, scrollY });
+					// push state on the first navigation but not if we were here already
-					scrollTo({ left: 0, top: 0, behavior: 'instant' });
 					if (location.hash) {
-						// last target was different
+						history.replaceState({ index: currentHistoryIndex, scrollY: -(scrollY + 1) }, '');
 						const newState: State = { index: ++currentHistoryIndex, scrollY: 0 };
 						history.pushState(newState, '', link.href);
 					}
+					scrollTo({ left: 0, top: 0, behavior: 'instant' });
 					return;
 				}
 			}
 
 			// these are the cases we will handle: same origin, different page
 			ev.preventDefault();
-			navigate('forward', link.href, { index: ++currentHistoryIndex, scrollY: 0 });
+			navigate('forward', new URL(link.href));
-			const newState: State = { index: currentHistoryIndex, scrollY };
-			persistState({ index: currentHistoryIndex - 1, scrollY });
-			history.pushState(newState, '', link.href);
 		});
 
 		addEventListener('popstate', (ev) => {
 			if (!transitionEnabledOnThisPage() && ev.state) {
-				// The current page doesn't haven't View Transitions,
+				// The current page doesn't have View Transitions enabled
-				// respect that with a full page reload
+				// but the page we navigate to does (because it set the state).
-				// -- but only for transition managed by us (ev.state is set)
+				// Do a full page refresh to reload the client-side router from the new page.
-				history.scrollRestoration && (history.scrollRestoration = "manual")
+				// Scroll restauration will then happen during the reload when the router's code is re-executed
+				history.scrollRestoration && (history.scrollRestoration = 'manual');
 				location.reload();
 				return;
 			}
@@ -365,7 +388,7 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// The browser will handle navigation fine without our help
 			if (ev.state === null) {
 				if (history.scrollRestoration) {
-					history.scrollRestoration = "auto";
+					history.scrollRestoration = 'auto';
 				}
 				return;
 			}
@@ -373,14 +396,18 @@ const { fallback = 'animate' } = Astro.props as Props;
 			// With the default "auto", the browser will jump to the old scroll position
 			// before the ViewTransition is complete.
 			if (history.scrollRestoration) {
-				history.scrollRestoration = "manual";
+				history.scrollRestoration = 'manual';
 			}
 
-			const state: State | undefined = history.state;
+			const state: State = history.state;
-			const nextIndex = state?.index ?? currentHistoryIndex + 1;
+			const nextIndex = state.index;
 			const direction: Direction = nextIndex > currentHistoryIndex ? 'forward' : 'back';
-			navigate(direction, location.href, state);
 			currentHistoryIndex = nextIndex;
+			if (state.scrollY < 0) {
+				scrollTo(0, -(state.scrollY + 1));
+			} else {
+				navigate(direction, new URL(location.href), state);
+			}
 		});
 
 		['mouseenter', 'touchstart', 'focus'].forEach((evName) => {
@@ -405,12 +432,9 @@ const { fallback = 'animate' } = Astro.props as Props;
 		// There's not a good way to record scroll position before a back button.
 		// So the way we do it is by listening to scrollend if supported, and if not continuously record the scroll position.
 		const updateState = () => {
-			// only update history entries that are managed by us
-			// leave other entries alone and do not accidently add state.
-			if (history.state) {
 			persistState({ ...history.state, scrollY });
-			}
+		};
-		}
+
 		if ('onscrollend' in window) addEventListener('scrollend', updateState);
 		else addEventListener('scroll', throttle(updateState, 300));
 	}

packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-one.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../components/Layout.astro';
+import Island from '../components/Island';
+---
+<Layout>
+	<a id="click-two" href="/client-only-two">go to page 2</a>
+	<div transition:persist="island">
+		<Island client:only count={5}>message here</Island>
+	</div>
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/client-only-two.astro

@@ -0,0 +1,10 @@
+---
+import Layout from '../components/Layout.astro';
+import Island from '../components/Island';
+---
+<Layout>
+	<p id="page-two">Page 2</p>
+	<div transition:persist="island">
+		<Island client:only count={5}>message here</Island>
+	</div>
+</Layout>

packages/astro/e2e/fixtures/view-transitions/src/pages/five.astro

@@ -0,0 +1,11 @@
+<html>
+	<head>
+		<title>Page 5</title>
+	</head>
+	<body>
+		<main>
+			<p id="five">Page 5</p>
+			<a id="click-three" href="/two">go to 3</a>
+		</main>
+	</body>
+</html>