A way to add a list or "menu" variant to the front page

[zerodogg]

I'd like to have an index page that's something like this:

# bla bla

This website contains bla bla.

_LIST OF NOTES_

Is there any way to either just hook into and display whatever generates the left menu, or some way to add a custom markdown code that outputs some variant of the notes list?

[rothsandro]

Technically it's already possible by accessing collections, but it's not officially supported and the data structure may change at any time. In addition, filtering the notes isn't possible.

I like the idea. I think I could add a way to access all notes, to filter them and to render them as a list (or table?). Or just using the data and doing some custom rendering would be possible too.

Maybe something like this, what do you think?

---
title: Home
query:
  filter:
    - ["tags", "containsAnyOf", ["one", "two"]]
    - ["title", "contains", "example"]
---

# My Notes

<!-- Renders the filtered list of notes -->
{% notes(query) | toList %}

Just to demonstrate the idea, the actual API (global function, filter, collection, ...) needs to be defined. And also the query filter above is probably a bit confusing and should be simplified.

[zerodogg]

That would be nice, would give a lot of flexibility for building simple landing and summary pages.

[rothsandro]

I'm working on this now... but finding a good syntax for the queries is hard 😅 And it has to work for yaml (inside Markdown) and JSON (I will probably use them for the sidebar config in a future release).

# 1. String Query
# Makes parsing pretty complex and also the syntax may be confusing
# (how to create arrays, should strings be escaped, ...?)
filter: "(tags includes demo) or (filePathStem matches /^Demo/)"

# 2. String Query with args
# A bit easier to parse but still confusing
filter: "(tags includes $1) or (filePathStem matches $2)"
filterArgs: ["demo", "^/Demo/"]

# 3. Object
# Okay but not very flexible
filter:
  or: 
    tags:
      includes: "demo"
    filePathStem
      matches: "^/Demo/"

# 4. Array / Object
# Better?
filter:
  or: 
    - ["tags", "includes", "demo"]
    - ["filePathStem", "matches", "^/Demo"]

I chose the last syntax. I think building this is probably an overkill anyway and now one is gonna use that 😅 If you have a better idea let me know.

notesQuery:
  offset: 1
  limit: 2
  sort: [["title", "asc"], ["tags.length", "desc"]]
  filter:
    or:
      - ["filePathStem", "matches", "^/Demo/"]
      - and:
          - ["tags", "isNotEmpty"]
          - ["title", "contains", "demo"]

[zerodogg]

Hehe, all of those syntaxes have some downsides. Both one and two are too complex. Number three is certainly the most readable, but I agree four is probably a good combination of readability and "ease" (for lack of a better term) of implementation.

Unless it complicates things a lot, perhaps allow multiple queries that can be specified which variable to store as?

notesQuery:
  - offset: 1
    as: "first"
    limit: 2
    sort: [["title", "asc"], ["tags.length", "desc"]]
    filter:
      or:
        - ["filePathStem", "matches", "^/Demo/"]
        - and:
            - ["tags", "isNotEmpty"]
            - ["title", "contains", "demo"]
  - as: "second"
    limit: 2
    sort: [["title", "asc"], ["tags.length", "desc"]]
    filter:
        - ["filePathStem", "matches", "^/Test/"]

[rothsandro]

Thanks for the feedback. notesQuery is the name of the query, you can specify multiple queries and apply them to any data collection:

---
latestNotesQuery:
  filter: ...
fooQuery:
  filter: ...
---

{{ collections.notes | query(latestNotesQuery) | ... }}
{{ myCustomList | query(fooQuery) | ... }}

[rothsandro]

A first preview is ready: https://deploy-preview-22--sensational-cranachan-4404c2.netlify.app/n/features/dynamic-content/

[zerodogg]

Nice! That'll certainly work for my intention (which is mostly a list of notes on the front page atm.)