add another example site for @fujocoded/authproto

[haetae-bit]

This adds an example site titled __example_status__ that showcases how to add a "status" (similar to BlueSky's example app Statusphere). There's a README.md that has some steps and a process, with examples pointing to the code inside the site.

Let me know if there's something missing or if I should edit anything!

[essential-randomness]

You likely want to move this before getting statuses, which should also save you from having to use ! to access the user DID.

[essential-randomness]

Any reason you're also using the client side script and not just relying on the action submission?

[haetae-bit]

I couldn't figure out a way to alert the user that something happened without adding an extra page for redirection or code. On my initial testing, I get the updated list of statuses if I refreshed and I can only get that through client-side scripting.

[essential-randomness]

You can likely just do astro.config.mts and get the checks automatically. Don't quote me on that. I'm fairly sure it autochecks on my .mjs files? Maybe it's a VSCode setting.

[haetae-bit]

I also have VSCode and it autochecks on .mjs files. I think the // @ts-check gets included when you first spin up an Astro site. Should I get rid of it anyway?

[essential-randomness]

Do first a broad introduction to the repo/example, and set the scene for the more detailed explanation.

1. What to expect from this example. Quick take: This directory shows how to use @fujocoded/authproto to create and list your very own ATproto records! It builds on the simpler login example in [...], and assumes you're already familiar with that code.

2. How to use this repo. You can follow along the explanation below to walk the code together [note: I assume this is how you mean for it to be used], or jump straight into the action by looking at src/pages/status.astro (for how to list records) or src/actions/index.ts (for how to create records).

This is a great time to make sure you add a warning about "make sure you set scopes.genericData to true" if you want to create a record.

Then, you can go further into the explanation.

[essential-randomness]

Try giving first a high-level idea of what you're about to explain. Something like:

---

In our previous example (link), we saw how to use @fujocoded/authproto to log a user in and out of our site. This time, we'll see how to read and write data to the user's PDS so it can be shown and consumed by ATproto services, like Bluesky.

We'll cover:

1. Creating an ATproto Agent
2. Using the Agent to list records from a collection
3. Pairing up the Agent with Astro Actions to write records in a collection

---

Then you can match up the sections with the explanations you have. You can link to the titles so people can jump straight to the one they want.

[essential-randomness]

Coming back after reading ahead, I think you can probably get away without sections bulletpoints + sections later if we keep things very tight. We can give most explanations inline, and just point to the code parts we need. For example:

---

Before you start

Other than @fujocoded/authproto, you'll also need @atproto/api to use the code in this example. You can install it with

npm install @atproto/api

In this example

This example will show you how to:

• Create an ATproto Agent, which will interact with ATproto on your behalf. After installing @atproto/api, you can follow the instructions in [file] (or copy it as is), to create your own agent.
• Use our ATproto Agent to list records from a collection. You can follow the code here (link).
• Pairing up our ATproto Agent with Astro Actions to create new records in a collection. (link to the action, link to the form)

---

Some of your comments make more sense in context anyway. However, if you want to spend a little bit of words on what a "record" and "collection" is I won't stop you. Actually, we could workshop some of it together since I need to write an article about this anyway.

[essential-randomness]

One thing you might have noticed above: I swapped the position of reading and writing in your form. I think this is going to be easier to follow along with, but it means the first time this runs there won't be any status to show. An easy way to fix this is to add a couple statuses in the FujoCoded PDS and display those too, like:

---

Latest FujoVerse statuses

fujocoded.bsky.social says: "sure hope you'd support me on Patreon"
fujoweb.dev says: "catboys are hot"

Your statuses

You have no statuses. (or) Log in to create your own!

---

Let me know what you think. I don't want to make you do more work than necessary, but it's fairly quick to do if it's a good idea. It also shows you don't need to be logged in to do things like read statuses of random people.

[essential-randomness]

A decision to make: does the reader know how to use Astro actions already?

I think it's fair to just redirect them to the documentation on how to create a server that responds to user actions (theoretically, you already have a server in a non-static mode Astro site :P), and focus on the parts that are unique to authproto.

Alternatively, if you believe providing a skeleton of the action would help clarify here, we should figure out how much to provide. Personally, I'd at least add a fake action name, zod input, and just leave a "// your code goes here"