convert all links on asset page to canonial urls

client/src/components/AssetShareButtons/index.js

@@ -1,48 +1,48 @@
 import React from 'react';
 import SocialShareLink from '@components/SocialShareLink';
 
-const AssetShareButtons = ({ host, name, shortId }) => {
+const AssetShareButtons = ({ assetUrl, name }) => {
   return (
     <SocialShareLink >
       <a
         className='link--primary'
         target='_blank'
-        href={`https://twitter.com/intent/tweet?text=${host}/${shortId}/${name}`}
+        href={`https://twitter.com/intent/tweet?text=${assetUrl}`}
       >
         twitter
       </a>
       <a
         className='link--primary'
         target='_blank'
-        href={`https://www.facebook.com/sharer/sharer.php?u=${host}/${shortId}/${name}`}
+        href={`https://www.facebook.com/sharer/sharer.php?u=${assetUrl}`}
       >
         facebook
       </a>
       <a
         className='link--primary'
         target='_blank'
-        href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${host}/${shortId}/${name}`}
+        href={`https://tumblr.com/widgets/share/tool?canonicalUrl=${assetUrl}`}
       >
         tumblr
       </a>
       <a
         className='link--primary'
         target='_blank'
-        href={`https://www.reddit.com/submit?url=${host}/${shortId}/${name}&title=${name}`}
+        href={`https://www.reddit.com/submit?url=${assetUrl}&title=${name}`}
       >
         reddit
       </a>
       <a
         className='link--primary'
         target='_blank'
-        href={`https://sharetomastodon.github.io/?title=${name}&url=${host}/${shortId}/${name}`}
+        href={`https://sharetomastodon.github.io/?title=${name}&url=${assetUrl}`}
       >
         mastodon
       </a>
       <a
         className='link--primary'
         target='_blank'
-        href={`https://share.diasporafoundation.org/?title=${name}&url=${host}/${shortId}/${name}`}
+        href={`https://share.diasporafoundation.org/?title=${name}&url=${assetUrl}`}
       >
         diaspora
       </a>

client/src/containers/AssetInfo/view.jsx

@@ -6,14 +6,20 @@ import Row from '@components/Row';
 import SpaceBetween from '@components/SpaceBetween';
 import AssetShareButtons from '@components/AssetShareButtons';
 import ClickToCopy from '@components/ClickToCopy';
-import createCanonicalLink from '../../utils/createCanonicalLink';
+
+import siteConfig from '@config/siteConfig.json';
+const { details: { host } } = siteConfig;
+import createCanonicalLink from '../../../../utils/createCanonicalLink';
 
 class AssetInfo extends React.Component {
   render () {
     const { asset } = this.props;
     const { shortId, claimData: { channelName, channelShortId, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } = asset;
 
-    const assetCanonicalUrl = createCanonicalLink({asset});
+    const assetCanonicalUrl = `${host}${createCanonicalLink({
+      asset,
+      absolute: true,
+    })}`;
 
     let channelCanonicalUrl;
     if (channelName) {
@@ -21,7 +27,7 @@ class AssetInfo extends React.Component {
         name: channelName,
         shortId: channelShortId,
       };
-      channelCanonicalUrl = createCanonicalLink({channel});
+      channelCanonicalUrl = `${createCanonicalLink({channel})}`;
     }
     return (
       <div>
@@ -62,9 +68,8 @@ class AssetInfo extends React.Component {
             }
             content={
               <AssetShareButtons
-                host={host}
                 name={name}
-                shortId={shortId}
+                assetUrl={assetCanonicalUrl}
               />
             }
           />
@@ -78,7 +83,7 @@ class AssetInfo extends React.Component {
             content={
               <ClickToCopy
                 id={'short-link'}
-                value={`${host}/${shortId}/${name}`}
+                value={assetCanonicalUrl}
               />
             }
           />
@@ -94,12 +99,12 @@ class AssetInfo extends React.Component {
                 {(contentType === 'video/mp4') ? (
                   <ClickToCopy
                     id={'embed-text-video'}
-                    value={`<iframe src="${host}/video-embed/${name}/${claimId}" allowfullscreen="true" style="border:0" /></iframe>`}
+                    value={`<iframe src="${host}/video-embed${assetCanonicalUrl}" allowfullscreen="true" style="border:0" /></iframe>`}
                   />
                 ) : (
                   <ClickToCopy
                     id={'embed-text-image'}
-                    value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`}
+                    value={`<img src="${assetCanonicalUrl}.${fileExt}"/>`}
                   />
                 )}
               </div>
@@ -111,13 +116,13 @@ class AssetInfo extends React.Component {
           <SpaceBetween>
             <a
               className='link--primary'
-              href={`${host}/${claimId}/${name}.${fileExt}`}
+              href={`${assetCanonicalUrl}.${fileExt}`}
             >
               Direct Link
             </a>
             <a
               className={'link--primary'}
-              href={`${host}/${claimId}/${name}.${fileExt}`}
+              href={`${assetCanonicalUrl}.${fileExt}`}
               download={name}
             >
               Download

client/src/containers/SEO/view.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import PropTypes from 'prop-types';
 
-import siteConfig from '@config/siteConfig.json';
 import createPageTitle from '../../utils/createPageTitle';
 import createMetaTags from '../../utils/createMetaTags';
 import oEmbed from '../../utils/oEmbed.js';
-import createCanonicalLink from '../../utils/createCanonicalLink';
+import createCanonicalLink from '../../../../utils/createCanonicalLink';
 
+import siteConfig from '@config/siteConfig.json';
 const { details: { host } } = siteConfig;
 
 class SEO extends React.Component {
@@ -21,12 +21,11 @@ class SEO extends React.Component {
       asset,
       channel,
     });
-    const canonicalLink = createCanonicalLink({
+    const canonicalLink = `${host}${createCanonicalLink({
       asset,
       channel,
       page: pageUri,
-      absolute: true,
-    });
+    })}`;
     // render results
     return (
       <Helmet

client/src/utils/createAssetMetaTags.js

@@ -1,6 +1,7 @@
 import siteConfig from '@config/siteConfig.json';
 import determineContentTypeFromExtension from './determineContentTypeFromExtension';
 import createMetaTagsArray from './createMetaTagsArray';
+import createCanonicalLink from '../../../utils/createCanonicalLink';
 
 const {
   details: {
@@ -37,8 +38,10 @@ const determineMediaType = (contentType) => {
 const createAssetMetaTags = (asset) => {
   const { claimData } = asset;
   const { contentType } = claimData;
-  const showUrl = `${host}/${claimData.claimId}/${claimData.name}`;
-  const serveUrl = `${host}/${claimData.claimId}/${claimData.name}.${claimData.fileExt}`;
+  const canonicalLink = createCanonicalLink({asset});
+  const showUrl = `${host}${canonicalLink}`;
+  const serveUrl = `${showUrl}.${claimData.fileExt}`;
+
   const ogTitle = claimData.title || claimData.name;
   const ogDescription = claimData.description || defaultDescription;
   const ogThumbnailContentType = determineContentTypeFromExtension(claimData.thumbnail);
@@ -55,7 +58,7 @@ const createAssetMetaTags = (asset) => {
     'fb:app_id'          : '1371961932852223',
   };
   if (determineMediaType(contentType) === VIDEO) {
-    const videoEmbedUrl = `${host}/video-embed/${claimData.name}/${claimData.claimId}`;
+    const videoEmbedUrl = `${host}/video-embed/${canonicalLink}`;
     // card type tags
     metaTags['og:type'] = 'video.other';
     metaTags['twitter:card'] = 'player';