Examples fixes and preview.astro.new support (#12543)

Co-authored-by: Emanuele Stoppa <[email protected]>

.github/workflows/examples-deploy.yml

@@ -0,0 +1,22 @@
+# This workflow runs when changes to examples are pushed to main.
+# It calls a build hook on Netlify that will redeploy preview.astro.new with the latest changes.
+
+name: Redeploy preview.astro.new
+
+on:
+  push:
+    branches: 
+      - main
+    paths: 
+      - 'examples/**'
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Send a POST request to Netlify to rebuild preview.astro.new
+        run: 'curl -X POST -d {} ${{ env.BUILD_HOOK }}'
+        env:
+          BUILD_HOOK: ${{ secrets.NETLIFY_PREVIEWS_BUILD_HOOK }}

examples/blog/src/components/HeaderLink.astro

@@ -4,10 +4,9 @@ import type { HTMLAttributes } from 'astro/types';
 type Props = HTMLAttributes<'a'>;
 
 const { href, class: className, ...props } = Astro.props;
-
-const { pathname } = Astro.url;
+const pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
 const subpath = pathname.match(/[^\/]+/g);
-const isActive = href === pathname || href === '/' + subpath?.[0];
+const isActive = href === pathname || href === '/' + (subpath?.[0] || '');
 ---
 
 <a href={href} class:list={[className, { active: isActive }]} {...props}>

examples/portfolio/src/components/Nav.astro

@@ -19,6 +19,14 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 	{ label: 'dribbble', href: 'https://dribbble.com/me', icon: 'dribbble-logo' },
 	{ label: 'YouTube', href: 'https://www.youtube.com/@me/', icon: 'youtube-logo' },
 ];
+
+/** Test if a link is pointing to the current page. */
+const isCurrentPage = (href: string) => {
+	let pathname = Astro.url.pathname.replace(import.meta.env.BASE_URL, '');
+	if (pathname.at(0) !== '/') pathname = '/' + pathname;
+	if (pathname.at(-1) !== '/') pathname += '/';
+	return pathname === href || (href !== '/' && pathname.startsWith(href));
+};
 ---
 
 <nav>
@@ -41,18 +49,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 			{
 				textLinks.map(({ label, href }) => (
 					<li>
-						<a
-							aria-current={Astro.url.pathname === href}
-							class:list={[
-								'link',
-								{
-									active:
-										Astro.url.pathname === href ||
-										(href !== '/' && Astro.url.pathname.startsWith(href)),
-								},
-							]}
-							href={href}
-						>
+						<a aria-current={isCurrentPage(href) ? 'page' : null} class="link" href={href}>
 							{label}
 						</a>
 					</li>
@@ -79,18 +76,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 			{
 				textLinks.map(({ label, href }) => (
 					<li>
-						<a
-							aria-current={Astro.url.pathname === href}
-							class:list={[
-								'link',
-								{
-									active:
-										Astro.url.pathname === href ||
-										(href !== '/' && Astro.url.pathname.startsWith(href)),
-								},
-							]}
-							href={href}
-						>
+						<a aria-current={isCurrentPage(href) ? 'page' : null} class="link" href={href}>
 							{label}
 						</a>
 					</li>
@@ -234,7 +220,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		text-decoration: none;
 	}
 
-	.link.active {
+	.link[aria-current] {
 		color: var(--gray-0);
 	}
 
@@ -332,7 +318,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 			background-color: var(--accent-subtle-overlay);
 		}
 
-		.link.active {
+		.link[aria-current='page'] {
 			color: var(--accent-text-over);
 			background-color: var(--accent-regular);
 		}
@@ -360,7 +346,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
 		}
 	}
 	@media (forced-colors: active) {
-		.link.active {
+		.link[aria-current='page'] {
 			color: SelectedItem;
 		}
 	}

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

@@ -1,6 +1,7 @@
 ---
 import CartFlyout from '../components/CartFlyout';
 import CartFlyoutToggle from '../components/CartFlyoutToggle';
+import { withBase } from '../utils';
 
 interface Props {
 	title: string;
@@ -15,15 +16,15 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/svg+xml" href={withBase('/favicon.svg')} />
 		<title>{title}</title>
 	</head>
 	<body>
 		<header>
 			<nav>
-				<a href="/" class="nav-header"
-					><span style="color: var(--astro-blue)">Astro</span> storefront</a
-				>
+				<a href={withBase('/')} class="nav-header">
+					<span style="color: var(--astro-blue)">Astro</span> storefront
+				</a>
 				<CartFlyoutToggle client:load />
 			</nav>
 		</header>

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

@@ -3,11 +3,12 @@ import type { CartItemDisplayInfo } from '../cartStore';
 import Layout from '../layouts/Layout.astro';
 import AddToCartForm from '../components/AddToCartForm';
 import FigurineDescription from '../components/FigurineDescription.astro';
+import { withBase } from '../utils';
 
 const item: CartItemDisplayInfo = {
 	id: 'astronaut-figurine',
 	name: 'Astronaut Figurine',
-	imageSrc: '/images/astronaut-figurine.png',
+	imageSrc: withBase('/images/astronaut-figurine.png'),
 };
 ---
 

examples/with-nanostores/src/utils.ts

@@ -0,0 +1,4 @@
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+
+/** Prefix a URL path with the site’s base path if set. */
+export const withBase = (path: string) => base + path;