Merge ade621b into bf0362a

cofacts · Jan 24, 2023 · d4f17cc · d4f17cc
2 parents bf0362a + ade621b
commit d4f17cc
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 56 deletions.
diff --git a/components/Hyperlinks.js b/components/Hyperlinks.js
@@ -127,8 +127,9 @@ function getErrorText(error) {
 
 /**
  * @param {object} props.hyperlink
+ * @param {string} props.rel - rel prop for the hyperlink (other than noopener and noreferrer)
  */
-function Hyperlink({ hyperlink }) {
+function Hyperlink({ hyperlink, rel = '' }) {
   const { title, topImageUrl, error, url } = hyperlink;
   const summary = (hyperlink.summary || '').slice(0, 200);
 
@@ -146,7 +147,7 @@ function Hyperlink({ hyperlink }) {
       </div>
       <span className={classes.url}>
         <HyperlinkIcon />
-        <a href={url} target="_blank" rel="noopener noreferrer">
+        <a href={url} target="_blank" rel={`noopener noreferrer ${rel}`}>
           {url}
         </a>
       </span>
@@ -173,8 +174,9 @@ function PollingHyperlink({ pollingType, pollingId }) {
  * @param {object[] | null} props.hyperlinks
  * @param {'articles'|'replies'?} props.pollingType - poll article or reply for hyperlinks when it's not loaded (null)
  * @param {string?} props.pollingId - polling article or reply id for hyperlinks when it's not loaded (null)
+ * @param {string?} props.rel - rel prop for the hyperlink (other than noopener and noreferrer)
  */
-function Hyperlinks({ hyperlinks, pollingType, pollingId }) {
+function Hyperlinks({ hyperlinks, pollingType, pollingId, rel }) {
   if (!((pollingId && pollingType) || (!pollingId && !pollingType))) {
     throw new Error('pollingType and pollingId must be specified together');
   }
@@ -191,7 +193,7 @@ function Hyperlinks({ hyperlinks, pollingType, pollingId }) {
       mb={1}
     >
       {(hyperlinks || []).map((hyperlink, idx) => (
-        <Hyperlink key={idx} hyperlink={hyperlink} />
+        <Hyperlink key={idx} hyperlink={hyperlink} rel={rel} />
       ))}
       {!hyperlinks && pollingId && (
         <PollingHyperlink pollingId={pollingId} pollingType={pollingType} />

diff --git a/components/__snapshots__/Hyperlinks.stories.storyshot b/components/__snapshots__/Hyperlinks.stories.storyshot
@@ -78,7 +78,7 @@ exports[`Storyshots Hyperlinks All Variants 1`] = `
             </HyperlinkIcon>
             <a
               href="https://cofacts.org"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer "
               target="_blank"
             >
               https://cofacts.org
@@ -135,7 +135,7 @@ exports[`Storyshots Hyperlinks All Variants 1`] = `
             </HyperlinkIcon>
             <a
               href="https://cofacts.org"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer "
               target="_blank"
             >
               https://cofacts.org
@@ -186,7 +186,7 @@ exports[`Storyshots Hyperlinks All Variants 1`] = `
             </HyperlinkIcon>
             <a
               href="https://not-found.org"
-              rel="noopener noreferrer"
+              rel="noopener noreferrer "
               target="_blank"
             >
               https://not-found.org

diff --git a/pages/article/[id].js b/pages/article/[id].js
@@ -133,6 +133,7 @@ const LOAD_ARTICLE = gql`
       replyRequestCount
       replyCount
       createdAt
+      status
       references {
         type
       }
@@ -353,6 +354,8 @@ function ArticlePage() {
         <title>
           {ellipsis(article.text, { wordCount: 100 })} | {t`Cofacts`}
         </title>
+        {/* Don't let search engines index blocked spam */ article.status ===
+          'BLOCKED' && <meta name="robots" content="noindex, nofollow" />}
       </Head>
       <div className={classes.root}>
         <div className={classes.main}>
@@ -372,55 +375,62 @@ function ArticlePage() {
               </Infos>
             </header>
             <CardContent>
-              {(() => {
-                switch (articleType) {
-                  case 'IMAGE':
-                    return !originalAttachmentUrl ? (
-                      <img
-                        className={classes.attachment}
-                        src={attachmentUrl}
-                        alt="image"
-                      />
-                    ) : (
-                      <a
-                        href={originalAttachmentUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                      >
-                        <img
-                          className={classes.attachment}
-                          src={attachmentUrl}
-                          alt="image"
-                        />
-                      </a>
-                    );
-                  case 'VIDEO':
-                    return !originalAttachmentUrl ? (
-                      t`Log in to view video content`
-                    ) : (
-                      <video
-                        className={classes.attachment}
-                        src={originalAttachmentUrl}
-                        controls
-                      />
-                    );
-                  case 'AUDIO':
-                    return !originalAttachmentUrl ? (
-                      t`Log in to view audio content`
-                    ) : (
-                      <audio src={originalAttachmentUrl} controls />
-                    );
-                }
-              })()}
-              {text &&
-                nl2br(
-                  linkify(text, {
-                    props: {
-                      target: '_blank',
-                    },
-                  })
-                )}
-              <Hyperlinks hyperlinks={hyperlinks} />
+              {article.status === 'BLOCKED' && !currentUser ? (
+                t`Log in to view content`
+              ) : (
+                <>
+                  {(() => {
+                    switch (articleType) {
+                      case 'IMAGE':
+                        return !originalAttachmentUrl ? (
+                          <img
+                            className={classes.attachment}
+                            src={attachmentUrl}
+                            alt="image"
+                          />
+                        ) : (
+                          <a
+                            href={originalAttachmentUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <img
+                              className={classes.attachment}
+                              src={attachmentUrl}
+                              alt="image"
+                            />
+                          </a>
+                        );
+                      case 'VIDEO':
+                        return !originalAttachmentUrl ? (
+                          t`Log in to view video content`
+                        ) : (
+                          <video
+                            className={classes.attachment}
+                            src={originalAttachmentUrl}
+                            controls
+                          />
+                        );
+                      case 'AUDIO':
+                        return !originalAttachmentUrl ? (
+                          t`Log in to view audio content`
+                        ) : (
+                          <audio src={originalAttachmentUrl} controls />
+                        );
+                    }
+                  })()}
+                  {text &&
+                    nl2br(
+                      linkify(text, {
+                        props: {
+                          target: '_blank',
+                          rel: 'ugc nofollow',
+                        },
+                      })
+                    )}
+                  <Hyperlinks hyperlinks={hyperlinks} rel="ugc nofollow" />
+                </>
+              )}
               <Box my={[1.5, 2]}>
                 <ArticleCategories
                   articleId={article.id}