From d85098b8b97955027e19c47cdefd4c79b2cc8475 Mon Sep 17 00:00:00 2001 From: Travis Fischer Date: Tue, 1 Jul 2025 05:59:53 -0500 Subject: [PATCH] feat: marketplace public project detail page looking better now --- apps/web/src/app/layout.tsx | 2 +- .../[namespace]/[project-slug]/[tab]/page.tsx | 51 ++++++++++++++++++ ... => marketplace-public-project-detail.tsx} | 45 ++++++++++++---- .../[namespace]/[project-slug]/page.tsx | 8 +-- .../[namespace]/[project-slug]/utils.ts | 12 +++++ .../src/app/publishing/opengraph-image.jpg | Bin 92212 -> 82277 bytes apps/web/src/app/publishing/twitter-image.jpg | Bin 92212 -> 82277 bytes 7 files changed, 105 insertions(+), 13 deletions(-) create mode 100644 apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/[tab]/page.tsx rename apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/{marketplace-project-index.tsx => marketplace-public-project-detail.tsx} (91%) create mode 100644 apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/utils.ts diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 57501b9e..367d6f82 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -51,7 +51,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/[tab]/page.tsx b/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/[tab]/page.tsx new file mode 100644 index 00000000..0f1285af --- /dev/null +++ b/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/[tab]/page.tsx @@ -0,0 +1,51 @@ +import { parseProjectIdentifier } from '@agentic/platform-validators' +import { notFound } from 'next/navigation' + +import { toastError } from '@/lib/notifications' + +import { MarketplacePublicProjectDetail } from '../marketplace-public-project-detail' +import { + type MarketplacePublicProjectDetailTab, + marketplacePublicProjectDetailTabsSet +} from '../utils' + +export default async function PublicProjectDetailPageTabPage({ + params +}: { + params: Promise<{ + namespace: string + 'project-slug': string + tab: string + }> +}) { + const { + namespace: rawNamespace, + 'project-slug': rawProjectSlug, + tab + } = await params + + if (!marketplacePublicProjectDetailTabsSet.has(tab)) { + return notFound() + } + + try { + const namespace = decodeURIComponent(rawNamespace) + const projectSlug = decodeURIComponent(rawProjectSlug) + + const { projectIdentifier } = parseProjectIdentifier( + `${namespace}/${projectSlug}`, + { strict: true } + ) + + return ( + + ) + } catch (err: any) { + void toastError(err, { label: 'Invalid project identifier' }) + + return notFound() + } +} diff --git a/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-project-index.tsx b/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-public-project-detail.tsx similarity index 91% rename from apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-project-index.tsx rename to apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-public-project-detail.tsx index b396892b..870709af 100644 --- a/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-project-index.tsx +++ b/apps/web/src/app/marketplace/projects/[namespace]/[project-slug]/marketplace-public-project-detail.tsx @@ -10,6 +10,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useAgentic } from '@/components/agentic-provider' import { ExampleUsage } from '@/components/example-usage' +import { HeroButton } from '@/components/hero-button' import { LoadingIndicator } from '@/components/loading-indicator' import { PageContainer } from '@/components/page-container' import { ProjectPricingPlans } from '@/components/project-pricing-plans' @@ -24,12 +25,17 @@ import { GitHubIcon } from '@/icons/github' import { toast, toastError } from '@/lib/notifications' import { useQuery } from '@/lib/query-client' -const MAX_TOOLS_TO_SHOW = 5 +import { + type MarketplacePublicProjectDetailTab, + MAX_TOOLS_TO_SHOW +} from './utils' -export function MarketplaceProjectIndex({ - projectIdentifier +export function MarketplacePublicProjectDetail({ + projectIdentifier, + tab = 'overview' }: { projectIdentifier: string + tab?: MarketplacePublicProjectDetailTab }) { const ctx = useAgentic() const searchParams = useSearchParams() @@ -184,7 +190,18 @@ export function MarketplaceProjectIndex({
- + { + if (value === 'overview') { + router.push(`/marketplace/projects/${projectIdentifier}`) + } else { + router.push( + `/marketplace/projects/${projectIdentifier}/${value}` + ) + } + }} + > Overview @@ -393,7 +410,7 @@ export function MarketplaceProjectIndex({ function ProjectHeader({ project }: { project: Project }) { return (
-
+
-

+

{project.name}

+ + + + Subscribe to {project.identifier} + +
-
+
{project.identifier} {/* TODO: */} @@ -420,7 +443,9 @@ function ProjectHeader({ project }: { project: Project }) {