Merge pull request #222 from acid-info/pr-card

update the design for social preview card

src/components/SEO/SEO.tsx

@@ -18,6 +18,7 @@ type Metadata = {
   date?: string | null
   contentType?: LPE.PostType
   noIndex?: boolean
+  authors?: string[]
 }
 
 const SITE_URL = getWebsiteUrl()
@@ -36,6 +37,7 @@ export default function SEO({
   date,
   contentType,
   noIndex = false,
+  authors,
 }: Metadata) {
   const title =
     _title && _title.length
@@ -51,6 +53,7 @@ export default function SEO({
       contentType,
       date,
       pagePath,
+      authors,
     })
 
   return (

src/pages/api/og.tsx

@@ -31,6 +31,7 @@ export default async function handler(request: NextRequest) {
   const alt = searchParams.get('alt') || ''
   const pagePath = searchParams.get('pagePath') || 'press.logos.co'
   const date = searchParams.get('date')
+  const authors = searchParams.get('authors')
 
   const imgSrc = image
   const hasImage = !!imgSrc?.length
@@ -44,7 +45,7 @@ export default async function handler(request: NextRequest) {
 
   const isArticle = contentType === 'article'
   const titleFontSize = isArticle && hasImage ? '54px' : '64px'
-  const subtitleFontSize = isArticle && hasImage ? '32px' : '36px'
+  const subtitleFontSize = isArticle && hasImage ? '26px' : '32px'
   const subtitleGap = isArticle && hasImage ? '16px' : '24px'
   const subtitleMargin = isArticle && hasImage ? '24px' : '40px'
 
@@ -139,13 +140,13 @@ export default async function handler(request: NextRequest) {
                 style={{
                   display: 'flex',
                   fontFamily: 'Lora',
-                  fontSize: '40px',
+                  fontSize: '26px',
                   whiteSpace: 'pre-wrap',
                   textTransform: 'uppercase',
-                  paddingLeft: '13px',
+                  paddingLeft: '3px',
                 }}
               >
-                <span>{siteConfigs.title.replace('Logos ', '')}</span>
+                <span>{siteConfigs.title}</span>
               </div>
             )}
           </div>
@@ -181,8 +182,10 @@ export default async function handler(request: NextRequest) {
               }}
             >
               <span>
-                {contentType ??
-                  pagePath.replace(/^\/+/, '').replace(/\/+/, ' | ')}
+                {contentType === 'article' && authors
+                  ? `By ${authors}`
+                  : contentType ??
+                    pagePath.replace(/^\/+/, '').replace(/\/+/, ' | ')}
               </span>
               {date && <span>∙</span>}
               {date && <span>{`${day} ${month} ${year}`}</span>}

src/pages/article/[...path].tsx

@@ -28,6 +28,7 @@ const ArticlePage = ({ data, errors, why }: ArticleProps) => {
           ...data.data.authors.map((author) => author.name),
         ]}
         contentType={LPE.PostTypes.Article}
+        authors={data.data.authors.map((author) => author.name)}
       />
       <ArticleContainer data={data} />
     </>

src/utils/og.utils.ts

@@ -7,12 +7,14 @@ export const getOpenGraphImageUrl = ({
   contentType,
   date,
   pagePath,
+  authors,
 }: {
   title?: string | null
   imageUrl?: string | null
   contentType?: LPE.PostType | null
   date?: string | null
   pagePath?: string | null
+  authors?: string[] | null
 }) => {
   const url = new URL('/api/og', getWebsiteUrl())
   const searchParams = new URLSearchParams()
@@ -22,6 +24,7 @@ export const getOpenGraphImageUrl = ({
   contentType && searchParams.set('contentType', contentType)
   date && searchParams.set('date', date || '')
   pagePath && searchParams.set('pagePath', pagePath || '')
+  authors && searchParams.set('authors', authors.join(', ') || '')
 
   url.searchParams.set('q', encodeURIComponent(searchParams.toString()))