diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css
index 0ff6cc29..60adcd93 100644
--- a/src/components/post/post.module.css
+++ b/src/components/post/post.module.css
@@ -191,6 +191,10 @@
color: var(--post-mobile-abbr-text-color);
}
+.stateString {
+ color: var(--post-mobile-abbr-text-color);
+}
+
.postDesktop .summary .expandButtonWrapper {
position: absolute;
top: 8px;
diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx
index 8fb371c9..7762c7fa 100644
--- a/src/components/post/post.tsx
+++ b/src/components/post/post.tsx
@@ -61,6 +61,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
+ const stateString = useStateString(post);
+ const loadingString = stateString && (
+
{stateString !== 'Failed' ? : stateString}
+ );
+
return (
@@ -154,9 +159,11 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
)}
-
- [{t('reply')}]
-
+ {!isInPostPage && (
+
+ [{t('reply')}]
+
+ )}
}} />
)}
+ {!cid && state === 'pending' && (
+ <>
+
+ {loadingString}
+
+ )}
)}
- {(replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
+ {!isDescription && !isRules && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
@@ -199,6 +212,8 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
)}
{!(pinned && !isInPostPage) &&
+ !isDescription &&
+ !isRules &&
replies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
@@ -373,6 +388,11 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
const account = useAccount();
const accountShortAddress = account?.author?.shortAddress;
+ const stateString = useStateString(post);
+ const loadingString = stateString && (
+
{stateString !== 'Failed' ? : stateString}
+ );
+
return (
@@ -446,6 +466,12 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
}} />
)}
+ {!cid && state === 'pending' && (
+ <>
+
+ {loadingString}
+
+ )}
)}
@@ -462,6 +488,8 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
)}
{!(pinned && !isInPostPage) &&
+ !isDescription &&
+ !isRules &&
replies &&
(showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
diff --git a/src/lib/utils/time-utils.ts b/src/lib/utils/time-utils.ts
index 64bbb893..05ca793b 100644
--- a/src/lib/utils/time-utils.ts
+++ b/src/lib/utils/time-utils.ts
@@ -1,8 +1,10 @@
+import i18next from 'i18next';
+
export const getFormattedDate = (commentTimestamp: number) => {
if (commentTimestamp === undefined || isNaN(commentTimestamp)) {
return '';
}
- const locale = Intl.DateTimeFormat().resolvedOptions().locale;
+ const locale = i18next.language || 'en';
const string = new Intl.DateTimeFormat(locale, {
hour12: false,
year: '2-digit',
diff --git a/src/lib/utils/view-utils.ts b/src/lib/utils/view-utils.ts
index 38909d21..230e81e5 100644
--- a/src/lib/utils/view-utils.ts
+++ b/src/lib/utils/view-utils.ts
@@ -34,3 +34,14 @@ export const isCatalogView = (pathname: string, params: ParamsType): boolean =>
export const isPendingPostView = (pathname: string, params: ParamsType): boolean => {
return pathname === `/profile/${params.accountCommentIndex}`;
};
+
+export const isNotFoundView = (pathname: string, params: ParamsType): boolean => {
+ return (
+ !isHomeView(pathname) &&
+ !isDescriptionView(pathname, params) &&
+ !isRulesView(pathname, params) &&
+ !isPostPageView(pathname, params) &&
+ !isCatalogView(pathname, params) &&
+ !isPendingPostView(pathname, params)
+ );
+};
diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css
index b67a9550..2c49ea45 100644
--- a/src/views/home/home.module.css
+++ b/src/views/home/home.module.css
@@ -32,6 +32,7 @@
.boxBar, .infoboxBar {
padding-left: 0.5em;
line-height: 2em;
+ text-transform: capitalize;
}
.infoboxBar {
@@ -253,6 +254,7 @@
.stats .stat {
display: inline-block;
width: 33%;
+ text-transform: capitalize;
}
@media (max-width: 640px) {
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
index 90a38175..417078a4 100644
--- a/src/views/home/home.tsx
+++ b/src/views/home/home.tsx
@@ -76,12 +76,13 @@ const InfoBox = () => {
const Board = ({ isOffline, subplebbit }: { isOffline: boolean; subplebbit: Subplebbit }) => {
const { t } = useTranslation();
const { address, title, tags } = subplebbit;
- const isSubNsfw = tags.includes('porn') || tags.includes('gore') || tags.includes('violence') || tags.includes('vulgar');
+ const nsfwTags = ['adult', 'gore'];
+ const nsfwTag = tags.find((tag: string) => nsfwTags.includes(tag));
return (
{title || address}
- {isSubNsfw && ({t('nsfw')})}
+ {nsfwTag && ({t(nsfwTag)})}
{isOffline && }
);
@@ -104,7 +105,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
const isSubOffline = (address: string) => {
const subplebbit = subplebbits && subplebbits.find((sub: Subplebbit) => sub?.address === address);
- const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 30;
+ const isOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
return isOffline;
};
@@ -122,7 +123,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
))}
-
Projects
+
{t('projects')}
{projectsSubs.map((sub) => (
@@ -130,7 +131,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
-
Interests
+
{t('interests')}
{interestsSubs.map((sub) => (
@@ -138,13 +139,13 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
-
Random
+
{t('random')}
{randomSubs.map((sub) => (
))}
-
International
+
{t('international')}
{internationalSubs.map((sub) => (
@@ -157,10 +158,10 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
{subscriptions.length > 0
? subscriptions.map((address: string, index: number) => (
- p/{address}
+ {address}
))
- : 'Not subscribed to any board.'}
+ : t('not_subscribed')}
{t('moderating')}
@@ -170,7 +171,7 @@ const Boards = ({ multisub, subplebbits }: { multisub: Subplebbit[]; subplebbits
p/{address}
))
- : 'Not moderating any board.'}
+ : t('not_moderating')}
@@ -366,13 +367,13 @@ const Stats = ({ multisub, subplebbitAddresses }: { multisub: any; subplebbitAdd
{enoughStats ? (
<>
- Total Posts: {totalPosts}
+ {t('total_posts')} {totalPosts}
- Current Users: {currentUsers}
+ {t('current_users')} {currentUsers}
- Boards Tracked: {boardsTracked}
+ {t('boards_tracked')} {boardsTracked}
) : (
@@ -471,6 +472,16 @@ const Footer = () => {
);
};
+export const HomeLogo = () => {
+ return (
+
+
+
+
+
+ );
+};
+
const Home = () => {
const defaultSubplebbits = useDefaultSubplebbits();
const subplebbitAddresses = useDefaultSubplebbitAddresses();
@@ -478,11 +489,7 @@ const Home = () => {
return (
-
-
-
-
-
+
diff --git a/src/views/home/index.ts b/src/views/home/index.ts
index 2fdb1475..1b862780 100644
--- a/src/views/home/index.ts
+++ b/src/views/home/index.ts
@@ -1 +1 @@
-export { default } from './home';
+export { HomeLogo, default } from './home';
diff --git a/src/views/not-found/index.ts b/src/views/not-found/index.ts
new file mode 100644
index 00000000..9bcb7ca7
--- /dev/null
+++ b/src/views/not-found/index.ts
@@ -0,0 +1 @@
+export { default } from './not-found';
diff --git a/src/views/not-found/not-found.module.css b/src/views/not-found/not-found.module.css
new file mode 100644
index 00000000..df9c1f1a
--- /dev/null
+++ b/src/views/not-found/not-found.module.css
@@ -0,0 +1,68 @@
+.content {
+ margin: auto;
+ text-align: left;
+ width: 57.69em;
+ min-width: 750px;
+}
+
+.boxOuter {
+ background: #fff;
+ border: 1px solid;
+ zoom: 100%;
+ margin-bottom: .5em;
+ padding-bottom: .5em;
+}
+
+.boxBar {
+ background: #fca;
+ color: #800;
+ position: relative;
+ zoom: 100%;
+ padding-left: .5em;
+ line-height: 2em;
+}
+
+.boxBar h2 {
+ text-align: center;
+ font-size: 131%;
+ font-weight: 700;
+}
+
+.boxContent {
+ margin-top: 10px;
+ color: #000;
+ line-height: 1.5em;
+ font-size: 93%;
+ padding: .5em;
+ padding-top: .25em;
+ padding-bottom: 0;
+}
+
+.boxContent img {
+ display: block;
+ margin: auto;
+}
+
+.backToBoard {
+ text-align: center;
+ font-size: 12pt !important;
+ margin: 0 20px 10px 20px;
+ color: #800;
+ font-weight: bold;
+}
+
+.backToBoard a {
+ color: blue;
+}
+
+@media (max-width: 640px) {
+ .content {
+ min-width: 0;
+ width: auto;
+ padding: 10px;
+ }
+
+ .boxContent img {
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/views/not-found/not-found.tsx b/src/views/not-found/not-found.tsx
new file mode 100644
index 00000000..0e2be030
--- /dev/null
+++ b/src/views/not-found/not-found.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { HomeLogo } from '../home';
+import styles from './not-found.module.css';
+import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+
+const totalNotFoundImages = 2;
+
+const NotFoundImage = () => {
+ const [imagePath] = useState(() => {
+ const randomBannerIndex = Math.floor(Math.random() * totalNotFoundImages) + 1;
+ const cacheBuster = new Date().getTime();
+ return `assets/not-found/not-found-${randomBannerIndex}.jpg?cacheBuster=${cacheBuster}`;
+ });
+
+ return
;
+};
+
+const NotFound = () => {
+ const { subplebbitAddress } = useParams();
+
+ return (
+
+
+
+
+
+
404 Not Found
+
+
+
+ {subplebbitAddress && (
+ <>
+
+
+ [Back to p/{Plebbit.getShortAddress(subplebbitAddress)}]
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default NotFound;
diff --git a/src/views/pending-post/pending-post.module.css b/src/views/pending-post/pending-post.module.css
deleted file mode 100644
index 76b18b4d..00000000
--- a/src/views/pending-post/pending-post.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.stateString {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- width: calc(100vw - 28px);
- width: 100vw;
- margin-top: 10px;
- margin-left: 40px;
-}
-
-@media (max-width: 640px) {
- .stateString {
- margin-top: 0px;
- margin-left: 10px;
- }
-}
\ No newline at end of file
diff --git a/src/views/pending-post/pending-post.tsx b/src/views/pending-post/pending-post.tsx
index c8724c39..0aab5e3b 100644
--- a/src/views/pending-post/pending-post.tsx
+++ b/src/views/pending-post/pending-post.tsx
@@ -1,17 +1,13 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
-import styles from './pending-post.module.css';
import Post from '../../components/post';
-import useStateString from '../../hooks/use-state-string';
-import LoadingEllipsis from '../../components/loading-ellipsis';
const PendingPost = () => {
const { accountCommentIndex } = useParams<{ accountCommentIndex?: string }>();
const commentIndex = accountCommentIndex ? parseInt(accountCommentIndex) : undefined;
const post = useAccountComment({ commentIndex });
const navigate = useNavigate();
- const stateString = useStateString(post);
useEffect(() => window.scrollTo(0, 0), []);
@@ -21,16 +17,7 @@ const PendingPost = () => {
}
}, [post, navigate]);
- const loadingString = stateString && (
-
{stateString !== 'Failed' ? : stateString}
- );
-
- return (
-
- );
+ return
;
};
export default PendingPost;