Nested page routes and breadcrumbs

[jbmoelker]

User story

As a website visitor or marketer, I want meaningful urls with nesting and breadcrumbs on a page, so that I understand the website hierarchy / where I am on the site.

Checklist

• [ ] A page can be organised as a sub page of another page, so that the urls can be /main-page/sub-page/sub-sub-page.
• [ ] A page should have a breadcrumb (including aria attributes; see example which is also a good reference to include in the component's readme) to display where a page is in the website hierarchy. (overlaps with #6)

[jbmoelker]

Note: Astro supports rest parameters which can be used for nested page routes.

[jbmoelker]

What should we use for nesting in DatoCMS and what are the benefits / disadvantages of each option?

• use tree like collections (with both a tree and a table view for content editors so they can both order and search/filter pages?)
• add a parent page field to the page model (allows creating trees of different models)
• ...

[jbmoelker]

Decided with @decrek: we're going for add a parent page field to the page model because

• better UX experience (filter/search lists)
• optional parent page
• allows creating trees of different models

[jbmoelker]

New alternatives, which may be simpler:

• Allow slashes in slug field so editors can define the nested route to a page (grandparent-slug/parent-slug/page-slug). We could then also query all pages with parts of this slug (grandparent-slug/parent-slug, grandparent-slug).
  • Advantages: allows creating trees of different models; This avoids complex/recursive queries; This also avoids an editor selecting a parent page that is published in one locale but not in the other. Meaning it could have missing parent slugs for part of the locales.
  • Disadvantages: more error prone for editors; more work for editors to change page tree as it needs to be done in multiple pages.
• Add a breadcrumb field to the page mode, where an editor can select all pages in the tree.
  • Advantages: allows creating trees of different models; simple query.
  • Disadvantages: more work for editors to change page tree as it needs to be done in multiple pages.