open item links in new tab, nofollow links conditionally

components/comment.js

@@ -12,6 +12,7 @@ import { useRouter } from 'next/router'
 import { useMe } from './me'
 import CommentEdit from './comment-edit'
 import Countdown from './countdown'
+import { NOFOLLOW_LIMIT } from '../lib/constants'
 
 function Parent ({ item, rootText }) {
   const ParentFrag = () => (
@@ -105,7 +106,7 @@ export default function Comment ({ item, children, replyOpen, includeParent, roo
               )
             : (
               <div className={styles.text}>
-                <Text>{item.text}</Text>
+                <Text nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.text}</Text>
               </div>
               )}
         </div>

components/item.js

@@ -5,6 +5,7 @@ import UpVote from './upvote'
 import { useMe } from './me'
 import { useState } from 'react'
 import Countdown from './countdown'
+import { NOFOLLOW_LIMIT } from '../lib/constants'
 
 export default function Item ({ item, rank, children }) {
   const me = useMe()
@@ -30,7 +31,7 @@ export default function Item ({ item, rank, children }) {
             {item.url &&
               <a
                 className={styles.link} target='_blank' href={item.url} // eslint-disable-line
-                rel={item.sats + item.boost >= 10 ? null : 'nofollow'}
+                rel={item.sats + item.boost >= NOFOLLOW_LIMIT ? null : 'nofollow'}
               >
                 {item.url.replace(/(^https?:|^)\/\//, '')}
               </a>}

components/text.js

@@ -6,7 +6,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import mention from '../lib/remark-mention'
 
-export default function Text ({ children }) {
+export default function Text ({ nofollow, children }) {
   return (
     <div className={styles.text}>
       <ReactMarkdown
@@ -34,7 +34,8 @@ export default function Text ({ children }) {
                   {children}
                 </code>
                 )
-          }
+          },
+          a: ({ node, ...props }) => <a target='_blank' rel={nofollow ? 'nofollow' : null} {...props} />
         }}
         remarkPlugins={[gfm, mention]}
       >

lib/constants.js

@@ -0,0 +1 @@
+export const NOFOLLOW_LIMIT = 10

pages/items/[id].js

@@ -10,6 +10,7 @@ import { gql, useQuery } from '@apollo/client'
 import styles from '../../styles/item.module.css'
 import Seo from '../../components/seo'
 import ApolloClient from '../../api/client'
+import { NOFOLLOW_LIMIT } from '../../lib/constants'
 
 // ssr the item without comments so that we can populate metatags
 export async function getServerSideProps ({ req, params: { id } }) {
@@ -92,7 +93,7 @@ function LoadItem ({ query }) {
         : (
           <>
             <Item item={item}>
-              {item.text && <div className='mb-3'><Text>{item.text}</Text></div>}
+              {item.text && <div className='mb-3'><Text nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.text}</Text></div>}
               <Reply parentId={item.id} />
             </Item>
           </>