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

Merge branch 'master' of https://github.com/plebbit/plebchan

Browse Source
This commit is contained in:
Tom
2023-05-03 18:10:08 +02:00
parent cccd0b62ca 738bd2dda5
commit bbf548b7ef
12 changed files with 1517 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -1,6 +1,6 @@
_Telegram group for this repo https://t.me/plebchanreact_
_Demo https://plebchan.vercel.app and https://plebchan.eth.limo_
_Demo https://plebchan.netlify.app and https://plebchan.eth.limo_
### Development:
src/App.js
+6 -2
View File
@@ -7,12 +7,13 @@ import 'react-toastify/dist/ReactToastify.css';
import useGeneralStore from './hooks/stores/useGeneralStore';
import { GlobalStyle } from './components/styled/GlobalStyle.styled';
import { Toast } from './components/styled/Toast.styled';
import Home from './components/views/Home';
import Board from './components/views/Board';
import Thread from './components/views/Thread';
import Catalog from './components/views/Catalog';
import Home from './components/views/Home';
import NotFound from './components/views/NotFound';
import Pending from './components/views/Pending';
import Subscriptions from './components/views/Subscriptions';
import Thread from './components/views/Thread';
import CaptchaModal from './components/CaptchaModal';
import { importAll } from './components/ImageBanner';
import preloadImages from './utils/preloadImages';
@@ -161,6 +162,9 @@ export default function App() {
<Route path={`/profile/c/:index`} element={<Pending setBodyStyle={setBodyStyle} /> }>
<Route path='settings' element={<Pending />} />
</Route>
<Route path={`/profile/p/subscriptions`} element={<Subscriptions setBodyStyle={setBodyStyle} /> }>
<Route path='settings' element={<Subscriptions />} />
</Route>
<Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
</Routes>
<Toast />
src/components/Post.jsx
+3 -3
View File
@@ -73,9 +73,9 @@ const Post = ({ content, handlequoteclick, comment }) => {
rehypePlugins={[[rehypeSanitize, customSchema]]}
components={{
img: ({ src }) => <span>{src}</span>,
video: () => null,
source: () => null,
gif: () => null,
video: ({ src }) => <span>{src}</span>,
source: ({ src }) => <span>{src}</span>,
gif: ({ src }) => <span>{src}</span>,
p: ({ children }) => <div className="custom-paragraph">{children}</div>,
}}
/>
src/components/styled/Board.styled.jsx
+63 -27
View File
@@ -1262,13 +1262,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #00e;
a, #subscribe {
color: #00e !important;
text-decoration: none;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Yotsuba-B':
@@ -1285,13 +1285,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #34345c;
a, #subscribe {
color: #34345c !important;
text-decoration: none;
}
a:hover {
color: #d00;
a:hover, #subscribe:hover {
color: #d00 !important;
}`;
case 'Futaba':
@@ -1308,13 +1308,13 @@ export const TopBar = styled.div`
font-size: 12pt;
}
a {
color: #00e;
a, #subscribe {
color: #00e !important;
text-decoration: underline;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Burichan':
@@ -1331,13 +1331,13 @@ export const TopBar = styled.div`
font-size: 12pt;
}
a {
color: #34345c;
a, #subscribe{
color: #34345c !important;
text-decoration: underline;
}
a:hover {
color: red;
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Tomorrow':
@@ -1354,13 +1354,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #81a2be;
a, #subscribe {
color: #81a2be !important;
text-decoration: none;
}
a:hover {
color: #5f89ab;
a:hover, #subscribe:hover {
color: #5f89ab !important;
}`;
case 'Photon':
@@ -1377,13 +1377,13 @@ export const TopBar = styled.div`
font-size: 10pt;
}
a {
color: #f60;
a, #subscribe {
color: #f60 !important;
text-decoration: none;
}
a:hover {
color: #ff3300;
a:hover, #subscribe:hover {
color: #ff3300 !important;
}`;
default:
@@ -1399,6 +1399,16 @@ export const TopBar = styled.div`
#catalog-button-desktop {
display: inline-block;
}
.subscribe-button-desktop {
float: right;
margin-right: 10px;
margin-top: 3px;
}
.subscribe-button-mobile {
display: none;
}
}
@media (max-width: 480px) {
@@ -1419,6 +1429,22 @@ export const TopBar = styled.div`
transform: translateX(-50%);
font-size: 10pt;
}
.subscribe-button-desktop {
display: none;
}
.subscribe-button-mobile {
margin-right: 10px;
margin-top: -2px;
position: absolute;
right: 0;
font-size: 13.3333px !important;
a {
cursor: pointer;
}
}
}
${({ selectedStyle }) => {
@@ -1434,6 +1460,7 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 10pt !important;
}
.btn-wrap a {
@@ -1475,7 +1502,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -5px !important;
}
.btn-wrap a {
@@ -1496,7 +1528,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -5px !important;
}
.btn-wrap a {
@@ -2928,7 +2965,6 @@ export const BoardForm = styled.div`
}}
@media (max-width: 480px) {
margin-top: -5%;
margin-bottom: 335px;
.thread {
src/components/styled/GlobalStyle.styled.jsx
+1
View File
@@ -20,6 +20,7 @@ export const GlobalStyle = createGlobalStyle`
font-size: 11px;
padding: 3px;
opacity: 100%;
word-wrap: break-word;
}
.line-break {
src/components/styled/Home.styled.jsx
+21
View File
@@ -171,6 +171,11 @@ export const Boards = styled.div`
padding: 0;
padding-bottom: .5em;
background: #fff;
word-wrap: break-word;
#subscriptions {
text-align: left;
}
`;
export const BoardsTitle = styled.div`
@@ -237,6 +242,22 @@ export const BoardsContent = styled.div`
padding: 0 2px;
white-space: pre-line;
}
h3 {
font-size: 100%;
font-weight: 700;
text-align: left;
}
.boardlink {
color: #800;
text-decoration: none;
:hover {
text-decoration: underline;
color: #e00
}
}
`;
export const Footer = styled.div`
src/components/styled/Thread.styled.jsx
+94 -2
View File
@@ -180,6 +180,16 @@ export const TopBar = styled.div`
.reply-stat {
margin-top: 5px;
}
.subscribe-button-desktop {
float: right;
margin-right: 10px;
margin-top: 3px;
}
.subscribe-button-mobile {
display: none;
}
}
@media (max-width: 480px) {
@@ -200,6 +210,21 @@ export const TopBar = styled.div`
hr {
display: none;
}
.subscribe-button-desktop {
display: none;
}
.subscribe-button-mobile {
margin-right: 10px;
position: absolute;
right: 0;
font-size: 13.3333px !important;
a {
cursor: pointer;
}
}
}
.return-button {
@@ -242,6 +267,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: red !important;
}
}
a, #subscribe {
color: #00e !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Yotsuba-B':
@@ -268,6 +302,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: red !important;
}
}
a, #subscribe {
color: #34345c !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #d00 !important;
}`;
case 'Futaba':
@@ -299,6 +342,16 @@ export const TopBar = styled.div`
.reply-stat {
font-size: 12pt;
bottom: 2px;
}
a, #subscribe {
color: #00e !important;
text-decoration: underline !important;
font-size: 12pt !important;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Burichan':
@@ -330,6 +383,16 @@ export const TopBar = styled.div`
.reply-stat {
font-size: 12pt;
bottom: 2px;
}
a, #subscribe{
color: #34345c !important;
text-decoration: underline !important;
font-size: 12pt !important;
}
a:hover, #subscribe:hover {
color: red !important;
}`;
case 'Tomorrow':
@@ -362,6 +425,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: #5f89ab !important;
}
}
a, #subscribe {
color: #81a2be !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #5f89ab !important;
}`;
case 'Photon':
@@ -388,6 +460,15 @@ export const TopBar = styled.div`
a:hover, #button:hover {
color: #ff3300 !important;
}
}
a, #subscribe {
color: #f60 !important;
text-decoration: none;
}
a:hover, #subscribe:hover {
color: #ff3300 !important;
}`;
default:
return '';
@@ -407,6 +488,7 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 10pt !important;
}
.btn-wrap a {
@@ -448,9 +530,14 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -2px !important;
}
.btn-wrap a {
text-decoration: none !important;
border: none;
@@ -469,7 +556,12 @@ export const TopBar = styled.div`
padding: 6px 10px 5px;
background-repeat: repeat-x;
cursor: pointer;
font-size: 16px;
font-size: 16px !important;
font-family: times new roman !important;
}
.subscribe-button-mobile {
margin-top: -2px !important;
}
.btn-wrap a {
src/components/views/Board.jsx
+136 -84
View File
@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async';
import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip';
import { Virtuoso } from 'react-virtuoso';
import { useAccount, useAccountComments, useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
import { useAccount, useAccountComments, useFeed, usePublishComment, useSubscribe } from '@plebbit/plebbit-react-hooks';
import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils'
import { debounce } from 'lodash';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
@@ -23,6 +23,7 @@ import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm';
import useError from '../../hooks/useError';
import useSuccess from '../../hooks/useSuccess';
import packageJson from '../../../package.json'
const {version} = packageJson
@@ -47,6 +48,8 @@ const Board = () => {
showPostFormLink,
} = useGeneralStore(state => state);
const account = useAccount();
const nameRef = useRef();
const subjectRef = useRef();
const commentRef = useRef();
@@ -60,10 +63,12 @@ const Board = () => {
const [selectedFeed, setSelectedFeed] = useState(feed);
const { subplebbitAddress } = useParams();
const [errorMessage, setErrorMessage] = useState(null);
useError(errorMessage, [errorMessage]);
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const account = useAccount();
const [errorMessage, setErrorMessage] = useState(null);
const [successMessage, setSuccessMessage] = useState(null);
useError(errorMessage, [errorMessage]);
useSuccess(successMessage, [successMessage]);
const [triggerPublishComment, setTriggerPublishComment] = useState(false);
@@ -304,12 +309,33 @@ const Board = () => {
// mobile navbar board select functionality
const handleSelectChange = (event) => {
const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle);
setSelectedAddress(selected);
navigate(`/p/${selected}`);
};
const handleSubscribe = async () => {
try {
if (subscribed === false) {
await subscribe(selectedAddress);
setSuccessMessage(`Subscribed to ${selectedTitle ?? selectedAddress}`);
} else if (subscribed === true) {
await unsubscribe(selectedAddress);
setSuccessMessage(`Unsubscribed from ${selectedTitle ?? selectedAddress}`);
}
} catch (error) {
setErrorMessage(error);
}
};
return (
<>
@@ -327,19 +353,25 @@ const Board = () => {
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList">
[
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
]
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -356,18 +388,19 @@ const Board = () => {
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
</select> 
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
}>Create Board</button>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -393,49 +426,49 @@ const Board = () => {
<PostForm selectedStyle={selectedStyle}>
<PostFormLink id="post-form-link" showPostFormLink={showPostFormLink} selectedStyle={selectedStyle} >
<div id="post-form-link-desktop">
[
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
]
</div>
<div id="post-form-link-mobile">
<span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} onMouseOver={(event) => event.target.style.cursor='pointer'}>Start a New Thread</Link>
</span>
</div>
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody>
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td>
</tr>
<tr data-type="File">
<td>Embed File</td>
<td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
} data-tip="Help">?</button>
</td>
</tr>
</tbody>
</PostFormTable>
[
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
]
</div>
<div id="post-form-link-mobile">
<span className="btn-wrap">
<Link to={`/p/${subplebbitAddress}/post`} onClick={useClickForm()} style={{cursor: 'pointer'}}>Start a New Thread</Link>
</span>
</div>
</PostFormLink>
<PostFormTable id="post-form" showPostForm={showPostForm} selectedStyle={selectedStyle} className="post-form">
<tbody>
<tr data-type="Name">
<td id="td-name">Name</td>
<td>
<input name="name" type="text" tabIndex={1} placeholder="Anonymous" ref={nameRef} />
</td>
</tr>
<tr data-type="Subject">
<td>Subject</td>
<td>
<input name="sub" type="text" tabIndex={3} ref={subjectRef}/>
<input id="post-button" type="submit" value="Post" tabIndex={6}
onClick={handleSubmit} />
</td>
</tr>
<tr data-type="Comment">
<td>Comment</td>
<td>
<textarea name="com" cols="48" rows="4" tabIndex={4} wrap="soft" ref={commentRef} />
</td>
</tr>
<tr data-type="File">
<td>Embed File</td>
<td>
<input name="embed" type="text" tabIndex={7} placeholder="Paste link" ref={linkRef} />
<button id="t-help" type="button" onClick={
() => alert("- Embedding media is optional, posts can be text-only. \n- A CAPTCHA challenge will appear after posting. \n- The CAPTCHA is case-sensitive.")
} data-tip="Help">?</button>
</td>
</tr>
</tbody>
</PostFormTable>
</PostForm>
<TopBar selectedStyle={selectedStyle}>
<hr />
@@ -456,9 +489,24 @@ const Board = () => {
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
]
</div>
<div id="stats" style={{float: "right", marginTop: "5px"}}>
{feed.length > 0 ? (null) : (<span>Fetching IPFS...</span>)}
</div>
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap"
onClick={() => handleSubscribe()}>{subscribed ? "Unsubscribe" : "Subscribe"}
</button>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span>
</div>
)}
<div id="catalog-button-mobile">
<span className="btn-wrap">
<Link to={`/p/${selectedAddress}/catalog`}>Catalog</Link>
@@ -577,7 +625,7 @@ const Board = () => {
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span style={{cursor: 'pointer'}} id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
<span key={`pl1-${index}`}>c/</span>
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
onClick={(e) => {
if (e.button === 2) return;
@@ -649,13 +697,13 @@ const Board = () => {
<div key={`pi-${index}`} className="post-info">
<span key={`nb-${index}`} className="nameblock">
{reply.author.displayName
? reply.author.displayName.length > 12
? reply.author.displayName.length > 20
? <Fragment key={`fragment6-${index}`}>
<span key={`mob-n-${index}`} className="name"
data-tooltip-id="tooltip"
data-tooltip-content={reply.author.displayName}
data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"}
{reply.author.displayName.slice(0, 20) + " (...)"}
</span>
</Fragment>
: <span key={`mob-n-${index}`} className="name">
@@ -690,7 +738,7 @@ const Board = () => {
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
<span key={`pl1-${index}`}>c/</span>
{reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`pl2-${index}`}
onClick={(e) => {
@@ -802,20 +850,24 @@ const Board = () => {
})}
</div>
<div key={`mob-t-${index}`} className="thread-mobile">
<hr key={`mob-hr-${index}`} />
{index === 0 ? (
<hr key={`mob-hr-${index}`} style={{marginTop: '10px'}} />
) : (
<hr key={`mob-hr-${index}`} />
)}
<div key={`mob-c-${index}`} className="op-container">
<div key={`mob-po-${index}`} className="post op op-mobile">
<div key={`mob-pi-${index}`} className="post-info-mobile">
<button key={`mob-pb-${index}`} className="post-menu-button-mobile" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nbm-${index}`} className="name-block-mobile">
{thread.author.displayName
? thread.author.displayName.length > 15
? thread.author.displayName.length > 20
? <Fragment key={`fragment9-${index}`}>
<span key={`mob-n-${index}`} className="name-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={thread.author.displayName}
data-tooltip-place="top">
{thread.author.displayName.slice(0, 15) + " (...)"}
{thread.author.displayName.slice(0, 20) + " (...)"}
</span>
</Fragment>
: <span key={`mob-n-${index}`} className="name-mobile">
@@ -852,7 +904,7 @@ const Board = () => {
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(thread.timestamp)}
&nbsp;
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no-${index}`} title="Link to this post">c/</span>
<span key={`mob-no-${index}`}>c/</span>
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-no2-${index}`}
onClick={(e) => {
if (e.button === 2) return;
@@ -950,13 +1002,13 @@ const Board = () => {
<button key={`pmbm-${index}`} className="post-menu-button-mobile" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>...</button>
<span key={`mob-nb-${index}`} className="name-block-mobile">
{reply.author.displayName
? reply.author.displayName.length > 12
? reply.author.displayName.length > 20
? <Fragment key={`fragment13-${index}`}>
<span key={`mob-n-${index}`} className="name-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={reply.author.displayName}
data-tooltip-place="top">
{reply.author.displayName.slice(0, 12) + " (...)"}
{reply.author.displayName.slice(0, 20) + " (...)"}
</span>
</Fragment>
: <span key={`mob-n-${index}`} className="name-mobile">
@@ -990,7 +1042,7 @@ const Board = () => {
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(reply.timestamp)}&nbsp;
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
<Link to={`/p/${selectedAddress}/c/${thread.cid}`} id="reply-button" key={`mob-pl2-${index}`}
onClick={(e) => {
@@ -1129,24 +1181,24 @@ const Board = () => {
marginTop: "42px",
}}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link key={`a-${subplebbit.address}`}
to={`/p/${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="boardList">
[
<Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => handleClickTitle(subplebbit.title, subplebbit.address)}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
src/components/views/Catalog.jsx
+69 -30
View File
@@ -218,6 +218,12 @@ const Catalog = () => {
// mobile navbar board select functionality
const handleSelectChange = (event) => {
const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle);
setSelectedAddress(selected);
@@ -237,23 +243,28 @@ const Catalog = () => {
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList">
[
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`}
onClick={() => {
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
]
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -270,18 +281,19 @@ const Catalog = () => {
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
</select> 
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
}>Create Board</button>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -370,6 +382,20 @@ const Catalog = () => {
<Link to={`/p/${selectedAddress}`}>Return</Link>
]
</div>
{feed.length > 0 ? (
<>
<span className="subscribe-button-desktop">
[
<button id="subscribe" style={{all: 'unset', cursor: 'pointer'}}>Subscribe</button>
]
</span>
<button className="subscribe-button-mobile btn-wrap">Subscribe</button>
</>
) : (
<div id="stats" style={{float: "right", marginTop: "5px"}}>
<span>Fetching IPFS...</span>
</div>
)}
<div id="return-button-mobile">
<span className="btn-wrap-catalog btn-wrap">
<Link to={`/p/${selectedAddress}`}>Return</Link>
@@ -398,15 +424,18 @@ const Catalog = () => {
{commentMediaInfo?.url ? (
<Fragment key="f-catalog">
{commentMediaInfo?.type === "webpage" ? (
<img key={`img-${index}`} alt="thread"
src={commentMediaInfo.url}
thread.thumbnailUrl ? (
<img key={`img-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
e.target.onerror = null;
}} />
) : null
) : null}
{commentMediaInfo?.type === "image" ? (
<img key={`img-${index}`} alt="thread"
src={commentMediaInfo.url}
<img key={`img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => {
e.target.src = fallbackImgUrl
e.target.onerror = null;}} />
@@ -472,22 +501,32 @@ const Catalog = () => {
marginTop: "42px",
}}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link key={`a-${subplebbit.address}`}
to={`/p/${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="boardList">
[
<Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
[
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
<Link to={`/p/${selectedAddress}/catalog/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
src/components/views/Home.jsx
+25 -3
View File
@@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import { Link, useNavigate } from 'react-router-dom';
import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -31,6 +31,7 @@ const Home = () => {
setSelectedTitle
} = useGeneralStore(state => state);
const account = useAccount();
const inputRef = useRef(null);
const navigate = useNavigate();
@@ -90,7 +91,7 @@ const Home = () => {
<p>Plebchan is a serverless, adminless, decentralized 4chan alternative that uses the <a href="https://plebbit.com" target="_blank" rel="noreferrer">plebbit protocol</a>. Users do not need to register an account before participating in the community; anyone can post comments, share media links, and <button
style={{all: 'unset', cursor: 'pointer'}}
onClick={() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)}
>create a board</button>. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in! </p>
<br />
@@ -98,9 +99,30 @@ const Home = () => {
</div>
</AboutContent>
</About>
{account.subscriptions?.length > 0 ? (
<Boards style={{marginBottom: '6px'}}>
<BoardsTitle>
<h2>Board Subscriptions</h2>
</BoardsTitle>
<BoardsContent id="subscriptions">
<h3 style={{textDecoration: 'underline', display: 'inline'}}>
You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}
</h3>
<br />
{account.subscriptions.map((subscription, index) => (
<>
<Link key={`sub-${index}`} class="boardlink" to={`/p/${subscription.subplebbitAddress}`}>
{subscription}
</Link>
<br />
</>
))}
</BoardsContent>
</Boards>
) : null}
<Boards>
<BoardsTitle>
<h2>Popular boards</h2>
<h2>Popular Boards</h2>
</BoardsTitle>
<BoardsContent>
{defaultSubplebbits.map(subplebbit => (
src/components/views/Subscriptions.jsx
+1041
View File
File diff suppressed because it is too large Load Diff
src/components/views/Thread.jsx
+57 -35
View File
@@ -250,6 +250,12 @@ const Thread = () => {
// mobile navbar board select functionality
const handleSelectChange = (event) => {
const selected = event.target.value;
if (selected === 'subscriptions') {
navigate(`/profile/p/subscriptions`);
return;
}
const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title;
setSelectedTitle(selectedTitle);
setSelectedAddress(selected);
@@ -279,24 +285,28 @@ const Thread = () => {
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList">
[
<Link to={`/profile/p/subscriptions`}>Subscriptions</Link>
]&nbsp;[
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link key={`a-${subplebbit.address}`}
to={`/p/${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
]
<span className="nav">
[
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
@@ -313,18 +323,19 @@ const Thread = () => {
<strong>Board</strong>
&nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}>
<option value="subscriptions">Subscriptions</option>
{defaultSubplebbits.map(subplebbit => (
<option key={`option-${subplebbit.address}`} value={subplebbit.address}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))}
</select>
</div>
<div className="page-jump">
</select> 
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nrunning boards in the plebchan app is a planned feature.\n\n'
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button> 
}>Create Board</button>
</div>
<div className="page-jump">
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
&nbsp;
<Link to="/" onClick={() => handleStyleChange({target: {value: "Yotsuba"}}
@@ -560,7 +571,7 @@ const Thread = () => {
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
&nbsp;
<span className="post-number post-number-desktop">
<span style={{cursor: 'pointer'}} id="reply-button" title="Link to this post">c/</span>
<span style={{cursor: 'pointer'}}>c/</span>
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Reply to this post">{comment.shortCid}</button>
@@ -641,7 +652,7 @@ const Thread = () => {
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply?.timestamp)}</span>
&nbsp;
<span style={{cursor: 'pointer'}} key={`pn-${index}`} className="post-number post-number-desktop">
<span id="reply-button" key={`pl1-${index}`} title="Link to this post">c/</span>
<span key={`pl1-${index}`}>c/</span>
{reply.shortCid ? (
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`pl2-${index}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
@@ -784,10 +795,11 @@ const Thread = () => {
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
{getDate(comment?.timestamp)}
&nbsp;
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-no-${comment.cid}`} onClick={() => {
<span key={`mob-no-${comment.cid}`}>c/</span>
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post"
onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(comment.cid); setSelectedShortCid(comment.shortCid);
}} title="Link to this post">c/</button>
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-no2-${comment.cid}`} title="Reply to this post">{comment.shortCid}</span>
}}>{comment.shortCid}</span>
</span>
</div>
{commentMediaInfo?.url ? (
@@ -899,7 +911,7 @@ const Thread = () => {
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
{getDate(reply?.timestamp)}&nbsp;
<span id="reply-button" style={{cursor: 'pointer'}} key={`mob-pl1-${index}`} title="Link to this post">c/</span>
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
<button id="reply-button" style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pl2-${index}`} onClick={() => {
setIsReplyOpen(true); setSelectedParentCid(reply.cid); setSelectedShortCid(reply.shortCid);
@@ -1122,20 +1134,30 @@ const Thread = () => {
marginTop: "42px",
}}>
<>
{defaultSubplebbits.map(subplebbit => (
<span className="boardList" key={`span-${subplebbit.address}`}>
[
<Link key={`a-${subplebbit.address}`}
to={`/p/${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
]&nbsp;
</span>
))}
<span className="nav">
<span className="boardList">
[
<Link to="" onClick={() => {}}>Subscriptions</Link>
]&nbsp;
</span>
{defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => {
setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address);
}}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link>
{index !== defaultSubplebbits.length - 1 ? " /" : null}
</span>
))}
<span className="nav">
[
<button style={{all: 'unset', cursor: 'pointer'}} onClick={
() => alert(
'To create a board, first you have to run a full node.\nYou can run a full node by simply browsing with the plebbit desktop app. After you download it, open it, wait for it loading, then click on "Home" in the top left, then "Create Community".\n\nAfter you create the community, you can go back to plebchan at any time to see it as a board by pasting its address (begins with p/12D3KooW...) in the search bar, which is in the Home.\n\nNote:\n\n- Your community will be online for as long as you leave the app open, because it functions like a server for the community.\n- The longer you leave the app open, the more data you are seeding to the protocol, which helps performance for everybody.\n - All the data in the plebbit protocol is just text, which is extremely lightweight. All media is generated by links, which is text, embedded by the clients.\n\nDownload the plebbit app here: https://github.com/plebbit/plebbit-react/releases\n\nRunning boards in the plebchan app is a planned feature.\n\n'
)
}>Create Board</button>
]
[
<Link to={`/p/${selectedAddress}/c/${selectedThread}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]