Add Plausible.io tracking support

Setting up Plausible's tracking is done with
https://github.com/4lejandrito/next-plausible

Tracking is optional; by not setting the plausibleDomain configuration
the tracking is not enabled.

.changeset/eight-crabs-develop.md

@@ -0,0 +1,7 @@
+---
+'squareone': minor
+---
+
+Add support for Plausible.io analytics
+
+In Squareone, set the `plausibleDomain` configuration to the Plausible tracking domain. E.g. data.lsst.cloud for the RSP. To disable Plausible tracking where it isn't supported, set this configuration to `null`.

apps/squareone/package.json

@@ -50,6 +50,7 @@
     "js-yaml": "^4.1.0",
     "next": "^12.2.4",
     "next-mdx-remote": "^4.4.1",
+    "next-plausible": "^3.12.1",
     "next-themes": "^0.2.0",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",

apps/squareone/squareone.config.schema.json

@@ -38,6 +38,11 @@
       "type": "string",
       "title": "COmanage registry URL (e.g. https://id.lsst.cloud). Omit or set as null for non-COmanage deployments."
     },
+    "plausibleDomain": {
+      "type": "string",
+      "title": "Plausible tracking domain",
+      "description": "Domain (e.g. data.lsst.cloud) for Plausible tracking. Omit to disable Plausible."
+    },
     "apiAspectPageMdx": {
       "type": "string",
       "title": "/api-aspect Page MDX content"

apps/squareone/src/pages/_app.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import getConfig from 'next/config';
 import { ThemeProvider } from 'next-themes';
+import PlausibleProvider from 'next-plausible';
 
 // Global CSS
 // Keep these imports in sync with .storybook/preview.js (Next can't import
@@ -14,34 +15,50 @@ import '../styles/globals.css';
 import '../styles/icons';
 
 import Page from '../components/Page';
+import { plausibleDomain } from 'next-plausible/dist/lib/common';
 
-function MyApp({ Component, pageProps, baseUrl, semaphoreUrl }) {
+function MyApp({
+  Component,
+  pageProps,
+  baseUrl,
+  semaphoreUrl,
+  plausibleDomain,
+}) {
   // Use the content layout defined by the page component, if avaialble.
   // Otherwise, the page itself is used as the content area layout container.
   const getLayout = Component.getLayout || ((page) => page);
 
   /* eslint-disable react/jsx-props-no-spreading */
-  return (
+  const coreApp = (
     <ThemeProvider defaultTheme="system">
       <Page baseUrl={baseUrl} semaphoreUrl={semaphoreUrl}>
         {getLayout(<Component {...pageProps} />)}
       </Page>
     </ThemeProvider>
   );
   /* eslint-enable react/jsx-props-no-spreading */
+  if (!plausibleDomain) {
+    return coreApp;
+  }
+  return (
+    <PlausibleProvider domain={{ plausibleDomain }}>
+      {{ coreApp }}
+    </PlausibleProvider>
+  );
 }
 
 MyApp.getInitialProps = async () => {
   const { publicRuntimeConfig } = getConfig();
   const { baseUrl, semaphoreUrl } = publicRuntimeConfig;
-  return { baseUrl, semaphoreUrl };
+  return { baseUrl, semaphoreUrl, plausibleDomain };
 };
 
 MyApp.propTypes = {
   Component: PropTypes.elementType.isRequired,
   pageProps: PropTypes.object.isRequired,
   baseUrl: PropTypes.string.isRequired,
   semaphoreUrl: PropTypes.string,
+  plausibleDomain: PropTypes.string,
 };
 
 export default MyApp;