thogiti/town-square

a fully decentralized discussion platform built with Ethereum and IPFS

⛲ Town Square

A fully decentralized discussion platform built with Ethereum and IPFS

The aim of the project is to provide an embeddable discussion platform that's owned by everybody.

• An Ethereum smart contract is used to keep track of the comments and verify identities.

• IPFS is used to store the content of the comments.

Town Square is a project for the community. There is no token. The only costs are gas fees to the Ethereum network.

Town Square exists amorphously. It doesn't have a central homepage. It is built to be embedded. Each Town Square has all of the necessary tools to make more Town Squares.

Live Demos

• Blog Demo
• Reddit Demo

Start a new Thread

Click on "🌳 Start a new thread" in the footer of any Town Square to make your own thread.

Once you click "submit" you'll get a unique thread id. Use the following snippet to embed Town Square on your site.

<!-- the container div -->
<div id="town-square"></div>
<!-- include the css file somewhere in your source code -->
<link href="https://gitcdn.xyz/repo/WillWhiteneck/Town-Square/master/dist/town-square.css" rel="stylesheet">
<!-- include the script file, this needs to be below the div -->
<script
  src="https://gitcdn.xyz/repo/WillWhiteneck/Town-Square/master/dist/town-square.js"
  data-thread-id="<YOUR_THREAD_ID>">
</script>

If you'd rather not use a cdn, you can install Town Square with npm:

npm install town-square

Then reference the sources in node_modules

<div id="town-square"></div>
<link href="./node_modules/town-square/dist/town-square.css" rel="stylesheet">
<script
  src="./node_modules/town-square/dist/town-square.js"
  data-thread-id="<YOUR_THREAD_ID>">
</script>

Advanced Usage

Customize Town Square to suit your needs.

<script
  src="https://gitcdn.xyz/repo/WillWhiteneck/Town-Square/master/dist/town-square.js"* data-container-id="town-square"
  data-depth-limit="Infinity"
  data-editor-placeholder-reply="What are your thoughts?"
  data-editor-placeholder-top="What are your thoughts?"
  data-ethereum-url="https://mainnet.infura.io/v3/17a0bf02d6fb4fa9a97be85940caac51"
  data-ipfs-hash="QmVzUTPWBgkesyvqi7SaTLUgbHyZi1RgXLz5PGfT6Qv5pm"
  data-ipfs-url="https://ipfs.infura.io:5001"
  data-max-text-bytes="100000"
  data-thread-id="2"></script>

• data-container-id - references the id of the town-square container. If you want to use multiple embedded threads you will need to use a new script tag for each thread. (default: 'town-square')
• data-depth-limit - How deep comments can recurse before a new page is started. This should usually be 'Infinity' since the address bar will be modified otherwise. (default for embedded script: 'Infinity', default for standalone: 1)
• data-editor-placeholder-reply - The placeholder text in the comment reply editor. (default: 'What are your thoughts?')
• data-editor-placeholder-top - The placeholder text in the thread reply editor. (default: 'What are your thoughts?')
• data-ethereum-url - The default ethereum node URL. This gets overriden if the user has MetaMask. (default: https://mainnet.infura.io/v3/17a0bf02d6fb4fa9a97be85940caac51)
• data-ipfs-hash - The IPFS hash for the standalone Town Square reader. (default: <most_recent_release>)
• data-ipfs-url - The default ipfs gateway URL. the gateway must have no CORS restrictions and ideally will be nice enough to pin the incoming content. (default: https://ipfs.infura.io:5001)
• data-max-text-bytes - The maximum file size (in bytes) that Town Square will pull from IPFS. Somebody chould potentially cause problems if they upload a massive file as the comment content. Make sure this field is set small enough to prevent problems like that. (default: 100000 /* 100 kB */) x
• data-thread-id - The id of your thread. Make sure you set this if you are embedding Town Square on your website. (default: 0)

Development

Clone the repo

git clone https://github.com/WillWhiteneck/Town-Square.git
cd town-square

Run in development mode:

npm run dev

After you've made changes compile to the dist folder:

npm run build

TODO

• Display a person's comment history
• Configurable css themes
• Use an Ethereum identity service to optionally show names instead of addresses.