or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

build-pipeline.md configuration-api.md data-system.md development-tools.md index.md plugin-system.md programmatic-api.md template-processing.md

tile.json

Data System

Hierarchical data cascade system providing template data from multiple sources with configurable merging, supporting various data file formats and computed data capabilities.

Capabilities

Data Cascade

Eleventy's data cascade merges data from multiple sources in order of priority.

/** Data sources in order of priority (highest to lowest) */
interface DataCascade {
  /** Computed data (highest priority) */
  computedData: any;
  
  /** Template front matter */
  frontMatter: any;
  
  /** Template data files (.11tydata.js/.json) */
  templateData: any;
  
  /** Directory data files */
  directoryData: any;
  
  /** Global data files (_data directory) */
  globalData: any;
}

/**
 * Add global data available to all templates
 * @param name - Data key name
 * @param data - Data value or object
 * @returns UserConfig instance for chaining
 */
addGlobalData(name: string, data: any): UserConfig;

/**
 * Set data deep merge behavior
 * @param deepMerge - Enable/disable deep merging of data objects
 */
setDataDeepMerge(deepMerge: boolean): void;

/**
 * Check if data deep merge setting was modified
 * @returns Whether deep merge was explicitly set
 */
isDataDeepMergeModified(): boolean;

Usage Examples:

// Add global data
eleventyConfig.addGlobalData("site", {
  title: "My Website",
  url: "https://example.com",
  author: "John Doe"
});

eleventyConfig.addGlobalData("buildTime", new Date());

// Configure data merging
eleventyConfig.setDataDeepMerge(true); // Deep merge objects

Data File Configuration

Configure data file processing and supported formats.

/**
 * Set custom data file suffixes
 * @param suffixArray - Array of suffixes to use for data files
 */
setDataFileSuffixes(suffixArray: string[]): void;

/**
 * Set custom base name for directory data files
 * @param baseName - Base name for directory data files
 */
setDataFileBaseName(baseName: string): void;

/**
 * Add support for custom data file extensions
 * @param extensionList - Comma-separated list of extensions
 * @param parser - Parser function or configuration object
 */
addDataExtension(extensionList: string, parser: Function | DataExtensionConfig): void;

interface DataExtensionConfig {
  /** Parser function for the extension */
  parser: (content: string) => any;
  /** Additional parser options */
  options?: any;
}

Default Data File Patterns:

_data/global.json - Global data
_data/site.js - Global data (JavaScript)
posts/posts.json - Directory data for posts/
posts/my-post.11tydata.js - Template data for my-post.md

Usage Examples:

// Custom data file suffixes
eleventyConfig.setDataFileSuffixes([".data", ".info"]); // Look for .data.js, .info.json

// Custom directory data file name
eleventyConfig.setDataFileBaseName("metadata"); // Look for metadata.js instead of directory name

// Add YAML data support
eleventyConfig.addDataExtension("yaml,yml", require("js-yaml").load);

// Add TOML data support with options
eleventyConfig.addDataExtension("toml", {
  parser: require("@iarna/toml").parse,
  options: { strict: true }
});

// Add CSV data support
eleventyConfig.addDataExtension("csv", (content) => {
  const parse = require("csv-parse/sync").parse;
  return parse(content, { columns: true, skip_empty_lines: true });
});

Global Data Directory

The _data directory contains global data available to all templates.

/**
 * Set custom data directory location
 * @param dir - Path to data directory
 */
setDataDirectory(dir: string): void;

/** Default global data directory structure */
interface GlobalDataDirectory {
  /** JavaScript data files */
  "site.js": any;
  "navigation.js": any;
  
  /** JSON data files */
  "metadata.json": any;
  "config.json": any;
  
  /** Subdirectories become nested data objects */
  "api/": {
    "endpoints.js": any;
    "auth.json": any;
  };
}

Global Data Examples:

// _data/site.js
module.exports = {
  title: "My Blog",
  url: "https://myblog.com",
  description: "A blog about web development",
  author: {
    name: "Jane Doe",
    email: "jane@example.com"
  }
};

// _data/navigation.js - Can return arrays
module.exports = [
  { title: "Home", url: "/" },
  { title: "About", url: "/about/" },
  { title: "Blog", url: "/blog/" }
];

// _data/api/config.js - Nested data
module.exports = {
  baseUrl: "https://api.example.com",
  version: "v1",
  timeout: 5000
};

Template Data Files

Template-specific data files that apply to individual templates or directories.

/** Template data file patterns */
interface TemplateDataFiles {
  /** Template-specific data */
  "blog-post.11tydata.js": any;      // For blog-post.md
  "blog-post.11tydata.json": any;    // For blog-post.md
  
  /** Directory data */
  "posts.json": any;                 // For all files in posts/ directory
  "posts.js": any;                   // For all files in posts/ directory
}

Template Data Examples:

// posts/my-post.11tydata.js - Specific to posts/my-post.md
module.exports = {
  title: "My Blog Post",
  tags: ["javascript", "tutorial"],
  featured: true,
  publishDate: "2024-01-15"
};

// posts/posts.json - Applies to all files in posts/ directory
{
  "layout": "post.njk",
  "tags": "post",
  "permalink": "/blog/{{ page.fileSlug }}/"
}

// posts/posts.js - Directory data with computation
module.exports = {
  layout: "post.njk",
  tags: "post",
  eleventyComputed: {
    permalink: (data) => `/blog/${data.page.date.getFullYear()}/${data.page.fileSlug}/`
  }
};

Computed Data

Dynamic data computation using the eleventyComputed key.

interface ComputedData {
  /** Computed data object */
  eleventyComputed: {
    /** Computed property functions */
    [key: string]: (data: any) => any;
  };
}

/**
 * Augment function context with additional data
 * @param fn - Function to augment
 * @param options - Augmentation options
 * @returns Augmented function
 */
augmentFunctionContext(fn: Function, options?: any): Function;

Computed Data Examples:

// In front matter or data files
module.exports = {
  title: "My Post",
  author: "John Doe",
  eleventyComputed: {
    // Computed permalink based on title
    permalink: (data) => `/posts/${data.title.toLowerCase().replace(/\s+/g, '-')}/`,
    
    // Computed meta description
    metaDescription: (data) => `${data.title} by ${data.author}`,
    
    // Computed reading time
    readingTime: (data) => {
      const wordsPerMinute = 200;
      const wordCount = data.content.split(/\s+/).length;
      return Math.ceil(wordCount / wordsPerMinute);
    },
    
    // Async computed data
    authorInfo: async (data) => {
      const response = await fetch(`/api/authors/${data.author}`);
      return response.json();
    }
  }
};

Front Matter Processing

Configure how front matter is parsed from template files.

/**
 * Set front matter parsing options
 * @param options - Front matter configuration
 */
setFrontMatterParsingOptions(options?: FrontMatterOptions): void;

interface FrontMatterOptions {
  /** Default parsing language */
  language?: 'yaml' | 'json' | 'javascript' | 'js';
  
  /** Custom parsing engines */
  engines?: {
    /** YAML parser function */
    yaml?: (content: string) => any;
    
    /** JSON parser function */  
    json?: (content: string) => any;
    
    /** JavaScript parser function */
    javascript?: (content: string) => any;
    
    /** Legacy JS parser function */
    jsLegacy?: (content: string) => any;
  };
}

Front Matter Examples:

---
title: "My Blog Post"
date: 2024-01-15
tags: ["javascript", "web-dev"]
layout: "post.njk"
---

# {{ title }}

Content goes here...

---json
{
  "title": "JSON Front Matter",
  "layout": "page.njk",
  "data": {
    "nested": true
  }
}
---

<h1>{{ title }}</h1>

---js
{
  title: "JavaScript Front Matter",
  date: new Date(),
  eleventyComputed: {
    permalink: (data) => `/dynamic/${data.page.fileSlug}/`
  }
}
---

Data Filtering

Filter and select specific data for processing.

/**
 * Configure data filter selectors
 */
interface DataFiltering {
  /** Data filter selectors for processing */
  dataFilterSelectors: Set<string>;
}

/**
 * Freeze reserved data to prevent modification
 * @param bool - Enable/disable freezing reserved data
 */
setFreezeReservedData(bool: boolean): void;

Environment Variables

Access environment variables and Eleventy-specific data.

/** Built-in environment data available in templates */
interface EleventyEnvironmentData {
  eleventy: {
    /** Eleventy version */
    version: string;
    
    /** Eleventy environment info */
    env: {
      /** Source of execution ('cli' or 'script') */
      source: 'cli' | 'script';
      
      /** Run mode ('build', 'serve', 'watch') */
      runMode: 'build' | 'serve' | 'watch';
      
      /** Configuration file path */
      config?: string;
      
      /** Project root directory */
      root: string;
    };
  };
}

Environment Variables Set by Eleventy:

ELEVENTY_VERSION - Current Eleventy version
ELEVENTY_ROOT - Project root directory
ELEVENTY_SOURCE - Execution source (cli/script)
ELEVENTY_RUN_MODE - Current run mode

Date Processing

Configure how dates are parsed and processed.

/**
 * Add custom date parsing callback
 * @param callback - Function to parse date values
 */
addDateParsing(callback: (dateValue: any) => Date | null): void;

/** Built-in date parsing sources */
interface DateSources {
  /** Front matter date field */
  date?: string | Date;
  
  /** File creation date */
  created?: Date;
  
  /** Last modified date */
  modified?: Date;
  
  /** Git commit date */
  git?: Date;
}

Usage Examples:

// Custom date parsing
eleventyConfig.addDateParsing((dateValue) => {
  // Parse custom date formats
  if (typeof dateValue === "string") {
    if (dateValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
      return new Date(dateValue + "T00:00:00.000Z");
    }
    if (dateValue === "now") {
      return new Date();
    }
  }
  return null;
});

// In templates, dates are available as:
// {{ page.date }} - Template date
// {{ collections.all[0].date }} - Collection item date

Types

interface DataCascade {
  computedData: any;
  frontMatter: any;
  templateData: any;
  directoryData: any;
  globalData: any;
}

interface DataExtensionConfig {
  parser: (content: string) => any;
  options?: any;
}

interface FrontMatterOptions {
  language?: 'yaml' | 'json' | 'javascript' | 'js';
  engines?: {
    yaml?: (content: string) => any;
    json?: (content: string) => any;
    javascript?: (content: string) => any;
    jsLegacy?: (content: string) => any;
  };
}

interface ComputedData {
  eleventyComputed: {
    [key: string]: (data: any) => any;
  };
}

interface EleventyEnvironmentData {
  eleventy: {
    version: string;
    env: {
      source: 'cli' | 'script';
      runMode: 'build' | 'serve' | 'watch';
      config?: string;
      root: string;
    };
  };
}

Version

Tile

Files

data-system.md.css-3qkkll{font-size:var(--chakra-font-sizes-sm);font-weight:var(--chakra-font-weights-normal);color:var(--chakra-colors-gray-300);}docs/

Data System

Capabilities

Data Cascade

Data File Configuration

Global Data Directory

Template Data Files

Computed Data

Front Matter Processing

Data Filtering

Environment Variables

Date Processing

Types

data-system.mddocs/