commit ab379b3ee346a24cca2d56a7ab364570991d55eb · pdsls.dev/pdsls

package.json

···

       19
       19
        
         },

     

       20
       20
        
         "dependencies": {

     

       21
       21
        
           "@atcute/client": "^2.0.4",

     

       22
       22
       +
           "@atcute/oauth-browser-client": "^1.0.5",

     

       22
       23
        
           "@solidjs/router": "^0.15.1",

     

       23
       24
        
           "hls.js": "^1.5.17",

     

       24
       25
        
           "public-transport": "file:pkg/pt.tgz",

+18

pnpm-lock.yaml

···

       11
       11
        
             '@atcute/client':

     

       12
       12
        
               specifier: ^2.0.4

     

       13
       13
        
               version: 2.0.4

     

       14
       14
       +
             '@atcute/oauth-browser-client':

     

       15
       15
       +
               specifier: ^1.0.5

     

       16
       16
       +
               version: 1.0.5

     

       14
       17
        
             '@solidjs/router':

     

       15
       18
        
               specifier: ^0.15.1

     

       16
       19
        
               version: 0.15.1(solid-js@1.9.3)

     
···

       60
       63
        
       

     

       61
       64
        
         '@atcute/client@2.0.4':

     

       62
       65
        
           resolution: {integrity: sha512-bKA6KEOmrdhU2CDRNp13M4WyKN0EdrVLKJffzPo62ANSTMacz5hRJhmvQYwuo7BZSGIoDql4sH+QR6Xbk3DERg==}

     

       66
       66
       +
       

     

       67
       67
       +
         '@atcute/oauth-browser-client@1.0.5':

     

       68
       68
       +
           resolution: {integrity: sha512-UUs2WFMh22rXOapRM848WfWtvgaxV/ji0tEupFrrBYe2i+/UlwhXcphlqdwm43LBsFtMWtV1Xsy2zmnItf0Akg==}

     

       63
       69
        
       

     

       64
       70
        
         '@babel/code-frame@7.26.2':

     

       65
       71
        
           resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}

     
···

       914
       920
        
           engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}

     

       915
       921
        
           hasBin: true

     

       916
       922
        
       

     

       923
       923
       +
         nanoid@5.0.8:

     

       924
       924
       +
           resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}

     

       925
       925
       +
           engines: {node: ^18 || >=20}

     

       926
       926
       +
           hasBin: true

     

       927
       927
       +
       

     

       917
       928
        
         node-fetch-native@1.6.4:

     

       918
       929
        
           resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}

     

       919
       930
        
       

     
···

       1203
       1214
        
         '@antfu/utils@0.7.10': {}

     

       1204
       1215
        
       

     

       1205
       1216
        
         '@atcute/client@2.0.4': {}

     

       1217
       1217
       +
       

     

       1218
       1218
       +
         '@atcute/oauth-browser-client@1.0.5':

     

       1219
       1219
       +
           dependencies:

     

       1220
       1220
       +
             '@atcute/client': 2.0.4

     

       1221
       1221
       +
             nanoid: 5.0.8

     

       1206
       1222
        
       

     

       1207
       1223
        
         '@babel/code-frame@7.26.2':

     

       1208
       1224
        
           dependencies:

     
···

       2030
       2046
        
         ms@2.1.3: {}

     

       2031
       2047
        
       

     

       2032
       2048
        
         nanoid@3.3.7: {}

     

       2049
       2049
       +
       

     

       2050
       2050
       +
         nanoid@5.0.8: {}

     

       2033
       2051
        
       

     

       2034
       2052
        
         node-fetch-native@1.6.4: {}

     

       2035
       2053

+12

public/client-metadata.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "client_id": "https://pdsls.dev/client-metadata.json",

     

       3
       3
       +
         "client_name": "pdsls",

     

       4
       4
       +
         "client_uri": "https://pdsls.dev",

     

       5
       5
       +
         "redirect_uris": ["https://pdsls.dev/"],

     

       6
       6
       +
         "scope": "atproto transition:generic",

     

       7
       7
       +
         "grant_types": ["authorization_code", "refresh_token"],

     

       8
       8
       +
         "response_types": ["code"],

     

       9
       9
       +
         "token_endpoint_auth_method": "none",

     

       10
       10
       +
         "application_type": "web",

     

       11
       11
       +
         "dpop_bound_access_tokens": true

     

       12
       12
       +
       }

+92 -5

src/App.tsx src/main.tsx

···

       1
       1
       -
       import { createSignal, onMount, For, Show, type Component } from "solid-js";

     

       1
       1
       +
       import {

     

       2
       2
       +
         createSignal,

     

       3
       3
       +
         onMount,

     

       4
       4
       +
         For,

     

       5
       5
       +
         Show,

     

       6
       6
       +
         type Component,

     

       7
       7
       +
         onCleanup,

     

       8
       8
       +
         createEffect,

     

       9
       9
       +
       } from "solid-js";

     

       2
       10
        
       import { CredentialManager, XRPC } from "@atcute/client";

     

       3
       11
        
       import {

     

       4
       12
        
         ComAtprotoRepoDescribeRepo,

     
···

       15
       23
        
         useLocation,

     

       16
       24
        
         useParams,

     

       17
       25
        
       } from "@solidjs/router";

     

       18
       18
       -
       import { JSONValue } from "./lib/json.jsx";

     

       26
       26
       +
       import { JSONValue } from "./components/json.jsx";

     

       19
       27
        
       import {

     

       20
       28
        
         AiFillGithub,

     

       21
       29
        
         Bluesky,

     
···

       23
       31
        
         BsClipboardCheck,

     

       24
       32
        
         TbMoonStar,

     

       25
       33
        
         TbSun,

     

       26
       26
       -
       } from "./lib/svg.jsx";

     

       34
       34
       +
       } from "./components/svg.jsx";

     

       27
       35
        
       import { authenticate_post } from "public-transport";

     

       36
       36
       +
       import { agent, loginState, LoginStatus } from "./components/login.jsx";

     

       28
       37
        
       

     

       29
       38
        
       let rpc = new XRPC({

     

       30
       39
        
         handler: new CredentialManager({ service: "https://public.api.bsky.app" }),

     
···

       109
       118
        
       const RecordView: Component = () => {

     

       110
       119
        
         const params = useParams();

     

       111
       120
        
         const [record, setRecord] = createSignal<ComAtprotoRepoGetRecord.Output>();

     

       121
       121
       +
         const [modal, setModal] = createSignal<HTMLDialogElement>();

     

       122
       122
       +
         const [open, setOpen] = createSignal(false);

     

       123
       123
       +
       

     

       124
       124
       +
         let clickEvent = (event: MouseEvent) => {

     

       125
       125
       +
           if (modal() && event.target == modal()) setOpen(false);

     

       126
       126
       +
         };

     

       127
       127
       +
         let keyEvent = (event: KeyboardEvent) => {

     

       128
       128
       +
           if (modal() && event.key == "Escape") setOpen(false);

     

       129
       129
       +
         };

     

       112
       130
        
       

     

       113
       131
        
         onMount(async () => {

     

       132
       132
       +
           window.addEventListener("click", clickEvent);

     

       133
       133
       +
           window.addEventListener("keydown", keyEvent);

     

       114
       134
        
           setNotice("Loading...");

     

       115
       135
        
           setPDS(params.pds);

     

       116
       136
        
           let pds =

     
···

       131
       151
        
           }

     

       132
       152
        
         });

     

       133
       153
        
       

     

       154
       154
       +
         onCleanup(() => {

     

       155
       155
       +
           window.removeEventListener("click", clickEvent);

     

       156
       156
       +
           window.removeEventListener("keydown", keyEvent);

     

       157
       157
       +
         });

     

       158
       158
       +
       

     

       134
       159
        
         const getRecord = query(

     

       135
       160
        
           (repo: string, collection: string, rkey: string) =>

     

       136
       161
        
             rpc.get("com.atproto.repo.getRecord", {

     
···

       139
       164
        
           "getRecord",

     

       140
       165
        
         );

     

       141
       166
        
       

     

       167
       167
       +
         const deleteRecord = action(async () => {

     

       168
       168
       +
           rpc = new XRPC({ handler: agent });

     

       169
       169
       +
           rpc.call("com.atproto.repo.deleteRecord", {

     

       170
       170
       +
             data: {

     

       171
       171
       +
               repo: params.repo,

     

       172
       172
       +
               collection: params.collection,

     

       173
       173
       +
               rkey: params.rkey,

     

       174
       174
       +
             },

     

       175
       175
       +
           });

     

       176
       176
       +
           throw redirect(`/at/${params.repo}/${params.collection}`);

     

       177
       177
       +
         });

     

       178
       178
       +
       

     

       179
       179
       +
         createEffect(() => {

     

       180
       180
       +
           if (open()) document.body.style.overflow = "hidden";

     

       181
       181
       +
           else document.body.style.overflow = "auto";

     

       182
       182
       +
         });

     

       183
       183
       +
       

     

       142
       184
        
         return (

     

       143
       185
        
           <Show when={record()}>

     

       186
       186
       +
             <Show when={loginState() && agent.sub === params.repo}>

     

       187
       187
       +
               <div class="flex w-full justify-center">

     

       188
       188
       +
                 <Show when={open()}>

     

       189
       189
       +
                   <dialog

     

       190
       190
       +
                     ref={setModal}

     

       191
       191
       +
                     class="fixed left-0 top-0 z-[2] flex h-screen w-screen items-center justify-center bg-transparent font-sans"

     

       192
       192
       +
                   >

     

       193
       193
       +
                     <div class="dark:bg-dark-400 rounded-md border border-slate-900 bg-slate-100 p-4 text-slate-900 dark:border-slate-100 dark:text-slate-100">

     

       194
       194
       +
                       <h3 class="text-lg font-bold">Delete this record?</h3>

     

       195
       195
       +
                       <form action={deleteRecord} method="post">

     

       196
       196
       +
                         <div class="mt-2 inline-flex gap-2">

     

       197
       197
       +
                           <button

     

       198
       198
       +
                             onclick={() => setOpen(false)}

     

       199
       199
       +
                             class="dark:bg-dark-900 dark:hover:bg-dark-800 rounded-lg bg-white px-2.5 py-1.5 text-sm font-bold hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-700 dark:focus:ring-slate-300"

     

       200
       200
       +
                           >

     

       201
       201
       +
                             Cancel

     

       202
       202
       +
                           </button>

     

       203
       203
       +
                           <button

     

       204
       204
       +
                             type="submit"

     

       205
       205
       +
                             class="rounded-lg bg-red-500 px-2.5 py-1.5 text-sm font-bold text-slate-100 hover:bg-red-400 focus:outline-none focus:ring-2 focus:ring-slate-700 dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-slate-300"

     

       206
       206
       +
                           >

     

       207
       207
       +
                             Delete

     

       208
       208
       +
                           </button>

     

       209
       209
       +
                         </div>

     

       210
       210
       +
                       </form>

     

       211
       211
       +
                     </div>

     

       212
       212
       +
                   </dialog>

     

       213
       213
       +
                 </Show>

     

       214
       214
       +
                 <button

     

       215
       215
       +
                   onclick={() => setOpen(true)}

     

       216
       216
       +
                   class="rounded-lg bg-red-500 px-2.5 py-1.5 font-sans text-sm font-bold text-slate-100 hover:bg-red-400 focus:outline-none focus:ring-2 focus:ring-slate-700 dark:bg-red-600 dark:hover:bg-red-500 dark:focus:ring-slate-300"

     

       217
       217
       +
                 >

     

       218
       218
       +
                   Delete

     

       219
       219
       +
                 </button>

     

       220
       220
       +
               </div>

     

       221
       221
       +
             </Show>

     

       144
       222
        
             <div class="overflow-y-auto pl-4">

     

       145
       223
        
               <JSONValue data={record() as any} repo={record()!.uri.split("/")[2]} />

     

       146
       224
        
             </div>

     
···

       387
       465
        
         setNotice("");

     

       388
       466
        
       

     

       389
       467
        
         return (

     

       390
       390
       -
           <div class="m-5 flex flex-col items-center text-slate-900 dark:text-slate-100">

     

       468
       468
       +
           <div

     

       469
       469
       +
             id="main"

     

       470
       470
       +
             class="m-5 flex flex-col items-center text-slate-900 dark:text-slate-100"

     

       471
       471
       +
           >

     

       391
       472
        
             <div class="mb-2 flex w-[20rem] items-center">

     

       392
       392
       -
               <div class="basis-1/3">

     

       473
       473
       +
               <div class="flex basis-1/3 gap-x-2">

     

       393
       474
        
                 <div

     

       394
       475
        
                   class="w-fit cursor-pointer"

     

       395
       476
        
                   onclick={() => {

     
···

       404
       485
        
                     <TbMoonStar class="size-6" />

     

       405
       486
        
                   : <TbSun class="size-6" />}

     

       406
       487
        
                 </div>

     

       488
       488
       +
                 <Show when={!loginState()}>

     

       489
       489
       +
                   <div>

     

       490
       490
       +
                     <A href="/login">Login</A>

     

       491
       491
       +
                   </div>

     

       492
       492
       +
                 </Show>

     

       407
       493
        
               </div>

     

       408
       494
        
               <div class="basis-1/3 text-center font-mono text-xl font-bold">

     

       409
       495
        
                 <A href="/" class="hover:underline">

     
···

       422
       508
        
                 </a>

     

       423
       509
        
               </div>

     

       424
       510
        
             </div>

     

       511
       511
       +
             <LoginStatus />

     

       425
       512
        
             <div class="mb-5 flex max-w-full flex-col items-center text-pretty lg:max-w-screen-lg">

     

       426
       513
        
               <form

     

       427
       514
        
                 class="flex flex-col items-center gap-y-1"

+159

src/components/login.tsx

···

       1
       1
       +
       import { createSignal, onMount, Show, type Component } from "solid-js";

     

       2
       2
       +
       import {

     

       3
       3
       +
         configureOAuth,

     

       4
       4
       +
         createAuthorizationUrl,

     

       5
       5
       +
         finalizeAuthorization,

     

       6
       6
       +
         getSession,

     

       7
       7
       +
         OAuthUserAgent,

     

       8
       8
       +
         resolveFromIdentity,

     

       9
       9
       +
         type Session,

     

       10
       10
       +
       } from "@atcute/oauth-browser-client";

     

       11
       11
       +
       import { At } from "@atcute/client/lexicons";

     

       12
       12
       +
       

     

       13
       13
       +
       configureOAuth({

     

       14
       14
       +
         metadata: {

     

       15
       15
       +
           client_id: import.meta.env.VITE_OAUTH_CLIENT_ID,

     

       16
       16
       +
           redirect_uri: import.meta.env.VITE_OAUTH_REDIRECT_URL,

     

       17
       17
       +
         },

     

       18
       18
       +
       });

     

       19
       19
       +
       

     

       20
       20
       +
       const [loginState, setLoginState] = createSignal(false);

     

       21
       21
       +
       const [notice, setNotice] = createSignal("");

     

       22
       22
       +
       const [handle, setHandle] = createSignal("");

     

       23
       23
       +
       let agent: OAuthUserAgent;

     

       24
       24
       +
       

     

       25
       25
       +
       const resolveDid = async (did: string) => {

     

       26
       26
       +
         const res = await fetch(

     

       27
       27
       +
           did.startsWith("did:web") ?

     

       28
       28
       +
             `https://${did.split(":")[2]}/.well-known/did.json`

     

       29
       29
       +
           : "https://plc.directory/" + did,

     

       30
       30
       +
         );

     

       31
       31
       +
       

     

       32
       32
       +
         return res

     

       33
       33
       +
           .json()

     

       34
       34
       +
           .then((doc) => {

     

       35
       35
       +
             for (const alias of doc.alsoKnownAs) {

     

       36
       36
       +
               if (alias.includes("at://")) {

     

       37
       37
       +
                 return alias.split("//")[1];

     

       38
       38
       +
               }

     

       39
       39
       +
             }

     

       40
       40
       +
           })

     

       41
       41
       +
           .catch(() => "");

     

       42
       42
       +
       };

     

       43
       43
       +
       

     

       44
       44
       +
       const Login: Component = () => {

     

       45
       45
       +
         const [loginInput, setLoginInput] = createSignal("");

     

       46
       46
       +
       

     

       47
       47
       +
         const loginBsky = async (handle: string) => {

     

       48
       48
       +
           try {

     

       49
       49
       +
             setNotice(`Resolving your identity...`);

     

       50
       50
       +
             const resolved = await resolveFromIdentity(handle);

     

       51
       51
       +
       

     

       52
       52
       +
             setNotice(`Contacting your data server...`);

     

       53
       53
       +
             const authUrl = await createAuthorizationUrl({

     

       54
       54
       +
               scope: import.meta.env.VITE_OAUTH_SCOPE,

     

       55
       55
       +
               ...resolved,

     

       56
       56
       +
             });

     

       57
       57
       +
       

     

       58
       58
       +
             setNotice(`Redirecting...`);

     

       59
       59
       +
             await new Promise((resolve) => setTimeout(resolve, 250));

     

       60
       60
       +
       

     

       61
       61
       +
             location.assign(authUrl);

     

       62
       62
       +
           } catch {

     

       63
       63
       +
             setNotice("Error during OAuth login");

     

       64
       64
       +
           }

     

       65
       65
       +
         };

     

       66
       66
       +
       

     

       67
       67
       +
         return (

     

       68
       68
       +
           <div class="mt-2 font-sans">

     

       69
       69
       +
             <form class="flex flex-col" onsubmit={(e) => e.preventDefault()}>

     

       70
       70
       +
               <div class="w-full">

     

       71
       71
       +
                 <label for="handle" class="ml-0.5 text-sm">

     

       72
       72
       +
                   Handle

     

       73
       73
       +
                 </label>

     

       74
       74
       +
               </div>

     

       75
       75
       +
               <div class="flex gap-x-2">

     

       76
       76
       +
                 <input

     

       77
       77
       +
                   type="text"

     

       78
       78
       +
                   id="handle"

     

       79
       79
       +
                   placeholder="user.bsky.social"

     

       80
       80
       +
                   class="dark:bg-dark-100 rounded-lg border border-gray-400 px-2 py-1 focus:outline-none focus:ring-1 focus:ring-gray-300"

     

       81
       81
       +
                   onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       82
       82
       +
                 />

     

       83
       83
       +
                 <button

     

       84
       84
       +
                   onclick={() => loginBsky(loginInput())}

     

       85
       85
       +
                   class="dark:bg-dark-700 dark:hover:bg-dark-800 rounded-lg border border-gray-400 bg-white px-2.5 py-1.5 text-sm font-bold hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-300"

     

       86
       86
       +
                 >

     

       87
       87
       +
                   Login

     

       88
       88
       +
                 </button>

     

       89
       89
       +
               </div>

     

       90
       90
       +
             </form>

     

       91
       91
       +
             <Show when={notice()}>

     

       92
       92
       +
               <div class="mt-2">{notice()}</div>

     

       93
       93
       +
             </Show>

     

       94
       94
       +
           </div>

     

       95
       95
       +
         );

     

       96
       96
       +
       };

     

       97
       97
       +
       

     

       98
       98
       +
       const LoginStatus: Component = () => {

     

       99
       99
       +
         onMount(async () => {

     

       100
       100
       +
           setNotice("Loading...");

     

       101
       101
       +
       

     

       102
       102
       +
           const init = async (): Promise<Session | undefined> => {

     

       103
       103
       +
             const params = new URLSearchParams(location.hash.slice(1));

     

       104
       104
       +
       

     

       105
       105
       +
             if (params.has("state") && (params.has("code") || params.has("error"))) {

     

       106
       106
       +
               history.replaceState(null, "", location.pathname + location.search);

     

       107
       107
       +
       

     

       108
       108
       +
               const session = await finalizeAuthorization(params);

     

       109
       109
       +
               const did = session.info.sub;

     

       110
       110
       +
       

     

       111
       111
       +
               localStorage.setItem("lastSignedIn", did);

     

       112
       112
       +
               return session;

     

       113
       113
       +
             } else {

     

       114
       114
       +
               const lastSignedIn = localStorage.getItem("lastSignedIn");

     

       115
       115
       +
       

     

       116
       116
       +
               if (lastSignedIn) {

     

       117
       117
       +
                 try {

     

       118
       118
       +
                   return await getSession(lastSignedIn as At.DID);

     

       119
       119
       +
                 } catch (err) {

     

       120
       120
       +
                   localStorage.removeItem("lastSignedIn");

     

       121
       121
       +
                   throw err;

     

       122
       122
       +
                 }

     

       123
       123
       +
               }

     

       124
       124
       +
             }

     

       125
       125
       +
           };

     

       126
       126
       +
       

     

       127
       127
       +
           const session = await init().catch(() => {});

     

       128
       128
       +
       

     

       129
       129
       +
           if (session) {

     

       130
       130
       +
             agent = new OAuthUserAgent(session);

     

       131
       131
       +
             setHandle(await resolveDid(agent.sub));

     

       132
       132
       +
             setLoginState(true);

     

       133
       133
       +
           }

     

       134
       134
       +
       

     

       135
       135
       +
           setNotice("");

     

       136
       136
       +
         });

     

       137
       137
       +
       

     

       138
       138
       +
         const logoutBsky = async () => {

     

       139
       139
       +
           setLoginState(false);

     

       140
       140
       +
           await agent.signOut();

     

       141
       141
       +
         };

     

       142
       142
       +
       

     

       143
       143
       +
         return (

     

       144
       144
       +
           <Show when={loginState() && handle()}>

     

       145
       145
       +
             <div>

     

       146
       146
       +
               Logged in as @{handle()}

     

       147
       147
       +
               <a

     

       148
       148
       +
                 href=""

     

       149
       149
       +
                 class="ml-2 text-red-500 dark:text-red-400"

     

       150
       150
       +
                 onclick={() => logoutBsky()}

     

       151
       151
       +
               >

     

       152
       152
       +
                 Logout

     

       153
       153
       +
               </a>

     

       154
       154
       +
             </div>

     

       155
       155
       +
           </Show>

     

       156
       156
       +
         );

     

       157
       157
       +
       };

     

       158
       158
       +
       

     

       159
       159
       +
       export { Login, LoginStatus, loginState, agent };

src/index.css src/styles/index.css

+5 -3

src/index.tsx

···

       1
       1
        
       /* @refresh reload */

     

       2
       2
        
       import { render } from "solid-js/web";

     

       3
       3
        
       import "virtual:uno.css";

     

       4
       4
       -
       import "./tailwind-compat.css";

     

       5
       5
       -
       import "./index.css";

     

       4
       4
       +
       import "./styles/tailwind-compat.css";

     

       5
       5
       +
       import "./styles/index.css";

     

       6
       6
        
       import { Route, Router } from "@solidjs/router";

     

       7
       7
        
       import {

     

       8
       8
        
         Layout,

     
···

       11
       11
        
         RecordView,

     

       12
       12
        
         RepoView,

     

       13
       13
        
         Home,

     

       14
       14
       -
       } from "./App.tsx";

     

       14
       14
       +
       } from "./main.tsx";

     

       15
       15
       +
       import { Login } from "./components/login.tsx";

     

       15
       16
        
       

     

       16
       17
        
       render(

     

       17
       18
        
         () => (

     

       18
       19
        
           <Router root={Layout}>

     

       19
       20
        
             <Route path="/" component={Home} />

     

       21
       21
       +
             <Route path="/login" component={Login} />

     

       20
       22
        
             <Route path="/:pds" component={PdsView} />

     

       21
       23
        
             <Route path="/:pds/:repo" component={RepoView} />

     

       22
       24
        
             <Route path="/:pds/:repo/:collection" component={CollectionView} />

src/lib/json.tsx src/components/json.tsx

src/lib/svg.tsx src/components/svg.tsx

src/lib/video-player.tsx src/components/video-player.tsx

src/tailwind-compat.css src/styles/tailwind-compat.css

+14

src/vite-env.d.ts

···

       1
       1
       +
       /// <reference types="vite/client" />

     

       2
       2
       +
       /// <reference types="@atcute/bluesky/lexicons" />

     

       3
       3
       +
       

     

       4
       4
       +
       interface ImportMetaEnv {

     

       5
       5
       +
         readonly VITE_DEV_SERVER_PORT?: string;

     

       6
       6
       +
         readonly VITE_CLIENT_URI: string;

     

       7
       7
       +
         readonly VITE_OAUTH_CLIENT_ID: string;

     

       8
       8
       +
         readonly VITE_OAUTH_REDIRECT_URL: string;

     

       9
       9
       +
         readonly VITE_OAUTH_SCOPE: string;

     

       10
       10
       +
       }

     

       11
       11
       +
       

     

       12
       12
       +
       interface ImportMeta {

     

       13
       13
       +
         readonly env: ImportMetaEnv;

     

       14
       14
       +
       }

+33 -1

vite.config.ts

···

       2
       2
        
       import solidPlugin from "vite-plugin-solid";

     

       3
       3
        
       import wasm from "vite-plugin-wasm";

     

       4
       4
        
       import UnoCSS from "unocss/vite";

     

       5
       5
       +
       import metadata from "./public/client-metadata.json";

     

       5
       6
        
       

     

       6
       7
        
       const SERVER_HOST = "127.0.0.1";

     

       7
       8
        
       const SERVER_PORT = 13213;

     

       8
       9
        
       

     

       9
       10
        
       export default defineConfig({

     

       10
       10
       -
         plugins: [UnoCSS(), wasm(), solidPlugin()],

     

       11
       11
       +
         plugins: [

     

       12
       12
       +
           UnoCSS(),

     

       13
       13
       +
           wasm(),

     

       14
       14
       +
           solidPlugin(),

     

       15
       15
       +
           // Injects OAuth-related variables

     

       16
       16
       +
           {

     

       17
       17
       +
             name: "oauth",

     

       18
       18
       +
             config(_conf, { command }) {

     

       19
       19
       +
               if (command === "build") {

     

       20
       20
       +
                 process.env.VITE_OAUTH_CLIENT_ID = metadata.client_id;

     

       21
       21
       +
                 process.env.VITE_OAUTH_REDIRECT_URL = metadata.redirect_uris[0];

     

       22
       22
       +
               } else {

     

       23
       23
       +
                 const redirectUri = ((): string => {

     

       24
       24
       +
                   const url = new URL(metadata.redirect_uris[0]);

     

       25
       25
       +
                   return `http://${SERVER_HOST}:${SERVER_PORT}${url.pathname}`;

     

       26
       26
       +
                 })();

     

       27
       27
       +
       

     

       28
       28
       +
                 const clientId =

     

       29
       29
       +
                   `http://localhost` +

     

       30
       30
       +
                   `?redirect_uri=${encodeURIComponent(redirectUri)}` +

     

       31
       31
       +
                   `&scope=${encodeURIComponent(metadata.scope)}`;

     

       32
       32
       +
       

     

       33
       33
       +
                 process.env.VITE_DEV_SERVER_PORT = "" + SERVER_PORT;

     

       34
       34
       +
                 process.env.VITE_OAUTH_CLIENT_ID = clientId;

     

       35
       35
       +
                 process.env.VITE_OAUTH_REDIRECT_URL = redirectUri;

     

       36
       36
       +
               }

     

       37
       37
       +
       

     

       38
       38
       +
               process.env.VITE_CLIENT_URI = metadata.client_uri;

     

       39
       39
       +
               process.env.VITE_OAUTH_SCOPE = metadata.scope;

     

       40
       40
       +
             },

     

       41
       41
       +
           },

     

       42
       42
       +
         ],

     

       11
       43
        
         server: {

     

       12
       44
        
           host: SERVER_HOST,

     

       13
       45
        
           port: SERVER_PORT,