Filtering and sorting content collections

[kiume00]

hey, I'm super enthusiastic about Nue and trying to learn it as a ux designer / beginner web developer, but I'm really struggling on finding a way to filter the content, either by file name, or by frontmatter content using ":for" (or possibly an alternative way). also, looking for a way for changing the sorting order. as I understand, for now only one content collection is supported simultaneously, making filtering more important.

I'd really appreciate if someone could point me in the right direction 🙏

[tipiirai]

Hey. Good to hear. For sorting & filtering you should make a custom component and do the work inside the component's script tag. Something like this should work:

<div @name="blog-posts">
  <div :for="post in posts">
    <img :src="post.thumb" alt="{ post.title } thumbnail">
    <h3>{ post.title }</h3>
    <p>{ post.description }</p>
  </div>

  <script>
    constructor({ posts }) {
      this.posts = posts.filter(post => post.tags.includes('design'))
    }
  </script>
</div>