diff --git a/.changeset/strange-toes-remain.md b/.changeset/strange-toes-remain.md deleted file mode 100644 index 8c7141f5f3e0..000000000000 --- a/.changeset/strange-toes-remain.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Adds compatibility for shiki languages with the `path` property diff --git a/.changeset/tasty-oranges-bathe.md b/.changeset/tasty-oranges-bathe.md deleted file mode 100644 index b155cd4d89c1..000000000000 --- a/.changeset/tasty-oranges-bathe.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'astro': patch ---- - -Fix `sizes` attribute not being present on `source` elements when using it on the Picture component diff --git a/examples/basics/package.json b/examples/basics/package.json index 39702e9638eb..53da20eb4cab 100644 --- a/examples/basics/package.json +++ b/examples/basics/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/blog/package.json b/examples/blog/package.json index 0b8af8857ac6..13a7db1c7d47 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -14,6 +14,6 @@ "@astrojs/mdx": "^1.1.3", "@astrojs/rss": "^3.0.0", "@astrojs/sitemap": "^3.0.3", - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/component/package.json b/examples/component/package.json index 75f8b3cd183d..1e2af271062e 100644 --- a/examples/component/package.json +++ b/examples/component/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" }, "peerDependencies": { "astro": "^3.0.0" diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json index ed7954629498..af25272f3222 100644 --- a/examples/framework-alpine/package.json +++ b/examples/framework-alpine/package.json @@ -14,6 +14,6 @@ "@astrojs/alpinejs": "^0.3.1", "@types/alpinejs": "^3.7.2", "alpinejs": "^3.12.3", - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json index 0957567c2b21..93c4724bf13c 100644 --- a/examples/framework-lit/package.json +++ b/examples/framework-lit/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/lit": "^3.0.2", "@webcomponents/template-shadowroot": "^0.2.1", - "astro": "^3.4.3", + "astro": "^3.4.4", "lit": "^2.8.0" } } diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index f2fdec9efc65..2f94c96d8181 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -15,8 +15,8 @@ "@astrojs/react": "^3.0.4", "@astrojs/solid-js": "^3.0.2", "@astrojs/svelte": "^4.0.3", - "@astrojs/vue": "^3.0.3", - "astro": "^3.4.3", + "@astrojs/vue": "^3.0.4", + "astro": "^3.4.4", "preact": "^10.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index 313635111437..01d80206be86 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/preact": "^3.0.1", "@preact/signals": "^1.2.1", - "astro": "^3.4.3", + "astro": "^3.4.4", "preact": "^10.17.1" } } diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index 6ecd2052c6c7..37ceb1c0b427 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -14,7 +14,7 @@ "@astrojs/react": "^3.0.4", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "astro": "^3.4.3", + "astro": "^3.4.4", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json index 0c340a6d1724..b5dc110206ea 100644 --- a/examples/framework-solid/package.json +++ b/examples/framework-solid/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/solid-js": "^3.0.2", - "astro": "^3.4.3", + "astro": "^3.4.4", "solid-js": "^1.7.11" } } diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index ae96a6c05b1f..91707a216f10 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/svelte": "^4.0.3", - "astro": "^3.4.3", + "astro": "^3.4.4", "svelte": "^4.2.0" } } diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json index 5f3c17bda749..49c330f50125 100644 --- a/examples/framework-vue/package.json +++ b/examples/framework-vue/package.json @@ -11,8 +11,8 @@ "astro": "astro" }, "dependencies": { - "@astrojs/vue": "^3.0.3", - "astro": "^3.4.3", + "@astrojs/vue": "^3.0.4", + "astro": "^3.4.4", "vue": "^3.3.4" } } diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json index b2480cf532e8..9370b002d000 100644 --- a/examples/hackernews/package.json +++ b/examples/hackernews/package.json @@ -12,6 +12,6 @@ }, "dependencies": { "@astrojs/node": "^6.0.3", - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/integration/package.json b/examples/integration/package.json index 614e04e51573..f3429a883f9b 100644 --- a/examples/integration/package.json +++ b/examples/integration/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" }, "peerDependencies": { "astro": "^3.0.0" diff --git a/examples/middleware/package.json b/examples/middleware/package.json index eb6c1adcc3a8..aa472c86fdd7 100644 --- a/examples/middleware/package.json +++ b/examples/middleware/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@astrojs/node": "^6.0.3", - "astro": "^3.4.3", + "astro": "^3.4.4", "html-minifier": "^4.0.0" } } diff --git a/examples/minimal/package.json b/examples/minimal/package.json index 2200fa7ac1a4..1db1398191e2 100644 --- a/examples/minimal/package.json +++ b/examples/minimal/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/non-html-pages/package.json b/examples/non-html-pages/package.json index 23db74768a42..c58b9abf10eb 100644 --- a/examples/non-html-pages/package.json +++ b/examples/non-html-pages/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index a873cba16f5e..eb6a10da5f9a 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/ssr/package.json b/examples/ssr/package.json index 7abfd79fb802..acc226776038 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -14,7 +14,7 @@ "dependencies": { "@astrojs/node": "^6.0.3", "@astrojs/svelte": "^4.0.3", - "astro": "^3.4.3", + "astro": "^3.4.4", "svelte": "^4.2.0" } } diff --git a/examples/view-transitions/package.json b/examples/view-transitions/package.json index 9672d52337c2..db82d8bb1402 100644 --- a/examples/view-transitions/package.json +++ b/examples/view-transitions/package.json @@ -12,6 +12,6 @@ "devDependencies": { "@astrojs/tailwind": "^5.0.2", "@astrojs/node": "^6.0.3", - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/with-markdoc/package.json b/examples/with-markdoc/package.json index d1828a378496..7f8c83c9d8db 100644 --- a/examples/with-markdoc/package.json +++ b/examples/with-markdoc/package.json @@ -12,6 +12,6 @@ }, "dependencies": { "@astrojs/markdoc": "^0.7.1", - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/with-markdown-plugins/package.json b/examples/with-markdown-plugins/package.json index 953d5774830e..eed5c75e1cd1 100644 --- a/examples/with-markdown-plugins/package.json +++ b/examples/with-markdown-plugins/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/markdown-remark": "^3.3.0", - "astro": "^3.4.3", + "astro": "^3.4.4", "hast-util-select": "^5.0.5", "rehype-autolink-headings": "^6.1.1", "rehype-slug": "^5.1.0", diff --git a/examples/with-markdown-shiki/package.json b/examples/with-markdown-shiki/package.json index e5c6ed2141fa..48d72a4c2999 100644 --- a/examples/with-markdown-shiki/package.json +++ b/examples/with-markdown-shiki/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3" + "astro": "^3.4.4" } } diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json index 1cfff684816c..56cba218d873 100644 --- a/examples/with-mdx/package.json +++ b/examples/with-mdx/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/mdx": "^1.1.3", "@astrojs/preact": "^3.0.1", - "astro": "^3.4.3", + "astro": "^3.4.4", "preact": "^10.17.1" } } diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index af279e00d65f..27a32bbfc5ef 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/preact": "^3.0.1", "@nanostores/preact": "^0.5.0", - "astro": "^3.4.3", + "astro": "^3.4.4", "nanostores": "^0.9.3", "preact": "^10.17.1" } diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index 0e02c9453ccd..cf3214daceff 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -14,7 +14,7 @@ "@astrojs/mdx": "^1.1.3", "@astrojs/tailwind": "^5.0.2", "@types/canvas-confetti": "^1.6.0", - "astro": "^3.4.3", + "astro": "^3.4.4", "autoprefixer": "^10.4.15", "canvas-confetti": "^1.6.0", "postcss": "^8.4.28", diff --git a/examples/with-vite-plugin-pwa/package.json b/examples/with-vite-plugin-pwa/package.json index fadcfcaa2f6b..79bc2df57647 100644 --- a/examples/with-vite-plugin-pwa/package.json +++ b/examples/with-vite-plugin-pwa/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.4.3", + "astro": "^3.4.4", "vite-plugin-pwa": "0.16.4", "workbox-window": "^7.0.0" } diff --git a/examples/with-vitest/package.json b/examples/with-vitest/package.json index 8b5acdf3816b..609acfa51235 100644 --- a/examples/with-vitest/package.json +++ b/examples/with-vitest/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "astro": "^3.4.3", + "astro": "^3.4.4", "vitest": "^0.34.2" } } diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md index 64cee3bb68ae..f35eb7bf248e 100644 --- a/packages/astro/CHANGELOG.md +++ b/packages/astro/CHANGELOG.md @@ -1,5 +1,17 @@ # astro +## 3.4.4 + +### Patch Changes + +- [#9000](https://github.com/withastro/astro/pull/9000) [`35739d01e`](https://github.com/withastro/astro/commit/35739d01e9cc4fa31a8b85201feecf29c747eca9) Thanks [@martrapp](https://github.com/martrapp)! - Fixes an error in dev mode on Safari where view transitions prevented navigating to pages with `client:only` components + +- [#9014](https://github.com/withastro/astro/pull/9014) [`d979b8f0a`](https://github.com/withastro/astro/commit/d979b8f0a82c12f2a844c429982207c88fe13ae6) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Add animations, shadows and general styling tweaks to the Dev Overlay to better match the intended design. + +- [#8996](https://github.com/withastro/astro/pull/8996) [`3988bbcc9`](https://github.com/withastro/astro/commit/3988bbcc9ead0b9af60b8a8749a0ad25c686bde3) Thanks [@bluwy](https://github.com/bluwy)! - Adds compatibility for shiki languages with the `path` property + +- [#8986](https://github.com/withastro/astro/pull/8986) [`910eb00fe`](https://github.com/withastro/astro/commit/910eb00fe0b70ca80bd09520ae100e8c78b675b5) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Fix `sizes` attribute not being present on `source` elements when using it on the Picture component + ## 3.4.3 ### Patch Changes diff --git a/packages/astro/package.json b/packages/astro/package.json index 684eed0cfe7a..0af23aa2fa33 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -1,6 +1,6 @@ { "name": "astro", - "version": "3.4.3", + "version": "3.4.4", "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.", "type": "module", "author": "withastro", diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 4ae5e7138656..dfeb7ee80f68 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -2318,6 +2318,7 @@ export interface DevOverlayPlugin { name: string; icon: Icon; init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise; + beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise; } export type DevOverlayMetadata = Window & diff --git a/packages/astro/src/core/preview/static-preview-server.ts b/packages/astro/src/core/preview/static-preview-server.ts index 3cb0e89e8f03..937ba1c99a1e 100644 --- a/packages/astro/src/core/preview/static-preview-server.ts +++ b/packages/astro/src/core/preview/static-preview-server.ts @@ -54,7 +54,7 @@ export default async function createStaticPreviewServer( null, msg.serverStart({ startupTime: performance.now() - startServerTime, - resolvedUrls: previewServer.resolvedUrls, + resolvedUrls: previewServer.resolvedUrls ?? { local: [], network: [] }, host: settings.config.server.host, base: settings.config.base, }) @@ -72,7 +72,9 @@ export default async function createStaticPreviewServer( host: getResolvedHostForHttpServer(settings.config.server.host), port: settings.config.server.port, closed, - server: previewServer.httpServer, + // In Vite 5, `httpServer` may be a `Http2SecureServer`, but we know we are only starting a HTTP server + // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion + server: previewServer.httpServer as http.Server, stop: async () => { await new Promise((resolve, reject) => { previewServer.httpServer.destroy((err) => (err ? reject(err) : resolve(undefined))); diff --git a/packages/astro/src/core/preview/vite-plugin-astro-preview.ts b/packages/astro/src/core/preview/vite-plugin-astro-preview.ts index 1f9f7c86f0e5..9faabe29b21e 100644 --- a/packages/astro/src/core/preview/vite-plugin-astro-preview.ts +++ b/packages/astro/src/core/preview/vite-plugin-astro-preview.ts @@ -1,11 +1,13 @@ import fs from 'node:fs'; import { fileURLToPath } from 'node:url'; -import type { Plugin } from 'vite'; +import type { Connect, Plugin } from 'vite'; +import { version } from 'vite'; import type { AstroSettings } from '../../@types/astro.js'; import { notFoundTemplate, subpathNotUsedTemplate } from '../../template/4xx.js'; import { stripBase } from './util.js'; const HAS_FILE_EXTENSION_REGEXP = /^.*\.[^\\]+$/; +const IS_VITE_5 = version.startsWith('5.'); export function vitePluginAstroPreview(settings: AstroSettings): Plugin { const { base, outDir, trailingSlash } = settings.config; @@ -50,7 +52,7 @@ export function vitePluginAstroPreview(settings: AstroSettings): Plugin { }); return () => { - server.middlewares.use((req, res) => { + const fourOhFourMiddleware: Connect.NextHandleFunction = (req, res) => { const errorPagePath = fileURLToPath(outDir + '/404.html'); if (fs.existsSync(errorPagePath)) { res.statusCode = 404; @@ -61,7 +63,19 @@ export function vitePluginAstroPreview(settings: AstroSettings): Plugin { res.statusCode = 404; res.end(notFoundTemplate(pathname, 'Not Found')); } - }); + }; + + // Vite 5 has its own 404 middleware, we replace it with ours instead. + if (IS_VITE_5) { + for (const middleware of server.middlewares.stack) { + // This hardcoded name will not break between Vite versions + if ((middleware.handle as Connect.HandleFunction).name === 'vite404Middleware') { + middleware.handle = fourOhFourMiddleware; + } + } + } else { + server.middlewares.use(fourOhFourMiddleware); + } }; }, }; diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 61c5e779bf6c..7336f9d06673 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -63,13 +63,13 @@ document.addEventListener('DOMContentLoaded', async () => { target.querySelector('.notification')?.toggleAttribute('data-active', newState); }); - eventTarget.addEventListener('toggle-plugin', (evt) => { + eventTarget.addEventListener('toggle-plugin', async (evt) => { let newState = undefined; if (evt instanceof CustomEvent) { newState = evt.detail.state ?? true; } - overlay.togglePluginStatus(plugin, newState); + await overlay.togglePluginStatus(plugin, newState); }); return plugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 50b015ca12bd..e0ab02e481a7 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -51,7 +51,7 @@ export class AstroDevOverlay extends HTMLElement { display: flex; gap: 8px; align-items: center; - transition: bottom 0.2s ease-in-out; + transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505); pointer-events: none; } @@ -72,11 +72,10 @@ export class AstroDevOverlay extends HTMLElement { height: 56px; overflow: hidden; pointer-events: auto; - background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%); - box-shadow: 0px 0px 0px 0px #13151A4D; border: 1px solid #343841; border-radius: 9999px; + box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01); } #dev-bar .item { @@ -187,16 +186,6 @@ export class AstroDevOverlay extends HTMLElement { width: 1px; } - astro-dev-overlay-plugin-canvas { - position: absolute; - top: 0; - left: 0; - } - - astro-dev-overlay-plugin-canvas:not([data-active]) { - display: none; - } - #minimize-button { width: 32px; height: 32px; @@ -263,7 +252,7 @@ export class AstroDevOverlay extends HTMLElement { } // Create plugin canvases - this.plugins.forEach((plugin) => { + this.plugins.forEach(async (plugin) => { if (!this.hasBeenInitialized) { console.log(`Creating plugin canvas for ${plugin.id}`); const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); @@ -271,7 +260,7 @@ export class AstroDevOverlay extends HTMLElement { this.shadowRoot?.append(pluginCanvas); } - this.togglePluginStatus(plugin, plugin.active); + await this.togglePluginStatus(plugin, plugin.active); }); // Init plugin lazily - This is safe to do here because only plugins that are not initialized yet will be affected @@ -306,7 +295,7 @@ export class AstroDevOverlay extends HTMLElement { await this.initPlugin(plugin); } - this.togglePluginStatus(plugin); + await this.togglePluginStatus(plugin); }); }); @@ -418,30 +407,52 @@ export class AstroDevOverlay extends HTMLElement { } getPluginCanvasById(id: string) { - return this.shadowRoot.querySelector(`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`); + return this.shadowRoot.querySelector( + `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]` + ); } - togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) { - plugin.active = status ?? !plugin.active; + /** + * @param plugin The plugin to toggle the status of + * @param newStatus Optionally, force the plugin into a specific state + */ + async togglePluginStatus(plugin: DevOverlayPlugin, newStatus?: boolean) { + const pluginCanvas = this.getPluginCanvasById(plugin.id); + if (!pluginCanvas) return; + + if (plugin.active && !newStatus && plugin.beforeTogglingOff) { + const shouldToggleOff = await plugin.beforeTogglingOff(pluginCanvas.shadowRoot!); + + // If the plugin returned false, don't toggle it off, maybe the plugin showed a confirmation dialog or similar + if (!shouldToggleOff) return; + } + + plugin.active = newStatus ?? !plugin.active; const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`); if (!target) return; target.classList.toggle('active', plugin.active); - this.getPluginCanvasById(plugin.id)?.toggleAttribute('data-active', plugin.active); - - plugin.eventTarget.dispatchEvent( - new CustomEvent('plugin-toggled', { - detail: { - state: plugin.active, - plugin, - }, - }) - ); + pluginCanvas.style.display = plugin.active ? 'block' : 'none'; + + window.requestAnimationFrame(() => { + pluginCanvas.toggleAttribute('data-active', plugin.active); + plugin.eventTarget.dispatchEvent( + new CustomEvent('plugin-toggled', { + detail: { + state: plugin.active, + plugin, + }, + }) + ); + }); if (import.meta.hot) { import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active }); } } + /** + * @param newStatus Optionally, force the minimize button into a specific state + */ toggleMinimizeButton(newStatus?: boolean) { const minimizeButton = this.shadowRoot.querySelector('#minimize-button'); if (!minimizeButton) return; @@ -493,4 +504,15 @@ export class DevOverlayCanvas extends HTMLElement { super(); this.shadowRoot = this.attachShadow({ mode: 'open' }); } + + connectedCallback() { + this.shadowRoot.innerHTML = ` + `; + } } diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index cc83cbe83931..ea3b7f26fc1f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -5,12 +5,42 @@ export default { name: 'Astro', icon: 'astro:logo', init(canvas) { - const astroWindow = document.createElement('astro-dev-overlay-window'); + createWindow(); - astroWindow.windowTitle = 'Astro'; - astroWindow.windowIcon = 'astro:logo'; + document.addEventListener('astro:after-swap', createWindow); - astroWindow.innerHTML = ` + function createWindow() { + const style = document.createElement('style'); + style.textContent = ` + :host { + opacity: 0; + transition: opacity 0.15s ease-in-out; + } + + :host([data-active]) { + opacity: 1; + } + + @media screen and (prefers-reduced-motion: no-preference) { + :host astro-dev-overlay-window { + transform: translateY(55px) translate(-50%, -50%); + transition: transform 0.15s ease-in-out; + transform-origin: center bottom; + } + + :host([data-active]) astro-dev-overlay-window { + transform: translateY(0) translate(-50%, -50%); + } + } + `; + canvas.append(style); + + const astroWindow = document.createElement('astro-dev-overlay-window'); + + astroWindow.windowTitle = 'Astro'; + astroWindow.windowIcon = 'astro:logo'; + + astroWindow.innerHTML = `