fix(cli): #1715 split active content keys on first hyphen so hyphenated collections resolve

packages/cli/src/data/client.js

@@ -18,7 +18,10 @@ async function getContentAsData(key = "") {
   } else if (CONTENT_STATE && !PRERENDER) {
     // if user is not prerendering, just fetch the entire graph but apply the same filtering
     const graph = await fetch("/graph.json").then((resp) => resp.json());
-    const value = key.split("-").pop();
+    // split on only the first "-" so hyphenated collection names / routes keep their hyphens
+    // https://github.com/ProjectEvergreen/greenwood/issues/1715
+    const delimiterIndex = key.indexOf("-");
+    const value = delimiterIndex === -1 ? "" : key.slice(delimiterIndex + 1);
 
     if (key === "graph") {
       return graph;

packages/cli/src/plugins/resource/plugin-active-content.js

@@ -32,7 +32,11 @@ class ContentAsDataResource {
   async serve(url, request) {
     const { graph } = this.compilation;
     const contentKey = request.headers.get("x-content-key") ?? "";
-    const keyPieces = contentKey.split("-");
+    // split on only the first "-" so hyphenated collection names / routes keep their hyphens
+    // https://github.com/ProjectEvergreen/greenwood/issues/1715
+    const delimiterIndex = contentKey.indexOf("-");
+    const type = delimiterIndex === -1 ? contentKey : contentKey.slice(0, delimiterIndex);
+    const value = delimiterIndex === -1 ? "" : contentKey.slice(delimiterIndex + 1);
     let status;
     let body;
 
@@ -44,10 +48,10 @@ class ContentAsDataResource {
 
       if (contentKey === "graph") {
         body = graph;
-      } else if (keyPieces[0] === "collection") {
-        body = filterContentByCollection(graph, keyPieces[1]);
-      } else if (keyPieces[0] === "route") {
-        body = filterContentByRoute(graph, keyPieces[1]);
+      } else if (type === "collection") {
+        body = filterContentByCollection(graph, value);
+      } else if (type === "route") {
+        body = filterContentByRoute(graph, value);
       }
 
       if (process.env.__GWD_COMMAND__ === "build") {

packages/cli/test/cases/develop.config.active-content-collection-hyphen/develop.config.active-content-collection-hyphen.spec.js

@@ -0,0 +1,134 @@
+/*
+ * Use Case
+ * Run Greenwood develop command with active content and a collection whose name
+ * contains a hyphen (e.g. "my-posts"), queried via the /___graph.json content key API.
+ *
+ * User Result
+ * Should start the dev server and return the pages belonging to a hyphenated collection
+ * when requested with X-CONTENT-KEY: collection-my-posts (regression for content keys
+ * being split on every hyphen).
+ *
+ * User Command
+ * greenwood develop
+ *
+ * User Config
+ * {
+ *   activeContent: true,
+ *   devServer: {
+ *     port: 1988
+ *   }
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   pages/
+ *     my-blog/
+ *       first.html      (collection: my-posts)
+ *       second.html     (collection: [my-posts, nav])
+ *     about.html        (collection: nav)
+ *     index.html        (collection: nav)
+ */
+
+// https://github.com/ProjectEvergreen/greenwood/issues/1715
+import { expect } from "chai";
+import path from "node:path";
+import { getOutputTeardownFiles } from "../../../../../test/utils.js";
+import { Runner } from "gallinago";
+import { fileURLToPath } from "node:url";
+
+describe("Develop Greenwood With: ", function () {
+  const LABEL = "Active Content with a hyphenated collection name";
+  const cliPath = path.join(process.cwd(), "packages/cli/src/bin.js");
+  const outputPath = fileURLToPath(new URL(".", import.meta.url));
+  const hostname = "http://localhost";
+  const port = 1988;
+  let runner;
+
+  before(function () {
+    this.context = {
+      hostname: `${hostname}:${port}`,
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function () {
+    before(async function () {
+      await runner.setup(outputPath);
+
+      await new Promise((resolve, reject) => {
+        runner
+          .runCommand(cliPath, "develop", {
+            onStdOut: (message) => {
+              if (
+                message.includes(`Started local development server at http://localhost:${port}`)
+              ) {
+                resolve();
+              }
+            },
+          })
+          .catch(reject);
+      });
+    });
+
+    describe("Content Request Types", () => {
+      describe("Hyphenated Collection Request", () => {
+        let response;
+
+        before(async function () {
+          response = await fetch(`${hostname}:${port}/___graph.json`, {
+            headers: {
+              "x-content-key": "collection-my-posts",
+            },
+          });
+        });
+
+        it("should return the pages that belong to the hyphenated collection", async () => {
+          const data = await response.json();
+
+          expect(data.length).to.equal(2);
+        });
+      });
+
+      describe("Hyphen-free Collection Request", () => {
+        let response;
+
+        before(async function () {
+          response = await fetch(`${hostname}:${port}/___graph.json`, {
+            headers: {
+              "x-content-key": "collection-nav",
+            },
+          });
+        });
+
+        it("should still return the pages that belong to a hyphen-free collection", async () => {
+          const data = await response.json();
+
+          expect(data.length).to.equal(3);
+        });
+      });
+
+      describe("Route Request", () => {
+        let response;
+
+        before(async function () {
+          response = await fetch(`${hostname}:${port}/___graph.json`, {
+            headers: {
+              "x-content-key": "route-/my-blog",
+            },
+          });
+        });
+
+        it("should still return the pages under a hyphenated route", async () => {
+          const data = await response.json();
+
+          expect(data.length).to.equal(2);
+        });
+      });
+    });
+  });
+
+  after(async function () {
+    await runner.stopCommand();
+    await runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});

packages/cli/test/cases/develop.config.active-content-collection-hyphen/greenwood.config.js

@@ -0,0 +1,6 @@
+export default {
+  activeContent: true,
+  devServer: {
+    port: 1988,
+  },
+};

packages/cli/test/cases/develop.config.active-content-collection-hyphen/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/cli/test/cases/develop.config.active-content-collection-hyphen/src/pages/about.html

@@ -0,0 +1,12 @@
+---
+title: About
+collection: nav
+order: 2
+---
+
+<html>
+  <head></head>
+  <body>
+    <h1>About Page</h1>
+  </body>
+</html>

packages/cli/test/cases/develop.config.active-content-collection-hyphen/src/pages/index.html

@@ -0,0 +1,12 @@
+---
+title: Home
+collection: nav
+order: 1
+---
+
+<html>
+  <head></head>
+  <body>
+    <h1>Home Page</h1>
+  </body>
+</html>

packages/cli/test/cases/develop.config.active-content-collection-hyphen/src/pages/my-blog/first.html

@@ -0,0 +1,11 @@
+---
+title: First Post
+collection: my-posts
+---
+
+<html>
+  <head></head>
+  <body>
+    <h1>First Post</h1>
+  </body>
+</html>

packages/cli/test/cases/develop.config.active-content-collection-hyphen/src/pages/my-blog/second.html

@@ -0,0 +1,13 @@
+---
+title: Second Post
+collection:
+  - my-posts
+  - nav
+---
+
+<html>
+  <head></head>
+  <body>
+    <h1>Second Post</h1>
+  </body>
+</html>