mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35: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 -->
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { aiPrompts } from '~/data/ai-prompts.data'
|
|
import { fromMarkdown } from 'mdast-util-from-markdown'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { AiPrompt } from './AiPrompt'
|
|
|
|
describe('AiPrompt markdown schema', () => {
|
|
it('omits prompts by default', () => {
|
|
expect(AiPrompt({ props: { id: 'nextjs' } })).toBe('')
|
|
})
|
|
|
|
it('serializes an opted-in prompt from the shared registry', () => {
|
|
const markdown = AiPrompt({
|
|
props: { id: 'nextjs', includeInMarkdown: true },
|
|
})
|
|
|
|
expect(markdown).toContain('**Agent Prompt**')
|
|
expect(markdown).toContain('Help me add Supabase to my Next.js project.')
|
|
expect(markdown).toContain('```text')
|
|
})
|
|
|
|
it.each(Object.keys(aiPrompts).filter((id) => id.startsWith('monitoring-')))(
|
|
'exports the complete shared %s prompt when opted in',
|
|
(id) => {
|
|
const markdown = AiPrompt({ props: { id, includeInMarkdown: true } })
|
|
const codeBlocks = fromMarkdown(markdown).children.filter((node) => node.type === 'code')
|
|
expect(codeBlocks).toHaveLength(1)
|
|
expect(codeBlocks[0]).toMatchObject({
|
|
lang: 'text',
|
|
value: aiPrompts[id as keyof typeof aiPrompts],
|
|
})
|
|
}
|
|
)
|
|
|
|
it('fails clearly for an unknown opted-in prompt', () => {
|
|
expect(() => AiPrompt({ props: { id: 'missing-prompt', includeInMarkdown: true } })).toThrow(
|
|
'Unknown AiPrompt id: missing-prompt'
|
|
)
|
|
})
|
|
})
|