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.
Screenshots
Problem Statement
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. :-)
Solution
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.