mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
## What kind of change does this PR introduce? docs ui polish for the prompt panel on the docs homepage and in the quickstarts ## What is the current behavior? agent prompt renders as one run on paragraph steps read as "1. ... 2. ... 3. ..." inline making it hard to read ## What is the new behavior? - sets prompt bodies as markdown for easier readability - adds long prompts collapse - removes panel tab icons - uses panel code block ui - makes active tab has an underline on first paint `home` | state | preview | | -------|------| | before | <img width="709" height="344" alt="image" src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9" /> | | after | <img width="709" height="344" alt="image" src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9" /> | `quickstart` | state | preview | | -------|------| | before | <img width="862" height="344" alt="image" src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de" /> | | after | <img width="862" height="344" alt="image" src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Prompts now support Markdown formatting, inline code chips, expandable content, and improved hover-reveal behavior. * Code-copy controls support customizable labels and clearer screen-reader announcements. * Prompt tabs and panels have updated styling, spacing, and active-content handling. * **UI Improvements** * Setup and agent prompts now use consistent Markdown-rendered presentation. * Prompt headings now display “Agent Prompt.” * Home page setup code blocks use a more compact layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
22 lines
638 B
TypeScript
22 lines
638 B
TypeScript
import { aiPrompts, type AiPromptId } from '~/data/ai-prompts.data'
|
|
import { toMarkdown } from 'mdast-util-to-markdown'
|
|
|
|
type HandlerContext = {
|
|
props: Record<string, unknown>
|
|
}
|
|
|
|
export function AiPrompt({ props }: HandlerContext): string {
|
|
const includeInMarkdown = props.includeInMarkdown === true || props.includeInMarkdown === 'true'
|
|
|
|
if (!includeInMarkdown) return ''
|
|
|
|
const id = String(props.id ?? '')
|
|
const prompt = aiPrompts[id as AiPromptId]
|
|
|
|
if (!prompt) {
|
|
throw new Error(`Unknown AiPrompt id: ${id}`)
|
|
}
|
|
|
|
return `**Agent Prompt**\n\n${toMarkdown({ type: 'code', lang: 'text', value: prompt }).trimEnd()}`
|
|
}
|