slices-teal-demo#

This is a demo app made with Slices. It ingests teal.fm records and displays the latest played tracks across the Atmosphere:

(Note teal.fm doesn't have an official hosted app yet so you'd have to get piper running to connect it to your Spotify or whatever.)

Prerequisites#

This is using Deno because the official Slices starter is using it, and I'm too lazy to change it. I'm not thrilled with that part, but installing it is pretty easy. You can also install the Deno VS Code extension to fix squiggly lines in VS Code.

To run the project, do deno task dev.

The Process#

1. I created the app with Slices CLI as described here
2. It made a slice for me, I set fm.teal as its primary namespace
3. I've manually added the fm.teal lexicons to it via web UI
4. I've pressed Sync in the web UI to backfill records
5. I've downloaded updated codegen from web UI and pasted it into src/generated_client.ts.

This is all the code I've needed to add (second commit):

const plays = await publicClient.fm.teal.alpha.feed.play.getRecords({
  sortBy: [{
    direction: 'desc',
    field: 'playedTime'
  }]
});
const authorProfiles = await publicClient.app.bsky.actor.profile.getRecords({
  where: {
    did: {
      in: Array.from(new Set(plays.records.map(rec => rec.did)))
    }
  },
})

These are passed to the component that displays them.

Very cool!