GuidesLanding.astro

---
// Pure Astro component for the Guides card-based discovery page.
// Renders the full card grid at build time; a small inline script
// handles filter-pill interactivity on the client.
import { getCollection } from 'astro:content';

const CATEGORY_LABELS: Record<string, string> = {
	'getting-started': 'Getting started',
	'agent-workflows': 'Agent workflows',
	configuration: 'Configuration',
	'external-tools': 'External tools',
	'build-an-app-in-warp': 'Build an app',
	devops: 'DevOps',
	frontend: 'Frontend & UI',
};

const allDocs = await getCollection('docs', (entry) =>
	entry.id.startsWith('guides/') && entry.id !== 'guides' && !entry.id.endsWith('/index'),
);

interface GuideData {
	title: string;
	description: string;
	href: string;
	category: string;
	categoryLabel: string;
	tags: string[];
	featured: boolean;
}

const guides: GuideData[] = allDocs
	.filter((doc) => {
		const parts = doc.id.replace(/^guides\//, '').split('/');
		return parts.length >= 2;
	})
	.map((doc) => {
		const category = doc.id.replace(/^guides\//, '').split('/')[0];
		return {
			title: (doc.data as any).sidebar?.label || doc.data.title,
			description: doc.data.description || '',
			href: '/' + doc.id.replace(/\.mdx?$/, '') + '/',
			category,
			categoryLabel: CATEGORY_LABELS[category] || category,
			tags: (doc.data as any).tags || [],
			featured: (doc.data as any).featured || false,
		};
	});

const featured = guides.filter((g) => g.featured);

// Derive ordered categories
const categories = Object.keys(CATEGORY_LABELS).filter((cat) =>
	guides.some((g) => g.category === cat),
);
---

<div class="warp-guide-grid-container not-content">
	{/* Filter pills — Featured is the default; All shows everything flat */}
	<div class="warp-guide-filters" role="tablist" aria-label="Filter guides by category">
		{featured.length > 0 && (
			<button
				role="tab"
				aria-selected="true"
				class="warp-guide-filter-pill active"
				data-filter="featured"
			>
				Featured ({featured.length})
			</button>
		)}
		<button
			role="tab"
			aria-selected="false"
			class="warp-guide-filter-pill"
			data-filter="all"
		>
			All ({guides.length})
		</button>
		{categories.map((cat) => {
			const count = guides.filter((g) => g.category === cat).length;
			return (
				<button
					role="tab"
					aria-selected="false"
					class="warp-guide-filter-pill"
					data-filter={cat}
				>
					{CATEGORY_LABELS[cat]} ({count})
				</button>
			);
		})}
	</div>

	{/* Single card grid — filtering is handled client-side */}
	<div class="warp-guide-card-grid">
		{guides.map((guide) => (
			<a
				href={guide.href}
				class="warp-guide-card"
				data-category={guide.category}
				data-featured={guide.featured ? 'true' : undefined}
			>
				<span class="warp-guide-card-category">{guide.categoryLabel}</span>
				<h3 class="warp-guide-card-title">{guide.title}</h3>
				{guide.description && <p class="warp-guide-card-desc">{guide.description}</p>}
				{guide.tags.length > 0 && (
					<div class="warp-guide-card-tags">
						{guide.tags.map((tag) => (
							<span class="warp-guide-card-tag">{tag}</span>
						))}
					</div>
				)}
			</a>
		))}
	</div>
</div>

<script is:inline>
	// Client-side filter pill interactivity
	(() => {
		const container = document.querySelector('.warp-guide-grid-container');
		if (!container) return;

		const pills = container.querySelectorAll('.warp-guide-filter-pill');
		const cards = container.querySelectorAll('.warp-guide-card');

		pills.forEach((pill) => {
			pill.addEventListener('click', () => {
				const filter = pill.getAttribute('data-filter');

				// Update pill states
				pills.forEach((p) => {
					p.classList.remove('active');
					p.setAttribute('aria-selected', 'false');
				});
				pill.classList.add('active');
				pill.setAttribute('aria-selected', 'true');

				// Filter cards
				cards.forEach((card) => {
					let show = false;
					if (filter === 'all') {
						show = true;
					} else if (filter === 'featured') {
						show = card.hasAttribute('data-featured');
					} else {
						show = card.getAttribute('data-category') === filter;
					}
					card.style.display = show ? '' : 'none';
				});
			});
		});

		// Apply initial filter (Featured is default)
		const defaultPill = container.querySelector('.warp-guide-filter-pill.active');
		if (defaultPill) defaultPill.click();
	})();
</script>