[FEAT] Add social card tags (#733)

Surafel-Getachew · bskinn · gabalafou · web-flow · commit 64e4d56806e0 · 2023-06-16T14:05:21.000-04:00
This PR implements default (non-customizable) social cards for
all pages for both sites. The cards are the respective organization
logo on a white field.

---

* add social card tags

* update twitter img to 1:1 aspect ration

* fix img for open-graph

* fix syntax error

* get URL from window

* refactor to SocialCard component and add it to every page

* fix TSocialCardProps type and typo

* cleanup SocialCards, add summary_large type

* canonical url link

* Canonical URL fix

* add https:// to VERCEL_URL

* Add doc to the type for SocialCard compoent and cleanup

* remove highlighted links

* more comments on SocialCard and comment cleanup

* clean up on comments

* Update libs/shared/ui-components/src/SocialCard/types.ts

* Update libs/shared/ui-components/src/SocialCard/types.ts

* Update libs/shared/ui-components/src/SocialCard/types.ts

* Update libs/shared/ui-components/src/SocialCard/types.ts

* Update libs/shared/ui-components/src/SocialCard/types.ts

* Update libs/shared/ui-components/src/SocialCard/types.ts

* update to type union for social-card component

* rename types

* Fix typo

Co-authored-by: gabalafou &lt;gabriel@fouasnon.com&gt;

* update TSocialCardPropsBase

* revert SocialCardPropsBase

---------

Co-authored-by: Brian Skinn &lt;brian.skinn@gmail.com&gt;
Co-authored-by: gabalafou &lt;gabriel@fouasnon.com&gt;
diff --git a/apps/consulting/pages/[slug]/index.tsx b/apps/consulting/pages/[slug]/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticPaths, GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType, getPaths } from '@quansight/shared/utils';
 
 import { LinkEntry } from '../../api/types/basic';
@@ -32,6 +38,11 @@ const Container: FC<TContainerProps> = ({ data, header, footer, preview }) => (
       description={data.content.description}
       variant={DomainVariant.Quansight}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Quansight}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/consulting/pages/about-us/index.tsx b/apps/consulting/pages/about-us/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import { PageComponent, PageItem } from '../../api/types/basic';
@@ -37,6 +43,11 @@ export const About: FC<TContainerProps> = ({
       description={data.content.description}
       variant={DomainVariant.Quansight}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Quansight}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/consulting/pages/index.tsx b/apps/consulting/pages/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import { getFooter } from '../api/utils/getFooter';
@@ -35,6 +41,11 @@ export const Index: FC<TContainerProps> = ({
       description={data.content.description}
       variant={DomainVariant.Quansight}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Quansight}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/consulting/pages/library/index.tsx b/apps/consulting/pages/library/index.tsx
@@ -4,7 +4,13 @@ import { GetStaticProps } from 'next';
 import { useRouter } from 'next/router';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import { PAGINATION_OFFSETT } from '../..//utils/paginateLibraryTiles/constants';
@@ -126,6 +132,11 @@ export const Library: FC<TLibraryProps> = ({
         description={data.content.description}
         variant={DomainVariant.Quansight}
       />
+      <SocialCard
+        title={data.content.title}
+        description={data.content.description}
+        variant={DomainVariant.Quansight}
+      />
 
       {isPageType(data?.content?.component) && (
         <Page data={data} preview={preview}>
diff --git a/apps/consulting/pages/nebari-services.tsx b/apps/consulting/pages/nebari-services.tsx
@@ -11,7 +11,13 @@ import 'swiper/css/navigation';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
 import { FormSessionStorageKeys } from '@quansight/shared/ui-components';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 
 import { PageItem } from '../api/types/basic';
 import { getFooter } from '../api/utils/getFooter';
@@ -59,6 +65,11 @@ export const NebariServicesPage: FC<TContainerProps> = ({
       description="Nebari is designed to be deployed and managed without DevOps expertise. However, if you need support, we offer flexible service options. Learn about Nebari."
       variant={DomainVariant.Quansight}
     />
+    <SocialCard
+      title="Nebari Services"
+      description="Nebari is designed to be deployed and managed without DevOps expertise. However, if you need support, we offer flexible service options. Learn about Nebari."
+      variant={DomainVariant.Quansight}
+    />
 
     <div className="overflow-hidden w-full h-[100px] bg-black"></div>
 
diff --git a/apps/consulting/pages/post/[slug].tsx b/apps/consulting/pages/post/[slug].tsx
@@ -11,6 +11,7 @@ import {
   Header,
   Hero,
   HeroVariant,
+  SocialCard,
 } from '@quansight/shared/ui-components';
 
 import { getFooter } from '../../api/utils/getFooter';
@@ -47,6 +48,11 @@ const Article: FC<TLibraryArticleProps> = ({
         description={post.meta.description}
         variant={DomainVariant.Quansight}
       />
+      <SocialCard
+        title={post.meta.title}
+        description={post.meta.description}
+        variant={DomainVariant.Quansight}
+      />
 
       {post.meta.hero && (
         <Hero
diff --git a/apps/labs/pages/[slug]/index.tsx b/apps/labs/pages/[slug]/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticPaths, GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType, getPaths } from '@quansight/shared/utils';
 
 import { getFooter, LinkEntry, getHeader } from '../../api';
@@ -30,6 +36,11 @@ const Container: FC<TContainerProps> = ({ data, header, footer, preview }) => (
       description={data.content.description}
       variant={DomainVariant.Labs}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Labs}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/labs/pages/blog/[slug].tsx b/apps/labs/pages/blog/[slug].tsx
@@ -12,6 +12,7 @@ import {
   HeroVariant,
   Layout,
   SEO,
+  SocialCard,
 } from '@quansight/shared/ui-components';
 
 import { FooterItem, HeaderItem } from '../../api/types/basic';
@@ -61,6 +62,11 @@ export const BlogPost: FC<TBlogPostProps> = ({
         description={post.meta.description}
         variant={DomainVariant.Labs}
       />
+      <SocialCard
+        title={post.meta.title}
+        description={post.meta.description}
+        variant={DomainVariant.Labs}
+      />
       {post.meta.hero && (
         <Hero
           {...post.meta.hero}
diff --git a/apps/labs/pages/blog/index.tsx b/apps/labs/pages/blog/index.tsx
@@ -6,7 +6,13 @@ import { useRouter } from 'next/router';
 import ReactPaginate, { ReactPaginateProps } from 'react-paginate';
 
 import { DomainVariant } from '@quansight/shared/types';
-import { Footer, Header, Layout, SEO } from '@quansight/shared/ui-components';
+import {
+  Footer,
+  Header,
+  Layout,
+  SEO,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import {
@@ -140,6 +146,11 @@ const BlogListPage: FC<BlogListPageProps> = ({
         description={data.content.description}
         variant={DomainVariant.Labs}
       />
+      <SocialCard
+        title={data.content.title}
+        description={data.content.description}
+        variant={DomainVariant.Labs}
+      />
       {isPageType(data?.content?.component) && (
         <Page data={data} preview={preview}>
           {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/labs/pages/index.tsx b/apps/labs/pages/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import { getFooter } from '../api';
@@ -35,6 +41,11 @@ export const Index: FC<TContainerProps> = ({
       description={data.content.description}
       variant={DomainVariant.Labs}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Labs}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/apps/labs/pages/team/index.tsx b/apps/labs/pages/team/index.tsx
@@ -3,7 +3,13 @@ import React, { FC } from 'react';
 import { GetStaticProps } from 'next';
 
 import { ISlugParams, DomainVariant } from '@quansight/shared/types';
-import { Layout, SEO, Footer, Header } from '@quansight/shared/ui-components';
+import {
+  Layout,
+  SEO,
+  Footer,
+  Header,
+  SocialCard,
+} from '@quansight/shared/ui-components';
 import { isPageType } from '@quansight/shared/utils';
 
 import { PageComponent, PageItem } from '../../api/types/basic';
@@ -37,6 +43,11 @@ export const Team: FC<TContainerProps> = ({
       description={data.content.description}
       variant={DomainVariant.Labs}
     />
+    <SocialCard
+      title={data.content.title}
+      description={data.content.description}
+      variant={DomainVariant.Labs}
+    />
     {isPageType(data?.content?.component) && (
       <Page data={data} preview={preview}>
         {(blok: TRawBlok) => <BlokProvider blok={blok} />}
diff --git a/libs/shared/ui-components/src/SocialCard/SocialCard.tsx b/libs/shared/ui-components/src/SocialCard/SocialCard.tsx
@@ -0,0 +1,109 @@
+import { FC } from 'react';
+
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import { DomainVariant } from '@quansight/shared/types';
+
+import { TSocialCardProps, TSocialCardPropsCustomizedImage } from './types';
+
+const TWITTER_SMALL_CARD_NAME = 'summary';
+const TWITTER_LARGE_CARD_NAME = 'summary_large_image';
+
+export const SocialCard: FC<TSocialCardProps> = (props) => {
+  const { asPath } = useRouter();
+
+  const isSocialCardImageCustomized = (
+    cardProp: TSocialCardProps,
+  ): cardProp is TSocialCardPropsCustomizedImage => {
+    return (
+      (cardProp as TSocialCardPropsCustomizedImage).twitterImage !== undefined
+    );
+  };
+
+  const isCustom = isSocialCardImageCustomized(props);
+  const getTwitterCardTypeName = (twitterLargeImage = true) =>
+    twitterLargeImage ? TWITTER_LARGE_CARD_NAME : TWITTER_SMALL_CARD_NAME;
+
+  const { title, description, variant } = props;
+
+  /*
+    url is constructed starting from https:// because 'NEXT_PUBLIC_VERCEL_URL' doesn't provide the protocol(https)
+    and for og:url requires absolute URL which includes the protocol and domain name
+    using the prefix NEXT_PUBLIC is used to indicate that the environment variable is public,
+    meaning that it can be accessed by the browser.
+    'NEXT_PUBLIC_VERCEL_URL' is set when the site is statically built, the build step inlines the current value for the environment variable into the built JS file.
+    This kind of URL is need because of og:url needs absolute path and allows it to use this as the correct canonical tag
+    Also twitter doesn't have something similar to og:url like twitter:url.
+   */
+  const url = `https://${process.env['NEXT_PUBLIC_VERCEL_URL']}${asPath}`;
+
+  const defaultTwitterImage = (variant: DomainVariant): string => {
+    switch (variant) {
+      case DomainVariant.Quansight:
+        return 'https://a.storyblok.com/f/147759/1200x630/8b20f86b2a/quansight-logo-opengraph-size.png';
+      case DomainVariant.Labs:
+        return 'https://a.storyblok.com/f/152463/900x472/b289c484e3/qslabs-logo-opengraph-size.png';
+      default:
+        return '';
+    }
+  };
+  const defaultOgImage = (variant: DomainVariant): string => {
+    switch (variant) {
+      case DomainVariant.Quansight:
+        return 'https://a.storyblok.com/f/147759/1200x630/8b20f86b2a/quansight-logo-opengraph-size.png';
+      case DomainVariant.Labs:
+        return 'https://a.storyblok.com/f/152463/900x472/b289c484e3/qslabs-logo-opengraph-size.png';
+      default:
+        return '';
+    }
+  };
+  const defaultAlt = (variant: DomainVariant): string => {
+    switch (variant) {
+      case DomainVariant.Quansight:
+        return 'Quansight logo';
+      case DomainVariant.Labs:
+        return 'Quansight Labs logo';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <Head>
+      {/* twitter */}
+      <meta
+        name="twitter:card"
+        content={
+          isCustom
+            ? getTwitterCardTypeName(props.twitterLargeImage)
+            : getTwitterCardTypeName()
+        }
+      />
+      <meta name="twitter:site" content="@quansightai" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta
+        name="twitter:image"
+        content={isCustom ? props.twitterImage : defaultTwitterImage(variant)}
+      />
+      <meta
+        name="twitter:alt"
+        content={isCustom ? props.alt : defaultAlt(variant)}
+      />
+
+      {/* open-graph / LinkedIn Specification */}
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:url" content={url} />
+      <meta
+        property="og:image"
+        content={isCustom ? props.ogImage : defaultOgImage(variant)}
+      />
+      <meta
+        property="og:image:alt"
+        content={isCustom ? props.alt : defaultAlt(variant)}
+      />
+    </Head>
+  );
+};
diff --git a/libs/shared/ui-components/src/SocialCard/types.ts b/libs/shared/ui-components/src/SocialCard/types.ts
diff --git a/libs/shared/ui-components/src/index.ts b/libs/shared/ui-components/src/index.ts
