Files
b04da949aa Docs/dropzone cursor vue nuxt (#41553)
## 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?

This pull request adds documentation and support for the Dropzone (File
Upload) and Realtime Cursor components for both Vue and Nuxt.js
frameworks in the UI library. It updates the sidebar navigation,
introduces new documentation pages, and ensures these components are
referenced in the project overview and component listings.

TODO: install new dependencies and resolve conflicts in lock.json

## Additional context

Initiative by Terry :)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added Dropzone and Realtime Cursor components for Vue and Nuxt.js
(file upload with previews/validation; collaborative cursor tracking).

* **Documentation**
* Added comprehensive Vue and Nuxt.js docs and registry entries for
Dropzone and Realtime Cursor with usage examples and API guidance.

* **Bug Fixes**
* Fixed text escaping in several authentication and UI components for
consistent rendering.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Terry Sutton <saltcod@gmail.com>
Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-01-30 10:49:29 -03:30

147 lines
3.8 KiB
TypeScript

import { SidebarNavGroup } from '@/types/nav'
export const gettingStarted: SidebarNavGroup = {
title: 'Getting Started',
items: [
{
title: 'Introduction',
href: '/docs/getting-started/introduction',
items: [],
commandItemLabel: 'Introduction',
},
{
title: 'Quick Start',
href: '/docs/getting-started/quickstart',
items: [],
commandItemLabel: 'Quick Start',
},
{
title: 'FAQ',
href: '/docs/getting-started/faq',
items: [],
commandItemLabel: 'FAQ',
},
],
}
export const aiEditorsRules: SidebarNavGroup = {
title: 'AI Editors Rules',
items: [
{
title: 'Prompts',
href: '/docs/ai-editors-rules/prompts',
items: [],
commandItemLabel: 'AI Editors Rules',
},
],
}
export const platformBlocks: SidebarNavGroup = {
title: 'Platform',
items: [
{
title: 'Platform Kit',
href: '/docs/platform/platform-kit',
items: [],
commandItemLabel: 'Platform Kit',
},
],
}
// Component definitions with supported frameworks
export const componentPages: SidebarNavGroup = {
title: 'Components',
items: [
{
title: 'Client',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
href: '/docs/nextjs/client',
items: [],
commandItemLabel: 'Supabase Client',
},
{
title: 'Password-Based Auth',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
href: '/docs/nextjs/password-based-auth',
items: [],
commandItemLabel: 'Password-Based Auth',
},
{
title: 'Social Auth',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
href: '/docs/nextjs/social-auth',
items: [],
new: true,
commandItemLabel: 'Social Auth',
},
{
title: 'Dropzone',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
href: '/docs/nextjs/dropzone',
items: [],
commandItemLabel: 'Dropzone (File Upload)',
},
{
title: 'Realtime Cursor',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react', 'vue', 'nuxtjs'],
href: '/docs/nextjs/realtime-cursor',
items: [],
commandItemLabel: 'Realtime Cursor',
},
{
title: 'Current User Avatar',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
href: '/docs/nextjs/current-user-avatar',
items: [],
commandItemLabel: 'Current User Avatar',
},
{
title: 'Realtime Avatar Stack',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
href: '/docs/nextjs/realtime-avatar-stack',
items: [],
commandItemLabel: 'Realtime Avatar Stack',
},
{
title: 'Realtime Chat',
supportedFrameworks: ['nextjs', 'react-router', 'tanstack', 'react'],
href: '/docs/nextjs/realtime-chat',
items: [],
commandItemLabel: 'Realtime Chat',
},
{
title: 'Infinite Query Hook',
supportedFrameworks: [],
href: '/docs/infinite-query-hook',
new: true,
items: [],
commandItemLabel: 'Infinite Query Hook',
},
],
}
export const COMMAND_ITEMS = [
...gettingStarted.items.map((item) => ({
label: item.commandItemLabel,
href: item.href,
})),
...aiEditorsRules.items.map((item) => ({
label: item.commandItemLabel,
href: item.href,
})),
...componentPages.items.map((item) => ({
label: item.commandItemLabel,
href: item.href,
})),
]
// Framework titles for display
export const frameworkTitles: Record<string, string> = {
nextjs: 'Next.js',
'react-router': 'React Router',
tanstack: 'TanStack Start',
react: 'React SPA',
vue: 'Vue',
nuxtjs: 'Nuxt.js',
}