Inconsistent reloading of site on updating frontmatter

[yash-chowdhary]

• MarkBind Version: MarkBind 2.9.1

What did you do? Please include the actual source code causing the issue.

• Created a MarkBind site using the default template: markbind init --template default
• Edited index.md to use the default layout on that page by replacing header: header.md with layout: default.
• Executed markbind serve
• index.html w/o header live-reloads correctly.
• Replaced default layout(layout: default) with header in frontmatter (header: header.md)
• index.html live-reloads with the header, as expected
• Retried using the default layout on that page by replacing header: header.md with layout: default

(same results with footer: footer.md)

<frontmatter>
  layout: default
  pageNav: 2
  pageNavTitle: "Chapters of This Page"
  siteNav: site-nav.md
</frontmatter>

What did you expect to happen? The default layout to take over and the original header/footer in header.md/footer.md to not take effect.

What actually happened? Please include the actual, raw output. The header/footer doesn't get removed. However, if I disconnect the sever and re-run markbind build / markbind serve, the change is reflected i.e. the default layout is rendered instead of the header in header.md.

If this behaviour is intentional, perhaps we can document it under Frontmatter or Page Layouts?

[crphang]

I could replicate it. This behaviour is not intentional. This is because the default in layouts are empty for footer and header.

Try replacing it with:

header.md

<header>
</header>

And it will work.

This happened because since layout default is empty:

Page.prototype.collectPageSection = function (section) {
  const $ = cheerio.load(this.content, { xmlMode: false });
  const pageSection = $(section);
  if (pageSection.length === 0) { // This line of code is executed when header is empty
    return;
  }
  this.pageSectionsHtml[section] = htmlBeautify($.html(section), { indent_size: 2 }).trim(); // As a result page sections is NOT replaced
  pageSection.remove();
  this.content = htmlBeautify($.html(), { indent_size: 2 });
};

We could move towards making our page immutable or page generation idempotent as much as possible to help remove such errors associated to state mutations

Something like this fixes it

Page.prototype.collectAllPageSections = function () {
+ this.pageSectionsHtml = {}; // This resets the pageSectionsHTML whenever we collect.
  this.collectPageSection('header');
  this.collectPageSection(`#${SITE_NAV_ID}`);
  this.collectPageSection('footer');
};

[yash-chowdhary]

Try replacing it with:

header.md

<header>
</header>

We could move towards making our page immutable or page generation idempotent as much as possible to help remove such errors associated to state mutations

Something like this fixes it

Page.prototype.collectAllPageSections = function () {
+ this.pageSectionsHtml = {}; // This resets the pageSectionsHTML whenever we collect.
  this.collectPageSection('header');
  this.collectPageSection(`#${SITE_NAV_ID}`);
  this.collectPageSection('footer');
};

Is there any particular reason that header.md and footer.md (head.md and navigation.md as well) are blank upon initialization? We could go ahead with both the suggested fixes/changes, couldn't we?

[yamgent]

Is there any particular reason that header.md and footer.md (head.md and navigation.md as well) are blank upon initialization? We could go ahead with both the suggested fixes/changes, couldn't we?

It is probably just an oversight, they shouldn't be blank. Yes let's do both.