···1-atcute-statusphere-app is a repository reimplementing atproto's Statusphere demo with atcute and SvelteKit.
023## development notes
4
···1+atcute-statusphere-app is a repository reimplementing atproto's Statusphere demo with atcute and
2+SvelteKit (with Svelte 5).
34## development notes
5
···1-# sv
0000000023-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
000000000045-## Creating a project
0067-If you're seeing this, you've probably already done this step. Congrats!
89-```sh
10-# create a new project in the current directory
11-npx sv create
0001213-# create a new project in my-app
14-npx sv create my-app
15-```
1617-## Developing
1819-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or
20-`yarn`), start a development server:
2122-```sh
23-npm run dev
02425-# or start the server and open the app in a new browser tab
26-npm run dev -- --open
27-```
2829-## Building
003031-To create a production version of your app:
3233-```sh
34-npm run build
35-```
3637-You can preview the production build with `npm run preview`.
3839-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for
40-> your target environment.
0
···1+# statusphere
2+3+a reimplementation of Bluesky's
4+[Statusphere example app](https://github.com/bluesky-social/statusphere-example-app), using
5+[atcute](https://github.com/mary-ext/atcute) and [SvelteKit](https://svelte.dev).
6+7+
8+9+## setup
1011+1. install dependencies:
12+13+ ```sh
14+ pnpm install
15+ ```
16+17+2. set up the environment variables:
18+19+ ```sh
20+ pnpm env:setup
21+ ```
2223+ this copies the `.env.example` file to `.env` with the following values filled in:
24+ - `COOKIE_SECRET` - random secret for signing cookies
25+ - `OAUTH_PRIVATE_KEY_JWK` - ES256 keypair for OAuth
2627+3. start a [Tap](https://github.com/bluesky-social/indigo/tree/main/cmd/tap) instance:
2829+ ```sh
30+ docker run -p 2480:2480 \
31+ -e TAP_SIGNAL_COLLECTION=xyz.statusphere.status \
32+ -e TAP_COLLECTION_FILTERS=xyz.statusphere.status,app.bsky.actor.profile \
33+ ghcr.io/bluesky-social/indigo/tap:latest
34+ ```
3536+ Tap handles subscribing to the atproto firehose, backfilling repos, and filtering events. we set
37+ it up such that it'd backfill all repos that have posted a status, and only emits events for
38+ status and profile records.
3940+ then configure the Tap connection:
4142+ ```sh
43+ TAP_URL=http://localhost:2480
4445+ # if configured with a password
46+ TAP_ADMIN_PASSWORD=
47+ ```
4849+4. configure the public-facing URL:
005051+ ```sh
52+ OAUTH_PUBLIC_URL=https://insulation-famous-bluetooth-secret.trycloudflare.com
53+ ```
5455+5. migrate the database:
5657+ ```sh
58+ pnpm db:migrate
59+ ```
6061+6. run it!
6263+ ```sh
64+ pnpm dev
65+ ```
···1+CREATE TABLE `app_session` (
2+ `id` text PRIMARY KEY NOT NULL,
3+ `did` text NOT NULL,
4+ `created_at` integer NOT NULL,
5+ `last_seen_at` integer NOT NULL
6+);
7+--> statement-breakpoint
8+CREATE INDEX `app_session_did_idx` ON `app_session` (`did`);--> statement-breakpoint
9+CREATE TABLE `identity` (
10+ `did` text PRIMARY KEY NOT NULL,
11+ `handle` text NOT NULL,
12+ `is_active` integer NOT NULL,
13+ `status` text NOT NULL,
14+ `updated_at` integer NOT NULL
15+);
16+--> statement-breakpoint
17+CREATE TABLE `oauth_session` (
18+ `did` text PRIMARY KEY NOT NULL,
19+ `session_json` text NOT NULL,
20+ `updated_at` integer NOT NULL
21+);
22+--> statement-breakpoint
23+CREATE INDEX `oauth_session_updated_at_idx` ON `oauth_session` (`updated_at`);--> statement-breakpoint
24+CREATE TABLE `oauth_state` (
25+ `key` text PRIMARY KEY NOT NULL,
26+ `state_json` text NOT NULL,
27+ `expires_at` integer NOT NULL
28+);
29+--> statement-breakpoint
30+CREATE INDEX `oauth_state_expires_at_idx` ON `oauth_state` (`expires_at`);--> statement-breakpoint
31+CREATE TABLE `profile` (
32+ `did` text PRIMARY KEY NOT NULL,
33+ `display_name` text,
34+ `record_json` text NOT NULL,
35+ `indexed_at` integer NOT NULL
36+);
37+--> statement-breakpoint
38+CREATE TABLE `status` (
39+ `uri` text PRIMARY KEY NOT NULL,
40+ `author_did` text NOT NULL,
41+ `rkey` text NOT NULL,
42+ `status` text NOT NULL,
43+ `created_at` text NOT NULL,
44+ `indexed_at` integer NOT NULL
45+);
46+--> statement-breakpoint
47+CREATE INDEX `status_indexed_at_idx` ON `status` (`indexed_at`);
···1<script lang="ts">
2 import favicon from '$lib/assets/favicon.svg';
034 let { children } = $props();
5</script>
···1<script lang="ts">
2 import favicon from '$lib/assets/favicon.svg';
3+ import '../app.css';
45 let { children } = $props();
6</script>
+94-2
src/routes/+page.svelte
···1-<h1>Welcome to SvelteKit</h1>
2-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
···7 // for more information about preprocessors
8 preprocess: vitePreprocess(),
900000010 kit: {
11 // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
12 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
13 // See https://svelte.dev/docs/kit/adapters for more information about adapters.
14 adapter: adapter(),
00015 },
16};
17
···7 // for more information about preprocessors
8 preprocess: vitePreprocess(),
910+ compilerOptions: {
11+ experimental: {
12+ async: true,
13+ },
14+ },
15+16 kit: {
17 // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
18 // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
19 // See https://svelte.dev/docs/kit/adapters for more information about adapters.
20 adapter: adapter(),
21+ experimental: {
22+ remoteFunctions: true,
23+ },
24 },
25};
26