commit d0bc7f52fba32b24af67165498428fd40ed24ff1 · nekomimi.pet/atproto-ui

+35

README.md

···

       111
       111
        
       <LeafletDocument did={did} rkey={rkey} record={documentRecord} />

     

       112
       112
        
       ```

     

       113
       113
        
       

     

       114
       114
       +
       ### Using atcute Directly

     

       115
       115
       +
       

     

       116
       116
       +
       Use atcute directly to construct records and pass them to components—fully compatible!

     

       117
       117
       +
       

     

       118
       118
       +
       ```tsx

     

       119
       119
       +
       import { Client, simpleFetchHandler, ok } from '@atcute/client';

     

       120
       120
       +
       import type { AppBskyFeedPost } from '@atcute/bluesky';

     

       121
       121
       +
       import { BlueskyPost } from 'atproto-ui';

     

       122
       122
       +
       

     

       123
       123
       +
       // Create atcute client

     

       124
       124
       +
       const client = new Client({

     

       125
       125
       +
           handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })

     

       126
       126
       +
       });

     

       127
       127
       +
       

     

       128
       128
       +
       // Fetch a record

     

       129
       129
       +
       const data = await ok(

     

       130
       130
       +
           client.get('com.atproto.repo.getRecord', {

     

       131
       131
       +
               params: {

     

       132
       132
       +
                   repo: 'did:plc:ttdrpj45ibqunmfhdsb4zdwq',

     

       133
       133
       +
                   collection: 'app.bsky.feed.post',

     

       134
       134
       +
                   rkey: '3m45rq4sjes2h'

     

       135
       135
       +
               }

     

       136
       136
       +
           })

     

       137
       137
       +
       );

     

       138
       138
       +
       

     

       139
       139
       +
       const record = data.value as AppBskyFeedPost.Main;

     

       140
       140
       +
       

     

       141
       141
       +
       // Pass atcute record directly to component!

     

       142
       142
       +
       <BlueskyPost

     

       143
       143
       +
           did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"

     

       144
       144
       +
           rkey="3m45rq4sjes2h"

     

       145
       145
       +
           record={record}

     

       146
       146
       +
       />

     

       147
       147
       +
       ```

     

       148
       148
       +
       

     

       114
       149
        
       ## API Reference

     

       115
       150
        
       

     

       116
       151
        
       ### Components

+44 -1

src/App.tsx

···

       1
       1
        
       import React, { useState, useCallback, useRef } from "react";

     

       2
       2
        
       import { AtProtoProvider } from "../lib";

     

       3
       3
       -
       import "../lib/styles.css"

     

       3
       3
       +
       import "../lib/styles.css";

     

       4
       4
        
       import "./App.css";

     

       5
       5
        
       

     

       6
       6
        
       import { TangledString } from "../lib/components/TangledString";

     
···

       42
       42
        
           // Pass prefetched record—BlueskyPost won't re-fetch it

     

       43
       43
        
           return <BlueskyPost did={did} rkey={rkey} record={record} />;

     

       44
       44
        
       };`;

     

       45
       45
       +
       

     

       46
       46
       +
       const atcuteUsageSnippet = `import { Client, simpleFetchHandler, ok } from '@atcute/client';

     

       47
       47
       +
       import type { AppBskyFeedPost } from '@atcute/bluesky';

     

       48
       48
       +
       import { BlueskyPost } from 'atproto-ui';

     

       49
       49
       +
       

     

       50
       50
       +
       // Create atcute client

     

       51
       51
       +
       const client = new Client({

     

       52
       52
       +
           handler: simpleFetchHandler({ service: 'https://public.api.bsky.app' })

     

       53
       53
       +
       });

     

       54
       54
       +
       

     

       55
       55
       +
       // Fetch a record

     

       56
       56
       +
       const data = await ok(

     

       57
       57
       +
           client.get('com.atproto.repo.getRecord', {

     

       58
       58
       +
               params: {

     

       59
       59
       +
                   repo: 'did:plc:ttdrpj45ibqunmfhdsb4zdwq',

     

       60
       60
       +
                   collection: 'app.bsky.feed.post',

     

       61
       61
       +
                   rkey: '3m45rq4sjes2h'

     

       62
       62
       +
               }

     

       63
       63
       +
           })

     

       64
       64
       +
       );

     

       65
       65
       +
       

     

       66
       66
       +
       const record = data.value as AppBskyFeedPost.Main;

     

       67
       67
       +
       

     

       68
       68
       +
       // Pass atcute record directly to component!

     

       69
       69
       +
       <BlueskyPost

     

       70
       70
       +
           did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"

     

       71
       71
       +
           rkey="3m45rq4sjes2h"

     

       72
       72
       +
           record={record}

     

       73
       73
       +
       />`;

     

       45
       74
        
       

     

       46
       75
        
       const codeBlockBase: React.CSSProperties = {

     

       47
       76
        
       	fontFamily: 'Menlo, Consolas, "SFMono-Regular", ui-monospace, monospace',

     
···

       460
       489
        
       						style={codeTextStyle}

     

       461
       490
        
       					>

     

       462
       491
        
       						{prefetchedDataSnippet}

     

       492
       492
       +
       					</code>

     

       493
       493
       +
       				</pre>

     

       494
       494
       +
       				<p

     

       495
       495
       +
       					style={{

     

       496
       496
       +
       						color: `var(--demo-text-secondary)`,

     

       497
       497
       +
       						margin: "16px 0 8px",

     

       498
       498
       +
       					}}

     

       499
       499
       +
       				>

     

       500
       500
       +
       					Use atcute directly to construct records and pass them to

     

       501
       501
       +
       					components—fully compatible!

     

       502
       502
       +
       				</p>

     

       503
       503
       +
       				<pre style={codeBlockStyle}>

     

       504
       504
       +
       					<code className="language-tsx" style={codeTextStyle}>

     

       505
       505
       +
       						{atcuteUsageSnippet}

     

       463
       506
        
       					</code>

     

       464
       507
        
       				</pre>

     

       465
       508
        
       			</section>

+2 -1

tsconfig.lib.json

···

       18
       18
        
           "declarationDir": "dist-lib",

     

       19
       19
        
           "sourceMap": true,

     

       20
       20
        
           "outDir": "./lib-dist",

     

       21
       21
       -
           "rootDir": "./lib"

     

       21
       21
       +
           "rootDir": "./lib",

     

       22
       22
       +
           "types": ["@atcute/bluesky"]

     

       22
       23
        
         },

     

       23
       24
        
         "include": ["lib/**/*.ts", "lib/**/*.tsx"]

     

       24
       25
        
       }