From db17955672399fd4b6a676f872b31b52b260e89f Mon Sep 17 00:00:00 2001 From: Rachael Rose Renk <91027132+rachaelrenk@users.noreply.github.com> Date: Sun, 17 May 2026 14:38:29 -1000 Subject: [PATCH 1/3] feat: card-based Guides discovery page with category filtering - Extend content schema with tags and featured frontmatter fields - Backfill tags on all 54 guide pages using 15-tag vocabulary - Mark 6 guides as featured for the curated top section - Collapse all 7 sidebar groups by default to reduce overwhelm - Add GuidesLanding.astro component with card grid and filter pills - Replace static guides/index.mdx with dynamic filterable directory - Add CSS for cards, filter pills, category badges, and tag chips Co-Authored-By: Oz --- src/components/GuidesLanding.astro | 173 ++++++++++++++++++ src/content.config.ts | 20 +- .../how-to-edit-agent-code-in-warp.mdx | 3 + ...your-codebase-using-warp-rust-codebase.mdx | 4 + .../how-to-review-ai-generated-code.mdx | 4 + .../how-to-review-prs-like-a-senior-dev.mdx | 4 + ...el-summarize-logs-analyze-pr-modify-ui.mdx | 4 + .../how-to-run-multiple-ai-coding-agents.mdx | 3 + ...ice-and-images-to-prompt-coding-agents.mdx | 3 + ...ning-multiple-agents-at-once-with-warp.mdx | 3 + .../understanding-your-codebase.mdx | 3 + .../using-images-as-context-with-warp.mdx | 3 + .../warp-for-product-managers.mdx | 3 + .../agent-workflows/warp-vs-claude-code.mdx | 4 + ...ome-extension-d3js-javascript-html-css.mdx | 4 + ...-real-time-chat-app-github-mcp-railway.mdx | 5 + .../building-a-slackbot.mdx | 3 + .../building-warps-input-with-warp.mdx | 4 + .../creating-rules-for-agents.mdx | 3 + ...gure-yolo-and-strategic-agent-profiles.mdx | 3 + ...ting-project-astro-typescript-tailwind.mdx | 4 + .../how-to-set-coding-best-practices.mdx | 3 + ...w-to-set-coding-preferences-with-rules.mdx | 3 + ...-set-tech-stack-preferences-with-rules.mdx | 3 + ...-self-serve-data-analytics-with-skills.mdx | 3 + .../how-to-sync-your-monorepos.mdx | 3 + .../how-to-use-agent-profiles-efficiently.mdx | 3 + ...er-reusable-actions-with-saved-prompts.mdx | 3 + .../how-to-analyze-cloud-run-logs-gcloud.mdx | 3 + ...create-a-production-ready-docker-setup.mdx | 3 + ...ority-matrix-for-database-optimization.mdx | 3 + ...nit-and-security-tests-to-debug-faster.mdx | 3 + .../how-to-prevent-secrets-from-leaking.mdx | 3 + ...te-sql-commands-inside-a-postgres-repl.mdx | 3 + ...-your-kubernetes-workflow-kubectl-helm.mdx | 3 + ...date-astro-project-with-best-practices.mdx | 3 + ...website-from-a-figma-file-from-scratch.mdx | 4 + ...rizing-open-prs-and-creating-gh-issues.mdx | 4 + .../how-to-set-up-claude-code.mdx | 3 + .../how-to-set-up-codex-cli.mdx | 3 + .../how-to-set-up-gemini-cli.mdx | 3 + .../external-tools/how-to-set-up-ollama.mdx | 3 + .../external-tools/how-to-set-up-opencode.mdx | 3 + .../linear-mcp-retrieve-issue-data.mdx | 3 + ...ing-tickets-with-a-lean-build-approach.mdx | 3 + ...peteer-mcp-scraping-amazon-web-reviews.mdx | 3 + ...cp-fix-sentry-error-in-empower-website.mdx | 4 + ...asic-queries-you-can-make-after-set-up.mdx | 4 + .../using-mcp-servers-with-warp.mdx | 4 + ...hat-matches-your-mockup-react-tailwind.mdx | 3 + ...ace-a-ui-element-in-warp-rust-codebase.mdx | 3 + .../10-coding-features-you-should-know.mdx | 4 + .../how-to-customize-warps-appearance.mdx | 3 + .../how-to-make-warps-ui-more-minimal.mdx | 3 + .../how-to-master-warps-code-review-panel.mdx | 4 + .../getting-started/welcome-to-warp.mdx | 3 + src/content/docs/guides/index.mdx | 23 +-- src/sidebar.ts | 7 + src/styles/custom.css | 136 ++++++++++++++ 59 files changed, 517 insertions(+), 21 deletions(-) create mode 100644 src/components/GuidesLanding.astro diff --git a/src/components/GuidesLanding.astro b/src/components/GuidesLanding.astro new file mode 100644 index 00000000..d1abd1f9 --- /dev/null +++ b/src/components/GuidesLanding.astro @@ -0,0 +1,173 @@ +--- +// 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 = { + '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), +); +--- + +
+ {/* Filter pills */} +
+ + {categories.map((cat) => { + const count = guides.filter((g) => g.category === cat).length; + return ( + + ); + })} +
+ + {/* Featured section */} + {featured.length > 0 && ( +
+

Featured

+ +
+ )} + + {/* All guides */} +
+ {featured.length > 0 &&

All guides

} + +
+
+ + diff --git a/src/content.config.ts b/src/content.config.ts index 7097d029..8d3237be 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -2,10 +2,28 @@ import { defineCollection } from 'astro:content'; import { docsLoader } from '@astrojs/starlight/loaders'; import { docsSchema } from '@astrojs/starlight/schema'; import { topicSchema } from 'starlight-sidebar-topics/schema'; +import { z } from 'astro/zod'; export const collections = { // `topicSchema` adds a `topic` frontmatter field used by // `starlight-sidebar-topics` to associate unlisted pages with a topic ID. // See guides/agent-workflows/warp-vs-claude-code.mdx for an example. - docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ extend: topicSchema }) }), + // + // Custom fields added for the Guides card-based discovery page: + // - `tags`: topic/task tags for filtering (e.g. ["mcp", "agents", "docker"]) + // - `featured`: marks guides for the curated "Featured" section + docs: defineCollection({ + loader: docsLoader(), + schema: docsSchema({ + extend: (context) => { + const topic = typeof topicSchema === 'function' ? topicSchema(context) : topicSchema; + return topic.merge( + z.object({ + tags: z.array(z.string()).optional(), + featured: z.boolean().optional().default(false), + }), + ); + }, + }), + }), }; diff --git a/src/content/docs/guides/agent-workflows/how-to-edit-agent-code-in-warp.mdx b/src/content/docs/guides/agent-workflows/how-to-edit-agent-code-in-warp.mdx index 434a7e38..381734dd 100644 --- a/src/content/docs/guides/agent-workflows/how-to-edit-agent-code-in-warp.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-edit-agent-code-in-warp.mdx @@ -5,6 +5,9 @@ description: >- reject, or modify changes before applying them. sidebar: label: "Edit Agent code in Warp" +tags: + - "agents" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase.mdx b/src/content/docs/guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase.mdx index 02b00c8b..f539491e 100644 --- a/src/content/docs/guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase.mdx @@ -6,6 +6,10 @@ description: >- project. sidebar: label: "Explain your codebase using Warp" +tags: + - "agents" +featured: true + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx b/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx index f0c60083..c5e488d9 100644 --- a/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-review-ai-generated-code.mdx @@ -5,6 +5,10 @@ description: >- works with Claude Code, Codex, or any CLI agent. sidebar: label: "Review AI-generated code" +tags: + - "agents" + - "code-review" + --- Coding agents can produce hundreds of lines of code in seconds, but shipping that code without review is risky. This guide provides a practical workflow for reviewing agent-generated code in Warp, catching common issues, and giving structured feedback that the agent can act on. Plan on about 10 minutes to complete. diff --git a/src/content/docs/guides/agent-workflows/how-to-review-prs-like-a-senior-dev.mdx b/src/content/docs/guides/agent-workflows/how-to-review-prs-like-a-senior-dev.mdx index ffc49f3f..6b86b129 100644 --- a/src/content/docs/guides/agent-workflows/how-to-review-prs-like-a-senior-dev.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-review-prs-like-a-senior-dev.mdx @@ -5,6 +5,10 @@ description: >- assessment, critical issues, and merge confidence scoring. sidebar: label: "Review PRs like a senior dev" +tags: + - "agents" + - "code-review" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui.mdx b/src/content/docs/guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui.mdx index 0d4ab8cf..94f33466 100644 --- a/src/content/docs/guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui.mdx @@ -5,6 +5,10 @@ description: >- reviews, and summarize production logs in parallel. sidebar: label: "Run 3 agents in parallel" +tags: + - "agents" +featured: true + --- import { Tabs, TabItem } from '@astrojs/starlight/components'; import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx b/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx index 21f5e985..bbc53513 100644 --- a/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-run-multiple-ai-coding-agents.mdx @@ -6,6 +6,9 @@ description: >- once. sidebar: label: "Run multiple AI coding agents" +tags: + - "agents" + --- Different agents have different strengths. Claude Code might handle refactoring well while Codex might excel at test generation. Instead of choosing one, you can run them in parallel. Assign different tasks to different agents, compare their outputs on the same problem, or have one agent build while another reviews. This guide shows you how to set up a multi-agent workflow in Warp and manage it effectively. Plan on about 15 minutes. diff --git a/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx b/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx index c93c2681..ddf34338 100644 --- a/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents.mdx @@ -5,6 +5,9 @@ description: >- with Claude Code, Codex, and any CLI agent. sidebar: label: "Use voice and images to prompt coding agents" +tags: + - "agents" + --- Typing detailed prompts for coding agents can be slow. Describing a bug from a screenshot, dictating a complex refactoring plan, or explaining a UI change from a design mockup are examples of tasks that are faster with voice and images than with text alone. This guide shows you how to use multimodal input with any CLI coding agent running in Warp in about 5 minutes. diff --git a/src/content/docs/guides/agent-workflows/running-multiple-agents-at-once-with-warp.mdx b/src/content/docs/guides/agent-workflows/running-multiple-agents-at-once-with-warp.mdx index cce8860c..ef35f7ea 100644 --- a/src/content/docs/guides/agent-workflows/running-multiple-agents-at-once-with-warp.mdx +++ b/src/content/docs/guides/agent-workflows/running-multiple-agents-at-once-with-warp.mdx @@ -5,6 +5,9 @@ description: >- shortcuts, and add tests across repos without losing context. sidebar: label: "Run multiple agents at once" +tags: + - "agents" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx b/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx index ffbaa5cb..4eb2452e 100644 --- a/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx +++ b/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx @@ -5,6 +5,9 @@ description: >- generate architecture summaries, and onboard to unfamiliar features fast. sidebar: label: "Understand your codebase" +tags: + - "agents" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/agent-workflows/using-images-as-context-with-warp.mdx b/src/content/docs/guides/agent-workflows/using-images-as-context-with-warp.mdx index 82dbb86c..912eea0d 100644 --- a/src/content/docs/guides/agent-workflows/using-images-as-context-with-warp.mdx +++ b/src/content/docs/guides/agent-workflows/using-images-as-context-with-warp.mdx @@ -5,6 +5,9 @@ description: >- generate UI code, debug visual issues, and match Figma designs. sidebar: label: "Use images as context" +tags: + - "agents" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/agent-workflows/warp-for-product-managers.mdx b/src/content/docs/guides/agent-workflows/warp-for-product-managers.mdx index bac5158b..a7e04aca 100644 --- a/src/content/docs/guides/agent-workflows/warp-for-product-managers.mdx +++ b/src/content/docs/guides/agent-workflows/warp-for-product-managers.mdx @@ -3,6 +3,9 @@ title: "5 AI agent workflows for product managers" description: >- Five agent workflows that automate status updates, documentation, Slack search, and meeting prep for product managers. +tags: + - "agents" + --- Most PM work breaks down into three activities: gathering information, synthesizing it, and communicating the result. These five workflows use Warp's agents and MCP integrations to automate the gathering and speed up the synthesis, so you spend less time switching between tools and more time making decisions. Each workflow takes 5–10 minutes to set up. diff --git a/src/content/docs/guides/agent-workflows/warp-vs-claude-code.mdx b/src/content/docs/guides/agent-workflows/warp-vs-claude-code.mdx index 97448f83..963f50c9 100644 --- a/src/content/docs/guides/agent-workflows/warp-vs-claude-code.mdx +++ b/src/content/docs/guides/agent-workflows/warp-vs-claude-code.mdx @@ -7,6 +7,10 @@ description: >- # field associates the page with the Guides topic so starlight-sidebar-topics # can resolve it without listing it under any group. topic: guides +tags: + - "agents" + - "third-party-tools" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css.mdx b/src/content/docs/guides/build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css.mdx index 2ef40171..800c0388 100644 --- a/src/content/docs/guides/build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css.mdx +++ b/src/content/docs/guides/build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css.mdx @@ -5,6 +5,10 @@ description: >- coordinate multiple agents, and publish to the Chrome Web Store. sidebar: label: "Build a Chrome extension" +tags: + - "build-app" + - "frontend" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway.mdx b/src/content/docs/guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway.mdx index 52526d23..b453d118 100644 --- a/src/content/docs/guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway.mdx +++ b/src/content/docs/guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway.mdx @@ -5,6 +5,11 @@ description: >- from idea to production, all inside Warp. sidebar: label: "Build a real-time chat app" +tags: + - "build-app" + - "mcp" +featured: true + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/build-an-app-in-warp/building-a-slackbot.mdx b/src/content/docs/guides/build-an-app-in-warp/building-a-slackbot.mdx index ce6f06bc..998c049c 100644 --- a/src/content/docs/guides/build-an-app-in-warp/building-a-slackbot.mdx +++ b/src/content/docs/guides/build-an-app-in-warp/building-a-slackbot.mdx @@ -5,6 +5,9 @@ description: >- directly from Slack using Docker and GitHub integration. sidebar: label: "Build a Slackbot" +tags: + - "build-app" + --- import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/build-an-app-in-warp/building-warps-input-with-warp.mdx b/src/content/docs/guides/build-an-app-in-warp/building-warps-input-with-warp.mdx index 54a369bc..2661f526 100644 --- a/src/content/docs/guides/build-an-app-in-warp/building-warps-input-with-warp.mdx +++ b/src/content/docs/guides/build-an-app-in-warp/building-warps-input-with-warp.mdx @@ -5,6 +5,10 @@ description: >- a UI component change in a large Rust codebase. sidebar: label: "Build Warp's input component" +tags: + - "build-app" + - "frontend" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/configuration/creating-rules-for-agents.mdx b/src/content/docs/guides/configuration/creating-rules-for-agents.mdx index 5a46b6b3..69a10fce 100644 --- a/src/content/docs/guides/configuration/creating-rules-for-agents.mdx +++ b/src/content/docs/guides/configuration/creating-rules-for-agents.mdx @@ -5,6 +5,9 @@ description: >- patterns or dependency management — so agents follow your standards. sidebar: label: "Create Rules for Agents" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles.mdx b/src/content/docs/guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles.mdx index e93c7d6c..f91f0fb0 100644 --- a/src/content/docs/guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles.mdx +++ b/src/content/docs/guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles.mdx @@ -5,6 +5,9 @@ description: >- and execution speed — demonstrated with YOLO and Strategic examples. sidebar: label: "Configure YOLO and strategic Agent Profiles" +tags: + - "profiles" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind.mdx b/src/content/docs/guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind.mdx index 9b03c575..9b46704d 100644 --- a/src/content/docs/guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind.mdx +++ b/src/content/docs/guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind.mdx @@ -5,6 +5,10 @@ description: >- understand your project's setup, commands, architecture, and conventions. sidebar: label: "Create project Rules for an existing project" +tags: + - "rules" +featured: true + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps, FileTree } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/configuration/how-to-set-coding-best-practices.mdx b/src/content/docs/guides/configuration/how-to-set-coding-best-practices.mdx index c95ed7a4..bca70e0b 100644 --- a/src/content/docs/guides/configuration/how-to-set-coding-best-practices.mdx +++ b/src/content/docs/guides/configuration/how-to-set-coding-best-practices.mdx @@ -5,6 +5,9 @@ description: >- documentation quality across AI-generated code. sidebar: label: "Set coding best practices" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/configuration/how-to-set-coding-preferences-with-rules.mdx b/src/content/docs/guides/configuration/how-to-set-coding-preferences-with-rules.mdx index a8e79391..22c3e8cf 100644 --- a/src/content/docs/guides/configuration/how-to-set-coding-preferences-with-rules.mdx +++ b/src/content/docs/guides/configuration/how-to-set-coding-preferences-with-rules.mdx @@ -5,6 +5,9 @@ description: >- Rules so agents automatically use pnpm, miniconda, or your preferred tools. sidebar: label: "Set coding preferences with Rules" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/configuration/how-to-set-tech-stack-preferences-with-rules.mdx b/src/content/docs/guides/configuration/how-to-set-tech-stack-preferences-with-rules.mdx index ec6c63f2..968f4d43 100644 --- a/src/content/docs/guides/configuration/how-to-set-tech-stack-preferences-with-rules.mdx +++ b/src/content/docs/guides/configuration/how-to-set-tech-stack-preferences-with-rules.mdx @@ -5,6 +5,9 @@ description: >- consistently use Astro, SvelteKit, Vite, or your tools of choice. sidebar: label: "Set tech stack preferences with Rules" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills.mdx b/src/content/docs/guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills.mdx index d9d78fe2..ee19b8fb 100644 --- a/src/content/docs/guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills.mdx +++ b/src/content/docs/guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills.mdx @@ -5,6 +5,9 @@ description: >- Skills that map questions to dbt models and structure reproducible analyses. sidebar: label: "Set up self-serve data analytics with skills" +tags: + - "skills" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/configuration/how-to-sync-your-monorepos.mdx b/src/content/docs/guides/configuration/how-to-sync-your-monorepos.mdx index a8edcfc2..ec589421 100644 --- a/src/content/docs/guides/configuration/how-to-sync-your-monorepos.mdx +++ b/src/content/docs/guides/configuration/how-to-sync-your-monorepos.mdx @@ -5,6 +5,9 @@ description: >- client types automatically synchronized across repositories. sidebar: label: "Sync your monorepos" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/configuration/how-to-use-agent-profiles-efficiently.mdx b/src/content/docs/guides/configuration/how-to-use-agent-profiles-efficiently.mdx index 2fdb7fb5..391dee54 100644 --- a/src/content/docs/guides/configuration/how-to-use-agent-profiles-efficiently.mdx +++ b/src/content/docs/guides/configuration/how-to-use-agent-profiles-efficiently.mdx @@ -5,6 +5,9 @@ description: >- balance of planning, safety, and speed for your project. sidebar: label: "Use Agent Profiles efficiently" +tags: + - "profiles" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/configuration/trigger-reusable-actions-with-saved-prompts.mdx b/src/content/docs/guides/configuration/trigger-reusable-actions-with-saved-prompts.mdx index 51ac55c0..5a5f5e18 100644 --- a/src/content/docs/guides/configuration/trigger-reusable-actions-with-saved-prompts.mdx +++ b/src/content/docs/guides/configuration/trigger-reusable-actions-with-saved-prompts.mdx @@ -5,6 +5,9 @@ description: >- PR creation across your team. sidebar: label: "Trigger reusable actions with saved prompts" +tags: + - "rules" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/devops/how-to-analyze-cloud-run-logs-gcloud.mdx b/src/content/docs/guides/devops/how-to-analyze-cloud-run-logs-gcloud.mdx index e692ae45..a1b73978 100644 --- a/src/content/docs/guides/devops/how-to-analyze-cloud-run-logs-gcloud.mdx +++ b/src/content/docs/guides/devops/how-to-analyze-cloud-run-logs-gcloud.mdx @@ -5,6 +5,9 @@ description: >- severity with natural language prompts and automated Python scripts. sidebar: label: "Analyze cloud run logs" +tags: + - "cloud" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/how-to-create-a-production-ready-docker-setup.mdx b/src/content/docs/guides/devops/how-to-create-a-production-ready-docker-setup.mdx index d6b224d7..a516335b 100644 --- a/src/content/docs/guides/devops/how-to-create-a-production-ready-docker-setup.mdx +++ b/src/content/docs/guides/devops/how-to-create-a-production-ready-docker-setup.mdx @@ -5,6 +5,9 @@ description: >- configs, and .dockerignore files for multi-stage production deployments. sidebar: label: "Create a production-ready Docker setup" +tags: + - "docker" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/how-to-create-priority-matrix-for-database-optimization.mdx b/src/content/docs/guides/devops/how-to-create-priority-matrix-for-database-optimization.mdx index cde53bdb..7caf02cb 100644 --- a/src/content/docs/guides/devops/how-to-create-priority-matrix-for-database-optimization.mdx +++ b/src/content/docs/guides/devops/how-to-create-priority-matrix-for-database-optimization.mdx @@ -5,6 +5,9 @@ description: >- priority matrix ranking database optimizations by impact and effort. sidebar: label: "Create a priority matrix for database optimization" +tags: + - "database" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster.mdx b/src/content/docs/guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster.mdx index 2c426e56..572d7a47 100644 --- a/src/content/docs/guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster.mdx +++ b/src/content/docs/guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster.mdx @@ -5,6 +5,9 @@ description: >- including SQL injection, XSS, and auth validation checks. sidebar: label: "Generate unit and security tests to debug faster" +tags: + - "testing" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/how-to-prevent-secrets-from-leaking.mdx b/src/content/docs/guides/devops/how-to-prevent-secrets-from-leaking.mdx index 0d3f2086..fd4d2eb9 100644 --- a/src/content/docs/guides/devops/how-to-prevent-secrets-from-leaking.mdx +++ b/src/content/docs/guides/devops/how-to-prevent-secrets-from-leaking.mdx @@ -5,6 +5,9 @@ description: >- credentials from leaking in agent output, demos, and shared sessions. sidebar: label: "Prevent secrets from leaking" +tags: + - "cloud" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/how-to-write-sql-commands-inside-a-postgres-repl.mdx b/src/content/docs/guides/devops/how-to-write-sql-commands-inside-a-postgres-repl.mdx index cc6965cf..54626761 100644 --- a/src/content/docs/guides/devops/how-to-write-sql-commands-inside-a-postgres-repl.mdx +++ b/src/content/docs/guides/devops/how-to-write-sql-commands-inside-a-postgres-repl.mdx @@ -5,6 +5,9 @@ description: >- SQL queries — works with Node.js, Python, and MySQL too. sidebar: label: "Write SQL commands inside a Postgres REPL" +tags: + - "database" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/devops/improve-your-kubernetes-workflow-kubectl-helm.mdx b/src/content/docs/guides/devops/improve-your-kubernetes-workflow-kubectl-helm.mdx index 956a65ba..5b652215 100644 --- a/src/content/docs/guides/devops/improve-your-kubernetes-workflow-kubectl-helm.mdx +++ b/src/content/docs/guides/devops/improve-your-kubernetes-workflow-kubectl-helm.mdx @@ -5,6 +5,9 @@ description: >- suggestions, custom workflows, and synchronized panes. sidebar: label: "Improve your Kubernetes workflow" +tags: + - "kubernetes" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/context7-mcp-update-astro-project-with-best-practices.mdx b/src/content/docs/guides/external-tools/context7-mcp-update-astro-project-with-best-practices.mdx index cce05fc0..2114ba8a 100644 --- a/src/content/docs/guides/external-tools/context7-mcp-update-astro-project-with-best-practices.mdx +++ b/src/content/docs/guides/external-tools/context7-mcp-update-astro-project-with-best-practices.mdx @@ -5,6 +5,9 @@ description: >- framework documentation for automated project upgrades. sidebar: label: "Context7 MCP: update Astro project with best practices" +tags: + - "mcp" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch.mdx b/src/content/docs/guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch.mdx index da10d3be..e9a3c4d5 100644 --- a/src/content/docs/guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch.mdx +++ b/src/content/docs/guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch.mdx @@ -5,6 +5,10 @@ description: >- code directly from your design files. sidebar: label: "Figma remote MCP: create a website from a Figma file" +tags: + - "mcp" + - "frontend" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues.mdx b/src/content/docs/guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues.mdx index 651354bf..a4f71951 100644 --- a/src/content/docs/guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues.mdx +++ b/src/content/docs/guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues.mdx @@ -5,6 +5,10 @@ description: >- from TODO comments, and automate repo management. sidebar: label: "GitHub MCP: summarize open PRs and create GitHub issues" +tags: + - "mcp" + - "code-review" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/external-tools/how-to-set-up-claude-code.mdx b/src/content/docs/guides/external-tools/how-to-set-up-claude-code.mdx index f4b0044f..378d38f6 100644 --- a/src/content/docs/guides/external-tools/how-to-set-up-claude-code.mdx +++ b/src/content/docs/guides/external-tools/how-to-set-up-claude-code.mdx @@ -5,6 +5,9 @@ description: >- productivity tips — from voice prompting to visual code review. sidebar: label: "Set up Claude Code" +tags: + - "third-party-tools" + --- Claude Code is Anthropic's AI coding agent. It reads your codebase, writes and edits code, runs commands, and handles complex refactors using natural language prompts. This guide takes you from zero to a working Claude Code session in Warp in about 5 minutes, then shows you how to get the most out of it. diff --git a/src/content/docs/guides/external-tools/how-to-set-up-codex-cli.mdx b/src/content/docs/guides/external-tools/how-to-set-up-codex-cli.mdx index 6ea6efac..0124f9c1 100644 --- a/src/content/docs/guides/external-tools/how-to-set-up-codex-cli.mdx +++ b/src/content/docs/guides/external-tools/how-to-set-up-codex-cli.mdx @@ -5,6 +5,9 @@ description: >- productivity tips for faster AI-assisted coding workflows in Warp. sidebar: label: "Set up Codex CLI" +tags: + - "third-party-tools" + --- Codex CLI is OpenAI's open-source coding agent. It reads your codebase, edits files, and executes commands from natural language prompts. This guide takes you from installation to a working Codex session in Warp in about 5 minutes, then shows you how to get the most out of it. diff --git a/src/content/docs/guides/external-tools/how-to-set-up-gemini-cli.mdx b/src/content/docs/guides/external-tools/how-to-set-up-gemini-cli.mdx index 6be725af..d58df2c6 100644 --- a/src/content/docs/guides/external-tools/how-to-set-up-gemini-cli.mdx +++ b/src/content/docs/guides/external-tools/how-to-set-up-gemini-cli.mdx @@ -5,6 +5,9 @@ description: >- productivity tips for faster AI-assisted coding workflows. sidebar: label: "Set up Gemini CLI" +tags: + - "third-party-tools" + --- Gemini CLI is Google's open-source coding agent. It brings Gemini directly into your terminal with built-in tools for file operations, shell commands, web search, and MCP support. This guide takes you from installation to a working Gemini CLI session in Warp in about 5 minutes, then shows you how to get the most out of it. diff --git a/src/content/docs/guides/external-tools/how-to-set-up-ollama.mdx b/src/content/docs/guides/external-tools/how-to-set-up-ollama.mdx index 9df5eebb..220d0616 100644 --- a/src/content/docs/guides/external-tools/how-to-set-up-ollama.mdx +++ b/src/content/docs/guides/external-tools/how-to-set-up-ollama.mdx @@ -5,6 +5,9 @@ description: >- local models into your apps using Warp. sidebar: label: "Set up Ollama" +tags: + - "third-party-tools" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/external-tools/how-to-set-up-opencode.mdx b/src/content/docs/guides/external-tools/how-to-set-up-opencode.mdx index c7ac065e..1b83219b 100644 --- a/src/content/docs/guides/external-tools/how-to-set-up-opencode.mdx +++ b/src/content/docs/guides/external-tools/how-to-set-up-opencode.mdx @@ -5,6 +5,9 @@ description: >- productivity tips for faster AI-assisted coding workflows. sidebar: label: "Set up OpenCode" +tags: + - "third-party-tools" + --- OpenCode is an open-source coding agent that runs in your terminal. It supports 75+ LLM providers, features a built-in terminal UI (TUI), and lets you edit code, execute commands, and manage sessions from natural language prompts. This guide takes you from installation to a working OpenCode session in Warp in about 5 minutes, then shows you how to get the most out of it. diff --git a/src/content/docs/guides/external-tools/linear-mcp-retrieve-issue-data.mdx b/src/content/docs/guides/external-tools/linear-mcp-retrieve-issue-data.mdx index fa0e7699..4b19683a 100644 --- a/src/content/docs/guides/external-tools/linear-mcp-retrieve-issue-data.mdx +++ b/src/content/docs/guides/external-tools/linear-mcp-retrieve-issue-data.mdx @@ -3,6 +3,9 @@ title: "Linear MCP: Retrieve issue data" description: >- Add the Linear MCP server to Warp and query your issues, tasks, and assignments directly from the terminal. +tags: + - "mcp" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach.mdx b/src/content/docs/guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach.mdx index 6fb49991..1494f01c 100644 --- a/src/content/docs/guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach.mdx +++ b/src/content/docs/guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach.mdx @@ -5,6 +5,9 @@ description: >- changes to subtasks, and maintain a lean build strategy. sidebar: label: "Linear MCP: update tickets with a lean build approach" +tags: + - "mcp" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews.mdx b/src/content/docs/guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews.mdx index 0e0798f0..d3fddcab 100644 --- a/src/content/docs/guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews.mdx +++ b/src/content/docs/guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews.mdx @@ -5,6 +5,9 @@ description: >- navigating sites, scraping product data, and analyzing reviews. sidebar: label: "Puppeteer MCP: scrape Amazon web reviews" +tags: + - "mcp" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website.mdx b/src/content/docs/guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website.mdx index 7f07f7c5..1eb52fcc 100644 --- a/src/content/docs/guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website.mdx +++ b/src/content/docs/guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website.mdx @@ -5,6 +5,10 @@ description: >- traces, and auto-generate fixes for production issues. sidebar: label: "Sentry MCP: fix Sentry error in empower website" +tags: + - "mcp" +featured: true + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up.mdx b/src/content/docs/guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up.mdx index 9ded16a5..c775640a 100644 --- a/src/content/docs/guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up.mdx +++ b/src/content/docs/guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up.mdx @@ -5,6 +5,10 @@ description: >- against your local database and payment data. sidebar: label: "SQLite and Stripe MCP: basic queries you can make after setup" +tags: + - "mcp" + - "database" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/external-tools/using-mcp-servers-with-warp.mdx b/src/content/docs/guides/external-tools/using-mcp-servers-with-warp.mdx index 183ad825..58037ac6 100644 --- a/src/content/docs/guides/external-tools/using-mcp-servers-with-warp.mdx +++ b/src/content/docs/guides/external-tools/using-mcp-servers-with-warp.mdx @@ -5,6 +5,10 @@ description: >- and resolve tickets using external systems like Linear. sidebar: label: "Connect Agents to MCP servers" +tags: + - "mcp" +featured: true + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind.mdx b/src/content/docs/guides/frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind.mdx index 8ff1865a..1b2b3e1f 100644 --- a/src/content/docs/guides/frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind.mdx +++ b/src/content/docs/guides/frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind.mdx @@ -5,6 +5,9 @@ description: >- mockups, with structured specs and iterative refinement. sidebar: label: "Actually code UI that matches your mockup" +tags: + - "frontend" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase.mdx b/src/content/docs/guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase.mdx index f1455116..764514de 100644 --- a/src/content/docs/guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase.mdx +++ b/src/content/docs/guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase.mdx @@ -5,6 +5,9 @@ description: >- Rust codebase — with live diffs, auto-compilation, and self-correction. sidebar: label: "Replace a UI element in Warp" +tags: + - "frontend" + --- import VideoEmbed from '@components/VideoEmbed.astro'; import { Steps } from '@astrojs/starlight/components'; diff --git a/src/content/docs/guides/getting-started/10-coding-features-you-should-know.mdx b/src/content/docs/guides/getting-started/10-coding-features-you-should-know.mdx index ae95af78..42cfc193 100644 --- a/src/content/docs/guides/getting-started/10-coding-features-you-should-know.mdx +++ b/src/content/docs/guides/getting-started/10-coding-features-you-should-know.mdx @@ -5,6 +5,10 @@ description: >- find and replace, syntax highlighting, code review panel, and more. sidebar: label: "10 coding features you should know" +tags: + - "getting-started" + - "agents" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/getting-started/how-to-customize-warps-appearance.mdx b/src/content/docs/guides/getting-started/how-to-customize-warps-appearance.mdx index 0b9799f8..4eb37411 100644 --- a/src/content/docs/guides/getting-started/how-to-customize-warps-appearance.mdx +++ b/src/content/docs/guides/getting-started/how-to-customize-warps-appearance.mdx @@ -5,6 +5,9 @@ description: >- team collaboration, and visual appearance to fit your workflow. sidebar: label: "Customize Warp's appearance" +tags: + - "getting-started" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/getting-started/how-to-make-warps-ui-more-minimal.mdx b/src/content/docs/guides/getting-started/how-to-make-warps-ui-more-minimal.mdx index 31890412..ef89d695 100644 --- a/src/content/docs/guides/getting-started/how-to-make-warps-ui-more-minimal.mdx +++ b/src/content/docs/guides/getting-started/how-to-make-warps-ui-more-minimal.mdx @@ -5,6 +5,9 @@ description: >- theme, using the classic prompt, and hiding the tab bar. sidebar: label: "Make Warp's UI more minimal" +tags: + - "getting-started" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/getting-started/how-to-master-warps-code-review-panel.mdx b/src/content/docs/guides/getting-started/how-to-master-warps-code-review-panel.mdx index 04643fbc..2f33c0b6 100644 --- a/src/content/docs/guides/getting-started/how-to-master-warps-code-review-panel.mdx +++ b/src/content/docs/guides/getting-started/how-to-master-warps-code-review-panel.mdx @@ -6,6 +6,10 @@ description: >- terminal. sidebar: label: "Master Warp's Code Review panel" +tags: + - "getting-started" + - "code-review" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/getting-started/welcome-to-warp.mdx b/src/content/docs/guides/getting-started/welcome-to-warp.mdx index a7a2ba47..9bfa48d2 100644 --- a/src/content/docs/guides/getting-started/welcome-to-warp.mdx +++ b/src/content/docs/guides/getting-started/welcome-to-warp.mdx @@ -3,6 +3,9 @@ title: Welcome to Warp description: >- Get oriented with Warp's agentic terminal. Learn the basics of prompt-based coding, blending terminal and agent workflows, and navigating the interface. +tags: + - "getting-started" + --- import VideoEmbed from '@components/VideoEmbed.astro'; diff --git a/src/content/docs/guides/index.mdx b/src/content/docs/guides/index.mdx index 6df8c5c6..65b3f41f 100644 --- a/src/content/docs/guides/index.mdx +++ b/src/content/docs/guides/index.mdx @@ -6,30 +6,13 @@ description: >- builds. --- -Practical, task-oriented walkthroughs that help you get productive with Warp's coding agents. Each guide walks through a real AI coding workflow with actual prompts, code, and reproducible results. +import GuidesLanding from '@components/GuidesLanding.astro'; -Browse by topic in the sidebar, or start with one of these featured guides. +Practical, task-oriented walkthroughs that help you get productive with Warp's coding agents. Each guide walks through a real AI coding workflow with actual prompts, code, and reproducible results. :::note **New to Warp?** Start with [Welcome to Warp](/guides/getting-started/welcome-to-warp/), then explore [10 Warp Coding Features You Should Know](/guides/getting-started/10-coding-features-you-should-know/). ::: -## Featured guides - -- [**Explain your codebase with agents**](/guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase/) — Use semantic and symbol search to explore and understand unfamiliar code. -- [**Create project rules**](/guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind/) — Set up an AGENTS.md file so coding agents always understand your project’s setup and conventions. -- [**Fix errors with Sentry MCP**](/guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website/) — Connect the Sentry MCP server to Warp and auto-diagnose production errors. -- [**Run multiple agents in parallel**](/guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui/) — Work on coding, debugging, and analysis tasks simultaneously across tabs. -- [**Build a real-time chat app**](/guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway/) — Go from idea to deployed app with FastAPI, JavaScript, and GitHub MCP — all inside Warp. -- [**Connect agents to external tools**](/guides/external-tools/using-mcp-servers-with-warp/) — Set up MCP servers to give agents access to Linear, GitHub, Figma, and more. - -## What’s in this section - -* **Getting started** — First steps with Warp: setup, appearance, key features -* **Agent workflows** — Use coding agents to explain code, review PRs, and run parallel tasks -* **Configuration** — Rules, agent profiles, saved prompts, and monorepo sync -* **External tools & integrations** — Connect coding agents to Sentry, Figma, Linear, GitHub, and more via MCP -* **Build an app in Warp** — End-to-end app builds with AI coding workflows: chat apps, Chrome extensions, Slackbots -* **DevOps & infrastructure** — Agent-assisted cloud logs, Docker, Kubernetes, testing, and database optimization -* **Frontend & UI** — Build and refine UI components with coding agents + diff --git a/src/sidebar.ts b/src/sidebar.ts index 98c98b44..183fbc7d 100644 --- a/src/sidebar.ts +++ b/src/sidebar.ts @@ -572,6 +572,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ { slug: 'guides', label: 'Guides' }, { label: 'Getting started', + collapsed: true, items: [ 'guides/getting-started/welcome-to-warp', { slug: 'guides/getting-started/10-coding-features-you-should-know', label: '10 Warp Coding Features You Should Know' }, @@ -582,6 +583,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'Agent workflows', + collapsed: true, items: [ { slug: 'guides/agent-workflows/how-to-review-ai-generated-code', label: 'Review AI-Generated Code' }, { slug: 'guides/agent-workflows/how-to-run-multiple-ai-coding-agents', label: 'Run Multiple AI Coding Agents' }, @@ -598,6 +600,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'Configuration', + collapsed: true, items: [ { slug: 'guides/configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind', label: 'Create Project Rules' }, { slug: 'guides/configuration/how-to-set-coding-best-practices', label: 'Set Coding Best Practices with Rules' }, @@ -613,6 +616,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'External tools & integrations', + collapsed: true, items: [ { slug: 'guides/external-tools/how-to-set-up-claude-code', label: 'Set Up Claude Code' }, { slug: 'guides/external-tools/how-to-set-up-codex-cli', label: 'Set Up Codex CLI' }, @@ -632,6 +636,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'Build an app in Warp', + collapsed: true, items: [ { slug: 'guides/build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway', label: 'Build a Real-time Chat App' }, { slug: 'guides/build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css', label: 'Build a Chrome Extension' }, @@ -641,6 +646,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'DevOps & infrastructure', + collapsed: true, items: [ { slug: 'guides/devops/how-to-analyze-cloud-run-logs-gcloud', label: 'Analyze Cloud Run Logs (gcloud)' }, { slug: 'guides/devops/how-to-create-a-production-ready-docker-setup', label: 'Create a Production-Ready Docker Setup' }, @@ -653,6 +659,7 @@ export const sidebarTopics: StarlightSidebarTopicsUserConfig = [ }, { label: 'Frontend & UI', + collapsed: true, items: [ { slug: 'guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase', label: 'Replace a UI Element (Rust Codebase)' }, { slug: 'guides/frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind', label: 'Code UI That Matches Your Mockup (React + Tailwind)' }, diff --git a/src/styles/custom.css b/src/styles/custom.css index 6d9bfdab..78b1b109 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -349,3 +349,139 @@ body { .sl-markdown-content li > :is(ul, ol) { margin-top: 0.5rem; } + +/* -------------------------------------------------------------------------- + Guides: Card-based discovery page + + Filter pills + card grid for the /guides/ landing page. + Visually distinct from the site-wide topic nav: smaller rounded pills + placed below the page intro, clearly scoped to filtering the grid below. + -------------------------------------------------------------------------- */ +.warp-guide-filters { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--sl-color-hairline-light); +} + +.warp-guide-filter-pill { + appearance: none; + border: 1px solid var(--sl-color-gray-5); + border-radius: 9999px; + background: transparent; + color: var(--sl-color-gray-3); + font-family: var(--sl-font); + font-size: var(--sl-text-xs); + font-weight: 500; + padding: 0.3rem 0.75rem; + cursor: pointer; + transition: all 0.15s ease; + white-space: nowrap; +} + +.warp-guide-filter-pill:hover { + color: var(--sl-color-white); + border-color: var(--sl-color-gray-3); +} + +.warp-guide-filter-pill.active { + background: var(--sl-color-accent); + border-color: var(--sl-color-accent); + color: #fff; +} + +:root[data-theme='light'] .warp-guide-filter-pill.active { + color: #fff; +} + +.warp-guide-section { + margin-bottom: 2rem; +} + +.warp-guide-section-heading { + font-size: var(--sl-text-sm); + font-weight: 600; + color: var(--sl-color-gray-3); + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 1rem; +} + +.warp-guide-card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1rem; +} + +.warp-guide-card { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1.25rem; + border: 1px solid var(--sl-color-hairline-light); + border-radius: var(--sl-radius-md); + background: transparent; + text-decoration: none; + color: inherit; + transition: border-color 0.15s ease, background 0.15s ease; +} + +.warp-guide-card:hover { + border-color: var(--sl-color-gray-5); + background: var(--sl-color-gray-6); +} + +.warp-guide-card-category { + font-size: var(--sl-text-2xs); + font-weight: 600; + color: var(--sl-color-accent); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +:root[data-theme='light'] .warp-guide-card-category { + color: var(--sl-color-accent); +} + +.warp-guide-card-title { + font-size: var(--sl-text-body); + font-weight: 600; + color: var(--sl-color-white); + margin: 0; + line-height: 1.3; +} + +.warp-guide-card-desc { + font-size: var(--sl-text-sm); + color: var(--sl-color-gray-3); + margin: 0; + line-height: 1.5; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.warp-guide-card-tags { + display: flex; + flex-wrap: wrap; + gap: 0.375rem; + margin-top: auto; + padding-top: 0.25rem; +} + +.warp-guide-card-tag { + font-size: var(--sl-text-2xs); + color: var(--sl-color-gray-4); + border: 1px solid var(--sl-color-gray-5); + border-radius: var(--sl-radius-sm); + padding: 0.125rem 0.5rem; + line-height: 1.4; +} + +.warp-guide-empty { + color: var(--sl-color-gray-4); + font-style: italic; +} From e5dc055113c8c1e0cfb15f84acda66a826847830 Mon Sep 17 00:00:00 2001 From: Rachael Rose Renk <91027132+rachaelrenk@users.noreply.github.com> Date: Sun, 17 May 2026 15:03:23 -1000 Subject: [PATCH 2/3] fix: resolve TypeScript error in content.config.ts topicSchema is a Zod object (not a function), so pass it directly to docsSchema.extend instead of wrapping in a typeof check. Co-Authored-By: Oz --- src/content.config.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/content.config.ts b/src/content.config.ts index 8d3237be..592ef93d 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -15,15 +15,12 @@ export const collections = { docs: defineCollection({ loader: docsLoader(), schema: docsSchema({ - extend: (context) => { - const topic = typeof topicSchema === 'function' ? topicSchema(context) : topicSchema; - return topic.merge( - z.object({ - tags: z.array(z.string()).optional(), - featured: z.boolean().optional().default(false), - }), - ); - }, + extend: topicSchema.merge( + z.object({ + tags: z.array(z.string()).optional(), + featured: z.boolean().optional().default(false), + }), + ), }), }), }; From 95b8bbdf9acd151f950fa7c8a812a379a0aff45a Mon Sep 17 00:00:00 2001 From: Rachael Rose Renk <91027132+rachaelrenk@users.noreply.github.com> Date: Mon, 18 May 2026 16:14:59 -1000 Subject: [PATCH 3/3] fix: remove card hover underline, make Featured a filter pill - Add text-decoration: none override on .warp-guide-card:hover and child elements to prevent Starlight's global link underline from cascading into card text - Rework Featured from a subsection of 'All' to its own filter pill (default active). 'All' now shows everything flat with no special section. Single card grid with data-featured attributes for JS filtering. Co-Authored-By: Oz --- src/components/GuidesLanding.astro | 112 +++++++++++++---------------- src/styles/custom.css | 6 ++ 2 files changed, 54 insertions(+), 64 deletions(-) diff --git a/src/components/GuidesLanding.astro b/src/components/GuidesLanding.astro index d1abd1f9..e919a757 100644 --- a/src/components/GuidesLanding.astro +++ b/src/components/GuidesLanding.astro @@ -55,12 +55,22 @@ const categories = Object.keys(CATEGORY_LABELS).filter((cat) => ---
- {/* Filter pills */} + {/* Filter pills — Featured is the default; All shows everything flat */}
+ {featured.length > 0 && ( + + )}
- {/* Featured section */} - {featured.length > 0 && ( -
-

Featured

- -
- )} - - {/* All guides */} -
- {featured.length > 0 &&

All guides

} - -
+ {/* Single card grid — filtering is handled client-side */} +
diff --git a/src/styles/custom.css b/src/styles/custom.css index df3a0590..f23ad9cd 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -434,6 +434,12 @@ body { .warp-guide-card:hover { border-color: var(--sl-color-gray-5); background: var(--sl-color-gray-6); + text-decoration: none; +} + +/* Prevent Starlight's global link underline from cascading into card text */ +.warp-guide-card:hover * { + text-decoration: none; } .warp-guide-card-category {