Pcc 1752 article url from content structure

.changeset/dull-chicken-roll.md

@@ -0,0 +1,14 @@
+---
+"@pantheon-systems/next-approuter-pcc-starter-ts": minor
+"@pantheon-systems/pcc-react-sdk": minor
+"@pantheon-systems/pcc-sdk-core": minor
+---
+
+- Added functionality in the pcc-sdk-core to compute the path of an article from
+  the site's content structure. This will be the path at which the article will
+  be visible.
+- If someone tries to access the article without the full path, it will be
+  redirected to the full path.
+- Developers can use the default functionality as is and also customise the path
+  generation to only include the id or slug and a configurable number of
+  parents.

package.json

@@ -37,7 +37,10 @@
       "@pantheon-systems/pcc-react-sdk>yaml": ">=2.2.2",
       "@pantheon-systems/pcc-react-sdk>prettier": "^3.0.0",
       "webpack-dev-middleware": "^7.2.1",
-      "@pantheon-systems/pcc-vue-sdk>ufo": "1.5.3"
+      "@pantheon-systems/pcc-vue-sdk>ufo": "1.5.3",
+      "next": "14.2.23",
+      "@babel/core": "7.26.0",
+      "path-to-regexp": "0.1.12"
     }
   }
 }

packages/core/__tests__/core/pantheon-api.test.ts

@@ -26,8 +26,10 @@ const mockRequest = {
 vi.mock("../../src/helpers/", () => ({
   PCCConvenienceFunctions: {
     buildPantheonClient: vi.fn(),
+    getSite: vi.fn(),
   },
   getArticleBySlugOrId: vi.fn(),
+  getArticleURLFromSite: vi.fn(),
 }));
 
 vi.mock("../../src/lib/jwt", () => ({

packages/core/__tests__/helpers/article-url.test.ts

@@ -0,0 +1,153 @@
+import { getArticleURLFromSite } from "../../src/helpers";
+import { Site } from "../../src/types";
+
+describe("Article URL generation from Site content structure", () => {
+  it("should generate the correct URL for an article from a site which has no content structure", () => {
+    // Define a site without a content structure
+    const site: Site = {
+      id: "123",
+      name: "test",
+      url: "https://test.com",
+      domain: "test.com",
+      tags: [],
+      metadataFields: {},
+      contentStructure: {
+        active: [],
+      },
+    };
+
+    const article = {
+      id: "test-article",
+      slug: "my-article",
+    };
+
+    const articleURL = getArticleURLFromSite(article, site);
+
+    expect(articleURL).toBe("/articles/my-article");
+  });
+
+  it("should generate the correct URL for an article from a site which has a content structure", () => {
+    // Define a site with a content structure
+    const site: Site = {
+      id: "123",
+      name: "test",
+      url: "https://test.com",
+      domain: "test.com",
+      tags: [],
+      metadataFields: {},
+      contentStructure: {
+        active: [
+          {
+            id: "category-1",
+            name: "foo",
+            type: "category",
+            children: [
+              {
+                id: "nested-category-1",
+                name: "bar",
+                type: "category",
+                children: [
+                  { id: "test-article", name: "baz", type: "article" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const article = {
+      id: "test-article",
+      slug: "my-article",
+    };
+
+    const articleURL = getArticleURLFromSite(article, site);
+
+    expect(articleURL).toBe("/articles/foo/bar/my-article");
+  });
+
+  it("should generate the correct URL for an article from a site which has a content structure with a base path", () => {
+    // Define a site with a content structure
+    const site: Site = {
+      id: "123",
+      name: "test",
+      url: "https://test.com",
+      domain: "test.com",
+      tags: [],
+      metadataFields: {},
+      contentStructure: {
+        active: [
+          {
+            id: "category-1",
+            name: "foo",
+            type: "category",
+            children: [
+              {
+                id: "nested-category-1",
+                name: "bar",
+                type: "category",
+                children: [
+                  { id: "test-article", name: "baz", type: "article" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const article = {
+      id: "test-article",
+      slug: "my-article",
+    };
+
+    const basePath = "/test-articles";
+
+    const articleURL = getArticleURLFromSite(article, site, basePath);
+    expect(articleURL).toBe(`${basePath}/foo/bar/my-article`);
+  });
+
+  it("should generate URL with maxDepth", () => {
+    // Define a site with a content structure
+    const site: Site = {
+      id: "123",
+      name: "test",
+      url: "https://test.com",
+      domain: "test.com",
+      tags: [],
+      metadataFields: {},
+      contentStructure: {
+        active: [
+          {
+            id: "category-1",
+            name: "foo",
+            type: "category",
+            children: [
+              {
+                id: "nested-category-1",
+                name: "bar",
+                type: "category",
+                children: [
+                  { id: "test-article", name: "baz", type: "article" },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    };
+
+    const article = {
+      id: "test-article",
+      slug: "my-article",
+    };
+
+    const basePath = "/test-articles";
+
+    const articleURL = getArticleURLFromSite(article, site, basePath, 0);
+    expect(articleURL).toBe(`${basePath}/my-article`);
+
+    const articleURL2 = getArticleURLFromSite(article, site, basePath, 1);
+    expect(articleURL2).toBe(`${basePath}/bar/my-article`);
+  });
+});

packages/core/src/core/pantheon-api.ts

@@ -1,7 +1,11 @@
 import queryString from "query-string";
-import { getArticleBySlugOrId, PCCConvenienceFunctions } from "../helpers";
+import {
+  getArticleBySlugOrId,
+  getArticleURLFromSite,
+  PCCConvenienceFunctions,
+} from "../helpers";
 import { parseJwt } from "../lib/jwt";
-import { Article, MetadataGroup, SmartComponentMap } from "../types";
+import { Article, MetadataGroup, Site, SmartComponentMap } from "../types";
 import { PantheonClient, PantheonClientConfig } from "./pantheon-client";
 
 export interface ApiRequest {
@@ -45,7 +49,7 @@ type HeaderValue = string | string[] | number | undefined;
 
 export interface PantheonAPIOptions {
   /**
-   * A function that takes a PCC article ID and returns the path on your site
+   * A function that takes a PCC article ID (or and the site) and returns the path on your site
    * where the article is hosted.
    *
    * @example
@@ -55,8 +59,10 @@ export interface PantheonAPIOptions {
    * @default (article) => `/articles/${article.id}` (if not provided)
    *
    */
-  resolvePath?: (article: Partial<Article> & Pick<Article, "id">) => string;
-
+  resolvePath?: (
+    article: Partial<Article> & Pick<Article, "id">,
+    site: Site,
+  ) => string;
   /**
    * A function which returns the PCC site id currently in use.
    */
@@ -98,8 +104,7 @@ const defaultOptions = {
       isClientSide: false,
       ...props,
     }),
-  resolvePath: (article: Partial<Article> & Pick<Article, "id">) =>
-    `/articles/${article.id}`,
+  resolvePath: getArticleURLFromSite,
   // eslint-disable-next-line turbo/no-undeclared-env-vars
   getSiteId: () => process.env.PCC_SITE_ID as string,
   notFoundPath: "/404",
@@ -197,7 +202,10 @@ export const PantheonAPI = (givenOptions?: PantheonAPIOptions) => {
           return res.redirect(302, options.notFoundPath);
         }
 
-        const resolvedPath = options.resolvePath(article);
+        // Fetch the site
+        const site = await PCCConvenienceFunctions.getSite();
+        // Define the resolved path
+        const resolvedPath = options.resolvePath(article, site);
 
         return await res.redirect(
           302,