bug/issue 1475 handle top level pages and layouts HTML output merging (#1498)

Author: thescientist13

packages/cli/src/lib/layout-utils.js

@@ -5,7 +5,7 @@ import {
   getRollupConfigForBrowserScripts,
   getRollupConfigForSsrPages,
 } from "../config/rollup.config.js";
-import { getAppLayout, getPageLayout, getUserScripts } from "../lib/layout-utils.js";
+import { getAppLayout, getPageLayout, getGreenwoodScripts } from "../lib/layout-utils.js";
 import { hashString } from "../lib/hashing-utils.js";
 import {
   checkResourceExists,
@@ -328,7 +328,7 @@ async function bundleSsrPages(compilation, optimizePlugins) {
     // and before we optimize so that all bundled assets can tracked up front
     // would be nice to see if this can be done in a single pass though...
     for (const page of ssrPages) {
-      const { imports, route, layout, pageHref } = page;
+      const { route, pageHref } = page;
       const moduleUrl = new URL(pageHref);
       const request = new Request(moduleUrl);
       const data = await executeRouteModule({
@@ -340,11 +340,12 @@ async function bundleSsrPages(compilation, optimizePlugins) {
         scripts: [],
         request,
       });
-      let staticHtml = "";
+      let staticHtml = "<content-outlet></content-outlet>";
+
+      staticHtml = await getPageLayout(staticHtml, compilation, page, data.layout);
+      staticHtml = await getAppLayout(staticHtml, compilation, page);
+      staticHtml = await getGreenwoodScripts(staticHtml, compilation);
 
-      staticHtml = data.layout ? data.layout : await getPageLayout(pageHref, compilation, layout);
-      staticHtml = await getAppLayout(staticHtml, compilation, imports, page);
-      staticHtml = await getUserScripts(staticHtml, compilation);
       staticHtml = await (
         await interceptPage(
           new URL(`http://localhost:8080${route}`),

packages/cli/src/lifecycles/bundle.js

@@ -143,7 +143,9 @@ const generateGraph = async (compilation) => {
           });
         } else if (isPage) {
           let root = filename.split("/")[filename.split("/").length - 1].replace(extension, "");
-          let layout = extension === ".html" ? null : "page";
+          // should we even have a default page layout?
+          // https://github.com/ProjectEvergreen/greenwood/issues/1271
+          let layout = "page";
           let title = null;
           let label = getLabelFromRoute(`${route}/`);
           let imports = [];

packages/cli/src/lifecycles/graph.js

@@ -11,8 +11,8 @@ import rehypeRaw from "rehype-raw";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
-import { getUserScripts, getPageLayout, getAppLayout } from "../../lib/layout-utils.js";
-import { requestAsObject } from "../../lib/resource-utils.js";
+import { getPageLayout, getAppLayout, getGreenwoodScripts } from "../../lib/layout-utils.js";
+import { requestAsObject, checkResourceExists } from "../../lib/resource-utils.js";
 import { unified } from "unified";
 import { Worker } from "worker_threads";
 import { parse as htmlparser } from "node-html-parser";
@@ -37,26 +37,32 @@ class StandardHtmlResource {
 
   async serve(url, request) {
     const { config, context } = this.compilation;
-    const { userWorkspace } = context;
+    const { userWorkspace, pagesDir, layoutsDir } = context;
     const { pathname } = url;
     const isSpaRoute = this.compilation.graph.find((node) => node.isSPA);
     const matchingRoute = this.compilation.graph.find((node) => node.route === pathname) || {};
-    const { pageHref } = matchingRoute;
+    const { pageHref, route } = matchingRoute;
     const filePath =
       !matchingRoute.external && pageHref
         ? new URL(pageHref).pathname.replace(userWorkspace.pathname, "./")
         : "";
     const isMarkdownContent = (filePath || "").split(".").pop() === "md";
+    const isHtmlContent = (filePath || "").split(".").pop() === "html";
     let body = "";
-    let layout = matchingRoute.layout || null;
-    let customImports = matchingRoute.imports || [];
     let ssrBody;
     let ssrLayout;
     let processedMarkdown = null;
-
-    if (matchingRoute.external) {
-      layout = matchingRoute.layout || layout;
-    }
+    // final contents to return from the plugin
+    let html = "";
+
+    const customPageFormatPlugins = config.plugins
+      .filter((plugin) => plugin.type === "resource" && !plugin.isGreenwoodDefaultPlugin)
+      .map((plugin) => plugin.provider(this.compilation));
+    const isCustomStaticPage =
+      customPageFormatPlugins[0] &&
+      customPageFormatPlugins[0].servePage === "static" &&
+      customPageFormatPlugins[0].shouldServe &&
+      (await customPageFormatPlugins[0].shouldServe(new URL(pageHref)));
 
     if (isMarkdownContent) {
       const markdownContents = await fs.readFile(new URL(pageHref), "utf-8");
@@ -85,9 +91,21 @@ class StandardHtmlResource {
         .use(rehypePlugins) // apply userland rehype plugins
         .use(rehypeStringify) // convert AST to HTML string
         .process(markdownContents);
-    }
+    } else if (isHtmlContent) {
+      if (route.endsWith("/404/")) {
+        const pathUrl = (await checkResourceExists(new URL("./404.html", pagesDir)))
+          ? new URL("./404.html", pagesDir)
+          : new URL("./404.html", layoutsDir);
+
+        body = await fs.readFile(pathUrl, "utf-8");
+      } else {
+        body = await fs.readFile(new URL(pageHref), "utf-8");
+      }
+    } else if (isCustomStaticPage) {
+      const transformed = await customPageFormatPlugins[0].serve(new URL(pageHref));
 
-    if (matchingRoute.isSSR) {
+      body = await transformed.text();
+    } else if (matchingRoute.isSSR) {
       const routeModuleLocationUrl = new URL(pageHref);
       const routeWorkerUrl = this.compilation.config.plugins
         .find((plugin) => plugin.type === "renderer")
@@ -124,15 +142,6 @@ class StandardHtmlResource {
       });
     }
 
-    if (isSpaRoute) {
-      body = await fs.readFile(new URL(isSpaRoute.pageHref), "utf-8");
-    } else {
-      body = ssrLayout ? ssrLayout : await getPageLayout(pageHref, this.compilation, layout);
-    }
-
-    body = await getAppLayout(body, this.compilation, customImports, matchingRoute);
-    body = await getUserScripts(body, this.compilation);
-
     if (processedMarkdown) {
       const wrappedCustomElementRegex =
         /<p><[a-zA-Z]*-[a-zA-Z](.*)>(.*)<\/[a-zA-Z]*-[a-zA-Z](.*)><\/p>/g;
@@ -149,25 +158,43 @@ class StandardHtmlResource {
       }
 
       // https://github.com/ProjectEvergreen/greenwood/issues/1126
-      body = body.replace(
-        /<content-outlet>(.*)<\/content-outlet>/s,
-        processedMarkdown.value.replace(/\$/g, "$$$"),
-      );
+      body = processedMarkdown.value.replace(/\$/g, "$$$");
     } else if (matchingRoute.external) {
-      body = body.replace(/<content-outlet>(.*)<\/content-outlet>/s, matchingRoute.body);
+      body = matchingRoute.body;
     } else if (ssrBody) {
-      body = body.replace(
-        /<content-outlet>(.*)<\/content-outlet>/s,
-        `<!-- greenwood-ssr-start -->${ssrBody.replace(/\$/g, "$$$")}<!-- greenwood-ssr-end -->`,
+      // we wrap SSR content in comments so we can extract it during prerendering to avoid double pre-rendering
+      body = `<!-- greenwood-ssr-start -->${ssrBody.replace(/\$/g, "$$$")}<!-- greenwood-ssr-end -->`;
+    }
+
+    if (isSpaRoute) {
+      html = await fs.readFile(new URL(isSpaRoute.pageHref), "utf-8");
+    } else {
+      const mergedPageLayoutContents = await getPageLayout(
+        body,
+        this.compilation,
+        matchingRoute,
+        ssrLayout,
+      );
+
+      const mergedAppLayoutContents = await getAppLayout(
+        mergedPageLayoutContents,
+        this.compilation,
+        matchingRoute,
       );
+
+      html = mergedAppLayoutContents;
     }
 
+    html = await getGreenwoodScripts(html, this.compilation);
+
     // clean up any empty placeholder content-outlet
-    if (body.indexOf("<content-outlet></content-outlet>") > 0) {
-      body = body.replace("<content-outlet></content-outlet>", "");
+    // TODO do we even want this?
+    // https://github.com/ProjectEvergreen/greenwood/issues/1271
+    if (html.indexOf("<content-outlet></content-outlet>") > 0) {
+      html = html.replace("<content-outlet></content-outlet>", "");
     }
 
-    return new Response(body, {
+    return new Response(html, {
       headers: new Headers({
         "Content-Type": this.contentType,
       }),

packages/cli/src/plugins/resource/plugin-standard-html.js

@@ -92,6 +92,12 @@ 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");
+      });
+
       it("should have the correct value for author <meta> tag in the <head>", function () {
         const authorMeta = dom.window.document
           .querySelector("head meta[name=author]")
@@ -122,6 +128,12 @@ 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");
+      });
+
       it("should have the correct songs frontmatter data in the page output", function () {
         const contents = dom.window.document.querySelector("body span").innerHTML;
         const songs = JSON.parse(contents);

packages/cli/test/cases/build.config.active-frontmatter/build.config.active-frontmatter.spec.js

@@ -0,0 +1,15 @@
+---
+title: My First Post
+layout: blog
+published: 11/11/2022
+author: Owen Buckley
+---
+
+<html>
+  <body>
+    <h1>My First Post</h1>
+    <h3>Published: ${globalThis.page.data.published}</h3>
+    <h4>Author: ${globalThis.page.data.author}</h4>
+    <p>Lorum Ipsum.</p>
+  </body>
+</html>

packages/cli/test/cases/build.config.active-frontmatter/src/pages/blog/first-post.html

@@ -0,0 +1,19 @@
+---
+title: My Second Post
+layout: blog
+published: 11/11/2022
+author: Owen Buckley
+songs:
+  - title: Song 1
+    url: song1.mp3
+  - title: Song 2
+    url: song2.mp3
+---
+
+<html>
+  <body>
+    <h1>My Second Post</h1>
+    <h2>Playlist</h2>
+    <span>${globalThis.page.data.songs}</span>
+  </body>
+</html>

packages/cli/test/cases/build.config.active-frontmatter/src/pages/blog/first-post.md

@@ -52,7 +52,7 @@ describe("Build Greenwood With: ", function () {
       runner.runCommand(cliPath, "build");
     });
 
-    runSmokeTest(["public", "index"], LABEL);
+    runSmokeTest(["public"], LABEL);
 
     describe("SPA (Single Page Application)", function () {
       let dom;