How to create new pages

This guide outlines the process, incorporating insights from recent pull requests to provide a overview of how to create a new page in the website.

1. Create the Page Content

Begin by adding a new Markdown file in the content directory to define your page's content and structure.

• Path: content/your-page/_index.en.md
• Front Matter Example:

  ---
  title: "Your Page Title"
  sections:
    - type: hero
      title: "Welcome to Our Page"
      lead: "An introductory section with a prominent message."
      cta:
        label: "Learn More"
        url: "/learn-more"
      image: "/images/hero-image.jpg"
      imageDescription: "A descriptive text for the hero image."
    - type: two-columns
      left:
        - type: text
          content: |
            ## About Us
            Detailed information about our mission and values.
      right:
        - type: image
          image: "/images/about-us.jpg"
          description: "Team working together."
          rounded: true
      background:
        color: "light-gray"
    - type: article-cards
      title: "Latest Articles"
      articles:
        - /articles/article-1
        - /articles/article-2
        - /articles/article-3
  type: landing-page
  ---

Key Points:

• Sections Definition: The sections array organizes the page into distinct components. Each section type (e.g., hero, two-columns, article-cards) corresponds to a specific layout and functionality.

2. Update the Content Management System (CMS) Configuration

To manage the new page via the CMS, modify the cms/collections.ts file.

• Import the New Collection:

  import { YourPageCollection } from '../content/your-page/collection';

• Add to Collections Array:

  export const collections = [
    // Existing collections
    YourPageCollection,
  ];

3. Define the Collection Schema

Create a collection.ts file within your page's content directory to specify the CMS fields and structure.

• Path: content/your-page/collection.ts
• Example Content:

  import { landingPageSections } from '../../layouts/partials/sections';

  export const YourPageCollection = {
    name: 'yourPage',
    label: 'Your Page',
    folder: 'content/your-page',
    slug: '_index',
    path: '_index',
    create: true,
    i18n: true,
    fields: [
      {
        label: 'Sections',
        name: 'sections',
        widget: 'list',
        collapsed: true,
        types: landingPageSections,
      },
      {
        label: 'Type',
        name: 'type',
        widget: 'hidden',
        default: 'landing-page',
      },
    ],
  };

4. Implement Layout Components

Ensure that each section type referenced in your Markdown file has a corresponding layout component. If new section types are introduced, create the necessary components.

• Location: layouts/partials/sections/
• Example: For a hero section, there should be a hero.html file handling its rendering logic.

5. Incorporate New Section Types

If your page includes unique sections not previously defined, you'll need to:

• Develop New Components: Create the HTML and TypeScript files for the new section within the layouts/partials/sections/ directory.
• Update Section Registry: Modify the landingPageSections in layouts/partials/sections/index.ts to include your new section type.