Primitives.org.ai

Site

Define websites and documentation

Site

The Site() function defines websites and documentation sites with navigation, SEO, and analytics.

Basic Usage

import { Site } from 'digital-products'

const docsSite = Site({
  id: 'docs',
  name: 'Documentation Site',
  description: 'Product documentation',
  version: '1.0.0',
  generator: 'fumadocs',
})

Site Generators

GeneratorDescription
fumadocsFumadocs documentation
nextNext.js
astroAstro
vitepressVitePress
docusaurusDocusaurus
gatsbyGatsby

Site Structure

Define pages and content:

const docsSite = Site({
  id: 'docs',
  name: 'Documentation',
  generator: 'fumadocs',
  structure: {
    home: '/docs/index.mdx',
    docs: [
      '/docs/getting-started.mdx',
      '/docs/installation.mdx',
      '/docs/api-reference.mdx',
      '/docs/guides/authentication.mdx',
      '/docs/guides/deployment.mdx',
    ],
  },
})

Build site navigation:

import { Site, Nav } from 'digital-products'

const docsSite = Site({
  id: 'docs',
  name: 'Documentation',
  generator: 'fumadocs',
  navigation: [
    Nav('Home', '/'),
    Nav('Docs', '/docs', {
      children: [
        Nav('Getting Started', '/docs/getting-started'),
        Nav('Installation', '/docs/installation'),
        Nav('Guides', '/docs/guides', {
          children: [
            Nav('Authentication', '/docs/guides/auth'),
            Nav('Deployment', '/docs/guides/deploy'),
          ],
        }),
        Nav('API Reference', '/docs/api'),
      ],
    }),
    Nav('Blog', '/blog'),
    Nav('GitHub', 'https://github.com/example/repo', {
      external: true,
    }),
  ],
})

SEO Configuration

Optimize for search engines:

import { Site, SEO } from 'digital-products'

const docsSite = Site({
  id: 'docs',
  name: 'Documentation',
  generator: 'fumadocs',
  seo: SEO({
    titleTemplate: '%s | My Product',
    description: 'Official documentation for My Product',
    keywords: ['docs', 'api', 'reference', 'guide'],
    ogImage: '/og-image.png',
    twitterCard: 'summary_large_image',
    twitterSite: '@myproduct',
  }),
})

SEO Options

OptionDescription
titleTemplatePage title template
descriptionDefault meta description
keywordsSEO keywords
ogImageOpen Graph image
twitterCardTwitter card type
twitterSiteTwitter @handle

Analytics

Add analytics tracking:

import { Site, Analytics } from 'digital-products'

const docsSite = Site({
  id: 'docs',
  name: 'Documentation',
  generator: 'fumadocs',
  analytics: Analytics('plausible', 'docs.example.com'),
})

Analytics Providers

ProviderUsage
plausibleAnalytics('plausible', 'domain.com')
googleAnalytics('google', 'UA-XXXXX')
fathomAnalytics('fathom', 'SITEID')
posthogAnalytics('posthog', 'KEY')

Complete Example

import { Site, Nav, SEO, Analytics } from 'digital-products'

const productDocs = Site({
  id: 'product-docs',
  name: 'Product Documentation',
  description: 'Complete documentation for Product',
  version: '2.0.0',
  generator: 'fumadocs',

  structure: {
    home: '/docs/index.mdx',
    docs: [
      '/docs/introduction.mdx',
      '/docs/quickstart.mdx',
      '/docs/installation.mdx',
      '/docs/configuration.mdx',
      '/docs/guides/index.mdx',
      '/docs/api/index.mdx',
      '/docs/examples/index.mdx',
      '/docs/changelog.mdx',
    ],
  },

  navigation: [
    Nav('Docs', '/docs', {
      children: [
        Nav('Introduction', '/docs/introduction'),
        Nav('Quickstart', '/docs/quickstart'),
        Nav('Guides', '/docs/guides', {
          children: [
            Nav('Authentication', '/docs/guides/auth'),
            Nav('Database', '/docs/guides/database'),
            Nav('Deployment', '/docs/guides/deployment'),
          ],
        }),
        Nav('API Reference', '/docs/api'),
        Nav('Examples', '/docs/examples'),
      ],
    }),
    Nav('Blog', '/blog'),
    Nav('Changelog', '/docs/changelog'),
    Nav('GitHub', 'https://github.com/example/product', { external: true }),
  ],

  seo: SEO({
    titleTemplate: '%s - Product Docs',
    description: 'Learn how to build with Product',
    keywords: ['product', 'documentation', 'api', 'sdk'],
    ogImage: 'https://docs.product.com/og.png',
    twitterCard: 'summary_large_image',
    twitterSite: '@product',
  }),

  analytics: Analytics('plausible', 'docs.product.com'),
})

Marketing Site

import { Site, Nav, SEO, Analytics } from 'digital-products'

const marketingSite = Site({
  id: 'marketing',
  name: 'Product Website',
  description: 'Marketing website',
  version: '1.0.0',
  generator: 'next',

  structure: {
    home: '/index.tsx',
    pages: [
      '/features.tsx',
      '/pricing.tsx',
      '/about.tsx',
      '/contact.tsx',
      '/blog/index.tsx',
    ],
  },

  navigation: [
    Nav('Home', '/'),
    Nav('Features', '/features'),
    Nav('Pricing', '/pricing'),
    Nav('Blog', '/blog'),
    Nav('Docs', 'https://docs.product.com', { external: true }),
    Nav('Login', '/login'),
    Nav('Sign Up', '/signup', { cta: true }),
  ],

  seo: SEO({
    titleTemplate: '%s | Product',
    description: 'The best product for your needs',
    ogImage: '/og.png',
  }),

  analytics: Analytics('google', 'G-XXXXXXXXXX'),
})

Type Definition

interface SiteDefinition {
  id: string
  name: string
  description?: string
  version?: string
  generator?: 'fumadocs' | 'next' | 'astro' | 'vitepress' | 'docusaurus' | 'gatsby'
  structure?: {
    home: string
    docs?: string[]
    pages?: string[]
  }
  navigation?: NavDefinition[]
  seo?: SEODefinition
  analytics?: AnalyticsDefinition
  metadata?: Record<string, unknown>
}
Was this page helpful?

On this page