+
+
+ {listing.images?.map((image, i) => (
+
+
+ ))}
+
+
+
+ )}
+
+
+
+ {focusedImage !== image && (
+ setFocusedImage(image)}
+ >
+
+ )}
+
+
+
+ {isNarrow &&
+
+ {listing.installUrl && (
+
+
+ {!isNarrow && + Overview +
+
+ {'error' in overview ? (
+
+ Error rendering integration page: {overview.error.message}
+ ) : ( + // @ts-expect-error: CodeHike puts its components under the CH namespace +
+
+ )}
+
+ )
+}
+
+function DashboardIntegrationTab({
+ listing,
+ partner,
+ isNarrow,
+}: {
+ listing: IntegrationListing
+ partner: Partner
+ isNarrow: boolean
+}) {
+ const typeLabel = listing.type === 'wrapper' ? 'Foreign Data Wrapper' : 'Dashboard Integration'
+
+ return (
+
+
+ Get started with {partner.title} and Supabase.
+ + + +
+ {isNarrow &&
+ )
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+function PartnerInner({ partner, overview }: PartnerData) {
const [focusedImage, setFocusedImage] = useState
+
+ {!isNarrow &&
+
+
+ + {listing.name} +
+ {listing.description && ( +{listing.description}
+ )} +
+ {listing.dashboardUrl && (
+
+ )}
+ {listing.docsUrl && (
+
+ )}
+
+
- {/* Back button */}
+ {/* Back */}
+ {/* Partner header */}
- {(partner.images?.length ?? 0) > 0 && (
-
-
- {partner.images?.map((image: any, i: number) => {
- return (
-
-
- )
- })}
-
-
- )}
-
-
-
-
- {focusedImage !== image && (
- setFocusedImage(image)}
- >
-
- )}
-
-
-
- {isNarrow &&
+ {listing.type === 'guide' ? (
+
+ ))}
+
+ ) : (
+ // Single listing: render content directly, no tabs
+
@@ -253,113 +364,102 @@ function Partner({ partner, overview }: PartnerData) {
)
}
-const PartnerDetails = ({ partner }: { partner: Partner }) => {
- const videoThumbnail = partner.youtubeId
- ? `https://img.youtube.com/vi/${partner.youtubeId}/0.jpg`
- : undefined
-
+function Partner({ partner, overview }: PartnerData) {
+ if (!partner) return
- setActiveTabSlug(slug === listings[0].slug ? null : slug)}
+ className="mt-8"
+ >
+ {/* Full-bleed border — mirrors the SectionContainer structure so tabs align with content */}
+
- {partner.installUrl && (
- setActiveTabSlug(slug === listings[0].slug ? null : slug)}
+ className="mt-8"
+ >
+ {/* Full-bleed border — mirrors the SectionContainer structure so tabs align with content */}
+
- Overview
-
-
-
- {'error' in overview ? (
- Error rendering integration page: {overview.error.message}
- ) : (
- // @ts-expect-error: Gildas - This is because CodeHide put its components under the CH namespace. It works but the MDXClient types are stricter
-
+ {listings.map((listing) => (
+
+ {listing.name}
+
+ ))}
+
+
+
-
- {!isNarrow &&
- {'error' in overview ? (
-
- Error rendering integration page: {overview.error.message}
- ) : ( - // @ts-expect-error: Gildas - This is because CodeHide put its components under the CH namespace. It works but the MDXClient types are stricter -
+
+
+ {listings.map((listing) => (
+
+ {listing.name}
+
+ ))}
+
+
+
-
+ {listings.map((listing) => (
+
-
- - Get started with {partner.title} and Supabase. -
- - - -
- = async ({ params }) => {
const partner = await getPartner(params!.slug as string)
- if (!partner) {
- return {
- notFound: true,
- }
- }
+ if (!partner) return { notFound: true }
const codeHikeOptions: CodeHikeConfig = {
theme: codeHikeTheme,
@@ -369,7 +469,6 @@ export const getStaticProps: GetStaticProps = async ({ params }) =>
autoImport: false,
}
- // Parse markdown
const overview = await serialize({
source: partner.content,
options: {
@@ -379,10 +478,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) =>
},
})
- return {
- props: { partner, overview },
- revalidate: 1800, // 30 minutes
- }
+ return { props: { partner, overview }, revalidate: 1800 }
}
export default Partner
diff --git a/apps/www/types/partners.ts b/apps/www/types/partners.ts
index 3475ae35d4b..79179f2c2e5 100644
--- a/apps/www/types/partners.ts
+++ b/apps/www/types/partners.ts
@@ -25,6 +25,24 @@ export type Partner = {
youtubeId: string | null
}
+export type IntegrationListingType = 'guide' | 'wrapper' | 'template'
+
+export type IntegrationListing = {
+ slug: string
+ name: string
+ type: IntegrationListingType
+ description?: string
+ // guide-specific
+ content?: string | null
+ images?: string[]
+ youtubeId?: string | null
+ installUrl?: string | null
+ isMarketplace?: boolean
+ docsUrl?: string | null
+ // wrapper / template: links into the Studio dashboard
+ dashboardUrl?: string
+}
+
export function toPartner(dbPartner: DbPartner): Partner {
const {
featured,
-
+
+ )
+}
- {partner.youtubeId && (
-
+)
+
+// ─── Data fetching ────────────────────────────────────────────────────────────
+
export const getStaticPaths: GetStaticPaths = async () => {
const slugs = await listPartnerSlugs()
-
- const paths: {
- params: { slug: string }
- locale?: string | undefined
- }[] =
- slugs?.map((slug) => ({
- params: {
- slug,
- },
- })) ?? []
-
- return {
- paths,
- fallback: 'blocking',
- }
+ const paths =
+ slugs?.filter((slug) => !ABSORBED_SLUGS.has(slug)).map((slug) => ({ params: { slug } })) ?? []
+ return { paths, fallback: 'blocking' }
}
-// This also gets called at build time
export const getStaticProps: GetStaticProps- Details -
+
+
+
+
- )
-}
-// This function gets called at build time
+ + Details +
+ + {partner.youtubeId && ( +
+ {partner.type === 'technology' && (
+
-
+ Developer
+ {partner.partnerName}
+
)}
-
- {partner.type === 'technology' && (
-
-
- Developer
- {partner.partnerName}
-
- )}
+ {partner.categories.map((category) => (
+
+ Category
+
+ {category.name}
+
+
+ ))}
- {partner.categories.map((category) => (
-
- Category
-
- {category.name}
-
-
- ))}
+
+ Website
+
+ {new URL(partner.websiteUrl).host}
+
+
+ {partner.type === 'technology' && partner.docsUrl && (
-
- {partner.type === 'technology' && partner.docsUrl && (
-
- Documentation
-
-
- Learn
-
- )}
- - Third-party integrations and docs are managed by Supabase partners. -
+ )}+ Third-party integrations and docs are managed by Supabase partners. +
+