Add a "finePrint" extension hook

docs/customise-client/api.md

@@ -23,7 +23,9 @@ A useful reference may be the [customisation JSON file](https://github.com/nexts
 
 * `sidebarTheme` allows modifications to the aesthetics of the sidebar. See below.
 * `navbarComponent` a (relative) path to a JS file exporting a React component to be rendered as the nav bar. See below.
+* `splashComponent` a (relative) path to a JS file exporting a React component to be rendered as the splash page. See below.
 * `browserTitle` The browser title for the page. Defaults to "auspice" if not defined.
+* `finePrint` String of Markdown to add to the "fine print" at the bottom of pages.
 * `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.
 * `serverAddress` Specify the address / prefix which the auspice client uses for API requests.
 * `mapTiles` Specify the address (and other information) for the tiles used to render the map.
@@ -150,4 +152,4 @@ If you are distributing your own version of auspice (i.e. not running it locally
 
 Please see [this discussion post](https://discussion.nextstrain.org/t/build-with-newest-nextstrain-ncov-has-api-requests-to-mapbox-403-forbidden/396/11?u=james) for a hands-on guide to setting custom map tile info.
 For some examples of other tile sets you may use, see the [OpenStreetMap wiki](https://wiki.openstreetmap.org/wiki/Tile_servers), and please remember to adhere to the licenses and terms of use for each tile server.
-The API address contains parameters as specified by the [Leaflet API](https://docs.mapbox.com/api/overview/).
+The API address contains parameters as specified by the [Leaflet API](https://docs.mapbox.com/api/overview/).

src/components/framework/fine-print.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Suspense, lazy } from "react";
 import { connect } from "react-redux";
 import styled from 'styled-components';
 import { withTranslation } from "react-i18next";
@@ -8,9 +8,12 @@ import { TRIGGER_DOWNLOAD_MODAL } from "../../actions/types";
 import Flex from "./flex";
 import { version } from "../../version";
 import { publications } from "../download/downloadModal";
+import { hasExtension, getExtension } from "../../util/extensions";
 
 const logoPNG = require("../../images/favicon.png");
 
+const MarkdownDisplay = lazy(() => import("../markdownDisplay"));
+
 const dot = (
   <span style={{marginLeft: 10, marginRight: 10}}>
     •
@@ -101,9 +104,8 @@ class FinePrint extends React.Component {
             {"Auspice v" + version}
           </Flex>
           <div style={{height: "5px"}}/>
-          <Flex className='finePrint'>
-            {getCitation()}
-          </Flex>
+          {getCustomFinePrint()}
+          {getCitation()}
         </div>
       </FinePrintStyles>
     );
@@ -115,7 +117,7 @@ export default WithTranslation;
 
 export function getCitation() {
   return (
-    <span>
+    <Flex className='finePrint'>
       <a className='logoContainer' href="https://nextstrain.org">
         <img alt="nextstrain.org" className='logo' width="24px" src={logoPNG}/>
       </a>
@@ -124,6 +126,22 @@ export function getCitation() {
         {publications.nextstrain.author} <i>{publications.nextstrain.journal}</i>
       </a>
       {")"}
-    </span>
+    </Flex>
+  );
+}
+
+export function getCustomFinePrint() {
+  const markdown = hasExtension("finePrint")
+    ? getExtension("finePrint")
+    : null;
+
+  if (!markdown) return null;
+
+  return (
+    <Suspense fallback={<></>}>
+      <Flex className='finePrint'>
+        <MarkdownDisplay mdstring={markdown} />
+      </Flex>
+    </Suspense>
   );
 }

src/components/markdownDisplay/index.js

@@ -6,8 +6,8 @@ export default function MarkdownDisplay({ mdstring, ...props }) {
   try {
     cleanDescription = parseMarkdown(mdstring);
   } catch (error) {
-    console.error(`Error parsing footer description: ${error}`);
-    cleanDescription = '<p>There was an error parsing the footer description.</p>';
+    console.error(`Error parsing Markdown: ${error}`);
+    cleanDescription = '<p>There was an error parsing the Markdown.  See the JS console.</p>';
   }
   return (
     <div

src/components/splash/splash.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import NavBar from "../navBar";
 import Flex from "../../components/framework/flex";
 import { CenterContent } from "./centerContent";
-import { FinePrintStyles, getCitation} from "../../components/framework/fine-print";
+import { FinePrintStyles, getCitation, getCustomFinePrint } from "../../components/framework/fine-print";
 
 const getNumColumns = (width) => width > 1000 ? 3 : width > 750 ? 2 : 1;
 
@@ -111,9 +111,8 @@ const SplashContent = ({available, browserDimensions, dispatch, errorMessage, ch
         <ListAvailable type="datasets" data={available.datasets}/>
         <ListAvailable type="narratives" data={available.narratives}/>
         <FinePrintStyles>
-          <Flex className='finePrint'>
-            {getCitation()}
-          </Flex>
+          {getCustomFinePrint()}
+          {getCitation()}
         </FinePrintStyles>
       </div>
     </>