commit d0bc7f52fba32b24af67165498428fd40ed24ff1 · nekomimi.pet/atproto-ui

+35

README.md

···

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

     

       112
        
       ```

     

       113
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       114
        
       ## API Reference

     

       115
        
       

     

       116
        
       ### Components

···

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

     

       112
        
       ```

     

       113
        
       

     

       114
       +
       ### Using atcute Directly

     

       115
       +
       

     

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

     

       117
       +
       

     

       118
       +
       ```tsx

     

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

     

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

     

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

     

       122
       +
       

     

       123
       +
       // Create atcute client

     

       124
       +
       const client = new Client({

     

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

     

       126
       +
       });

     

       127
       +
       

     

       128
       +
       // Fetch a record

     

       129
       +
       const data = await ok(

     

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

     

       131
       +
               params: {

     

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

     

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

     

       134
       +
                   rkey: '3m45rq4sjes2h'

     

       135
       +
               }

     

       136
       +
           })

     

       137
       +
       );

     

       138
       +
       

     

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

     

       140
       +
       

     

       141
       +
       // Pass atcute record directly to component!

     

       142
       +
       <BlueskyPost

     

       143
       +
           did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"

     

       144
       +
           rkey="3m45rq4sjes2h"

     

       145
       +
           record={record}

     

       146
       +
       />

     

       147
       +
       ```

     

       148
       +
       

     

       149
        
       ## API Reference

     

       150
        
       

     

       151
        
       ### Components

+44 -1

src/App.tsx

···

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

     

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

     

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

     

       4
        
       import "./App.css";

     

       5
        
       

     

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

     
···

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

     

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

     

       44
        
       };`;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       45
        
       

     

       46
        
       const codeBlockBase: React.CSSProperties = {

     

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

     
···

       460
        
       						style={codeTextStyle}

     

       461
        
       					>

     

       462
        
       						{prefetchedDataSnippet}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       463
        
       					</code>

     

       464
        
       				</pre>

     

       465
        
       			</section>

···

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

     

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

     

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

     

       4
        
       import "./App.css";

     

       5
        
       

     

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

     
···

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

     

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

     

       44
        
       };`;

     

       45
       +
       

     

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

     

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

     

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

     

       49
       +
       

     

       50
       +
       // Create atcute client

     

       51
       +
       const client = new Client({

     

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

     

       53
       +
       });

     

       54
       +
       

     

       55
       +
       // Fetch a record

     

       56
       +
       const data = await ok(

     

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

     

       58
       +
               params: {

     

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

     

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

     

       61
       +
                   rkey: '3m45rq4sjes2h'

     

       62
       +
               }

     

       63
       +
           })

     

       64
       +
       );

     

       65
       +
       

     

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

     

       67
       +
       

     

       68
       +
       // Pass atcute record directly to component!

     

       69
       +
       <BlueskyPost

     

       70
       +
           did="did:plc:ttdrpj45ibqunmfhdsb4zdwq"

     

       71
       +
           rkey="3m45rq4sjes2h"

     

       72
       +
           record={record}

     

       73
       +
       />`;

     

       74
        
       

     

       75
        
       const codeBlockBase: React.CSSProperties = {

     

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

     
···

       489
        
       						style={codeTextStyle}

     

       490
        
       					>

     

       491
        
       						{prefetchedDataSnippet}

     

       492
       +
       					</code>

     

       493
       +
       				</pre>

     

       494
       +
       				<p

     

       495
       +
       					style={{

     

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

     

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

     

       498
       +
       					}}

     

       499
       +
       				>

     

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

     

       501
       +
       					components—fully compatible!

     

       502
       +
       				</p>

     

       503
       +
       				<pre style={codeBlockStyle}>

     

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

     

       505
       +
       						{atcuteUsageSnippet}

     

       506
        
       					</code>

     

       507
        
       				</pre>

     

       508
        
       			</section>

+2 -1

tsconfig.lib.json

···

       18
        
           "declarationDir": "dist-lib",

     

       19
        
           "sourceMap": true,

     

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

     

       21
       -
           "rootDir": "./lib"

     

       0
        
       
     

       22
        
         },

     

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

     

       24
        
       }

···

       18
        
           "declarationDir": "dist-lib",

     

       19
        
           "sourceMap": true,

     

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

     

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

     

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

     

       23
        
         },

     

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

     

       25
        
       }