Merge pull request #462 from georgetown-cset/460-add-opengraph-tags

Add OpenGraph tags to home and detail pages
georgetown-cset · Jun 26, 2024 · 77491bf · 77491bf
2 parents 4abc0b3 + 1633282
commit 77491bf
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 16 deletions.
diff --git a/web/gui-v2/package-lock.json b/web/gui-v2/package-lock.json
diff --git a/web/gui-v2/package.json b/web/gui-v2/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@eto/eto-ui-components": "^1.8.0",
+    "@eto/social-cards": "^0.4.3",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",

diff --git a/web/gui-v2/src/components/MetaTagsWrapper.jsx b/web/gui-v2/src/components/MetaTagsWrapper.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { MetaTags } from '@eto/social-cards';
+import socialCard from '@eto/social-cards/dist/tools/parat.png';
+
+const MetaTagsWrapper = ({
+  title = "PARAT \u2013 Emerging Technology Observatory",
+  subtitle = undefined,
+  description = "ETO's hub for data on private-sector companies and their AI activities."
+}) => {
+  const fullTitle = subtitle ? `${subtitle} \u2013 ${title}` : title;
+
+  return (
+    <>
+      <title>{fullTitle}</title>
+      <MetaTags
+        title={fullTitle}
+        description={description}
+        socialCardUrl={socialCard}
+      />
+    </>
+  );
+};
+
+export default MetaTagsWrapper;
diff --git a/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx b/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx
@@ -6,6 +6,7 @@ import { AppWrapper } from '@eto/eto-ui-components';
 import DetailView from '../../components/DetailView';
 import ParatUsageDisclaimer from '../../components/ParatUsageDisclaimer';
 import { company_data as allCompanies } from '../../static_data/data';
+import MetaTagsWrapper from '../../components/MetaTagsWrapper';
 
 const CompanyPage = ({ data }) => {
   const { cset_id: companyId, name: companyName } = data.companiesJson;
@@ -36,9 +37,6 @@ export const query = graphql`
 
 export const Head = ({ pageContext }) => {
   return (
-    <>
-      <html lang="en" />
-      <title>{pageContext.name} &ndash; PARAT &ndash; Emerging Technology Observatory</title>
-    </>
+    <MetaTagsWrapper subtitle={pageContext.name} />
   );
 };
diff --git a/web/gui-v2/src/pages/index.js b/web/gui-v2/src/pages/index.js
@@ -9,6 +9,7 @@ import {
 } from '@eto/eto-ui-components';
 
 import ListView from '../components/ListView';
+import MetaTagsWrapper from '../components/MetaTagsWrapper';
 import ParatUsageDisclaimer from '../components/ParatUsageDisclaimer';
 
 const styles = {
@@ -65,9 +66,6 @@ export default IndexPage;
 
 export const Head = () => {
   return (
-    <>
-      <html lang="en" />
-      <title>PARAT &ndash; Emerging Technology Observatory</title>
-    </>
+    <MetaTagsWrapper />
   );
 };