KitaJS Integration

The @ecopages/kitajs package provides seamless integration with Kita, enabling effortless rendering of JSX templates within the Ecopages framework.

Installation

To install the KitaJS integration plugin, run the following command in your project directory:

bunx jsr add @ecopages/kitajs

Usage

To incorporate the KitaJS integration into your Ecopages project, follow these steps:

1. Import the kitajsPlugin in your Ecopages configuration file:

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

2. Add the kitajsPlugin to your configuration:

const config = await new ConfigBuilder()
	.setRootDir(import.meta.dir)
	.setBaseUrl(import.meta.env.ECOPAGES_BASE_URL)
	.setIntegrations([kitajsPlugin()])
	.setIncludesTemplates({
		head: 'head.kita.tsx',
		html: 'html.kita.tsx',
		seo: 'seo.kita.tsx',
	})
	.build();

Creating Pages with KitaJS

Once the KitaJS integration is set up, you can create pages using JSX syntax. Here's an example of a basic page:

import { BaseLayout } from '@/layouts/base-layout';
import type { EcoComponent, GetMetadata } from '@ecopages/core';

const HomePage: EcoComponent = () => {
  return (
    <BaseLayout>
      <h1>Welcome to Ecopages</h1>
    </BaseLayout>
  );
};

HomePage.config = {
	importMeta: import.meta,
	dependencies: {
		components: [BaseLayout],
	},
};

export default HomePage;

Key Features

1. JSX Support: Write your templates using JSX syntax, which is familiar to React developers.
2. Component-based Architecture: Create reusable components and import them into your pages.
3. Metadata Management: Use the getMetadata function to define page-specific metadata.
4. Dependency Management: Specify component dependencies in the config object for proper rendering and optimization.

Best Practices

1. Layouts: Create layout components (like BaseLayout in the example) to maintain consistent page structures.
2. Typing: Utilize TypeScript types like EcoComponent and GetMetadata for better type checking and IDE support.
3. Config Object: Always include the config object with importMeta and any necessary dependencies for proper page rendering.

Integration with Other Plugins

The KitaJS integration works well with other Ecopages plugins. For example, you can use it alongside the MDX plugin for markdown support:

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;

This setup allows you to use both KitaJS and MDX in your project, giving you flexibility in how you create your pages and components.