tessl/npm-11ty--eleventy

A simpler static site generator with extensive templating support and plugin ecosystem.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Eleventy

Name: tessl/npm-11ty--eleventy
Author: tessl

Eleventy is a simpler static site generator that transforms directories of templates of varying types (HTML, Markdown, JavaScript, Liquid, Nunjucks) into static HTML websites. It provides a flexible and powerful build system with extensive templating engine support, plugin architecture, development server capabilities, and comprehensive customization options for modern web development workflows.

Package Information

Package Name: @11ty/eleventy
Package Type: npm
Language: JavaScript (ES modules, CommonJS via loader)
Installation: npm install @11ty/eleventy

Core Imports

ESM (Recommended):

import Eleventy from "@11ty/eleventy";
import { UserConfig } from "@11ty/eleventy/UserConfig";

CommonJS:

const Eleventy = require("@11ty/eleventy");
const { UserConfig } = require("@11ty/eleventy/UserConfig");

Built-in Plugins:

import {
  RenderPlugin,
  I18nPlugin,
  HtmlBasePlugin,
  InputPathToUrlTransformPlugin,
  BundlePlugin,
  IdAttributePlugin
} from "@11ty/eleventy";

Basic Usage

import Eleventy from "@11ty/eleventy";

// Basic programmatic usage
const elev = new Eleventy("./src", "./_site");

// Initialize and build
await elev.init();
await elev.write();

// Development mode with watch
const elev = new Eleventy("./src", "./_site", {
  runMode: "serve"
});

await elev.init();
await elev.watch();
await elev.serve(8080);

Configuration:

import Eleventy from "@11ty/eleventy";

const elev = new Eleventy("./src", "./_site", {
  configPath: ".eleventy.js",
  pathPrefix: "/mysite/",
  quietMode: false,
  config: (eleventyConfig) => {
    // Programmatic configuration
    eleventyConfig.addFilter("myFilter", (content) => {
      return content.toUpperCase();
    });
  }
});

Architecture

Eleventy is built around several key components:

Core API: Eleventy class for programmatic builds and UserConfig for configuration
Template Processing: Multi-engine template system supporting Liquid, Nunjucks, Markdown, JavaScript, HTML
Data System: Hierarchical data cascade with front matter, directory data, and global data
Plugin System: Extensible architecture with built-in and community plugins
Build Pipeline: File processing, transforms, collections, and output generation
Development Tools: Watch mode, development server, and live reload capabilities

Capabilities

Programmatic API

Core programmatic interface for running Eleventy builds, configuring options, and controlling the build process.

class Eleventy {
  constructor(
    input?: string,
    output?: string, 
    options?: EleventyOptions,
    eleventyConfig?: TemplateConfig
  );
  
  init(options?: { viaConfigReset?: boolean }): Promise<void>;
  write(): Promise<[passthroughCopy: any[], templates: any[]]>;
  toJSON(): Promise<any[]>;
  toNDJSON(): Promise<ReadableStream>;
  watch(): Promise<Function>;
  serve(port?: number): Promise<void>;
}

interface EleventyOptions {
  source?: 'cli' | 'script';
  runMode?: 'build' | 'serve' | 'watch';
  dryRun?: boolean;
  configPath?: string;
  pathPrefix?: string;
  quietMode?: boolean;
  config?: (eleventyConfig: UserConfig) => void;
  inputDir?: string;
  loader?: 'esm' | 'cjs' | 'auto';
}

Programmatic API

Configuration API

Comprehensive configuration system for customizing template processing, adding filters and shortcodes, configuring plugins, and setting up data processing.

class UserConfig {
  // Filters
  addFilter(name: string, callback: Function): void;
  addAsyncFilter(name: string, callback: Function): void;
  
  // Shortcodes
  addShortcode(name: string, callback: Function): void;
  addPairedShortcode(name: string, callback: Function): void;
  
  // Collections
  addCollection(name: string, callback: Function): void;
  
  // Transforms
  addTransform(name: string, callback: Function): void;
  
  // Plugins
  addPlugin(plugin: PluginDefinition, options?: any): void;
  
  // Template formats and extensions
  setTemplateFormats(formats: string | string[]): void;
  addExtension(extension: string | string[], options?: ExtensionOptions): void;
}

Configuration API

Template Processing

Multi-engine template system supporting various templating languages with shared filters, shortcodes, and data.

// Template engines supported
type TemplateEngine = 
  | 'liquid'    // Shopify Liquid
  | 'njk'       // Nunjucks  
  | 'md'        // Markdown
  | 'html'      // HTML
  | '11ty.js'   // JavaScript templates
  | 'hbs'       // Handlebars (via plugin)
  | 'mustache'  // Mustache (via plugin)
  | 'ejs'       // EJS (via plugin)
  | 'pug'       // Pug (via plugin);

// Engine-specific configuration
interface EngineConfiguration {
  liquid?: {
    options?: any;
    tags?: Record<string, Function>;
    filters?: Record<string, Function>;
    shortcodes?: Record<string, Function>;
  };
  nunjucks?: {
    environmentOptions?: any;
    filters?: Record<string, Function>;
    tags?: Record<string, Function>;
    globals?: Record<string, any>;
  };
}

Template Processing

Data System

Hierarchical data cascade system providing template data from multiple sources with configurable merging.

// Data sources (in order of priority)
interface DataCascade {
  computedData: any;        // Computed data
  frontMatter: any;         // Template front matter
  templateData: any;        // Template directory data
  directoryData: any;       // Directory data files
  globalData: any;          // Global data directory
}

// Data file configuration
interface DataConfiguration {
  dataFileSuffixes?: string[];
  dataFileDirBaseName?: string;
  dataDeepMerge?: boolean;
  dataExtensions?: Map<string, DataExtensionConfig>;
}

Data System

Plugin System

Extensible plugin architecture with built-in plugins and support for community plugins.

interface PluginDefinition {
  configFunction?: (eleventyConfig: UserConfig, options?: any) => void;
  eleventyPackage?: string;
  eleventyPluginOptions?: {
    unique?: boolean;
  };
}

// Built-in plugins
const RenderPlugin: PluginDefinition;      // Template rendering utilities
const I18nPlugin: PluginDefinition;        // Internationalization
const HtmlBasePlugin: PluginDefinition;    // Base href processing
const BundlePlugin: PluginDefinition;      // Asset bundling
const IdAttributePlugin: PluginDefinition; // Auto ID attributes

Plugin System

Build Pipeline

File processing pipeline including passthrough copy, transforms, collections, and output generation.

interface BuildPipeline {
  // File processing
  passthroughCopy: Record<string, PassthroughCopyOptions>;
  transforms: Record<string, TransformFunction>;
  preprocessors: Record<string, PreprocessorConfig>;
  linters: Record<string, LinterFunction>;
  
  // Collections
  collections: Record<string, CollectionFunction>;
  
  // Output configuration
  outputDir: string;
  pathPrefix: string;
  urlTransforms: UrlTransformFunction[];
}

type TransformFunction = (content: string, outputPath: string) => string | Promise<string>;
type CollectionFunction = (collectionApi: CollectionApi) => any[];

Build Pipeline

Development Tools

Development server, file watching, and live reload capabilities for efficient development workflows.

interface DevelopmentConfig {
  // Watch configuration
  watchJavaScriptDependencies?: boolean;
  additionalWatchTargets?: string[];
  watchIgnores?: string[];
  chokidarConfig?: any;
  watchThrottleWaitTime?: number;
  
  // Server configuration  
  serverOptions?: {
    port?: number;
    showAllHosts?: boolean;
    showVersion?: boolean;
    encoding?: string;
  };
  serverPassthroughCopyBehavior?: 'copy' | 'passthrough';
}

Development Tools

Types

// Core template data structure
interface TemplateData {
  page: {
    url: string;
    fileSlug: string;
    filePathStem: string;
    date: Date;
    inputPath: string;
    outputPath: string;
  };
  collections: {
    all: CollectionItem[];
    [key: string]: CollectionItem[];
  };
  [key: string]: any; // Additional data
}

interface CollectionItem {
  template: any;
  inputPath: string;
  fileSlug: string;
  outputPath: string;
  url: string;
  date: Date;
  data: any;
}

// Extension configuration
interface ExtensionOptions {
  key?: string;
  extension?: string;
  outputFileExtension?: string;
  compile?: CompileFunction;
  compileOptions?: any;
  getData?: GetDataFunction;
  getInstanceFromInputPath?: GetInstanceFunction;
}

type CompileFunction = (inputContent: string, inputPath: string) => RenderFunction;
type RenderFunction = (data: any) => string | Promise<string>;