feat: add gap scripts for production and staging (#40807)

* feat: set gap

* feat: add gap script conditionally

* feat: add 2.16.2 script

* feat: add initial tests

* feat: add dev and chinese gap scripts

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/package-lock.json

@@ -20464,8 +20464,7 @@
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-      "dev": true
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
     },
     "public-encrypt": {
       "version": "4.0.3",

client/package.json

@@ -86,6 +86,7 @@
     "path-browserify": "1.0.1",
     "prismjs": "1.23.0",
     "process": "0.11.10",
+    "psl": "^1.8.0",
     "query-string": "6.14.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",

client/static/misc/cap.js

@@ -0,0 +1,7 @@
+var hmt = hmt || [];
+(function() {
+var hm = document.createElement("script");
+hm.src = "https://hm.baidu.com/hm.js?5573716a80598952ad73aca7f896ef45";
+var s = document.getElementsByTagName("script")[0];
+s.parentNode.insertBefore(hm, s);
+})();

client/utils/tags.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import { withPrefix } from 'gatsby';
 import i18next from 'i18next';
+import psl from 'psl';
+import env from '../../config/env.json';
+
+const { homeLocation } = env;
 
 export const getheadTagComponents = () => {
   const socialImage =
     'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png';
+
   const pathToBootstrap = withPrefix('/css/bootstrap.min.css');
-  return [
+
+  let headTags = [
     <link
       as='style'
       href={pathToBootstrap}
@@ -47,6 +53,58 @@ export const getheadTagComponents = () => {
       name='monetization'
     />
   ];
+  return injectConditionalTags(headTags, homeLocation);
+};
+
+// strips subpath and protocol
+
+export const injectConditionalTags = (tagsArray, homeLocation) => {
+  if (homeLocation.includes('localhost')) return tagsArray;
+
+  const parsedHomeUrl = psl.parse(new URL(homeLocation).host);
+
+  // inject gap all production languages except Chinese
+  if (parsedHomeUrl.subdomain === 'www' && parsedHomeUrl.tld === 'org') {
+    tagsArray.push(
+      <script
+        href={withPrefix('/misc/gap-org.js')}
+        id='gap-org'
+        key='gap-org'
+        rel='stylesheet'
+      />
+    );
+  }
+
+  // inject gap for staging
+  if (parsedHomeUrl.subdomain === 'www' && parsedHomeUrl.tld === 'dev') {
+    tagsArray.push(
+      <script
+        href={withPrefix('/misc/gap-dev.js')}
+        id='gap-dev'
+        key='gap-dev'
+        rel='stylesheet'
+      />
+    );
+  }
+
+  // inject cap and Chinese gap for production Chinese
+  if (parsedHomeUrl.subdomain === 'chinese' && parsedHomeUrl.tld === 'org') {
+    tagsArray.push(
+      <scripts
+        href={withPrefix('/misc/cap.js')}
+        id='cap'
+        key='cap'
+        rel='stylesheet'
+      />,
+      <script
+        href={withPrefix('/misc/gap-org-chinese.js')}
+        id='gap-org-chinese'
+        key='gap-org-chinese'
+        rel='stylesheet'
+      />
+    );
+  }
+  return tagsArray;
 };
 
 export const getPostBodyComponents = pathname => {

client/utils/tags.test.js

@@ -0,0 +1,43 @@
+/* global expect */
+
+import { injectConditionalTags } from './tags';
+
+describe('Tags', () => {
+  it('injectConditionalTags should inject gap dev homelocation', () => {
+    let injectedTags = injectConditionalTags(
+      [],
+      'https://www.freecodecamp.dev'
+    );
+    expect(injectedTags.length === 1).toBeTruthy();
+    expect(injectedTags[0].props.id === 'gap-dev').toBeTruthy();
+  });
+  it('injectConditionalTags should inject gap for english homeLocation', () => {
+    let injectedTags = injectConditionalTags(
+      [],
+      'https://www.freecodecamp.org'
+    );
+    expect(injectedTags.length === 1).toBeTruthy();
+    expect(injectedTags[0].props.id === 'gap-org').toBeTruthy();
+  });
+  it('injectConditionalTags should inject gap for espanol homeLocation', () => {
+    let injectedTags = injectConditionalTags(
+      [],
+      'https://www.freecodecamp.org/espanol'
+    );
+    expect(injectedTags.length === 1).toBeTruthy();
+    expect(injectedTags[0].props.id === 'gap-org').toBeTruthy();
+  });
+  it('injectConditionalTags should inject cap and chinese gap for chinese homeLocation', () => {
+    let injectedTags = injectConditionalTags(
+      [],
+      'https://chinese.freecodecamp.org'
+    );
+    expect(injectedTags.length === 2).toBeTruthy();
+    expect(injectedTags[0].props.id === 'cap').toBeTruthy();
+    expect(injectedTags[1].props.id === 'gap-org-chinese').toBeTruthy();
+  });
+  it('injectConditionalTags should not inject tags for localhost homeLocation', () => {
+    let injectedTags = injectConditionalTags([], 'http://localhost:8000/');
+    expect(injectedTags.length === 0).toBeTruthy();
+  });
+});