mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
chore(Home): update plebchan description
This commit is contained in:
plebeius.eth
+247
-247
@@ -13,264 +13,264 @@ const { version } = packageJson;
|
||||
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
|
||||
|
||||
const SubplebbitTitle = ({ address }) => {
|
||||
const subplebbitAddress = address;
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress });
|
||||
const title = subplebbit.title ?? null;
|
||||
const subplebbitAddress = address;
|
||||
const subplebbit = useSubplebbit({ subplebbitAddress });
|
||||
const title = subplebbit.title ?? null;
|
||||
|
||||
return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}> </span>}</>;
|
||||
return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}> </span>}</>;
|
||||
};
|
||||
|
||||
const Home = () => {
|
||||
const { bodyStyle, setBodyStyle, defaultSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle, setSelectedTitle } = useGeneralStore((state) => state);
|
||||
const { bodyStyle, setBodyStyle, defaultSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle, setSelectedTitle } = useGeneralStore((state) => state);
|
||||
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
const account = useAccount();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const inputRef = useRef(null);
|
||||
const prevStyle = useRef(selectedStyle);
|
||||
const prevBodyStyle = useRef(bodyStyle);
|
||||
const inputRef = useRef(null);
|
||||
const prevStyle = useRef(selectedStyle);
|
||||
const prevBodyStyle = useRef(bodyStyle);
|
||||
|
||||
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
|
||||
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
|
||||
|
||||
// prevent dark mode
|
||||
useEffect(() => {
|
||||
const currentPrevStyle = prevStyle.current;
|
||||
const currentPrevBodyStyle = prevBodyStyle.current;
|
||||
// prevent dark mode
|
||||
useEffect(() => {
|
||||
const currentPrevStyle = prevStyle.current;
|
||||
const currentPrevBodyStyle = prevBodyStyle.current;
|
||||
|
||||
setBodyStyle({
|
||||
background: '#ffe url(assets/fade.png) top repeat-x',
|
||||
color: 'maroon',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
});
|
||||
setSelectedStyle('Yotsuba');
|
||||
setBodyStyle({
|
||||
background: '#ffe url(assets/fade.png) top repeat-x',
|
||||
color: 'maroon',
|
||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||
});
|
||||
setSelectedStyle('Yotsuba');
|
||||
|
||||
return () => {
|
||||
setSelectedStyle(currentPrevStyle);
|
||||
setBodyStyle(currentPrevBodyStyle);
|
||||
};
|
||||
}, [setBodyStyle, setSelectedStyle]);
|
||||
return () => {
|
||||
setSelectedStyle(currentPrevStyle);
|
||||
setBodyStyle(currentPrevBodyStyle);
|
||||
};
|
||||
}, [setBodyStyle, setSelectedStyle]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
|
||||
<Helmet>
|
||||
<title>plebchan</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
<Tooltip id='tooltip' className='tooltip' />
|
||||
<Header>
|
||||
<Logo>
|
||||
<Link to='/'>
|
||||
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
|
||||
</Link>
|
||||
</Logo>
|
||||
</Header>
|
||||
<Page>
|
||||
<Search>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='"board.eth" or "12D3KooW..."'
|
||||
ref={inputRef}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
const address = inputRef.current.value;
|
||||
if (address) {
|
||||
setSelectedAddress(address);
|
||||
navigate(`/p/${address}`);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type='submit'
|
||||
value='Search'
|
||||
onClick={() => {
|
||||
const address = inputRef.current.value;
|
||||
if (address) {
|
||||
setSelectedAddress(address);
|
||||
navigate(`/p/${address}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Search>
|
||||
<About>
|
||||
<AboutTitle>
|
||||
<h2>What is plebchan?</h2>
|
||||
</AboutTitle>
|
||||
<AboutContent>
|
||||
<div id='content'>
|
||||
<p>
|
||||
Plebchan is the only serverless, adminless, fully decentralized 4chan alternative where any pleb can create and own unlimited boards, and nobody can
|
||||
take them down. Boards can always find competition, and board owners can monetize freely, so janitors aren't needed. Plebchan is a client for{' '}
|
||||
<a href='https://plebbit.com' target='_blank' rel='noreferrer'>
|
||||
plebbit
|
||||
</a>
|
||||
, a pure P2P protocol and tooling for creating decentralized forum applications. All data is just text, and plebchan's speed depends on how many users
|
||||
are{' '}
|
||||
<button
|
||||
style={{ all: 'unset', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
alert(
|
||||
'You can seed automatically simply by using the plebchan desktop app, which is a plebbit full node. Download it here:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can use plebbit-cli with the --seed flag:\nhttps://github.com/plebbit/plebbit-cli\n\n',
|
||||
);
|
||||
}}
|
||||
>
|
||||
seeding
|
||||
</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 />
|
||||
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
||||
<br />
|
||||
<p>
|
||||
{' '}
|
||||
HOW TO RUN A BOARD (currently via CLI only): <strong>(1)</strong> have a computer you can use as server, because users will connect to your board
|
||||
peer-to-peer; <strong>(2)</strong> go to{' '}
|
||||
<a href='https://github.com/plebbit/plebbit-cli#install' target='_blank' rel='noreferrer'>
|
||||
https://github.com/plebbit/plebbit-cli#install
|
||||
</a>{' '}
|
||||
and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings; <strong>(3)</strong> users can always connect to your
|
||||
board via its address, but it can be whitelisted by submitting a pull request here:{' '}
|
||||
<a href='https://github.com/plebbit/temporary-default-subplebbits' target='_blank' rel='noreferrer'>
|
||||
https://github.com/plebbit/temporary-default-subplebbits
|
||||
</a>{' '}
|
||||
this will be automated with a plebbit DAO using the plebbit token.
|
||||
</p>
|
||||
</div>
|
||||
</AboutContent>
|
||||
</About>
|
||||
{account?.subscriptions?.length > 0 ? (
|
||||
<Boards>
|
||||
<BoardsTitle>
|
||||
<h2>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>
|
||||
|
||||
<Link
|
||||
to='/p/subscriptions'
|
||||
id='view-all'
|
||||
onClick={() => {
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
>
|
||||
[view all]
|
||||
</Link>
|
||||
<br />
|
||||
{account?.subscriptions?.map((subscription, index) => (
|
||||
<Fragment key={`frag-${index}`}>
|
||||
<Link
|
||||
key={`sub-${index}`}
|
||||
className='boardlink'
|
||||
onClick={() => {
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
to={`/p/${subscription}`}
|
||||
>
|
||||
<br id='mobile-br' />
|
||||
{subscription}
|
||||
</Link>
|
||||
<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
|
||||
<br key={`br-${index}`} />
|
||||
</Fragment>
|
||||
))}
|
||||
<br id='mobile-br' />
|
||||
</BoardsContent>
|
||||
</Boards>
|
||||
) : null}
|
||||
<Boards>
|
||||
<BoardsTitle>
|
||||
<h2>Whitelisted Boards</h2>
|
||||
</BoardsTitle>
|
||||
<BoardsContent>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<div className='board' key={`board-${index}`}>
|
||||
<div className='board-title' key='board-title'>
|
||||
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
||||
</div>
|
||||
<div className='board-avatar-container' key='board-avatar-container'>
|
||||
<Link
|
||||
to={`/p/${subplebbit.address}`}
|
||||
key='link'
|
||||
onClick={() => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
>
|
||||
<BoardAvatar key='baordavatar' address={subplebbit.address} />
|
||||
</Link>
|
||||
<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
|
||||
</div>
|
||||
<div className='board-text' key='bt'>
|
||||
<b key='b'>{subplebbit.address}</b>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</BoardsContent>
|
||||
</Boards>
|
||||
</Page>
|
||||
<Footer>
|
||||
<ul>
|
||||
<li className='fill'></li>
|
||||
<li className='first'>
|
||||
<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
|
||||
Token
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd' target='_blank' rel='noopener noreferrer'>
|
||||
Donate
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
|
||||
Whitepaper
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://matrix.to/#/#plebbit:plebbitchat.org' target='_blank' rel='noopener noreferrer'>
|
||||
Matrix
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
|
||||
Telegram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Footer>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '11px',
|
||||
marginBottom: '2em',
|
||||
}}
|
||||
>
|
||||
plebchan v{version}
|
||||
{commitRef}. GPL-2.0
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
|
||||
<Helmet>
|
||||
<title>plebchan</title>
|
||||
</Helmet>
|
||||
<Container>
|
||||
<Tooltip id='tooltip' className='tooltip' />
|
||||
<Header>
|
||||
<Logo>
|
||||
<Link to='/'>
|
||||
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
|
||||
</Link>
|
||||
</Logo>
|
||||
</Header>
|
||||
<Page>
|
||||
<Search>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='"board.eth" or "12D3KooW..."'
|
||||
ref={inputRef}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
const address = inputRef.current.value;
|
||||
if (address) {
|
||||
setSelectedAddress(address);
|
||||
navigate(`/p/${address}`);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type='submit'
|
||||
value='Search'
|
||||
onClick={() => {
|
||||
const address = inputRef.current.value;
|
||||
if (address) {
|
||||
setSelectedAddress(address);
|
||||
navigate(`/p/${address}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Search>
|
||||
<About>
|
||||
<AboutTitle>
|
||||
<h2>What is plebchan?</h2>
|
||||
</AboutTitle>
|
||||
<AboutContent>
|
||||
<div id='content'>
|
||||
<p>
|
||||
Plebchan is the only serverless, adminless, fully decentralized 4chan alternative where any pleb can create and own unlimited boards, and nobody can
|
||||
take them down. Boards can always find competition, and board owners can monetize freely, so janitors aren't needed. Plebchan is a client for{' '}
|
||||
<a href='https://plebbit.com' target='_blank' rel='noreferrer'>
|
||||
plebbit
|
||||
</a>
|
||||
, a pure P2P protocol and tooling for creating decentralized forum applications. All data is just text, and plebchan's speed depends on how many users
|
||||
are{' '}
|
||||
<button
|
||||
style={{ all: 'unset', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
alert(
|
||||
'You can seed automatically simply by using the plebchan desktop app, which is a plebbit full node. Download it here:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, you can use plebbit-cli with the --seed flag:\nhttps://github.com/plebbit/plebbit-cli\n\n',
|
||||
);
|
||||
}}
|
||||
>
|
||||
seeding
|
||||
</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 />
|
||||
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
||||
<br />
|
||||
<p>
|
||||
{' '}
|
||||
HOW TO RUN A BOARD (currently via CLI only): <strong>(1)</strong> have a computer you can use as server, because users will connect to your board
|
||||
peer-to-peer; <strong>(2)</strong> go to{' '}
|
||||
<a href='https://github.com/plebbit/plebbit-cli#install' target='_blank' rel='noreferrer'>
|
||||
https://github.com/plebbit/plebbit-cli#install
|
||||
</a>{' '}
|
||||
and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings; <strong>(3)</strong> users can always connect to your
|
||||
board via its address, but it can be added below by submitting a pull request here:{' '}
|
||||
<a href='https://github.com/plebbit/temporary-default-subplebbits' target='_blank' rel='noreferrer'>
|
||||
https://github.com/plebbit/temporary-default-subplebbits
|
||||
</a>{' '}
|
||||
this will be automated with a plebbit DAO using the plebbit token.
|
||||
</p>
|
||||
</div>
|
||||
</AboutContent>
|
||||
</About>
|
||||
{account?.subscriptions?.length > 0 ? (
|
||||
<Boards>
|
||||
<BoardsTitle>
|
||||
<h2>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>
|
||||
|
||||
<Link
|
||||
to='/p/subscriptions'
|
||||
id='view-all'
|
||||
onClick={() => {
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
>
|
||||
[view all]
|
||||
</Link>
|
||||
<br />
|
||||
{account?.subscriptions?.map((subscription, index) => (
|
||||
<Fragment key={`frag-${index}`}>
|
||||
<Link
|
||||
key={`sub-${index}`}
|
||||
className='boardlink'
|
||||
onClick={() => {
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
to={`/p/${subscription}`}
|
||||
>
|
||||
<br id='mobile-br' />
|
||||
{subscription}
|
||||
</Link>
|
||||
<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
|
||||
<br key={`br-${index}`} />
|
||||
</Fragment>
|
||||
))}
|
||||
<br id='mobile-br' />
|
||||
</BoardsContent>
|
||||
</Boards>
|
||||
) : null}
|
||||
<Boards>
|
||||
<BoardsTitle>
|
||||
<h2>Default Boards</h2>
|
||||
</BoardsTitle>
|
||||
<BoardsContent>
|
||||
{defaultSubplebbits.map((subplebbit, index) => (
|
||||
<div className='board' key={`board-${index}`}>
|
||||
<div className='board-title' key='board-title'>
|
||||
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
||||
</div>
|
||||
<div className='board-avatar-container' key='board-avatar-container'>
|
||||
<Link
|
||||
to={`/p/${subplebbit.address}`}
|
||||
key='link'
|
||||
onClick={() => {
|
||||
setSelectedTitle(subplebbit.title);
|
||||
setSelectedAddress(subplebbit.address);
|
||||
window.scrollTo(0, 0);
|
||||
}}
|
||||
>
|
||||
<BoardAvatar key='baordavatar' address={subplebbit.address} />
|
||||
</Link>
|
||||
<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
|
||||
</div>
|
||||
<div className='board-text' key='bt'>
|
||||
<b key='b'>{subplebbit.address}</b>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</BoardsContent>
|
||||
</Boards>
|
||||
</Page>
|
||||
<Footer>
|
||||
<ul>
|
||||
<li className='fill'></li>
|
||||
<li className='first'>
|
||||
<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
|
||||
Token
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd' target='_blank' rel='noopener noreferrer'>
|
||||
Donate
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
|
||||
Whitepaper
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://matrix.to/#/#plebbit:plebbitchat.org' target='_blank' rel='noopener noreferrer'>
|
||||
Matrix
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
|
||||
Telegram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
|
||||
Twitter
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</Footer>
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
fontSize: '11px',
|
||||
marginBottom: '2em',
|
||||
}}
|
||||
>
|
||||
plebchan v{version}
|
||||
{commitRef}. GPL-2.0
|
||||
</div>
|
||||
</Container>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
Reference in New Issue
Block a user