diff --git a/README.md b/README.md index 522a649f..1f32cff5 100644 --- a/README.md +++ b/README.md @@ -4,40 +4,106 @@ _Telegram group for this repo https://t.me/fivechandev_ # 5chan -5chan is a serverless, adminless, decentralized and open-source 4chan alternative, where anyone can create and cryptographically own unlimited boards. All boards are selfhosted by their owners, who run [plebbit nodes](https://github.com/plebbit/plebbit-cli) that users connect to, peer-to-peer. All data is text-only, including links to load media/embeds. +5chan is a serverless, adminless, decentralized and open-source 4chan alternative built on the [Plebbit protocol](https://plebbit.com). It features the same directory structure as 4chan, but with a crucial difference: **anyone can create and own boards, and multiple boards can compete for each directory slot**. -- web version: https://5chan.app, also available using Brave/IPFS Companion on https://5chan.eth +## Key Features -### Downloads -- desktop version (full p2p plebbit node, seeds automatically): available for Mac/Windows/Linux, [download link in the release page](https://github.com/plebbit/5chan/releases/latest) -- mobile version: available for Android, [download link in the release page](https://github.com/plebbit/5chan/releases/latest) +### Decentralized Board Ownership +Unlike traditional imageboards, 5chan has no global admins or central authority. Anyone can create unlimited boards using their own [plebbit node](https://github.com/plebbit/plebbit-cli). Each board owner runs their own P2P node that users connect to peer-to-peer, giving them complete control over their board's content, moderation, and rules. -## How to create a board -In the plebbit protocol, a 5chan board is called a _subplebbit_. To run a subplebbit, you can choose between two options: +### Competitive Directory System +5chan maintains the familiar 4chan directory structure (Japanese Culture, Video Games, Interests, Creative, etc.), but introduces competition: **multiple boards can compete for each directory slot**. For example, there can be unlimited "Business & Finance" boards, but only the highest-voted one appears in the directory on the homepage. -1. If you prefer to use a **GUI**, download the desktop version of the Seedit client, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/seedit/releases/latest). Create a subplebbit using using the familiar old.reddit-like UI, and modify its settings to your liking. The app runs an IPFS node, meaning you have to keep it running to have your board online. -2. If you prefer to use a **command line interface**, install plebbit-cli, available for Windows, MacOS and Linux: [latest release](https://github.com/plebbit/plebbit-cli/releases/latest). Follow the instructions in the readme of the repo. When running the daemon for the first time, it will output WebUI links you can use to manage your subplebbit with the ease of the GUI. +Currently, directory assignments are temporarily handpicked by developers through GitHub pull requests. In the future, this will be fully automated through **gasless pubsub voting** (see [Future Roadmap](#future-roadmap) below), making the process completely decentralized and community-driven. -Peers can connect to your subplebbit using any plebbit client, such as 5chan or Seedit. They only need the subplebbit's address, which is not stored in any central database, as plebbit is a pure peer-to-peer protocol. +### How It Works -### How to add a board to the boards list -The boards list on 5chan is plebbit's [lists](https://github.com/plebbit/lists) repository, specifically the [5chan-multisub.json](https://github.com/plebbit/lists/blob/master/5chan-multisub.json) file. You can open a pull request in that repo to add your subplebbit to the list, or contact devs via telegram [@plebbit](https://t.me/plebbit). In the future, this process will be automated by submitting proposals to a plebbit DAO, using the [plebbit token](https://etherscan.io/token/0xea81dab2e0ecbc6b5c4172de4c22b6ef6e55bd8f). +- **Current System**: Developers manually curate directory assignments by reviewing pull requests to the [5chan-multisub.json](https://github.com/plebbit/lists/blob/master/5chan-multisub.json) file. This is temporary until DAO curation is implemented. -## To run locally +- **Future System**: 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 creates a competitive marketplace where board quality and community engagement determine directory placement. -1. Install Node v22 (Download from https://nodejs.org) -2. Install Yarn: `npm install -g yarn` -3. `yarn install --frozen-lockfile` to install 5chan dependencies -4. `yarn start` to run the web client +- **Accessing Boards**: Users can access any board at any time using its address, regardless of directory assignment. Boards can be accessed via the search bar, by subscribing to them (which adds them to the top bar), or by directly navigating to their address. -### Scripts: +### Future Roadmap -- Web client: `yarn start` -- Electron client (must start web client first): `yarn electron` -- Electron client and don't delete data: `yarn electron:no-delete-data` -- Web client and electron client: `yarn electron:start` -- Web client and electron client and don't delete data: `yarn electron:start:no-delete-data` +The protocol design for pubsub voting is already drafted in [plebbit-js issue #25](https://github.com/plebbit/plebbit-js/issues/25). This will enable: +- Gasless voting using pubsub topics +- Weighted voting based on token balances +- Automatic directory resolution based on vote tallies +- Full decentralization without any intermediaries -### Build: +This feature is on the plebbit-js roadmap but hasn't been implemented yet. -The linux/windows/mac/android build scripts are in https://github.com/plebbit/5chan/blob/master/.github/workflows/release.yml +## Downloads + +- **Web version**: https://5chan.app (also available using Brave/IPFS Companion on https://5chan.eth) +- **Desktop version** (full P2P plebbit node, seeds automatically): Available for Mac/Windows/Linux, [download from the release page](https://github.com/plebbit/5chan/releases/latest) +- **Mobile version**: Available for Android, [download from the release page](https://github.com/plebbit/5chan/releases/latest) + +## Creating a Board + +In the plebbit protocol, a 5chan board is called a _subplebbit_. To create and run a subplebbit, you can choose between two options: + +### Option 1: Seedit GUI Client (Recommended for beginners) + +1. Download the desktop version of the Seedit client, available for Windows, macOS, and Linux: [latest release](https://github.com/plebbit/seedit/releases/latest) +2. Create a subplebbit using the familiar old.reddit-like UI +3. Modify its settings to your liking +4. Keep the app running to keep your board online (it runs an IPFS node) + +### Option 2: plebbit-cli Command Line Interface + +1. Install plebbit-cli, available for Windows, macOS, and Linux: [latest release](https://github.com/plebbit/plebbit-cli/releases/latest) +2. Follow the instructions in the repo's README +3. When running the daemon for the first time, it will output WebUI links you can use to manage your subplebbit with a GUI + +Once created, anyone can connect to your subplebbit using any plebbit client (such as 5chan or Seedit) by using the subplebbit's address. The address is not stored in any central database—plebbit is a pure peer-to-peer protocol. + +## Submitting Your Board to a Directory + +To have your board appear in a directory on the 5chan homepage: + +1. Ensure your board meets these requirements: + - Active and well-moderated + - Relevant to the directory category + - **99% uptime** (since a board acts like its own server—it's a P2P node) + +2. Open a pull request on GitHub by editing the [5chan-multisub.json](https://github.com/plebbit/lists/blob/master/5chan-multisub.json) file + +3. Add your board's entry with: + - Title + - Address + - NSFW status (if applicable) + +4. The developers will review your PR and merge it if approved + +**Note**: Even if your board isn't assigned to a directory, users can still access it at any time using its address. Directory assignment only affects visibility on the homepage. + +## Development + +### Prerequisites + +- Node.js v22 (Download from https://nodejs.org) +- Yarn: `npm install -g yarn` + +### Setup + +1. Clone the repository +2. Install dependencies: `yarn install --frozen-lockfile` +3. Start the web client: `yarn start` + +### Scripts + +- **Web client**: `yarn start` +- **Electron client** (must start web client first): `yarn electron` +- **Electron client** (don't delete data): `yarn electron:no-delete-data` +- **Web client and electron client**: `yarn electron:start` +- **Web client and electron client** (don't delete data): `yarn electron:start:no-delete-data` + +### Build + +The Linux/Windows/macOS/Android build scripts are in [.github/workflows/release.yml](https://github.com/plebbit/5chan/blob/master/.github/workflows/release.yml) + +## License + +5chan is open-source software (GPLv2 license) with no owner—anyone can host their own instance on any domain. The operator of any domain is merely hosting the web app and does not own, create, moderate, or control 5chan or any board content, which is stored peer-to-peer and generated by board owners and users. diff --git a/src/components/directory-modal/directory-modal.tsx b/src/components/directory-modal/directory-modal.tsx index 527b6d02..1e8ac149 100644 --- a/src/components/directory-modal/directory-modal.tsx +++ b/src/components/directory-modal/directory-modal.tsx @@ -2,7 +2,7 @@ import useDirectoryModalStore from '../../stores/use-directory-modal-store'; import styles from './directory-modal.module.css'; const DirectoryModal = () => { - const { showModal, closeDirectoryModal } = useDirectoryModalStore(); + const { showModal, modalContext, closeDirectoryModal } = useDirectoryModalStore(); if (!showModal) { return null; @@ -14,32 +14,38 @@ const DirectoryModal = () => { } }; + const isPlaceholderContext = modalContext === 'placeholder'; + return (
-

Submit a Board to a Directory

+

{isPlaceholderContext ? 'Submit a Board to a Directory' : 'Create a Board'}

-

- The board you clicked on doesn't exist yet, but it can be yours! -

+ {isPlaceholderContext && ( +

+ The board you clicked on doesn't exist yet, but it can be yours! +

+ )} -
-

What is a directory board vs a regular board?

-

- On 5chan, anyone can create and connect to any board using its address. A "directory board" is simply a board that has been assigned to a specific - directory category (like "Anime & Manga" or "Video Games") in the boards list on the homepage. This assignment is temporary and - handpicked by the devs until DAO curation is implemented. -

-

- Important: Anyone can create a board and users can access it at any time, regardless of whether it'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's not added as a directory. Additionally, every - board has a "[Subscribe]" 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. -

-
+ {isPlaceholderContext && ( +
+

What is a directory board vs a regular board?

+

+ On 5chan, anyone can create and connect to any board using its address. A "directory board" is simply a board that has been assigned to a + specific directory category (like "Anime & Manga" or "Video Games") in the boards list on the homepage. This assignment is temporary + and handpicked by the devs until DAO curation is implemented. +

+

+ Important: Anyone can create a board and users can access it at any time, regardless of whether it'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's not added as a directory. Additionally, every + board has a "[Subscribe]" 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. +

+
+ )}

How to create your own board

@@ -54,17 +60,25 @@ const DirectoryModal = () => { . Once created, anyone can connect to your board using its address, regardless of whether it's assigned to a directory or not.

-
- -
-

Requirements for directory assignment

- 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's a P2P node). The devs review submissions and reserve the right to approve or reject them based - on these criteria. + Building a following: Every board has a "[Subscribe]" button that users can click to subscribe to your board. When users + subscribe, your board will appear in the top bar on the boards page, making it easy for them to access it. This means you can build a following and have + active users even if your board isn't assigned to a directory or known by the devs. Users can discover your board through direct links, word of mouth, + or by searching for your board address.

+ {isPlaceholderContext && ( +
+

Requirements for directory assignment

+

+ 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's a P2P node). The devs review submissions and reserve the right to approve or reject them + based on these criteria. +

+
+ )} +

How to submit your board

@@ -83,6 +97,16 @@ const DirectoryModal = () => { 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.

+

+ Discovery through voting pages: Each directory will have its own pubsub voting page that will serve as a discovery page for boards in that + category. Even low-voted or low-quality boards will appear in these voting lists, giving them visibility and helping them find users. This means boards + don't need to win the directory slot or be approved by devs to gain exposure—they can still be discovered and grow their subscriber base through the + voting pages. See the{' '} + + pubsub voting design draft + {' '} + for more details. +

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index 519f015c..5842ce4d 100644 --- a/src/components/topbar/topbar.tsx +++ b/src/components/topbar/topbar.tsx @@ -110,7 +110,7 @@ const TopBarDesktop = () => { )} [ - + openDirectoryModal('create-button')} style={{ cursor: 'pointer' }}> {t('create_board')} ] diff --git a/src/stores/use-directory-modal-store.ts b/src/stores/use-directory-modal-store.ts index 873aae9c..3ceed28a 100644 --- a/src/stores/use-directory-modal-store.ts +++ b/src/stores/use-directory-modal-store.ts @@ -1,17 +1,22 @@ import { create } from 'zustand'; +type ModalContext = 'placeholder' | 'create-button'; + interface DirectoryModalState { showModal: boolean; - openDirectoryModal: () => void; + modalContext: ModalContext; + openDirectoryModal: (context?: ModalContext) => void; closeDirectoryModal: () => void; } const useDirectoryModalStore = create((set) => ({ showModal: false, + modalContext: 'placeholder', - openDirectoryModal: () => { + openDirectoryModal: (context: ModalContext = 'placeholder') => { set({ showModal: true, + modalContext: context, }); }, diff --git a/src/views/home/boards-list/boards-list.tsx b/src/views/home/boards-list/boards-list.tsx index 121b9c7a..3c3ecb2b 100644 --- a/src/views/home/boards-list/boards-list.tsx +++ b/src/views/home/boards-list/boards-list.tsx @@ -49,7 +49,7 @@ const BoardsList = ({ multisub }: { multisub: MultisubSubplebbit[] }) => { // Handler for placeholder board links const handlePlaceholderClick = (e: React.MouseEvent) => { e.preventDefault(); - openDirectoryModal(); + openDirectoryModal('placeholder'); }; if (loading) {