How venucontentstack/compass-starter-app works
Compass Starter App is a locale-aware Next.js content site backed by Contentstack. Visitors enter through localized home, general-page, or article routes; page content is fetched and rendered as reusable page blocks and article views. Shared layout provides navigation and footer, while personalization and authoring/preview support extend the experience. The source index identifies route-to-service references, but their call details and several subsystems were not excerpted, so those relationships are shown only as unverified dashed links or omitted.
Main entry points: index.tsx Block renderer · contentstack.ts Content queries · MainLayout.tsx Main layout · page.tsx Home route
Components 26
Routing and layout
- Home route
app/[locale]/page.tsx - General pages
app/[locale]/[...slug]/page.tsx - Article detail
app/[locale]/article/[...slug]/page.tsx - Article routes
app/[locale]/articles/[...slug]/page.tsx - Article listing
app/[locale]/articles/page.tsx - Main layout
MainLayout/MainLayout.tsx - Locale routing
middleware.ts - Locale router hook
hooks/useRouterHook.ts
CMS content
- Content queries
services/contentstack.ts - Delivery SDK
config/contentstack/deliverySDk.ts - Preview SDK
config/contentstack/previewSDk.ts - Contentstack CMS
Page presentation
- Block renderer
components/RenderComponents/index.tsx - Content blocks
components/CardCollection/CardCollection.tsx - Hero
components/Hero/Hero.tsx - Teaser
components/Teaser/Teaser.tsx - Text image carousel
components/TextAndImageCarousel/TextAndImageCarousel.tsx - Featured articles
components/FeaturedArticles/FeaturedArticles.tsx - Article views
components/Article/ArticleCover.tsx
Visitor experience
- Personalization
context/PersonalizationProvider.tsx - Header navigation
components/Header/Header.tsx - Footer navigation
components/Footer/Footer.tsx - Language selector
components/LanguageSelector/LanguageSelector.tsx - Cookie consent
components/CookieConsentForm/Consentform.tsx - User form modal
components/UserFormModal/UserFormModal.tsx
Other components
- Visitor
Connections 29
- Visitor → Home route: opens
- Visitor → General pages: opens
- Visitor → Article detail: opens
- Visitor → Article routes: opens
- Visitor → Article listing: opens
- Home route → Content queries: queries content
- General pages → Content queries: queries content
- Article detail → Content queries: queries content
- Article routes → Content queries: queries content
- Article listing → Content queries: queries content
- Content queries → Delivery SDK: uses delivery
- Content queries → Contentstack CMS: fetches entries
- Preview SDK → Delivery SDK: configures preview
config/contentstack/previewSDk.ts - Home route → Block renderer: renders blocks
- General pages → Block renderer: renders blocks
- Block renderer → Hero: dispatches
components/RenderComponents/index.tsx - Block renderer → Teaser: dispatches
components/RenderComponents/index.tsx - Block renderer → Content blocks: dispatches
components/RenderComponents/index.tsx - Block renderer → Text image carousel: dispatches
components/RenderComponents/index.tsx - Block renderer → Featured articles: renders
components/RenderComponents/index.tsx - Article detail → Article views: renders article
- Main layout → Header navigation: renders
- Main layout → Footer navigation: renders
- Header navigation → Language selector: renders
components/Header/Header.tsx - Visitor → Locale routing: requests locale
- Locale router hook → Visitor: provides navigation
- Main layout → Personalization: provides context
- Main layout → Cookie consent: shows consent
- Main layout → User form modal: shows form