'Recent posts' section (and directory/filename oopsie)

[robocone]

Hi again! Second time I'm reporting in with something I need to wrap my head around—though at least this time I'm sure it's just a skill issue on my part.

So, first off, I'm a coding newbie making a site with a blog (the framework for which can be seen here for the moment https://github.com/robocone/blog-test/tree/main ), and I want to have something in blog-right-sidebar.njk that shows off the [insert number here] most recent posts I've created—ideally without me having to regenerate the site each time I want it to update, but since I'd be doing that to actually make those posts anyway (and update the tag/category listings, etc.) I wouldn't mind otherwise too much.

As for how I'd be able to go about doing that, I know three things:

1. First, that I'd need(?) to make use of the collections function in order to have something to display.
2. Second, that once I have that collection, it'd be a matter of using a function similar to this (thanks pdehaan):

{% for post in collections.tags[tag] %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a>
  </li>
{% endfor %}

to actually display the data.
3. Third, that (speaking of tags) every single .md/resulting .html technically should have its own default tag (at least if I understood things correctly).

What I don't know is what exactly that function would look like within my code (for the by-date display and limitation to a specific number of posts displayed especially)—so help fleshing that out/filling in my blanks, so-to-speak, would be appreciated.

And on a tangentially related note, I anticipated that to keep things neat (especially if I decided to use collections.tags[all] for the database the display drew from) I'd have to make a separate 'posts' subdirectory to keep all my actual posts in...which (as I also anticipated) screwed something up as far as the .html generation goes, as you can see by the separate /blog/posts/sample-blog-post/index.html and /blog/posts/2023/09/18/blah-blah.html files (the latter of which is the one I actually wanted to generate). I figured this should have been a simple fix, but I'm kind of lost, so...

[robocone]

Okay, so...after revisiting this, somehow that second issue (the /sample-blog-post/index.html thing) ended up resolving itself. I don't know what I did (heck, I'm not sure I even did anything), but that erroneous filepath isn't generating anymore. On top of that, I worked out creating the collection of posts in a much less janky (and much more, well, functioning) way than trying to reuse the tag collection—and I even managed to actually make the bulleted list I wanted to in the first place!

...However, when trying to place the function for said list into a specific div (via blog-right-sidebar.njk), it comes out completely null. The <ul> formatting itself works inside the div, but the function basically sputters out into a blank space. More precisely, this:

<div class="section-title">Recent Posts</div>
<div class="content">

        <ul>
            {% for post in collections.blog-posts %}
                <li>
                    <a href="{{ post.url }}">{{ post.data.title }}</a>
                </li>
            {% endfor %}
        </ul>

</div>

Becomes this:

<div class="section-title">Recent Posts</div>
<div class="content">

        <ul>
            
        </ul>

</div>

In any instance the .njk file is slotted in. I'm guessing this has to do with either the order in which eleventy processes .njk files specifically, or just a pathing issue that ruins the function—but any pointers would be nice!

[pdehaan]

Maybe try using array syntax in case it doesn't like the variable name blog-posts:

 <div class="content">

         <ul>
-            {% for post in collections.blog-posts %}
+            {% for post in collections['blog-posts'] %}
                 <li>
                     <a href="{{ post.url }}">{{ post.data.title }}</a>
                 </li>

[pdehaan]

As for top n posts, I'd probably use a custom filter to slice an array:

        <ul>
            {% for post in collections['blog-posts'] | reverse | head(2) %}
                <li>
                    <a href="{{ post.url }}">{{ post.data.title }}</a>
                </li>
            {% endfor %}
        </ul>

  eleventyConfig.addFilter("head", function (arr = [], count = 5) {
    if (count < 1) return arr.slice(count);
    return arr.slice(0, count);
  });

Or you can see a slightly better version in the eleventy-base-blog at https://github.com/11ty/eleventy-base-blog/blob/d78b03ae1d059a8e69941e49fa0214595bcf828d/eleventy.config.js#L51-L61

[robocone]

Tried that slightly better version (and the corrected syntax), and it worked like a charm in the output—thanks again!