Update Labs blogs social cards to use featuredImage (#744)

* update labs blog social card props

* fix path for images

* Add README blog social card image documentation

* Change 'post list' -> 'post gallery'

* Fix README typo

---------

Co-authored-by: Brian Skinn <[email protected]>

Author: Surafel-Getachew

README.md

@@ -37,7 +37,7 @@ Here is some basic info to help orient you to this repo.
   - `./libs` holds code shared by both websites.
 - The websites' **content** lives in [Storyblok](https://app.storyblok.com)
   (requires login).
-  - But Labs and Consulting **blog posts** live under `./apps/labs/posts` and 
+  - But Labs and Consulting **blog posts** live under `./apps/labs/posts` and
     `./apps/consulting/posts`, respectively.
 - The websites are hosted and deployed via
   [Vercel](https://vercel.com/quansight) (requires login).
@@ -354,12 +354,12 @@ Throughout the develop-deploy process, there are several ways to view the
 website. The following table summarizes the important ways in which those views
 differ from each other.
 
-| Name                       | How to access          | GitHub branch  | Vercel env | Storyblok API key | Next.js preview? | Storyblok version param | Display top overlay? | Top overlay color | Button to enter/exit preview? |
-| -------------------------- | ---------------------- | -------------- | ---------- | ----------------- | ---------------- | ----------------------- | ------------------- | ---------------- | ----------------------------- |
-| Production                 | .com/.org URL          | `main`         | production | public            | off              | `published`             | No                  | n/a              | n/a                           |
-| Storyblok (yellow overlay)  | via Storyblok UI       | `develop`      | preview    | preview           | on               | `draft`                 | Yes                 | yellow           | No                            |
-| Vercel URL (gray overlay)   | via link to Vercel URL | any non-`main` | preview    | preview           | off              | `published`             | Yes                 | gray             | Yes                           |
-| Vercel URL (yellow overlay) | via enter-preview      | any non-`main` | preview    | preview           | on               | `draft`                 | Yes                 | yellow           | Yes                           |
+| Name                        | How to access          | GitHub branch  | Vercel env | Storyblok API key | Next.js preview? | Storyblok version param | Display top overlay? | Top overlay color | Button to enter/exit preview? |
+| --------------------------- | ---------------------- | -------------- | ---------- | ----------------- | ---------------- | ----------------------- | -------------------- | ----------------- | ----------------------------- |
+| Production                  | .com/.org URL          | `main`         | production | public            | off              | `published`             | No                   | n/a               | n/a                           |
+| Storyblok (yellow overlay)  | via Storyblok UI       | `develop`      | preview    | preview           | on               | `draft`                 | Yes                  | yellow            | No                            |
+| Vercel URL (gray overlay)   | via link to Vercel URL | any non-`main` | preview    | preview           | off              | `published`             | Yes                  | gray              | Yes                           |
+| Vercel URL (yellow overlay) | via enter-preview      | any non-`main` | preview    | preview           | on               | `draft`                 | Yes                  | yellow            | Yes                           |
 
 Let's take the row labeled "Vercel URL (gray overlay)." This view is accessed by
 clicking on a Vercel SHA-style URL, which looks like
@@ -547,12 +547,14 @@ signs. The meta section contains post-related information like:
   categories should be the same as in the previously mentioned
   [`categories.json`](./apps/labs/posts/categories.json) file.
   **Important note:** categories are case-sensitive.
-- `featuredImage` (required) - Object with two required properties: `src` and `alt`. The `src` property
-  is a path to the featured image which is displayed on the posts list on the`/blog`
-  page. The `alt` property is alternative text for the image. The image should
-  be added to the `apps/labs/public/posts/<post-name>` directory, for example,
-  `apps/labs/public/posts/hello-world-post`. There is no need to provide a full image path,
-  so the path name should start with `/posts/`.
+- `featuredImage` (required) - Object with two required properties: `src` and `alt`.
+  - The `src` property
+    is a path to the featured image which is displayed both (a) in the posts gallery on the`/blog`
+    page and (b) in rich social media preview cards (on Twitter, Slack, LinkedIn, etc.). The image should
+    be added to the `apps/labs/public/posts/<post-name>` directory, for example,
+    `apps/labs/public/posts/hello-world-post`. There is no need to provide a full image path,
+    so the path name should start with `/posts/`. This image should have a 2:1 aspect ratio and a minimum height of 627 pixels.
+  - The `alt` property is alternative text for the image.
 - `hero` (required) - the object for the Hero section of the post. This can have two different structures:
   - The first structure is an object with `imageSrc` and `imageAlt`. The `imageSrc` property is a path to
     the hero image, which is displayed on the blog post page between the nav bar and the

apps/labs/pages/blog/[slug].tsx

@@ -66,6 +66,10 @@ export const BlogPost: FC<TBlogPostProps> = ({
         title={post.meta.title}
         description={post.meta.description}
         variant={DomainVariant.Labs}
+        twitterLargeImage={true}
+        twitterImage={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}${post.meta.featuredImage.src}`}
+        ogImage={`https://${process.env.NEXT_PUBLIC_VERCEL_URL}${post.meta.featuredImage.src}`}
+        alt={post.meta.featuredImage.alt}
       />
       {post.meta.hero && (
         <Hero