feat: update question page titles

packages/cypress/src/integration/questions/read.spec.ts

@@ -1,6 +1,6 @@
 import { MOCK_DATA } from '../../data'
 
-const questions = Object.values(MOCK_DATA.questions)
+const question = Object.values(MOCK_DATA.questions)[0]
 
 describe('[Questions]', () => {
   // describe('[List questions]', () => {
@@ -23,19 +23,66 @@ describe('[Questions]', () => {
 
   describe('[Individual questions]', () => {
     it('[By Everyone]', () => {
-      const question = questions[0]
+      const {
+        _id,
+        description,
+        images,
+        slug,
+        subscribers,
+        title,
+        votedUsefulBy,
+        questionCategory,
+      } = question
+
       const questionDiscussion = Object.values(MOCK_DATA.discussions).find(
-        (discussion) => discussion.sourceId === question._id,
+        (discussion) => discussion.sourceId === _id,
       )
 
+      const pageTitle = `${title} - Question - Community Platform`
+      const image = images[0].downloadUrl
+
       cy.step('Can visit question')
-      cy.visit(`/questions/${question.slug}`)
+      cy.visit(`/questions/${slug}`)
 
       cy.step('All metadata visible')
       cy.contains(`${question.subscribers.length} following`)
       cy.contains(`${question.votedUsefulBy.length} useful`)
       cy.contains(`${questionDiscussion.comments.length} comments`)
 
+      cy.step('[Populates title, SEO and social tags]')
+      cy.title().should('eq', pageTitle)
+      cy.get('meta[name="description"]').should(
+        'have.attr',
+        'content',
+        description,
+      )
+
+      // OpenGraph (facebook)
+      cy.get('meta[property="og:title"]').should(
+        'have.attr',
+        'content',
+        pageTitle,
+      )
+      cy.get('meta[property="og:description"]').should(
+        'have.attr',
+        'content',
+        description,
+      )
+      cy.get('meta[property="og:image"]').should('have.attr', 'content', image)
+
+      // Twitter
+      cy.get('meta[name="twitter:title"]').should(
+        'have.attr',
+        'content',
+        pageTitle,
+      )
+      cy.get('meta[name="twitter:description"]').should(
+        'have.attr',
+        'content',
+        description,
+      )
+      cy.get('meta[name="twitter:image"]').should('have.attr', 'content', image)
+
       cy.step('Links in description are clickable')
       cy.contains('a', 'https://www.onearmy.earth/')
 
@@ -49,26 +96,24 @@ describe('[Questions]', () => {
 
       cy.get('[data-cy=breadcrumbsItem]')
         .eq(1)
-        .should('contain', question.questionCategory.label)
+        .should('contain', questionCategory.label)
       cy.get('[data-cy=breadcrumbsItem]')
         .eq(1)
         .children()
         .should('have.attr', 'href')
-        .and('equal', `/questions?category=${question.questionCategory._id}`)
+        .and('equal', `/questions?category=${questionCategory._id}`)
 
-      cy.get('[data-cy=breadcrumbsItem]')
-        .eq(2)
-        .should('contain', question.title)
+      cy.get('[data-cy=breadcrumbsItem]').eq(2).should('contain', title)
 
       cy.step('Logged in users can complete actions')
       cy.login('howto_creator@test.com', 'test1234')
-      cy.visit(`/questions/${question.slug}`) // Page doesn't reload after login
+      cy.visit(`/questions/${slug}`) // Page doesn't reload after login
 
       cy.get('[data-cy=follow-button]').click()
-      cy.contains(`${question.subscribers.length + 1} following`)
+      cy.contains(`${subscribers.length + 1} following`)
 
       cy.get('[data-cy=vote-useful]').click()
-      cy.contains(`${question.votedUsefulBy.length + 1} useful`)
+      cy.contains(`${votedUsefulBy.length + 1} useful`)
     })
   })
 })

shared/mocks/data/questions.ts

@@ -9,6 +9,20 @@ export const questions = {
     creatorCountry: '',
     description: 'test info with a link to https://www.onearmy.earth/',
     keywords: ['test', 'question', 'info'],
+    images: [
+      {
+        name: 'howto-bope brick-1.jpg',
+        fullPath:
+          'uploads/v2_howtos/me5Bq0wq5FdoJUY8gELN/howto-bope brick-1.jpg',
+        type: 'image/jpeg',
+        updated: '2019-09-27T14:58:36.794Z',
+        size: 68108,
+        downloadUrl:
+          'https://firebasestorage.googleapis.com/v0/b/onearmyworld.appspot.com/o/uploads%2Fv2_howtos%2Fme5Bq0wq5FdoJUY8gELN%2Fhowto-bope%20brick-1.jpg?alt=media&token=22dc0615-0351-430b-951c-6b2b29cd21c6',
+        contentType: 'image/jpeg',
+        timeCreated: '2019-09-27T14:58:36.794Z',
+      },
+    ],
     latestCommentDate: '2023-02-15T02:45:15.500Z',
     moderation: 'accepted',
     questionCategory: {
@@ -42,6 +56,7 @@ export const questions = {
     commentCount: 3,
     creatorCountry: '',
     description: 'This is a test mock for the filtering question.',
+    images: [],
     keywords: ['filtering', 'info'],
     latestCommentDate: '20 March 2024 at 10:10:10 UTC',
     moderation: 'accepted',
@@ -71,6 +86,7 @@ export const questions = {
     commentCount: 0,
     creatorCountry: '',
     description: "What's the deal with sreenings?",
+    images: [],
     keywords: ['screening', 'question', 'intro'],
     latestCommentDate: '20 March 2024 at 10:10:10 UTC',
     moderation: 'accepted',

src/models/question.models.tsx

@@ -33,6 +33,6 @@ export namespace IQuestion {
     previousSlugs?: string[]
     creatorCountry?: string
     allowDraftSave?: boolean
-    images?: Array<IUploadedFileMeta | IConvertedFileMeta | null>
+    images?: (IUploadedFileMeta | IConvertedFileMeta | null)[]
   }
 }

src/pages/Question/QuestionPage.tsx

@@ -16,12 +16,14 @@ import { useQuestionStore } from 'src/stores/Question/question.store'
 import { formatImagesForGallery } from 'src/utils/formatImageListForGallery'
 import { buildStatisticsLabel } from 'src/utils/helpers'
 import { incrementViewCount } from 'src/utils/incrementViewCount'
+import { seoTagsUpdate } from 'src/utils/seo'
 import { Box, Button, Card, Divider, Flex, Heading, Text } from 'theme-ui'
 
 import { ContentAuthorTimestamp } from '../common/ContentAuthorTimestamp/ContentAuthorTimestamp'
 import { QuestionDiscussion } from './QuestionDiscussion'
 
 import type { IQuestion } from 'src/models'
+import type { IUploadedFileMeta } from 'src/stores/storage'
 
 export const QuestionPage = () => {
   const [isLoading, setIsLoading] = useState(true)
@@ -59,6 +61,17 @@ export const QuestionPage = () => {
       setQuestion(foundQuestion)
       setTotalCommentsCount(foundQuestion.commentCount || totalCommentsCount)
       setIsLoading(false)
+
+      const imageUrl =
+        (foundQuestion.images &&
+          (foundQuestion.images[0] as IUploadedFileMeta).downloadUrl) ||
+        undefined
+
+      seoTagsUpdate({
+        title: `${foundQuestion.title} - Question`,
+        description: foundQuestion.description,
+        imageUrl,
+      })
     }
 
     fetchQuestion()