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

feat(directory-modal): add modal explaining how to submit boards to directories

Browse Source
This commit is contained in:
plebeius
2025-11-06 16:23:55 +01:00
parent 36bd9c5c0f
commit e627b6b619
7 changed files with 340 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/directory-modal/directory-modal.module.css
+119
View File
@@ -0,0 +1,119 @@
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128, 128, 128, 0.5);
z-index: 999;
}
.directoryDialog {
position: absolute;
width: 500px;
top: 50px;
left: 50%;
margin-left: -251px;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(136, 0, 0);
color: rgb(136, 0, 0);
box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 0px 1px;
font-family: arial, helvetica, clean, sans-serif;
font-size: 13px;
line-height: 16.003px;
z-index: 1000;
}
@media (max-width: 600px) {
.directoryDialog {
width: calc(100% - 20px);
margin-left: -50%;
left: 50%;
max-width: 500px;
}
}
.hd {
position: relative;
background-color: rgb(136, 0, 0);
color: rgb(255, 255, 255);
padding: 4px 6px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hd h2 {
margin: 0;
padding: 0;
font-size: 131%;
font-weight: bold;
}
.closeButton {
all: unset;
cursor: pointer;
width: 16px;
height: 16px;
position: absolute;
top: 4px;
right: 4px;
background-image: var(--disclaimer-modal-close-button-background-image);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
.bd {
padding: 10px;
}
.introMessage {
font-size: 15px;
margin: 10px 0 20px 0;
text-align: center;
}
.introMessage strong {
font-weight: bold;
}
.section {
margin-bottom: 20px;
}
.section:last-child {
margin-bottom: 0;
}
.section h3 {
margin: 0 0 8px 0;
padding: 0;
font-size: 13px;
font-weight: bold;
color: rgb(136, 0, 0);
}
.section p {
margin: 0 0 12px 0;
font-size: 13px;
line-height: 16.003px;
}
.section p:last-child {
margin-bottom: 0;
}
.bd a {
color: rgb(136, 0, 0);
text-decoration: underline;
}
.directoryFooter {
padding: 10px;
display: flex;
justify-content: center;
gap: 10px;
}
src/components/directory-modal/directory-modal.tsx
+105
View File
@@ -0,0 +1,105 @@
import useDirectoryModalStore from '../../stores/use-directory-modal-store';
import styles from './directory-modal.module.css';
const DirectoryModal = () => {
const { showModal, closeDirectoryModal } = useDirectoryModalStore();
if (!showModal) {
return null;
}
const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget) {
closeDirectoryModal();
}
};
return (
<div className={styles.backdrop} onClick={handleBackdropClick}>
<div className={styles.directoryDialog}>
<div className={styles.hd}>
<h2>Submit a Board to a Directory</h2>
<button className={styles.closeButton} onClick={closeDirectoryModal} title='Close' />
</div>
<div className={styles.bd}>
<p className={styles.introMessage}>
<strong>The board you clicked on doesn&apos;t exist yet, but it can be yours!</strong>
</p>
<div className={styles.section}>
<h3>What is a directory board vs a regular board?</h3>
<p>
On 5chan, anyone can create and connect to any board using its address. A &quot;directory board&quot; is simply a board that has been assigned to a specific
directory category (like &quot;Anime & Manga&quot; or &quot;Video Games&quot;) in the boards list on the homepage. This assignment is temporary and
handpicked by the devs until DAO curation is implemented.
</p>
<p>
<strong>Important:</strong> Anyone can create a board and users can access it at any time, regardless of whether it&apos;s assigned to a directory or not.
You can use the search bar on the homepage to connect to any board address peer-to-peer, even if it&apos;s not added as a directory. Additionally, every
board has a &quot;[Subscribe]&quot; button—when you subscribe to a board, it will appear in the top bar on the boards page, making it easy to access your
favorite boards regardless of directory assignment.
</p>
</div>
<div className={styles.section}>
<h3>How to create your own board</h3>
<p>
You can create a board using either the{' '}
<a href='https://plebbit.github.io/docs/learn/clients/5chan/create-a-board' target='_blank' rel='noopener noreferrer'>
Seedit GUI client
</a>{' '}
or the{' '}
<a href='https://github.com/plebbit/plebbit-cli' target='_blank' rel='noopener noreferrer'>
plebbit-cli command line interface
</a>
. Once created, anyone can connect to your board using its address, regardless of whether it&apos;s assigned to a directory or not.
</p>
</div>
<div className={styles.section}>
<h3>Requirements for directory assignment</h3>
<p>
To have your board assigned to a directory, it should be active, well-moderated, and relevant to the directory category. Most importantly, it should have
99% uptime, since a board acts like its own server (it&apos;s a P2P node). The devs review submissions and reserve the right to approve or reject them based
on these criteria.
</p>
</div>
<div className={styles.section}>
<h3>How to submit your board</h3>
<p>
To request your board be added to a directory, open a pull request on GitHub by editing the{' '}
<a href='https://github.com/plebbit/lists/blob/master/5chan-multisub.json' target='_blank' rel='noopener noreferrer'>
5chan-multisub.json file
</a>
. Add your board&apos;s entry with its title, address, and NSFW status (if applicable). The devs will review your PR and merge it if approved.
</p>
</div>
<div className={styles.section}>
<h3>Future roadmap</h3>
<p>
In the future, directory board assignments will be determined through gasless voting using pubsub. Community members will vote on which board should be
assigned to each directory, and the highest voted board will automatically become the directory board. This will make the process fully decentralized and
community-driven.
</p>
</div>
<div className={styles.section}>
<h3>Dev veto power</h3>
<p>
While the devs reserve the right to change directory resolutions, this is done through commits in the fully open-source repository. There is no centralized
or server-side action required—anyone can change the directory resolution by modifying the code and redeploying to their own domain. 5chan is adminless, and
the app itself has no owner or central authority.
</p>
</div>
</div>
<div className={styles.directoryFooter}>
<button onClick={closeDirectoryModal}>Close</button>
</div>
</div>
</div>
);
};
export default DirectoryModal;
src/components/directory-modal/index.ts
+1
View File
@@ -0,0 +1 @@
export { default } from './directory-modal';
src/components/topbar/topbar.tsx
+4 -10
View File
@@ -6,6 +6,7 @@ import { useAccount, useAccountComment, useAccountSubplebbits } from '@plebbit/p
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import { TimeFilter } from '../board-buttons';
import useDirectoryModalStore from '../../stores/use-directory-modal-store';
import styles from './topbar.module.css';
import _, { debounce } from 'lodash';
@@ -75,6 +76,7 @@ const TopBarDesktop = () => {
const params = useParams();
const isInCatalogView = isCatalogView(location.pathname, params);
const [showSearchBar, setShowSearchBar] = useState(false);
const { openDirectoryModal } = useDirectoryModalStore();
const subscriptions = account?.subscriptions;
@@ -108,16 +110,8 @@ const TopBarDesktop = () => {
</>
)}
[
<span className={styles.temporaryButton}>
<a href='https://plebbit.github.io/docs/learn/clients/5chan/create-a-board' target='_blank' rel='noopener noreferrer'>
{t('create_board')}
</a>
</span>
] [
<span className={styles.temporaryButton}>
<a href='https://seedit.app/#/communities/vote' target='_blank' rel='noopener noreferrer'>
{t('vote')}
</a>
<span className={styles.temporaryButton} onClick={openDirectoryModal} style={{ cursor: 'pointer' }}>
{t('create_board')}
</span>
]
</span>
src/stores/use-directory-modal-store.ts
+25
View File
@@ -0,0 +1,25 @@
import { create } from 'zustand';
interface DirectoryModalState {
showModal: boolean;
openDirectoryModal: () => void;
closeDirectoryModal: () => void;
}
const useDirectoryModalStore = create<DirectoryModalState>((set) => ({
showModal: false,
openDirectoryModal: () => {
set({
showModal: true,
});
},
closeDirectoryModal: () => {
set({
showModal: false,
});
},
}));
export default useDirectoryModalStore;
src/views/home/boards-list/boards-list.tsx
+84 -76
View File
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { useDefaultSubplebbitsState, MultisubSubplebbit } from '../../../hooks/use-default-subplebbits';
import LoadingEllipsis from '../../../components/loading-ellipsis';
import useDisclaimerModalStore from '../../../stores/use-disclaimer-modal-store';
import useDirectoryModalStore from '../../../stores/use-directory-modal-store';
import useBoardsFilterStore from '../../../stores/use-boards-filter-store';
import BoardsFilterModal from './boards-filter-modal';
import styles from '../home.module.css';
@@ -31,6 +32,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
const navigate = useNavigate();
const { loading, error } = useDefaultSubplebbitsState();
const { showDisclaimerModal } = useDisclaimerModalStore();
const { openDirectoryModal } = useDirectoryModalStore();
const { useCatalogLinks, boardFilter } = useBoardsFilterStore();
const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, address: string) => {
@@ -44,6 +46,12 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
return `/p/${address}${useCatalogLinks ? '/catalog' : ''}`;
};
// Handler for placeholder board links
const handlePlaceholderClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
openDirectoryModal();
};
if (loading) {
return (
<div className={styles.box}>
@@ -108,32 +116,32 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime & Manga
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Cute
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Anime/Wallpapers
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Mecha
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cosplay & EGL
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cute/Male
</Link>
</li>
@@ -141,7 +149,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Flash
</Link>
</li>
@@ -149,17 +157,17 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Transportation
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Otaku Culture
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Virtual YouTubers
</Link>
</li>
@@ -175,42 +183,42 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<h3>Video Games</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Game Generals
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Multiplayer
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Mobile
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pokémon
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Retro Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/RPG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Video Games/Strategy
</Link>
</li>
@@ -226,77 +234,77 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<h3>Interests</h3>
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Comics & Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Technology
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Television & Film
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Weapons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Auto
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Animals & Nature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Traditional Games
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Extreme Sports
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Professional Wrestling
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Science & Math
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
History & Humanities
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Outdoors
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Toys
</Link>
</li>
@@ -311,7 +319,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<ul>
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Oekaki
</Link>
</li>
@@ -319,17 +327,17 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Papercraft & Origami
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Photography
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Food & Cooking
</Link>
</li>
@@ -337,14 +345,14 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Artwork/Critique
</Link>
</li>
)}
{(showAll || showNsfwOnly) && (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Wallpapers/General
</Link>
</li>
@@ -352,42 +360,42 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
{(showAll || showWorksafeOnly) && (
<>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Literature
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Music
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fashion
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
3DCG
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Graphic Design
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Do-It-Yourself
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Quests
</Link>
</li>
@@ -413,53 +421,53 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Business & Finance
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Travel
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Fitness
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Paranormal
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Advice
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
LGBT
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Pony
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Current News
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Worksafe Requests
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Very Important Posts
</Link>
</li>
@@ -474,12 +482,12 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<NSFWBadge />
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
ROBOT9001
</Link>
</li>
@@ -491,23 +499,23 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
</li>
) : (
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Politically Incorrect
</Link>
</li>
)}
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
International/Random
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Cams & Meetups
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Shit 4chan Says
</Link>
</li>
@@ -524,67 +532,67 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => {
<NSFWBadge />
<ul>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Sexy Beautiful Women
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hardcore
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Handsome Men
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Ecchi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yuri
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Hentai/Alternative
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Yaoi
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Torrents
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
High Resolution
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult GIF
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Cartoons
</Link>
</li>
<li>
<Link to='#' onClick={(e) => e.preventDefault()} className={styles.placeholder}>
<Link to='#' onClick={handlePlaceholderClick} className={styles.placeholder}>
Adult Requests
</Link>
</li>
src/views/home/home.tsx
+2
View File
@@ -10,6 +10,7 @@ import BoardsList from './boards-list';
import Version from '../../components/version';
import useDisclaimerModalStore from '../../stores/use-disclaimer-modal-store';
import DisclaimerModal from '../../components/disclaimer-modal';
import DirectoryModal from '../../components/directory-modal';
import _ from 'lodash';
// https://github.com/plebbit/lists/blob/master/5chan-multisub.json
@@ -186,6 +187,7 @@ const Home = () => {
return (
<>
<DisclaimerModal />
<DirectoryModal />
<div className={styles.content}>
<HomeLogo />
<SearchBar />