Set a default opengraph image on the primary layout

packages/web/components/templates/PrimaryLayout.tsx

@@ -1,11 +1,6 @@
 import { PageMetaData, PageMetaDataProps } from '../patterns/PageMetaData'
 import { Box } from '../elements/LayoutPrimitives'
-import {
-  ReactNode,
-  MutableRefObject,
-  useEffect,
-  useState,
-} from 'react'
+import { ReactNode, MutableRefObject, useEffect, useState } from 'react'
 import { PrimaryHeader } from './../patterns/PrimaryHeader'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import { navigationCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
@@ -59,16 +54,21 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
   return (
     <>
       {props.pageMetaDataProps ? (
-        <PageMetaData {...props.pageMetaDataProps} />
+        <PageMetaData
+          ogImage="/static/images/og-homepage.png"
+          {...props.pageMetaDataProps}
+        />
       ) : null}
-      <Box css={{
-        width: '100vw',
-        height: '100vh',
-        bg: 'transparent',
-        '@smDown': {
-          bg: '$grayBase',
-        }
-      }}>
+      <Box
+        css={{
+          width: '100vw',
+          height: '100vh',
+          bg: 'transparent',
+          '@smDown': {
+            bg: '$grayBase',
+          },
+        }}
+      >
         <PrimaryHeader
           user={viewerData?.me}
           hideHeader={props.hideHeader}
@@ -88,11 +88,11 @@ export function PrimaryLayout(props: PrimaryLayoutProps): JSX.Element {
           }}
         >
           <Box
-          css={{
-            height: '48px',
-            bg: '$grayBase',
-          }}
-        ></Box>
+            css={{
+              height: '48px',
+              bg: '$grayBase',
+            }}
+          ></Box>
           {props.children}
           {showLogoutConfirmation ? (
             <ConfirmationModal