project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5

Mind Palace

Proof of concept to generate Open Graph protocol object files, store & serve them from web3storage, and use them as embeds in tldraw canvas.

Mind Palace

Created At

HackFS 2024

Winner of

trophy

Fleek - Pool Prize

Prize Pool

Project Description

This project is a proof of concept to solve a problem I ran into while using tldraw to create canvases for developer education. Tldraw allows for embeds when a user pastes a url into the canvas. These embeds appear to follow Open Graph protocol standards but, sometimes the default OG object returned is ugly (specifically Loom video links!). I wanted to see if I could create my own custom OG objects to control the appearance of the embeds on the canvas. I was somewhat successful. :-)

How it's Made

Judges: I am so sorry I didn't update my READ ME. I didn't realize it until after I already set the ENS with the content hash, etc. and I dare not break it now! I will accept my public flogging after the hackathon.

=> Framework: Next.js => Tldraw: uses their out of the box site at tldraw.com --attempted to create custom shape to use the custom embed as a single click object but the sdk is a bit complex and I ran out of time => Filecoin storage helpers: web3storage/w3up -- attempted programmatic storage from inside app but struggled with docs for JS client. Used the CLI to create account, create a space, and upload image files and the OG object html files => Fleek: site deployed via Fleek. This was my first time using Fleek for a Next.js deployment but I worked it out and the site is live at: https://mammoth-vulture-straight.on-fleek.app/ I'm excited to have CI/CD with IPFS/CID friendly infra baked in => ENS: created a subdomain to my dawnkelly.eth name. Site is live at https://build.dawnkelly.eth.limo/ I had no idea this was even a thing until this hackathon. I'm looking forward to creating more of these subnames to host static sites, etc.

background image mobile

Join the mailing list

Get the latest news and updates