Creating Layouts in Ecopages

Layouts are an essential part of structuring your Ecopages project. They provide a consistent structure for your pages and allow you to reuse common elements across your site. In this guide, we'll explore how to create layouts and use includes files, which are fundamental to the Ecopages framework.

Includes Files

Includes files are mandatory in Ecopages and play a crucial role in defining the overall structure of your HTML. There are two main includes files you need to be aware of:

html.ts: Defines the outer HTML structure
head.ts: Defines the content of the tag

These files are typically located in the src/includes directory.

html.ts

This file defines the overall HTML structure of your pages. Here's an example of what it might look like:

import { type EcoComponent, html } from '@ecopages/core';

export const Html: EcoComponent<{ children: string }> = ({ children }) => html`
  <!DOCTYPE html>
  <html lang="en">
    !${children}
  </html>
`;

Html.config = {
  importMeta: import.meta,
};

head.ts

This file defines the content of the tag, including meta tags, title, and other important elements. Here's an example:

import { type EcoComponent, html } from '@ecopages/core';

export const Head: EcoComponent<{ title: string; description: string }> = ({ title, description }) => html`
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>${title}</title>
  <meta name="description" content="${description}" />
  <link rel="icon" href="/favicon.ico" />
</head>
`;

Head.config = {
  importMeta: import.meta,
};

These includes files are automatically used by Ecopages to structure your HTML. You don't need to explicitly import or use them in your pages or layouts.

Creating a Base Layout

A base layout is a reusable component that defines the common structure for your pages. Here's how to create a base layout:

Create a new file, typically named base-layout.ts, in your src/layouts directory.
Define your layout component. Here's an example:

import { type EcoComponent, html } from '@ecopages/core';

export type BaseLayoutProps = {
  children: string;
  class?: string;
};

export const BaseLayout: EcoComponent<BaseLayoutProps> = ({ children, class: className }) => html`
  <body>
    <main class=${className}>!${children}</main>
  </body>`;

BaseLayout.config = {
    importMeta: import.meta,
    dependencies: { stylesheets: ['./base-layout.css'], scripts: ['./base-layout.script.ts'] },
};

Create associated files for styles (base-layout.css) and scripts (base-layout.script.ts) if needed.
Use your base layout in your pages:

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

const HomePage: EcoComponent = () => html`${BaseLayout({
  class: 'main-content',
  children: html`
    <h1>Welcome to Ecopages</h1>
    <p>This is the homepage of your website.</p>
  `,
})}`;

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

export default HomePage;

By using layouts and includes files effectively, you can create a consistent structure for your Ecopages project while keeping your code modular and maintainable.

Remember to always include the config object with importMeta and any necessary dependencies for both your layouts and pages.