mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
4bda3bfe72
## 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 UI refactor. ## What is the current behavior? Framework quickstarts and several other homepage grids used `IconPanel` / `IconPanelWithIconPicker`, which brought redundant tooltips (duplicating the visible title), inconsistent hover treatment, and circular icon tiles that didn't match the intended squarish look. | Before | | --- | | <img width="1744" height="626" alt="CleanShot 2026-07-24 at 14 29 44@2x" src="https://github.com/user-attachments/assets/1e145be2-19c9-4bd0-bf06-17516acbc774" /> | ## What is the new behavior? Introduces a shared `IconLink` used across the docs homepage (and reference index) so icon+label tiles share the same composition and hover: icon tile fill matches the surrounding surface (`surface-100`), with a stronger border on hover, and the row uses `hover:bg-accent`. Framework quickstarts keep the larger tile size; other sections keep the smaller size. Also aligns Explore more GlassPanels with Build your backend by using the same bordered background treatment. | After | | --- | | <img width="2478" height="906" alt="CleanShot 2026-07-24 at 15 09 48@2x" src="https://github.com/user-attachments/assets/dd516845-c162-47e4-8b86-9a7fa0e73290" /> | ## Additional context Removes the unused `IconPanelWithIconPicker` wrapper now that homepage/reference consumers go through `IconLink`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added reusable `IconLink` UI for consistent docs tiles, including `IconLinkList`, menu icon, and light/dark icon rendering. * Introduced `FrameworkQuickstarts` to generate quickstart links based on feature-flag-enabled SDKs. * **UI / Improvements** * Updated the docs home and API reference pages to use the new list-based icon-link layout. * Refreshed migration guides and “Explore more”/self-hosting sections (including accessibility and updated CTA text). * **Bug Fixes** * Migration guide items now omit entries missing required details. * **Chores / Cleanup** * Removed the older icon panel picker-based UI component and its usage. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
93 lines
2.3 KiB
TypeScript
93 lines
2.3 KiB
TypeScript
import { isFeatureEnabled } from 'common'
|
|
|
|
import { IconLinkImage, IconLinkList } from '@/features/ui/IconLink'
|
|
|
|
const {
|
|
sdkDart: sdkDartEnabled,
|
|
sdkKotlin: sdkKotlinEnabled,
|
|
sdkSwift: sdkSwiftEnabled,
|
|
} = isFeatureEnabled(['sdk:dart', 'sdk:kotlin', 'sdk:swift'])
|
|
|
|
const frameworks = [
|
|
{
|
|
name: 'React',
|
|
icon: '/docs/img/icons/react-icon',
|
|
href: '/guides/getting-started/quickstarts/reactjs',
|
|
},
|
|
{
|
|
name: 'Next.js',
|
|
icon: '/docs/img/icons/nextjs-icon',
|
|
href: '/guides/getting-started/quickstarts/nextjs',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'TanStack Start',
|
|
icon: '/docs/img/icons/tanstack-icon',
|
|
href: '/guides/getting-started/quickstarts/tanstack',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Astro',
|
|
icon: '/docs/img/icons/astro-icon',
|
|
href: '/guides/getting-started/quickstarts/astrojs',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Vue',
|
|
icon: '/docs/img/icons/vuejs-icon',
|
|
href: '/guides/getting-started/quickstarts/vue',
|
|
},
|
|
{
|
|
name: 'Nuxt',
|
|
icon: '/docs/img/icons/nuxt-icon',
|
|
href: '/guides/getting-started/quickstarts/nuxtjs',
|
|
},
|
|
{
|
|
name: 'iOS Swift',
|
|
icon: '/docs/img/icons/swift-icon-orange',
|
|
href: '/guides/getting-started/quickstarts/ios-swiftui',
|
|
enabled: sdkSwiftEnabled,
|
|
},
|
|
{
|
|
name: 'Android Kotlin',
|
|
icon: '/docs/img/icons/kotlin-icon',
|
|
href: '/guides/getting-started/quickstarts/kotlin',
|
|
enabled: sdkKotlinEnabled,
|
|
},
|
|
{
|
|
name: 'Expo React Native',
|
|
icon: '/docs/img/icons/expo-icon',
|
|
href: '/guides/getting-started/quickstarts/expo-react-native',
|
|
hasLightIcon: true,
|
|
},
|
|
{
|
|
name: 'Flutter',
|
|
icon: '/docs/img/icons/flutter-icon',
|
|
href: '/guides/getting-started/quickstarts/flutter',
|
|
enabled: sdkDartEnabled,
|
|
},
|
|
{
|
|
name: 'Python',
|
|
icon: '/docs/img/icons/python-icon',
|
|
href: '/guides/getting-started/quickstarts/flask',
|
|
},
|
|
]
|
|
|
|
export function FrameworkQuickstarts({ labelledBy }: { labelledBy?: string }) {
|
|
return (
|
|
<IconLinkList
|
|
labelledBy={labelledBy}
|
|
size="lg"
|
|
items={frameworks
|
|
.filter((framework) => framework.enabled !== false)
|
|
.map((framework) => ({
|
|
title: framework.name,
|
|
href: framework.href,
|
|
icon: (
|
|
<IconLinkImage path={framework.icon} hasLightIcon={framework.hasLightIcon} size="lg" />
|
|
),
|
|
}))}
|
|
/>
|
|
)
|
|
}
|