---
# System prepended metadata

title: Browsers & Platforms team blog

---

# Browsers & Platforms team blog

repo: https://github.com/meandavejustice/blog-builder / https://github.com/meandavejustice/team-blog

## Features

- decentralized
- wallet logins/identity - proof of authorship
- published on IPFS
- pinning on web3.storage
- Easily adaptable to other teams/individuals
- Opportunity for user controlled subscriptions


## Creation

Writer will login to the SPA with magic.link. This will create a wallet for the writer.

The writer will use a markdown editor SPA that lives on IPFS to write and publish their blogpost. When the writer chooses to publish, the markdown is converted to html and uploaded to web3.storage, which will return a cid.

Once we have the cid we can deploy and update the blog's smart contract. This contract will maintain two different types of lists.
1. List of writers on the team
2. List of each writers blog post cids

## Displaying

The team blog will need an index page, this page will pull down the data from our smart contract and arrange out list of posts however we like. We may use something like [alchemy](https://www.alchemy.com/) to access this data.

## Search / indexing

In order to get established quickly to have these posts searchable and indexed for search engines, we may use [algolia](https://www.algolia.com/) to power out search. It's possible we could use [ipfs search](https://ipfs-search.com/#/) instead.

## Hosting/DNS

We will use dnslink to point to our index page

## Technologies

- IPFS
- [web3.storage](https://web3.storage/) for initial post uploads/cid generation
- [FVM](https://fvm.filecoin.io/) for contract?
- [alchemy](https://www.alchemy.com/) for communicating with contract
- [algolia](https://www.algolia.com/) or [ipfs search](https://ipfs-search.com/#/) for search/indexing
- [dnslink](https://dnslink.dev/)

## Future ideas


### User controlled client
After we have the team blog established and we can explore ideas around giving the user agency in consuming/subscribing to the content they want from this blog format.

Users could subscribe to Wallet IDs, these wallet ids could be associated with web2 modes of identity or [mobile Contacts API](https://hackmd.io/@browsers-n-platforms/H1-silhrj)

Once content is [indexed](#Search--indexing), user's can subscribe to certain topics and get updates from a smart contract that watches for new content containing these topics.

### Open Sourced Blog Engine (and beyond? :rocket:)

This software could easily be published in a highly reusable way, obviously first as a blog engine, but the patterns can be used for all sorts of other usecases, with all media types.


### Reasons for this Architecture over a "Jekyll style" static build
- Proof of authorship provided by on-chain transactions
- Separating concerns (rendering & content) makes adding new posts easier
- Ties immutable storage layer and mutable permissions layer together (IPFS + FVM contract)
- Defines pattern which can be applied to many other types of applications

### Why not IPNS updates over smart contract for authorship

Over IPFS Thing 2023, we discussed the idea of removing the smart contract and distributing a config file on ipfs which would be the source of truth for the blog, it would contain a list of posts and authors. and ipns record would be updated each time the config was modified. Unfortunately the key to publish to ipns doesn't allow this flexibility. If we go this route we would need to invent some sort of system for revoking and adding identities to the key. 

Using the smart contract to maintain a list of authors who can publish solves this problem for us. It allows the list to be dynamically updated, so adding or removing an author is easy. If we want to add more restrictions around who can and can't edit this list (an author role) we have the space to build that functionality in.

An additional benefit to the smart contract, which isn't fully demonstrated with a blog, is that it proves out a pattern for building robust and dynamic decentralized webapps. While this first version is using polygon for the contract (only because of delays with the filsnap metamask support), we plan to move this over to FVM so we can dogfood our own technology and explore further possibilities using fvm specific apis.

### Will the write costs raise as we add more items to the blog/author lists?

Slightly, the gas is calculated based on [opcodes](https://ethereum.org/en/developers/docs/evm/opcodes/) and [memory expansion](https://github.com/wolflo/evm-opcodes/blob/main/gas.md#a0-1-memory-expansion).

[Here is an example app](https://polygonscan.com/address/0x9fa9bcBB0D39eF349CFBc1F50296dc906050151C) that stores an array of over 20000 elements. Each element is a string of variable length, some that can get very large. There haven't been any gas costs above $0.02 cents. 

### Architecture diagrams

![](https://i.imgur.com/PHX2usS.png)

![](https://i.imgur.com/fc06dNC.png)

## User Stories
* As a Viewer of the Blog, I want to see proof that the author published the post
* As a Viewer of the Blog, I want to see the posts cid
* As a Viewer of the Blog, I want to be able to load posts I've seen before with an offline connection
* As a Viewer of the Blog, I want to see a very simple design (for the mvp)
* As a Viewer of the Blog, I want pin blog posts to my local node



* As an author, I want to use my walletid to publish posts in a verifiable way to the smart contract
* As an author, I want my posts to be hosted on IPFS
* As an author, I want a simple CLI tool to add my post to IPFS and add the post CID to the blog's smart contract
* As an author, I want


## Roadmap

### MVP
- User can publish their blog smart contract via CLI
    - Contents are markdown, published via web3.storage
- User can publish their blog viewer to IPFS - which functions as the index of their blog
- User can point an IPNS to their blog viewer via CLI
- User can publish blog posts via CLI
- Viewer can load a blog index and see a list of posts (and metadata)
- Viewer can select and view a specific post
- Viewer can see author, link to contract, and more metadata on posts
- Viewer is offline-first and can see blogs and posts from cache

### Phase 1
- Viewer made extendable/forkable to make your own skins
- User can login to an SPA (via magic.link)
- User can publish their blog smart contract via SPA
- User can publish blog posts via SPA
- Get design resources to explore displaying authorship and cid info



Time estimate (for mvp): 80-100hrs

Smart Contract (6 days):
- sample up on testnet
- tests

Viewer (1 week):
- Want it to be optimized (minified, bundled into one file)
- Basic styles, (black white grey), unopinionated
- Offline first - cache all calls to contract + fetch of CID
- Embeddable via iframe

CLI (3 days):
- Wrapper around hardhat actions for contract deployment
- Publishing tool (can be used manually or by CI)

Docs (1 day):
- Start to finish: How to setup, link DNS to your personal site, and publish posts


*Notes from Dietrich*
- abstract away the dep on web3.storage
- user has full copy locally (idb whatever) and syncs to remote service
- markdown first/native
- zerobackend is key - user can load from local ipfs node or gateway


### 4/15/2023 Updated Phase 2 after chat with Dietrich at IPFS Thing

- remove dependency on alchemy for reading from chain

Here are steps for new post:
1. Config cid is fetched from ipns
    - config contains:
        - array of author wallet ids
        - array of posts
2. Config is edited
   - Either updated list of authors
   - and/or updated list of posts
3. Config is signed and added to ipfs
4. ipns is updated with new config CID


## Progress Updates

### 5/9/2023

Blog is almost ready to deploy
Needs:
- CLI Tool finished up
- Decision on domain name/IPNS handling
- David will write an in-depth post on how the blog is written, why we chose the stack and how another team can use the tools
- Documentation needs to be improved
- 10 hours left on engineering time with trigram to complete/launch

### 2/20/2023
Update on progress of Team Blog:
- Contract is up on polygon mumbai testnet. https://mumbai.polygonscan.com/address/0x3B222225113495F4e74B7Cc2E1f7E7E6457e3701#code
- basic frontend layout is built with homepage/post listings page and post page

Next steps:
- Since contract was uploaded we're hooking up the frontend to pull from the contract instead of stubdata.
- Using a fork of https://github.com/frankfka/mkdn to publish the initial post and return CID for publishing to contract
- build out cli to:  handle deploying your contract as one command, another command for deploying your viewer to IPFS (and templating in your contract address), then another command for publishing posts which would just take the ipfs url as an arg

Links:
https://github.com/meandavejustice/blog-builder
https://github.com/meandavejustice/team-blog

Open questions:
- Do we have a domain?

