Creating Pages in Ecopages

Pages are the core of your Ecopages project. They represent the different routes and content of your website. In this guide, we'll explore how to create pages using the ghtml integration.

Basic Page Structure

A typical page in Ecopages using the ghtml integration consists of a single TypeScript file. Here's a basic example:

import { BaseLayout } from '@/layouts/base-layout';
import { eco, html } from '@ecopages/core';
 
export default eco.page({
	metadata: () => ({
		title: 'Home page',
		description: 'This is the homepage of the website',
		image: 'public/assets/images/default-og.png',
		keywords: ['typescript', 'framework', 'static'],
	}),
	dependencies: {
		components: [BaseLayout],
	},
	render: () => html`${BaseLayout({
		class: 'main-content',
		children: html`<h1>Ecopages</h1><p>Welcome to my Ecopages website!</p>`,
	})}`,
});

Let's break down the key elements of a page:

1. Imports: Import necessary components and types from @ecopages/core and your project files.

2. eco.page: Use the eco.page factory to create your page component.

3. Metadata: Define page-specific metadata in the metadata property.

4. Dependencies: Declare components, scripts, and stylesheets in the dependencies object.

5. Render: Implement the render function to define your page's structure using the html template literal.

6. Export: Export the result of eco.page as the default export.

Using Components in Pages

To use components in your pages, import them and include them in your HTML template:

import { RadiantCounter } from '@/components/radiant-counter';
import { BaseLayout } from '@/layouts/base-layout';
import { eco, html } from '@ecopages/core';
 
export default eco.page({
	dependencies: {
		components: [BaseLayout, RadiantCounter],
	},
	render: () => html`${BaseLayout({
		class: 'main-content',
		children: html`
			<h1>Ecopages</h1>
			${RadiantCounter({ count: 5 })}
		`,
	})}`,
});

Working with Data

Ecopages provides built-in support for data fetching and metadata management. For a deep dive into how to handle data at build-time and runtime, check out the Data Fetching Guide.

Lazy Loading Components

Ecopages provides powerful tools for lazy loading components, which can significantly improve your site's performance.

Ecopages provides powerful tools for lazy loading components, which can significantly improve your site's performance.

Lazy loading is handled directly within the eco.component or eco.page options using the dependencies.lazy property.

import { eco } from '@ecopages/core';
 
export const MyComponent = eco.component({
	dependencies: {
		lazy: {
			'on:interaction': 'mouseenter,focusin', // Load on interaction
			scripts: ['./my-component.script.ts'],
		},
	},
	render: (props) => <my-component {...props} />,
});

When you define a lazy dependency, Ecopages automatically handles the injection of the required scripts only when the specified interaction occurs or when the component enters the viewport (using on:visible). This eliminates the need for manual script injection and keeps your initial bundle size small.