The goal of this plugin is to give users the ability to easily build custom pages with discourse. You can think of it like elementor, but for discourse.
example use case
Many DAOs use discourse categories as a place to collect and discuss grant proposals. To create a grant, the user needs to register in the forum, navigate to the grants category and press the "create topic button". A typical proposal is basically just a discourse thread. Creating such a thread is very easy for someone who knows: 1. What forum software is. 2. How to create an account and navigate this specific forum software. 3. How to properly format text in markdown.
In an ideal world this limitation should not exist. There are people out there, that dont have this knowledge and still have lots of worthwhile things to contribute.
The only "filter" to contribute to a DAO should be that you are curious and open minded enough to have a browser wallet installed.
So the page should only consist of a "Login with Etherum" button, the other grants (to act as a reference of what is expected) and a form with a button that says "submit proposal!"
grants are just an example
Grants are just one example for a "data piece" that is raw material and product of a DAO. People build the craziest things with the help of advanced custom fields, elementor and wordpress. The information architecture and the UX of the website can be entirely custom without ever writing a piece of code. This should also be possible with discourse.
clone this repo next to these two other repositories:
follow this guide to install your discourse developer instance.
Folder Structure
discourse <--- main discourse repository
web3-building-blocks <--- discourse plugin
web3-building-blocks-editor <-- vite react editor ui frontend
the discourse plugin is linked via a symbolic link into the main discourse repository. the link is created with these commands:
cd discourse/plugins
ln -s ../../web3-building-blocks/ .
the plugin.rb registers a new route for the editor frontend:
get '/editor' => 'editor#index'the controller behind it is responsible for statically serving the vite app that is developed in the web3-building-blocks-editor repository.
The build output directory is set to the public folder in this discourse plugin. So when we run
yarn build
in the editor frontend repository, the output files will end up in the right place in this current repo.
The page builder functionality will be build using craftjs.
The output of the page builder will be saved in the backend. This output will then be served by an api. The routes and hierarchy of the React components can then hydrate the page similar to how the script by @zauberfisch does it. Zauberfisch also recommended to use a second static front end for the actual users. (the users that see the final page, not the page building editor). So there will be another repositiory for this frontend that will feature the same UI lego blocks, but without the craftjs related logic.
contenders for the "post/topic" form:
I will probably try lexical. It is new, but seems better suited for React.
user interface lego blocks
The components will be build with ant design, because it addresses the most common needs and it is also geared towards react.
data fetching and state management
the data fetching will be done with rtk query. Using the "actions up data down" pattern with redux will hopefully avoid entanglement.
@Zauberfisch from the craftjs discord channel for sharing his experience with me on how he implemented a similar system.