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(feed): add description and rules

Browse Source
This commit is contained in:
plebeius.eth
2024-04-08 12:33:59 +02:00
parent aa6eeee26f
commit dcf0dd98e4
5 changed files with 90 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/post/post.module.css
+4
View File
@@ -368,6 +368,10 @@
text-align: right;
}
.capcodeMod {
color: var(--post-capcode-mod-text-color) !important;
}
@media (max-width: 640px) {
.postDesktop {
display: none;
src/components/post/post.tsx
+30 -22
View File
@@ -1,7 +1,6 @@
import { useState } from 'react';
import { Link, useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils';
import { getFormattedDate } from '../../lib/utils/time-utils';
@@ -12,7 +11,7 @@ import styles from './post.module.css';
import Markdown from '../markdown';
import Media from '../media';
const ReplyDesktop = ({ reply }: Comment) => {
const ReplyDesktop = ({ reply }: any) => {
const { t } = useTranslation();
const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {};
@@ -102,10 +101,11 @@ const ReplyDesktop = ({ reply }: Comment) => {
);
};
const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
const PostDesktop = ({ post, showAllReplies }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { displayName, shortAddress } = author || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const isInPostPage = isPostPageView(useLocation().pathname, useParams());
@@ -170,19 +170,21 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
</span>
{title && <span className={styles.subject}>{displayTitle} </span>}
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.userAddress}>(u/{shortAddress}) </span>
<span className={`${styles.name} ${(isDescription || isRules) && styles.capcodeMod}`}>{displayName || 'Anonymous'} </span>
{!(isDescription || isRules) && <span className={styles.userAddress}>(u/{shortAddress}) </span>}
</span>
<span className={styles.dateTime}>{getFormattedDate(timestamp)} </span>
<span className={styles.postNum}>
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
{!(isDescription || isRules) && (
<span className={styles.postNumLink}>
<Link to={`/p/${subplebbitAddress}/${cid}`} className={styles.linkToPost} title={t('link_to_post')}>
c/
</Link>
<span className={styles.replyToPost} title={t('reply_to_post')}>
{shortCid}
</span>
</span>
</span>
)}
{pinned && (
<span className={styles.stickyIconWrapper}>
<img src='assets/icons/sticky.gif' alt='' className={styles.stickyIcon} title={t('sticky')} />
@@ -194,7 +196,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
</span>
)}
<span className={styles.replyButton}>
[<Link to={`/p/${subplebbitAddress}/c/${postCid}`}>{t('reply')}</Link>]
[<Link to={`/p/${subplebbitAddress}/${isDescription ? 'description' : isRules ? 'rules' : `c/${postCid}`}`}>{t('reply')}</Link>]
</span>
</span>
<span className={styles.postMenuBtn}>▶</span>
@@ -211,7 +213,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
)}
</blockquote>
)}
{(replies.length > 5 || pinned) && !isInPostPage && (
{(replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
<span className={styles.summary}>
<span className={styles.expandButtonWrapper}>
<span className={styles.expandButton} />
@@ -233,7 +235,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
);
};
const ReplyMobile = ({ reply }: Comment) => {
const ReplyMobile = ({ reply }: any) => {
const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {};
const { displayName, shortAddress } = author || {};
@@ -288,10 +290,11 @@ const ReplyMobile = ({ reply }: Comment) => {
);
};
const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => {
const PostMobile = ({ post, showAllReplies }: PostProps) => {
const { t } = useTranslation();
const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {};
const { address, displayName, shortAddress } = author || {};
const { isDescription, isRules } = post || {}; // custom properties, not from api
const linkCount = useCountLinksInReplies(post);
const isInPostPage = isPostPageView(useLocation().pathname, useParams());
@@ -317,8 +320,8 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
...
</span>
<span className={styles.nameBlock}>
<span className={styles.name}>{displayName || 'Anonymous'} </span>
<span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>
<span className={`${styles.name} ${(isDescription || isRules) && styles.capcodeMod}`}>{displayName || 'Anonymous'} </span>
{!(isDescription || isRules) && <span className={styles.address}>(u/{shortAddress || address?.slice(0, 12) + '...'})</span>}
{title && (
<>
<br />
@@ -327,8 +330,13 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
)}
</span>
<span className={styles.dateTimePostNum}>
{getFormattedDate(timestamp)} <span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
{getFormattedDate(timestamp)}{' '}
{!(isDescription || isRules) && (
<>
<span className={styles.linkToPost}>c/</span>
<span className={styles.replyToPost}>{shortCid}</span>
</>
)}
</span>
</div>
{hasThumbnail && (
@@ -357,7 +365,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
{!isInPostPage && (
<div className={styles.postLink}>
<span className={styles.info}>
{replyCount} Replies
{replyCount > 0 && `${replyCount} Replies`}
{linkCount > 0 && ` / ${linkCount} Links`}
</span>
<Link to={`/p/${subplebbitAddress}/c/${cid}`} className='button'>
@@ -380,7 +388,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
interface PostProps {
index?: number;
post: Comment;
post: any;
showAllReplies?: boolean;
}
src/themes.css
+18
View File
@@ -100,6 +100,9 @@
--post-mobile-file-info-text-color: #707070;
--post-mobile-content-font-size: 11pt;
/* post capcodes */
--post-capcode-mod-text-color: purple;
/* quotelink */
--post-quotelink-text-color: navy;
--post-quotelink-text-color-hover: red;
@@ -218,6 +221,9 @@
--post-mobile-abbr-font-size: 10pt;
--post-mobile-content-font-size: 11pt;
/* post capcodes */
--post-capcode-mod-text-color: purple;
/* quotelink */
--post-quotelink-text-color: #d00;
--post-quotelink-text-color-hover: #d00;
@@ -314,6 +320,9 @@
--post-mobile-abbr-font-size: 12pt;
--post-mobile-content-font-size: 13pt;
/* post capcodes */
--post-capcode-mod-text-color: purple;
/* quotelink */
--post-quotelink-text-color: navy;
--post-quotelink-text-color-hover: red;
@@ -423,6 +432,9 @@
--post-mobile-abbr-font-size: 12pt;
--post-mobile-content-font-size: 13pt;
/* post capcodes */
--post-capcode-mod-text-color: purple;
/* quotelink */
--post-quotelink-text-color: #d00;
--post-quotelink-text-color-hover: #d00;
@@ -532,6 +544,9 @@
--post-mobile-abbr-font-size: 10pt;
--post-mobile-content-font-size: 11pt;
/* post capcodes */
--post-capcode-mod-text-color: #81a2be;
/* quotelink */
--post-quotelink-text-color: #5f89ac;
--post-quotelink-text-color-hover: #81a2be;
@@ -635,6 +650,9 @@
--post-mobile-content-font-size: 11pt;
--post-mobile-border-bottom: 1px solid #ccc;
/* post capcodes */
--post-capcode-mod-text-color: #f60;
/* quotelink */
--post-quotelink-text-color: #f60;
--post-quotelink-text-color-hover: #f30;
src/views/subplebbit/subplebbit.module.css
+2 -12
View File
@@ -1,13 +1,3 @@
.debug {
position: fixed;
top: 50px;
right: 0;
padding: 0.5em;
}
.debug select {
margin: 2px;
border: var(--select-border);
background-color: var(--select-background-color);
color: var(--select-color);
.footer {
padding-top: 10px;
}
src/views/subplebbit/subplebbit.tsx
+36 -1
View File
@@ -18,7 +18,36 @@ const Subplebbit = () => {
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const subplebbit = useSubplebbit({ subplebbitAddress });
const { shortAddress, state, title } = subplebbit || {};
const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {};
const descriptionPost = useMemo(
() => ({
isDescription: true,
subplebbitAddress,
timestamp: createdAt,
author: { displayName: '## Board Mods' },
content: description,
link: suggested?.avatarUrl,
title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!',
pinned: true,
locked: true,
}),
[subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress],
);
const rulesPost = useMemo(
() => ({
isRules: true,
subplebbitAddress,
timestamp: createdAt,
author: { displayName: '## Board Mods' },
content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
title: 'Rules',
pinned: true,
locked: true,
}),
[subplebbitAddress, createdAt, rules],
);
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
@@ -56,6 +85,12 @@ const Subplebbit = () => {
return (
<div className={styles.content}>
{createdAt && (
<>
{rules && rules.length > 0 && <Post post={rulesPost} />}
{description && description.length > 0 && <Post post={descriptionPost} />}
</>
)}
<Virtuoso
increaseViewportBy={{ bottom: 1200, top: 1200 }}
totalCount={feed?.length || 0}