Clean capitalize

web/components/profile-grid.tsx

@@ -2,6 +2,7 @@ import {JSONContent} from '@tiptap/core'
 import clsx from 'clsx'
 import {CompatibilityScore} from 'common/profiles/compatibility-score'
 import {Profile} from 'common/profiles/profile'
+import {capitalize} from 'lodash'
 import Link from 'next/link'
 import {Row} from 'web/components/layout/row'
 import {CompatibleBadge} from 'web/components/widgets/compatible-badge'
@@ -225,7 +226,7 @@ function ProfilePreview(props: {
               <div className="line-clamp-4">
                 {/*TODO: fix nested <a> links warning (one from Link above, one from link in bio below)*/}
                 {profile.headline && <p>{profile.headline}</p>}
-                {profile.keywords?.join(' • ')}
+                {profile.keywords?.map(capitalize)?.join(' • ')}
                 <Content className="w-full" content={bio} />
                 {seekingGenderText && <p>{seekingGenderText}.</p>}
                 {(!!profile.work?.length || profile.occupation_title) && (

web/components/profile/profile-header.tsx

@@ -2,6 +2,7 @@ import {DotsHorizontalIcon, EyeIcon, LockClosedIcon, PencilIcon} from '@heroicon
 import clsx from 'clsx'
 import {Profile} from 'common/profiles/profile'
 import {User, UserActivity} from 'common/user'
+import {capitalize} from 'lodash'
 import Link from 'next/link'
 import Router from 'next/router'
 import React, {useState} from 'react'
@@ -240,7 +241,7 @@ export default function ProfileHeader(props: {
       />
       {profile.headline && <div className="italic max-w-3xl px-4 py-3">{profile.headline}</div>}
       <Row className={'px-4 gap-2 flex-wrap py-2'}>
-        {profile.keywords?.map((tag, i) => (
+        {profile.keywords?.map(capitalize)?.map((tag, i) => (
           <span
             key={i}
             className={'bg-canvas-100'}

web/pages/api/og/profile.tsx

@@ -1,6 +1,7 @@
 import {ImageResponse} from '@vercel/og'
 import {ImageResponseOptions} from '@vercel/og/dist/types'
 import {ogProps} from 'common/profiles/og-image'
+import {capitalize} from 'lodash'
 import {NextRequest} from 'next/server'
 import {classToTw} from 'web/components/og/utils'
 
@@ -76,7 +77,7 @@ function OgProfile(props: ogProps) {
           {/*  <img src={'https://www.compassmeet.com/favicon.svg'} width={100} height={100} />*/}
           {/*</div>*/}
           <div style={{display: 'flex', gap: '10px', flexWrap: 'wrap'}}>
-            {allTags.map((tag, i) => (
+            {allTags?.map(capitalize).map((tag, i) => (
               <span
                 key={i}
                 style={{