From 087d4ab738967d460e392daee291c220759bc473 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 2 Apr 2024 16:42:36 +0200 Subject: [PATCH 01/12] fix(use-replies.ts): flatten comment pages --- src/hooks/use-replies.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/hooks/use-replies.ts b/src/hooks/use-replies.ts index 1c6403f8..a7012212 100644 --- a/src/hooks/use-replies.ts +++ b/src/hooks/use-replies.ts @@ -1,27 +1,29 @@ import { useMemo, useCallback } from 'react'; import { Comment, useAccountComments } from '@plebbit/plebbit-react-hooks'; +import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'; const useRepliesAndAccountReplies = (comment: Comment) => { // filter only the parent cid const filter = useCallback((accountComment: Comment) => accountComment.parentCid === (comment?.cid || 'n/a'), [comment?.cid]); const { accountComments } = useAccountComments({ filter }); + const flattenedReplies = useMemo(() => flattenCommentsPages(comment.replies), [comment.replies]); // the account's replies have a delay before getting published, so get them locally from accountComments instead const accountRepliesNotYetPublished = useMemo(() => { - const replies = comment?.replies?.pages?.topAll?.comments || []; + const replies = flattenedReplies || []; const replyCids = new Set(replies.map((reply: Comment) => reply?.cid)); // filter out the account comments already in comment.replies, so they don't appear twice return accountComments.filter((accountReply) => !replyCids.has(accountReply?.cid)); - }, [comment?.replies?.pages?.topAll?.comments, accountComments]); + }, [flattenedReplies, accountComments]); const repliesAndNotYetPublishedReplies = useMemo(() => { return [ // put the author's unpublished replies at the top, latest first (reverse) ...accountRepliesNotYetPublished.reverse(), // put the published replies after, - ...(comment?.replies?.pages?.topAll?.comments || []), + ...(flattenedReplies || []), ]; - }, [comment?.replies?.pages?.topAll?.comments, accountRepliesNotYetPublished]); + }, [flattenedReplies, accountRepliesNotYetPublished]); return repliesAndNotYetPublishedReplies; }; From dcd29a46bb4032a3de934f3409a643a5dd5b3e5c Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 2 Apr 2024 17:00:36 +0200 Subject: [PATCH 02/12] feat(app): add post page --- src/app.tsx | 2 + src/components/post/post.tsx | 206 ++++++++++++----------- src/views/post-page/index.ts | 1 + src/views/post-page/post-page.module.css | 0 src/views/post-page/post-page.tsx | 19 +++ 5 files changed, 126 insertions(+), 102 deletions(-) create mode 100644 src/views/post-page/index.ts create mode 100644 src/views/post-page/post-page.module.css create mode 100644 src/views/post-page/post-page.tsx diff --git a/src/app.tsx b/src/app.tsx index b86c0056..dc4e1f76 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -6,6 +6,7 @@ import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits'; import useTheme from './hooks/use-theme'; import styles from './app.module.css'; import Home from './views/home'; +import PostPage from './views/post-page'; import Settings from './views/settings'; import Subplebbit from './views/subplebbit'; import BoardNav from './components/board-nav'; @@ -67,6 +68,7 @@ const App = () => { } /> }> } /> + } /> } /> diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 8d450319..de5f89ee 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -10,7 +10,7 @@ import styles from './post.module.css'; import Markdown from '../markdown'; import Media from '../media'; -const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => { +const ReplyDesktop = ({ reply }: Comment) => { const { t } = useTranslation(); const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; @@ -20,79 +20,77 @@ const ReplyDesktop = ({ index, reply }: { index: number; reply: Comment }) => { const [showThumbnail, setShowThumbnail] = useState(true); return ( - index < 5 && ( -
-
{'>>'}
-
-
- - - - - {displayName || 'Anonymous'} - (u/{shortAddress}) - - {getFormattedDate(timestamp)} - - - - c/ - - - {shortCid} - +
+
{'>>'}
+
+
+ + + + + {displayName || 'Anonymous'} + (u/{shortAddress}) + + {getFormattedDate(timestamp)} + + + + c/ + + + {shortCid} - {pinned && ( - - - - )} - ▶ -
- {link && ( -
-
- {t('link')}:{' '} - - {link.length > 30 ? link.slice(0, 30) + '...' : link} - - {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( - - {' '} - [ - setShowThumbnail(true)}> - {t('close')} - - ] + {pinned && ( + + + + )} + + ▶ +
+ {link && ( +
+
+ {t('link')}:{' '} + + {link.length > 30 ? link.slice(0, 30) + '...' : link} + + {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( + + {' '} + [ + setShowThumbnail(true)}> + {t('close')} - )} -
- {hasThumbnail && ( - + ] + )}
- )} - {content && ( -
- -
- )} -
+ {hasThumbnail && ( + + )} +
+ )} + {content && ( +
+ +
+ )}
- ) +
); }; -const PostDesktop = ({ post }: Comment) => { +const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; @@ -206,7 +204,7 @@ const PostDesktop = ({ post }: Comment) => { )} {!pinned && - replies.map((reply, index) => ( + replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -215,7 +213,7 @@ const PostDesktop = ({ post }: Comment) => { ); }; -const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => { +const ReplyMobile = ({ reply }: Comment) => { const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; @@ -224,43 +222,41 @@ const ReplyMobile = ({ index, reply }: { index: number; reply: Comment }) => { const [showThumbnail, setShowThumbnail] = useState(true); return ( - index < 5 && ( -
-
-
-
- ... - - {displayName || 'Anonymous'} - (u/{shortAddress}) - - - {getFormattedDate(timestamp)} c/ - {shortCid} - -
- {hasThumbnail && ( - - )} -
- -
+
+
+
+
+ ... + + {displayName || 'Anonymous'} + (u/{shortAddress}) + + + {getFormattedDate(timestamp)} c/ + {shortCid} +
+ {hasThumbnail && ( + + )} +
+ +
- ) +
); }; -const PostMobile = ({ post }: Comment) => { +const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; const linkCount = useCountLinksInReplies(post); @@ -334,7 +330,7 @@ const PostMobile = ({ post }: Comment) => {
{!pinned && - replies.map((reply, index) => ( + replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -344,12 +340,18 @@ const PostMobile = ({ post }: Comment) => { ); }; -const Post = ({ post }: Comment) => { +interface PostProps { + index?: number; + post: Comment; + showAllReplies?: boolean; +} + +const Post = ({ post, showAllReplies = false }: PostProps) => { return (
- - + +
); diff --git a/src/views/post-page/index.ts b/src/views/post-page/index.ts new file mode 100644 index 00000000..223b2106 --- /dev/null +++ b/src/views/post-page/index.ts @@ -0,0 +1 @@ +export { default } from './post-page'; diff --git a/src/views/post-page/post-page.module.css b/src/views/post-page/post-page.module.css new file mode 100644 index 00000000..e69de29b diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx new file mode 100644 index 00000000..56be8b03 --- /dev/null +++ b/src/views/post-page/post-page.tsx @@ -0,0 +1,19 @@ +import { useComment } from '@plebbit/plebbit-react-hooks'; +import { useParams } from 'react-router-dom'; +import Post from '../../components/post/post'; +import styles from './post-page.module.css'; + +const PostPage = () => { + const params = useParams(); + const { commentCid } = params; + + const post = useComment({ commentCid }); + + return ( +
+ +
+ ); +}; + +export default PostPage; From 14a79ee3324d2e4003b25b5e2b2e059b4baf6f2f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 3 Apr 2024 16:24:57 +0200 Subject: [PATCH 03/12] add reply quotelink, update mobile themes --- src/components/media/media.module.css | 4 +- src/components/post/post.module.css | 15 ++++ src/components/post/post.tsx | 51 ++++++++---- src/themes.css | 110 ++++++++++++++++++++++++-- src/views/settings/settings.tsx | 11 +-- 5 files changed, 159 insertions(+), 32 deletions(-) diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css index cd1f01bf..d916205c 100644 --- a/src/components/media/media.module.css +++ b/src/components/media/media.module.css @@ -1,5 +1,5 @@ .thumbnailBig { - background-color: var(--post-thumbnail-background-color); + background-color: var(--media-thumbnail-background-color); width: var(--width); height: var(--height); margin: 3px 20px 5px 0; @@ -9,7 +9,7 @@ } .thumbnailSmall { - background-color: var(--post-thumbnail-background-color); + background-color: var(--media-thumbnail-background-color); width: var(--width); height: var(--height); margin: 3px 10px 5px 5px; diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index ea7ac08b..fc92cc59 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -202,7 +202,9 @@ .postMobile .postInfo { overflow: hidden; border-bottom: var(--post-mobile-info-border-bottom); + border-top: var(--post-mobile-info-border-top); background-color: var(--post-mobile-info-background-color); + color: var(--post-mobile-info-text-color); padding: 5px; clear: left; } @@ -303,12 +305,23 @@ padding: 3px 3px 0 0; } +.quoteLink { + color: var(--post-quotelink-text-color); + text-decoration: var(--post-quotelink-text-decoration); +} + +.quoteLink:hover { + color: var(--post-quotelink-text-color-hover); + text-decoration: var(--post-quotelink-text-decoration-hover); +} + .replyMobile { padding-top: 7px; } .replyMobile .replyContainer { background-color: var(--post-mobile-background-color); + border-bottom: var(--post-mobile-border-bottom); } /* clearfix to the container of the floatied elements to contain them */ @@ -320,8 +333,10 @@ .replyMobile .postInfo { padding: 5px; + border-top: var(--post-mobile-info-border-top); border-bottom: var(--post-mobile-info-border-bottom); background-color: var(--post-mobile-info-background-color); + color: var(--post-mobile-info-text-color); } .replyMobile .postInfo .postMenuBtn { diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index de5f89ee..5c386675 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { Link } 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'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; @@ -12,13 +13,15 @@ import Media from '../media'; const ReplyDesktop = ({ reply }: Comment) => { const { t } = useTranslation(); - const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {}; + const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; const commentMediaInfo = getCommentMediaInfoMemoized(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); + const isReplyingToReply = postCid !== parentCid; + return (
{'>>'}
@@ -54,7 +57,7 @@ const ReplyDesktop = ({ reply }: Comment) => {
{t('link')}:{' '} - {link.length > 30 ? link.slice(0, 30) + '...' : link} + {link.length > 30 ? link?.slice(0, 30) + '...' : link} {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( @@ -82,6 +85,14 @@ const ReplyDesktop = ({ reply }: Comment) => { )} {content && (
+ {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + +
+ + )}
)} @@ -94,8 +105,8 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; - const displayTitle = title && title.length > 75 ? title.slice(0, 75) + '...' : title; - const displayContent = content && content.length > 1000 ? content.slice(0, 1000) + '(...)' : content; + const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; + const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const commentMediaInfo = getCommentMediaInfoMemoized(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -120,7 +131,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
{t('link')}:{' '} - {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url} + {commentMediaInfo.url.length > 30 ? commentMediaInfo?.url?.slice(0, 30) + '...' : commentMediaInfo?.url} {' '} ({commentMediaInfo?.type}) {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( @@ -204,7 +215,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: )} {!pinned && - replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -214,13 +225,15 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: }; const ReplyMobile = ({ reply }: Comment) => { - const { author, content, link, linkHeight, linkWidth, pinned, shortCid, subplebbitAddress, timestamp } = reply || {}; + const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; const commentMediaInfo = getCommentMediaInfoMemoized(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); const [showThumbnail, setShowThumbnail] = useState(true); + const isReplyingToReply = postCid !== parentCid; + return (
@@ -247,9 +260,19 @@ const ReplyMobile = ({ reply }: Comment) => { setShowThumbnail={setShowThumbnail} /> )} -
- -
+ {content && ( +
+ {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + +
+ + )} + +
+ )}
@@ -260,8 +283,8 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; const linkCount = useCountLinksInReplies(post); - const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title; - const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content; + const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; + const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) : content; const commentMediaInfo = getCommentMediaInfoMemoized(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -283,7 +306,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b {displayName || 'Anonymous'} - (u/{shortAddress || address.slice(0, 12) + '...'}) + (u/{shortAddress || address?.slice(0, 12) + '...'}) {title && ( <>
@@ -330,7 +353,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
{!pinned && - replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
diff --git a/src/themes.css b/src/themes.css index b8b9910e..daefcc52 100644 --- a/src/themes.css +++ b/src/themes.css @@ -68,6 +68,9 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post desktop */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-red.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-red.png"); @@ -96,8 +99,12 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-file-info-text-color: #707070; --post-mobile-content-font-size: 11pt; - - --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); + + /* quotelink */ + --post-quotelink-text-color: navy; + --post-quotelink-text-color-hover: red; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #e0bfb7; @@ -180,6 +187,9 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post */ --post-hide-button-background-image: url("/public/assets/buttons/post-expand-minus-blue.png"); --post-unhide-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); @@ -197,7 +207,7 @@ --post-mobile-info-border-bottom: 1px solid #b7c5d9; --post-mobile-info-background-color: #c9cde8; --post-mobile-menu-button-color: #34345c; - --post-mobile-name-text-color: purple; + --post-mobile-name-text-color: #117743; --post-mobile-name-font-weight: 700; --post-mobile-subject-text-color: #0f0c5d; --post-mobile-subject-font-weight: 700; @@ -208,7 +218,11 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; - --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* quotelink */ + --post-quotelink-text-color: #d00; + --post-quotelink-text-color-hover: #d00; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #b7c5d9; @@ -271,6 +285,9 @@ --post-content-link-text-decoration: underline; --post-content-link-text-decoration-hover: underline; + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post */ --post-subject-text-color: #cc1105; --post-subject-font-weight: 700; @@ -297,7 +314,11 @@ --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; - --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* quotelink */ + --post-quotelink-text-color: navy; + --post-quotelink-text-color-hover: red; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #e0bfb7; @@ -373,6 +394,9 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post */ --post-subject-text-color: #0f0c5d; --post-subject-font-weight: 700; @@ -383,7 +407,27 @@ --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-blue.png"); - --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post mobile */ + --post-mobile-background-color: #d6daf0; + --post-mobile-info-border-bottom: 1px solid #b7c5d9; + --post-mobile-info-background-color: #c9cde8; + --post-mobile-menu-button-color: #34345c; + --post-mobile-name-text-color: #117743; + --post-mobile-name-font-weight: 700; + --post-mobile-subject-text-color: #0f0c5d; + --post-mobile-subject-font-weight: 700; + --post-mobile-link-background-color: #c9cde8; + --post-mobile-link-border-top: 1px solid #b7c5d9; + --post-mobile-link-info-text-color: #34345c; + --post-mobile-abbr-text-color: #707070; + --post-mobile-abbr-font-size: 12pt; + --post-mobile-content-font-size: 13pt; + + /* quotelink */ + --post-quotelink-text-color: #d00; + --post-quotelink-text-color-hover: #d00; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #b7c5d9; @@ -455,6 +499,9 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; + /* media */ + --media-thumbnail-background-color: rgba(255, 255, 255, 0.01); + /* post */ --post-subject-text-color: #b294bb; --post-subject-font-weight: 700; @@ -465,7 +512,28 @@ --post-greentext-color: #b5bd68; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-dark.png"); - --post-thumbnail-background-color: rgba(255, 255, 255, 0.01); + /* post mobile */ + --post-mobile-background-color: #282A2E; + --post-mobile-info-border-bottom: 1px solid #2D2F33; + --post-mobile-info-background-color: #212326; + --post-mobile-info-text-color: #707070; + --post-mobile-menu-button-color: #81A2BE; + --post-mobile-name-text-color: #117743; + --post-mobile-name-font-weight: 700; + --post-mobile-subject-text-color: #B294BB; + --post-mobile-subject-font-weight: 700; + --post-mobile-link-background-color: #212326; + --post-mobile-link-border-top: 1px solid #2D2F33; + --post-mobile-link-info-text-color: #707070; + --post-mobile-abbr-text-color: #707070; + --post-mobile-abbr-font-size: 10pt; + --post-mobile-content-font-size: 11pt; + + /* quotelink */ + --post-quotelink-text-color: #5f89ac; + --post-quotelink-text-color-hover: #81a2be; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #c5c8c6; @@ -532,6 +600,9 @@ --post-content-link-text-decoration: none; --post-content-link-text-decoration-hover: none; + /* media */ + --media-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post */ --post-subject-text-color: #111; --post-subject-font-weight: 700; @@ -542,7 +613,30 @@ --post-greentext-color: #789922; --post-replies-expand-button-background-image: url("/public/assets/buttons/post-expand-plus-photon.png"); - --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); + /* post mobile */ + --post-mobile-background-color: #eee; + --post-mobile-info-border-bottom: 1px solid #ccc; + --post-mobile-info-border-top: 1px solid #ccc; + --post-mobile-info-background-color: #ddd; + --post-mobile-info-text-color: #707070; + --post-mobile-menu-button-color: #f60; + --post-mobile-name-text-color: #004a99; + --post-mobile-name-font-weight: 700; + --post-mobile-subject-text-color: #111; + --post-mobile-subject-font-weight: 700; + --post-mobile-link-background-color: #ddd; + --post-mobile-link-border-top: 1px solid #ccc; + --post-mobile-link-info-text-color: #333; + --post-mobile-abbr-text-color: #333; + --post-mobile-abbr-font-size: 10pt; + --post-mobile-content-font-size: 11pt; + --post-mobile-border-bottom: 1px solid #ccc; + + /* quotelink */ + --post-quotelink-text-color: #f60; + --post-quotelink-text-color-hover: #f30; + --post-quotelink-text-decoration: underline; + --post-quotelink-text-decoration-hover: underline; /* reply desktop */ --side-arrows-color: #333; diff --git a/src/views/settings/settings.tsx b/src/views/settings/settings.tsx index 0e7beca8..87bd7234 100644 --- a/src/views/settings/settings.tsx +++ b/src/views/settings/settings.tsx @@ -59,14 +59,9 @@ const Settings = () => { )} {commitRef && ( - <> - {' '} - ( - - {commitRef.slice(0, 7)} - - ) - + + {commitRef.slice(0, 7)} + )}
From b5fec98f9d624a7c7ce3a2d5212f37c642bbdaac Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 3 Apr 2024 22:52:06 +0200 Subject: [PATCH 04/12] chore(translations): post a reply, view thread, return, bottom, top --- public/translations/ar/default.json | 9 +++++++-- public/translations/bn/default.json | 9 +++++++-- public/translations/cs/default.json | 9 +++++++-- public/translations/da/default.json | 9 +++++++-- public/translations/de/default.json | 9 +++++++-- public/translations/el/default.json | 9 +++++++-- public/translations/en/default.json | 9 +++++++-- public/translations/es/default.json | 9 +++++++-- public/translations/fa/default.json | 9 +++++++-- public/translations/fi/default.json | 9 +++++++-- public/translations/fil/default.json | 9 +++++++-- public/translations/fr/default.json | 9 +++++++-- public/translations/he/default.json | 7 ++++++- public/translations/hi/default.json | 7 ++++++- public/translations/hu/default.json | 9 +++++++-- public/translations/id/default.json | 9 +++++++-- public/translations/it/default.json | 9 +++++++-- public/translations/ja/default.json | 7 ++++++- public/translations/ko/default.json | 7 ++++++- public/translations/mr/default.json | 7 ++++++- public/translations/nl/default.json | 9 +++++++-- public/translations/no/default.json | 9 +++++++-- public/translations/pl/default.json | 9 +++++++-- public/translations/pt/default.json | 9 +++++++-- public/translations/ro/default.json | 9 +++++++-- public/translations/ru/default.json | 9 +++++++-- public/translations/sq/default.json | 9 +++++++-- public/translations/sv/default.json | 9 +++++++-- public/translations/te/default.json | 9 +++++++-- public/translations/th/default.json | 7 ++++++- public/translations/tr/default.json | 9 +++++++-- public/translations/uk/default.json | 9 +++++++-- public/translations/ur/default.json | 7 ++++++- public/translations/vi/default.json | 9 +++++++-- public/translations/zh/default.json | 7 ++++++- 35 files changed, 237 insertions(+), 62 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index 2e3d7448..e657ac86 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -25,7 +25,7 @@ "home": "الصفحة الرئيسية", "subscribe": "اشتراك", "unsubscribe": "إلغاء الاشتراك", - "close_post_form": "إغلاق نموذج المشاركة", + "close_post_form": "إغلاق نموذج المنشور", "catalog": "فهرس", "all": "الكل", "subscriptions": "الاشتراكات", @@ -36,5 +36,10 @@ "closed": "مغلق", "reply": "رد", "link": "رابط", - "close": "إغلاق" + "close": "إغلاق", + "post_a_reply": "أضف ردًا", + "view_thread": "عرض الموضوع", + "return": "العودة", + "bottom": "القاع", + "top": "أعلى" } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index 599d93d2..6049073d 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -25,7 +25,7 @@ "home": "হোম", "subscribe": "সাবস্ক্রাইব", "unsubscribe": "অনুসংধান করতে পারবেন না", - "close_post_form": "পোস্ট ফর্ম বন্ধ করুন", + "close_post_form": "পোস্ট ফরম বন্ধ করুন", "catalog": "ক্যাটালগ", "all": "সব", "subscriptions": "সাবস্ক্রিপশন", @@ -36,5 +36,10 @@ "closed": "বন্ধ", "reply": "উত্তর", "link": "লিংক", - "close": "বন্ধ করুন" + "close": "বন্ধ করুন", + "post_a_reply": "একটি জবাব পোস্ট করুন", + "view_thread": "থ্রেড দেখুন", + "return": "ফিরে যাও", + "bottom": "নীচে", + "top": "শীর্ষ" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index 5567eec6..bff7b61e 100644 --- a/public/translations/cs/default.json +++ b/public/translations/cs/default.json @@ -25,7 +25,7 @@ "home": "Domovská stránka", "subscribe": "Přihlásit se k odběru", "unsubscribe": "Odebrat odběr", - "close_post_form": "Zavřít formulář příspěvku", + "close_post_form": "Zavřít Formulář Příspěvku", "catalog": "Katalog", "all": "Vše", "subscriptions": "Předplatné", @@ -36,5 +36,10 @@ "closed": "Zavřeno", "reply": "Odpovědět", "link": "Odkaz", - "close": "Zavřít" + "close": "Zavřít", + "post_a_reply": "Zveřejnit Odpověď", + "view_thread": "Zobrazit Vlákno", + "return": "Návrat", + "bottom": "Dno", + "top": "Nahoře" } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index ef42d6c7..e7bed500 100644 --- a/public/translations/da/default.json +++ b/public/translations/da/default.json @@ -25,7 +25,7 @@ "home": "Hjem", "subscribe": "Abonner", "unsubscribe": "Afmeld", - "close_post_form": "Luk postformularen", + "close_post_form": "Luk Indlægsformular", "catalog": "Katalog", "all": "Alle", "subscriptions": "Abonnementer", @@ -36,5 +36,10 @@ "closed": "Lukket", "reply": "Svar", "link": "Link", - "close": "Luk" + "close": "Luk", + "post_a_reply": "Indsend Et Svar", + "view_thread": "Vis Tråd", + "return": "Vende tilbage", + "bottom": "Bund", + "top": "Top" } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index 0b70dbef..bc4d8b25 100644 --- a/public/translations/de/default.json +++ b/public/translations/de/default.json @@ -25,7 +25,7 @@ "home": "Startseite", "subscribe": "Abonnieren", "unsubscribe": "Abbestellen", - "close_post_form": "Postformular schließen", + "close_post_form": "Schließen Sie das Beitrag-Formular", "catalog": "Katalog", "all": "Alle", "subscriptions": "Abonnements", @@ -36,5 +36,10 @@ "closed": "Geschlossen", "reply": "Antworten", "link": "Link", - "close": "Schließen" + "close": "Schließen", + "post_a_reply": "Eine Antwort Posten", + "view_thread": "Thread Anzeigen", + "return": "Zurück", + "bottom": "Unten", + "top": "Oben" } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index 7b8ab0eb..29f4b050 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -25,7 +25,7 @@ "home": "Αρχική σελίδα", "subscribe": "Εγγραφή", "unsubscribe": "Διακοπή συνδρομής", - "close_post_form": "Κλείστε τη φόρμα δημοσίευσης", + "close_post_form": "Κλείστε τη Φόρμα Δημοσίευσης", "catalog": "Κατάλογος", "all": "Όλα", "subscriptions": "Συνδρομές", @@ -36,5 +36,10 @@ "closed": "Κλειστό", "reply": "Απάντηση", "link": "Σύνδεσμος", - "close": "Κλείσιμο" + "close": "Κλείσιμο", + "post_a_reply": "Δημοσίευση Απάντησης", + "view_thread": "Προβολή Νήματος", + "return": "Επιστροφή", + "bottom": "Κάτω", + "top": "Κορυφή" } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index fd7a3ece..fa77a86f 100644 --- a/public/translations/en/default.json +++ b/public/translations/en/default.json @@ -25,7 +25,7 @@ "home": "Home", "subscribe": "Subscribe", "unsubscribe": "Unsubscribe", - "close_post_form": "Close post form", + "close_post_form": "Close Post Form", "catalog": "Catalog", "all": "All", "subscriptions": "Subscriptions", @@ -36,5 +36,10 @@ "closed": "Closed", "reply": "Reply", "link": "Link", - "close": "Close" + "close": "Close", + "post_a_reply": "Post a Reply", + "view_thread": "View Thread", + "return": "Return", + "bottom": "Bottom", + "top": "Top" } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index b074ea9c..c61c2e18 100644 --- a/public/translations/es/default.json +++ b/public/translations/es/default.json @@ -25,7 +25,7 @@ "home": "Inicio", "subscribe": "Suscribirse", "unsubscribe": "Cancelar suscripción", - "close_post_form": "Cerrar formulario de publicación", + "close_post_form": "Cerrar Formulario de Publicación", "catalog": "Catálogo", "all": "Todo", "subscriptions": "Suscripciones", @@ -36,5 +36,10 @@ "closed": "Cerrado", "reply": "Responder", "link": "Enlace", - "close": "Cerrar" + "close": "Cerrar", + "post_a_reply": "Publicar una Respuesta", + "view_thread": "Ver Hilo", + "return": "Regresar", + "bottom": "Fondo", + "top": "Arriba" } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index df7c6d93..5a3b2a27 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -25,7 +25,7 @@ "home": "خانه", "subscribe": "اشتراک", "unsubscribe": "لغو اشتراک", - "close_post_form": "بستن فرم پست", + "close_post_form": "بستن فرم ارسال", "catalog": "کاتالوگ", "all": "همه", "subscriptions": "اشتراک‌ها", @@ -36,5 +36,10 @@ "closed": "بسته", "reply": "پاسخ", "link": "لینک", - "close": "بستن" + "close": "بستن", + "post_a_reply": "ارسال یک پاسخ", + "view_thread": "مشاهده نخ", + "return": "برگشت", + "bottom": "پایین", + "top": "بالا" } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index e18b9cb7..6bb570f7 100644 --- a/public/translations/fi/default.json +++ b/public/translations/fi/default.json @@ -25,7 +25,7 @@ "home": "Koti", "subscribe": "Tilaa", "unsubscribe": "Peruuta tilaus", - "close_post_form": "Sulje postilomake", + "close_post_form": "Sulje Julkaisulomake", "catalog": "Luettelo", "all": "Kaikki", "subscriptions": "Tilaukset", @@ -36,5 +36,10 @@ "closed": "Suljettu", "reply": "Vastaa", "link": "Linkki", - "close": "Sulje" + "close": "Sulje", + "post_a_reply": "Lähetä Vastaus", + "view_thread": "Näytä Ketju", + "return": "Palata", + "bottom": "Pohja", + "top": "Ylös" } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index a9e5500b..cf601990 100644 --- a/public/translations/fil/default.json +++ b/public/translations/fil/default.json @@ -25,7 +25,7 @@ "home": "Bahay", "subscribe": "Mag-subscribe", "unsubscribe": "Huwag mag-subscribe", - "close_post_form": "Isara ang porma ng post", + "close_post_form": "Isara ang Porma ng Post", "catalog": "Katalogo", "all": "Lahat", "subscriptions": "Mga Subscription", @@ -36,5 +36,10 @@ "closed": "Sarado", "reply": "Tumugon", "link": "Link", - "close": "Isara" + "close": "Isara", + "post_a_reply": "Mag-post ng Isang Tugon", + "view_thread": "Tingnan ang Thread", + "return": "Bumalik", + "bottom": "Ilalim", + "top": "Itaas" } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index c280ebdf..623d33ab 100644 --- a/public/translations/fr/default.json +++ b/public/translations/fr/default.json @@ -25,7 +25,7 @@ "home": "Accueil", "subscribe": "S'abonner", "unsubscribe": "Se désabonner", - "close_post_form": "Fermer le formulaire de publication", + "close_post_form": "Fermer le Formulaire de Publication", "catalog": "Catalogue", "all": "Tous", "subscriptions": "Abonnements", @@ -36,5 +36,10 @@ "closed": "Fermé", "reply": "Répondre", "link": "Lien", - "close": "Fermer" + "close": "Fermer", + "post_a_reply": "Publier une Réponse", + "view_thread": "Voir le Fil", + "return": "Retour", + "bottom": "Bas", + "top": "Haut" } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index 01f4291c..1e332521 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -36,5 +36,10 @@ "closed": "סגור", "reply": "הגב", "link": "קישור", - "close": "סגור" + "close": "סגור", + "post_a_reply": "פרסם תגובה", + "view_thread": "הצג אשכול", + "return": "חזור", + "bottom": "תחתית", + "top": "עליון" } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index 41c1cc6c..fd03763d 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -36,5 +36,10 @@ "closed": "बंद", "reply": "जवाब दें", "link": "लिंक", - "close": "बंद करें" + "close": "बंद करें", + "post_a_reply": "एक उत्तर पोस्ट करें", + "view_thread": "थ्रेड देखें", + "return": "वापस", + "bottom": "नीचे", + "top": "ऊपर" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index fa163ed1..f7c557eb 100644 --- a/public/translations/hu/default.json +++ b/public/translations/hu/default.json @@ -25,7 +25,7 @@ "home": "Kezdőlap", "subscribe": "Feliratkozás", "unsubscribe": "Leiratkozás", - "close_post_form": "Bejegyzés űrlap bezárása", + "close_post_form": "Bejegyzés Űrlap Bezárása", "catalog": "Katalógus", "all": "Összes", "subscriptions": "Előfizetések", @@ -36,5 +36,10 @@ "closed": "Zárt", "reply": "Válaszolás", "link": "Hivatkozás", - "close": "Bezárás" + "close": "Bezárás", + "post_a_reply": "Válasz Postázása", + "view_thread": "Téma Megtekintése", + "return": "Visszatérés", + "bottom": "Alja", + "top": "Felső" } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index 713dae0b..3303e68e 100644 --- a/public/translations/id/default.json +++ b/public/translations/id/default.json @@ -25,7 +25,7 @@ "home": "Beranda", "subscribe": "Berlangganan", "unsubscribe": "Berhenti berlangganan", - "close_post_form": "Tutup formulir kiriman", + "close_post_form": "Tutup Formulir Kiriman", "catalog": "Katalog", "all": "Semua", "subscriptions": "Langganan", @@ -36,5 +36,10 @@ "closed": "Tutup", "reply": "Balas", "link": "Tautan", - "close": "Tutup" + "close": "Tutup", + "post_a_reply": "Kirim Balasan", + "view_thread": "Lihat Thread", + "return": "Kembali", + "bottom": "Bawah", + "top": "Atas" } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index f2711100..d0ac4034 100644 --- a/public/translations/it/default.json +++ b/public/translations/it/default.json @@ -25,7 +25,7 @@ "home": "Home", "subscribe": "Iscriviti", "unsubscribe": "Lascia", - "close_post_form": "Chiudi modulo d'invio", + "close_post_form": "Chiudi Modulo d'Invio", "catalog": "Catalogo", "all": "Tutti", "subscriptions": "Iscrizioni", @@ -36,5 +36,10 @@ "closed": "Chiuso", "reply": "Commenta", "link": "Link", - "close": "Chiudi" + "close": "Chiudi", + "post_a_reply": "Invia un Commento", + "view_thread": "Visualizza Thread", + "return": "Indietro", + "bottom": "Vai sotto", + "top": "Vai sopra" } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index c9188154..4b57976e 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -36,5 +36,10 @@ "closed": "閉鎖", "reply": "返信", "link": "リンク", - "close": "閉じる" + "close": "閉じる", + "post_a_reply": "返信を投稿する", + "view_thread": "スレッドを見る", + "return": "戻る", + "bottom": "下へ", + "top": "上へ" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index 211ca353..c949a246 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -36,5 +36,10 @@ "closed": "닫힘", "reply": "답장", "link": "링크", - "close": "닫기" + "close": "닫기", + "post_a_reply": "답글 게시", + "view_thread": "스레드 보기", + "return": "돌아 가기", + "bottom": "하단", + "top": "맨 위로" } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index 5d1e6e45..0fdd4dfb 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -36,5 +36,10 @@ "closed": "बंद", "reply": "प्रतिसाद", "link": "लिंक", - "close": "बंद करा" + "close": "बंद करा", + "post_a_reply": "उत्तर पोस्ट करा", + "view_thread": "थ्रेड पहा", + "return": "परत जा", + "bottom": "खाली", + "top": "वर" } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index bebc2898..fac554be 100644 --- a/public/translations/nl/default.json +++ b/public/translations/nl/default.json @@ -25,7 +25,7 @@ "home": "Home", "subscribe": "Abonneren", "unsubscribe": "Afmelden", - "close_post_form": "Sluit postformulier", + "close_post_form": "Sluit Postformulier", "catalog": "Catalogus", "all": "Alles", "subscriptions": "Abonnementen", @@ -36,5 +36,10 @@ "closed": "Gesloten", "reply": "Antwoord", "link": "Link", - "close": "Sluiten" + "close": "Sluiten", + "post_a_reply": "Een Antwoord Plaatsen", + "view_thread": "Bekijk Thread", + "return": "Terugkeer", + "bottom": "Onderkant", + "top": "Boven" } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index 4ef75474..f2e8eb45 100644 --- a/public/translations/no/default.json +++ b/public/translations/no/default.json @@ -25,7 +25,7 @@ "home": "Hjem", "subscribe": "Abonner", "unsubscribe": "Avslutt abonnement", - "close_post_form": "Lukk postskjema", + "close_post_form": "Lukk Innleggsformular", "catalog": "Katalog", "all": "Alle", "subscriptions": "Abonnementer", @@ -36,5 +36,10 @@ "closed": "Stengt", "reply": "Svar", "link": "Lenke", - "close": "Lukk" + "close": "Lukk", + "post_a_reply": "Legg Inn Et Svar", + "view_thread": "Vis Tråd", + "return": "Retur", + "bottom": "Bunnen", + "top": "Topp" } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index 19d8f858..426226ba 100644 --- a/public/translations/pl/default.json +++ b/public/translations/pl/default.json @@ -25,7 +25,7 @@ "home": "Strona główna", "subscribe": "Subskrybuj", "unsubscribe": "Wypisz się", - "close_post_form": "Zamknij formularz postu", + "close_post_form": "Zamknij Formularz Postu", "catalog": "Katalog", "all": "Wszystkie", "subscriptions": "Subskrypcje", @@ -36,5 +36,10 @@ "closed": "Zamknięty", "reply": "Odpowiedz", "link": "Link", - "close": "Zamknij" + "close": "Zamknij", + "post_a_reply": "Opublikuj Odpowiedź", + "view_thread": "Zobacz Wątek", + "return": "Powrót", + "bottom": "Dół", + "top": "Góra" } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index 3dff89f8..21440f40 100644 --- a/public/translations/pt/default.json +++ b/public/translations/pt/default.json @@ -25,7 +25,7 @@ "home": "Início", "subscribe": "Subscrever", "unsubscribe": "Cancelar subscrição", - "close_post_form": "Fechar formulário de postagem", + "close_post_form": "Fechar Formulário de Publicação", "catalog": "Catálogo", "all": "Todos", "subscriptions": "Inscrições", @@ -36,5 +36,10 @@ "closed": "Fechado", "reply": "Responder", "link": "Link", - "close": "Fechar" + "close": "Fechar", + "post_a_reply": "Publicar uma Resposta", + "view_thread": "Ver Tópico", + "return": "Retorno", + "bottom": "Fundo", + "top": "Topo" } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index 5efc2d71..7ab0c092 100644 --- a/public/translations/ro/default.json +++ b/public/translations/ro/default.json @@ -25,7 +25,7 @@ "home": "Acasă", "subscribe": "Abonare", "unsubscribe": "Dezabonare", - "close_post_form": "Închideți formularul de postare", + "close_post_form": "Închideți Formularul de Postare", "catalog": "Catalog", "all": "Toate", "subscriptions": "Abonamente", @@ -36,5 +36,10 @@ "closed": "Închis", "reply": "Răspunde", "link": "Legătură", - "close": "Închide" + "close": "Închide", + "post_a_reply": "Postează un Răspuns", + "view_thread": "Vizualizați Firul", + "return": "Întoarcere", + "bottom": "Partea de jos", + "top": "Sus" } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index 861ba685..c9895b2b 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -25,7 +25,7 @@ "home": "Главная", "subscribe": "Подписаться", "unsubscribe": "Отписаться", - "close_post_form": "Закрыть форму публикации", + "close_post_form": "Закрыть Форму Публикации", "catalog": "Каталог", "all": "Все", "subscriptions": "Подписки", @@ -36,5 +36,10 @@ "closed": "Закрыто", "reply": "Ответить", "link": "Ссылка", - "close": "Закрыть" + "close": "Закрыть", + "post_a_reply": "Опубликовать Ответ", + "view_thread": "Посмотреть Тему", + "return": "Возвращение", + "bottom": "Низ", + "top": "Верх" } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index de5e2153..a77aa0e2 100644 --- a/public/translations/sq/default.json +++ b/public/translations/sq/default.json @@ -25,7 +25,7 @@ "home": "Faqja kryesore", "subscribe": "Pajtohu", "unsubscribe": "Hiq pajtimin", - "close_post_form": "Mbyllni formularin e postës", + "close_post_form": "Mbyll Formularin e Postës", "catalog": "Katalog", "all": "Të gjitha", "subscriptions": "Abonimet", @@ -36,5 +36,10 @@ "closed": "Mbyllur", "reply": "Përgjigju", "link": "Lidhje", - "close": "Mbylle" + "close": "Mbylle", + "post_a_reply": "Posto një Përgjigje", + "view_thread": "Shiko Thread", + "return": "Kthimi", + "bottom": "Fund", + "top": "Sipër" } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index 47d4594a..8448bffb 100644 --- a/public/translations/sv/default.json +++ b/public/translations/sv/default.json @@ -25,7 +25,7 @@ "home": "Hem", "subscribe": "Prenumerera", "unsubscribe": "Avsluta prenumeration", - "close_post_form": "Stäng inläggsformuläret", + "close_post_form": "Stäng Inläggsformuläret", "catalog": "Katalog", "all": "Allt", "subscriptions": "Prenumerationer", @@ -36,5 +36,10 @@ "closed": "Stängd", "reply": "Svara", "link": "Länk", - "close": "Stäng" + "close": "Stäng", + "post_a_reply": "Posta Ett Svar", + "view_thread": "Visa Tråd", + "return": "Återgång", + "bottom": "Botten", + "top": "Topp" } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index 298c7e79..5b8478dd 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -25,7 +25,7 @@ "home": "హోమ్", "subscribe": "చేరండి", "unsubscribe": "సబ్‌స్క్రిప్షన్ రద్దు చేయండి", - "close_post_form": "పోస్టు ఫారమ్ మూసేయి", + "close_post_form": "పోస్ట్ ఫారం మూసించు", "catalog": "కాటలాగ్", "all": "అన్ని", "subscriptions": "సబ్‌స్క్రిప్షన్‌లు", @@ -36,5 +36,10 @@ "closed": "మూసివేయబడినది", "reply": "స్పందించు", "link": "లింక్", - "close": "మూసి" + "close": "మూసి", + "post_a_reply": "స్పందించండి", + "view_thread": "థ్రెడ్‌ను చూడండి", + "return": "రిటర్న్", + "bottom": "కిందకు", + "top": "మేలే" } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index 67a35584..0ea95319 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -36,5 +36,10 @@ "closed": "ปิด", "reply": "ตอบ", "link": "ลิงก์", - "close": "ปิด" + "close": "ปิด", + "post_a_reply": "โพสต์คำตอบ", + "view_thread": "ดูกระทู้", + "return": "กลับ", + "bottom": "ด้านล่าง", + "top": "ด้านบน" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index 35ebb6c8..08f99d53 100644 --- a/public/translations/tr/default.json +++ b/public/translations/tr/default.json @@ -25,7 +25,7 @@ "home": "Anasayfa", "subscribe": "Abone Ol", "unsubscribe": "Abonelikten çık", - "close_post_form": "Gönderi formunu kapat", + "close_post_form": "Yazı Formunu Kapat", "catalog": "Katalog", "all": "Tümü", "subscriptions": "Abonelikler", @@ -36,5 +36,10 @@ "closed": "Kapalı", "reply": "Yanıtla", "link": "Bağlantı", - "close": "Kapat" + "close": "Kapat", + "post_a_reply": "Yanıtı Yayınla", + "view_thread": "Konuyu Görüntüle", + "return": "Dönüş", + "bottom": "Alt", + "top": "Üst" } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index 394f73c1..554cb5bb 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -25,7 +25,7 @@ "home": "Головна", "subscribe": "Підписатися", "unsubscribe": "Відмовитися від підписки", - "close_post_form": "Закрити форму публікації", + "close_post_form": "Закрити Форму Публікації", "catalog": "Каталог", "all": "Всі", "subscriptions": "Підписки", @@ -36,5 +36,10 @@ "closed": "Закрито", "reply": "Відповісти", "link": "Посилання", - "close": "Закрити" + "close": "Закрити", + "post_a_reply": "Опублікувати Відповідь", + "view_thread": "Переглянути Тему", + "return": "Повернення", + "bottom": "Низ", + "top": "Верхній" } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index 01b2a8e0..c689bac9 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -36,5 +36,10 @@ "closed": "بند", "reply": "جواب دیں", "link": "لنک", - "close": "بند کریں" + "close": "بند کریں", + "post_a_reply": "ایک جواب بھیجیں", + "view_thread": "تھریڈ دیکھیں", + "return": "واپس", + "bottom": "نیچے", + "top": "اوپر" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index bc120e18..663747fd 100644 --- a/public/translations/vi/default.json +++ b/public/translations/vi/default.json @@ -25,7 +25,7 @@ "home": "Trang chủ", "subscribe": "Đăng ký", "unsubscribe": "Hủy đăng ký", - "close_post_form": "Đóng biểu mẫu đăng bài", + "close_post_form": "Đóng Biểu Mẫu Bài Viết", "catalog": "Catalog", "all": "Tất cả", "subscriptions": "Đăng ký", @@ -36,5 +36,10 @@ "closed": "Đóng", "reply": "Trả lời", "link": "Liên kết", - "close": "Đóng" + "close": "Đóng", + "post_a_reply": "Đăng Một Câu Trả Lời", + "view_thread": "Xem Chủ Đề", + "return": "Trở lại", + "bottom": "Đáy", + "top": "Đầu" } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index ef8d7544..940df1d9 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -36,5 +36,10 @@ "closed": "关闭", "reply": "回复", "link": "链接", - "close": "关闭" + "close": "关闭", + "post_a_reply": "发表回复", + "view_thread": "查看线程", + "return": "返回", + "bottom": "底部", + "top": "顶部" } \ No newline at end of file From f5fefd51cf537b41ae7bf14b085505824185f7ef Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 3 Apr 2024 22:52:27 +0200 Subject: [PATCH 05/12] feat(post page): add view specific buttons --- .../board-buttons/board-buttons.module.css | 5 ++ .../board-buttons/board-buttons.tsx | 75 +++++++++++++++---- src/components/post-form/post-form.tsx | 9 ++- src/components/post/post.tsx | 28 ++++--- src/index.css | 1 - src/lib/utils/view-utils.ts | 11 +++ 6 files changed, 101 insertions(+), 28 deletions(-) diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 8f4b9363..87f1fe85 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -5,6 +5,11 @@ .mobileBoardButtons button { margin: 0 2px; + text-transform: capitalize; +} + +.mobileBoardButtons a, .desktopBoardButtons a { + all: unset; } @media (max-width: 640px) { diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 8dc49364..12f54a9d 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -1,6 +1,8 @@ +import { useTranslation } from 'react-i18next'; +import { Link, useLocation, useParams } from 'react-router-dom'; import { useSubscribe } from '@plebbit/plebbit-react-hooks'; import styles from './board-buttons.module.css'; -import { useTranslation } from 'react-i18next'; +import { isPostPageView } from '../../lib/utils/view-utils'; interface BoardButtonsProps { address: string; @@ -11,9 +13,13 @@ const OptionsButton = () => { return ; }; -const CatalogButton = () => { +const CatalogButton = ({ address }: BoardButtonsProps) => { const { t } = useTranslation(); - return ; + return ( + + ); }; const SubscribeButton = ({ address }: BoardButtonsProps) => { @@ -27,28 +33,69 @@ const SubscribeButton = ({ address }: BoardButtonsProps) => { ); }; +const ReturnButton = ({ address }: BoardButtonsProps) => { + const { t } = useTranslation(); + return ( + + ); +}; + +const BottomButton = () => { + const { t } = useTranslation(); + return ( + + ); +}; + export const MobileBoardButtons = ({ address }: BoardButtonsProps) => { + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
- - - + {isInPostPage ? ( +
+ + + +
+ + +
+
+ ) : ( + <> + + + + + )}
); }; export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => { + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
- [ - - ] [ - ] - - [ - ] - + {isInPostPage ? ( + <> + [] [] [] [] + + [] + + + ) : ( + <> + [] [] + + [] + + + )}
); }; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index b3f80b6e..c2494a9e 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,6 +1,8 @@ import { useState } from 'react'; -import styles from './post-form.module.css'; import { useTranslation } from 'react-i18next'; +import styles from './post-form.module.css'; +import { isPostPageView } from '../../lib/utils/view-utils'; +import { useLocation, useParams } from 'react-router-dom'; export interface PostFormProps { address: string | undefined; @@ -9,19 +11,20 @@ export interface PostFormProps { const PostForm = ({ address }: PostFormProps) => { const { t } = useTranslation(); const [showForm, setShowForm] = useState(false); + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return ( <>
[ ]
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 5c386675..4b3bad81 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,10 +1,11 @@ import { useState } from 'react'; -import { Link } from 'react-router-dom'; +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'; +import { isPostPageView } from '../../lib/utils/view-utils'; import useCountLinksInReplies from '../../hooks/use-count-links-in-replies'; import useReplies from '../../hooks/use-replies'; import styles from './post.module.css'; @@ -280,6 +281,7 @@ const ReplyMobile = ({ reply }: Comment) => { }; const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { + const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; const linkCount = useCountLinksInReplies(post); @@ -292,6 +294,10 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const replies = useReplies(post); + const location = useLocation(); + const params = useParams(); + const isInPostPage = isPostPageView(location.pathname, params); + return (
@@ -342,15 +348,17 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b )}
-
- - {replyCount} Replies - {linkCount > 0 && ` / ${linkCount} Links`} - - - View Thread - -
+ {!isInPostPage && ( +
+ + {replyCount} Replies + {linkCount > 0 && ` / ${linkCount} Links`} + + + {t('view_thread')} + +
+ )}
{!pinned && replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( diff --git a/src/index.css b/src/index.css index 78fe011c..cf18ea6e 100644 --- a/src/index.css +++ b/src/index.css @@ -24,7 +24,6 @@ hr { @media (max-width: 640px) { .button { - text-transform: capitalize; font-size: var(--button-font-size-mobile); font-weight: var(--button-font-weight-mobile); font-family: var(--button-font-family-mobile); diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts index 646a5d3e..ce1ea21e 100644 --- a/src/lib/utils/view-utils.ts +++ b/src/lib/utils/view-utils.ts @@ -1,3 +1,14 @@ +export type ParamsType = { + commentCid?: string; + subplebbitAddress?: string; +}; + export const isHomeView = (pathname: string): boolean => { return pathname === '/'; }; + +export const isPostPageView = (pathname: string, params: ParamsType): boolean => { + // some subs might use emojis in their address, so we need to decode the pathname + const decodedPathname = decodeURIComponent(pathname); + return params.subplebbitAddress && params.commentCid ? decodedPathname.startsWith(`/p/${params.subplebbitAddress}/c/${params.commentCid}`) : false; +}; From e960f791b98063da7f2b3bde40df41f5e8b80712 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 4 Apr 2024 11:41:17 +0200 Subject: [PATCH 06/12] feat(post page): scroll to top, show full content, no hide thread --- src/components/post/post.tsx | 28 ++++++++++++++++------------ src/views/post-page/post-page.tsx | 5 +++++ 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 4b3bad81..d43a696f 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -106,8 +106,11 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; + + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); + const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title; - const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; + const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content; const commentMediaInfo = getCommentMediaInfoMemoized(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -124,9 +127,11 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
- - - + {!isInPostPage && ( + + + + )} {commentMediaInfo?.url && (
@@ -198,7 +203,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: {content && (
- {content.length > 1000 && ( + {content.length > 1000 && !isInPostPage && (
Comment too long. Click here to view the full text. @@ -206,7 +211,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: )}
)} - {(replies.length > 5 || pinned) && ( + {(replies.length > 5 || pinned) && !isInPostPage && ( @@ -215,8 +220,9 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: Click here to view. )} - {!pinned && - replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + {!(pinned && !isInPostPage) && + replies && + replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
@@ -294,9 +300,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const replies = useReplies(post); - const location = useLocation(); - const params = useParams(); - const isInPostPage = isPostPageView(location.pathname, params); + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
@@ -339,7 +343,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b {content && (
- {content.length > 1000 && ( + {content.length > 1000 && !isInPostPage && (
Comment too long. Click here to view the full text. diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx index 56be8b03..d31cbddc 100644 --- a/src/views/post-page/post-page.tsx +++ b/src/views/post-page/post-page.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import { useComment } from '@plebbit/plebbit-react-hooks'; import { useParams } from 'react-router-dom'; import Post from '../../components/post/post'; @@ -9,6 +10,10 @@ const PostPage = () => { const post = useComment({ commentCid }); + useEffect(() => { + window.scrollTo(0, 0); + }, []); + return (
From 4cef89eee31a4e47ff6e36f28cf9e2c7f7145f36 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 4 Apr 2024 12:06:37 +0200 Subject: [PATCH 07/12] style(post page): add padding to buttons on mobile --- src/components/board-buttons/board-buttons.module.css | 5 +++++ src/components/board-buttons/board-buttons.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 87f1fe85..06028aaf 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -12,6 +12,11 @@ all: unset; } +.mobilePostPageButtonsSecondRow { + padding-top: 5px; + padding-bottom: 20px; +} + @media (max-width: 640px) { .desktopBoardButtons { display: none; diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 12f54a9d..6d5f1b0f 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -60,7 +60,7 @@ export const MobileBoardButtons = ({ address }: BoardButtonsProps) => { -
+
From af752159383b94d7c228e6e16f2518744b5ee6a8 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sat, 6 Apr 2024 18:37:50 +0200 Subject: [PATCH 08/12] fix(post): remove margin to fix virtuoso glitch on desktop --- src/components/post/post.module.css | 14 +++++++++++--- src/components/post/post.tsx | 8 +++++--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index fc92cc59..e055e393 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -10,12 +10,12 @@ padding: 0.5em 0; /* instead of using margin, wrap with padding */ } -.threadHideButtonWrapper { +.hideButtonWrapper { padding-right: 5px; float: left; } -.postDesktop .threadHideButton { +.postDesktop .hideButton { background-repeat: no-repeat; background-position: center; width: 18px; @@ -23,6 +23,7 @@ display: inline-block; image-rendering: pixelated; cursor: pointer; + transform: translateY(-1px); } /* clearfix to the container of the floatied elements to contain them */ @@ -155,9 +156,17 @@ .postDesktop .summary { padding-top: 10px; + padding-left: 23px; + position: relative; color: var(--post-mobile-abbr-text-color); } +.postDesktop .summary .expandButtonWrapper { + position: absolute; + top: 8px; + left: 2px; +} + .postDesktop .summary .expandButton { background-image: var(--post-replies-expand-button-background-image); background-repeat: no-repeat; @@ -166,7 +175,6 @@ height: 18px; display: inline-block; image-rendering: pixelated; - margin: 0 3px -4px 2px; cursor: pointer; } diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index d43a696f..d3c5149d 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -128,8 +128,8 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies:
{!isInPostPage && ( - - + + )} {commentMediaInfo?.url && ( @@ -213,7 +213,9 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: )} {(replies.length > 5 || pinned) && !isInPostPage && ( - + + + {repliesCount} replies {linkCount > 0 && `and ${linkCount} links`} omitted.{' '} From f4dba57945cc70e624d57cf770f06a5fb9294e4d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 7 Apr 2024 12:21:53 +0200 Subject: [PATCH 09/12] perf(app): memoize board layout, update subplebbit view --- src/app.tsx | 12 ++++++------ src/views/subplebbit/subplebbit.tsx | 11 ++++------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index dc4e1f76..292844ed 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,7 @@ -import { useEffect } from 'react'; +import React, { useEffect } from 'react'; import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; import { isHomeView } from './lib/utils/view-utils'; -import { Subplebbit as SubplebbitType, useSubplebbits } from '@plebbit/plebbit-react-hooks'; +import { Subplebbit as SubplebbitType, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits'; import useTheme from './hooks/use-theme'; import styles from './app.module.css'; @@ -20,9 +20,9 @@ interface BoardLayoutProps { subplebbits: (SubplebbitType | undefined)[]; } -const BoardLayout = ({ subplebbits }: BoardLayoutProps) => { +const BoardLayout = React.memo(({ subplebbits }: BoardLayoutProps) => { const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); - const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress); + const subplebbit = useSubplebbit({ subplebbitAddress }); const { address, createdAt, title } = subplebbit || {}; return ( @@ -40,7 +40,7 @@ const BoardLayout = ({ subplebbits }: BoardLayoutProps) => { ); -}; +}); const App = () => { const [theme] = useTheme(); @@ -67,7 +67,7 @@ const App = () => { } /> }> - } /> + } /> } /> } /> diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx index b47192b5..bf3b00ed 100644 --- a/src/views/subplebbit/subplebbit.tsx +++ b/src/views/subplebbit/subplebbit.tsx @@ -1,26 +1,23 @@ import { useEffect, useMemo, useRef } from 'react'; import { useParams } from 'react-router-dom'; -import { Subplebbit as SubplebbitType, useFeed } from '@plebbit/plebbit-react-hooks'; +import { useFeed, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso'; import { useTranslation } from 'react-i18next'; import styles from './subplebbit.module.css'; import useFeedStateString from '../../hooks/use-feed-state-string'; import LoadingEllipsis from '../../components/loading-ellipsis'; import Post from '../../components/post'; + const lastVirtuosoStates: { [key: string]: StateSnapshot } = {}; -interface SubplebbitProps { - subplebbits: (SubplebbitType | undefined)[]; -} - -const Subplebbit = ({ subplebbits }: SubplebbitProps) => { +const Subplebbit = () => { const { t } = useTranslation(); const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[]; const sortType = 'active'; const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType }); - const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress); + const subplebbit = useSubplebbit({ subplebbitAddress }); const { shortAddress, state, title } = subplebbit || {}; const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); From af5a5443a717755f94a4819909fd0ae280485ac3 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 7 Apr 2024 17:19:59 +0200 Subject: [PATCH 10/12] perf(markdown): memoize --- src/components/markdown/markdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx index 740156dc..ec4ef6ec 100644 --- a/src/components/markdown/markdown.tsx +++ b/src/components/markdown/markdown.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React, { useMemo } from 'react'; import styles from './markdown.module.css'; import ReactMarkdown from 'react-markdown'; import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'; @@ -77,4 +77,4 @@ const Markdown = ({ content }: MarkdownProps) => { ); }; -export default Markdown; +export default React.memo(Markdown); From e0091371847314651279ea4b179c9e7574156c34 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 7 Apr 2024 18:16:12 +0200 Subject: [PATCH 11/12] Update post.tsx --- src/components/post/post.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index d3c5149d..30c2c673 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -292,9 +292,11 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; + const linkCount = useCountLinksInReplies(post); + const isInPostPage = isPostPageView(useLocation().pathname, useParams()); const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title; - const displayContent = content && content.length > 1000 ? content?.slice(0, 1000) : content; + const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) : content; const commentMediaInfo = getCommentMediaInfoMemoized(post); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -302,8 +304,6 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b const replies = useReplies(post); - const isInPostPage = isPostPageView(useLocation().pathname, useParams()); - return (
@@ -366,8 +366,9 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b
)}
- {!pinned && - replies?.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + {!(pinned && !isInPostPage) && + replies && + replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
From 84dae0a19bfc46205091b2b0677308b0ac6c0caa Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 7 Apr 2024 18:30:36 +0200 Subject: [PATCH 12/12] fix(post mobile): clearfix for floating media --- src/components/post/post.module.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index e055e393..be105169 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -26,7 +26,7 @@ transform: translateY(-1px); } -/* clearfix to the container of the floatied elements to contain them */ +/* clearfix to contain float elements */ .postDesktop::after { content: ""; display: table; @@ -188,6 +188,13 @@ text-decoration: var(--post-content-link-text-decoration-hover); } +/* clearfix to contain float elements */ +.postMobile .postOp::after { + content: ""; + display: table; + clear: both; +} + .postMobile hr { padding-bottom: 30px; } @@ -332,7 +339,7 @@ border-bottom: var(--post-mobile-border-bottom); } -/* clearfix to the container of the floatied elements to contain them */ +/* clearfix to contain float elements */ .replyMobile .replyContainer::after { content: ""; display: table;