MBS-13804: Show review links as such on sidebar

root/cdtoc/utils.js

@@ -26,7 +26,6 @@ export function isPerfectMatch(
   medium: MediumT,
   cdToc: CDTocT,
 ): boolean {
-  console.log(medium);
   const mediumLengths = medium.cdtoc_track_lengths;
   if (!mediumLengths) {
     throw new Error('cdtoc_track_lengths were not loaded');

root/layout/components/ExternalLinks.js

@@ -76,7 +76,7 @@ component ExternalLinks(
   }
 
   const links = [];
-  const blogLinks = [];
+  const blogsAndReviews = [];
   const otherLinks: Array<{
     +editsPending: boolean,
     +entityCredit: string,
@@ -108,8 +108,8 @@ component ExternalLinks(
           url={target}
         />,
       );
-    } else if (/^blog$/.test(linkType.name)) {
-      blogLinks.push(
+    } else if (linkType.name === 'blog') {
+      blogsAndReviews.push(
         <ExternalLink
           className="blog-favicon"
           editsPending={relationship.editsPending}
@@ -119,6 +119,23 @@ component ExternalLinks(
           url={target}
         />,
       );
+    } else if (linkType.name === 'review') {
+      const urlObject = new URL(target.name);
+      const hostName = urlObject.host.replace('www.', '');
+
+      blogsAndReviews.push(
+        <ExternalLink
+          className="review-favicon"
+          editsPending={relationship.editsPending}
+          entityCredit={entityCredit}
+          key={relationship.id}
+          text={texp.l(
+            'Review ({hostname})',
+            {hostname: hostName},
+          )}
+          url={target}
+        />,
+      );
     } else if (target.show_in_external_links /*:: === true */) {
       otherLinks.push({
         editsPending: relationship.editsPending,
@@ -129,7 +146,7 @@ component ExternalLinks(
     }
   }
 
-  if (!(links.length || blogLinks.length || otherLinks.length)) {
+  if (!(links.length || blogsAndReviews.length || otherLinks.length)) {
     return null;
   }
 
@@ -142,8 +159,8 @@ component ExternalLinks(
       compare(a.url.href_url, b.url.href_url)
     ));
 
-  // We ensure official sites are listed above blogs, and blogs above others
-  links.push(...blogLinks);
+  // We list official sites above blogs/reviews, and those above others
+  links.push(...blogsAndReviews);
   links.push(...uniqueOtherLinks.map(({id, ...props}) => (
     <ExternalLink key={id} {...props} />
   )));

root/static/images/attribution.txt

@@ -72,11 +72,12 @@ Images:
 Image set:   Gentleface Mono Icon Set
 Author:      Gentleface.com
 License:     CC-NC-ND-BY/3.0 (see: http://creativecommons.org/licenses/by-nc-nd/3.0/)
-Download:    http://gentleface.com/free_icon_set.html
+Download:    https://www.iconfinder.com/iconsets/cc_mono_icon_set
 Images:
 
-    external-favicons/home-32.png (original: black/png/home_icon&32.png)
-    external-favicons/blog-32.png (original: black/png/speechbubble_sq_line_icon&32.png)
+    external-favicons/home-32.png (original: https://www.iconfinder.com/icons/42257/about_icon)
+    external-favicons/blog-32.png (original: https://www.iconfinder.com/icons/42282/notepad_icon)
+    external-favicons/review-32.png (original: https://www.iconfinder.com/icons/42347/line_spechbubble_sq_icon)
 
 ----------------------------------------------------------------------------
 

root/static/scripts/edit/externalLinks.js

@@ -145,6 +145,42 @@ type LinksEditorState = {
   +links: $ReadOnlyArray<LinkStateT>,
 };
 
+function getFaviconClass(
+  relationships: $ReadOnlyArray<LinkRelationshipT>,
+  url: string,
+) {
+  let faviconClass = '';
+
+  for (const relationship of relationships) {
+    const linkType = relationship.type
+      ? linkedEntities.link_type[relationship.type]
+      : null;
+
+    if (linkType) {
+      // If we find a homepage, that's the icon we want and we're done
+      if (/^official (?:homepage|site)$/.test(linkType.name)) {
+        return 'home';
+      } else if (linkType.name === 'blog') {
+        faviconClass = 'blog';
+      } else if (linkType.name === 'review') {
+        faviconClass = 'review';
+      }
+    }
+  }
+
+  if (nonEmpty(faviconClass)) {
+    return faviconClass;
+  }
+
+  for (const key of Object.keys(FAVICON_CLASSES)) {
+    if (url.indexOf(key) > 0) {
+      return FAVICON_CLASSES[key];
+    }
+  }
+
+  return 'no';
+}
+
 export class _ExternalLinksEditor
   extends React.Component<LinksEditorProps, LinksEditorState> {
   creditableEntityProp: 'entity0_credit' | 'entity1_credit' | null;
@@ -1428,42 +1464,9 @@ export class ExternalLink extends React.Component<LinkProps> {
     });
     const firstLink = props.relationships[0];
 
-    let faviconClass: string | void;
-    for (const key of Object.keys(FAVICON_CLASSES)) {
-      if (props.url.indexOf(key) > 0) {
-        faviconClass = FAVICON_CLASSES[key];
-        break;
-      }
-    }
-    if (notEmpty && !faviconClass) {
-      const isHomepage = props.relationships.some(link => {
-        const linkType = link.type
-          ? linkedEntities.link_type[link.type]
-          : null;
-        if (linkType) {
-          return /^official (?:homepage|site)$/.test(linkType.name);
-        }
-        return false;
-      });
-      if (isHomepage) {
-        faviconClass = 'home';
-      } else {
-        const isBlog = props.relationships.some(link => {
-          const linkType = link.type
-            ? linkedEntities.link_type[link.type]
-            : null;
-          if (linkType) {
-            return /^blog$/.test(linkType.name);
-          }
-          return false;
-        });
-        if (isBlog) {
-          faviconClass = 'blog';
-        } else {
-          faviconClass = 'no';
-        }
-      }
-    }
+    const faviconClass = notEmpty
+      ? getFaviconClass(props.relationships, props.url)
+      : null;
 
     return (
       <>

root/static/styles/favicons.less

@@ -12,6 +12,7 @@
 
 .favicon("home", 32);
 .favicon("blog", 32);
+.favicon("review", 32);
 
 .favicon("allmusic");
 .favicon("amazon", 32);