-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1397 from nickgros/PORTALS-3195-canonical-urls
- Loading branch information
Showing
9 changed files
with
123 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
apps/synapse-portal-framework/src/components/DetailsPage/DetailsPageDocumentMetadata.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Row, RowSet } from '@sage-bionetworks/synapse-types' | ||
| import React from 'react' | ||
| import { useLocation } from 'react-router-dom' | ||
| import { getColumnIndex } from 'synapse-react-client' | ||
| import { useSetCanonicalUrl } from '../../utils/useSetCanonicalUrl' | ||
| import { useDetailsPageContext } from './DetailsPageContext' | ||
|
|
||
| type DetailsPageDocumentMetadataProps = { | ||
| /** The set of column name(s) which define the main unique key of the column (used to define the canonical URL for SEO) */ | ||
| resourcePrimaryKey?: string[] | ||
| } | ||
|
|
||
| function getCanonicalUrl( | ||
| pathname: string, | ||
| resourcePrimaryKey: string[], | ||
| rowSet: RowSet, | ||
| rowData: Row, | ||
| ) { | ||
| try { | ||
| const canonicalUrl = new URL(pathname, window.location.origin) | ||
| resourcePrimaryKey.forEach(columnName => { | ||
| const columnIndex = getColumnIndex(resourcePrimaryKey[0], rowSet?.headers) | ||
| if (columnIndex == null) { | ||
| throw new Error( | ||
| 'No column name in rowSet.headers matching: ' + columnName, | ||
| ) | ||
| } | ||
| const value = rowData.values[columnIndex] | ||
| if (value == null) { | ||
| throw new Error(`Retrieved null value for column ${columnName}`) | ||
| } | ||
| canonicalUrl.searchParams.append(columnName, value) | ||
| }) | ||
|
|
||
| return canonicalUrl.toString() | ||
| } catch (e) { | ||
| console.error('Error generating canonical URL', e) | ||
| return undefined | ||
| } | ||
| } | ||
|
|
||
| export function DetailsPageDocumentMetadata( | ||
| props: DetailsPageDocumentMetadataProps, | ||
| ) { | ||
| const { resourcePrimaryKey } = props | ||
|
|
||
| const { pathname } = useLocation() | ||
| const { | ||
| context: { rowSet, rowData }, | ||
| } = useDetailsPageContext() | ||
|
|
||
| const canonicalUrl = | ||
| resourcePrimaryKey != null && rowSet != null && rowData != null | ||
| ? getCanonicalUrl(pathname, resourcePrimaryKey, rowSet, rowData) | ||
| : undefined | ||
|
|
||
| useSetCanonicalUrl(canonicalUrl) | ||
|
|
||
| return <></> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
32 changes: 32 additions & 0 deletions
32
apps/synapse-portal-framework/src/utils/useSetCanonicalUrl.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { useEffect } from 'react' | ||
|
|
||
| /** | ||
| * Hook to set the canonical URL of the page. | ||
| * | ||
| * The canonical URL helps search crawlers understand which URL(s) to index when there are multiple URLs that point to | ||
| * the same content. | ||
| * @param canonicalUrl | ||
| */ | ||
| export function useSetCanonicalUrl(canonicalUrl?: string) { | ||
| useEffect(() => { | ||
| const previousCanonicalUrlTag = document.querySelector( | ||
| 'link[rel="canonical"]', | ||
| ) | ||
| if (canonicalUrl) { | ||
| if (previousCanonicalUrlTag) { | ||
| document.head.removeChild(previousCanonicalUrlTag) | ||
| } | ||
| const newCanonicalUrlTag = document.createElement('link') | ||
| newCanonicalUrlTag.setAttribute('rel', 'canonical') | ||
| newCanonicalUrlTag.setAttribute('href', canonicalUrl) | ||
| document.head.appendChild(newCanonicalUrlTag) | ||
| } | ||
|
|
||
| return () => { | ||
| document.querySelector('link[rel="canonical"]')?.remove() | ||
| if (previousCanonicalUrlTag) { | ||
| document.head.appendChild(previousCanonicalUrlTag) | ||
| } | ||
| } | ||
| }, [canonicalUrl]) | ||
| } |