mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
Tom (plebeius.eth)
@@ -72,5 +72,8 @@
|
||||
"interests": "اهتمامات",
|
||||
"random": "عشوائي",
|
||||
"international": "دولية",
|
||||
"projects": "مشاريع"
|
||||
"projects": "مشاريع",
|
||||
"challenge_counter": "{{index}} من {{total}}",
|
||||
"embed": "تضمين",
|
||||
"remove": "إزالة"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "আগ্রহসমূহ",
|
||||
"random": "এলোমেলো",
|
||||
"international": "আন্তর্জাতিক",
|
||||
"projects": "প্রকল্পসমূহ"
|
||||
"projects": "প্রকল্পসমূহ",
|
||||
"challenge_counter": "{{index}} থেকে {{total}}",
|
||||
"embed": "এম্বেড",
|
||||
"remove": "অপসারণ"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "zájmy",
|
||||
"random": "náhodný",
|
||||
"international": "mezinárodní",
|
||||
"projects": "projekty"
|
||||
"projects": "projekty",
|
||||
"challenge_counter": "{{index}} z {{total}}",
|
||||
"embed": "vložit",
|
||||
"remove": "odstranit"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interesser",
|
||||
"random": "tilfældig",
|
||||
"international": "internationale",
|
||||
"projects": "projekter"
|
||||
"projects": "projekter",
|
||||
"challenge_counter": "{{index}} af {{total}}",
|
||||
"embed": "integrer",
|
||||
"remove": "fjern"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "Interessen",
|
||||
"random": "zufällig",
|
||||
"international": "internationale",
|
||||
"projects": "Projekte"
|
||||
"projects": "Projekte",
|
||||
"challenge_counter": "{{index}} von {{total}}",
|
||||
"embed": "einbetten",
|
||||
"remove": "entfernen"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "ενδιαφέροντα",
|
||||
"random": "τυχαίος",
|
||||
"international": "διεθνείς",
|
||||
"projects": "έργα"
|
||||
"projects": "έργα",
|
||||
"challenge_counter": "{{index}} από {{total}}",
|
||||
"embed": "ενσωμάτωση",
|
||||
"remove": "αφαίρεση"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interests",
|
||||
"random": "random",
|
||||
"international": "international",
|
||||
"projects": "projects"
|
||||
"projects": "projects",
|
||||
"challenge_counter": "{{index}} of {{total}}",
|
||||
"embed": "embed",
|
||||
"remove": "remove"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "intereses",
|
||||
"random": "aleatorio",
|
||||
"international": "internacionales",
|
||||
"projects": "proyectos"
|
||||
"projects": "proyectos",
|
||||
"challenge_counter": "{{index}} de {{total}}",
|
||||
"embed": "incrustar",
|
||||
"remove": "eliminar"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "علایق",
|
||||
"random": "تصادفی",
|
||||
"international": "بینالمللی",
|
||||
"projects": "پروژهها"
|
||||
"projects": "پروژهها",
|
||||
"challenge_counter": "{{index}} از {{total}}",
|
||||
"embed": "جاسازی",
|
||||
"remove": "حذف"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "kiinnostuksen kohteet",
|
||||
"random": "satunnainen",
|
||||
"international": "kansainväliset",
|
||||
"projects": "projektit"
|
||||
"projects": "projektit",
|
||||
"challenge_counter": "{{index}} / {{total}}",
|
||||
"embed": "upota",
|
||||
"remove": "poista"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "mga interes",
|
||||
"random": "random",
|
||||
"international": "internasyonal",
|
||||
"projects": "mga proyekto"
|
||||
"projects": "mga proyekto",
|
||||
"challenge_counter": "{{index}} ng {{total}}",
|
||||
"embed": "i-embed",
|
||||
"remove": "alisin"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "intérêts",
|
||||
"random": "aléatoire",
|
||||
"international": "internationaux",
|
||||
"projects": "projets"
|
||||
"projects": "projets",
|
||||
"challenge_counter": "{{index}} sur {{total}}",
|
||||
"embed": "intégrer",
|
||||
"remove": "supprimer"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "עניינים",
|
||||
"random": "אקראי",
|
||||
"international": "בינלאומיים",
|
||||
"projects": "פרויקטים"
|
||||
"projects": "פרויקטים",
|
||||
"challenge_counter": "{{index}} מתוך {{total}}",
|
||||
"embed": "הטמע",
|
||||
"remove": "הסר"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "रुचियाँ",
|
||||
"random": "यादृच्छिक",
|
||||
"international": "अंतरराष्ट्रीय",
|
||||
"projects": "परियोजनाएं"
|
||||
"projects": "परियोजनाएं",
|
||||
"challenge_counter": "{{index}} में से {{total}}",
|
||||
"embed": "एम्बेड",
|
||||
"remove": "हटाएं"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "érdeklődési körök",
|
||||
"random": "véletlenszerű",
|
||||
"international": "nemzetközi",
|
||||
"projects": "projektek"
|
||||
"projects": "projektek",
|
||||
"challenge_counter": "{{index}} a(z) {{total}}-ból/ből",
|
||||
"embed": "beágyaz",
|
||||
"remove": "eltávolít"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "minat",
|
||||
"random": "acak",
|
||||
"international": "internasional",
|
||||
"projects": "proyek"
|
||||
"projects": "proyek",
|
||||
"challenge_counter": "{{index}} dari {{total}}",
|
||||
"embed": "sematkan",
|
||||
"remove": "hapus"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interessi",
|
||||
"random": "casuale",
|
||||
"international": "internazionali",
|
||||
"projects": "progetti"
|
||||
"projects": "progetti",
|
||||
"challenge_counter": "{{index}} di {{total}}",
|
||||
"embed": "incorpora",
|
||||
"remove": "rimuovi"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "興味",
|
||||
"random": "ランダム",
|
||||
"international": "国際的な",
|
||||
"projects": "プロジェクト"
|
||||
"projects": "プロジェクト",
|
||||
"challenge_counter": "{{index}} / {{total}}",
|
||||
"embed": "埋め込み",
|
||||
"remove": "削除"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "관심사",
|
||||
"random": "랜덤",
|
||||
"international": "국제적인",
|
||||
"projects": "프로젝트"
|
||||
"projects": "프로젝트",
|
||||
"challenge_counter": "{{index}} 중 {{total}}",
|
||||
"embed": "임베드",
|
||||
"remove": "제거"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "आवडी",
|
||||
"random": "यादृच्छ",
|
||||
"international": "आंतरराष्ट्रीय",
|
||||
"projects": "प्रकल्प"
|
||||
"projects": "प्रकल्प",
|
||||
"challenge_counter": "{{index}} पैकी {{total}}",
|
||||
"embed": "एम्बेड",
|
||||
"remove": "काढा"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interesses",
|
||||
"random": "willekeurig",
|
||||
"international": "internationale",
|
||||
"projects": "projecten"
|
||||
"projects": "projecten",
|
||||
"challenge_counter": "{{index}} van {{total}}",
|
||||
"embed": "insluiten",
|
||||
"remove": "verwijderen"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interesser",
|
||||
"random": "tilfeldig",
|
||||
"international": "internasjonale",
|
||||
"projects": "prosjekter"
|
||||
"projects": "prosjekter",
|
||||
"challenge_counter": "{{index}} av {{total}}",
|
||||
"embed": "bygg inn",
|
||||
"remove": "fjern"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "zainteresowania",
|
||||
"random": "losowy",
|
||||
"international": "międzynarodowe",
|
||||
"projects": "projekty"
|
||||
"projects": "projekty",
|
||||
"challenge_counter": "{{index}} z {{total}}",
|
||||
"embed": "osadź",
|
||||
"remove": "usuń"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interesses",
|
||||
"random": "aleatório",
|
||||
"international": "internacionais",
|
||||
"projects": "projetos"
|
||||
"projects": "projetos",
|
||||
"challenge_counter": "{{index}} de {{total}}",
|
||||
"embed": "embutir",
|
||||
"remove": "remover"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interese",
|
||||
"random": "aleator",
|
||||
"international": "internaționale",
|
||||
"projects": "proiecte"
|
||||
"projects": "proiecte",
|
||||
"challenge_counter": "{{index}} din {{total}}",
|
||||
"embed": "încorpora",
|
||||
"remove": "elimina"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "интересы",
|
||||
"random": "случайный",
|
||||
"international": "международные",
|
||||
"projects": "проекты"
|
||||
"projects": "проекты",
|
||||
"challenge_counter": "{{index}} из {{total}}",
|
||||
"embed": "встроить",
|
||||
"remove": "удалить"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "interesat",
|
||||
"random": "i rastësishëm",
|
||||
"international": "ndërkombëtare",
|
||||
"projects": "projekte"
|
||||
"projects": "projekte",
|
||||
"challenge_counter": "{{index}} nga {{total}}",
|
||||
"embed": "integro",
|
||||
"remove": "hiq"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "intressen",
|
||||
"random": "slumpmässig",
|
||||
"international": "internationella",
|
||||
"projects": "projekt"
|
||||
"projects": "projekt",
|
||||
"challenge_counter": "{{index}} av {{total}}",
|
||||
"embed": "bädda in",
|
||||
"remove": "ta bort"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "ఆసక్తులు",
|
||||
"random": "యాదృచ్ఛిక",
|
||||
"international": "అంతర్జాతీయ",
|
||||
"projects": "ప్రాజెక్టులు"
|
||||
"projects": "ప్రాజెక్టులు",
|
||||
"challenge_counter": "{{index}} లో {{total}}",
|
||||
"embed": "ఎంబెడ్",
|
||||
"remove": "తొలగించు"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "ความสนใจ",
|
||||
"random": "สุ่ม",
|
||||
"international": "นานาชาติ",
|
||||
"projects": "โครงการ"
|
||||
"projects": "โครงการ",
|
||||
"challenge_counter": "{{index}} จาก {{total}}",
|
||||
"embed": "ฝัง",
|
||||
"remove": "ลบ"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "ilgi alanları",
|
||||
"random": "rastgele",
|
||||
"international": "uluslararası",
|
||||
"projects": "projeler"
|
||||
"projects": "projeler",
|
||||
"challenge_counter": "{{index}} / {{total}}",
|
||||
"embed": "göm",
|
||||
"remove": "kaldır"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "інтереси",
|
||||
"random": "випадковий",
|
||||
"international": "міжнародні",
|
||||
"projects": "проекти"
|
||||
"projects": "проекти",
|
||||
"challenge_counter": "{{index}} з {{total}}",
|
||||
"embed": "вбудувати",
|
||||
"remove": "видалити"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "دلچسپیاں",
|
||||
"random": "بے ترتیب",
|
||||
"international": "بین الاقوامی",
|
||||
"projects": "منصوبے"
|
||||
"projects": "منصوبے",
|
||||
"challenge_counter": "{{index}} میں سے {{total}}",
|
||||
"embed": "ایمبیڈ",
|
||||
"remove": "ہٹائیں"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "sở thích",
|
||||
"random": "ngẫu nhiên",
|
||||
"international": "quốc tế",
|
||||
"projects": "dự án"
|
||||
"projects": "dự án",
|
||||
"challenge_counter": "{{index}} trong {{total}}",
|
||||
"embed": "nhúng",
|
||||
"remove": "xóa"
|
||||
}
|
||||
@@ -72,5 +72,8 @@
|
||||
"interests": "兴趣",
|
||||
"random": "随机",
|
||||
"international": "国际的",
|
||||
"projects": "项目"
|
||||
"projects": "项目",
|
||||
"challenge_counter": "{{index}} / {{total}}",
|
||||
"embed": "嵌入",
|
||||
"remove": "移除"
|
||||
}
|
||||
+3
-5
@@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom';
|
||||
import { isHomeView, isNotFoundView } from './lib/utils/view-utils';
|
||||
import { isHomeView } from './lib/utils/view-utils';
|
||||
import useTheme from './hooks/use-theme';
|
||||
import styles from './app.module.css';
|
||||
import Board from './views/board';
|
||||
@@ -47,16 +47,14 @@ const BoardLayout = () => {
|
||||
|
||||
const App = () => {
|
||||
const location = useLocation();
|
||||
const params = useParams();
|
||||
const isInHomeView = isHomeView(location.pathname);
|
||||
const isInNotFoundPage = isNotFoundView(location.pathname, params);
|
||||
const [theme] = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
document.body.classList.forEach((className) => document.body.classList.remove(className));
|
||||
const classToAdd = isInHomeView || isInNotFoundPage ? 'yotsuba' : theme;
|
||||
const classToAdd = isInHomeView ? 'yotsuba' : theme;
|
||||
document.body.classList.add(classToAdd);
|
||||
}, [theme, isInHomeView, isInNotFoundPage]);
|
||||
}, [theme, isInHomeView]);
|
||||
|
||||
const globalLayout = (
|
||||
<>
|
||||
|
||||
@@ -19,3 +19,13 @@
|
||||
.hrWrapper hr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.embedButton {
|
||||
color: var(--button-desktop-text-color);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.embedButton:hover {
|
||||
cursor: pointer;
|
||||
color: var(--button-desktop-text-color-hover);
|
||||
}
|
||||
@@ -1,9 +1,12 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import styles from './markdown.module.css';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
import supersub from 'remark-supersub';
|
||||
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
|
||||
import styles from './markdown.module.css';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
|
||||
import CommentMedia from '../comment-media';
|
||||
|
||||
interface MarkdownProps {
|
||||
content: string;
|
||||
@@ -55,6 +58,9 @@ const Markdown = ({ content }: MarkdownProps) => {
|
||||
|
||||
remarkPlugins.push([blockquoteToGreentext]);
|
||||
|
||||
const { t } = useTranslation();
|
||||
const [showMedia, setShowMedia] = useState(false);
|
||||
|
||||
return (
|
||||
<span className={styles.markdown}>
|
||||
<ReactMarkdown
|
||||
@@ -71,6 +77,37 @@ const Markdown = ({ content }: MarkdownProps) => {
|
||||
<hr />
|
||||
</div>
|
||||
),
|
||||
a: ({ href, children }) => {
|
||||
if (href) {
|
||||
const linkMediaInfo = getLinkMediaInfo(href);
|
||||
if (getHasThumbnail(linkMediaInfo, href)) {
|
||||
return (
|
||||
<>
|
||||
<a href={href} target='_blank' rel='noopener noreferrer'>
|
||||
{children}
|
||||
</a>{' '}
|
||||
[
|
||||
<span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
|
||||
{showMedia ? t('remove') : t('embed')}
|
||||
</span>
|
||||
]
|
||||
{showMedia && (
|
||||
<>
|
||||
<br />
|
||||
<CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<a href={href} target='_blank' rel='noopener noreferrer'>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
|
||||
@@ -57,7 +57,6 @@
|
||||
outline: var(--post-form-field-input-outline, revert);
|
||||
background-color: var(--post-form-field-input-background-color, revert);
|
||||
color: var(--post-form-field-input-color, revert);
|
||||
filter: var(--filter80);
|
||||
padding: 2px 4px 3px;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
@@ -58,17 +58,30 @@ const LinkTypePreviewer = ({ link }: { link: string }) => {
|
||||
return isValidURL(link) ? mediaInfo?.type : 'Invalid URL';
|
||||
};
|
||||
|
||||
const PostFormTable = () => {
|
||||
const PostFormTable = ({ closeForm }: { closeForm: () => void }) => {
|
||||
const { t } = useTranslation();
|
||||
const account = useAccount();
|
||||
const { displayName } = account?.author || {};
|
||||
|
||||
const [url, setUrl] = useState('');
|
||||
|
||||
const { title, content, link, publishCommentOptions, setSubmitStore, resetSubmitStore } = useSubmitStore();
|
||||
|
||||
const { index, publishComment } = usePublishComment(publishCommentOptions);
|
||||
|
||||
const textRef = useRef<HTMLTextAreaElement>(null);
|
||||
const urlRef = useRef<HTMLInputElement>(null);
|
||||
const subjectRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const resetFields = () => {
|
||||
if (textRef.current) {
|
||||
textRef.current.value = '';
|
||||
}
|
||||
if (urlRef.current) {
|
||||
urlRef.current.value = '';
|
||||
}
|
||||
if (subjectRef.current) {
|
||||
subjectRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const onPublishPost = () => {
|
||||
if (!title && !content && !link) {
|
||||
alert(`Cannot post empty comment`);
|
||||
@@ -96,6 +109,7 @@ const PostFormTable = () => {
|
||||
useEffect(() => {
|
||||
if (typeof index === 'number') {
|
||||
resetSubmitStore();
|
||||
resetFields();
|
||||
navigate(`/profile/${index}`);
|
||||
}
|
||||
}, [index, resetSubmitStore, navigate]);
|
||||
@@ -106,9 +120,6 @@ const PostFormTable = () => {
|
||||
const cid = params?.commentCid as string;
|
||||
const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid, subplebbitAddress });
|
||||
|
||||
const textRef = useRef<HTMLTextAreaElement>(null);
|
||||
const urlRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const onPublishReply = () => {
|
||||
const currentContent = textRef.current?.value || '';
|
||||
const currentUrl = urlRef.current?.value || '';
|
||||
@@ -128,6 +139,8 @@ const PostFormTable = () => {
|
||||
useEffect(() => {
|
||||
if (typeof replyIndex === 'number') {
|
||||
resetContent();
|
||||
resetFields();
|
||||
closeForm();
|
||||
}
|
||||
}, [replyIndex, resetContent]);
|
||||
|
||||
@@ -152,6 +165,7 @@ const PostFormTable = () => {
|
||||
<td>
|
||||
<input
|
||||
type='text'
|
||||
ref={subjectRef}
|
||||
onChange={(e) => {
|
||||
setSubmitStore({ title: e.target.value });
|
||||
}}
|
||||
@@ -169,7 +183,8 @@ const PostFormTable = () => {
|
||||
wrap='soft'
|
||||
ref={textRef}
|
||||
onChange={(e) => {
|
||||
isInPostPage ? setContent.content(e.target.value) : setSubmitStore({ content: e.target.value });
|
||||
const content = e.target.value.replace(/\n/g, '\n\n');
|
||||
isInPostPage ? setContent.content(content) : setSubmitStore({ content });
|
||||
}}
|
||||
/>
|
||||
</td>
|
||||
@@ -234,7 +249,7 @@ const PostForm = () => {
|
||||
]
|
||||
</div>
|
||||
) : (
|
||||
<PostFormTable />
|
||||
<PostFormTable closeForm={() => setShowForm(false)} />
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.postFormMobile}>
|
||||
@@ -249,7 +264,7 @@ const PostForm = () => {
|
||||
<button className={`${styles.showFormButton} button`} onClick={() => setShowForm(showForm ? false : true)}>
|
||||
{showForm ? t('close_post_form') : isInPostPage ? t('post_a_reply') : t('start_new_thread')}
|
||||
</button>
|
||||
{showForm && <PostFormTable />}
|
||||
{showForm && <PostFormTable closeForm={() => setShowForm(false)} />}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -77,7 +77,6 @@
|
||||
}
|
||||
|
||||
.postDesktop .postNumLink a:hover, .postDesktop .postNumLink span:hover, .replyDesktop .postNumLink a:hover, .replyDesktop .postNumLink span:hover {
|
||||
cursor: pointer;
|
||||
color: var(--button-desktop-text-color-hover);
|
||||
}
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Role, useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
|
||||
import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
|
||||
import { getCommentMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
|
||||
import { getFormattedDate } from '../../lib/utils/time-utils';
|
||||
import { isPostPageView } from '../../lib/utils/view-utils';
|
||||
import { isPendingPostView, isPostPageView } from '../../lib/utils/view-utils';
|
||||
import useCountLinksInReplies from '../../hooks/use-count-links-in-replies';
|
||||
import useReplies from '../../hooks/use-replies';
|
||||
import useStateString from '../../hooks/use-state-string';
|
||||
@@ -39,6 +39,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
const params = useParams();
|
||||
const location = useLocation();
|
||||
const isInPostPage = isPostPageView(location.pathname, params);
|
||||
const isPendingPostPage = isPendingPostView(location.pathname, params);
|
||||
|
||||
const displayTitle = title && title.length > 75 ? title?.slice(0, 75) + '...' : title;
|
||||
const displayContent = content && !isInPostPage && content.length > 1000 ? content?.slice(0, 1000) + '(...)' : content;
|
||||
@@ -141,7 +142,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
c/
|
||||
</Link>
|
||||
{!cid ? (
|
||||
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
|
||||
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
|
||||
) : (
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
|
||||
{shortCid}
|
||||
@@ -186,7 +187,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
|
||||
</span>
|
||||
)}
|
||||
{!cid && state === 'pending' && (
|
||||
{!cid && state === 'pending' && stateString !== 'Failed' && (
|
||||
<>
|
||||
<br />
|
||||
{loadingString}
|
||||
@@ -194,7 +195,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
)}
|
||||
</blockquote>
|
||||
)}
|
||||
{!isDescription && !isRules && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
|
||||
{!isDescription && !isRules && !isPendingPostPage && (replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && (
|
||||
<span className={styles.summary}>
|
||||
<span className={styles.expandButtonWrapper}>
|
||||
<span className={styles.expandButton} />
|
||||
@@ -212,6 +213,7 @@ const PostDesktop = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
</span>
|
||||
)}
|
||||
{!(pinned && !isInPostPage) &&
|
||||
!isPendingPostPage &&
|
||||
!isDescription &&
|
||||
!isRules &&
|
||||
replies &&
|
||||
@@ -272,7 +274,7 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
|
||||
c/
|
||||
</Link>
|
||||
{!cid ? (
|
||||
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
|
||||
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
|
||||
) : (
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
|
||||
{shortCid}
|
||||
@@ -342,13 +344,13 @@ const ReplyDesktop = ({ reply, roles, openReplyModal }: PostProps) => {
|
||||
{isReplyingToReply && (
|
||||
<>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
|
||||
{`c/${Plebbit.getShortCid(parentCid)}`}
|
||||
{`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
|
||||
</Link>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<Markdown content={content} />
|
||||
{!cid && state === 'pending' && (
|
||||
{!cid && state === 'pending' && stateString !== 'Failed' && (
|
||||
<>
|
||||
<br />
|
||||
{loadingString}
|
||||
@@ -373,6 +375,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
const params = useParams();
|
||||
const location = useLocation();
|
||||
const isInPostPage = isPostPageView(location.pathname, params);
|
||||
const isPendingPostPage = isPendingPostView(location.pathname, params);
|
||||
|
||||
const linksCount = useCountLinksInReplies(post);
|
||||
const displayTitle = title && title.length > 30 ? title?.slice(0, 30) + '(...)' : title;
|
||||
@@ -436,7 +439,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
c/
|
||||
</Link>
|
||||
{!cid ? (
|
||||
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
|
||||
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
|
||||
) : (
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
|
||||
{shortCid}
|
||||
@@ -466,7 +469,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
<Trans i18nKey={'comment_too_long'} shouldUnescape={true} components={{ 1: <Link to={`/p/${subplebbitAddress}/c/${cid}`} /> }} />
|
||||
</span>
|
||||
)}
|
||||
{!cid && state === 'pending' && (
|
||||
{!cid && state === 'pending' && stateString !== 'Failed' && (
|
||||
<>
|
||||
<br />
|
||||
{loadingString}
|
||||
@@ -475,7 +478,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
</blockquote>
|
||||
)}
|
||||
</div>
|
||||
{!isInPostPage && (
|
||||
{!isInPostPage && !isPendingPostPage && (
|
||||
<div className={styles.postLink}>
|
||||
<span className={styles.info}>
|
||||
{replyCount > 0 && `${replyCount} Replies`}
|
||||
@@ -488,6 +491,7 @@ const PostMobile = ({ openReplyModal, post, roles, showAllReplies }: PostProps)
|
||||
)}
|
||||
</div>
|
||||
{!(pinned && !isInPostPage) &&
|
||||
!isPendingPostPage &&
|
||||
!isDescription &&
|
||||
!isRules &&
|
||||
replies &&
|
||||
@@ -549,7 +553,7 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
|
||||
</Link>
|
||||
</span>
|
||||
{!cid ? (
|
||||
<span className={styles.pendingCid}>{state === 'failed' ? 'Failed' : 'Pending'}</span>
|
||||
<span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
|
||||
) : (
|
||||
<span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
|
||||
{shortCid}
|
||||
@@ -572,13 +576,13 @@ const ReplyMobile = ({ reply, roles, openReplyModal }: PostProps) => {
|
||||
{isReplyingToReply && (
|
||||
<>
|
||||
<Link to={`/p/${subplebbitAddress}/c/${parentCid}`} className={styles.quoteLink}>
|
||||
{`c/${Plebbit.getShortCid(parentCid)}`}
|
||||
{`c/${parentCid && Plebbit.getShortCid(parentCid)}`}
|
||||
</Link>
|
||||
<br />
|
||||
</>
|
||||
)}
|
||||
<Markdown content={content} />
|
||||
{!cid && state === 'pending' && (
|
||||
{!cid && state === 'pending' && stateString !== 'Failed' && (
|
||||
<>
|
||||
<br />
|
||||
{loadingString}
|
||||
|
||||
@@ -39,18 +39,21 @@
|
||||
}
|
||||
|
||||
.container input[type="text"], .container textarea {
|
||||
border: var(--post-form-field-input-border, revert);
|
||||
border: var(--reply-modal-field-input-border, revert);
|
||||
font-family: var(--post-form-field-font-family, revert);
|
||||
appearance: var(--post-form-field-input-appearance, revert);
|
||||
outline: var(--post-form-field-input-outline, revert);
|
||||
background-color: var(--post-form-field-input-background-color, revert);
|
||||
color: var(--post-form-field-input-color, revert);
|
||||
font-size: 10pt;
|
||||
outline: var(--post-form-field-input-outline, revert);
|
||||
width: 298px;
|
||||
filter: var(--filter80);
|
||||
padding: 2px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.container input[type="text"]:focus, .container textarea:focus {
|
||||
border: var(--post-form-field-input-focus-border, revert);
|
||||
border: var(--reply-modal-field-input-border-focus, revert);
|
||||
}
|
||||
|
||||
.content textarea {
|
||||
@@ -63,6 +66,14 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.parentCid input[type="text"] {
|
||||
margin-bottom: -1px !important;
|
||||
}
|
||||
|
||||
.parentCid input[type="text"]:focus {
|
||||
border: var(--reply-modal-field-input-border, revert) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
position: absolute;
|
||||
|
||||
@@ -88,6 +88,9 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
<div className={styles.link}>
|
||||
<input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
|
||||
</div>
|
||||
<div className={styles.parentCid}>
|
||||
<input type='text' readOnly value={`c/${parentCid && Plebbit.getShortCid(parentCid)}`} />
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
<textarea
|
||||
cols={48}
|
||||
@@ -95,7 +98,10 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
|
||||
wrap='soft'
|
||||
ref={textRef}
|
||||
placeholder={_.capitalize(t('comment'))}
|
||||
onChange={(e) => setContent.content(e.target.value)}
|
||||
onChange={(e) => {
|
||||
const content = e.target.value.replace(/\n/g, '\n\n');
|
||||
setContent.content(content);
|
||||
}}
|
||||
autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -21,11 +21,7 @@ const useReplyModal = () => {
|
||||
setScrollY(currentScrollY);
|
||||
}
|
||||
if (activeCid && activeCid !== cid) {
|
||||
closeModal();
|
||||
setTimeout(() => {
|
||||
setActiveCid(cid);
|
||||
setShowReplyModal(true);
|
||||
}, 0); // minimal timeout to allow for state reset
|
||||
return;
|
||||
} else if (!activeCid) {
|
||||
setActiveCid(cid);
|
||||
setShowReplyModal(true);
|
||||
|
||||
+24
-3
@@ -134,6 +134,10 @@
|
||||
--post-form-field-input-outline: none;
|
||||
--post-form-field-input-focus-border: 1px solid #ea8;
|
||||
|
||||
/* reply modal */
|
||||
--reply-modal-field-input-border: 1px solid #aaa;
|
||||
--reply-modal-field-input-border-focus: 1px solid #ea8;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: navy;
|
||||
--post-quotelink-text-color-hover: red;
|
||||
@@ -285,6 +289,10 @@
|
||||
--post-form-field-input-outline: none;
|
||||
--post-form-field-input-focus-border: 1px solid #98e;
|
||||
|
||||
/* reply modal */
|
||||
--reply-modal-field-input-border: 1px solid #aaa;
|
||||
--reply-modal-field-input-border-focus: 1px solid #98e;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #d00;
|
||||
--post-quotelink-text-color-hover: #d00;
|
||||
@@ -690,15 +698,24 @@
|
||||
--post-form-toggle-font-weight: 700;
|
||||
--post-form-field-title-background-color: #282a2e;
|
||||
--post-form-field-title-color: #c5c8c6;
|
||||
--post-form-field-border: 1px solid #111;
|
||||
--post-form-field-border: 1px solid #000;
|
||||
--post-form-field-title-font-weight: 700;
|
||||
--post-form-field-title-padding: 0 5px;
|
||||
--post-form-field-title-font-size: 10pt;
|
||||
--post-form-field-input-border: 1px solid #aaa;
|
||||
--post-form-field-input-border: 1px solid #000;
|
||||
--post-form-field-input-focus-border: 1px solid #515151;
|
||||
--post-form-field-input-background-color: #282a2e;
|
||||
--post-form-field-input-color: #c5c8c6;
|
||||
--post-form-field-font-family: arial, helvetica, sans-serif;
|
||||
--post-form-field-input-appearance: none;
|
||||
--post-form-field-input-outline: none;
|
||||
--post-form-field-input-focus-border: 1px solid #111;
|
||||
|
||||
/* reply modal */
|
||||
--reply-modal-field-input-border: 1px solid #515151;
|
||||
--reply-modal-field-input-border-focus: 1px solid #757575;
|
||||
|
||||
/* reply modal */
|
||||
--reply-modal-field-border-focus: 1px solid #757575;
|
||||
|
||||
/* select */
|
||||
--select-border: 1px solid #575a60;
|
||||
@@ -827,6 +844,10 @@
|
||||
--post-form-field-input-outline: none;
|
||||
--post-form-field-input-focus-border: 1px solid #ea8;
|
||||
|
||||
/* reply modal */
|
||||
--reply-modal-field-input-border: 1px solid #aaa;
|
||||
--reply-modal-field-input-border-focus: 1px solid #ea8;
|
||||
|
||||
/* quotelink */
|
||||
--post-quotelink-text-color: #f60;
|
||||
--post-quotelink-text-color-hover: #f30;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.content {
|
||||
margin: auto;
|
||||
text-align: left;
|
||||
width: 57.69em;
|
||||
min-width: 750px;
|
||||
text-align: left;
|
||||
width: 57.69em;
|
||||
min-width: 750px;
|
||||
}
|
||||
|
||||
.boxOuter {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState, useRef } 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';
|
||||
import useTheme from '../../hooks/use-theme';
|
||||
|
||||
const totalNotFoundImages = 2;
|
||||
|
||||
@@ -19,24 +20,42 @@ const NotFoundImage = () => {
|
||||
const NotFound = () => {
|
||||
const { subplebbitAddress } = useParams();
|
||||
|
||||
const [theme, setTheme] = useTheme();
|
||||
const previousThemeRef = useRef(theme);
|
||||
|
||||
useEffect(() => {
|
||||
if (theme !== 'yotsuba') {
|
||||
previousThemeRef.current = theme;
|
||||
setTheme('yotsuba');
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (theme === 'yotsuba') {
|
||||
setTheme(previousThemeRef.current);
|
||||
}
|
||||
};
|
||||
}, [theme, setTheme]);
|
||||
|
||||
return (
|
||||
<div className={styles.content}>
|
||||
<HomeLogo />
|
||||
<div className={styles.boxOuter}>
|
||||
<div className={styles.boxInner}>
|
||||
<div className={styles.boxBar}>
|
||||
<h2>404 Not Found</h2>
|
||||
</div>
|
||||
<div className={styles.boxContent}>
|
||||
<NotFoundImage />
|
||||
{subplebbitAddress && (
|
||||
<>
|
||||
<br />
|
||||
<div className={styles.backToBoard}>
|
||||
[<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.content}>
|
||||
<HomeLogo />
|
||||
<div className={styles.boxOuter}>
|
||||
<div className={styles.boxInner}>
|
||||
<div className={styles.boxBar}>
|
||||
<h2>404 Not Found</h2>
|
||||
</div>
|
||||
<div className={styles.boxContent}>
|
||||
<NotFoundImage />
|
||||
{subplebbitAddress && (
|
||||
<>
|
||||
<br />
|
||||
<div className={styles.backToBoard}>
|
||||
[<Link to={`/p/${subplebbitAddress}`}>Back to p/{Plebbit.getShortAddress(subplebbitAddress)}</Link>]
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user