Common Patterns

This page presents common, recommended patterns for building dynamic websites with Ekit. All patterns are based on simple principles:

• one stable view
• dynamic data from datasources
• language inferred from the URL
• content driven by query parameters

These patterns work for monolingual and multilingual projects without modification.

---

Pattern 1 — Dynamic menu from database

Use case

Build a navigation menu managed entirely from the database, with multilingual labels.

Datasource (YAML)

---
datasources:
  menu:
    from: menu
    orderBy: position
---

Template (Handlebars)

<nav>
  <ul>
    {{#each ekdata.menu}}
      <li>
        <a href="{{this.href}}">{{this.label}}</a>
      </li>
    {{/each}}
  </ul>
</nav>

Notes

• label can be a multilingual field
• href should be a relative URL
• language switching is handled automatically

---

Pattern 2 — Directory / listing page

Use case

Display a list of items (directory, products, articles, people, etc.).

Datasource (YAML)

---
datasources:
  directory:
    from: items
    limit: 20
---

Template (Handlebars)

<ul>
  {{#each ekdata.directory}}
    <li>
      <a href="/detail?uid={{this.uid}}">
        {{this.title}}
      </a>
    </li>
  {{/each}}
</ul>

Notes

• uid is a logical identifier stored in each item
• it is used to link a list item to its detail page

---

Pattern 3 — Detail page (one view, many contents)

Use case

Render multiple content pages using a single view.

Datasource (YAML)

---
datasources:
  item:
    from: items
    uid: "{{query.uid}}"
---

Template (Handlebars)

<h1>{{ekdata.item.title}}</h1>
<div>{{ekdata.item.content}}</div>

Notes

• the view remains static
• content is selected using query.uid
• uid must exist on each item in the datasource
• works naturally with HTTP cache

---

Pattern 4 — Multilingual landing pages

Use case

Create multiple presentation pages using one template and a logical identifier.

Example URLs

/fr/presentation?uid=home
/fr/presentation?uid=company
/en/presentation?uid=home

Datasource (YAML)

---
datasources:
  page:
    from: pages
    uid: "{{query.uid}}"
---

Notes

• uid is a business identifier defined in each page record
• it is managed in the datasource (not generated by routing)
• the same uid can exist across multiple languages
• content is resolved automatically based on the current language

---

Pattern 5 — Pagination and filtering

Use case

Paginate or filter results using query parameters.

Example URLs

/fr/articles?page=1
/fr/articles?page=2
/fr/articles?category=news

Datasource (YAML)

---
datasources:
  articles:
    from: articles
    limit: 10
    page: "{{query.page}}"
    filter:
      category: "{{query.category}}"
---

Notes

• limit defines the number of items per page
• page starts at 1 (page 1 = first page)
• pagination is handled directly by the datasource
• internally, Ekit computes the offset using limit and page
• this pattern works naturally with #each ekdata.articles
• filtering and pagination can be combined without changing the view

---

Best practices

• keep views stable
• drive content with data, not routing
• use logical identifiers (uid, slug) instead of database IDs
• store navigation and structure in the database
• use root-relative URLs in templates
• let HTTP caching handle URL variations

---

Summary

Ekit patterns favor simplicity and flexibility:

• unlimited pages
• unlimited languages
• no dynamic routing complexity
• pagination handled at the datasource level
• clear separation between structure and data

These patterns can be combined freely to build complex websites while keeping templates easy to maintain.