Implement 11ty training catalog with i18n and data-driven architecture

[Copilot]

Built a multilingual training catalog website where trainings are managed through a single data file, support multiple categories, and include registration forms.

Architecture

Static generation: Eleventy 2.0.1 with Nunjucks templates generates 27 pages from 14 source files in ~0.14s

Data layer: Three JS modules define all content:

• trainings.js - Single source of truth for all trainings
• categories.js - Category definitions with i18n
• i18n.js - UI translations (en/de)

URL structure:

/en/                           # English homepage with featured trainings
/de/                           # German homepage
/en/categories/devops/         # Category-filtered training lists
/en/trainings/react-fundamentals/  # Training detail + signup form

Key Implementation

Single-file training addition:

// In src/_data/trainings.js - add new training:
{
  id: "typescript-advanced",
  featured: true,  // Shows on homepage
  categories: ["web-development"],  // Multiple categories supported
  title: { en: "Advanced TypeScript", de: "Fortgeschrittenes TypeScript" },
  // ... rest of i18n fields
}

→ Automatically generates:

• Detail pages in both languages
• Category page listings
• Homepage card (if featured)
• Sign-up form with external API integration

Pagination-based generation: Uses 11ty's pagination feature to generate individual pages from data arrays without manual template duplication

Multi-category filtering: Custom Nunjucks filter byCategory enables trainings to appear on multiple category pages

Form Integration

Each training detail page includes a registration form:

<form action="https://api.example.com/register" method="POST">
  <input type="hidden" name="training_id" value="react-fundamentals">
  <input type="hidden" name="language" value="en">
  <!-- User fields: name*, email*, company, phone -->
</form>

UI

Homepage - Featured trainings + category grid:

Training detail - Full information + signup form:

Sample Content

• 6 trainings (React, AWS, Docker/K8s, Python Data Science, Secure Coding, CI/CD)
• 5 categories (Web Dev, Cloud, DevOps, Data Science, Security)
• Responsive card-based layout with purple gradient theme

Original prompt

The goal is a web catalog of trainings hosted or offered by our company. The website should be created with 11ty and support internationalization. There should be an overview of training categories as well as a few highlighted trainings. A training can belong to several categories. Each training should have a details page with a sign-up form pointing to an external API. It must be possible to add a training by editing a single file or database entry, whichever is easier to implement.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.