From bd1c4fced71ec101d5be0838fd028449c49089bd Mon Sep 17 00:00:00 2001 From: Philip Thomas Date: Fri, 3 Apr 2020 16:15:35 -0500 Subject: [PATCH 1/3] Fix siteLogo url The open graph image in the meta tags 404s because the siteLogo url in SiteConfig.js points to the location in the repo rather than the public location after the static site is built. --- static-site/data/SiteConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static-site/data/SiteConfig.js b/static-site/data/SiteConfig.js index 762f8d27b..dac789c36 100644 --- a/static-site/data/SiteConfig.js +++ b/static-site/data/SiteConfig.js @@ -1,7 +1,7 @@ module.exports = { siteTitle: "Nextstrain", siteTitleAlt: "Real-time tracking of pathogen evolution", // Alternative site title for SEO. - siteLogo: "/static/logos/nextstrain-logo-small.png", // Logo used for SEO + siteLogo: "/logos/nextstrain-logo-small.png", // Logo used for SEO siteUrl: "https://nextstrain.org", pathPrefix: "/", siteDescription: "Real-time tracking of pathogen evolution", // Website description used for RSS feeds/meta description tag. From 61bf0de8134cc35723607da9b9113e3419b1b5f9 Mon Sep 17 00:00:00 2001 From: Philip Thomas Date: Sat, 4 Apr 2020 14:14:49 -0500 Subject: [PATCH 2/3] Add basic twitter card Adds a basic twitter summary card using the same title, image, and description as the open graph tags. Also improves the tag logic. --- static-site/src/components/SEO/SEO.jsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/static-site/src/components/SEO/SEO.jsx b/static-site/src/components/SEO/SEO.jsx index 8d7568150..87ba532ed 100644 --- a/static-site/src/components/SEO/SEO.jsx +++ b/static-site/src/components/SEO/SEO.jsx @@ -70,6 +70,7 @@ class SEO extends Component { return ( {/* General tags */} + @@ -80,14 +81,23 @@ class SEO extends Component { {/* OpenGraph tags */} - {postSEO ? : null} + {postSEO ? + : + + } - + {config.siteFBAppID ? + : + null + } + + {/* Twitter Card tags */} + + + + ); } From 72eeab0142a1e9298b447344aca39c03f6f3ef68 Mon Sep 17 00:00:00 2001 From: Philip Thomas Date: Wed, 15 Apr 2020 17:27:06 -0500 Subject: [PATCH 3/3] Add social tags component Adds a react component that can be imported into Auspice as an extension. This will sync the open graph and twitter tags with the current pathogen title, description and splash image. --- auspice-client/customisations/config.json | 1 + auspice-client/customisations/social.js | 83 +++++++++++++++++++++++ 2 files changed, 84 insertions(+) create mode 100644 auspice-client/customisations/social.js diff --git a/auspice-client/customisations/config.json b/auspice-client/customisations/config.json index a276fecf0..5a33b21e1 100644 --- a/auspice-client/customisations/config.json +++ b/auspice-client/customisations/config.json @@ -10,6 +10,7 @@ }, "navbarComponent": "navbar.js", "splashComponent": "splash.js", + "socialComponent": "social.js", "browserTitle": "Nextstrain", "googleAnalyticsKey": "UA-92687617-1" } diff --git a/auspice-client/customisations/social.js b/auspice-client/customisations/social.js new file mode 100644 index 000000000..bdb7a5acf --- /dev/null +++ b/auspice-client/customisations/social.js @@ -0,0 +1,83 @@ +import React from 'react'; // eslint-disable-line +import { Helmet } from "react-helmet"; // eslint-disable-line +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"], +// [/.*/, "/logos/nextstrain-logo-small.png"] +// ] +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; +} + +const SocialTags = ({metadata, pageTitle}) => { + const url = `${window.location.origin}${window.location.pathname}`; + const socialImagePath = getSocialImage(window.location.pathname); + const socialImageUrl = `${window.location.origin}${socialImagePath}`; + + /* react-helmet combines these with existing header values. + These tags will override shared tags from earlier in the tree. */ + return ( + + {/* OpenGraph tags */} + + + + {metadata && metadata.title ? + : + null} + + + {/* Twitter tags */} + + + {metadata && metadata.title ? + : + null} + + + ); +}; + +export default SocialTags;