From cbc99f42b04e0170d2f441624cdf3fe13d84965a Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Tue, 4 Jun 2024 17:48:53 +0200 Subject: [PATCH] feat(replies): add backlinks --- .../post/post-desktop/post-desktop.tsx | 16 ++++++- .../post/post-mobile/post-mobile.tsx | 25 +++++++++- src/components/post/post.module.css | 23 +++++++++ src/themes.css | 48 +++++++++++++++++++ 4 files changed, 109 insertions(+), 3 deletions(-) diff --git a/src/components/post/post-desktop/post-desktop.tsx b/src/components/post/post-desktop/post-desktop.tsx index 6b85dee9..73370e68 100644 --- a/src/components/post/post-desktop/post-desktop.tsx +++ b/src/components/post/post-desktop/post-desktop.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { useLocation, useParams } from 'react-router-dom'; import { Link } from 'react-router-dom'; -import { useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks'; +import { Comment, useAccount, useBlock, useEditedComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import styles from '../post.module.css'; import { getCommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../../lib/utils/media-utils'; @@ -24,7 +24,8 @@ import _ from 'lodash'; const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { const { t } = useTranslation(); - const { author, cid, locked, pinned, parentCid, postCid, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; + const { author, cid, locked, pinned, parentCid, postCid, replyCount, shortCid, state, subplebbitAddress, timestamp, title } = post || {}; + const replies = useReplies(post); const { address, displayName, shortAddress } = author || {}; const { isDescription, isRules } = post || {}; // custom properties, not from api const stateString = useStateString(post); @@ -104,6 +105,17 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => { )} + {replyCount > 0 && + parentCid && + replies && + replies.map( + (reply: Comment, index: number) => + reply?.parentCid === cid && ( + + c/{reply?.shortCid} + + ), + )} ); }; diff --git a/src/components/post/post-mobile/post-mobile.tsx b/src/components/post/post-mobile/post-mobile.tsx index eeabdad2..e0b66f28 100644 --- a/src/components/post/post-mobile/post-mobile.tsx +++ b/src/components/post/post-mobile/post-mobile.tsx @@ -1,7 +1,7 @@ import { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { Link, useLocation, useParams } from 'react-router-dom'; -import { useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks'; +import { Comment, useAccount, useEditedComment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import styles from '../post.module.css'; import { getCommentMediaInfo, getHasThumbnail } from '../../../lib/utils/media-utils'; @@ -99,6 +99,28 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => { ); }; +const ReplyBacklinks = ({ post }: PostProps) => { + const { cid, parentCid, replyCount, subplebbitAddress } = post || {}; + const replies = useReplies(post); + + return ( + replyCount > 0 && + parentCid && + replies && ( +
+ {replies.map( + (reply: Comment, index: number) => + reply?.parentCid === cid && ( + + c/{reply?.shortCid} + + ), + )} +
+ ) + ); +}; + const PostMessageMobile = ({ post }: PostProps) => { const { cid, content, deleted, parentCid, postCid, reason, removed, state, subplebbitAddress } = post || {}; @@ -217,6 +239,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
{reply.content && } +
diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 3995fbaa..98015fa0 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -393,6 +393,29 @@ color: red; } +.backlink { + font-size: 0.8em; + padding-left: 5px; +} + +.backlink a { + color: var(--post-backlink-text-color); + text-decoration: var(--post-backlink-text-decoration); +} + +.backlink a:hover { + color: var(--post-backlink-text-color-hover); + text-decoration: var(--post-backlink-text-decoration-hover); +} + +.mobileReplyBacklinks { + padding: 0 0; + padding-bottom: 3px; + line-height: 2; + background-color: var(--reply-backlink-mobile-background-color); + border-top: var(--reply-backlink-mobile-border-top); +} + @media (max-width: 640px) { .postDesktop { display: none; diff --git a/src/themes.css b/src/themes.css index ad091f7b..10c352ec 100644 --- a/src/themes.css +++ b/src/themes.css @@ -1,4 +1,12 @@ :root .yotsuba { + /* backlink */ + --post-backlink-text-color: navy; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: red; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #ead6ca; + --reply-backlink-mobile-border-top: 1px solid #d9bfb7; + /* board banner */ --banner-image-border: 1px solid #800; --board-title-font-size: 28px; @@ -183,6 +191,14 @@ } :root .yotsuba-b { + /* backlink */ + --post-backlink-text-color: #34345C; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: #dd0000; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #c9cde8; + --reply-backlink-mobile-border-top: 1px solid #b7c5d9; + /* board banner */ --banner-image-border: 1px solid #000; --board-title-font-size: 28px; @@ -367,6 +383,14 @@ } :root .futaba { + /* backlink */ + --post-backlink-text-color: navy; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: red; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #ead6ca; + --reply-backlink-mobile-border-top: 1px solid #d9bfb7; + /* body */ --body-background-base-color: #ffe; --body-background-pattern-image: none; @@ -517,6 +541,14 @@ } :root .burichan { + /* backlink */ + --post-backlink-text-color: #34345C; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: #dd0000; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #c9cde8; + --reply-backlink-mobile-border-top: 1px solid #b7c5d9; + /* board banner */ --banner-image-border: 1px solid #000; --board-title-font-size: 32px; @@ -681,6 +713,14 @@ } :root .tomorrow { + /* backlink */ + --post-backlink-text-color: #5f89ac; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: #81a2be; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #212326; + --reply-backlink-mobile-border-top: 1px solid #2D2F33; + /* body */ --body-background-base-color: #1d1f21; --body-background-pattern-image: none; @@ -868,6 +908,14 @@ } :root .photon { + /* backlink */ + --post-backlink-text-color: #f60; + --post-backlink-text-decoration: underline; + --post-backlink-text-color-hover: #f30; + --post-backlink-text-decoration-hover: underline; + --reply-backlink-mobile-background-color: #ddd; + --reply-backlink-mobile-border-top: 1px solid #ccc; + /* body */ --body-background-base-color: #eee; --body-background-pattern-image: none;