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 commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
|
||||||
|
|
||||||
const SubplebbitTitle = ({ address }) => {
|
const SubplebbitTitle = ({ address }) => {
|
||||||
const subplebbitAddress = address;
|
const subplebbitAddress = address;
|
||||||
const subplebbit = useSubplebbit({ subplebbitAddress });
|
const subplebbit = useSubplebbit({ subplebbitAddress });
|
||||||
const title = subplebbit.title ?? null;
|
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 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 account = useAccount();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const inputRef = useRef(null);
|
const inputRef = useRef(null);
|
||||||
const prevStyle = useRef(selectedStyle);
|
const prevStyle = useRef(selectedStyle);
|
||||||
const prevBodyStyle = useRef(bodyStyle);
|
const prevBodyStyle = useRef(bodyStyle);
|
||||||
|
|
||||||
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
|
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
|
||||||
|
|
||||||
// prevent dark mode
|
// prevent dark mode
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const currentPrevStyle = prevStyle.current;
|
const currentPrevStyle = prevStyle.current;
|
||||||
const currentPrevBodyStyle = prevBodyStyle.current;
|
const currentPrevBodyStyle = prevBodyStyle.current;
|
||||||
|
|
||||||
setBodyStyle({
|
setBodyStyle({
|
||||||
background: '#ffe url(assets/fade.png) top repeat-x',
|
background: '#ffe url(assets/fade.png) top repeat-x',
|
||||||
color: 'maroon',
|
color: 'maroon',
|
||||||
fontFamily: 'Helvetica, Arial, sans-serif',
|
fontFamily: 'Helvetica, Arial, sans-serif',
|
||||||
});
|
});
|
||||||
setSelectedStyle('Yotsuba');
|
setSelectedStyle('Yotsuba');
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
setSelectedStyle(currentPrevStyle);
|
setSelectedStyle(currentPrevStyle);
|
||||||
setBodyStyle(currentPrevBodyStyle);
|
setBodyStyle(currentPrevBodyStyle);
|
||||||
};
|
};
|
||||||
}, [setBodyStyle, setSelectedStyle]);
|
}, [setBodyStyle, setSelectedStyle]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
|
<CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>plebchan</title>
|
<title>plebchan</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<Container>
|
<Container>
|
||||||
<Tooltip id='tooltip' className='tooltip' />
|
<Tooltip id='tooltip' className='tooltip' />
|
||||||
<Header>
|
<Header>
|
||||||
<Logo>
|
<Logo>
|
||||||
<Link to='/'>
|
<Link to='/'>
|
||||||
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
|
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
|
||||||
</Link>
|
</Link>
|
||||||
</Logo>
|
</Logo>
|
||||||
</Header>
|
</Header>
|
||||||
<Page>
|
<Page>
|
||||||
<Search>
|
<Search>
|
||||||
<input
|
<input
|
||||||
type='text'
|
type='text'
|
||||||
placeholder='"board.eth" or "12D3KooW..."'
|
placeholder='"board.eth" or "12D3KooW..."'
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
if (event.key === 'Enter') {
|
if (event.key === 'Enter') {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const address = inputRef.current.value;
|
const address = inputRef.current.value;
|
||||||
if (address) {
|
if (address) {
|
||||||
setSelectedAddress(address);
|
setSelectedAddress(address);
|
||||||
navigate(`/p/${address}`);
|
navigate(`/p/${address}`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type='submit'
|
type='submit'
|
||||||
value='Search'
|
value='Search'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const address = inputRef.current.value;
|
const address = inputRef.current.value;
|
||||||
if (address) {
|
if (address) {
|
||||||
setSelectedAddress(address);
|
setSelectedAddress(address);
|
||||||
navigate(`/p/${address}`);
|
navigate(`/p/${address}`);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Search>
|
</Search>
|
||||||
<About>
|
<About>
|
||||||
<AboutTitle>
|
<AboutTitle>
|
||||||
<h2>What is plebchan?</h2>
|
<h2>What is plebchan?</h2>
|
||||||
</AboutTitle>
|
</AboutTitle>
|
||||||
<AboutContent>
|
<AboutContent>
|
||||||
<div id='content'>
|
<div id='content'>
|
||||||
<p>
|
<p>
|
||||||
Plebchan is the only serverless, adminless, fully decentralized 4chan alternative where any pleb can create and own unlimited boards, and nobody can
|
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{' '}
|
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'>
|
<a href='https://plebbit.com' target='_blank' rel='noreferrer'>
|
||||||
plebbit
|
plebbit
|
||||||
</a>
|
</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
|
, 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{' '}
|
are{' '}
|
||||||
<button
|
<button
|
||||||
style={{ all: 'unset', cursor: 'pointer' }}
|
style={{ all: 'unset', cursor: 'pointer' }}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
alert(
|
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',
|
'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
|
seeding
|
||||||
</button>
|
</button>
|
||||||
. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in!{' '}
|
. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in!{' '}
|
||||||
</p>
|
</p>
|
||||||
<br />
|
<br />
|
||||||
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
||||||
<br />
|
<br />
|
||||||
<p>
|
<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
|
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{' '}
|
peer-to-peer; <strong>(2)</strong> go to{' '}
|
||||||
<a href='https://github.com/plebbit/plebbit-cli#install' target='_blank' rel='noreferrer'>
|
<a href='https://github.com/plebbit/plebbit-cli#install' target='_blank' rel='noreferrer'>
|
||||||
https://github.com/plebbit/plebbit-cli#install
|
https://github.com/plebbit/plebbit-cli#install
|
||||||
</a>{' '}
|
</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
|
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:{' '}
|
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'>
|
<a href='https://github.com/plebbit/temporary-default-subplebbits' target='_blank' rel='noreferrer'>
|
||||||
https://github.com/plebbit/temporary-default-subplebbits
|
https://github.com/plebbit/temporary-default-subplebbits
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
this will be automated with a plebbit DAO using the plebbit token.
|
this will be automated with a plebbit DAO using the plebbit token.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</AboutContent>
|
</AboutContent>
|
||||||
</About>
|
</About>
|
||||||
{account?.subscriptions?.length > 0 ? (
|
{account?.subscriptions?.length > 0 ? (
|
||||||
<Boards>
|
<Boards>
|
||||||
<BoardsTitle>
|
<BoardsTitle>
|
||||||
<h2>Subscriptions</h2>
|
<h2>Subscriptions</h2>
|
||||||
</BoardsTitle>
|
</BoardsTitle>
|
||||||
<BoardsContent id='subscriptions'>
|
<BoardsContent id='subscriptions'>
|
||||||
<h3 style={{ textDecoration: 'underline', display: 'inline' }}>
|
<h3 style={{ textDecoration: 'underline', display: 'inline' }}>
|
||||||
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? 's' : null}
|
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? 's' : null}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
to='/p/subscriptions'
|
to='/p/subscriptions'
|
||||||
id='view-all'
|
id='view-all'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
[view all]
|
[view all]
|
||||||
</Link>
|
</Link>
|
||||||
<br />
|
<br />
|
||||||
{account?.subscriptions?.map((subscription, index) => (
|
{account?.subscriptions?.map((subscription, index) => (
|
||||||
<Fragment key={`frag-${index}`}>
|
<Fragment key={`frag-${index}`}>
|
||||||
<Link
|
<Link
|
||||||
key={`sub-${index}`}
|
key={`sub-${index}`}
|
||||||
className='boardlink'
|
className='boardlink'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}}
|
}}
|
||||||
to={`/p/${subscription}`}
|
to={`/p/${subscription}`}
|
||||||
>
|
>
|
||||||
<br id='mobile-br' />
|
<br id='mobile-br' />
|
||||||
{subscription}
|
{subscription}
|
||||||
</Link>
|
</Link>
|
||||||
<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
|
<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
|
||||||
<br key={`br-${index}`} />
|
<br key={`br-${index}`} />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
))}
|
))}
|
||||||
<br id='mobile-br' />
|
<br id='mobile-br' />
|
||||||
</BoardsContent>
|
</BoardsContent>
|
||||||
</Boards>
|
</Boards>
|
||||||
) : null}
|
) : null}
|
||||||
<Boards>
|
<Boards>
|
||||||
<BoardsTitle>
|
<BoardsTitle>
|
||||||
<h2>Whitelisted Boards</h2>
|
<h2>Default Boards</h2>
|
||||||
</BoardsTitle>
|
</BoardsTitle>
|
||||||
<BoardsContent>
|
<BoardsContent>
|
||||||
{defaultSubplebbits.map((subplebbit, index) => (
|
{defaultSubplebbits.map((subplebbit, index) => (
|
||||||
<div className='board' key={`board-${index}`}>
|
<div className='board' key={`board-${index}`}>
|
||||||
<div className='board-title' key='board-title'>
|
<div className='board-title' key='board-title'>
|
||||||
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
||||||
</div>
|
</div>
|
||||||
<div className='board-avatar-container' key='board-avatar-container'>
|
<div className='board-avatar-container' key='board-avatar-container'>
|
||||||
<Link
|
<Link
|
||||||
to={`/p/${subplebbit.address}`}
|
to={`/p/${subplebbit.address}`}
|
||||||
key='link'
|
key='link'
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setSelectedTitle(subplebbit.title);
|
setSelectedTitle(subplebbit.title);
|
||||||
setSelectedAddress(subplebbit.address);
|
setSelectedAddress(subplebbit.address);
|
||||||
window.scrollTo(0, 0);
|
window.scrollTo(0, 0);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<BoardAvatar key='baordavatar' address={subplebbit.address} />
|
<BoardAvatar key='baordavatar' address={subplebbit.address} />
|
||||||
</Link>
|
</Link>
|
||||||
<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
|
<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
|
||||||
</div>
|
</div>
|
||||||
<div className='board-text' key='bt'>
|
<div className='board-text' key='bt'>
|
||||||
<b key='b'>{subplebbit.address}</b>
|
<b key='b'>{subplebbit.address}</b>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</BoardsContent>
|
</BoardsContent>
|
||||||
</Boards>
|
</Boards>
|
||||||
</Page>
|
</Page>
|
||||||
<Footer>
|
<Footer>
|
||||||
<ul>
|
<ul>
|
||||||
<li className='fill'></li>
|
<li className='fill'></li>
|
||||||
<li className='first'>
|
<li className='first'>
|
||||||
<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
|
<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
|
||||||
Token
|
Token
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd' target='_blank' rel='noopener noreferrer'>
|
<a href='https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd' target='_blank' rel='noopener noreferrer'>
|
||||||
Donate
|
Donate
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
|
<a href='https://github.com/plebbit/whitepaper/discussions/2' target='_blank' rel='noopener noreferrer'>
|
||||||
Whitepaper
|
Whitepaper
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
|
<a href='https://github.com/plebbit/plebchan' target='_blank' rel='noopener noreferrer'>
|
||||||
GitHub
|
GitHub
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://matrix.to/#/#plebbit:plebbitchat.org' target='_blank' rel='noopener noreferrer'>
|
<a href='https://matrix.to/#/#plebbit:plebbitchat.org' target='_blank' rel='noopener noreferrer'>
|
||||||
Matrix
|
Matrix
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
|
<a href='https://t.me/plebbit' target='_blank' rel='noopener noreferrer'>
|
||||||
Telegram
|
Telegram
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
|
<a href='https://twitter.com/plebchan_eth' target='_blank' rel='noopener noreferrer'>
|
||||||
Twitter
|
Twitter
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
|
<a href='https://discord.gg/E7ejphwzGW' target='_blank' rel='noopener noreferrer'>
|
||||||
Discord
|
Discord
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Footer>
|
</Footer>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
fontSize: '11px',
|
fontSize: '11px',
|
||||||
marginBottom: '2em',
|
marginBottom: '2em',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
plebchan v{version}
|
plebchan v{version}
|
||||||
{commitRef}. GPL-2.0
|
{commitRef}. GPL-2.0
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Home;
|
export default Home;
|
||||||
|
|||||||
Reference in New Issue
Block a user