fix: set max title length for og title

src/components/SEO/SEO.tsx

@@ -13,6 +13,7 @@ type Metadata = {
   tags?: string[]
   pagePath?: string
   date?: string | null
+  contentType?: LPE.PostType
 }
 
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://press.logos.co'
@@ -29,13 +30,14 @@ export default function SEO({
   tags = ['Logos Press Engine', 'Logos Press', 'Logos'],
   pagePath = '',
   date,
+  contentType,
 }: Metadata) {
   const ogSearchParams = new URLSearchParams()
 
   title && ogSearchParams.set('title', title)
   image?.url && ogSearchParams.set('image', image?.url || '')
   image?.alt && ogSearchParams.set('alt', image?.alt || '')
-  type && ogSearchParams.set('type', type || 'article')
+  contentType && ogSearchParams.set('contentType', contentType)
   date && ogSearchParams.set('date', date || '')
 
   const ogUrl = `${imageUrl}?${ogSearchParams.toString()}`

src/components/ShareButton/ShareButton.tsx

@@ -9,10 +9,9 @@ import { useClickAway } from 'react-use'
 
 type Props = {
   url: string
-  title?: string
 }
 
-export default function ShareButton({ url, title }: Props) {
+export default function ShareButton({ url }: Props) {
   const [showOptions, setShowOptions] = useState(false)
   const [copied, setCopied] = useState(false)
   const ref = useRef(null)

src/pages/api/og.tsx

@@ -1,3 +1,4 @@
+import { LPE } from '@/types/lpe.types'
 import { ImageResponse } from '@vercel/og'
 import { handleMethodNotAllowedResponse } from 'next/dist/server/future/route-modules/helpers/response-handlers'
 import { NextRequest } from 'next/server'
@@ -14,7 +15,7 @@ export default async function handler(request: NextRequest) {
   const title = searchParams.get('title')
   const image = searchParams.get('image') || ''
   const alt = searchParams.get('alt') || ''
-  const type = searchParams.get('type') || 'article'
+  const contentType = searchParams.get('contentType')
   const date = searchParams.get('date')
 
   const imgSrc = image
@@ -25,8 +26,20 @@ export default async function handler(request: NextRequest) {
     date && new Date(date).toLocaleString('default', { month: 'short' })
   const year = date && new Date(date).getUTCFullYear()
 
+  const titleMaxLength = 66
+
   return new ImageResponse(
-    type === 'article' ? (
+    contentType === LPE.PostTypes.Podcast ? (
+      <img
+        src={imgSrc}
+        alt={alt}
+        style={{
+          objectFit: 'cover',
+          width: '1200px',
+          height: '630px',
+        }}
+      />
+    ) : (
       <div
         style={{
           display: 'flex',
@@ -82,9 +95,11 @@ export default async function handler(request: NextRequest) {
                 whiteSpace: 'pre-wrap',
               }}
             >
-              {title}
+              {title && title.length < titleMaxLength
+                ? title
+                : title?.substring(0, titleMaxLength) + '...'}
             </div>
-            {type && (
+            {contentType && (
               <div
                 style={{
                   display: 'flex',
@@ -93,7 +108,7 @@ export default async function handler(request: NextRequest) {
                   textTransform: 'capitalize',
                 }}
               >
-                <p>{type}</p>
+                <p>{contentType}</p>
                 {date && <p>•</p>}
                 {date && <p>{`${day} ${month} ${year}`}</p>}
               </div>
@@ -115,17 +130,6 @@ export default async function handler(request: NextRequest) {
           </div>
         )}
       </div>
-    ) : (
-      <img
-        src={imgSrc}
-        alt={alt}
-        style={{
-          filter: 'grayscale(100%)',
-          objectFit: 'cover',
-          width: '1200px',
-          height: '630px',
-        }}
-      />
     ),
     {
       width: 1200,

src/pages/article/[slug].tsx

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

src/pages/podcasts/[showSlug]/[epSlug].tsx

@@ -32,7 +32,7 @@ const EpisodePage = ({ episode, relatedEpisodes, errors }: EpisodeProps) => {
           ...episode.tags,
           ...episode.authors.map((author) => author.name),
         ]}
-        type="episode"
+        contentType={LPE.PostTypes.Podcast}
       />
       <EpisodeContainer episode={episode} relatedEpisodes={relatedEpisodes} />
     </>