diff --git a/src/components/GuidesLanding.astro b/src/components/GuidesLanding.astro new file mode 100644 index 00000000..77a20c7f --- /dev/null +++ b/src/components/GuidesLanding.astro @@ -0,0 +1,236 @@ +--- +// 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. +// +// Categories use a problem/solution (use-case) taxonomy that cuts across +// the filesystem directory structure. Each guide is assigned to exactly +// one category via the GUIDE_CATEGORIES map below. +import { getCollection } from 'astro:content'; + +// Use-case categories — ordered as they appear in the filter pill bar. +const CATEGORY_LABELS: Record = { + setup: 'Set up your environment', + agents: 'Work with agents', + automate: 'Automate your workflow', + connect: 'Connect external services', + 'build-deploy': 'Build & deploy apps', + 'review-debug': 'Review & debug', +}; + +// Map guide paths (relative to guides/) to use-case categories. +// Guides not listed here fall back to a directory-based default. +const GUIDE_CATEGORIES: Record = { + // Set up your environment — first steps + tool installation + 'getting-started/welcome-to-warp': 'setup', + 'getting-started/10-coding-features-you-should-know': 'setup', + 'getting-started/how-to-customize-warps-appearance': 'setup', + 'getting-started/how-to-make-warps-ui-more-minimal': 'setup', + 'external-tools/how-to-set-up-claude-code': 'setup', + 'external-tools/how-to-set-up-codex-cli': 'setup', + 'external-tools/how-to-set-up-gemini-cli': 'setup', + 'external-tools/how-to-set-up-ollama': 'setup', + 'external-tools/how-to-set-up-opencode': 'setup', + + // Work with agents — prompting, voice, images, parallel tasks + 'agent-workflows/how-to-attach-agent-session-context-to-github-prs': 'agents', + 'agent-workflows/how-to-run-unattended-agents': 'agents', + 'agent-workflows/how-to-run-multiple-ai-coding-agents': 'agents', + 'agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents': 'agents', + 'agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase': 'agents', + 'agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui': 'agents', + 'agent-workflows/how-to-edit-agent-code-in-warp': 'agents', + 'agent-workflows/using-images-as-context-with-warp': 'agents', + 'agent-workflows/understanding-your-codebase': 'agents', + 'agent-workflows/running-multiple-agents-at-once-with-warp': 'agents', + 'agent-workflows/warp-for-product-managers': 'agents', + 'agent-workflows/warp-vs-claude-code': 'agents', + + // Automate your workflow — rules, profiles, prompts, skills + 'configuration/how-to-create-project-rules-for-an-existing-project-astro-typescript-tailwind': 'automate', + 'configuration/how-to-set-coding-best-practices': 'automate', + 'configuration/how-to-set-tech-stack-preferences-with-rules': 'automate', + 'configuration/how-to-set-coding-preferences-with-rules': 'automate', + 'configuration/how-to-configure-yolo-and-strategic-agent-profiles': 'automate', + 'configuration/how-to-use-agent-profiles-efficiently': 'automate', + 'configuration/creating-rules-for-agents': 'automate', + 'configuration/trigger-reusable-actions-with-saved-prompts': 'automate', + 'configuration/how-to-set-up-self-serve-data-analytics-with-skills': 'automate', + 'configuration/how-to-sync-your-monorepos': 'automate', + + // Connect external services — MCP servers + 'external-tools/sentry-mcp-fix-sentry-error-in-empower-website': 'connect', + 'external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch': 'connect', + 'external-tools/linear-mcp-retrieve-issue-data': 'connect', + 'external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach': 'connect', + 'external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues': 'connect', + 'external-tools/puppeteer-mcp-scraping-amazon-web-reviews': 'connect', + 'external-tools/context7-mcp-update-astro-project-with-best-practices': 'connect', + 'external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up': 'connect', + 'external-tools/using-mcp-servers-with-warp': 'connect', + + // Build & deploy apps — end-to-end builds, Docker, K8s, cloud, frontend + 'build-an-app-in-warp/building-a-real-time-chat-app-github-mcp-railway': 'build-deploy', + 'build-an-app-in-warp/building-a-chrome-extension-d3js-javascript-html-css': 'build-deploy', + 'build-an-app-in-warp/building-warps-input-with-warp': 'build-deploy', + 'devops/how-to-analyze-cloud-run-logs-gcloud': 'build-deploy', + 'devops/how-to-create-a-production-ready-docker-setup': 'build-deploy', + 'devops/improve-your-kubernetes-workflow-kubectl-helm': 'build-deploy', + 'frontend/how-to-actually-code-ui-that-matches-your-mockup-react-tailwind': 'build-deploy', + 'frontend/how-to-replace-a-ui-element-in-warp-rust-codebase': 'build-deploy', + + // Review & debug — PR review, code review, testing, database, secrets + 'agent-workflows/how-to-review-ai-generated-code': 'review-debug', + 'agent-workflows/how-to-review-prs-like-a-senior-dev': 'review-debug', + 'getting-started/how-to-master-warps-code-review-panel': 'review-debug', + 'devops/how-to-generate-unit-and-security-tests-to-debug-faster': 'review-debug', + 'devops/how-to-write-sql-commands-inside-a-postgres-repl': 'review-debug', + 'devops/how-to-create-priority-matrix-for-database-optimization': 'review-debug', + 'devops/how-to-prevent-secrets-from-leaking': 'review-debug', +}; + +/** Resolve a guide's use-case category from its path. */ +function resolveCategory(guideId: string): string { + // Strip 'guides/' prefix and file extension to get the lookup key + const key = guideId.replace(/^guides\//, '').replace(/\.mdx?$/, ''); + return GUIDE_CATEGORIES[key] || 'agents'; // fallback +} + +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 = resolveCategory(doc.id); + 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 (preserving CATEGORY_LABELS order) +const categories = Object.keys(CATEGORY_LABELS).filter((cat) => + guides.some((g) => g.category === cat), +); +--- + +
+ {/* Filter pills — Featured is the default; All shows everything flat */} +
+ {featured.length > 0 && ( + + )} + + {categories.map((cat) => { + const count = guides.filter((g) => g.category === cat).length; + return ( + + ); + })} +
+ + {/* Single card grid — filtering is handled client-side */} +
+ {guides.map((guide) => ( + + {guide.categoryLabel} +

{guide.title}

+ {guide.description &&

{guide.description}

} + {guide.tags.length > 0 && ( +
+ {guide.tags.map((tag) => ( + {tag} + ))} +
+ )} + + ))} +
+
+ + diff --git a/src/content.config.ts b/src/content.config.ts index 7097d029..592ef93d 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -2,10 +2,25 @@ 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: topicSchema.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..8e70185e 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 @@ -1,10 +1,13 @@ --- -title: "How to: Edit Agent Code in Warp" +title: "Edit agent code in Warp" description: >- Review, edit, and refine AI-generated code diffs directly in Warp — accept, reject, or modify changes before applying them. sidebar: - label: "Edit Agent code in Warp" + 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 2db32d1c..d6a2e76f 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 @@ -1,11 +1,14 @@ --- -title: "How to: Explain Your Codebase Using Warp (Rust Codebase)" +title: "Explain your codebase using Warp (Rust codebase)" description: >- Use Warp's coding agents with semantic and symbol search to explore, understand, and modify unfamiliar codebases — demonstrated on a large Rust project. sidebar: label: "Explain your codebase using Warp" +tags: + - "agents" + --- 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 6a48accb..9f31eb4c 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 @@ -1,10 +1,15 @@ --- -title: How to review AI-generated code +title: Review AI-generated code description: >- Review AI-generated code in Warp with visual diffs and inline comments — works with Claude Code, Codex, or any CLI agent. sidebar: label: "Review AI-generated code" +featured: true +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..bec8af7d 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 @@ -1,10 +1,14 @@ --- -title: "How To: Review PRs Like A Senior Dev" +title: "Review PRs like a senior dev" description: >- Prompt Warp's coding agent to generate structured PR reviews with risk 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 abb07843..c1569bc0 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 @@ -1,10 +1,13 @@ --- -title: "How To: Run 3 Agents in Parallel" +title: "Run 3 agents in parallel" description: >- Run three agent tasks simultaneously in Warp — modify UI, analyze code reviews, and summarize production logs in parallel. sidebar: label: "Run 3 agents in parallel" +tags: + - "agents" + --- 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 77aa871a..da177d24 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 @@ -1,10 +1,14 @@ --- -title: How to run multiple AI coding agents +title: Run multiple AI coding agents description: >- Run Claude Code, Codex, Warp Agent, and other coding agents across worktrees, tabs, and cloud orchestration with clear task ownership. sidebar: label: "Run multiple AI coding agents" +featured: true +tags: + - "agents" + --- Use multiple coding agents, including Warp Agent, Claude Code, Codex, and other CLI agents, when work can be split into independent tasks, reviewed from separate branches, or delegated to cloud agents while you keep working locally. In Warp, you can coordinate agents in three ways: diff --git a/src/content/docs/guides/agent-workflows/how-to-run-unattended-agents.mdx b/src/content/docs/guides/agent-workflows/how-to-run-unattended-agents.mdx index da98e7ed..6b9bc188 100644 --- a/src/content/docs/guides/agent-workflows/how-to-run-unattended-agents.mdx +++ b/src/content/docs/guides/agent-workflows/how-to-run-unattended-agents.mdx @@ -5,6 +5,7 @@ description: >- the Oz CLI, or the Oz API, then inspect every run. sidebar: label: "Run unattended agents" +featured: true tags: - "agents" - "cloud-agents" 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 48c403e5..c3a98ae4 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 @@ -1,10 +1,13 @@ --- -title: How to use voice and images to prompt coding agents +title: Use voice and images to prompt coding agents description: >- Use voice and image context to prompt coding agents faster in Warp — works 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 32f29df9..a89d0bc8 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 @@ -1,10 +1,13 @@ --- -title: Running Multiple Agents At Once With Warp +title: Run multiple agents at once with Warp description: >- Run multiple agent tasks simultaneously in Warp — revert PRs, edit 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..94ef3a05 100644 --- a/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx +++ b/src/content/docs/guides/agent-workflows/understanding-your-codebase.mdx @@ -1,10 +1,13 @@ --- -title: Understanding Your Codebase +title: Understand your codebase description: >- Use Warp's Codebase Context to search across client and server repos, 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..71b29d0d 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 @@ -1,10 +1,13 @@ --- -title: Using Images As Context With Warp +title: Use images as context with Warp description: >- Attach screenshots and design mockups as context for Warp's agent to 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 a919f6ce..171b086a 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 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 03e94f7b..27051f63 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 @@ -1,10 +1,14 @@ --- -title: Building a Chrome Extension (D3.js + Javascript + HTML + CSS) +title: Build a Chrome extension (D3.js + JavaScript + HTML + CSS) description: >- Build a D3.js Sankey diagram Chrome extension using Warp — scaffold, debug, 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 f5383744..9826cb18 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 @@ -1,10 +1,14 @@ --- -title: Building a Real-time Chat App (GitHub MCP + Railway) +title: Build a real-time chat app (GitHub MCP + Railway) description: >- Build and deploy a real-time chat app with Python, FastAPI, and JavaScript — from idea to production, all inside Warp. sidebar: label: "Build a real-time chat app" +tags: + - "build-app" + - "mcp" + --- 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-warps-input-with-warp.mdx b/src/content/docs/guides/build-an-app-in-warp/building-warps-input-with-warp.mdx index 54a369bc..bd9a65f4 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 @@ -1,10 +1,14 @@ --- -title: Building Warp's Input - With Warp +title: Build Warp's input with Warp description: >- Watch how a Warp designer uses Warp's own agent to locate, modify, and test 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..9137375d 100644 --- a/src/content/docs/guides/configuration/creating-rules-for-agents.mdx +++ b/src/content/docs/guides/configuration/creating-rules-for-agents.mdx @@ -1,10 +1,13 @@ --- -title: Creating Rules For Agents +title: Create Rules for agents description: >- Create reusable Rules in Warp to encode team conventions — like Dockerfile patterns or dependency management — so agents follow your standards. sidebar: - label: "Create Rules for Agents" + 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..84973b85 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 @@ -1,10 +1,13 @@ --- -title: "How To: Configure YOLO and Strategic Agent Profiles" +title: "Configure YOLO and strategic Agent Profiles" description: >- Configure custom agent profiles in Warp to control planning depth, autonomy, 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..434d6a84 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 @@ -1,10 +1,13 @@ --- -title: "How To: Create Project Rules for an Existing Project" +title: "Create project Rules for an existing project" description: >- Create and maintain an AGENTS.md project rules file so coding agents always understand your project's setup, commands, architecture, and conventions. sidebar: label: "Create project Rules for an existing project" +tags: + - "rules" + --- 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..ed2ae5d4 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 @@ -1,10 +1,13 @@ --- -title: "How To: Set Coding Best Practices" +title: "Set coding best practices" description: >- Use Warp Rules to enforce coding style, TypeScript conventions, and 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 20cc92d4..eba0abdb 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 @@ -1,10 +1,13 @@ --- -title: "How To: Set Coding Preferences with Rules" +title: "Set coding preferences with Rules" description: >- Store your package manager, environment tool, and CLI preferences as Warp 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..0620bb1d 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 @@ -1,10 +1,13 @@ --- -title: "How To: Set Tech Stack Preferences with Rules" +title: "Set tech stack preferences with Rules" description: >- Define your preferred frameworks and tech stack in Warp Rules so agents 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 d3e7bcdd..c1242afb 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 @@ -1,10 +1,13 @@ --- -title: "How to set up self-serve data analytics with Skills" +title: "Set up self-serve data analytics with Skills" description: >- Set up a self-serve data analytics workflow in Warp using two community 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..5b552c3c 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 @@ -1,10 +1,13 @@ --- -title: "How To: Sync Your Monorepos" +title: "Sync your monorepos" description: >- Define global Rules in Warp to keep monorepo schemas, server types, and 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..6a74b4ba 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 @@ -1,10 +1,13 @@ --- -title: "How To: Use Agent Profiles Efficiently" +title: "Use Agent Profiles efficiently" description: >- Compare Strategic and YOLO agent profiles side-by-side to choose the right 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..184faf72 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 @@ -1,10 +1,13 @@ --- -title: Trigger Reusable Actions With Saved Prompts +title: Trigger reusable actions with saved prompts description: >- Save and share prompts in Warp Drive to automate commits, code reviews, and 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..b98166ab 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 @@ -1,10 +1,13 @@ --- -title: "How to: Analyze Cloud Run Logs (gcloud)" +title: "Analyze Cloud Run logs (gcloud)" description: >- Use Warp to pull, organize, and analyze Cloud Run production logs by severity with natural language prompts and automated Python scripts. sidebar: - label: "Analyze cloud run logs" + 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..eaa25977 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 @@ -1,10 +1,13 @@ --- -title: "How To: Create a Production Ready Docker Setup" +title: "Create a production-ready Docker setup" description: >- Use Agents in Warp to generate optimized Dockerfiles, docker-compose 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..2d1c5935 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 @@ -1,10 +1,13 @@ --- -title: "How To: Create Priority Matrix for Database Optimization" +title: "Create a priority matrix for database optimization" description: >- Prompt Warp to audit SQL queries, analyze execution plans, and generate a 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..a1589752 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 @@ -1,10 +1,13 @@ --- -title: "How to: Generate Unit and Security Tests to Debug Faster" +title: "Generate unit and security tests to debug faster" description: >- Prompt Warp to generate comprehensive unit and security tests for REST APIs, 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 5766225f..9a307ecf 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 @@ -1,10 +1,13 @@ --- -title: "How To: Prevent Secrets from Leaking" +title: "Prevent secrets from leaking" description: >- Use Warp Rules and built-in secret reduction to prevent API keys and 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 fef8338b..dccb8975 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 @@ -1,10 +1,13 @@ --- -title: "How To: Write SQL Commands inside a Postgres REPL" +title: "Write SQL commands inside a Postgres REPL" description: >- Use Agents in Warp inside a Postgres REPL to translate natural language into 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..47960225 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 @@ -1,10 +1,13 @@ --- -title: Improve Your Kubernetes Workflow (kubectl + helm) +title: Improve your Kubernetes workflow (kubectl + Helm) description: >- Streamline kubectl and Helm workflows with Warp's AI assistance, active 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..16c4a667 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 @@ -1,10 +1,13 @@ --- -title: "Context7 MCP: Update Astro Project with Best Practices" +title: "Context7 MCP: update Astro project with best practices" description: >- Use the Context7 MCP server to give Warp agents real-time access to 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..4d9c0419 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 @@ -1,10 +1,14 @@ --- -title: "Figma Remote MCP: Create a Website from a Figma File" +title: "Figma remote MCP: create a website from a Figma file" description: >- Connect Warp to Figma's remote MCP server via OAuth and generate front-end 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 c1ddc252..a5b6f6b1 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 @@ -1,10 +1,14 @@ --- -title: "GitHub MCP: Summarizing Open PRs & Creating GH Issues" +title: "GitHub MCP: summarize open PRs and create GitHub issues" description: >- Connect the GitHub MCP server to Warp to summarize open PRs, create issues 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 caa582b9..443f9106 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 @@ -1,10 +1,14 @@ --- -title: How to set up Claude Code +title: Set up Claude Code description: >- Set up Claude Code in Warp, configure it for your project, and learn productivity tips — from voice prompting to visual code review. sidebar: label: "Set up Claude Code" +featured: true +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 5a9716c1..749ca2c5 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 @@ -1,10 +1,13 @@ --- -title: How to set up Codex CLI +title: Set up Codex CLI description: >- Set up OpenAI's Codex CLI in Warp, configure it for your project, and learn 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 6d395e60..c54f4ef2 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 @@ -1,10 +1,13 @@ --- -title: How to set up Gemini CLI +title: Set up Gemini CLI description: >- Set up Google's Gemini CLI in Warp, configure it for your project, and learn 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..90680c56 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 @@ -1,10 +1,13 @@ --- -title: How To Set Up Ollama +title: Set up Ollama description: >- Install Ollama, run LLMs locally, compare model performance, and integrate 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 8c169e19..dffba9de 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 @@ -1,10 +1,13 @@ --- -title: How to set up OpenCode +title: Set up OpenCode description: >- Set up OpenCode in Warp, configure it for your project, and learn 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 fe9a8f4d..5f781e4f 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 @@ -1,8 +1,11 @@ --- -title: "Linear MCP: Retrieve issue data" +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..9fdefa54 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 @@ -1,10 +1,13 @@ --- -title: "Linear MCP: Updating Tickets with a Lean Build Approach" +title: "Linear MCP: update tickets with a lean build approach" description: >- Use Warp's Linear MCP integration to update ticket descriptions, propagate 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 d4fd6466..9194f968 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 @@ -1,10 +1,13 @@ --- -title: "Puppeteer MCP: Scraping Amazon Web Reviews" +title: "Puppeteer MCP: scrape Amazon web reviews" description: >- Configure the Puppeteer MCP server in Warp to automate browser tasks like 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 fd938c3f..f26bc5d1 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 @@ -1,10 +1,13 @@ --- -title: "Sentry MCP: Fix Sentry Error in Empower Website" +title: "Sentry MCP: fix Sentry error in Empower website" description: >- Connect the Sentry MCP server to Warp, fetch live error data, diagnose stack traces, and auto-generate fixes for production issues. sidebar: label: "Sentry MCP: fix Sentry error in empower website" +tags: + - "mcp" + --- 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..cdf8a595 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 @@ -1,10 +1,14 @@ --- -title: "SQLite and Stripe MCP: Basic Queries You Can Make After Set Up" +title: "SQLite and Stripe MCP: basic queries you can make after setup" description: >- Connect SQLite and Stripe MCP servers to Warp and run conversational queries 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 64068d48..931419e5 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 @@ -4,7 +4,7 @@ description: >- Use MCP servers to connect Warp agents to developer tools like GitHub, Linear, Sentry, and Figma across local and cloud agent workflows. sidebar: - label: "Connect Agents to MCP servers" + label: "Connect agents to MCP servers" tags: - "mcp" featured: true 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..01e56b4d 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 @@ -1,10 +1,13 @@ --- -title: "How To: Code UI That Matches Your Mockup" +title: "Code UI that matches your mockup" description: >- Prompt Warp to generate pixel-perfect React + Tailwind code from design mockups, with structured specs and iterative refinement. sidebar: - label: "Actually code UI that matches your mockup" + label: "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 34bdede2..b380e0df 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 @@ -1,10 +1,13 @@ --- -title: "How To: Replace A UI Element in Warp (Rust Codebase)" +title: "Replace a UI element in Warp (Rust codebase)" description: >- Use Agent Mode in Warp to plan and execute icon replacements across a large 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..bf15dc86 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 @@ -1,10 +1,15 @@ --- -title: 10 Coding Features You Should Know +title: 10 coding features you should know description: >- Discover 10 essential coding features in Warp — file search, tabbed editor, find and replace, syntax highlighting, code review panel, and more. sidebar: label: "10 coding features you should know" +featured: true +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 fd7df39d..bf30a766 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 @@ -1,10 +1,13 @@ --- -title: "How to: Customize Warp's Appearance" +title: "Customize Warp's appearance" description: >- Customize Warp's themes, input placement, AI settings, codebase indexing, 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..3bcddbd7 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 @@ -1,11 +1,15 @@ --- -title: How To Master Warp's Code Review Panel +title: Master Warp's Code Review panel description: >- Use Warp's Code Review Panel to view file diffs, edit code inline, componentize changes, and commit directly — all without leaving the 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 44f771bd..dce5952d 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 54a7a9fc..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 and Chrome extensions -* **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 472aff30..9c56c366 100644 --- a/src/sidebar.ts +++ b/src/sidebar.ts @@ -622,91 +622,98 @@ 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' }, - { slug: 'guides/getting-started/how-to-customize-warps-appearance', label: 'Customize Warp\'s Appearance' }, - { slug: 'guides/getting-started/how-to-make-warps-ui-more-minimal', label: 'Make Warp\'s UI More Minimal' }, - { slug: 'guides/getting-started/how-to-master-warps-code-review-panel', label: 'Master Warp\'s Code Review Panel' }, + { slug: 'guides/getting-started/10-coding-features-you-should-know', label: '10 coding features you should know' }, + { slug: 'guides/getting-started/how-to-customize-warps-appearance', label: 'Customize Warp\'s appearance' }, + { slug: 'guides/getting-started/how-to-make-warps-ui-more-minimal', label: 'Make Warp\'s UI more minimal' }, + { slug: 'guides/getting-started/how-to-master-warps-code-review-panel', label: 'Master Warp\'s Code Review panel' }, ], }, { 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-attach-agent-session-context-to-github-prs', label: 'Attach Agent Context to PRs' }, - { slug: 'guides/agent-workflows/how-to-run-unattended-agents', label: 'Run Agents Unattended' }, - { slug: 'guides/agent-workflows/how-to-run-multiple-ai-coding-agents', label: 'Run Multiple AI Coding Agents' }, - { slug: 'guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents', label: 'Use Voice and Images to Prompt Agents' }, - { slug: 'guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase', label: 'Explain Your Codebase with Agents' }, - { slug: 'guides/agent-workflows/warp-for-product-managers', label: '5 AI Agent Workflows for Product Managers' }, - { slug: 'guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui', label: 'Run Tasks in Parallel' }, - { slug: 'guides/agent-workflows/how-to-edit-agent-code-in-warp', label: 'Edit Agent-Generated Code in Warp' }, - { slug: 'guides/agent-workflows/how-to-review-prs-like-a-senior-dev', label: 'Review PRs Like a Senior Dev' }, - { slug: 'guides/agent-workflows/using-images-as-context-with-warp', label: 'Use Images as Context for Agents' }, - { slug: 'guides/agent-workflows/understanding-your-codebase', label: 'Understand a Large Codebase with Agents' }, - { slug: 'guides/agent-workflows/running-multiple-agents-at-once-with-warp', label: 'Coordinate Agents on Separate Tasks' }, + { slug: 'guides/agent-workflows/how-to-review-ai-generated-code', label: 'Review AI-generated code' }, + { slug: 'guides/agent-workflows/how-to-attach-agent-session-context-to-github-prs', label: 'Attach agent context to PRs' }, + { slug: 'guides/agent-workflows/how-to-run-unattended-agents', label: 'Run agents unattended' }, + { slug: 'guides/agent-workflows/how-to-run-multiple-ai-coding-agents', label: 'Run multiple AI coding agents' }, + { slug: 'guides/agent-workflows/how-to-use-voice-and-images-to-prompt-coding-agents', label: 'Use voice and images to prompt agents' }, + { slug: 'guides/agent-workflows/how-to-explain-your-codebase-using-warp-rust-codebase', label: 'Explain your codebase with agents' }, + { slug: 'guides/agent-workflows/warp-for-product-managers', label: '5 agent workflows for product managers' }, + { slug: 'guides/agent-workflows/how-to-run-3-agents-in-parallel-summarize-logs-analyze-pr-modify-ui', label: 'Run tasks in parallel' }, + { slug: 'guides/agent-workflows/how-to-edit-agent-code-in-warp', label: 'Edit agent-generated code in Warp' }, + { slug: 'guides/agent-workflows/how-to-review-prs-like-a-senior-dev', label: 'Review PRs like a senior dev' }, + { slug: 'guides/agent-workflows/using-images-as-context-with-warp', label: 'Use images as context for agents' }, + { slug: 'guides/agent-workflows/understanding-your-codebase', label: 'Understand a large codebase with agents' }, + { slug: 'guides/agent-workflows/running-multiple-agents-at-once-with-warp', label: 'Coordinate agents on separate tasks' }, ], }, { 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' }, - { slug: 'guides/configuration/how-to-set-tech-stack-preferences-with-rules', label: 'Set Tech Stack Preferences with Rules' }, - { slug: 'guides/configuration/how-to-set-coding-preferences-with-rules', label: 'Set Coding Preferences with Rules' }, - { slug: 'guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles', label: 'Configure Agent Profiles (YOLO & Strategic)' }, - { slug: 'guides/configuration/how-to-use-agent-profiles-efficiently', label: 'Use Agent Profiles Efficiently' }, - { slug: 'guides/configuration/creating-rules-for-agents', label: 'Create Reusable Rules for Your Team' }, - { slug: 'guides/configuration/trigger-reusable-actions-with-saved-prompts', label: 'Trigger Reusable Actions with Saved Prompts' }, - { slug: 'guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills', label: 'Set Up Self-Serve Data Analytics with Skills' }, - { slug: 'guides/configuration/how-to-sync-your-monorepos', label: 'Sync Your Monorepos' }, + { 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' }, + { slug: 'guides/configuration/how-to-set-tech-stack-preferences-with-rules', label: 'Set tech stack preferences with Rules' }, + { slug: 'guides/configuration/how-to-set-coding-preferences-with-rules', label: 'Set coding preferences with Rules' }, + { slug: 'guides/configuration/how-to-configure-yolo-and-strategic-agent-profiles', label: 'Configure Agent Profiles (YOLO & strategic)' }, + { slug: 'guides/configuration/how-to-use-agent-profiles-efficiently', label: 'Use Agent Profiles efficiently' }, + { slug: 'guides/configuration/creating-rules-for-agents', label: 'Create reusable Rules for your team' }, + { slug: 'guides/configuration/trigger-reusable-actions-with-saved-prompts', label: 'Trigger reusable actions with saved prompts' }, + { slug: 'guides/configuration/how-to-set-up-self-serve-data-analytics-with-skills', label: 'Set up self-serve data analytics with Skills' }, + { slug: 'guides/configuration/how-to-sync-your-monorepos', label: 'Sync your monorepos' }, ], }, { 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' }, - { slug: 'guides/external-tools/how-to-set-up-opencode', label: 'Set Up OpenCode' }, - { slug: 'guides/external-tools/how-to-set-up-gemini-cli', label: 'Set Up Gemini CLI' }, - { slug: 'guides/external-tools/how-to-set-up-ollama', label: 'Set Up Ollama for Local Models' }, - { slug: 'guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website', label: 'Sentry MCP: Fix Errors' }, - { slug: 'guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch', label: 'Figma Remote MCP: Create a Website from a Figma File' }, - { slug: 'guides/external-tools/linear-mcp-retrieve-issue-data', label: 'Linear MCP: Retrieve Issue Data' }, - { slug: 'guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach', label: 'Linear MCP: Updating Tickets' }, - { slug: 'guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues', label: 'GitHub MCP: Summarizing PRs & Creating Issues' }, - { slug: 'guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews', label: 'Puppeteer MCP: Scraping Web Reviews' }, - { slug: 'guides/external-tools/context7-mcp-update-astro-project-with-best-practices', label: 'Context7 MCP: Update with Best Practices' }, - { slug: 'guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up', label: 'SQLite and Stripe MCP: Basic Queries' }, - { slug: 'guides/external-tools/using-mcp-servers-with-warp', label: 'Connect Agents to MCP Servers' }, + { 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' }, + { slug: 'guides/external-tools/how-to-set-up-opencode', label: 'Set up OpenCode' }, + { slug: 'guides/external-tools/how-to-set-up-gemini-cli', label: 'Set up Gemini CLI' }, + { slug: 'guides/external-tools/how-to-set-up-ollama', label: 'Set up Ollama for local models' }, + { slug: 'guides/external-tools/sentry-mcp-fix-sentry-error-in-empower-website', label: 'Sentry MCP: fix errors' }, + { slug: 'guides/external-tools/figma-remote-mcp-create-a-website-from-a-figma-file-from-scratch', label: 'Figma remote MCP: create a website from a Figma file' }, + { slug: 'guides/external-tools/linear-mcp-retrieve-issue-data', label: 'Linear MCP: retrieve issue data' }, + { slug: 'guides/external-tools/linear-mcp-updating-tickets-with-a-lean-build-approach', label: 'Linear MCP: update tickets' }, + { slug: 'guides/external-tools/github-mcp-summarizing-open-prs-and-creating-gh-issues', label: 'GitHub MCP: summarize PRs and create issues' }, + { slug: 'guides/external-tools/puppeteer-mcp-scraping-amazon-web-reviews', label: 'Puppeteer MCP: scrape web reviews' }, + { slug: 'guides/external-tools/context7-mcp-update-astro-project-with-best-practices', label: 'Context7 MCP: update with best practices' }, + { slug: 'guides/external-tools/sqlite-and-stripe-mcp-basic-queries-you-can-make-after-set-up', label: 'SQLite and Stripe MCP: basic queries' }, + { slug: 'guides/external-tools/using-mcp-servers-with-warp', label: 'Connect agents to MCP servers' }, ], }, { 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' }, - { slug: 'guides/build-an-app-in-warp/building-warps-input-with-warp', label: 'Build Warp\'s Own Input Component' }, + { 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' }, + { slug: 'guides/build-an-app-in-warp/building-warps-input-with-warp', label: 'Build Warp\'s input component' }, ], }, { 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' }, - { slug: 'guides/devops/improve-your-kubernetes-workflow-kubectl-helm', label: 'Improve Your Kubernetes Workflow' }, - { slug: 'guides/devops/how-to-prevent-secrets-from-leaking', label: 'Prevent Secrets from Leaking' }, - { slug: 'guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster', label: 'Generate Unit and Security Tests' }, - { slug: 'guides/devops/how-to-write-sql-commands-inside-a-postgres-repl', label: 'Write SQL Commands in a Postgres REPL' }, - { slug: 'guides/devops/how-to-create-priority-matrix-for-database-optimization', label: 'Create a Priority Matrix for Database Optimization' }, + { 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' }, + { slug: 'guides/devops/improve-your-kubernetes-workflow-kubectl-helm', label: 'Improve your Kubernetes workflow' }, + { slug: 'guides/devops/how-to-prevent-secrets-from-leaking', label: 'Prevent secrets from leaking' }, + { slug: 'guides/devops/how-to-generate-unit-and-security-tests-to-debug-faster', label: 'Generate unit and security tests' }, + { slug: 'guides/devops/how-to-write-sql-commands-inside-a-postgres-repl', label: 'Write SQL commands in a Postgres REPL' }, + { slug: 'guides/devops/how-to-create-priority-matrix-for-database-optimization', label: 'Create a priority matrix for database optimization' }, ], }, { 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)' }, + { slug: 'guides/frontend/how-to-replace-a-ui-element-in-warp-rust-codebase', label: 'Replace a UI element in Warp (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 3f334744..b8fa8009 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -352,3 +352,147 @@ 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; + /* 220px min allows 3 columns in the ~730px content area beside the sidebar */ + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 0.75rem; +} + +.warp-guide-card { + display: flex; + flex-direction: column; + gap: 0.25rem; + padding: 0.875rem 1rem; + 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); + 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 { + font-size: var(--sl-text-2xs); + font-weight: 600; + color: var(--sl-color-accent); + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1.2; +} + +:root[data-theme='light'] .warp-guide-card-category { + color: var(--sl-color-accent); +} + +.warp-guide-card-title { + font-size: var(--sl-text-sm); + font-weight: 600; + color: var(--sl-color-white); + margin: 0; + line-height: 1.3; +} + +.warp-guide-card-desc { + font-size: var(--sl-text-2xs); + color: var(--sl-color-gray-3); + margin: 0; + line-height: 1.45; + display: -webkit-box; + -webkit-line-clamp: 2; + -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; +}