Add Auspice component for meta image tags

Adds a function that can be used in Auspice to return the proper static
image paths for each pathogen page or narrative. This is useful for
creating open graph and twitter image tags.

auspice-client/customisations/config.json

@@ -10,6 +10,7 @@
   },
   "navbarComponent": "navbar.js",
   "splashComponent": "splash.js",
+  "socialComponent": "social.js",
   "browserTitle": "Nextstrain",
   "googleAnalyticsKey": "UA-92687617-1"
 }

auspice-client/customisations/social.js

@@ -0,0 +1,56 @@
+import ncovCards from "../../static-site/src/components/Cards/nCoVCards";
+import communityCards from "../../static-site/src/components/Cards/communityCards";
+import coreCards from "../../static-site/src/components/Cards/coreCards";
+import narrativeCards from "../../static-site/src/components/Cards/narrativeCards";
+import config from "../../static-site/data/SiteConfig";
+
+
+const siteImage = config.siteLogo;
+const allCards = [ncovCards, communityCards, coreCards, narrativeCards];
+const imageList = generateImageLookup(allCards, siteImage);
+
+
+/* This function creates a list that pairs path regexes to their splash images. */
+// Example output:
+// [
+//   [/^\/zika.*/, "/splash_images/zika.png"],
+//   [/^\/WNV.*/, "/splash_images/wnv.jpg"]
+// ]
+function generateImageLookup(cards, defaultImage) {
+  let imageLookup = [].concat(...cards);
+  // Sort reverse alphabetically so that e.g. "/ncov/foo" precedes "/ncov"
+  imageLookup.sort((a, b) => b.url.localeCompare(a.url));
+  // Extract path and image from each card, making the path into a valid regex
+  imageLookup = imageLookup.map((el) => {
+    const escapedUrl = escapeRegExp(el.url);
+    const regexString = `^${escapedUrl}.*`;
+    const regex = new RegExp(regexString);
+    return [regex, `/splash_images/${el.img}`];
+  });
+  // Append the catch-all default image
+  imageLookup.push([new RegExp(".*"), defaultImage]);
+  return imageLookup;
+}
+
+
+/* Escapes any regex special characters from a string
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions */
+function escapeRegExp(string) {
+  return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
+}
+
+
+/* Iterates through the paths and returns the associated image
+path if the regex matches the current window path. This will
+return the default siteImage if no path is matched. */
+function getSocialImage(windowPath, imageLookup=imageList, defaultImage=siteImage) {
+  for (const [regex, imagePath] of imageLookup) {
+    if (regex.test(windowPath)) {
+      return imagePath;
+    }
+  }
+  return defaultImage;
+}
+
+
+export default getSocialImage;