Signed in as {user.profile?.handle ?? user.did}
- -{:else} - -{/if} -``` - -`@foxui/core` also exports `Avatar`, `Input`, and other UI primitives you can use. - -### `src/routes/user/+page.svelte` (basic only) - -Only if the user chose `basic`. Create this file: - -```svelte - - -Signed in as {user.profile?.handle ?? user.did}
- - {:else} -Signed in as {user.did}
- -{:else} - -{/if} -``` - -### Write operations - -```ts -import { putRecord, deleteRecord, uploadBlob, createTID } from '$lib/atproto'; - -await putRecord({ - collection: 'your.collection.name', - rkey: createTID(), - record: { text: 'hello', createdAt: new Date().toISOString() } -}); - -await deleteRecord({ collection: 'your.collection.name', rkey: 'some-key' }); - -const blob = await uploadBlob({ blob: file }); -// For images, returns: { $type: 'blob', ref: { $link: string }, mimeType: string, size: number, aspectRatio: { width, height } } -// aspectRatio is auto-detected for image/* blobs, or you can pass it explicitly: -// await uploadBlob({ blob: file, aspectRatio: { width: 2000, height: 1144 } }) - -// Store the blob reference in a record -await putRecord({ - collection: 'your.collection.name', - rkey: createTID(), - record: { image: blob, createdAt: new Date().toISOString() } -}); -``` - -### Displaying blobs - -```ts -import { getBlobURL, getCDNImageBlobUrl } from '$lib/atproto'; - -// Option 1: Direct PDS URL (works for any blob type) -const url = await getBlobURL({ did: 'did:plc:...', blob: record.image }); - -// Option 2: Bluesky CDN URL (faster, cached, image-only, returns WebP thumbnails) -const cdnUrl = getCDNImageBlobUrl({ did: 'did:plc:...', blob: record.image }); -``` - -### Image compression helper - -The `image-helper.ts` module provides utilities for working with image blobs: - -```ts -import { compressImage, checkAndUploadImage, getImageFromRecord } from '$lib/atproto/image-helper'; - -// Compress an image before uploading (default: max 900KB, max 2048px dimension, outputs WebP) -const { blob: compressedBlob, aspectRatio } = await compressImage(file); -const uploaded = await uploadBlob({ blob: compressedBlob }); - -// Or use checkAndUploadImage to handle compression + upload in one step -// Works with File objects, string URLs (with an image proxy), or already-uploaded blob refs -const record = { image: someFileOrUrl }; -await checkAndUploadImage(record, 'image', '/api/image-proxy?url='); - -// Get a display URL from a record's blob field (handles blob refs, object URLs, and strings) -const displayUrl = getImageFromRecord(record, did, 'image'); -``` - -### Read operations (no auth needed) - -```ts -import { listRecords, getRecord, getDetailedProfile } from '$lib/atproto'; - -const records = await listRecords({ did: 'did:plc:...', collection: 'your.collection.name' }); -const profile = await getDetailedProfile({ did: 'did:plc:...' }); -``` diff --git a/examples/sveltekit-cloudflare-workers/GETTING_STARTED.md b/examples/sveltekit-cloudflare-workers/GETTING_STARTED.md deleted file mode 100644 index 7795216..0000000 --- a/examples/sveltekit-cloudflare-workers/GETTING_STARTED.md +++ /dev/null @@ -1,125 +0,0 @@ -# Getting Started - -## Prerequisites - -- [Node.js](https://nodejs.org/) v18+ -- [pnpm](https://pnpm.io/) -- A [Cloudflare account](https://dash.cloudflare.com/sign-up) (for production) - -## Local Development - -```sh -pnpm install -pnpm dev -``` - -That's it. In dev mode the app uses a loopback OAuth client — no keys, no Cloudflare setup, no secrets. It binds to `127.0.0.1` on the port defined in `src/lib/atproto/port.ts` (required for AT Protocol loopback OAuth). - -Open the URL shown in the terminal and log in with any Bluesky handle. - -## Configure your app - -Edit `src/lib/atproto/settings.ts` to set the collections your app reads/writes: - -```ts -export const permissions = { - collections: ['xyz.statusphere.status'], - rpc: {}, - blobs: [] -} as const; -``` - -The OAuth scope is auto-generated from this config. - -## Deploy to Production - -### 1. Create KV namespaces - -Prefix namespace names with your project name (the `name` field in `wrangler.jsonc`) so they're easy to identify when you have multiple projects on the same Cloudflare account: - -```sh -npx wrangler kv namespace createSigned in as {user.profile?.handle ?? user.did}
- -{:else} - -{/if} -``` - -### Option B: Simple inline login - -```svelte - - -{#if user.isLoggedIn} -Signed in as {user.did}
- -{:else} - -{/if} -``` - -### Write operations - -```ts -import { putRecord, deleteRecord, uploadBlob } from '$lib/atproto'; - -await putRecord({ - collection: 'your.collection.name', - rkey: 'some-key', - record: { text: 'hello', createdAt: new Date().toISOString() } -}); - -await deleteRecord({ collection: 'your.collection.name', rkey: 'some-key' }); - -const blob = await uploadBlob({ blob: file }); -``` - -### Read operations (no auth needed) - -```ts -import { listRecords, getRecord, getDetailedProfile } from '$lib/atproto'; - -const records = await listRecords({ did: 'did:plc:...', collection: 'your.collection.name' }); -const profile = await getDetailedProfile({ did: 'did:plc:...' }); -``` - -### Server load functions - -```ts -export const load = async ({ locals }) => { - if (!locals.client || !locals.did) return { data: null }; - - const response = await locals.client.get('com.atproto.repo.listRecords', { - params: { repo: locals.did, collection: 'your.collection.name' } - }); - - return { data: response.data }; -}; -``` - -## Dev with tunnel (optional) - -To test the confidential client flow locally: - -1. `pnpm env:setup-dev` -2. Add tunnel URL to `.env`: `OAUTH_PUBLIC_URL=https://your-tunnel.trycloudflare.com` -3. `pnpm tunnel` -4. `pnpm dev` - -Without `OAUTH_PUBLIC_URL`, dev mode uses a loopback public client (no keys needed). diff --git a/examples/sveltekit-cloudflare-workers/screenshot.png b/examples/sveltekit-cloudflare-workers/screenshot.png deleted file mode 100644 index 17218a0562824b839fa19029623f84a3bb83d88e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 226348 zcmeAS@N?(olHy`uVBq!ia0y~y;FMutVEw_t#=yXEZS8a=1_ltTuHU%$6yZ;!2+c`@~m
z`o*W0`4=7k{N3&QM1D8dx0edGuFVlp2