<template>
  <ul>
    <slot
      v-for="page of $site.pages
        .filter(page => page.regularPath.match(new RegExp(`^${ path }.`)))
        .sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date))
        .slice(0, limit)
      "
      :page="page"
    >
      <li>
        <router-link :to="page.regularPath">{{ page.title }}</router-link>
        <ul v-if="page.regularPath === $page.regularPath && $page.frontmatter.toc && page.headers">
          <li v-for="header of page.headers">
            <router-link :to="`${ page.regularPath }#${ header.slug }`">{{ header.title }}</router-link>
          </li>
        </ul>
      </li>
    </slot>
  </ul>
</template>

<script>
export default {
  name: "FolderList",
  props: {
    path: String,
    limit: {
      type: Number,
      default: 8,
    },
  },
};
</script>

<style scoped lang="scss">
ul {
  * {
    color: #fff !important;
    text-decoration: none;
  }
}
</style>
