bug/issue 1475 reconcile page level custom title and layout <title> merging when using active content (#1526)

thescientist13 · web-flow · commit f992744c5cbc · 2025-07-04T11:30:27.000-04:00
diff --git a/packages/cli/src/lib/layout-utils.js b/packages/cli/src/lib/layout-utils.js
@@ -111,13 +111,16 @@ async function mergeContentIntoLayout(
           : parentTitle.rawText;
       title = text.replace(activeFrontmatterTitleKey, matchingRoute.title || matchingRoute.label);
     } else {
-      title = matchingRoute.title
-        ? matchingRoute.title
-        : childTitle && childTitle.rawText
-          ? childTitle.rawText
-          : parentTitle && parentTitle.rawText
-            ? parentTitle.rawText
-            : "";
+      // we favor frontmatter title for the page
+      // otherwise we defer to page layouts and then ultimately the app layout
+      title =
+        outletType === "content" && matchingRoute?.title
+          ? matchingRoute.title
+          : childTitle && childTitle.rawText
+            ? childTitle.rawText
+            : parentTitle && parentTitle.rawText
+              ? parentTitle.rawText
+              : "";
     }
 
     const mergedHtml =
diff --git a/packages/cli/test/cases/build.config.active-frontmatter/build.config.active-frontmatter.spec.js b/packages/cli/test/cases/build.config.active-frontmatter/build.config.active-frontmatter.spec.js
@@ -27,6 +27,7 @@ import { JSDOM } from "jsdom";
 import path from "node:path";
 import chai from "chai";
 import { getOutputTeardownFiles } from "../../../../../test/utils.js";
+import { runSmokeTest } from "../../../../../test/smoke-test.js";
 import { Runner } from "gallinago";
 import { fileURLToPath } from "node:url";
 
@@ -51,6 +52,8 @@ describe("Build Greenwood With: ", function () {
       runner.runCommand(cliPath, "build");
     });
 
+    runSmokeTest(["public", "index"], LABEL);
+
     describe("Default Greenwood frontmatter should be interpolated in the correct places for the home page", function () {
       let dom;
 
@@ -83,7 +86,7 @@ describe("Build Greenwood With: ", function () {
       });
     });
 
-    describe("Simple frontmatter should be interpolated in the correct places", function () {
+    describe("Simple active frontmatter should be interpolated in the correct places for the first blog post page", function () {
       let dom;
 
       before(async function () {
@@ -95,7 +98,7 @@ describe("Build Greenwood With: ", function () {
       it("should have the correct value for the <title> tag in the <head> for the first post page", function () {
         const title = dom.window.document.querySelector("head title").textContent;
 
-        expect(title).to.be.equal("My First Post");
+        expect(title).to.be.equal("My Blog - My First Post");
       });
 
       it("should have the correct value for author <meta> tag in the <head>", function () {
@@ -119,7 +122,7 @@ describe("Build Greenwood With: ", function () {
       });
     });
 
-    describe("Rich frontmatter should be interpolated in the correct places", function () {
+    describe("Rich active frontmatter should be interpolated in the correct places for the second blog post page", function () {
       let dom;
 
       before(async function () {
@@ -131,7 +134,7 @@ describe("Build Greenwood With: ", function () {
       it("should have the correct value for the <title> tag in the <head> for second post page", function () {
         const title = dom.window.document.querySelector("head title").textContent;
 
-        expect(title).to.be.equal("My Second Post");
+        expect(title).to.be.equal("My Blog - My Second Post");
       });
 
       it("should have the correct songs frontmatter data in the page output", function () {
@@ -148,6 +151,26 @@ describe("Build Greenwood With: ", function () {
         });
       });
     });
+
+    describe("Page level custom title for the about page", function () {
+      let dom;
+
+      before(async function () {
+        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, "./about/index.html"));
+      });
+
+      it("should have the correct value for the <title> tag in the <head>", function () {
+        const title = dom.window.document.querySelector("head title").textContent;
+
+        expect(title).to.be.equal("My Custom About Page Title");
+      });
+
+      it("should have the correct content for the page", function () {
+        const heading = dom.window.document.querySelector("body h1").textContent;
+
+        expect(heading).to.be.equal("This is the about page");
+      });
+    });
   });
 
   after(function () {
diff --git a/packages/cli/test/cases/build.config.active-frontmatter/src/layouts/blog.html b/packages/cli/test/cases/build.config.active-frontmatter/src/layouts/blog.html
@@ -2,6 +2,7 @@
 <html lang="en" prefix="og:http://ogp.me/ns#">
   <head>
     <meta name="author" content="${globalThis.page.data.author}" />
+    <title>My Blog - ${globalThis.page.title}</title>
   </head>
 
   <body>
diff --git a/packages/cli/test/cases/build.config.active-frontmatter/src/pages/about.html b/packages/cli/test/cases/build.config.active-frontmatter/src/pages/about.html
@@ -0,0 +1,9 @@
+---
+title: My Custom About Page Title
+---
+
+<html>
+  <body>
+    <h1>This is the about page</h1>
+  </body>
+</html>
diff --git a/packages/cli/test/cases/build.default.title/build.default.title.spec.js b/packages/cli/test/cases/build.default.title/build.default.title.spec.js
@@ -66,7 +66,7 @@ describe("Build Greenwood With: ", function () {
       });
     });
 
-    describe("Custom Front-Matter Title", function () {
+    describe("Custom Frontmatter Title", function () {
       let dom;
 
       before(async function () {
diff --git a/www/layouts/app.html b/www/layouts/app.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en" prefix="og:http://ogp.me/ns#">
   <head>
-    <title>Greenwood - ${globalThis.page.title}</title>
+    <title>Greenwood</title>
     <meta charset="utf-8" />
     <meta
       name="description"
diff --git a/www/layouts/blog.html b/www/layouts/blog.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en" prefix="og:http://ogp.me/ns#">
   <head>
+    <title>Greenwood - ${globalThis.page.title}</title>
     <meta property="og:title" content="Greenwood - ${globalThis.page.title}" />
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism-tomorrow.css" />
     <link rel="stylesheet" href="../styles/page.css" />
diff --git a/www/layouts/docs.html b/www/layouts/docs.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html lang="en" prefix="og:http://ogp.me/ns#">
   <head>
+    <title>Greenwood - ${globalThis.page.title}</title>
     <meta property="og:title" content="Greenwood - ${globalThis.page.title}" />
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism-tomorrow.css" />
     <link rel="stylesheet" href="../styles/page.css" />

-Original file line number
+Diff line change
@@ @@ -0,0 +1,9 @@ @@
 +---
 +title: My Custom About Page Title
 +---
++
 +<html>
 +  <body>
 +    <h1>This is the about page</h1>
 +  </body>
 +</html>