fix: add custom meta descriptions

Author: kemuru

src/pages/light-item-details/index.js

@@ -22,6 +22,8 @@ import { LIGHT_ITEM_DETAILS_QUERY } from 'utils/graphql'
 import { useQuery } from '@apollo/client'
 import SearchBar from 'components/light-search-bar'
 import { parseIpfs } from 'utils/ipfs-parse'
+import { itemToStatusCode, STATUS_CODE } from 'utils/item-status'
+import { truncateAtWord } from 'utils/truncate-at-word'
 import { fetchMetaEvidence } from 'hooks/tcr-view'
 
 export const ITEM_TOUR_DISMISSED = 'ITEM_TOUR_DISMISSED'
@@ -78,7 +80,9 @@ const ItemDetails = ({ itemID, search }) => {
   const [ipfsItemData, setIpfsItemData] = useState()
   const { timestamp } = useContext(WalletContext)
   const [modalOpen, setModalOpen] = useState()
-  const { tcrError, metaEvidence } = useContext(LightTCRViewContext)
+  const { tcrError, metaEvidence, challengePeriodDuration } = useContext(
+    LightTCRViewContext
+  )
   const [appealCost, setAppealCost] = useState()
 
   // subgraph item entities have id "<itemID>@<listaddress>"
@@ -114,7 +118,7 @@ const ItemDetails = ({ itemID, search }) => {
       return ordered
     }
 
-    const result = {
+    return {
       ...item, // Spread to convert from array to object.
       errors: [],
       columns: metaEvidence.metadata.columns,
@@ -123,11 +127,62 @@ const ItemDetails = ({ itemID, search }) => {
         ipfsItemData.values
       )
     }
-    return result
   }, [item, metaEvidence, ipfsItemData])
 
   const { metadata } = metaEvidence || {}
   const { decodedData } = decodedItem || {}
+  const { tcrTitle, itemName } = metadata || {}
+
+  const statusCode = useMemo(() => {
+    if (!item || !timestamp || !challengePeriodDuration) return null
+    return itemToStatusCode(item, timestamp, challengePeriodDuration)
+  }, [item, timestamp, challengePeriodDuration])
+
+  const getStatusPhrase = statusCode => {
+    switch (statusCode) {
+      case STATUS_CODE.REGISTERED:
+        return 'is verified to be safe'
+      case STATUS_CODE.SUBMITTED:
+        return 'is pending verification'
+      case STATUS_CODE.REMOVAL_REQUESTED:
+        return 'has removal requested'
+      case STATUS_CODE.CHALLENGED:
+        return 'is under challenge'
+      case STATUS_CODE.CROWDFUNDING:
+        return 'is crowdfunding appeal'
+      case STATUS_CODE.CROWDFUNDING_WINNER:
+        return 'won crowdfunding appeal'
+      case STATUS_CODE.PENDING_SUBMISSION:
+        return 'awaits submission'
+      case STATUS_CODE.PENDING_REMOVAL:
+        return 'awaits removal'
+      case STATUS_CODE.WAITING_ARBITRATOR:
+        return 'awaits arbitrator ruling'
+      case STATUS_CODE.ABSENT:
+        return 'is not listed'
+      default:
+        return 'has unknown status'
+    }
+  }
+
+  const capitalizeFirst = s => s?.charAt(0).toUpperCase() + s?.slice(1)
+
+  const fullSeoTitle =
+    decodedItem && metadata
+      ? `${capitalizeFirst(itemName)} - ${tcrTitle} - Kleros · Curate`
+      : 'Kleros · Curate'
+  const truncatedSeoTitle = truncateAtWord(fullSeoTitle, 160)
+
+  const fullSeoMetaDescription =
+    decodedItem && metadata && statusCode !== null
+      ? `${decodedData.join(' ')} - ${getStatusPhrase(statusCode)} on ${
+          metadata.tcrTitle
+        } in Kleros Curate`
+      : 'View item details on Kleros Curate.'
+  const truncatedSeoMetaDescription = truncateAtWord(
+    fullSeoMetaDescription,
+    160
+  )
 
   // If this is a TCR in a TCR of TCRs, we fetch its metadata as well
   // to build a better item details card.
@@ -197,17 +252,11 @@ const ItemDetails = ({ itemID, search }) => {
       />
     )
 
-  const { tcrTitle, itemName } = metadata || {}
-  const capitalizeFirst = s => s.charAt(0).toUpperCase() + s.slice(1)
-  const title =
-    decodedItem && metadata
-      ? `${capitalizeFirst(itemName)} - ${tcrTitle} - Kleros · Curate`
-      : 'Kleros · Curate'
-
   return (
     <>
       <Helmet>
-        <title>{title}</title>
+        <title>{truncatedSeoTitle}</title>
+        <meta name="description" content={truncatedSeoMetaDescription} />
       </Helmet>
       <StyledBanner>
         <Breadcrumb separator=">">

src/pages/light-items/banner.js

@@ -10,6 +10,7 @@ import { useWeb3Context } from 'web3-react'
 import ContractExplorerUrl from 'components/contract-explorer-url'
 import { defaultTcrAddresses } from 'config/tcr-addresses'
 import { parseIpfs } from 'utils/ipfs-parse'
+import { truncateAtWord } from 'utils/truncate-at-word'
 
 export const StyledBanner = styled.div`
   display: flex;
@@ -121,12 +122,24 @@ const Banner = ({
       : `${tcrDescription}.`
     : ''
 
+  const fullSeoTitle = tcrTitle
+    ? `${tcrTitle} - Kleros · Curate`
+    : 'Kleros · Curate'
+  const truncatedSeoTitle = truncateAtWord(fullSeoTitle, 60)
+
+  const fullSeoMetaDescription = metadata
+    ? `Explore the ${tcrTitle} list on Kleros Curate: ${normalizedDescription}`
+    : 'Explore curated lists on Kleros Curate.'
+  const truncatedSeoMetaDescription = truncateAtWord(
+    fullSeoMetaDescription,
+    160
+  )
+
   return (
     <>
       <Helmet>
-        <title>
-          {tcrTitle ? `${tcrTitle} - Kleros · Curate` : 'Kleros · Curate'}
-        </title>
+        <title> {truncatedSeoTitle} </title>
+        <meta name="description" content={truncatedSeoMetaDescription} />
       </Helmet>
       <StyledBanner>
         <TCRInfoColumn id="tcr-info-column">

src/utils/truncate-at-word.js

@@ -0,0 +1,8 @@
+export const truncateAtWord = (text, maxLength) => {
+  if (text.length <= maxLength) return text
+  const truncated = text.substring(0, maxLength)
+  const lastSpace = truncated.lastIndexOf(' ')
+  return lastSpace > 0
+    ? `${truncated.substring(0, lastSpace)}...`
+    : `${truncated}...`
+}