@quintype/framework 7.8.0-remove-prerender-param.0 → 7.9.0-custom-inifinite-scroller.0

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [7.8.0](https://github.com/quintype/quintype-node-framework/compare/v7.7.7...v7.8.0) (2022-09-19)
+
+
+### Features
+
+* add video support to web stories ([#322](https://github.com/quintype/quintype-node-framework/issues/322)) ([f41b82b](https://github.com/quintype/quintype-node-framework/commit/f41b82be8285b555970527204ec6478f21c47782))
+
+### [7.7.7](https://github.com/quintype/quintype-node-framework/compare/v7.7.0...v7.7.7) (2022-07-29)
+
+
+### Bug Fixes
+
+* remove prerender query param after the prerender check ([#314](https://github.com/quintype/quintype-node-framework/issues/314)) ([94eac28](https://github.com/quintype/quintype-node-framework/commit/94eac28bfd04483cc665c5ce4d2fc8768c84a31b))
+* remove prerender query param after the prerender check [#314](https://github.com/quintype/quintype-node-framework/issues/314) ([#317](https://github.com/quintype/quintype-node-framework/issues/317)) ([0067d81](https://github.com/quintype/quintype-node-framework/commit/0067d81fe545a726948db14a44768876b41f6ba8))
+
+### [7.7.6](https://github.com/quintype/quintype-node-framework/compare/v7.7.5...v7.7.6) (2022-07-28)
+
+
+### Bug Fixes
+
+* remove prerender query param after the prerender check [#314](https://github.com/quintype/quintype-node-framework/issues/314) ([#317](https://github.com/quintype/quintype-node-framework/issues/317)) ([0067d81](https://github.com/quintype/quintype-node-framework/commit/0067d81fe545a726948db14a44768876b41f6ba8))
+
+### [7.7.5](https://github.com/quintype/quintype-node-framework/compare/v7.7.4...v7.7.5) (2022-07-14)
+
+### [7.7.4](https://github.com/quintype/quintype-node-framework/compare/v7.7.3...v7.7.4) (2022-07-13)
+
+### [7.7.3](https://github.com/quintype/quintype-node-framework/compare/v7.7.2...v7.7.3) (2022-07-13)
+
+
+### Bug Fixes
+
+* remove prerender query param after the prerender check ([#314](https://github.com/quintype/quintype-node-framework/issues/314)) ([94eac28](https://github.com/quintype/quintype-node-framework/commit/94eac28bfd04483cc665c5ce4d2fc8768c84a31b))
+
 ### [7.7.2](https://github.com/quintype/quintype-node-framework/compare/v7.7.1...v7.7.2) (2022-07-08)
 
 ### [7.7.1](https://github.com/quintype/quintype-node-framework/compare/v7.7.0...v7.7.1) (2022-07-06)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.8.0-remove-prerender-param.0",
+  "version": "7.9.0-custom-inifinite-scroller.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "engines": {
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "prepublishOnly": "npm test && ./bin-dev-scripts/standard-version-release.sh",
-    "test": "NODE_ENV=test npx mocha --timeout 5000 --recursive --require ./test/babel",
+    "test": "NODE_ENV=test npx mocha --recursive --require ./test/babel",
     "watch-test": "NODE_ENV=test npx mocha --recursive --watch --require ./test/babel",
     "coverage": "nyc --all npm test",
     "coverage-html": "nyc --all --reporter=html npm test",
@@ -31,10 +31,10 @@
   "homepage": "https://github.com/quintype/quintype-node-framework#readme",
   "dependencies": {
     "@ampproject/toolbox-optimizer": "2.8.3",
-    "@quintype/amp": "^2.4.23",
-    "@quintype/backend": "^2.3.1",
+    "@quintype/amp": "2.6.0-custom-infinite-scroll.0",
+    "@quintype/backend": "2.3.2-related-stories-inf-scroll.3",
     "@quintype/components": "^3.0.0",
-    "@quintype/prerender-node": "^3.2.24",
+    "@quintype/prerender-node": "^3.2.26",
     "@quintype/seo": "^1.39.0",
     "atob": "^2.1.2",
     "babel-plugin-react-css-modules": "^5.2.6",

package/server/amp/handlers/index.js

@@ -1,9 +1,7 @@
 const { ampStoryPageHandler } = require("./story-page");
 const { storyPageInfiniteScrollHandler } = require("./infinite-scroll");
-const { bookendHandler } = require("./visual-stories-bookend");
 
 module.exports = {
   ampStoryPageHandler,
   storyPageInfiniteScrollHandler,
-  bookendHandler,
 };

package/server/amp/handlers/infinite-scroll.js

@@ -12,7 +12,7 @@ async function storyPageInfiniteScrollHandler(req, res, next, { client, config }
     client,
     queryParams: req.query,
   });
-  const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 5 }); // itemsTaken has to match with itemsToTake in ampStoryPageHandler
+  const jsonResponse = await infiniteScrollAmp.getResponse();
   if (jsonResponse instanceof Error) return next(jsonResponse);
   res.set("Content-Type", "application/json; charset=utf-8");
   setCorsHeaders({ req, res, next, publisherConfig: config });

package/server/amp/handlers/story-page.js

@@ -86,15 +86,29 @@ async function ampStoryPageHandler(
     const seoTags =
       seoInstance && seoInstance.getMetaTags(config, "story-page-amp", { data: { story, timezone }, config }, { url });
 
-    const infiniteScrollAmp = new InfiniteScrollAmp({
-      ampConfig,
-      publisherConfig: config,
-      client,
-    });
-    const infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: story["story-content-id"],
-    });
+    const infiniteScrollConfig = get(opts, ["featureConfig", "infiniteScroll"], "");
+    const infiniteScrollSource = get(infiniteScrollConfig, ["source"], "collection");
+    const inlineConfig = get(infiniteScrollConfig, ["inlineConfig"], "");
+    const remoteConfigEndpoint = get(infiniteScrollConfig, ["remoteConfigEndpoint"], "");
+
+    let infiniteScrollInlineConfig = [];
+
+    if (infiniteScrollSource === "custom") {
+      if (!inlineConfig || !remoteConfigEndpoint)
+        throw new Error("Required params of 'custom' source (inlineConfig /remoteConfigEndpoint) is missing!!");
+      infiniteScrollInlineConfig = await inlineConfig();
+    } else {
+      const infiniteScrollAmp = new InfiniteScrollAmp({
+        story,
+        ampConfig,
+        publisherConfig: config,
+        client,
+        infiniteScrollSource,
+      });
+      infiniteScrollInlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
+        storyId: story["story-content-id"],
+      });
+    }
     if (infiniteScrollInlineConfig instanceof Error) return next(infiniteScrollInlineConfig);
     if (infiniteScrollInlineConfig) {
       set(

package/server/amp/helpers/infinite-scroll.js

@@ -1,9 +1,10 @@
 class InfiniteScrollAmp {
-  constructor({ ampConfig, client, publisherConfig, queryParams }) {
+  constructor({ story, ampConfig, client, publisherConfig, queryParams, infiniteScrollSource }) {
+    this.story = story;
     this.client = client;
     this.publisherConfig = publisherConfig;
     this.queryParams = queryParams;
-    this.collSlug = "amp-infinite-scroll"; // this is hardcoded to "amp-infinite-scroll" temporarily. Ideally it should come from ampConfig from platform
+    this.infiniteScrollSource = infiniteScrollSource;
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -17,6 +18,14 @@ class InfiniteScrollAmp {
     );
   }
 
+  getFilteredApiItems(relatedStories) {
+    return relatedStories.filter(
+      (story) =>
+        story.access !== "subscription" &&
+        story["story-template"] !== "visual-story"
+    );
+  }
+
   formatData({ itemsArr, type }) {
     // formats configuration as per need of amp infinite scroll
     const arr = itemsArr.map((item) => ({
@@ -41,34 +50,42 @@ class InfiniteScrollAmp {
     return `${hostWithProtocol}/${s3Key}?format=webp&w=250`;
   }
 
-  async getResponse({ itemsTaken }) {
+  async getInfiniteScrollList(storyId, offset, limit) {
+    let filteredItems = [];
+    const params = { offset, limit };
+    if (this.infiniteScrollSource === "relatedStoriesApi") {
+      const relatedStoriesList = await this.story.getRelatedStories(this.client, params);
+      if (!relatedStoriesList)
+        return new Error();
+      return filteredItems = this.getFilteredApiItems(relatedStoriesList);
+    } else {
+      const collection = await this.client.getCollectionBySlug("amp-infinite-scroll");
+      if (!collection || (collection.items && !collection.items.length) || collection.error || collection === null)
+        return new Error();
+      return filteredItems = this.getFilteredCollItems(collection, storyId);
+    }
+  }
+
+  async getResponse() {
     const { "story-id": storyId } = this.queryParams;
     if (!storyId) return new Error(`Query param "story-id" missing`);
-
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || collection.error)
-      return new Error(`Infinite scroll collection ${this.collSlug} returned falsy value`);
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(itemsTaken);
+    const filteredItems = await this.getInfiniteScrollList(storyId, 5);
+    if (filteredItems instanceof Error) return new Error(`Infinite scroll collection amp-infinite-scroll returned falsy value`);
+    const slicedItems = filteredItems.slice(5);
     const formattedData = this.formatData({ itemsArr: slicedItems });
-
     return JSON.stringify(formattedData);
   }
 
-  async getInitialInlineConfig({ itemsToTake, storyId }) {
-    if (!itemsToTake || !storyId) return new Error("Required params for getInitialInlineConfig missing");
-
-    const collection = await this.client.getCollectionBySlug(this.collSlug);
-    if (!collection || (collection.items && !collection.items.length) || collection.error) return null;
-    const filteredItems = this.getFilteredCollItems(collection, storyId);
-    const slicedItems = filteredItems.slice(0, itemsToTake);
-    const formattedData = this.formatData({
+  async getInitialInlineConfig(storyId) {
+    if (!storyId) return new Error("Required params for getInitialInlineConfig missing");
+    const filteredItems = await this.getInfiniteScrollList(storyId, 0, 5);
+    if (filteredItems instanceof Error) return null;
+    const slicedItems = filteredItems.slice(0, 5);
+    const formattedData = slicedItems.length > 0 && this.formatData({
       itemsArr: slicedItems,
       type: "inline",
     });
-
     return JSON.stringify(formattedData);
   }
 }
-
 module.exports = InfiniteScrollAmp;

package/server/routes.js

@@ -345,9 +345,9 @@ exports.isomorphicRoutes = function isomorphicRoutes(
   if (prerenderServiceUrl) {
     app.use((req, res, next) => {
       if (req.query.prerender) {
-        delete req.query.prerender;
         try {
           // eslint-disable-next-line global-require
+          prerender.set("protocol", "https");
           prerender.set("prerenderServiceUrl", prerenderServiceUrl)(req, res, next);
         } catch (e) {
           logError(e);
@@ -627,10 +627,9 @@ exports.mountQuintypeAt = function (app, mountAt) {
  *
  */
 exports.ampRoutes = (app, opts = {}) => {
-  const { ampStoryPageHandler, storyPageInfiniteScrollHandler, bookendHandler } = require("./amp/handlers");
+  const { ampStoryPageHandler, storyPageInfiniteScrollHandler } = require("./amp/handlers");
 
   getWithConfig(app, "/amp/story/*", ampStoryPageHandler, opts);
   getWithConfig(app, "/amp/api/v1/amp-infinite-scroll", storyPageInfiniteScrollHandler, opts);
-  getWithConfig(app, "/amp/api/v1/bookend.json", bookendHandler, opts);
   getWithConfig(app, "/ampstories/*", ampStoryPageHandler, { ...opts, isVisualStory: true });
 };

package/test/integration/amp-handler-test.js

@@ -446,41 +446,3 @@ describe("Amp infinite scroll handler", () => {
       });
   });
 });
-
-describe("Amp visual stories bookend handler", () => {
-  it("returns the bookend if there are related stories", function (done) {
-    const app = createApp({
-      clientStub: getClientStubWithRelatedStories([{ headline: "foo" }]),
-    });
-    supertest(app)
-      .get("/amp/api/v1/bookend.json?storyId=111&sectionId=222")
-      .expect("Content-Type", /json/)
-      .expect("Cache-Control", /public/)
-      .expect(200)
-      .then((res) => {
-        const response = JSON.parse(res.text);
-        assert.equal("v1.0", response.bookendVersion);
-        assert.equal(3, response.components.length);
-        assert.equal("foo", response.components[1].title);
-      })
-      .then(() => done());
-  });
-  it("returns a 404 if there are no related stories", (done) => {
-    const app = createApp({ clientStub: getClientStubWithRelatedStories([]) });
-    supertest(app)
-      .get("/amp/api/v1/bookend.json?storyId=111&sectionId=222")
-      .expect("Content-Type", /json/)
-      .expect(404)
-      .then(() => done());
-  });
-  it("returns a 400 if 'storyId' and 'sectionId' query params aren't passed", (done) => {
-    const app = createApp({
-      clientStub: getClientStubWithRelatedStories([{ headline: "foo" }]),
-    });
-    supertest(app)
-      .get("/amp/api/v1/bookend.json")
-      .expect("Content-Type", /json/)
-      .expect(400)
-      .then(() => done());
-  });
-});

package/test/unit/amp/infinite-scroll-helper.js

@@ -3,8 +3,17 @@
 
 const assert = require("assert");
 const InfiniteScrollAmp = require("../../../server/amp/helpers/infinite-scroll");
+const { getTextStory } = require("../../data/amp-test-data");
 
 function getClientStub({
+  getStoryById = (id) =>
+    new Promise((resolve) => {
+      if (id === "4444")
+        resolve({
+          story: getTextStory({ "story-content-id": "7f3d5bdb-ec52-4047-ac0d-df4036ec974b" }),
+        });
+      resolve(null);
+    }),
   getCollectionBySlug = (slug) =>
     new Promise((resolve) => {
       if (slug === "amp-infinite-scroll")
@@ -19,6 +28,7 @@ function getClientStub({
                 "story-content-id": 1111,
                 slug: "sports/aa",
                 "hero-image-s3-key": "aa/a.jpg",
+                access: "public",
               },
             },
             {
@@ -30,6 +40,7 @@ function getClientStub({
                 "story-content-id": 2222,
                 slug: "sports/bb",
                 "hero-image-s3-key": "bb/b.jpg",
+                access: "public",
               },
             },
             {
@@ -41,6 +52,7 @@ function getClientStub({
                 "story-content-id": 3333,
                 slug: "sports/cc",
                 "hero-image-s3-key": "cc/c.jpg",
+                access: "public",
               },
             },
             {
@@ -52,6 +64,7 @@ function getClientStub({
                 "story-content-id": 4444,
                 slug: "sports/dd",
                 "hero-image-s3-key": "dd/d.jpg",
+                access: "public",
               },
             },
             {
@@ -63,6 +76,7 @@ function getClientStub({
                 "story-content-id": 5555,
                 slug: "sports/ee",
                 "hero-image-s3-key": "ee/e.jpg",
+                access: "public",
               },
             },
             {
@@ -74,6 +88,31 @@ function getClientStub({
                 "story-content-id": 6666,
                 slug: "sports/ff",
                 "hero-image-s3-key": "ff/f.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 7777,
+              story: {
+                "story-template": "text",
+                headline: "ggg",
+                "story-content-id": 7777,
+                slug: "sports/gg",
+                "hero-image-s3-key": "gg/g.jpg",
+                access: "public",
+              },
+            },
+            {
+              type: "story",
+              id: 8888,
+              story: {
+                "story-template": "text",
+                headline: "hhh",
+                "story-content-id": 8888,
+                slug: "sports/hh",
+                "hero-image-s3-key": "hh/h.jpg",
+                access: "public",
               },
             },
           ],
@@ -83,6 +122,7 @@ function getClientStub({
 } = {}) {
   return {
     getCollectionBySlug,
+    getStoryById
   };
 }
 const dummyPublisherConfig = {
@@ -96,9 +136,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       client: getClientStub(),
       publisherConfig: dummyPublisherConfig,
     });
-    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-    });
+    const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig();
     assert.strictEqual(inlineConfig instanceof Error, true);
     assert.throws(() => {
       throw new Error("Required params for getInitialInlineConfig missing");
@@ -117,8 +155,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -137,8 +174,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(inlineConfig, null);
   });
@@ -150,8 +186,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -164,8 +199,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 3333,
+      storyId: 1111,
     });
     assert.strictEqual(false, /sports\/bb/.test(inlineConfig));
     assert.strictEqual(false, /bb\/b.jpg/.test(inlineConfig));
@@ -179,8 +213,7 @@ describe("getInitialInlineConfig method of InfiniteScrollAmp helper function", f
       publisherConfig: dummyPublisherConfig,
     });
     const inlineConfig = await infiniteScrollAmp.getInitialInlineConfig({
-      itemsToTake: 5,
-      storyId: 2222,
+      storyId: 1111,
     });
     function isInlineConfigStructureValid(jsonStr) {
       const stories = JSON.parse(jsonStr);
@@ -207,7 +240,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { foo: "bar" },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
     assert.throws(() => {
       throw new Error(`Query param "story-id" missing`);
@@ -226,7 +259,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 2222 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(jsonResponse instanceof Error, true);
   });
   it("should remove current story from response", async function () {
@@ -237,7 +270,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/dd/.test(jsonResponse));
     assert.strictEqual(false, /dd\/d.jpg/.test(jsonResponse));
   });
@@ -249,7 +282,7 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
     assert.strictEqual(false, /sports\/bb/.test(jsonResponse));
     assert.strictEqual(false, /bb\/b.jpg/.test(jsonResponse));
   });
@@ -262,7 +295,8 @@ describe("getResponse method of InfiniteScrollAmp helper function", function ()
       publisherConfig: dummyPublisherConfig,
       queryParams: { "story-id": 4444 },
     });
-    const jsonResponse = await infiniteScrollAmp.getResponse({ itemsTaken: 2 });
+    const jsonResponse = await infiniteScrollAmp.getResponse();
+
     function isJsonConfigStructureValid(jsonStr) {
       const parsed = JSON.parse(jsonStr);
       const stories = parsed.pages;

package/server/amp/handlers/visual-stories-bookend.js

@@ -1,77 +0,0 @@
-const get = require("lodash/get");
-
-function getStoryUrl(story, config) {
-  if (get(story, ["story-template"]) === "news-elsewhere") {
-    return get(story, ["metadata", "reference-url"], "");
-  }
-  return `${config["sketches-host"]}/${story.slug}`;
-}
-
-async function bookendHandler(req, res, next, { config, client, sMaxAge = "900" }) {
-  const { storyId, sectionId } = req.query;
-  if (!storyId || !sectionId) {
-    res.status(400).json({
-      error: {
-        message: "Please provide 'storyId' and 'sectionId' query parameters",
-      },
-    });
-    return;
-  }
-
-  const relatedStoriesResponse = await client.getRelatedStories(storyId, sectionId);
-  const relatedStories = relatedStoriesResponse["related-stories"];
-
-  if (!relatedStories.length) {
-    res.status(404).json({ error: { message: "Not Found" } });
-    return;
-  }
-
-  const fbAppId = get(config, ["public-integrations", "facebook", "app-id"], "");
-
-  const jsonPayLoad = {
-    bookendVersion: "v1.0",
-    shareProviders: [
-      "twitter",
-      "email",
-      {
-        provider: "facebook",
-        app_id: fbAppId,
-      },
-      "whatsapp",
-      "linkedin",
-      "gplus",
-    ],
-    components: [].concat(
-      [
-        {
-          type: "heading",
-          text: "More to read",
-        },
-      ],
-      relatedStories.map((story) => ({
-        type: "small",
-        title: `${story.headline}`,
-        image: `${config["cdn-name"]}${story["hero-image-s3-key"]}?w=480&auto=format&compress`,
-        url: getStoryUrl(story, config),
-      })),
-      [
-        {
-          type: "cta-link",
-          links: [
-            {
-              text: "More stories",
-              url: `${config["sketches-host"]}`,
-            },
-          ],
-        },
-      ]
-    ),
-  };
-
-  res.header("Cache-Control", `public,max-age=15,s-maxage=${sMaxAge},stale-while-revalidate=1000,stale-if-error=14400`);
-  res.header("Vary", "Accept-Encoding");
-
-  res.json(jsonPayLoad);
-}
-
-module.exports = { bookendHandler };