Configuration

Ecopages can be customized to fit your project's needs through a configuration file. Create a file named eco.config.ts in your project's root directory to get started.

Here's a basic example of an Ecopages configuration:

import { ConfigBuilder } from '@ecopages/core';
import { kitajsPlugin } from '@ecopages/kitajs';
import { mdxPlugin } from '@ecopages/mdx';

const config = await new ConfigBuilder()
    .setRootDir(import.meta.dir)
    .setBaseUrl(import.meta.env.ECOPAGES_BASE_URL)
    .setIntegrations([kitajsPlugin(), mdxPlugin()])
    .setDefaultMetadata({
      title: 'Your Site Title',
      description: 'Your site description',
      image: 'https://your-domain.com/og-image.png',
    })
    .build();

export default config;

Configuration API

rootDir*string

setRootDir@default: .

The root directory of your project, used to resolve paths to your project files.

baseUrl*string

setBaseUrl

The base URL of your project, used for generating absolute URLs for your pages.

defaultMetadataPageMetadataProps

setDefaultMetadata

Default metadata for your pages. This is merged with page-specific metadata when provided.

srcDirstring

setSrcDir@default: src

The directory containing your source files, relative to the root project directory. Set to '.' to use the root directory.

publicstring

setPublicDir@default: public

The directory for static assets, relative to the src directory.

pagesstring

setPagesDir@default: pages

The directory containing your page files, relative to the src directory.

includesstring

setIncludesDir@default: includes

The directory for include templates, relative to the src directory.

layoutsstring

setLayoutsDir@default: layouts

The directory for layout components, relative to the src directory.

includesTemplatesIncludesTemplates

setIncludesTemplates@default: {head: 'head.kita.tsx', html: 'html.kita.tsx', seo: 'seo.kita.tsx'}

Specifies the templates used for different parts of your pages.

error404Templatestring

setError404Template@default: 404.kita.tsx

The template for the 404 error page, located in the pages directory.

diststring

setDistDir@default: .eco

The output directory for the built files.

componentsstring

setComponentsDir@default: components

The directory containing your reusable components.

scriptsExtensionsstring[]

setScriptsExtensions@default: ['.script.ts', '.script.tsx']

File extensions for script files. These are included in the page but not rendered as components. Dependencies are automatically resolved.

additionalWatchPathsstring[]

setAdditionalWatchPaths

Add additional files to monitor for changes. This is useful for tracking files that are not included in the Ecopages build process. It accepts an array of files or directories.

robotsTxtRobotsPreferences

setRobotsTxt@default: { "*": [], Googlebot: ["/public/assets/images/"] }

Configuration for the robots.txt file.

tailwindobject

setTailwindConfig@default: { input: "styles/tailwind.css" }

Configuration for Tailwind CSS.

integrationsIntegrationConfig[]

setIntegrations@default: []

An array of integration plugins to enhance Ecopages functionality. Common integrations include KitaJS, Lit, MDX, and React.

Integrations

Ecopages supports various integrations to extend its capabilities. Here are some commonly used integrations:

KitaJS: For JSX templating
Lit: For web components
MDX: For Markdown with JSX

To use an integration, install it and add it to your configuration. For example:

import { ConfigBuilder } from '@ecopages/core';
import { kitajsPlugin } from '@ecopages/kitajs';
import { mdxPlugin } from '@ecopages/mdx';

const config = await new ConfigBuilder()
    .setRootDir(import.meta.dir)
    .setBaseUrl(import.meta.env.ECOPAGES_BASE_URL)
    .setIntegrations([kitajsPlugin(), mdxPlugin()])
    .build();

export default config;

For more details on specific integrations, refer to their respective documentation pages: