mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
d46cc88f09
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Docs enhancement: Agent-ready prompt blocks on all 18 framework quickstart pages. ## What is the current behavior? Framework quickstarts do not surface a copyable AI prompt. Readers have to assemble context themselves when asking an AI coding assistant to follow the guide. ## What is the new behavior? - Partials at `apps/docs/content/_partials/ai/quickstart_prompt_{framework}.mdx` contain `<AiPrompt prompt={...} />` (Prettier multiline single-quoted JS string with `\n` escapes). - Each quickstart includes `<$Partial path="ai/quickstart_prompt_{framework}.mdx" />`. - Runtime: `AiPrompt` → `PromptPanel` (Copy AI Prompt, expandable). - Markdown export: `apps/docs/internals/markdown-schema/AiPrompt.ts` decodes Prettier single-quoted prompt expressions so exported markdown includes an **AI Prompt** section without quote leak. - Shared `$Partial` helpers live in `lib/partials.utils.ts`. - Closes DOCS-1144. ### Example before/after | | Production | Preview | | --- | --- | --- | | Next.js quickstart | [production](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs) | [preview](https://docs-git-nikrichers-docs-1144-add-ai-prompt-blo-5af4d8-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs) | **Light** | Before | After | | --- | --- | |  |  | **Dark** | Before | After | | --- | --- | |  |  | ### Test plan - [x] Preview renders AI Prompt panel with copy - [x] Spot-check Next.js, Flutter, Expo, Vue - [x] `test-quickstart-prompts` structural - [x] Markdown export includes **AI Prompt** without quote leak - [x] Format CI green after prettier/single-quote decode fix ## Additional context - Worktree: `~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1144-add-ai-prompt-blocks-to-all-18-framework-quickstarts` - Skills: `generate-quickstart-prompts` / `test-quickstart-prompts`; librarian update https://github.com/supabase/docs-agent-skills/pull/21 - `PromptPanel` replaced the older GlassPanel experiment for the expandable copy UI --------- Co-authored-by: Nik Richers <nik@validmind.ai> Co-authored-by: jeremenichelli <jeremenichelli@users.noreply.github.com>
Directives
Directives are a custom feature of the Supabase docs content system, which allows you to extend MDX to provide custom functionality.
Why not a React component?
MDX supports React components, and that is the preferred way to add new features. If your use case is supported by a React component alone, use that instead.
Custom directives are used to implement features that need low-level parse or compile-time control over the MDX AST.
Syntax
We reserve a special syntax for directives, which start with a $ sign. For example:
<$CodeSample />
This syntax was chosen because it is both:
- Sufficiently standard to be supported by MDX parsers without needing to build a custom extension.
- Sufficiently uncommon to avoid collisions with other React components used in docs.