Skip to main content

Community Public Pages Feature Context

Source: .agents/references/features/community-public-pages.md

Content​

Community Public Pages Feature Context

Purpose​

Community public pages are the visitor/member-facing surfaces for a community. They include the community home/profile, product listing, feed, events, courses, challenges, files, forms, memberships, and zero-link pages under dynamic community routes. These pages need to preserve SEO, static rendering behavior, member/non-member visibility rules, and checkout/product CTA behavior.

User-Facing Workflows​

  • Visitors land on src/pages/[communityLink]/index.page.js, home.page.js, community.page.js, or product/event/feed child routes and browse public content.
  • Members see member-specific CTAs, welcome/splash states, feed access, enrolled product state, membership details, and chat/community access cards.
  • Non-members see join/buy/apply CTAs, public descriptions, product cards, and upsell content.
  • Community pages must handle inactive/missing communities, preview states, product availability, and localized copy without editing generated locale files unnecessarily.
  • Public pages are mobile-heavy. Keep CTAs, carousels, filters, and modals ergonomic on narrow viewports and avoid stretching controls unless the design explicitly does so.

Key Entrypoints​

  • Routes:
    • src/pages/[communityLink]/index.page.js
    • src/pages/[communityLink]/home.page.js
    • src/pages/[communityLink]/community.page.js
    • src/pages/[communityLink]/products.page.js
    • src/pages/[communityLink]/events/[eventSlug]/index.page.js
    • src/pages/[communityLink]/feed/[postSlug].page.js
    • src/pages/[communityLink]/courses/[courseSlug].page.tsx
    • src/pages/[communityLink]/challenges/[challengeSlug]/index.page.js
    • src/pages/[communityLink]/forms/[formSlug].page.tsx
    • src/pages/[communityLink]/zerolink/[zeroLinkSlug].page.js
  • Components:
    • src/components/features/CommunityPage/
    • src/components/features/CommunityPage/components/home/
    • src/components/features/CommunityPage/components/allProducts/
    • src/components/features/CommunityPage/components/common/
    • src/features/CommunityProductPage/
    • src/features/EventPublicPage/
    • src/features/ResourcePage/
    • src/features/ZeroLinksContent/
  • Hooks:
    • src/hooks/useCommunityData.js
    • src/hooks/useCommonPublicPageData.js
    • src/hooks/useActiveCommunity.js
    • src/hooks/useCommunityPricingData.js
    • src/hooks/useStartCta.js
    • src/hooks/useUserRoleInCommunity.ts
  • Services:
    • src/services/communitiesService.js
    • src/services/communitiesService/types.ts
    • src/services/unifiedProduct/unifiedProductServices.ts
    • src/services/commonService.js
  • Utilities:
    • src/utility/communityHelpers.js
    • src/utility/communityUtils.ts
    • src/utility/routesHelper.ts
    • src/utility/pageTypes.js

Data Flow and Service Boundaries​

  • Dynamic community routes usually derive communityLink and product/entity slugs from Next.js route params. Inspect route-level data fetching before changing client hooks.
  • Public pages mix static/server props, service calls, SWR-style helpers, and client-only widgets. Do not assume all data is fetched client-side.
  • Product cards often use unified product data. Check src/components/features/CommunityPage/components/allProducts/ and src/services/unifiedProduct/ before changing labels, pricing, enrollment, or CTA logic.
  • Member-specific UI often depends on active community, user role, membership, pending approval, and product enrollment state. Keep those checks close to the rendering component when it already has the needed hook data.
  • Analytics are spread across utilities and feature-specific helpers. Preserve existing event names and action IDs unless the task explicitly changes tracking.

Conventions and Gotchas​

  • Use t('english-copy-as-kebab-case') for user-facing strings. Add only focused local English keys if required by the current repo rule.
  • Public routes are SEO-sensitive. Preserve meta tag helpers, static props, canonical URLs, and JSON-LD when touching page shells.
  • Avoid unnecessary useEffect; derive view state from loaded community/product/member data when possible.
  • Do not use raw <img> for content images when existing code uses Next image wrappers or sizing helpers.
  • Keep card/button widths faithful to Figma or existing UI. Do not add flex-1 or w-full to CTA rows unless the design shows full-width behavior.
  • For conditional Tailwind classes, use classnames imported as classNames.
  • Treat slugs and query params as untrusted input. Validate/guard before using them in service calls or redirects.
  • .agents/rules/clean-react.mdc
  • .agents/rules/direct-translation-and-component-files.mdc
  • .agents/rules/no-direct-locale-additions.mdc
  • .agents/rules/no-try-catch-service-api.mdc
  • .agents/rules/web-security.mdc
  • .agents/references/coding-standard/useeffect-guidance.md
  • .agents/references/coding-standard/figma-guidance.md for Figma-driven UI work

Useful Searches​

rtk rg "communityLink|activeCommunity|membership|UnifiedProduct" src/pages/[communityLink] src/components/features/CommunityPage src/hooks src/services
rtk rg "ProductCard|StartCta|WelcomeToCommunity|PendingCommMembership" src/components/features/CommunityPage src/features
rtk find src/components/features/CommunityPage -maxdepth 4 -type f

Update Triggers​

Update this reference when route names, community membership checks, unified product card behavior, public page data loading, or community-specific CTA rules change.