External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(replies): add backlinks

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-04 17:48:53 +02:00
parent 709efe9869
commit cbc99f42b0
4 changed files with 109 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post-desktop/post-desktop.tsx
+14 -2
View File
@@ -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) => {
)}
</span>
<PostMenuDesktop post={post} />
{replyCount > 0 &&
parentCid &&
replies &&
replies.map(
(reply: Comment, index: number) =>
reply?.parentCid === cid && (
<span key={index} className={styles.backlink}>
<Link to={`/p/${subplebbitAddress}/c/${reply?.cid}`}>c/{reply?.shortCid}</Link>
</span>
),
)}
</div>
);
};
src/components/post/post-mobile/post-mobile.tsx
+24 -1
View File
@@ -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 && (
<div className={styles.mobileReplyBacklinks}>
{replies.map(
(reply: Comment, index: number) =>
reply?.parentCid === cid && (
<span key={index} className={styles.backlink}>
<Link to={`/p/${subplebbitAddress}/c/${reply?.cid}`}>c/{reply?.shortCid}</Link>
</span>
),
)}
</div>
)
);
};
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)
<div className={styles.replyContainer}>
<PostInfoAndMedia openReplyModal={openReplyModal} post={reply} roles={roles} />
{reply.content && <PostMessageMobile post={reply} />}
<ReplyBacklinks post={reply} />
</div>
</div>
</div>
src/components/post/post.module.css
+23
View File
@@ -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;
src/themes.css
+48
View File
@@ -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;