open item links in new tab, nofollow links conditionally

This commit is contained in:
keyan 2021-09-02 13:11:27 -05:00
parent 48146d1757
commit 0133c7acc6
5 changed files with 10 additions and 5 deletions

View File

@ -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>

View File

@ -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>}

View File

@ -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]}
>

1
lib/constants.js Normal file
View File

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

View File

@ -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>
</>