Configuration Reference

📖3 min read

📅Last updated: Jan 2, 2026

Complete configuration options for EmberDocs.

tailwind.config.ts

EmberDocs uses Tailwind CSS with custom design tokens. The configuration extends default Tailwind with CSS variable-based colors:

typescript

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        'ed-purple': 'var(--ed-purple)',
        'ed-amber': 'var(--ed-amber)',
        'ed-bg': 'var(--ed-bg)',
        'ed-surface': 'var(--ed-surface)',
        'ed-border': 'var(--ed-border)',
        'ed-text': 'var(--ed-text)',
        // ... more design tokens
      },
    },
  },
};

export default config;

next.config.mjs

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  typedRoutes: true,
  async rewrites() {
    const baseRoute = process.env.EMBERDOCS_BASE_ROUTE || '/docs';
    if (baseRoute === '/docs') {
      return [];
    }
    return [
      {
        source: `${baseRoute}/:path*`,
        destination: '/docs/:path*',
      },
    ];
  },
};

export default nextConfig;

Environment Variables

EmberDocs uses environment variables for configuration. All variables are optional and have sensible defaults.

Create a .env.local file:

bash

# Content Configuration
EMBERDOCS_CONTENT_DIR=docs/examples  # Directory containing markdown files
EMBERDOCS_BASE_ROUTE=/docs           # URL prefix for documentation pages

# Branding
EMBERDOCS_PRODUCT_NAME=EmberDocs
EMBERDOCS_COMPANY_NAME=
EMBERDOCS_DEFAULT_AUTHOR=

# Navigation
EMBERDOCS_HEADER_LINKS={"Docs": "/docs", "GitHub": "https://github.com/yourorg"}
EMBERDOCS_FOOTER_LINKS={"Privacy": "/privacy", "Terms": "/terms"}

# Theme
EMBERDOCS_THEME=dark  # Options: dark, light, monochrome

# Landing Page (framework repo only)
EMBERDOCS_SHOW_LANDING=false  # Set to true to show marketing landing page

Access in your code:

typescript

import { EMBERDOCS_CONTENT_DIR, EMBERDOCS_BASE_ROUTE } from '@/lib/config';

Build Configuration

Search Index Build

The search index is automatically built during production builds. To build manually:

typescript

import { buildSearchIndex, saveIndexToFile } from '@/lib/search';

const index = await buildSearchIndex('./docs');
await saveIndexToFile('./public/search-index.json', index);

Static Generation

Static params are automatically generated from the file structure in src/app/docs/[...slug]/page.tsx:

typescript

export async function generateStaticParams() {
  // Automatically discovers all markdown files in EMBERDOCS_CONTENT_DIR
  // Returns array of { slug: string[] } for Next.js static generation
}

CSS Configuration

Color Scheme

Define in globals.css:

css

:root {
  --bg: #FFFFFF;
  --text: #111827;
  --accent: #8B5CF6;
  --border: #E5E7EB;
}

[data-theme="dark"] {
  --bg: #0F172A;
  --text: #F1F5F9;
  --accent: #8B5CF6;
  --border: #334155;
}

Typography

css

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
}

tsconfig.json

json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Package.json Scripts

json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:search": "tsx scripts/build-search-index.ts",
    "prebuild": "npm run build:search",
    "start": "next start",
    "lint": "next lint",
    "typecheck": "tsc --noEmit",
    "test": "jest --passWithNoTests"
  }
}

Environment Setup

Development

bash

npm run dev
# Server running at http://localhost:3000

Production Build

bash

npm run build
npm run start
# Server running at http://localhost:3000

Default Values

Setting	Default	Type
Content directory	`docs/examples`	string
Base route	`/docs`	string
Theme	`dark`	'dark' \| 'light' \| 'monochrome'
Show landing	`false`	boolean
Dev port	3000	number