Add Open in IDX buttons to astro.new

src/components/RepoCard.astro

@@ -11,6 +11,7 @@ export type Props = Example & { aboveTheFold: boolean };
 const {
 	title,
 	sourceUrl,
+	idxUrl,
 	stackblitzUrl,
 	codesandboxUrl,
 	gitpodUrl,
@@ -46,26 +47,34 @@ const headingId = `template-${createAstroTemplate}`;
 		</p>
 		<hr class="border-astro-gray-100/10" />
 		<div
-			class="flex h-10 w-max min-w-0 max-w-full divide-x divide-astro-gray-600 rounded-full bg-blue-purple-gradient"
+			class="relative flex h-10 w-max min-w-0 max-w-full divide-x divide-astro-gray-600 rounded-full bg-blue-purple-gradient"
 		>
 			<a
-				href={stackblitzUrl}
+				href={idxUrl}
 				target="_blank"
 				rel="noopener noreferrer"
 				class="flex items-center gap-2 rounded-l-full bg-black/15 px-4 text-sm transition hover:backdrop-brightness-75"
 			>
-				<Icon name="stackblitz" size={16} aria-hidden="true" /> Open in StackBlitz
+				<Icon name="idx" size={16} aria-hidden="true" /> Open in IDX
 			</a>
-			<details class="relative z-10" data-card-options>
+			<details class="z-10" data-card-options>
 				<summary
 					class="flex h-full cursor-pointer list-none items-center rounded-r-full bg-black/15 px-2 transition hover:backdrop-brightness-75"
 				>
 					<span class="sr-only">More options</span>
 					<Icon name="chevron-down" size={20} aria-hidden="true" />
 				</summary>
 				<ul
-					class="absolute right-0 top-full mt-2 flex w-max flex-col rounded bg-white p-2 text-astro-gray-700 shadow-md"
+					class="absolute left-0 top-full mt-2 flex w-max flex-col rounded bg-white p-2 text-astro-gray-700 shadow-md"
 				>
+					<li>
+						<a
+							href={stackblitzUrl}
+							class="flex flex-row items-center gap-2 rounded-sm px-3 py-2 hover:bg-blue-purple-gradient hover:text-white"
+						>
+							<Icon name="stackblitz" size={20} aria-hidden="true" /> Open in StackBlitz
+						</a>
+					</li>
 					<li>
 						<a
 							href={gitpodUrl}

src/data/examples.ts

@@ -37,6 +37,7 @@ export interface Example {
 	name: string;
 	title: string;
 	sourceUrl: string;
+	idxUrl: string;
 	stackblitzUrl: string;
 	codesandboxUrl: string;
 	gitpodUrl: string;
@@ -57,6 +58,7 @@ function toExample(exampleData: ExampleDataWithRepo, ref: string): Example {
 	return {
 		name,
 		sourceUrl: `/${name}${suffix}?on=github`,
+		idxUrl: `/${name}${suffix}?on=idx`,
 		stackblitzUrl: `/${name}${suffix}?on=stackblitz`,
 		codesandboxUrl: `/${name}${suffix}?on=codesandbox`,
 		gitpodUrl: `/${name}${suffix}?on=gitpod`,

src/pages/[...rest].ts

@@ -1,5 +1,6 @@
 import type { APIContext, APIRoute } from 'astro';
-import { fromStarlightName, isStarlightName } from '../utils/constants.js';
+import { toTemplateName, toTitle } from '../data/examples-shared.js';
+import { fromStarlightName, isStarlightName, toStarlightName } from '../utils/constants.js';
 import {
 	type ExampleData,
 	astroContentUrl,
@@ -12,7 +13,7 @@ export const prerender = false;
 type CachedExample = {
 	name: string;
 	github: string;
-	netlify: string;
+	idx: string;
 	stackblitz: string;
 	codesandbox: string;
 	gitpod: string;
@@ -21,15 +22,56 @@ type CachedExample = {
 const examplesCache = new Map<string, CachedExample[]>();
 let starlightExamplesCache: CachedExample[] | undefined = undefined;
 
-function toCachedExample({ name, html_url }: ExampleData): CachedExample {
-	const githubUrl = new URL(html_url);
+/** Generate a placeholder workspace name for IDX. Must be no longer than 20 characters. */
+function idxProjectName(example: ExampleData, repo: string) {
+	const fullTitle = toTitle(
+		repo === 'withastro/starlight' ? toStarlightName(example.name) : example.name,
+	)
+		// Remove parentheticals
+		.replace(/\([^)]+\)/, '')
+		.trim();
+
+	if (fullTitle.length > 20) return `${fullTitle.slice(0, 19)}…`;
+	if (fullTitle.length < 13) return `Astro: ${fullTitle}`;
+	return fullTitle;
+}
+
+/**
+ * Generate a URL to create a new IDX workspace for the given example.
+ *
+ * @param example GitHub REST API repository contents entry for this template.
+ * @param repo The GitHub repo identifier for this template, e.g. `withastro/astro`.
+ * @param ref The GitHub branch to use: `latest` or `next`.
+ */
+function idxUrl(example: ExampleData, repo: string, ref = 'latest') {
+	const url = new URL('https://idx.google.com/new');
+	// Select the Astro template to use when starting up IDX.
+	url.searchParams.set('astroTemplate', toTemplateName({ ...example, repo }));
+	// Pre-fill the IDX wizard with a project name based on the selected template.
+	const title = idxProjectName(example, repo);
+	url.searchParams.set('name', title);
+	// Tell IDX where the template files are located. IDX parses this greedily so it MUST COME LAST.
+	const templateUrl = `https://github.com/withastro/astro.new/tree/main/.idx-templates/${ref}`;
+	url.searchParams.set('template', templateUrl);
+	return url.href;
+}
+
+/**
+ * Create a map of URLs that open this example on different services.
+ *
+ * @param example GitHub REST API repository contents entry for this template.
+ * @param repo The GitHub repo identifier for this template, e.g. `withastro/astro`.
+ * @param ref The GitHub branch to use: `latest` or `next`.
+ */
+function toCachedExample(example: ExampleData, repo: string, ref: string): CachedExample {
+	const githubUrl = new URL(example.html_url);
 	return {
-		name,
-		github: html_url,
-		netlify: 'https://astro.build',
+		name: example.name,
+		github: example.html_url,
+		idx: idxUrl(example, repo, ref),
 		stackblitz: `https://stackblitz.com/github${githubUrl.pathname}`,
 		codesandbox: `https://codesandbox.io/p/sandbox/github${githubUrl.pathname}`,
-		gitpod: `https://gitpod.io/#${html_url}`,
+		gitpod: `https://gitpod.io/#${example.html_url}`,
 	};
 }
 
@@ -48,7 +90,7 @@ async function getStarlightExamples() {
 	}
 
 	starlightExamplesCache = examples.flatMap((example) =>
-		example.size > 0 ? [] : toCachedExample(example),
+		example.size > 0 ? [] : toCachedExample(example, 'withastro/starlight', 'latest'),
 	);
 
 	return starlightExamplesCache;
@@ -70,7 +112,9 @@ async function getExamples(ref = 'latest') {
 		throw new Error(`Unable to fetch templates from GitHub`);
 	}
 
-	const values = examples.flatMap((example) => (example.size > 0 ? [] : toCachedExample(example)));
+	const values = examples.flatMap((example) =>
+		example.size > 0 ? [] : toCachedExample(example, 'withastro/astro', ref),
+	);
 
 	examplesCache.set(ref, values);
 
@@ -108,7 +152,7 @@ async function validateRef(name: string) {
 }
 
 type Platform = typeof PLATFORMS extends Set<infer T> ? T : never;
-const PLATFORMS = new Set(['stackblitz', 'codesandbox', 'netlify', 'github', 'gitpod'] as const);
+const PLATFORMS = new Set(['idx', 'stackblitz', 'codesandbox', 'github', 'gitpod'] as const);
 function isPlatform(name: string): name is Platform {
 	return PLATFORMS.has(name as Platform);
 }