[C-2972] Fix feed, trending track-page seo (#3907)

Author: dylanjeffers

packages/web/src/components/link/Link.module.css

@@ -1,4 +1,6 @@
 .root {
+  display: inline-flex;
+  align-items: center;
   transition: color var(--expressive);
 }
 

packages/web/src/components/link/Link.tsx

@@ -1,3 +1,5 @@
+import { useCallback, MouseEvent } from 'react'
+
 import cn from 'classnames'
 import { Link as LinkBase, LinkProps as LinkBaseProps } from 'react-router-dom'
 
@@ -9,8 +11,22 @@ import styles from './Link.module.css'
 type LinkProps = LinkBaseProps<'a'> & TextProps<'a'>
 
 export const Link = (props: LinkProps) => {
-  const { className, ...other } = props
+  const { className, onClick, ...other } = props
+
+  const handleClick = useCallback(
+    (e: MouseEvent<HTMLAnchorElement>) => {
+      onClick?.(e)
+      e.stopPropagation()
+    },
+    [onClick]
+  )
+
   return (
-    <Text as={LinkBase} className={cn(styles.root, className)} {...other} />
+    <Text
+      as={LinkBase}
+      className={cn(styles.root, className)}
+      onClick={handleClick}
+      {...other}
+    />
   )
 }

packages/web/src/components/track/GiantTrackTile.module.css

@@ -95,19 +95,11 @@
   display: inline;
 }
 
-.artistWrapper .artist {
+.artist {
   display: inline-flex;
-  color: var(--secondary);
-  font-size: var(--font-l);
-  font-weight: var(--font-medium);
   padding-left: var(--unit-1);
-  align-items: center;
-}
-
-.artistWrapper .artist:hover {
-  color: var(--primary);
-  cursor: pointer;
-  text-decoration: underline;
+  text-decoration: inherit;
+  color: inherit;
 }
 
 .playSection {

packages/web/src/components/track/GiantTrackTile.tsx

@@ -34,6 +34,7 @@ import { ReactComponent as IconRobot } from 'assets/img/robot.svg'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import DownloadButtons from 'components/download-buttons/DownloadButtons'
 import { EntityActionButton } from 'components/entity-page/EntityActionButton'
+import { Link } from 'components/link'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Menu from 'components/menu/Menu'
 import RepostFavoritesStats from 'components/repost-favorites-stats/RepostFavoritesStats'
@@ -43,9 +44,11 @@ import { Tile } from 'components/tile'
 import Toast from 'components/toast/Toast'
 import Tooltip from 'components/tooltip/Tooltip'
 import { ComponentPlacement } from 'components/types'
+import { Text } from 'components/typography'
 import UserBadges from 'components/user-badges/UserBadges'
 import { getFeatureEnabled } from 'services/remote-config/featureFlagHelpers'
 import { moodMap } from 'utils/Moods'
+import { profilePage } from 'utils/route'
 
 import { AiTrackSection } from './AiTrackSection'
 import Badge from './Badge'
@@ -105,7 +108,6 @@ export type GiantTrackTileProps = {
   listenCount: number
   loading: boolean
   mood: string
-  onClickArtistName: () => void
   onClickFavorites: () => void
   onClickReposts: () => void
   onDownload: (trackId: ID, category?: string, parentTrackId?: ID) => void
@@ -154,7 +156,6 @@ export const GiantTrackTile = ({
   listenCount,
   loading,
   mood,
-  onClickArtistName,
   onClickFavorites,
   onClickReposts,
   onDownload,
@@ -523,16 +524,23 @@ export const GiantTrackTile = ({
             </div>
             <div className={styles.artistWrapper}>
               <div className={cn(fadeIn)}>
-                <span>By</span>
+                <span>By </span>
                 <ArtistPopover handle={artistHandle}>
-                  <h2 className={styles.artist} onClick={onClickArtistName}>
-                    {artistName}
+                  <Link
+                    to={profilePage(artistHandle)}
+                    color='secondary'
+                    variant='body'
+                    size='large'
+                  >
+                    <Text as='h2' variant='inherit'>
+                      {artistName}
+                    </Text>
                     <UserBadges
                       className={styles.verified}
                       badgeSize={18}
                       userId={userId}
                     />
-                  </h2>
+                  </Link>
                 </ArtistPopover>
               </div>
               {isLoading && (

packages/web/src/components/track/desktop/ConnectedPlaylistTile.module.css

@@ -43,12 +43,6 @@
   margin-right: 4px;
 }
 
-.name {
-  font-weight: var(--font-medium);
-  font-size: var(--font-m);
-  color: var(--neutral);
-}
-
 .userName {
   display: inline-flex;
   align-items: baseline;
@@ -68,13 +62,6 @@
   margin-right: 4px;
 }
 
-.name.artistNameLink:hover {
-  cursor: pointer;
-  color: var(--primary);
-  text-decoration: underline;
-  text-decoration-color: var(--primary-light-2);
-}
-
 .iconVerified {
   margin-left: 4px;
   position: relative;

packages/web/src/components/track/desktop/ConnectedPlaylistTile.tsx

@@ -6,8 +6,7 @@ import {
   useEffect,
   useCallback,
   ReactChildren,
-  useRef,
-  MouseEventHandler
+  useRef
 } from 'react'
 
 import {
@@ -36,6 +35,7 @@ import { ReactComponent as IconKebabHorizontal } from 'assets/img/iconKebabHoriz
 import { TrackEvent, make } from 'common/store/analytics/actions'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import { Draggable } from 'components/dragndrop'
+import { Link } from 'components/link'
 import { OwnProps as CollectionkMenuProps } from 'components/menu/CollectionMenu'
 import Menu from 'components/menu/Menu'
 import { CollectionArtwork } from 'components/track/Artwork'
@@ -78,6 +78,10 @@ const {
 const { getCollection, getTracksFromCollection } = cacheCollectionsSelectors
 const getUserHandle = accountSelectors.getUserHandle
 
+const messages = {
+  createdBy: 'Created by'
+}
+
 type OwnProps = {
   uid: UID
   ordered: boolean
@@ -309,27 +313,15 @@ const ConnectedPlaylistTile = ({
       </Menu>
     )
   }
-  const onClickArtistName: MouseEventHandler = useCallback(
-    (e) => {
-      e.stopPropagation()
-      if (goToRoute) goToRoute(profilePage(handle))
-    },
-    [handle, goToRoute]
-  )
 
   const renderUserName = () => {
     return (
       <div className={styles.userName}>
-        <span className={styles.createdBy}>{'Created by'}</span>
+        <span className={styles.createdBy}>{messages.createdBy}</span>
         <ArtistPopover handle={handle}>
-          <span
-            className={cn(styles.name, {
-              [styles.artistNameLink]: onClickArtistName
-            })}
-            onClick={onClickArtistName}
-          >
+          <Link to={profilePage(handle)} className={styles.name}>
             {name}
-          </span>
+          </Link>
         </ArtistPopover>
         <UserBadges
           userId={user?.user_id ?? 0}

packages/web/src/components/track/desktop/ConnectedTrackTile.module.css

@@ -48,35 +48,8 @@
   opacity: 0.75;
 }
 
-.name,
-.name:hover,
-.name:active {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-.userName {
-  display: inline-flex;
-  font-weight: var(--font-medium);
-  align-items: center;
-  /**
-   * Some webkit browsers (safari) have some trouble rendering this specific
-   * font style within this particular context (due to floating point math being wonky
-   * and the text getting accidentally wrapped). This is a temporary fix.
-   * https://bugs.webkit.org/show_bug.cgi?id=217136
-   */
-  letter-spacing: 0.000001px;
-}
-
-.active .userName {
-  color: var(--primary);
-}
-
-.artistNameLink:hover {
-  cursor: pointer;
+.active .name {
   color: var(--primary);
-  text-decoration: underline !important;
-  text-decoration-color: var(--primary-light-2);
 }
 
 .socialInfo {

packages/web/src/components/track/desktop/ConnectedTrackTile.tsx

@@ -4,8 +4,7 @@ import {
   useCallback,
   useEffect,
   MouseEvent,
-  useRef,
-  MouseEventHandler
+  useRef
 } from 'react'
 
 import {
@@ -25,14 +24,14 @@ import {
   Genre
 } from '@audius/common'
 import cn from 'classnames'
-import { push as pushRoute } from 'connected-react-router'
 import { connect, useDispatch } from 'react-redux'
 import { Dispatch } from 'redux'
 
 import { ReactComponent as IconKebabHorizontal } from 'assets/img/iconKebabHorizontal.svg'
 import { useModalState } from 'common/hooks/useModalState'
 import { ArtistPopover } from 'components/artist/ArtistPopover'
 import { Draggable } from 'components/dragndrop'
+import { Link } from 'components/link'
 import Menu from 'components/menu/Menu'
 import { OwnProps as TrackMenuProps } from 'components/menu/TrackMenu'
 import { TrackArtwork } from 'components/track/Artwork'
@@ -94,7 +93,6 @@ const ConnectedTrackTile = ({
   user,
   ordered,
   showArtistPick,
-  goToRoute,
   togglePlay,
   isBuffering,
   isPlaying,
@@ -241,44 +239,19 @@ const ConnectedTrackTile = ({
     )
   }
 
-  const onClickArtistName: MouseEventHandler = useCallback(
-    (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      if (goToRoute) goToRoute(profilePage(handle))
-    },
-    [handle, goToRoute]
-  )
-
-  const onClickTitle: MouseEventHandler = useCallback(
-    (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      if (goToRoute) goToRoute(permalink)
-    },
-    [goToRoute, permalink]
-  )
-
   const renderUserName = () => {
     return (
-      <div className={styles.userName}>
-        <ArtistPopover handle={handle}>
-          <a
-            className={cn(styles.name, {
-              [styles.artistNameLink]: onClickArtistName
-            })}
-            onClick={onClickArtistName}
-            href={profilePage(handle)}
-          >
-            {name}
-          </a>
-        </ArtistPopover>
-        <UserBadges
-          userId={user?.user_id ?? 0}
-          badgeSize={14}
-          className={styles.badgeWrapper}
-        />
-      </div>
+      <ArtistPopover handle={handle}>
+        <Link to={profilePage(handle)} className={styles.name}>
+          {name}
+
+          <UserBadges
+            userId={user?.user_id ?? 0}
+            badgeSize={14}
+            className={styles.badgeWrapper}
+          />
+        </Link>
+      </ArtistPopover>
     )
   }
 
@@ -405,7 +378,6 @@ const ConnectedTrackTile = ({
         [styles.loading]: loading,
         [styles.active]: isActive
       })}
-      onClickTitle={onClickTitle}
       onClickRepost={onClickRepost}
       onClickFavorite={onClickFavorite}
       onClickShare={onClickShare}
@@ -449,7 +421,6 @@ function mapStateToProps(state: AppState, ownProps: OwnProps) {
 
 function mapDispatchToProps(dispatch: Dispatch) {
   return {
-    goToRoute: (route: string) => dispatch(pushRoute(route)),
     shareTrack: (trackId: ID) =>
       dispatch(
         requestOpenShareModal({

packages/web/src/components/track/desktop/PlaylistTile.tsx

@@ -109,7 +109,6 @@ const PlaylistTile = ({
           bottomBar={bottomBar}
           showIconButtons={showIconButtons}
           containerClassName={tileClassName}
-          onClickTitle={onClickTitle}
           onClickRepost={onClickRepost}
           onClickFavorite={onClickFavorite}
           onClickShare={onClickShare}

packages/web/src/components/track/desktop/TrackTile.module.css

@@ -148,10 +148,6 @@
     inset var(--unit-1) var(--unit-1) var(--unit-2) rgba(255, 255, 255, 0.2);
 }
 
-.title {
-  color: var(--neutral);
-}
-
 .volumeIcon {
   margin-left: 6px;
 }
@@ -212,19 +208,11 @@
   color: var(--primary);
 }
 
-.title:hover,
-.creatorRow .name.artistNameLink:hover {
-  cursor: pointer;
-  color: var(--primary);
-  text-decoration: underline !important;
-  text-decoration-color: var(--primary-light-2);
-}
-
 .isDisabled .title:hover,
-.isDisabled .creatorRow .name.artistNameLink:hover {
+.isDisabled .creatorRow:hover {
   cursor: default;
   color: inherit;
-  text-decoration: none;
+  text-decoration: none !important;
 }
 
 .isHidden {