How to properly chain layouts

[peekxc]

I'm trying to achieve very basic layout chaining with pugjs, but it's just not working!

Consider the following example (which is available in this test repo):

.
├── _includes
│   ├── baseof.pug
│   ├── blog.pug
│   └── partials
│       └── post.pug
├── _site
│   ├── index.html
│   ├── post1
│   │   └── index.html
│   └── post2
│       └── index.html
├── content
│   ├── index.md
│   ├── post1.md
│   └── post2.md
├── eleventy.config.js

Suppose I want to make a blog page (via blog.pug), whose blog posts are tagged with post, e.g. something like:

<!-- post1.md --> 
---
title: My awesome blog
tags: post
layout: partials/post.pug
---
My first blog post

I want to wrap the blog content in some html/css given by the layout partials/post.pug, let's say to make the text blue:

//- _includes/partials/post.pug
article(style="color: blue;") 
  != content

To put them all together, I iterate using collections:

//- _includes/blog.pug
extends ./baseof.pug 

block main 
  main(style="color: red;")
    != content 
  h2 Blog posts
  each post in [...collections.post].reverse()
    != post.content

This page inherits from a parent template via pug's extends:

//- _includes/blog.pug
html
  head 
    meta(charset="utf-8")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title=title 
  body 
    block main 
    block scripts 

This problem is that this doesn't work!

The blog post content should be blue, not black. Indeed, it appears post.content contains just the rendered markdown content, not the stylized layout content. The good news is the docs do affirm this:

..each collection item will have the following data:

• page: ...
• data: all data for this piece of content (includes any data inherited from layouts)
• rawInput: ...
• content: the rendered content of this template. This does not include layout wrappers.

The issue is that none of the following works:

each post in [...collections.post].reverse()
  != post.content         //- doesn't include layout wrapper  
  != post.templateContent //- doesn't include layout wrapper  
  != post.data.content    //- v2 only -- also doesn't include layout wrapper 

The only way I can actually get the content rendered using the prescribed layout is to somehow load the rendered html from page.outputPath variable. But the only way I know how to do this (in v2) is with a filter, i.e.:

each post in [...collections.post].reverse()
  != filters.readHTML(post.page.outputPath)

Where the filter comes from the solution given in this issue:

// eleventy.config.js
const fs = require('fs');

module.exports = function(eleventyConfig) { 
  ...
  eleventyConfig.addFilter("readHTML", (path) => {
    const html_str = fs.readFileSync(path, "utf8");
    return html_str; 
  })
  
  // Assign filters to pug 
  global.filters = eleventyConfig.javascriptFunctions; 
  eleventyConfig.setPugOptions({ 
     globals: ['filters'],
     debug: false
  });

Doing this in v3 is an open problem. Using a filter feels like a hack, but I don't know how to do this otherwise, none of the 11ty variables seem to have the layout wrapped content!

Any and all feedback would be appreciated