feat: Add og:image and og:title (#1078)

Co-authored-by: tihuan <[email protected]>
chanzuckerberg · Aug 23, 2024 · 261ff81 · 261ff81
1 parent 270653c
commit 261ff81
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 38 deletions.
diff --git a/.infra/rdev/values.yaml b/.infra/rdev/values.yaml
@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-de849f4b
+        tag: sha-06531c84
       replicaCount: 1
       env:
         # env vars common to all deployment stages

diff --git a/client/index.html b/client/index.html
@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>CELL&times;GENE | Explorer</title>
+    <meta property="og:title" content="CELLxGENE | Explorer" />
+    <meta property="og:image" content="static/images/cxg-explorer-og.jpg" />
     <style>
       html,
       body,

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -89,7 +89,6 @@
     "react-async": "^10.0.1",
     "react-dom": "^17.0.2",
     "react-flip-toolkit": "^7.0.12",
-    "react-helmet": "^6.1.0",
     "react-icons": "^4.2.0",
     "react-redux": "^7.2.0",
     "redux": "^4.0.5",
@@ -150,7 +149,6 @@
     "@types/pako": "^1.0.2",
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
-    "@types/react-helmet": "^6.1.2",
     "@types/react-redux": "^7.1.18",
     "@types/sha1": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

diff --git a/client/src/assets/img/cxg-explorer-og.jpg b/client/src/assets/img/cxg-explorer-og.jpg
diff --git a/client/src/components/app.tsx b/client/src/components/app.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import Helmet from "react-helmet";
 import { connect } from "react-redux";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
@@ -81,7 +80,6 @@ class App extends React.Component<StateProps & { dispatch: AppDispatch }> {
         <StyledEngineProvider injectFirst>
           <EmotionThemeProvider theme={theme}>
             <ThemeProvider theme={theme}>
-              <Helmet title="CELL&times;GENE | Explorer" />
               {loading ? <LayoutSkeleton /> : null}
               {error ? (
                 <div

diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -18,6 +18,13 @@ import "./assets/img/chrome.png";
 import "./assets/img/firefox.png";
 import "./assets/img/edge.png";
 import "./assets/img/cellxgene.png";
+
+/**
+ * These are imported for Webpack asset/resource module
+ * to bundle in order to be used in open graph meta tags
+ */
+import "./assets/img/cxg-explorer-og.jpg";
+
 import { checkFeatureFlags } from "./util/featureFlags/featureFlags";
 
 FocusStyleManager.onlyShowFocusOnTabs();