Get page hierarchical structure for breadcrumbs

[simplerethink]

I have a file structure similar to this:

└── blog/
    ├── parent-category1/
    │   ├── post1.md
    │   └── child-category2/
    │       └── post2.md
    ├── parent-category3/
    │   └── ...
    └── ...

How can I generate breadcrumbs in Lume?

For example, in post2.md I'd like to have output like:

<ol>
  <li>
    <a href="https://www.example.com/blog/parent-category1/">Parent Category1</a>
  </li>
  <li>
    <a href="https://www.example.com/blog/parent-category1/child-category2/">Child Category2</a>
  </li>
</ol>

For post1.md I'd like to have output:

<ol>
  <li>
    <a href="https://www.example.com/blog/parent-category1/">Parent Category1</a>
  </li>
</ol>

Basically, I'm looking to fetch the hierarchical structure of a page based on the position within the file structure. I have dozens of categories, so I'm looking for a dynamic way of doing this within the template.

[oscarotero]

That would be a nice plugin, and I think it wouldn't be hard.

The page variable in your templates contains the current page object.
page.parent returns the directory object where the page is stored.

So I imagine something like this should work:

import { Page, Directory } from "lume/core.ts";

interface Link {
  text: string;
  url: string;
}

function getBreadcrumb(page: Page) {
  const links: Link[];
  let currentDirectory = page.parent;

  while  (currentDirectory) {
    const indexPage = currentDirectory.pages.get("index.md");
    links.push({
      text: indexPage.data.title,
      url: indexPage.data.url
    });
    currentDirectory = currentDirectory.parent;
  }

  return links;
}

You can use this helper in your templates:

<ol>
    {% for item in getBreadcrumb(page) %}
    <li>
      <a href="{{ item.url }}">{{ item.text }}</a>
    </li>
    {% endfor %}
</ol>

[simplerethink]

Thank you for your time and help. I'm still evaluating moving from 11ty to Lume, so I'll give this a try when I set up a testing site.