feat: implement overlay main screen redesign (#9118)

* feat: implement redesign * fix: make it build * feat: visual tweaks * feat(overlay): update styling, integration endpoint * feat: add fallback icons * Clean up tests (#9183) * Add `@astrojs/upgrade` package for automatic package upgrades (#8525) Co-authored-by: Sarah Rainsberger <[email protected]> * [ci] format * fix: links with same path but different search params not prefetched (#9189) Co-authored-by: Sarah Rainsberger <[email protected]> * fix: discord icon * chore: changeset --------- Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Bjorn Lu <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Spencer Whitehead <[email protected]> Co-authored-by: Matthew Phillips <[email protected]>
withastro · Nov 28, 2023 · 000e8f4 · 000e8f4
1 parent 415fec5
commit 000e8f4
Show file tree

Hide file tree

Showing 50 changed files with 3,678 additions and 257 deletions.
diff --git a/.changeset/angry-swans-fry.md b/.changeset/angry-swans-fry.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Redesign Dev Overlay main screen to show more information, such as the coolest integrations, your current Astro version and more.
diff --git a/.changeset/brown-jars-lick.md b/.changeset/brown-jars-lick.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes an issue where links with the same pathname as the current page, but different search params, were not prefetched.
diff --git a/.changeset/tasty-dryers-bathe.md b/.changeset/tasty-dryers-bathe.md
@@ -0,0 +1,27 @@
+---
+'@astrojs/upgrade': minor
+---
+
+Initial release! 
+
+`@astrojs/upgrade` is an automated command-line tool for upgrading Astro and your official Astro integrations together.
+
+Inside of your existing `astro` project, run the following command to install the `latest` version of your integrations.
+
+**With NPM:**
+
+```bash
+npx @astrojs/upgrade
+```
+
+**With Yarn:**
+
+```bash
+yarn dlx @astrojs/upgrade
+```
+
+**With PNPM:**
+
+```bash
+pnpm dlx @astrojs/upgrade
+```
diff --git a/packages/astro/e2e/fixtures/prefetch/src/pages/index.astro b/packages/astro/e2e/fixtures/prefetch/src/pages/index.astro
@@ -9,6 +9,8 @@
     <br>
     <a id="prefetch-false" href="/prefetch-false" data-astro-prefetch="false">false</a>
     <br>
+    <a id="prefetch-search-param" href="?search-param=true" data-astro-prefetch="hover">search param</a>
+    <br>
     <a id="prefetch-tap" href="/prefetch-tap" data-astro-prefetch="tap">tap</a>
     <br>
     <a id="prefetch-hover" href="/prefetch-hover" data-astro-prefetch="hover">hover</a>

diff --git a/packages/astro/e2e/prefetch.test.js b/packages/astro/e2e/prefetch.test.js
@@ -16,7 +16,8 @@ test.describe('Prefetch (default)', () => {
 
 	test.beforeEach(async ({ page }) => {
 		page.on('request', (req) => {
-			reqUrls.push(new URL(req.url()).pathname);
+			const urlObj = new URL(req.url());
+			reqUrls.push(urlObj.pathname + urlObj.search);
 		});
 	});
 
@@ -38,6 +39,16 @@ test.describe('Prefetch (default)', () => {
 		expect(reqUrls).not.toContainEqual('/prefetch-false');
 	});
 
+	test('Link with search param should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/?search-param=true');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-search-param').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/?search-param=true');
+	});
+
 	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		expect(reqUrls).not.toContainEqual('/prefetch-tap');
@@ -102,7 +113,8 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
 
 	test.beforeEach(async ({ page }) => {
 		page.on('request', (req) => {
-			reqUrls.push(new URL(req.url()).pathname);
+			const urlObj = new URL(req.url());
+			reqUrls.push(urlObj.pathname + urlObj.search);
 		});
 	});
 
@@ -129,6 +141,16 @@ test.describe("Prefetch (prefetchAll: true, defaultStrategy: 'tap')", () => {
 		expect(reqUrls).not.toContainEqual('/prefetch-false');
 	});
 
+	test('Link with search param should prefetch', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+		expect(reqUrls).not.toContainEqual('/?search-param=true');
+		await Promise.all([
+			page.waitForEvent('request'), // wait prefetch request
+			page.locator('#prefetch-search-param').hover(),
+		]);
+		expect(reqUrls).toContainEqual('/?search-param=true');
+	});
+
 	test('data-astro-prefetch="tap" should prefetch on tap', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 		expect(reqUrls).not.toContainEqual('/prefetch-tap');

diff --git a/packages/astro/e2e/react-component.test.js b/packages/astro/e2e/react-component.test.js
@@ -46,7 +46,6 @@ test.describe('React client id generation', () => {
 		const hydratedId1 = await components.nth(2).getAttribute('id');
 		const clientOnlyId0 = await components.nth(3).getAttribute('id');
 		const clientOnlyId1 = await components.nth(4).getAttribute('id');
-		console.log('ho ho', staticId, hydratedId0, hydratedId1, clientOnlyId0, clientOnlyId1);
 		expect(staticId).not.toEqual(hydratedId0);
 		expect(hydratedId0).not.toEqual(hydratedId1);
 		expect(hydratedId1).not.toEqual(clientOnlyId0);

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -21,11 +21,17 @@ import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroCookies } from '../core/cookies/index.js';
 import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
 import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
-import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js';
 import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
-import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js';
-import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js';
-import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js';
+import type {
+	DevOverlayBadge,
+	DevOverlayButton,
+	DevOverlayCard,
+	DevOverlayHighlight,
+	DevOverlayIcon,
+	DevOverlayToggle,
+	DevOverlayTooltip,
+	DevOverlayWindow,
+} from '../runtime/client/dev-overlay/ui-library/index.js';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
 import type { OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
@@ -2512,6 +2518,8 @@ export type DevOverlayMetadata = Window &
 	typeof globalThis & {
 		__astro_dev_overlay__: {
 			root: string;
+			version: string;
+			debugInfo: string;
 		};
 	};
 
@@ -2523,5 +2531,9 @@ declare global {
 		'astro-dev-overlay-tooltip': DevOverlayTooltip;
 		'astro-dev-overlay-highlight': DevOverlayHighlight;
 		'astro-dev-overlay-toggle': DevOverlayToggle;
+		'astro-dev-overlay-badge': DevOverlayBadge;
+		'astro-dev-overlay-button': DevOverlayButton;
+		'astro-dev-overlay-icon': DevOverlayIcon;
+		'astro-dev-overlay-card': DevOverlayCard;
 	}
 }
diff --git a/packages/astro/src/cli/info/index.ts b/packages/astro/src/cli/info/index.ts
@@ -4,6 +4,7 @@ import { execSync } from 'node:child_process';
 import { arch, platform } from 'node:os';
 import prompts from 'prompts';
 import type yargs from 'yargs-parser';
+import type { AstroConfig, AstroUserConfig } from '../../@types/astro.js';
 import { resolveConfig } from '../../core/config/index.js';
 import { ASTRO_VERSION } from '../../core/constants.js';
 import { flagsToAstroInlineConfig } from '../flags.js';
@@ -12,17 +13,21 @@ interface InfoOptions {
 	flags: yargs.Arguments;
 }
 
-export async function printInfo({ flags }: InfoOptions) {
+export async function getInfoOutput({
+	userConfig,
+	print,
+}: {
+	userConfig: AstroUserConfig | AstroConfig;
+	print: boolean;
+}): Promise<string> {
 	const rows: Array<[string, string | string[]]> = [
 		['Astro', `v${ASTRO_VERSION}`],
 		['Node', process.version],
 		['System', getSystem()],
 		['Package Manager', getPackageManager()],
 	];
 
-	const inlineConfig = flagsToAstroInlineConfig(flags);
 	try {
-		const { userConfig } = await resolveConfig(inlineConfig, 'info');
 		rows.push(['Output', userConfig.output ?? 'static']);
 		rows.push(['Adapter', userConfig.adapter?.name ?? 'none']);
 		const integrations = (userConfig?.integrations ?? [])
@@ -35,10 +40,17 @@ export async function printInfo({ flags }: InfoOptions) {
 
 	let output = '';
 	for (const [label, value] of rows) {
-		output += printRow(label, value);
+		output += printRow(label, value, print);
 	}
 
-	await copyToClipboard(output.trim());
+	return output.trim();
+}
+
+export async function printInfo({ flags }: InfoOptions) {
+	const { userConfig } = await resolveConfig(flagsToAstroInlineConfig(flags), 'info');
+	const output = await getInfoOutput({ userConfig, print: true });
+
+	await copyToClipboard(output);
 }
 
 async function copyToClipboard(text: string) {
@@ -105,7 +117,7 @@ function getPackageManager() {
 }
 
 const MAX_PADDING = 25;
-function printRow(label: string, value: string | string[]) {
+function printRow(label: string, value: string | string[], print: boolean) {
 	const padding = MAX_PADDING - label.length;
 	const [first, ...rest] = Array.isArray(value) ? value : [value];
 	let plaintext = `${label}${' '.repeat(padding)}${first}`;
@@ -117,6 +129,8 @@ function printRow(label: string, value: string | string[]) {
 		}
 	}
 	plaintext += '\n';
-	console.log(richtext);
+	if (print) {
+		console.log(richtext);
+	}
 	return plaintext;
 }
diff --git a/packages/astro/src/prefetch/index.ts b/packages/astro/src/prefetch/index.ts
@@ -226,7 +226,7 @@ function canPrefetchUrl(url: string, ignoreSlowConnection: boolean) {
 		const urlObj = new URL(url, location.href);
 		return (
 			location.origin === urlObj.origin &&
-			location.pathname !== urlObj.pathname &&
+			(location.pathname !== urlObj.pathname || location.search !== urlObj.search) &&
 			!prefetchedUrls.has(url)
 		);
 	} catch {}

diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -14,11 +14,16 @@ document.addEventListener('DOMContentLoaded', async () => {
 		{ default: astroXrayPlugin },
 		{ default: astroSettingsPlugin },
 		{ AstroDevOverlay, DevOverlayCanvas },
-		{ DevOverlayCard },
-		{ DevOverlayHighlight },
-		{ DevOverlayTooltip },
-		{ DevOverlayWindow },
-		{ DevOverlayToggle },
+		{
+			DevOverlayCard,
+			DevOverlayHighlight,
+			DevOverlayTooltip,
+			DevOverlayWindow,
+			DevOverlayToggle,
+			DevOverlayButton,
+			DevOverlayBadge,
+			DevOverlayIcon,
+		},
 		{ getIconElement, isDefinedIcon },
 	] = await Promise.all([
 		// @ts-expect-error
@@ -28,12 +33,8 @@ document.addEventListener('DOMContentLoaded', async () => {
 		import('./plugins/xray.js'),
 		import('./plugins/settings.js'),
 		import('./overlay.js'),
-		import('./ui-library/card.js'),
-		import('./ui-library/highlight.js'),
-		import('./ui-library/tooltip.js'),
-		import('./ui-library/window.js'),
-		import('./ui-library/toggle.js'),
-		import('./ui-library/icons.js'),
+		import('./ui-library/index.js'),
+    import('./ui-library/icons.js'),
 	]);
 
 	// Register custom elements
@@ -44,6 +45,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 	customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
 	customElements.define('astro-dev-overlay-card', DevOverlayCard);
 	customElements.define('astro-dev-overlay-toggle', DevOverlayToggle);
+	customElements.define('astro-dev-overlay-button', DevOverlayButton);
+	customElements.define('astro-dev-overlay-badge', DevOverlayBadge);
+	customElements.define('astro-dev-overlay-icon', DevOverlayIcon);
 
 	overlay = document.createElement('astro-dev-overlay');
 

diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -203,7 +203,7 @@ export class AstroDevOverlay extends HTMLElement {
 				transition: opacity 0.2s ease-in-out;
 				pointer-events: auto;
 				border: 0;
-				color: white;
+				color: #13151A;
 				font-family: system-ui, sans-serif;
 				font-size: 1rem;
 				line-height: 1.2;