mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
### FAQ (`type: 'faq'`) Accordion-style FAQ with expand/collapse. Each item has a `question` and `answer`. Click to toggle — only one open at a time. <img width="1309" height="610" alt="Screenshot 2026-03-13 at 17 31 31" src="https://github.com/user-attachments/assets/289c8a12-3835-4f64-bbe6-fb7095df4e7c" /> ### Code Block (`type: 'code-block'`) Syntax-highlighted code display using shiki with custom Supabase dark/light themes. Supports: - **Single file** — `code` + optional `filename` + `language` - **Multi-file** — `files: [{ filename, code, language }]` with clickable tabs - Line numbers via CSS counters - All highlighting runs at build time (server component), only tab switching is client-side <img width="1283" height="415" alt="Screenshot 2026-03-13 at 17 32 07" src="https://github.com/user-attachments/assets/9cc9a215-d5c9-47c9-8e21-c1dd3beca4ba" /> ### Steps (`type: 'steps'`) Numbered step-by-step guide with a vertical timeline connector. Each item has `title` and either a plain `description` string or a `content` slot accepting any React node (e.g. images, code blocks). <img width="1119" height="810" alt="Screenshot 2026-03-13 at 17 32 20" src="https://github.com/user-attachments/assets/cb67aaab-9ed4-42e2-bf1c-8d836024e469" /> ### Quote (`type: 'quote'`) Centered testimonial block with `quote`, `author`, optional `role`, and optional `avatar` image. <img width="1095" height="238" alt="Screenshot 2026-03-13 at 17 32 37" src="https://github.com/user-attachments/assets/356a39ca-9f65-4414-bf77-6060993594a4" />