Render getting started snippets with syntax highlighter

[gblikas]

Summary

• register the HLJS bash language alongside SQL and TypeScript so the getting-started drawer can highlight every snippet with react-syntax-highlighter
• wrap each quick-start code block in a scrollable container with pre-wrap styling so the code renders visibly beneath the transparent copy button

Testing

• pnpm lint
• pnpm test

---

https://chatgpt.com/codex/tasks/task_e_68d87d9d01ec8320817d25ef162ae1c6

---

Note

Adds a right-side "Getting started" drawer with copyable, syntax-highlighted snippets and small UX tweaks (query param open, conditional results button).

• UI/Docs:
  • Getting-started Drawer: Introduces a right-side drawer with quick-start sections (install, schema, usage) rendered via SyntaxHighlighter and a copy-to-clipboard button per block.
  • Registers bash and typescript languages (in addition to sql) for syntax highlighting.
  • Adds new icons and Drawer components; sections defined via quickStartSections.
• UX:
  • Supports ?drawer=open to auto-open the drawer.
  • Hides the floating Results toggle while the drawer is open.
  • Copy feedback state for snippets and improved code block styling (scrollable, pre-wrap, preserved long lines).

^{Written by Cursor Bugbot for commit 5b90553. This will update automatically on new commits. Configure here.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
querykit	Ready	Preview	Comment	Sep 29, 2025 3:48am

[Copilot]

Pull Request Overview

Adds a "Getting started" drawer to the QueryKit demo page with syntax-highlighted code snippets for installation, schema definition, and usage examples.

• Introduces a right-side drawer component with copyable, syntax-highlighted code blocks
• Registers additional language support (bash, typescript) for syntax highlighting
• Adds UX improvements like auto-opening via query parameter and conditional UI visibility

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}