ATProto Browser

Record data

{
  "uri": "at://did:plc:fz3jhfpk2lhdh2mtiknp3e2d/com.whtwnd.blog.entry/3llklrerfua2s",
  "cid": "bafyreigei4zmt7xuflhei5cxnlj3b32z3iwazziqz3ramqwjxreruyklii",
  "value": {
    "$type": "com.whtwnd.blog.entry",
    "theme": "github-light",
    "title": "Webcomponent for sharing your Bookhive.buzz history",
    "content": "I've been using bookhive.buzz to track the books I've read this year and now as I think about remaking my personal website I decided I wanted a way to display what books I've finished lately and what I'm currently reading.\n\nUsually I'd do this in React but I decided I wanted to try something that more people could use so I decided to make it a webcomponent.\n\nHere's an example:\n\n<wc-bookhivebuzz did=\"did:plc:fz3jhfpk2lhdh2mtiknp3e2d\" />\n\nThe code is available [here](https://github.com/strass/wc-bookhivebuzz) and you can use it anywhere like this:\n```html\n<script src=\"path-to-web-component-file\"></script>\n\n<wc-bookhivebuzz \n  did=\"handle or DID here\"\n  // Optional:\n  limit=\"3\"\n  displayFinished=true\n  displayReading=true\n  displayWantToRead=false\n  displayAbandoned=false\n  displayOwned=false\n/>\n```\n\n## Tools & setup\n\nI bootstrapped the development process using `npm init @open-wc` which provided a starting point for lit, a webcomponent library. It comes with all sorts of helpful scripts and boilerplate to make building and testing easier.\n\nFor the actual AtProto work of retrieving records I only needed a few dependencies, `@atproto/xprc` for communicating with AtProto PDS and a few helpers from the `@atcute` suite which made resolving handlers and DIDs a snap.\n\nFinally `@lit/task` handled async operations for me and made it so I didn't have to build a system to handle pending and error states.\n\n## The development process\n- adapted the example basics\n- researched @lit/task for async actions & set up loadTask\n- wrote fetchRecords\n- fiddled with @atcute auth/access\n- task render pending/complete/error\n- refactor: filter status types\n- CSS basics\n- publishing\n\n## How was working with webcomponents?\n- For the most part using lit feels like a natural way to define webcomponents but didn't do research on alternatives\n- Jumped in to project without learning about the shadow DOM and other ways webcomponents are different which led to some difficulties with CSS scoping\n\n## Future work\n- When I get this running on SSR I will set up some caching.\n- Are CSS component queries ready yet? Would be nice",
    "createdAt": "2025-03-30T05:01:23.896Z",
    "visibility": "author"
  }
}