Marketing and Documentation Site
Relevant source files
The following files were used as context for generating this wiki page:
- apps/landing/README.md
- apps/landing/src/app/(marketing)/page.tsx/page.tsx)
- apps/landing/src/app/(marketing)/news/[year]/[month]/[slug]/page.tsx/news/%5Byear%5D/%5Bmonth%5D/%5Bslug%5D/page.tsx)
- apps/landing/src/app/(marketing)/news/[year]/[month]/[slug]/articles.ts/news/%5Byear%5D/%5Bmonth%5D/%5Bslug%5D/articles.ts)
- apps/landing/package.json
- packages/marketing-common/README.md
- README.md
The Marketing and Documentation Site, contained within @nordcom/commerce-landing, serves as the public-facing surface for the Nordcom Commerce platform. It provides the primary homepage, technical documentation, release changelogs, and news announcements. Unlike the storefront or admin applications, this site is designed to be database-agnostic and serves as a static-first marketing tool to introduce merchants to the headless commerce solution.
Sources: apps/landing/README.md:1-6, README.md:131-133
Architecture and Stack
The site is built using Next.js 16 and React 19, leveraging the App Router and Turbopack for performance. A key architectural decision is that this application does not depend on @nordcom/commerce-db or maintain its own database connection, allowing it to be developed and deployed standalone.
Core Technologies
- Framework: Next.js 16 (App Router) with React 19.
- Content Engine: Markdoc (
@markdoc/markdoc) for documentation and long-form content. - Styling: Nordstar UI components, Tailwind CSS 4, and SCSS modules.
- Metadata: Gray-matter for Markdown front-matter parsing.
- Shared Design: Uses
@nordcom/commerce-marketing-commonfor a unified design system shared with the admin dashboard.
Sources: apps/landing/README.md:8-18, apps/landing/package.json:56-65, packages/marketing-common/README.md:1-6
Project Structure
The following diagram illustrates the organization of the marketing site's codebase:
Sources: apps/landing/README.md:31-48
Content Management via Markdoc
The site utilizes Markdoc for its documentation and long-form articles. Content is authored in .md or .mdoc files located within the filesystem (e.g., src/app/(marketing)/docs/).
Configuration and Customization
The Markdoc implementation is split into several configuration files:
config.ts: The central schema combining nodes and tags.nodes.ts: Overrides for standard Markdown nodes like headings or code blocks.tags.ts: Definitions for custom block-level tags (e.g.,{% callout %}).components.tsx: React renderers that map Markdoc nodes/tags to Nordstar UI components.
Sources: apps/landing/README.md:58-67
News and Article System
The news section implements a dynamic filesystem-based routing system for articles. Articles are organized by date and slug in the filesystem and parsed at build time.
Article Routing Logic
Articles are expected to be located in the articles/ directory with a path structure of [year]/[month]/[slug].md. The system uses glob to discover these files and gray-matter to extract metadata.
Data Models
| Field | Type | Description |
|---|---|---|
title | String | The headline of the article. |
description | String | SEO description used in metadata. |
date | Date | Publication date for sorting and display. |
author | Object | Contains name, email (for Gravatar), and handle (social). |
Sources: apps/landing/src/app/(marketing)/news/[year]/[month]/[slug]/articles.ts:54-66
Routing and Proxying
The site handles two primary types of routes defined by App Router groups:
(marketing): The public-facing site including the homepage, documentation, and news.(status): Hosted status pages, such as theunknown-shoppage, which the storefront redirects to when a tenant cannot be resolved.
Administrative Proxy
The site includes a middleware/proxy (src/proxy.ts) that delegates requests prefixed with /admin to the admin dashboard. This allows the landing site to act as a unified entry point for both public visitors and operators.
Sources: apps/landing/README.md:50-56
Shared Design System
The site shares design primitives with the @nordcom/commerce-admin application through the @nordcom/commerce-marketing-common package. This ensures visual consistency across all non-storefront surfaces.
Theme Configuration
The shared Theme object configures the Nordstar provider with specific brand colors and typography linked to CSS variables:
| Setting | Value | Description |
|---|---|---|
accents.primary | #ed1e79 | Brand pink used for primary buttons and accents. |
fonts.heading | var(--font-primary) | Mapped to Geist font via CSS variables. |
fonts.body | var(--font-primary) | Standard body typography. |
Sources: packages/marketing-common/README.md:1-40
Development and Deployment
Environment Configuration
The application requires minimal environment variables for local development but uses specific variables for production routing:
| Variable | Purpose |
|---|---|
LANDING_DOMAIN | The canonical hostname used for assets and redirects. |
PORT | The port on which the Next.js server runs (defaults to 3001 in dev). |
Sources: apps/landing/README.md:23-29, apps/landing/package.json:11
Summary
The Marketing and Documentation site provides the essential public infrastructure for Nordcom Commerce. By utilizing a filesystem-based content approach with Markdoc and maintaining a shared design system via marketing-common, it delivers a performant, SEO-optimized gateway to the platform's headless commerce services without the overhead of direct database dependencies.