fix: adding langTag to ampHtml based on language in api/v1/config (#299)

Co-authored-by: Amogh Sahasrabhojanee <amogh@quintype.com>

docs-src/tutorials/opts.md

@@ -91,11 +91,7 @@ Feature config is an object that can be used to configure different features of
    - storiesToTake: sets the number of related stories displayed. Defaults to 5
 3. infiniteScroll:
    - `storySeparatorText`: String that will be displayed by the separator that separates two infinite scroll stories. If nothing is passed, `SCROLL FOR NEXT` is displayed
-4. langTag:
-   - used to add the lang attribute to the html tag for SEO purposes
-   - Optional. if not provided, lang attribute is not added on the html tag
-   - accepts an object. Key `sketches-host` and value is the lang attribute that you wish to provide.
-5. sidebarMenu
+4. sidebarMenu
    - Optional. To tell amplib from where to pick items for the sidebar (Hamburger) menu, pass the slug of that menu group to `opts.featureConfig.sidebarMenu.menuGroupSlug`
    - This can be extended to subdomains as well. For example if you have a subdomain called `world-news`, set `opts.domains["world-news"].featureConfig.sidebarMenu.menuGroupSlug`. Now the sidebar menu on the subdomain `world-news` will pick items from whatever menu group you've set
    - go to {@tutorial hamburger-menu} for more info
@@ -123,10 +119,6 @@ const exampleFeatureConfig = {
   infiniteScroll: {
     storySeparatorText: string
   },
-  langTag: {
-    "https://www.thequint.com": "en",
-    "https://hindi.thequint.com": "hi"
-  },
   sidebarMenu: {
     menuGroupSlug: string
   }

src/__fixtures__/config.fixture.tsx

@@ -24,7 +24,13 @@ export const publisherConfig: PublisherConfig = {
   layout: {
     "no-of-visible-cards-in-a-blocked-story": 1
   },
-  domains: []
+  domains: [],
+  language: {
+    "iso-code": "en",
+    "ietf-code": "en-us",
+    name: "english",
+    direction: "ltr"
+  }
 };
 
 export const ampConfig: AMPConfig = {

src/helpers/ampify-story/ampify-story.test.ts

@@ -2,9 +2,9 @@
  * @jest-environment node
  */
 
-import { ampifyStory, getLangTag } from "./ampify-story";
+import { ampifyStory } from "./ampify-story";
 import { isValidAmpHtml } from "../../utils/validate-amp";
-import { allElementsStory, textStory, publisherConfig, ampConfig, configOpts, seo, config } from "../../__fixtures__";
+import { allElementsStory, textStory, publisherConfig, ampConfig, configOpts, seo } from "../../__fixtures__";
 
 function mockStoryType(desiredType) {
   const story = { ...textStory };
@@ -64,27 +64,3 @@ describe("Ampify Story", () => {
     expect(customLiveBlogTemplate.mock.calls.length).toBe(0);
   });
 });
-
-describe("getLangTag helper function", () => {
-  it("should pick lang tag if passed in featureConfig", () => {
-    const modifiedConfig = { ...config };
-    modifiedConfig.publisherConfig["sketches-host"] = "bar";
-    modifiedConfig.opts = {
-      featureConfig: {
-        langTag: {
-          foo: "de",
-          bar: "fr",
-          baz: "hi"
-        }
-      }
-    };
-    expect(getLangTag(modifiedConfig)).toBe("fr");
-  });
-  it("should return empty str if featureConfig not provided", () => {
-    const modifiedConfig = { ...config };
-    modifiedConfig.opts = {
-      featureConfig: {}
-    };
-    expect(getLangTag(modifiedConfig)).toBe("");
-  });
-});

src/helpers/ampify-story/ampify-story.tsx

@@ -23,7 +23,7 @@ import React from "react";
 export function ampifyStory({ story, publisherConfig, ampConfig, seo = "", opts = {} }: AmpifyStoryTypes) {
   const config = { publisherConfig, ampConfig, opts };
   const template = getTemplate({ story, config, seo });
-  const langTag = getLangTag(config);
+  const langTag = get(publisherConfig, ["language", "iso-code"], null);
   return renderToString({ template, seo, langTag });
 }
 
@@ -39,11 +39,3 @@ const getTemplate = ({ story, config, seo }) => {
       return <GenericStory story={story} config={config} />;
   }
 };
-
-export const getLangTag = (config) => {
-  // Ideally lang tag should cone from story API. Until platform provides it in story API, taking it from featureConfig.
-  const sketchesHost = get(config, ["publisherConfig", "sketches-host"]);
-  const langTagObj = get(config, ["opts", "featureConfig", "langTag"]);
-  const langTag = get(langTagObj, sketchesHost, "");
-  return langTag;
-};

src/molecules/related-stories/__snapshots__/related-stories.test.tsx.snap

@@ -3175,6 +3175,12 @@ exports[`RelatedStories should render default 1`] = `
           "facebook": Object {
             "app-id": "1234",
           },
+          "language": Object {
+            "direction": "ltr",
+            "ietf-code": "en-us",
+            "iso-code": "en",
+            "name": "english",
+          },
           "layout": Object {
             "no-of-visible-cards-in-a-blocked-story": 1,
           },

src/templates/generic-story/__snapshots__/generic-story.test.tsx.snap

@@ -3152,6 +3152,12 @@ exports[`GenericStory Template should render 1`] = `
         "facebook": Object {
           "app-id": "1234",
         },
+        "language": Object {
+          "direction": "ltr",
+          "ietf-code": "en-us",
+          "iso-code": "en",
+          "name": "english",
+        },
         "layout": Object {
           "no-of-visible-cards-in-a-blocked-story": 1,
         },
@@ -7267,6 +7273,12 @@ exports[`GenericStory Template should render 1`] = `
           "facebook": Object {
             "app-id": "1234",
           },
+          "language": Object {
+            "direction": "ltr",
+            "ietf-code": "en-us",
+            "iso-code": "en",
+            "name": "english",
+          },
           "layout": Object {
             "no-of-visible-cards-in-a-blocked-story": 1,
           },

src/templates/live-blog/__snapshots__/live-blog.validation.test.tsx.snap

@@ -3152,6 +3152,12 @@ exports[`The LiveBlog Default Template should match snapshot 1`] = `
         "facebook": Object {
           "app-id": "1234",
         },
+        "language": Object {
+          "direction": "ltr",
+          "ietf-code": "en-us",
+          "iso-code": "en",
+          "name": "english",
+        },
         "layout": Object {
           "no-of-visible-cards-in-a-blocked-story": 1,
         },

src/types/config.ts

@@ -18,6 +18,12 @@ export interface PublisherConfig {
   "publisher-id": number;
   "publisher-settings"?: object;
   domains: DomainsTypes[];
+  language: {
+    "iso-code": string;
+    "ietf-code": string;
+    name: string;
+    direction: string;
+  };
   sections?: [];
   layout?: {
     "no-of-visible-cards-in-a-blocked-story": number | null;