feat: add open graph and twitter meta tags for anvil-cmg (#4797)

.gitignore

@@ -58,6 +58,9 @@ _templates
 # favicons
 /public/favicons/*
 
+# og images
+/public/og/*
+
 /files/**/out/
 
 #Python

app/common/meta/constants.ts

@@ -0,0 +1,45 @@
+import type { PageMeta } from "./entities";
+
+export const CONTENT_PAGE_META: Record<string, PageMeta> = {
+  "beta-announcement": {
+    pageDescription:
+      "AnVIL Data Explorer beta launch announcement and new features.",
+    pageTitle: "Beta Announcement",
+  },
+  "ga-announcement": {
+    pageDescription: "AnVIL Data Explorer general availability announcement.",
+    pageTitle: "GA Announcement",
+  },
+  guides: {
+    pageDescription:
+      "Guides for downloading and accessing data from the AnVIL Data Explorer.",
+    pageTitle: "Guides",
+  },
+  "guides/data-download-options": {
+    pageDescription:
+      "Overview of data download options available in the AnVIL Data Explorer.",
+    pageTitle: "Data Download Options",
+  },
+  "guides/data-download-via-curl": {
+    pageDescription: "Download datasets using the curl command line tool.",
+    pageTitle: "Data Download via curl",
+  },
+  "guides/individual-file-download": {
+    pageDescription:
+      "Download individual files directly from the AnVIL Data Explorer.",
+    pageTitle: "Individual File Download",
+  },
+  "guides/tsv-file-manifest-download": {
+    pageDescription:
+      "Export a TSV file manifest with download URLs from the AnVIL Data Explorer.",
+    pageTitle: "TSV File Manifest Download",
+  },
+  privacy: {
+    pageDescription: "Privacy policy for this data explorer.",
+    pageTitle: "Privacy Policy",
+  },
+  "terms-of-service": {
+    pageDescription: "Terms of service for this data explorer.",
+    pageTitle: "Terms of Service",
+  },
+};

app/common/meta/entities.ts

@@ -0,0 +1,4 @@
+export interface PageMeta {
+  pageDescription: string;
+  pageTitle: string;
+}

app/components/common/OgMeta/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_DESCRIPTION =
+  "Explore datasets, donors, biosamples, and files in this cloud-based genomic data platform.";

app/components/common/OgMeta/ogMeta.tsx

@@ -0,0 +1,74 @@
+import NextHead from "next/head";
+import { useRouter } from "next/router";
+import { JSX } from "react";
+import type { OgMetaProps } from "./types";
+
+/**
+ * Builds the canonical path from the router's asPath, stripping query and hash.
+ * @param asPath - The router's asPath value.
+ * @returns clean path.
+ */
+function buildPath(asPath: string): string {
+  return asPath.split("?")[0].split("#")[0];
+}
+
+/**
+ * Builds the OG title from the page title and app title.
+ * @param appTitle - The application title.
+ * @param pageTitle - The page-specific title.
+ * @returns formatted title.
+ */
+function buildTitle(appTitle: string, pageTitle?: string | null): string {
+  if (pageTitle && pageTitle !== appTitle) {
+    return `${pageTitle} - ${appTitle}`;
+  }
+  return appTitle;
+}
+
+/**
+ * Renders Open Graph and Twitter meta tags for rich link sharing.
+ * @param props - The component props.
+ * @param props.appTitle - The application title.
+ * @param props.browserURL - The site's base URL.
+ * @param props.defaultDescription - Fallback description when no page description is provided.
+ * @param props.pageDescription - Page-specific description.
+ * @param props.pageTitle - Page-specific title.
+ * @returns head element with meta tags.
+ */
+export const OgMeta = ({
+  appTitle,
+  browserURL,
+  defaultDescription,
+  pageDescription,
+  pageTitle,
+}: OgMetaProps): JSX.Element => {
+  const { asPath } = useRouter();
+  const description = pageDescription || defaultDescription;
+  const image = `${browserURL}/og/og-image.png`;
+  const path = buildPath(asPath);
+  const title = buildTitle(appTitle, pageTitle);
+  const url = `${browserURL}${path}`;
+  return (
+    <NextHead>
+      <meta key="description" content={description} name="description" />
+      <meta
+        key="og:description"
+        content={description}
+        property="og:description"
+      />
+      <meta key="og:image" content={image} property="og:image" />
+      <meta key="og:image:height" content="630" property="og:image:height" />
+      <meta key="og:image:width" content="1200" property="og:image:width" />
+      <meta key="og:site_name" content={appTitle} property="og:site_name" />
+      <meta key="og:title" content={title} property="og:title" />
+      <meta key="og:type" content="website" property="og:type" />
+      <meta key="og:url" content={url} property="og:url" />
+      <meta
+        key="twitter:card"
+        content="summary_large_image"
+        name="twitter:card"
+      />
+      <meta key="twitter:image" content={image} name="twitter:image" />
+    </NextHead>
+  );
+};

app/components/common/OgMeta/types.ts

@@ -0,0 +1,7 @@
+export interface OgMetaProps {
+  appTitle: string;
+  browserURL: string;
+  defaultDescription: string;
+  pageDescription?: string | null;
+  pageTitle?: string | null;
+}

app/content/common/contentPages.ts

@@ -14,7 +14,8 @@ import {
 
 export async function getContentStaticProps(
   context: GetStaticPropsContext,
-  pageTitle: string
+  pageTitle: string,
+  pageDescription?: string
 ): Promise<GetStaticPropsResult<ContentProps>> {
   const slug = getSlug(context);
   const contentPathname = getContentPathname();
@@ -40,6 +41,7 @@ export async function getContentStaticProps(
     props: {
       layoutStyle: LAYOUT_STYLE_NO_CONTRAST_DEFAULT,
       mdxSource,
+      pageDescription,
       pageTitle,
       slug,
     },

app/content/common/entities.ts

@@ -10,6 +10,7 @@ export interface AnchorProps {
 export interface ContentProps {
   layoutStyle?: LayoutStyle;
   mdxSource: MDXRemoteSerializeResult | null;
+  pageDescription?: string;
   pageTitle: string;
   slug: string[] | null;
 }

pages/[entityListType]/[...params].tsx

@@ -56,6 +56,8 @@ interface PageUrl extends ParsedUrlQuery {
 export interface EntityDetailPageProps extends AzulEntityStaticResponse {
   entityListType: string;
   override?: Override;
+  pageDescription?: string | null;
+  pageTitle?: string | null;
 }
 
 /**
@@ -264,7 +266,15 @@ export const getStaticProps: GetStaticProps<AzulEntityStaticResponse> = async ({
 
   if (!entityConfig || !entityId) return { notFound: true };
 
-  const props: EntityDetailPageProps = { entityListType };
+  const { label } = entityConfig;
+  const pageTitle = typeof label === "string" ? label : null;
+  const props: EntityDetailPageProps = {
+    entityListType,
+    pageDescription: pageTitle
+      ? `View ${pageTitle.toLowerCase()} details and access data.`
+      : null,
+    pageTitle,
+  };
 
   // Process entity override props.
   processEntityOverrideProps(entityConfig, entityListType, entityId, props);

pages/[entityListType]/index.tsx

@@ -18,7 +18,8 @@ interface PageUrl extends ParsedUrlQuery {
 
 interface ListPageProps extends AzulEntitiesStaticResponse {
   entityListType: string;
-  pageTitle?: string;
+  pageDescription?: string | null;
+  pageTitle?: string | null;
 }
 
 /**
@@ -98,12 +99,12 @@ export const getStaticProps: GetStaticProps<
   const { exploreMode, label } = entityConfig;
   const { fetchAllEntities } = getEntityService(entityConfig, undefined); // Determine the type of fetch, either from an API endpoint or a TSV.
 
-  let pageTitle;
-  if (typeof label === "string") {
-    pageTitle = label;
-  }
+  const pageTitle = typeof label === "string" ? label : null;
+  const pageDescription = pageTitle
+    ? `Browse and explore ${pageTitle.toLowerCase()}.`
+    : null;
 
-  const props: ListPageProps = { entityListType, pageTitle };
+  const props: ListPageProps = { entityListType, pageDescription, pageTitle };
 
   // Seed database.
   if (exploreMode === EXPLORE_MODE.CS_FETCH_CS_FILTERING) {

pages/_app.tsx

@@ -25,6 +25,8 @@ import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { createTheme, CssBaseline, Theme, ThemeProvider } from "@mui/material";
 import { createBreakpoints } from "@mui/system";
 import { deepmerge } from "@mui/utils";
+import { DEFAULT_DESCRIPTION } from "app/components/common/OgMeta/constants";
+import { OgMeta } from "app/components/common/OgMeta/ogMeta";
 import { config } from "app/config/config";
 import { FEATURES } from "app/shared/entities";
 import { NextPage } from "next";
@@ -37,6 +39,7 @@ const FEATURE_FLAGS = Object.values(FEATURES);
 const SESSION_TIMEOUT = 15 * 60 * 1000; // 15 minutes
 
 export interface PageProps extends AzulEntitiesStaticResponse {
+  pageDescription?: string;
   pageTitle?: string;
 }
 
@@ -53,11 +56,18 @@ setFeatureFlags(FEATURE_FLAGS);
 function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element {
   // Set up the site configuration, layout and theme.
   const appConfig = config();
-  const { analytics, layout, redirectRootToPath, themeOptions } = appConfig;
+  const {
+    analytics,
+    appTitle,
+    browserURL,
+    layout,
+    redirectRootToPath,
+    themeOptions,
+  } = appConfig;
   const { gtmAuth, gtmId, gtmPreview } = analytics || {};
   const { floating, footer, header } = layout || {};
   const theme = createAppTheme(themeOptions);
-  const { entityListType, pageTitle } = pageProps as PageProps;
+  const { entityListType, pageDescription, pageTitle } = pageProps as PageProps;
   const Main = Component.Main || DXMain;
 
   // Initialize Google Tag Manager.
@@ -72,6 +82,13 @@ function MyApp({ Component, pageProps }: AppPropsWithComponent): JSX.Element {
       <ThemeProvider theme={theme}>
         <DXConfigProvider config={appConfig} entityListType={entityListType}>
           <Head pageTitle={pageTitle} />
+          <OgMeta
+            appTitle={appTitle}
+            browserURL={browserURL}
+            defaultDescription={DEFAULT_DESCRIPTION}
+            pageDescription={pageDescription}
+            pageTitle={pageTitle}
+          />
           <CssBaseline />
           <ServicesProvider>
             <SystemStatusProvider>

pages/beta-announcement/index.tsx

@@ -3,6 +3,7 @@ import { ContentView } from "@databiosphere/findable-ui/lib/views/ContentView/co
 import { GetStaticProps, InferGetStaticPropsType } from "next";
 import { MDXRemote } from "next-mdx-remote";
 import { JSX } from "react";
+import { CONTENT_PAGE_META } from "../../app/common/meta/constants";
 import { Content } from "../../app/components/Layout/components/Content/content";
 import { MDX_COMPONENTS } from "../../app/content/common/constants";
 import { getContentStaticProps } from "../../app/content/common/contentPages";
@@ -11,7 +12,12 @@ import NotFoundPage from "../404";
 const slug = ["beta-announcement"];
 
 export const getStaticProps: GetStaticProps = async () => {
-  return getContentStaticProps({ params: { slug } }, "Beta Announcement");
+  const meta = CONTENT_PAGE_META["beta-announcement"];
+  return getContentStaticProps(
+    { params: { slug } },
+    meta.pageTitle,
+    meta.pageDescription
+  );
 };
 
 const Page = ({

pages/data-dictionary/[dictionary]/index.tsx

@@ -21,7 +21,13 @@ export const getStaticProps = async (
   context: GetStaticPropsContext<PageUrlParams>
 ): Promise<GetStaticPropsResult<PageUrlParams>> => {
   const { dictionary } = context.params as PageUrlParams;
-  return { props: { dictionary } };
+  return {
+    props: {
+      dictionary,
+      pageDescription: "Browse the data dictionary and metadata schema.",
+      pageTitle: "Data Dictionary",
+    },
+  };
 };
 
 export const getStaticPaths: GetStaticPaths = async () => {

pages/export/biodata-catalyst.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Export selected data to NHLBI BioData Catalyst.",
       pageTitle: "Export to NHLBI BioData Catalyst",
     },
   };

pages/export/cancer-genomics-cloud.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Export selected data to Cancer Genomics Cloud.",
       pageTitle: "Export to Cancer Genomics Cloud",
     },
   };

pages/export/cavatica.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Export selected data to CAVATICA for analysis.",
       pageTitle: "Export to CAVATICA",
     },
   };

pages/export/download-manifest.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Request a file manifest for your selected data.",
       pageTitle: "Request File Manifest",
     },
   };

pages/export/export-to-terra.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Export selected data to Terra for analysis.",
       pageTitle: "Export to Terra",
     },
   };

pages/export/get-curl-command.tsx

@@ -10,6 +10,7 @@ import { hasNRESConsentGroup } from "../../app/viewModelBuilders/azul/anvil-cmg/
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Download selected data using the curl command.",
       pageTitle: 'Download Selected Data Using "curl"',
     },
   };

pages/export/index.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
+      pageDescription: "Choose an export method for your selected data.",
       pageTitle: "Choose Export Method",
     },
   };

pages/ga-announcement/index.tsx

@@ -3,6 +3,7 @@ import { ContentView } from "@databiosphere/findable-ui/lib/views/ContentView/co
 import { GetStaticProps, InferGetStaticPropsType } from "next";
 import { MDXRemote } from "next-mdx-remote";
 import { JSX } from "react";
+import { CONTENT_PAGE_META } from "../../app/common/meta/constants";
 import { Content } from "../../app/components/Layout/components/Content/content";
 import { MDX_COMPONENTS } from "../../app/content/common/constants";
 import { getContentStaticProps } from "../../app/content/common/contentPages";
@@ -11,9 +12,11 @@ import NotFoundPage from "../404";
 const slug = ["ga-announcement"];
 
 export const getStaticProps: GetStaticProps = async () => {
+  const meta = CONTENT_PAGE_META["ga-announcement"];
   return getContentStaticProps(
     { params: { slug } },
-    "General Availability Announcement"
+    meta.pageTitle,
+    meta.pageDescription
   );
 };