enhancement(SpeakerPage): Links & SEO

CaptainFact · Sep 2, 2023 · acaaa92 · acaaa92
1 parent 3c90fb1
commit acaaa92
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/app/components/Speakers/SpeakerPage.jsx b/app/components/Speakers/SpeakerPage.jsx
@@ -5,6 +5,7 @@ import { withNamespaces } from 'react-i18next'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 
+import { FRONTEND_URL } from '../../config'
 import { LOCAL_STORAGE_KEYS } from '../../lib/local_storage'
 import { fetchSpeaker, fetchWikiDataInfo } from '../../state/speakers/effects'
 import { reset } from '../../state/speakers/reducer'
@@ -72,6 +73,24 @@ export class SpeakerPage extends React.PureComponent {
     this.props.reset()
   }
 
+  getCanonicalUrl() {
+    // Get slug or ID
+    let slugOrId = this.props.match.params.slug_or_id
+    if (this.props.speaker) {
+      slugOrId = this.props.speaker.slug || this.props.speaker.id
+    }
+
+    // Add pagination
+    const searchParams = new URLSearchParams(location.search)
+    const currentPage = parseInt(searchParams.get('page')) || 1
+    const url = new URL(`${FRONTEND_URL}/s/${slugOrId}`)
+    if (currentPage > 1) {
+      url.searchParams.set('page', currentPage)
+    }
+
+    return url.href
+  }
+
   render() {
     const { t } = this.props
     if (this.props.error) {
@@ -86,6 +105,7 @@ export class SpeakerPage extends React.PureComponent {
           <meta property="og:title" content={title} />
           <meta property="og:description" content={speaker.title} />
           <meta name="twitter:card" content="summary" />
+          <link rel="canonical" href={this.getCanonicalUrl()} />
         </Helmet>
         <div className="hero is-light is-bold is-primary">
           <div className="hero-body">

diff --git a/app/components/Videos/PaginatedVideosContainer.jsx b/app/components/Videos/PaginatedVideosContainer.jsx
@@ -69,7 +69,11 @@ const PaginatedVideosContainer = ({
             onPageChange={() => window.scrollTo({ top: 0 })}
             LinkBuilder={({ 'data-page': page, ...props }) => {
               const urlParams = page > 1 ? `?page=${page}` : ''
-              return <Link to={`${baseURL}${urlParams}`} className="button" {...props} />
+              if (props.disabled) {
+                return <span className="button" {...props} />
+              } else {
+                return <Link to={`${baseURL}${urlParams}`} className="button" {...props} />
+              }
             }}
           />
         )