---
// Remove current url path and remove trailing slash if exists
const currentUrlPath = Astro.url.pathname.replace(/\/+$/, "");

// Get url array from path
// eg: /tags/tailwindcss => ['tags', 'tailwindcss']
const breadcrumbList = currentUrlPath.split("/").slice(1);

// if breadcrumb is Home > Posts > 1 <etc>
// replace Posts with Posts (page number)
breadcrumbList[0] === "posts" &&
  breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);

// if breadcrumb is Home > Tags > [tag] > [page] <etc>
// replace [tag] > [page] with [tag] (page number)
breadcrumbList[0] === "tags" &&
  !isNaN(Number(breadcrumbList[2])) &&
  breadcrumbList.splice(
    1,
    3,
    `${breadcrumbList[1]} ${
      Number(breadcrumbList[2]) === 1 ? "" : "(page " + breadcrumbList[2] + ")"
    }`
  );
---

<nav class="breadcrumb" aria-label="breadcrumb">
  <ul>
    <li>
      <a href="/">Home</a>
      <span aria-hidden="true">&raquo;</span>
    </li>
    {
      breadcrumbList.map((breadcrumb, index) =>
        index + 1 === breadcrumbList.length ? (
          <li>
            <span
              class={`${index > 0 ? "lowercase" : "capitalize"}`}
              aria-current="page"
            >
              {/* make the last part lowercase in Home > Tags > some-tag */}
              {decodeURIComponent(breadcrumb)}
            </span>
          </li>
        ) : (
          <li>
            <a href={`/${breadcrumb}/`}>{breadcrumb}</a>
            <span aria-hidden="true">&raquo;</span>
          </li>
        )
      )
    }
  </ul>
</nav>

<style>
  .breadcrumb {
    @apply mx-auto mb-1 mt-8 w-full max-w-3xl px-4;
  }
  .breadcrumb ul li {
    @apply inline;
  }
  .breadcrumb ul li a {
    @apply capitalize opacity-70;
  }
  .breadcrumb ul li span {
    @apply opacity-70;
  }
  .breadcrumb ul li:not(:last-child) a {
    @apply hover:opacity-100;
  }
</style>