fix: og:title/image and fontFamily (#1082)

Author: tihuan

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-06531c84
+        tag: sha-78bf2226
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/index.html

@@ -66,6 +66,15 @@
     >
 
     <div id="root"></div>
+    <!-- Inject open graph image -->
+    <script>
+      document
+        .querySelector('meta[property="og:image"]')
+        .setAttribute(
+          "content",
+          `${window.location.pathname}static/images/cxg-explorer-og.jpg`
+        );
+    </script>
     <!-- for local testing add / to your file path /static/... -->
     <script
       async

client/index_template.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,
@@ -35,6 +37,13 @@
         box-sizing: border-box;
       }
     </style>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400&display=swap"
+      rel="stylesheet"
+      crossorigin="anonymous"
+    />
     <script>
       var script = document.createElement('script')
       script.defer=true
@@ -58,6 +67,15 @@
     </noscript>
 
     <div id="root"></div>
+    <!-- Inject open graph image -->
+    <script>
+      document
+        .querySelector('meta[property="og:image"]')
+        .setAttribute(
+          "content",
+          `${window.location.pathname}static/images/cxg-explorer-og.jpg`
+        );
+    </script>
     <!-- for local testing add / to your file path /static/... -->
     <script
       async

client/src/components/theme.ts

@@ -60,7 +60,12 @@ export const cornersNone = (props: CommonThemeProps) => getCorners(props)?.none;
 const tabularNums = "tabular-nums";
 
 const typography = {
-  fontFamily: "Roboto Condensed",
+  fontFamily: {
+    body: "Roboto Condensed",
+    caps: "Roboto Condensed",
+    header: "Roboto Condensed",
+    tabular: "Roboto Condensed",
+  },
 
   styles: {
     body: {
@@ -428,7 +433,6 @@ export const shadowL = (props: CommonThemeProps) => getShadows(props)?.l;
 export const shadowM = (props: CommonThemeProps) => getShadows(props)?.m;
 export const shadowS = (props: CommonThemeProps) => getShadows(props)?.s;
 
-// @ts-expect-error due to Typography mismatch in ThemeOptions
 const appTheme = makeThemeOptions(themeOptions);
 
 export const theme = createTheme(appTheme);

server/ecs/app.py

@@ -50,7 +50,8 @@ def _before_adding_routes(app, app_config):
             "form-action": ["'self'", HUBSPOT_FORMS_URL],
             "connect-src": ["'self'", PLAUSIBLE_URL, HUBSPOT_FORMS_URL, EXPLORER_DEV_URL] + extra_connect_src,
             "script-src": ["'self'", "'unsafe-eval'", PLAUSIBLE_URL, HUBSPOT_FORMS_URL, HUBSPOT_JS_URL] + script_hashes,
-            "style-src": ["'self'", "'unsafe-inline'"],
+            "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+            "font-src": ["'self'", "https://fonts.gstatic.com"],
             "img-src": ["'self'", "https://cellxgene.cziscience.com", EXPLORER_DEV_URL]
             + extra_connect_src
             + ["data:", HUBSPOT_FORMS_URL],