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
+255
-226
@@ -9,245 +9,274 @@ import CreateBoardModal from '../modals/CreateBoardModal';
|
|||||||
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
import useGeneralStore from '../../hooks/stores/useGeneralStore';
|
||||||
import packageJson from '../../../package.json';
|
import packageJson from '../../../package.json';
|
||||||
import { Tooltip } from 'react-tooltip';
|
import { Tooltip } from 'react-tooltip';
|
||||||
const {version} = packageJson;
|
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 subplebbitAddress = address;
|
||||||
|
const subplebbit = useSubplebbit({ subplebbitAddress });
|
||||||
|
const title = subplebbit.title ?? null;
|
||||||
|
|
||||||
const SubplebbitTitle = ({address}) => {
|
return <>{title ? <span>{title}</span> : <span style={{ userSelect: 'none' }}> </span>}</>;
|
||||||
const subplebbitAddress = address;
|
};
|
||||||
const subplebbit = useSubplebbit({subplebbitAddress});
|
|
||||||
const title = subplebbit.title ?? null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{title ? (
|
|
||||||
<span>{title}</span>
|
|
||||||
) : (
|
|
||||||
<span style={{userSelect: "none"}}> </span>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
const {
|
const { bodyStyle, setBodyStyle, defaultSubplebbits, setSelectedAddress, selectedStyle, setSelectedStyle, setSelectedTitle } = useGeneralStore((state) => state);
|
||||||
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);
|
||||||
|
|
||||||
// preload default subs and subscriptions
|
// preload default subs and subscriptions
|
||||||
useBufferedFeeds({
|
useBufferedFeeds({
|
||||||
feedsOptions: [
|
feedsOptions: [
|
||||||
{subplebbitAddresses: defaultSubplebbits.map(
|
{ subplebbitAddresses: defaultSubplebbits.map((subplebbit) => subplebbit.address), sortType: 'active' },
|
||||||
(subplebbit) => subplebbit.address
|
{ subplebbitAddresses: account?.subscriptions, sortType: 'active' },
|
||||||
), sortType: 'active'},
|
],
|
||||||
{subplebbitAddresses: account?.subscriptions, sortType: 'active'}
|
});
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 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
|
<Helmet>
|
||||||
selectedStyle={selectedStyle}
|
<title>plebchan</title>
|
||||||
isOpen={isCreateBoardOpen}
|
</Helmet>
|
||||||
closeModal={() => setIsCreateBoardOpen(false)} />
|
<Container>
|
||||||
<Helmet>
|
<Tooltip id='tooltip' className='tooltip' />
|
||||||
<title>plebchan</title>
|
<Header>
|
||||||
</Helmet>
|
<Logo>
|
||||||
<Container>
|
<Link to='/'>
|
||||||
<Tooltip id="tooltip" className="tooltip" />
|
<img alt='plebchan' src='assets/logo/logo-transparent.png' />
|
||||||
<Header>
|
</Link>
|
||||||
<Logo>
|
</Logo>
|
||||||
<Link to="/">
|
</Header>
|
||||||
<img alt="plebchan" src="assets/logo/logo-transparent.png" />
|
<Page>
|
||||||
</Link>
|
<Search>
|
||||||
</Logo>
|
<input
|
||||||
</Header>
|
type='text'
|
||||||
<Page>
|
placeholder='"board.eth" or "12D3KooW..."'
|
||||||
<Search>
|
ref={inputRef}
|
||||||
<input type="text" placeholder='"board.eth" or "12D3KooW..."' ref={inputRef} onKeyDown={
|
onKeyDown={(event) => {
|
||||||
(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 type="submit" value="Search" onClick={
|
<input
|
||||||
() => {
|
type='submit'
|
||||||
const address = inputRef.current.value;
|
value='Search'
|
||||||
if (address) {
|
onClick={() => {
|
||||||
setSelectedAddress(address);
|
const address = inputRef.current.value;
|
||||||
navigate(`/p/${address}`)
|
if (address) {
|
||||||
}
|
setSelectedAddress(address);
|
||||||
}
|
navigate(`/p/${address}`);
|
||||||
} />
|
}
|
||||||
</Search>
|
}}
|
||||||
<About>
|
/>
|
||||||
<AboutTitle>
|
</Search>
|
||||||
<h2>What is plebchan?</h2>
|
<About>
|
||||||
</AboutTitle>
|
<AboutTitle>
|
||||||
<AboutContent>
|
<h2>What is plebchan?</h2>
|
||||||
<div id="content">
|
</AboutTitle>
|
||||||
<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 a community; anyone can post comments, share media links, and <button style={{all: 'unset', cursor: 'pointer'}}
|
<AboutContent>
|
||||||
onClick={() =>{
|
<div id='content'>
|
||||||
window.electron && window.electron.isElectron ? (
|
<p>
|
||||||
setIsCreateBoardOpen(true)
|
Plebchan is the only serverless, adminless, fully decentralized 4chan alternative where you can create unlimited boards and nobody can take them down.
|
||||||
) : (
|
Plebchan is a client for{' '}
|
||||||
alert(
|
<a href='https://plebbit.com' target='_blank' rel='noreferrer'>
|
||||||
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n'
|
plebbit
|
||||||
)
|
</a>
|
||||||
)
|
, a pure P2P protocol and tooling for creating decentralized forum applications. Users don't need to register an account before participating in a
|
||||||
}}
|
community; anyone can post comments, share media links, and{' '}
|
||||||
>create a board</button>. All the content is just text, and plebchan's speed depends on how many users are <button style={{all: 'unset', cursor: 'pointer'}}
|
<button
|
||||||
onClick={() => {
|
style={{ all: 'unset', cursor: 'pointer' }}
|
||||||
alert(
|
onClick={() => {
|
||||||
'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'
|
window.electron && window.electron.isElectron
|
||||||
)
|
? setIsCreateBoardOpen(true)
|
||||||
}}
|
: alert(
|
||||||
>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>
|
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n',
|
||||||
<br />
|
);
|
||||||
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
}}
|
||||||
</div>
|
>
|
||||||
</AboutContent>
|
create a board
|
||||||
</About>
|
</button>
|
||||||
{account?.subscriptions?.length > 0 ? (
|
. All the content is just text, and plebchan's speed depends on how many users are{' '}
|
||||||
<Boards>
|
<button
|
||||||
<BoardsTitle>
|
style={{ all: 'unset', cursor: 'pointer' }}
|
||||||
<h2>Subscriptions</h2>
|
onClick={() => {
|
||||||
</BoardsTitle>
|
alert(
|
||||||
<BoardsContent id="subscriptions">
|
'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',
|
||||||
<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>
|
seeding
|
||||||
<br />
|
</button>
|
||||||
{account?.subscriptions?.map((subscription, index) => (
|
. Search for any board address above, or feel free to click on a popular board below that interests you and jump right in!{' '}
|
||||||
<Fragment key={`frag-${index}`}>
|
</p>
|
||||||
<Link key={`sub-${index}`} className="boardlink"
|
<br />
|
||||||
onClick={()=> {window.scrollTo(0, 0)}}
|
<p>There are no global rules, each board is completely independent and its owner decides how/if it should be moderated.</p>
|
||||||
to={`/p/${subscription}`}>
|
</div>
|
||||||
<br id="mobile-br" />
|
</AboutContent>
|
||||||
{subscription}
|
</About>
|
||||||
</Link>
|
{account?.subscriptions?.length > 0 ? (
|
||||||
<OfflineIndicator
|
<Boards>
|
||||||
key={`offline-${index}`}
|
<BoardsTitle>
|
||||||
address={subscription}
|
<h2>Subscriptions</h2>
|
||||||
className="disconnected"
|
</BoardsTitle>
|
||||||
isText={true} />
|
<BoardsContent id='subscriptions'>
|
||||||
<br key={`br-${index}`} />
|
<h3 style={{ textDecoration: 'underline', display: 'inline' }}>
|
||||||
</Fragment>
|
You have subscribed to {account?.subscriptions?.length} board{account?.subscriptions?.length > 1 ? 's' : null}
|
||||||
))}
|
</h3>
|
||||||
<br id="mobile-br" />
|
|
||||||
</BoardsContent>
|
<Link
|
||||||
</Boards>
|
to='/p/subscriptions'
|
||||||
) : null}
|
id='view-all'
|
||||||
<Boards>
|
onClick={() => {
|
||||||
<BoardsTitle>
|
window.scrollTo(0, 0);
|
||||||
<h2>Popular Boards</h2>
|
}}
|
||||||
</BoardsTitle>
|
>
|
||||||
<BoardsContent>
|
[view all]
|
||||||
{defaultSubplebbits.map((subplebbit, index) => (
|
</Link>
|
||||||
<div className="board" key={`board-${index}`}>
|
<br />
|
||||||
<div className="board-title" key="board-title">
|
{account?.subscriptions?.map((subscription, index) => (
|
||||||
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
<Fragment key={`frag-${index}`}>
|
||||||
</div>
|
<Link
|
||||||
<div className="board-avatar-container" key="board-avatar-container">
|
key={`sub-${index}`}
|
||||||
<Link to={`/p/${subplebbit.address}`} key="link" onClick={() => {
|
className='boardlink'
|
||||||
setSelectedTitle(subplebbit.title);
|
onClick={() => {
|
||||||
setSelectedAddress(subplebbit.address);
|
window.scrollTo(0, 0);
|
||||||
window.scrollTo(0, 0);
|
}}
|
||||||
}} >
|
to={`/p/${subscription}`}
|
||||||
<BoardAvatar key="baordavatar" address={subplebbit.address} />
|
>
|
||||||
</Link>
|
<br id='mobile-br' />
|
||||||
<OfflineIndicator
|
{subscription}
|
||||||
address={subplebbit.address}
|
</Link>
|
||||||
className="offline-indicator"
|
<OfflineIndicator key={`offline-${index}`} address={subscription} className='disconnected' isText={true} />
|
||||||
tooltipPlace="top"
|
<br key={`br-${index}`} />
|
||||||
key="oi2"/>
|
</Fragment>
|
||||||
</div>
|
))}
|
||||||
<div className="board-text" key="bt">
|
<br id='mobile-br' />
|
||||||
<b key="b">{subplebbit.address}</b>
|
</BoardsContent>
|
||||||
</div>
|
</Boards>
|
||||||
</div>
|
) : null}
|
||||||
))}
|
<Boards>
|
||||||
</BoardsContent>
|
<BoardsTitle>
|
||||||
</Boards>
|
<h2>Popular Boards</h2>
|
||||||
</Page>
|
</BoardsTitle>
|
||||||
<Footer>
|
<BoardsContent>
|
||||||
<ul>
|
{defaultSubplebbits.map((subplebbit, index) => (
|
||||||
<li className="fill"></li>
|
<div className='board' key={`board-${index}`}>
|
||||||
<li className="first">
|
<div className='board-title' key='board-title'>
|
||||||
<a href="https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f" target="_blank" rel="noopener noreferrer">Token</a>
|
{subplebbit.title ?? <SubplebbitTitle address={subplebbit.address} />}
|
||||||
</li>
|
</div>
|
||||||
<li>
|
<div className='board-avatar-container' key='board-avatar-container'>
|
||||||
<a href="https://gitcoin.co/grants/5515/plebbit-a-serverless-adminless-decentralized-redd" target="_blank" rel="noopener noreferrer">Donate</a>
|
<Link
|
||||||
</li>
|
to={`/p/${subplebbit.address}`}
|
||||||
<li>
|
key='link'
|
||||||
<a href="https://github.com/plebbit/whitepaper/discussions/2" target="_blank" rel="noopener noreferrer">Whitepaper</a>
|
onClick={() => {
|
||||||
</li>
|
setSelectedTitle(subplebbit.title);
|
||||||
<li>
|
setSelectedAddress(subplebbit.address);
|
||||||
<a href="https://github.com/plebbit/plebchan" target="_blank" rel="noopener noreferrer">GitHub</a>
|
window.scrollTo(0, 0);
|
||||||
</li>
|
}}
|
||||||
<li>
|
>
|
||||||
<a href="https://matrix.to/#/#plebbit:plebbitchat.org" target="_blank" rel="noopener noreferrer">Matrix</a>
|
<BoardAvatar key='baordavatar' address={subplebbit.address} />
|
||||||
</li>
|
</Link>
|
||||||
<li>
|
<OfflineIndicator address={subplebbit.address} className='offline-indicator' tooltipPlace='top' key='oi2' />
|
||||||
<a href="https://t.me/plebbit" target="_blank" rel="noopener noreferrer">Telegram</a>
|
</div>
|
||||||
</li>
|
<div className='board-text' key='bt'>
|
||||||
<li>
|
<b key='b'>{subplebbit.address}</b>
|
||||||
<a href="https://twitter.com/plebchan_eth" target="_blank" rel="noopener noreferrer">Twitter</a>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
<li>
|
))}
|
||||||
<a href="https://discord.gg/E7ejphwzGW" target="_blank" rel="noopener noreferrer">Discord</a>
|
</BoardsContent>
|
||||||
</li>
|
</Boards>
|
||||||
</ul>
|
</Page>
|
||||||
</Footer>
|
<Footer>
|
||||||
<div style={{
|
<ul>
|
||||||
textAlign: "center",
|
<li className='fill'></li>
|
||||||
fontSize: "11px",
|
<li className='first'>
|
||||||
marginBottom: "2em",
|
<a href='https://etherscan.io/token/0xEA81DaB2e0EcBc6B5c4172DE4c22B6Ef6E55Bd8f' target='_blank' rel='noopener noreferrer'>
|
||||||
}}>
|
Token
|
||||||
plebchan v{version}{commitRef}. GPL-2.0
|
</a>
|
||||||
</div>
|
</li>
|
||||||
</Container>
|
<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;
|
export default Home;
|
||||||
Reference in New Issue
Block a user