CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gatsby-plugin-page-creator

Gatsby plugin that automatically creates pages from React components in specified directories

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

configuration.mddocs/

Plugin Configuration

Configuration options for gatsby-plugin-page-creator, including directory paths, file ignore patterns, and URL slugification settings.

Capabilities

Basic Configuration

Configure the plugin with a directory path to scan for React components.

/**
 * Basic plugin configuration
 * @param path - Directory path containing React components to convert to pages
 */
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: string;
  }
}

Usage Example:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
  ],
}

Full Configuration Options

Complete configuration interface with all available options.

/**
 * Complete plugin configuration options
 */
interface IOptions extends PluginOptions {
  /** Directory path containing React components to convert to pages (required) */
  path: string;
  /** Whether to validate that the path exists (optional, default: true) */
  pathCheck?: boolean;
  /** Patterns to ignore when creating pages (optional) */
  ignore?: IPathIgnoreOptions | string | Array<string> | null;
  /** Options for slugify function used in File System Route API (optional) */
  slugify?: ISlugifyOptions;
}

Path Configuration

Specify which directory contains your React components.

/**
 * Path configuration
 * @param path - Absolute or relative path to directory containing page components
 * @param pathCheck - Whether to validate path exists during build
 */
interface PathConfig {
  path: string;
  pathCheck?: boolean;
}

Usage Examples:

// Relative path
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/src/pages`,
    pathCheck: true, // default
  },
}

// Multiple directories
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/admin/pages`,
      },
    },
  ],
}

Ignore Patterns

Control which files are excluded from page creation.

/**
 * File ignore configuration
 */
type IgnoreConfig = IPathIgnoreOptions | string | Array<string> | null;

interface IPathIgnoreOptions {
  /** Array of glob patterns to ignore */
  patterns: string[];
  /** Micromatch options for pattern matching */
  options?: {
    /** Case-insensitive matching */
    nocase?: boolean;
    [key: string]: any;
  };
}

Default Ignored Files:

The plugin automatically excludes these patterns:

  • template-*
  • __tests__/*
  • *.test.jsx?
  • *.spec.jsx?
  • *.d.tsx?
  • *.json
  • *.yaml
  • _*
  • .*

Usage Examples:

// Simple string patterns
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/src/pages`,
    ignore: [`blog.(js|ts)?(x)`, `private-*.js`],
  },
}

// Advanced ignore options
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/src/pages`,
    ignore: {
      patterns: [`**/*.example.(js|ts)?(x)`],
      options: { nocase: true },
    },
  },
}

Slugify Configuration

Configure URL slug generation for File System Route API.

/**
 * Slugify configuration options
 * Based on @sindresorhus/slugify options
 */
interface ISlugifyOptions {
  /** Separator character for replacing spaces and special characters */
  separator?: string;
  /** Convert to lowercase */
  lowercase?: boolean;
  /** Decamelize camelCase strings */
  decamelize?: boolean;
  /** Custom character replacements */
  customReplacements?: Array<[string, string]>;
  /** Preserve leading and trailing separators */
  preserveLeadingUnderscore?: boolean;
  /** Preserve trailing separators */
  preserveTrailingDash?: boolean;
  [key: string]: any;
}

Usage Examples:

// Custom separator
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/src/pages`,
    slugify: {
      separator: '_',
      lowercase: false,
    },
  },
}

// Custom replacements
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/src/pages`,
    slugify: {
      customReplacements: [
        ['&', 'and'],
        ['@', 'at'],
      ],
    },
  },
}

Configuration Validation

The plugin validates configuration options during build:

/**
 * Configuration validation errors
 */
enum ConfigurationErrors {
  /** Path option is required */
  RequiredPath = "12107",
  /** Specified path does not exist */
  NonExistingPath = "12108"
}

Error Examples:

// Missing path - throws RequiredPath error
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    // path is required!
  },
}

// Invalid path - throws NonExistingPath error  
{
  resolve: `gatsby-plugin-page-creator`,
  options: {
    path: `${__dirname}/non-existent-directory`,
  },
}

docs

advanced-usage.md

configuration.md

file-system-routes.md

index.md

tile.json