comparing b14208e293c95477677cfe6a066bf5d4f3dbebd9 and main on pdsls.dev/pdsls

+1 -1

src/components/navbar.tsx

···

       121
        
                         ></span>

     

       122
        
                       </button>

     

       123
        
                     </Tooltip>

     

       124
       -
                     <CopyButton content={props.params.repo} label="Copy DID" />

     

       125
        
                   </div>

     

       126
        
                 </div>

     

       127
        
               </Show>

···

       121
        
                         ></span>

     

       122
        
                       </button>

     

       123
        
                     </Tooltip>

     

       124
       +
                     <CopyButton content={props.params.repo!} label="Copy DID" />

     

       125
        
                   </div>

     

       126
        
                 </div>

     

       127
        
               </Show>

public/headers/sonic.jpg

This is a binary file and will not be displayed.

+2 -10

src/components/backlinks.tsx

···

       56
        
                 {(collection) => (

     

       57
        
                   <div>

     

       58
        
                     <div class="flex items-center gap-1">

     

       59
       -
                       <span

     

       60
       -
                         title="Collection containing linking records"

     

       61
       -
                         class="iconify lucide--book-text shrink-0"

     

       62
       -
                       ></span>

     

       63
        
                       {collection}

     

       64
        
                     </div>

     

       65
        
                     <For each={response()![collection]}>

     

       66
        
                       {({ path, counts }) => (

     

       67
        
                         <div class="ml-4.5">

     

       68
        
                           <div class="flex items-center gap-1">

     

       69
       -
                             <span

     

       70
       -
                               title="Record path where the link is found"

     

       71
       -
                               class="iconify lucide--route shrink-0"

     

       72
       -
                             ></span>

     

       73
        
                             {path.slice(1)}

     

       74
        
                           </div>

     

       75
        
                           <div class="ml-4.5">

     

       76
        
                             <p>

     

       77
        
                               <button

     

       78
        
                                 class="text-blue-400 hover:underline active:underline"

     

       79
       -
                                 title="Show linking records"

     

       80
        
                                 onclick={() =>

     

       81
        
                                   (

     

       82
        
                                     show()?.collection === collection &&

     
···

       92
        
                               {" from "}

     

       93
        
                               <button

     

       94
        
                                 class="text-blue-400 hover:underline active:underline"

     

       95
       -
                                 title="Show linking DIDs"

     

       96
        
                                 onclick={() =>

     

       97
        
                                   (

     

       98
        
                                     show()?.collection === collection &&

···

       56
        
                 {(collection) => (

     

       57
        
                   <div>

     

       58
        
                     <div class="flex items-center gap-1">

     

       59
       +
                       <span class="iconify lucide--book-text shrink-0"></span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       60
        
                       {collection}

     

       61
        
                     </div>

     

       62
        
                     <For each={response()![collection]}>

     

       63
        
                       {({ path, counts }) => (

     

       64
        
                         <div class="ml-4.5">

     

       65
        
                           <div class="flex items-center gap-1">

     

       66
       +
                             <span class="iconify lucide--route shrink-0"></span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       67
        
                             {path.slice(1)}

     

       68
        
                           </div>

     

       69
        
                           <div class="ml-4.5">

     

       70
        
                             <p>

     

       71
        
                               <button

     

       72
        
                                 class="text-blue-400 hover:underline active:underline"

     

       0
        
       
     

       73
        
                                 onclick={() =>

     

       74
        
                                   (

     

       75
        
                                     show()?.collection === collection &&

     
···

       85
        
                               {" from "}

     

       86
        
                               <button

     

       87
        
                                 class="text-blue-400 hover:underline active:underline"

     

       0
        
       
     

       88
        
                                 onclick={() =>

     

       89
        
                                   (

     

       90
        
                                     show()?.collection === collection &&

+1 -1

src/components/text-input.tsx

···

       25
        
             disabled={props.disabled}

     

       26
        
             required={props.required}

     

       27
        
             class={

     

       28
       -
               "dark:bg-dark-100 dark:shadow-dark-700 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       29
        
               props.class

     

       30
        
             }

     

       31
        
             onInput={props.onInput}

···

       25
        
             disabled={props.disabled}

     

       26
        
             required={props.required}

     

       27
        
             class={

     

       28
       +
               "dark:bg-dark-100 dark:inset-shadow-dark-200 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs select-none placeholder:text-sm focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400 " +

     

       29
        
               props.class

     

       30
        
             }

     

       31
        
             onInput={props.onInput}

+2 -2

src/views/stream.tsx

···

       183
        
                         spellcheck={false}

     

       184
        
                         placeholder="Comma-separated list of collections"

     

       185
        
                         value={searchParams.collections ?? ""}

     

       186
       -
                         class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       187
        
                       />

     

       188
        
                     </label>

     

       189
        
                   </Show>

     
···

       195
        
                         spellcheck={false}

     

       196
        
                         placeholder="Comma-separated list of DIDs"

     

       197
        
                         value={searchParams.dids ?? ""}

     

       198
       -
                         class="dark:bg-dark-100 dark:shadow-dark-700 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       199
        
                       />

     

       200
        
                     </label>

     

       201
        
                   </Show>

···

       183
        
                         spellcheck={false}

     

       184
        
                         placeholder="Comma-separated list of collections"

     

       185
        
                         value={searchParams.collections ?? ""}

     

       186
       +
                         class="dark:bg-dark-100 dark:inset-shadow-dark-200 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       187
        
                       />

     

       188
        
                     </label>

     

       189
        
                   </Show>

     
···

       195
        
                         spellcheck={false}

     

       196
        
                         placeholder="Comma-separated list of DIDs"

     

       197
        
                         value={searchParams.dids ?? ""}

     

       198
       +
                         class="dark:bg-dark-100 dark:inset-shadow-dark-200 grow rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 inset-shadow-xs focus:outline-[1px] focus:outline-neutral-600 dark:border-neutral-600 dark:focus:outline-neutral-400"

     

       199
        
                       />

     

       200
        
                     </label>

     

       201
        
                   </Show>

+5 -5

src/views/logs.tsx

···

       257
        
               </div>

     

       258
        
               <div class="flex flex-wrap gap-1 sm:gap-2">

     

       259
        
                 <FilterButton icon="iconify lucide--at-sign" event="handle" label="Alias" />

     

       260
       -
                 <FilterButton

     

       261
       -
                   icon="iconify lucide--key-round"

     

       262
       -
                   event="rotation_key"

     

       263
       -
                   label="Rotation Key"

     

       264
       -
                 />

     

       265
        
                 <FilterButton icon="iconify lucide--hard-drive" event="service" label="Service" />

     

       266
        
                 <FilterButton

     

       267
        
                   icon="iconify lucide--shield-check"

     

       268
        
                   event="verification_method"

     

       269
        
                   label="Verification"

     

       270
        
                 />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       271
        
               </div>

     

       272
        
             </div>

     

       273
        
             <div class="flex items-center gap-1.5 text-sm font-medium">

···

       257
        
               </div>

     

       258
        
               <div class="flex flex-wrap gap-1 sm:gap-2">

     

       259
        
                 <FilterButton icon="iconify lucide--at-sign" event="handle" label="Alias" />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       260
        
                 <FilterButton icon="iconify lucide--hard-drive" event="service" label="Service" />

     

       261
        
                 <FilterButton

     

       262
        
                   icon="iconify lucide--shield-check"

     

       263
        
                   event="verification_method"

     

       264
        
                   label="Verification"

     

       265
        
                 />

     

       266
       +
                 <FilterButton

     

       267
       +
                   icon="iconify lucide--key-round"

     

       268
       +
                   event="rotation_key"

     

       269
       +
                   label="Rotation Key"

     

       270
       +
                 />

     

       271
        
               </div>

     

       272
        
             </div>

     

       273
        
             <div class="flex items-center gap-1.5 text-sm font-medium">

-66

src/utils/types/at-uri.ts

···

       1
       -
       type Did<TMethod extends string = string> = `did:${TMethod}:${string}`;

     

       2
       -
       

     

       3
       -
       type Nsid = `${string}.${string}.${string}`;

     

       4
       -
       

     

       5
       -
       type RecordKey = string;

     

       6
       -
       

     

       7
       -
       const DID_RE = /^did:([a-z]+):([a-zA-Z0-9._:%\-]*[a-zA-Z0-9._\-])$/;

     

       8
       -
       

     

       9
       -
       const NSID_RE =

     

       10
       -
         /^[a-zA-Z](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?:\.[a-zA-Z](?:[a-zA-Z0-9]{0,62})?)$/;

     

       11
       -
       

     

       12
       -
       const RECORD_KEY_RE = /^(?!\.{1,2}$)[a-zA-Z0-9_~.:-]{1,512}$/;

     

       13
       -
       

     

       14
       -
       export const ATURI_RE =

     

       15
       -
         /^at:\/\/([a-zA-Z0-9._:%-]+)(?:\/([a-zA-Z0-9-.]+)(?:\/([a-zA-Z0-9._~:@!$&%')(*+,;=-]+))?)?(?:#(\/[a-zA-Z0-9._~:@!$&%')(*+,;=\-[\]/\\]*))?$/;

     

       16
       -
       

     

       17
       -
       const isDid = (input: unknown): input is Did => {

     

       18
       -
         return (

     

       19
       -
           typeof input === "string" && input.length >= 7 && input.length <= 2048 && DID_RE.test(input)

     

       20
       -
         );

     

       21
       -
       };

     

       22
       -
       

     

       23
       -
       const isNsid = (input: unknown): input is Nsid => {

     

       24
       -
         return (

     

       25
       -
           typeof input === "string" && input.length >= 5 && input.length <= 317 && NSID_RE.test(input)

     

       26
       -
         );

     

       27
       -
       };

     

       28
       -
       

     

       29
       -
       const isRecordKey = (input: unknown): input is RecordKey => {

     

       30
       -
         return (

     

       31
       -
           typeof input === "string" &&

     

       32
       -
           input.length >= 1 &&

     

       33
       -
           input.length <= 512 &&

     

       34
       -
           RECORD_KEY_RE.test(input)

     

       35
       -
         );

     

       36
       -
       };

     

       37
       -
       

     

       38
       -
       export interface AddressedAtUri {

     

       39
       -
         repo: Did;

     

       40
       -
         collection: Nsid;

     

       41
       -
         rkey: string;

     

       42
       -
         fragment: string | undefined;

     

       43
       -
       }

     

       44
       -
       

     

       45
       -
       export const parseAddressedAtUri = (str: string): AddressedAtUri => {

     

       46
       -
         const match = ATURI_RE.exec(str);

     

       47
       -
         assert(match !== null, `invalid addressed-at-uri: ${str}`);

     

       48
       -
       

     

       49
       -
         const [, r, c, k, f] = match;

     

       50
       -
         assert(isDid(r), `invalid repo in addressed-at-uri: ${r}`);

     

       51
       -
         assert(isNsid(c), `invalid collection in addressed-at-uri: ${c}`);

     

       52
       -
         assert(isRecordKey(k), `invalid rkey in addressed-at-uri: ${k}`);

     

       53
       -
       

     

       54
       -
         return {

     

       55
       -
           repo: r,

     

       56
       -
           collection: c,

     

       57
       -
           rkey: k,

     

       58
       -
           fragment: f,

     

       59
       -
         };

     

       60
       -
       };

     

       61
       -
       

     

       62
       -
       function assert(condition: boolean, message: string): asserts condition {

     

       63
       -
         if (!condition) {

     

       64
       -
           throw new Error(message);

     

       65
       -
         }

     

       66
       -
       }

+6 -16

src/components/lexicon-schema.tsx

···

       294
        
           props.def.items ||

     

       295
        
           props.def.knownValues;

     

       296
        
       

     

       297
       -
         const handleHeaderClick = () => {

     

       298
       -
           window.history.replaceState(null, "", `#schema:${props.name}`);

     

       299
       -
           const element = document.getElementById(`def-${props.name}`);

     

       300
       -
           if (element) {

     

       301
       -
             element.scrollIntoView({ behavior: "instant", block: "start" });

     

       302
       -
           }

     

       303
       -
         };

     

       304
       -
       

     

       305
        
         return (

     

       306
        
           <div class="flex flex-col gap-3" id={`def-${props.name}`}>

     

       307
        
             <div class="group flex items-center gap-2">

     

       308
       -
               <button

     

       309
       -
                 type="button"

     

       310
       -
                 onClick={handleHeaderClick}

     

       311
       -
                 class="relative cursor-pointer text-lg font-semibold hover:underline"

     

       312
       -
               >

     

       313
        
                 <span class="iconify lucide--link absolute top-1/2 -left-6 -translate-y-1/2 text-base opacity-0 transition-opacity group-hover:opacity-100" />

     

       314
        
                 {props.name === "main" ? "Main Definition" : props.name}

     

       315
       -
               </button>

     

       316
        
               <span class={`rounded px-2 py-0.5 text-xs font-semibold uppercase ${defTypeColor()}`}>

     

       317
        
                 {props.def.type}

     

       318
        
               </span>

     
···

       523
        
           const hash = location.hash;

     

       524
        
           if (hash.startsWith("#schema:")) {

     

       525
        
             const defName = hash.slice(8);

     

       526
       -
             const element = document.getElementById(`def-${defName}`);

     

       527
       -
             if (element) element.scrollIntoView({ behavior: "instant", block: "start" });

     

       0
        
       
     

       0
        
       
     

       528
        
           }

     

       529
        
         });

     

       530

···

       294
        
           props.def.items ||

     

       295
        
           props.def.knownValues;

     

       296
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       297
        
         return (

     

       298
        
           <div class="flex flex-col gap-3" id={`def-${props.name}`}>

     

       299
        
             <div class="group flex items-center gap-2">

     

       300
       +
               <a href={`#schema:${props.name}`} class="relative text-lg font-semibold hover:underline">

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       301
        
                 <span class="iconify lucide--link absolute top-1/2 -left-6 -translate-y-1/2 text-base opacity-0 transition-opacity group-hover:opacity-100" />

     

       302
        
                 {props.name === "main" ? "Main Definition" : props.name}

     

       303
       +
               </a>

     

       304
        
               <span class={`rounded px-2 py-0.5 text-xs font-semibold uppercase ${defTypeColor()}`}>

     

       305
        
                 {props.def.type}

     

       306
        
               </span>

     
···

       511
        
           const hash = location.hash;

     

       512
        
           if (hash.startsWith("#schema:")) {

     

       513
        
             const defName = hash.slice(8);

     

       514
       +
             requestAnimationFrame(() => {

     

       515
       +
               const element = document.getElementById(`def-${defName}`);

     

       516
       +
               if (element) element.scrollIntoView({ behavior: "instant", block: "start" });

     

       517
       +
             });

     

       518
        
           }

     

       519
        
         });

     

       520

+22 -1

vite.config.ts

···

       1
        
       import tailwindcss from "@tailwindcss/vite";

     

       0
        
       
     

       2
        
       import { defineConfig } from "vite";

     

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

     

       4
        
       import metadata from "./public/oauth-client-metadata.json";

     
···

       6
        
       const SERVER_HOST = "127.0.0.1";

     

       7
        
       const SERVER_PORT = 13213;

     

       8
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       9
        
       export default defineConfig({

     

       10
        
         plugins: [

     

       11
        
           tailwindcss(),

     

       12
        
           solidPlugin(),

     

       13
       -
           // Injects OAuth-related variables

     

       14
        
           {

     

       15
        
             name: "oauth",

     

       16
        
             config(_conf, { command }) {

     
···

       35
        
       

     

       36
        
               process.env.VITE_CLIENT_URI = metadata.client_uri;

     

       37
        
               process.env.VITE_OAUTH_SCOPE = metadata.scope;

     

       0
        
       
     

       38
        
             },

     

       39
        
           },

     

       40
        
         ],

···

       1
        
       import tailwindcss from "@tailwindcss/vite";

     

       2
       +
       import { execSync } from "child_process";

     

       3
        
       import { defineConfig } from "vite";

     

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

     

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

     
···

       7
        
       const SERVER_HOST = "127.0.0.1";

     

       8
        
       const SERVER_PORT = 13213;

     

       9
        
       

     

       10
       +
       const getVersion = (): string => {

     

       11
       +
         try {

     

       12
       +
           const describe = execSync("git describe --tags --long --dirty --always").toString().trim();

     

       13
       +
       

     

       14
       +
           const match = describe.match(/^v?(.+?)-(\d+)-g([a-f0-9]+)(-dirty)?$/);

     

       15
       +
       

     

       16
       +
           if (match) {

     

       17
       +
             const [, version, commits, hash, dirty] = match;

     

       18
       +
             if (commits === "0") {

     

       19
       +
               return `v${version}${dirty ? "-dirty" : ""}`;

     

       20
       +
             }

     

       21
       +
             return `v${version}.dev${commits}+g${hash}${dirty ? "-dirty" : ""}`;

     

       22
       +
           }

     

       23
       +
       

     

       24
       +
           return `v0.0.0.dev+g${describe}`;

     

       25
       +
         } catch {

     

       26
       +
           return "v0.0.0-unknown";

     

       27
       +
         }

     

       28
       +
       };

     

       29
       +
       

     

       30
        
       export default defineConfig({

     

       31
        
         plugins: [

     

       32
        
           tailwindcss(),

     

       33
        
           solidPlugin(),

     

       0
        
       
     

       34
        
           {

     

       35
        
             name: "oauth",

     

       36
        
             config(_conf, { command }) {

     
···

       55
        
       

     

       56
        
               process.env.VITE_CLIENT_URI = metadata.client_uri;

     

       57
        
               process.env.VITE_OAUTH_SCOPE = metadata.scope;

     

       58
       +
               process.env.VITE_APP_VERSION = getVersion();

     

       59
        
             },

     

       60
        
           },

     

       61
        
         ],

-10

src/utils/app-urls.ts

···

       3
        
       export enum App {

     

       4
        
         Bluesky,

     

       5
        
         Tangled,

     

       6
       -
         Whitewind,

     

       7
        
         Frontpage,

     

       8
        
         Pinksea,

     

       9
        
         Linkat,

     
···

       12
        
       export const appName = {

     

       13
        
         [App.Bluesky]: "Bluesky",

     

       14
        
         [App.Tangled]: "Tangled",

     

       15
       -
         [App.Whitewind]: "Whitewind",

     

       16
        
         [App.Frontpage]: "Frontpage",

     

       17
        
         [App.Pinksea]: "Pinksea",

     

       18
        
         [App.Linkat]: "Linkat",

     
···

       29
        
         "main.bsky.dev": App.Bluesky,

     

       30
        
         "social.daniela.lol": App.Bluesky,

     

       31
        
         "tangled.org": App.Tangled,

     

       32
       -
         "whtwnd.com": App.Whitewind,

     

       33
        
         "frontpage.fyi": App.Frontpage,

     

       34
        
         "pinksea.art": App.Pinksea,

     

       35
        
         "linkat.blue": App.Linkat,

     
···

       92
        
       

     

       93
        
           return `at://${user}`;

     

       94
        
         },

     

       95
       -
         [App.Whitewind]: (path) => {

     

       96
       -
           if (path.length === 2) {

     

       97
       -
             return `at://${path[0]}/com.whtwnd.blog.entry/${path[1]}`;

     

       98
       -
           }

     

       99
       -
       

     

       100
       -
           return `at://${path[0]}/com.whtwnd.blog.entry`;

     

       101
       -
         },

     

       102
        
         [App.Frontpage]: (path) => {

     

       103
        
           if (path.length === 3) {

     

       104
        
             return `at://${path[1]}/fyi.unravel.frontpage.post/${path[2]}`;

···

       3
        
       export enum App {

     

       4
        
         Bluesky,

     

       5
        
         Tangled,

     

       0
        
       
     

       6
        
         Frontpage,

     

       7
        
         Pinksea,

     

       8
        
         Linkat,

     
···

       11
        
       export const appName = {

     

       12
        
         [App.Bluesky]: "Bluesky",

     

       13
        
         [App.Tangled]: "Tangled",

     

       0
        
       
     

       14
        
         [App.Frontpage]: "Frontpage",

     

       15
        
         [App.Pinksea]: "Pinksea",

     

       16
        
         [App.Linkat]: "Linkat",

     
···

       27
        
         "main.bsky.dev": App.Bluesky,

     

       28
        
         "social.daniela.lol": App.Bluesky,

     

       29
        
         "tangled.org": App.Tangled,

     

       0
        
       
     

       30
        
         "frontpage.fyi": App.Frontpage,

     

       31
        
         "pinksea.art": App.Pinksea,

     

       32
        
         "linkat.blue": App.Linkat,

     
···

       89
        
       

     

       90
        
           return `at://${user}`;

     

       91
        
         },

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       92
        
         [App.Frontpage]: (path) => {

     

       93
        
           if (path.length === 3) {

     

       94
        
             return `at://${path[1]}/fyi.unravel.frontpage.post/${path[2]}`;

+1 -1

src/components/theme.tsx

···

       31
        
                 "flex items-center gap-2 rounded-xl border px-3 py-2": true,

     

       32
        
                 "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":

     

       33
        
                   theme() === props.theme,

     

       34
       -
                 "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800":

     

       35
        
                   theme() !== props.theme,

     

       36
        
               }}

     

       37
        
               onclick={() => updateTheme(props.theme)}

···

       31
        
                 "flex items-center gap-2 rounded-xl border px-3 py-2": true,

     

       32
        
                 "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":

     

       33
        
                   theme() === props.theme,

     

       34
       +
                 "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800":

     

       35
        
                   theme() !== props.theme,

     

       36
        
               }}

     

       37
        
               onclick={() => updateTheme(props.theme)}

+7 -1

src/components/video-player.tsx

···

       22
        
         });

     

       23
        
       

     

       24
        
         return (

     

       25
       -
           <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       26
        
             <source type="video/mp4" />

     

       27
        
           </video>

     

       28
        
         );

···

       22
        
         });

     

       23
        
       

     

       24
        
         return (

     

       25
       +
           <video

     

       26
       +
             ref={video}

     

       27
       +
             class="max-h-80 max-w-[20rem]"

     

       28
       +
             controls

     

       29
       +
             playsinline

     

       30
       +
             onLoadedData={props.onLoad}

     

       31
       +
           >

     

       32
        
             <source type="video/mp4" />

     

       33
        
           </video>

     

       34
        
         );

+15 -15

src/utils/hooks/debounced.ts

···

       1
       -
       import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';

     

       2
        
       

     

       3
        
       export const createDebouncedValue = <T>(

     

       4
       -
       	accessor: Accessor<T>,

     

       5
       -
       	delay: number,

     

       6
       -
       	equals?: false | ((prev: T, next: T) => boolean),

     

       7
        
       ): Accessor<T> => {

     

       8
       -
       	const initial = accessor();

     

       9
       -
       	const [state, setState] = createSignal(initial, { equals });

     

       10
        
       

     

       11
       -
       	createEffect((prev: T) => {

     

       12
       -
       		const next = accessor();

     

       13
        
       

     

       14
       -
       		if (prev !== next) {

     

       15
       -
       			const timeout = setTimeout(() => setState(() => next), delay);

     

       16
       -
       			onCleanup(() => clearTimeout(timeout));

     

       17
       -
       		}

     

       18
        
       

     

       19
       -
       		return next;

     

       20
       -
       	}, initial);

     

       21
        
       

     

       22
       -
       	return state;

     

       23
        
       };

···

       1
       +
       import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";

     

       2
        
       

     

       3
        
       export const createDebouncedValue = <T>(

     

       4
       +
         accessor: Accessor<T>,

     

       5
       +
         delay: number,

     

       6
       +
         equals?: false | ((prev: T, next: T) => boolean),

     

       7
        
       ): Accessor<T> => {

     

       8
       +
         const initial = accessor();

     

       9
       +
         const [state, setState] = createSignal(initial, { equals });

     

       10
        
       

     

       11
       +
         createEffect((prev: T) => {

     

       12
       +
           const next = accessor();

     

       13
        
       

     

       14
       +
           if (prev !== next) {

     

       15
       +
             const timeout = setTimeout(() => setState(() => next), delay);

     

       16
       +
             onCleanup(() => clearTimeout(timeout));

     

       17
       +
           }

     

       18
        
       

     

       19
       +
           return next;

     

       20
       +
         }, initial);

     

       21
        
       

     

       22
       +
         return state;

     

       23
        
       };

+38 -12

src/components/dropdown.tsx

···

       10
        
         Show,

     

       11
        
         useContext,

     

       12
        
       } from "solid-js";

     

       0
        
       
     

       13
        
       import { addToClipboard } from "../utils/copy";

     

       14
        
       

     

       15
        
       const MenuContext = createContext<{

     
···

       102
        
         const ctx = useContext(MenuContext);

     

       103
        
         const [menu, setMenu] = createSignal<HTMLDivElement>();

     

       104
        
         const [menuButton, setMenuButton] = createSignal<HTMLButtonElement>();

     

       0
        
       
     

       105
        
       

     

       106
        
         const clickEvent = (event: MouseEvent) => {

     

       107
        
           const target = event.target as Node;

     

       108
        
           if (!menuButton()?.contains(target) && !menu()?.contains(target)) ctx?.setShowMenu(false);

     

       109
        
         };

     

       110
        
       

     

       111
       -
         onMount(() => window.addEventListener("click", clickEvent));

     

       112
       -
         onCleanup(() => window.removeEventListener("click", clickEvent));

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       113
        
       

     

       114
        
         return (

     

       115
        
           <div class="relative">

     
···

       119
        
                 props.buttonClass

     

       120
        
               }

     

       121
        
               ref={setMenuButton}

     

       122
       -
               onClick={() => ctx?.setShowMenu(!ctx?.showMenu())}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       123
        
             >

     

       124
        
               <span class={"iconify " + props.icon}></span>

     

       125
        
             </button>

     

       126
        
             <Show when={ctx?.showMenu()}>

     

       127
       -
               <div

     

       128
       -
                 ref={setMenu}

     

       129
       -
                 class={

     

       130
       -
                   "dark:bg-dark-300 dark:shadow-dark-700 absolute right-0 z-40 flex min-w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 shadow-md dark:border-neutral-700 " +

     

       131
       -
                   props.menuClass

     

       132
       -
                 }

     

       133
       -
               >

     

       134
       -
                 {props.children}

     

       135
       -
               </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       136
        
             </Show>

     

       137
        
           </div>

     

       138
        
         );

···

       10
        
         Show,

     

       11
        
         useContext,

     

       12
        
       } from "solid-js";

     

       13
       +
       import { Portal } from "solid-js/web";

     

       14
        
       import { addToClipboard } from "../utils/copy";

     

       15
        
       

     

       16
        
       const MenuContext = createContext<{

     
···

       103
        
         const ctx = useContext(MenuContext);

     

       104
        
         const [menu, setMenu] = createSignal<HTMLDivElement>();

     

       105
        
         const [menuButton, setMenuButton] = createSignal<HTMLButtonElement>();

     

       106
       +
         const [buttonRect, setButtonRect] = createSignal<DOMRect>();

     

       107
        
       

     

       108
        
         const clickEvent = (event: MouseEvent) => {

     

       109
        
           const target = event.target as Node;

     

       110
        
           if (!menuButton()?.contains(target) && !menu()?.contains(target)) ctx?.setShowMenu(false);

     

       111
        
         };

     

       112
        
       

     

       113
       +
         const updatePosition = () => {

     

       114
       +
           const rect = menuButton()?.getBoundingClientRect();

     

       115
       +
           if (rect) setButtonRect(rect);

     

       116
       +
         };

     

       117
       +
       

     

       118
       +
         onMount(() => {

     

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

     

       120
       +
           window.addEventListener("scroll", updatePosition, true);

     

       121
       +
           window.addEventListener("resize", updatePosition);

     

       122
       +
         });

     

       123
       +
       

     

       124
       +
         onCleanup(() => {

     

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

     

       126
       +
           window.removeEventListener("scroll", updatePosition, true);

     

       127
       +
           window.removeEventListener("resize", updatePosition);

     

       128
       +
         });

     

       129
        
       

     

       130
        
         return (

     

       131
        
           <div class="relative">

     
···

       135
        
                 props.buttonClass

     

       136
        
               }

     

       137
        
               ref={setMenuButton}

     

       138
       +
               onClick={() => {

     

       139
       +
                 updatePosition();

     

       140
       +
                 ctx?.setShowMenu(!ctx?.showMenu());

     

       141
       +
               }}

     

       142
        
             >

     

       143
        
               <span class={"iconify " + props.icon}></span>

     

       144
        
             </button>

     

       145
        
             <Show when={ctx?.showMenu()}>

     

       146
       +
               <Portal>

     

       147
       +
                 <div

     

       148
       +
                   ref={setMenu}

     

       149
       +
                   style={{

     

       150
       +
                     position: "fixed",

     

       151
       +
                     top: `${(buttonRect()?.bottom ?? 0) + 4}px`,

     

       152
       +
                     left: `${(buttonRect()?.right ?? 0) - 160}px`,

     

       153
       +
                   }}

     

       154
       +
                   class={

     

       155
       +
                     "dark:bg-dark-300 dark:shadow-dark-700 z-50 flex min-w-40 flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-2 text-sm shadow-md dark:border-neutral-700 " +

     

       156
       +
                     props.menuClass

     

       157
       +
                   }

     

       158
       +
                 >

     

       159
       +
                   {props.children}

     

       160
       +
                 </div>

     

       161
       +
               </Portal>

     

       162
        
             </Show>

     

       163
        
           </div>

     

       164
        
         );

+30

src/utils/key.ts

···

       1
       +
       import { parseDidKey, parsePublicMultikey } from "@atcute/crypto";

     

       2
       +
       import { fromBase58Btc } from "@atcute/multibase";

     

       3
       +
       

     

       4
       +
       export const detectKeyType = (key: string): string => {

     

       5
       +
         try {

     

       6
       +
           return parsePublicMultikey(key).type;

     

       7
       +
         } catch (e) {

     

       8
       +
           try {

     

       9
       +
             const bytes = fromBase58Btc(key.startsWith("z") ? key.slice(1) : key);

     

       10
       +
             if (bytes.length >= 2) {

     

       11
       +
               const type = (bytes[0] << 8) | bytes[1];

     

       12
       +
               if (type === 0xed01) {

     

       13
       +
                 return "ed25519";

     

       14
       +
               }

     

       15
       +
             }

     

       16
       +
           } catch {}

     

       17
       +
           return "unknown";

     

       18
       +
         }

     

       19
       +
       };

     

       20
       +
       

     

       21
       +
       export const detectDidKeyType = (key: string): string => {

     

       22
       +
         try {

     

       23
       +
           return parseDidKey(key).type;

     

       24
       +
         } catch (e) {

     

       25
       +
           if (key.startsWith("did:key:")) {

     

       26
       +
             return detectKeyType(key.slice(8));

     

       27
       +
           }

     

       28
       +
           return "unknown";

     

       29
       +
         }

     

       30
       +
       };

+1 -1

public/oauth-client-metadata.json

···

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

     

       5
        
         "logo_uri": "https://pdsls.dev/favicon.ico",

     

       6
        
         "redirect_uris": ["https://pdsls.dev/"],

     

       7
       -
         "scope": "atproto transition:generic",

     

       8
        
         "grant_types": ["authorization_code", "refresh_token"],

     

       9
        
         "response_types": ["code"],

     

       10
        
         "token_endpoint_auth_method": "none",

···

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

     

       5
        
         "logo_uri": "https://pdsls.dev/favicon.ico",

     

       6
        
         "redirect_uris": ["https://pdsls.dev/"],

     

       7
       +
         "scope": "atproto repo:*?action=create repo:*?action=update repo:*?action=delete blob:*/*",

     

       8
        
         "grant_types": ["authorization_code", "refresh_token"],

     

       9
        
         "response_types": ["code"],

     

       10
        
         "token_endpoint_auth_method": "none",

+13

src/auth/oauth-config.ts

···

       1
       +
       import { configureOAuth, defaultIdentityResolver } from "@atcute/oauth-browser-client";

     

       2
       +
       import { didDocumentResolver, handleResolver } from "../utils/api";

     

       3
       +
       

     

       4
       +
       configureOAuth({

     

       5
       +
         metadata: {

     

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

     

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

     

       8
       +
         },

     

       9
       +
         identityResolver: defaultIdentityResolver({

     

       10
       +
           handleResolver: handleResolver,

     

       11
       +
           didDocumentResolver: didDocumentResolver,

     

       12
       +
         }),

     

       13
       +
       });

+77

src/auth/scope-flow.ts

···

       1
       +
       import { isDid, isHandle } from "@atcute/lexicons/syntax";

     

       2
       +
       import { createAuthorizationUrl } from "@atcute/oauth-browser-client";

     

       3
       +
       import { createSignal } from "solid-js";

     

       4
       +
       

     

       5
       +
       interface UseOAuthScopeFlowOptions {

     

       6
       +
         onError?: (error: unknown) => void;

     

       7
       +
         onRedirecting?: () => void;

     

       8
       +
         beforeRedirect?: (account: string) => Promise<void>;

     

       9
       +
       }

     

       10
       +
       

     

       11
       +
       export const useOAuthScopeFlow = (options: UseOAuthScopeFlowOptions = {}) => {

     

       12
       +
         const [showScopeSelector, setShowScopeSelector] = createSignal(false);

     

       13
       +
         const [pendingAccount, setPendingAccount] = createSignal("");

     

       14
       +
         const [shouldForceRedirect, setShouldForceRedirect] = createSignal(false);

     

       15
       +
       

     

       16
       +
         const initiate = (account: string) => {

     

       17
       +
           if (!account) return;

     

       18
       +
           setPendingAccount(account);

     

       19
       +
           setShouldForceRedirect(false);

     

       20
       +
           setShowScopeSelector(true);

     

       21
       +
         };

     

       22
       +
       

     

       23
       +
         const initiateWithRedirect = (account: string) => {

     

       24
       +
           if (!account) return;

     

       25
       +
           setPendingAccount(account);

     

       26
       +
           setShouldForceRedirect(true);

     

       27
       +
           setShowScopeSelector(true);

     

       28
       +
         };

     

       29
       +
       

     

       30
       +
         const complete = async (scopeString: string, scopeIds: string) => {

     

       31
       +
           try {

     

       32
       +
             const account = pendingAccount();

     

       33
       +
       

     

       34
       +
             if (options.beforeRedirect && !shouldForceRedirect()) {

     

       35
       +
               try {

     

       36
       +
                 await options.beforeRedirect(account);

     

       37
       +
                 setShowScopeSelector(false);

     

       38
       +
                 return;

     

       39
       +
               } catch {}

     

       40
       +
             }

     

       41
       +
       

     

       42
       +
             localStorage.setItem("pendingScopes", scopeIds);

     

       43
       +
       

     

       44
       +
             options.onRedirecting?.();

     

       45
       +
       

     

       46
       +
             const authUrl = await createAuthorizationUrl({

     

       47
       +
               scope: scopeString,

     

       48
       +
               target:

     

       49
       +
                 isHandle(account) || isDid(account) ?

     

       50
       +
                   { type: "account", identifier: account }

     

       51
       +
                 : { type: "pds", serviceUrl: account },

     

       52
       +
             });

     

       53
       +
       

     

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

     

       55
       +
             location.assign(authUrl);

     

       56
       +
           } catch (e) {

     

       57
       +
             console.error(e);

     

       58
       +
             options.onError?.(e);

     

       59
       +
             setShowScopeSelector(false);

     

       60
       +
           }

     

       61
       +
         };

     

       62
       +
       

     

       63
       +
         const cancel = () => {

     

       64
       +
           setShowScopeSelector(false);

     

       65
       +
           setPendingAccount("");

     

       66
       +
           setShouldForceRedirect(false);

     

       67
       +
         };

     

       68
       +
       

     

       69
       +
         return {

     

       70
       +
           showScopeSelector,

     

       71
       +
           pendingAccount,

     

       72
       +
           initiate,

     

       73
       +
           initiateWithRedirect,

     

       74
       +
           complete,

     

       75
       +
           cancel,

     

       76
       +
         };

     

       77
       +
       };

+53

src/auth/scope-utils.ts

···

       1
       +
       import { agent, sessions } from "./state";

     

       2
       +
       

     

       3
       +
       export const GRANULAR_SCOPES = [

     

       4
       +
         {

     

       5
       +
           id: "create",

     

       6
       +
           scope: "repo:*?action=create",

     

       7
       +
           label: "Create records",

     

       8
       +
         },

     

       9
       +
         {

     

       10
       +
           id: "update",

     

       11
       +
           scope: "repo:*?action=update",

     

       12
       +
           label: "Update records",

     

       13
       +
         },

     

       14
       +
         {

     

       15
       +
           id: "delete",

     

       16
       +
           scope: "repo:*?action=delete",

     

       17
       +
           label: "Delete records",

     

       18
       +
         },

     

       19
       +
         {

     

       20
       +
           id: "blob",

     

       21
       +
           scope: "blob:*/*",

     

       22
       +
           label: "Upload blobs",

     

       23
       +
         },

     

       24
       +
       ];

     

       25
       +
       

     

       26
       +
       export const BASE_SCOPES = ["atproto"];

     

       27
       +
       

     

       28
       +
       export const buildScopeString = (selected: Set<string>): string => {

     

       29
       +
         const granular = GRANULAR_SCOPES.filter((s) => selected.has(s.id)).map((s) => s.scope);

     

       30
       +
         return [...BASE_SCOPES, ...granular].join(" ");

     

       31
       +
       };

     

       32
       +
       

     

       33
       +
       export const scopeIdsToString = (scopeIds: Set<string>): string => {

     

       34
       +
         return ["atproto", ...Array.from(scopeIds)].join(",");

     

       35
       +
       };

     

       36
       +
       

     

       37
       +
       export const parseScopeString = (scopeIdsString: string): Set<string> => {

     

       38
       +
         if (!scopeIdsString) return new Set();

     

       39
       +
         const ids = scopeIdsString.split(",").filter(Boolean);

     

       40
       +
         return new Set(ids.filter((id) => id !== "atproto"));

     

       41
       +
       };

     

       42
       +
       

     

       43
       +
       export const hasScope = (grantedScopes: string | undefined, scopeId: string): boolean => {

     

       44
       +
         if (!grantedScopes) return false;

     

       45
       +
         return grantedScopes.split(",").includes(scopeId);

     

       46
       +
       };

     

       47
       +
       

     

       48
       +
       export const hasUserScope = (scopeId: string): boolean => {

     

       49
       +
         if (!agent()) return false;

     

       50
       +
         const grantedScopes = sessions[agent()!.sub]?.grantedScopes;

     

       51
       +
         if (!grantedScopes) return true;

     

       52
       +
         return hasScope(grantedScopes, scopeId);

     

       53
       +
       };

+14

src/auth/state.ts

···

       1
       +
       import { OAuthUserAgent } from "@atcute/oauth-browser-client";

     

       2
       +
       import { createSignal } from "solid-js";

     

       3
       +
       import { createStore } from "solid-js/store";

     

       4
       +
       

     

       5
       +
       export type Account = {

     

       6
       +
         signedIn: boolean;

     

       7
       +
         handle?: string;

     

       8
       +
         grantedScopes?: string;

     

       9
       +
       };

     

       10
       +
       

     

       11
       +
       export type Sessions = Record<string, Account>;

     

       12
       +
       

     

       13
       +
       export const [agent, setAgent] = createSignal<OAuthUserAgent | undefined>();

     

       14
       +
       export const [sessions, setSessions] = createStore<Sessions>();

+2 -2

src/views/collection.tsx

···

       1
        
       import { ComAtprotoRepoApplyWrites, ComAtprotoRepoGetRecord } from "@atcute/atproto";

     

       2
       -
       import { Client, CredentialManager } from "@atcute/client";

     

       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useParams } from "@solidjs/router";

     
···

       89
        
       

     

       90
        
         const fetchRecords = async () => {

     

       91
        
           if (!pds) pds = await resolvePDS(did!);

     

       92
       -
           if (!rpc) rpc = new Client({ handler: new CredentialManager({ service: pds }) });

     

       93
        
           const res = await rpc.get("com.atproto.repo.listRecords", {

     

       94
        
             params: {

     

       95
        
               repo: did as ActorIdentifier,

···

       1
        
       import { ComAtprotoRepoApplyWrites, ComAtprotoRepoGetRecord } from "@atcute/atproto";

     

       2
       +
       import { Client, simpleFetchHandler } from "@atcute/client";

     

       3
        
       import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useParams } from "@solidjs/router";

     
···

       89
        
       

     

       90
        
         const fetchRecords = async () => {

     

       91
        
           if (!pds) pds = await resolvePDS(did!);

     

       92
       +
           if (!rpc) rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });

     

       93
        
           const res = await rpc.get("com.atproto.repo.listRecords", {

     

       94
        
             params: {

     

       95
        
               repo: did as ActorIdentifier,

+2 -2

src/views/labels.tsx

···

       1
        
       import { ComAtprotoLabelDefs } from "@atcute/atproto";

     

       2
       -
       import { Client, CredentialManager } from "@atcute/client";

     

       3
        
       import { isAtprotoDid } from "@atcute/identity";

     

       4
        
       import { Handle } from "@atcute/lexicons";

     

       5
        
       import { A, useSearchParams } from "@solidjs/router";

     
···

       158
        
             await resolvePDS(did);

     

       159
        
             if (!labelerCache[did]) throw new Error("Repository is not a labeler");

     

       160
        
             rpc = new Client({

     

       161
       -
               handler: new CredentialManager({ service: labelerCache[did] }),

     

       162
        
             });

     

       163
        
       

     

       164
        
             setSearchParams({ did, uriPatterns });

···

       1
        
       import { ComAtprotoLabelDefs } from "@atcute/atproto";

     

       2
       +
       import { Client, simpleFetchHandler } from "@atcute/client";

     

       3
        
       import { isAtprotoDid } from "@atcute/identity";

     

       4
        
       import { Handle } from "@atcute/lexicons";

     

       5
        
       import { A, useSearchParams } from "@solidjs/router";

     
···

       158
        
             await resolvePDS(did);

     

       159
        
             if (!labelerCache[did]) throw new Error("Repository is not a labeler");

     

       160
        
             rpc = new Client({

     

       161
       +
               handler: simpleFetchHandler({ service: labelerCache[did] }),

     

       162
        
             });

     

       163
        
       

     

       164
        
             setSearchParams({ did, uriPatterns });

+2 -2

src/views/pds.tsx

···

       1
        
       import { ComAtprotoServerDescribeServer, ComAtprotoSyncListRepos } from "@atcute/atproto";

     

       2
       -
       import { Client, CredentialManager } from "@atcute/client";

     

       3
        
       import { InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useLocation, useParams } from "@solidjs/router";

     
···

       23
        
         setPDS(params.pds);

     

       24
        
         const pds =

     

       25
        
           params.pds!.startsWith("localhost") ? `http://${params.pds}` : `https://${params.pds}`;

     

       26
       -
         const rpc = new Client({ handler: new CredentialManager({ service: pds }) });

     

       27
        
       

     

       28
        
         const getVersion = async () => {

     

       29
        
           // @ts-expect-error: undocumented endpoint

···

       1
        
       import { ComAtprotoServerDescribeServer, ComAtprotoSyncListRepos } from "@atcute/atproto";

     

       2
       +
       import { Client, simpleFetchHandler } from "@atcute/client";

     

       3
        
       import { InferXRPCBodyOutput } from "@atcute/lexicons";

     

       4
        
       import * as TID from "@atcute/tid";

     

       5
        
       import { A, useLocation, useParams } from "@solidjs/router";

     
···

       23
        
         setPDS(params.pds);

     

       24
        
         const pds =

     

       25
        
           params.pds!.startsWith("localhost") ? `http://${params.pds}` : `https://${params.pds}`;

     

       26
       +
         const rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });

     

       27
        
       

     

       28
        
         const getVersion = async () => {

     

       29
        
           // @ts-expect-error: undocumented endpoint

public/favicon.ico

This is a binary file and will not be displayed.

public/fonts/Figtree[wght].woff2

This is a binary file and will not be displayed.

+7 -1

src/styles/index.css

···

       6
        
       

     

       7
        
       @custom-variant dark (&:where(.dark, .dark *));

     

       8
        
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       9
        
       @theme {

     

       10
       -
         --font-sans: "Inter", sans-serif;

     

       11
        
         --font-mono: "Roboto Mono", monospace;

     

       12
        
         --font-pecita: "Pecita", serif;

     

       13

···

       6
        
       

     

       7
        
       @custom-variant dark (&:where(.dark, .dark *));

     

       8
        
       

     

       9
       +
       @font-face {

     

       10
       +
         font-family: "Figtree";

     

       11
       +
         src: url("/fonts/Figtree[wght].woff2") format("woff2");

     

       12
       +
         font-display: swap;

     

       13
       +
       }

     

       14
       +
       

     

       15
        
       @theme {

     

       16
       +
         --font-sans: "Figtree", sans-serif;

     

       17
        
         --font-mono: "Roboto Mono", monospace;

     

       18
        
         --font-pecita: "Pecita", serif;

     

       19

+5 -1

src/auth/account.tsx

···

       41
        
         return (

     

       42
        
           <MenuProvider>

     

       43
        
             <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-md p-2">

     

       44
       -
               <NavMenu href={`/at://${props.did}`} label="Go to repo" icon="lucide--user-round" />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       45
        
               <ActionMenu

     

       46
        
                 icon="lucide--settings"

     

       47
        
                 label="Edit permissions"

···

       41
        
         return (

     

       42
        
           <MenuProvider>

     

       43
        
             <DropdownMenu icon="lucide--ellipsis" buttonClass="rounded-md p-2">

     

       44
       +
               <NavMenu

     

       45
       +
                 href={`/at://${props.did}`}

     

       46
       +
                 label={agent()?.sub === props.did ? "Go to repo (g)" : "Go to repo"}

     

       47
       +
                 icon="lucide--user-round"

     

       48
       +
               />

     

       49
        
               <ActionMenu

     

       50
        
                 icon="lucide--settings"

     

       51
        
                 label="Edit permissions"

+109

src/components/create/file-upload.tsx

···

       1
       +
       import { Client } from "@atcute/client";

     

       2
       +
       import { remove } from "@mary/exif-rm";

     

       3
       +
       import { createSignal, onCleanup, Show } from "solid-js";

     

       4
       +
       import { agent } from "../../auth/state";

     

       5
       +
       import { Button } from "../button.jsx";

     

       6
       +
       import { TextInput } from "../text-input.jsx";

     

       7
       +
       import { editorInstance } from "./state";

     

       8
       +
       

     

       9
       +
       export const FileUpload = (props: {

     

       10
       +
         file: File;

     

       11
       +
         blobInput: HTMLInputElement;

     

       12
       +
         onClose: () => void;

     

       13
       +
       }) => {

     

       14
       +
         const [uploading, setUploading] = createSignal(false);

     

       15
       +
         const [error, setError] = createSignal("");

     

       16
       +
       

     

       17
       +
         onCleanup(() => (props.blobInput.value = ""));

     

       18
       +
       

     

       19
       +
         const formatFileSize = (bytes: number) => {

     

       20
       +
           if (bytes === 0) return "0 Bytes";

     

       21
       +
           const k = 1024;

     

       22
       +
           const sizes = ["Bytes", "KB", "MB", "GB"];

     

       23
       +
           const i = Math.floor(Math.log(bytes) / Math.log(k));

     

       24
       +
           return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];

     

       25
       +
         };

     

       26
       +
       

     

       27
       +
         const uploadBlob = async () => {

     

       28
       +
           let blob: Blob;

     

       29
       +
       

     

       30
       +
           const mimetype = (document.getElementById("mimetype") as HTMLInputElement)?.value;

     

       31
       +
           (document.getElementById("mimetype") as HTMLInputElement).value = "";

     

       32
       +
           if (mimetype) blob = new Blob([props.file], { type: mimetype });

     

       33
       +
           else blob = props.file;

     

       34
       +
       

     

       35
       +
           if ((document.getElementById("exif-rm") as HTMLInputElement).checked) {

     

       36
       +
             const exifRemoved = remove(new Uint8Array(await blob.arrayBuffer()));

     

       37
       +
             if (exifRemoved !== null) blob = new Blob([exifRemoved], { type: blob.type });

     

       38
       +
           }

     

       39
       +
       

     

       40
       +
           const rpc = new Client({ handler: agent()! });

     

       41
       +
           setUploading(true);

     

       42
       +
           const res = await rpc.post("com.atproto.repo.uploadBlob", {

     

       43
       +
             input: blob,

     

       44
       +
           });

     

       45
       +
           setUploading(false);

     

       46
       +
           if (!res.ok) {

     

       47
       +
             setError(res.data.error);

     

       48
       +
             return;

     

       49
       +
           }

     

       50
       +
           editorInstance.view.dispatch({

     

       51
       +
             changes: {

     

       52
       +
               from: editorInstance.view.state.selection.main.head,

     

       53
       +
               insert: JSON.stringify(res.data.blob, null, 2),

     

       54
       +
             },

     

       55
       +
           });

     

       56
       +
           props.onClose();

     

       57
       +
         };

     

       58
       +
       

     

       59
       +
         return (

     

       60
       +
           <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       61
       +
             <h2 class="mb-2 font-semibold">Upload blob</h2>

     

       62
       +
             <div class="flex flex-col gap-2 text-sm">

     

       63
       +
               <div class="flex flex-col gap-1">

     

       64
       +
                 <p class="flex gap-1">

     

       65
       +
                   <span class="truncate">{props.file.name}</span>

     

       66
       +
                   <span class="shrink-0 text-neutral-600 dark:text-neutral-400">

     

       67
       +
                     ({formatFileSize(props.file.size)})

     

       68
       +
                   </span>

     

       69
       +
                 </p>

     

       70
       +
               </div>

     

       71
       +
               <div class="flex items-center gap-x-2">

     

       72
       +
                 <label for="mimetype" class="shrink-0 select-none">

     

       73
       +
                   MIME type

     

       74
       +
                 </label>

     

       75
       +
                 <TextInput id="mimetype" placeholder={props.file.type} />

     

       76
       +
               </div>

     

       77
       +
               <div class="flex items-center gap-1">

     

       78
       +
                 <input id="exif-rm" type="checkbox" checked />

     

       79
       +
                 <label for="exif-rm" class="select-none">

     

       80
       +
                   Remove EXIF data

     

       81
       +
                 </label>

     

       82
       +
               </div>

     

       83
       +
               <p class="text-xs text-neutral-600 dark:text-neutral-400">

     

       84
       +
                 Metadata will be pasted after the cursor

     

       85
       +
               </p>

     

       86
       +
               <Show when={error()}>

     

       87
       +
                 <span class="text-red-500 dark:text-red-400">Error: {error()}</span>

     

       88
       +
               </Show>

     

       89
       +
               <div class="flex justify-between gap-2">

     

       90
       +
                 <Button onClick={props.onClose}>Cancel</Button>

     

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

     

       92
       +
                   <div class="flex items-center gap-1">

     

       93
       +
                     <span class="iconify lucide--loader-circle animate-spin"></span>

     

       94
       +
                     <span>Uploading</span>

     

       95
       +
                   </div>

     

       96
       +
                 </Show>

     

       97
       +
                 <Show when={!uploading()}>

     

       98
       +
                   <Button

     

       99
       +
                     onClick={uploadBlob}

     

       100
       +
                     class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       101
       +
                   >

     

       102
       +
                     Upload

     

       103
       +
                   </Button>

     

       104
       +
                 </Show>

     

       105
       +
               </div>

     

       106
       +
             </div>

     

       107
       +
           </div>

     

       108
       +
         );

     

       109
       +
       };

+87

src/components/create/handle-input.tsx

···

       1
       +
       import { Handle } from "@atcute/lexicons";

     

       2
       +
       import { createSignal, Show } from "solid-js";

     

       3
       +
       import { resolveHandle } from "../../utils/api";

     

       4
       +
       import { Button } from "../button.jsx";

     

       5
       +
       import { TextInput } from "../text-input.jsx";

     

       6
       +
       import { editorInstance } from "./state";

     

       7
       +
       

     

       8
       +
       export const HandleInput = (props: { onClose: () => void }) => {

     

       9
       +
         const [resolving, setResolving] = createSignal(false);

     

       10
       +
         const [error, setError] = createSignal("");

     

       11
       +
         let handleFormRef!: HTMLFormElement;

     

       12
       +
       

     

       13
       +
         const resolveDid = async (e: SubmitEvent) => {

     

       14
       +
           e.preventDefault();

     

       15
       +
           const formData = new FormData(handleFormRef);

     

       16
       +
           const handleValue = formData.get("handle")?.toString().trim();

     

       17
       +
       

     

       18
       +
           if (!handleValue) {

     

       19
       +
             setError("Please enter a handle");

     

       20
       +
             return;

     

       21
       +
           }

     

       22
       +
       

     

       23
       +
           setResolving(true);

     

       24
       +
           setError("");

     

       25
       +
           try {

     

       26
       +
             const did = await resolveHandle(handleValue as Handle);

     

       27
       +
             editorInstance.view.dispatch({

     

       28
       +
               changes: {

     

       29
       +
                 from: editorInstance.view.state.selection.main.head,

     

       30
       +
                 insert: `"${did}"`,

     

       31
       +
               },

     

       32
       +
             });

     

       33
       +
             props.onClose();

     

       34
       +
             handleFormRef.reset();

     

       35
       +
           } catch (err: any) {

     

       36
       +
             setError(err.message || "Failed to resolve handle");

     

       37
       +
           } finally {

     

       38
       +
             setResolving(false);

     

       39
       +
           }

     

       40
       +
         };

     

       41
       +
       

     

       42
       +
         return (

     

       43
       +
           <div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-[20rem] -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-4 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">

     

       44
       +
             <h2 class="mb-2 font-semibold">Insert DID from handle</h2>

     

       45
       +
             <form ref={handleFormRef} onSubmit={resolveDid} class="flex flex-col gap-2 text-sm">

     

       46
       +
               <div class="flex flex-col gap-1">

     

       47
       +
                 <label for="handle-input" class="select-none">

     

       48
       +
                   Handle

     

       49
       +
                 </label>

     

       50
       +
                 <TextInput id="handle-input" name="handle" placeholder="user.bsky.social" />

     

       51
       +
               </div>

     

       52
       +
               <p class="text-xs text-neutral-600 dark:text-neutral-400">

     

       53
       +
                 DID will be pasted after the cursor

     

       54
       +
               </p>

     

       55
       +
               <Show when={error()}>

     

       56
       +
                 <span class="text-red-500 dark:text-red-400">Error: {error()}</span>

     

       57
       +
               </Show>

     

       58
       +
               <div class="flex justify-between gap-2">

     

       59
       +
                 <Button

     

       60
       +
                   type="button"

     

       61
       +
                   onClick={() => {

     

       62
       +
                     props.onClose();

     

       63
       +
                     handleFormRef.reset();

     

       64
       +
                     setError("");

     

       65
       +
                   }}

     

       66
       +
                 >

     

       67
       +
                   Cancel

     

       68
       +
                 </Button>

     

       69
       +
                 <Show when={resolving()}>

     

       70
       +
                   <div class="flex items-center gap-1">

     

       71
       +
                     <span class="iconify lucide--loader-circle animate-spin"></span>

     

       72
       +
                     <span>Resolving</span>

     

       73
       +
                   </div>

     

       74
       +
                 </Show>

     

       75
       +
                 <Show when={!resolving()}>

     

       76
       +
                   <Button

     

       77
       +
                     type="submit"

     

       78
       +
                     class="dark:shadow-dark-700 flex items-center gap-1 rounded-lg bg-blue-500 px-2 py-1.5 text-xs text-white shadow-xs select-none hover:bg-blue-600 active:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 dark:active:bg-blue-400"

     

       79
       +
                   >

     

       80
       +
                     Insert

     

       81
       +
                   </Button>

     

       82
       +
                 </Show>

     

       83
       +
               </div>

     

       84
       +
             </form>

     

       85
       +
           </div>

     

       86
       +
         );

     

       87
       +
       };

+12

src/components/create/menu-item.tsx

···

       1
       +
       export const MenuItem = (props: { icon: string; label: string; onClick: () => void }) => {

     

       2
       +
         return (

     

       3
       +
           <button

     

       4
       +
             type="button"

     

       5
       +
             class="flex items-center gap-2 rounded-md p-2 text-left text-xs hover:bg-neutral-100 active:bg-neutral-200 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"

     

       6
       +
             onClick={props.onClick}

     

       7
       +
           >

     

       8
       +
             <span class={`iconify ${props.icon}`}></span>

     

       9
       +
             <span>{props.label}</span>

     

       10
       +
           </button>

     

       11
       +
         );

     

       12
       +
       };

+4

src/components/create/state.ts

···

       1
       +
       import { createSignal } from "solid-js";

     

       2
       +
       

     

       3
       +
       export const editorInstance = { view: null as any };

     

       4
       +
       export const [placeholder, setPlaceholder] = createSignal<any>();

+68 -63

src/views/repo.tsx

···

       404
        
                     />

     

       405
        
                   </Show>

     

       406
        
                   <div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>

     

       407
       -
                     <For

     

       408
       -
                       each={Object.keys(nsids() ?? {}).filter((authority) =>

     

       409
       -
                         filter() ?

     

       410
       -
                           authority.includes(filter()!) ||

     

       411
       -
                           nsids()?.[authority].nsids.some((nsid) =>

     

       412
       -
                             `${authority}.${nsid}`.includes(filter()!),

     

       413
       -
                           )

     

       414
       -
                         : true,

     

       415
       -
                       )}

     

       416
        
                     >

     

       417
       -
                       {(authority) => {

     

       418
       -
                         const reversedDomain = authority.split(".").reverse().join(".");

     

       419
       -
                         const [faviconLoaded, setFaviconLoaded] = createSignal(false);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       420
        
       

     

       421
       -
                         const isHighlighted = () => location.hash === `#collections:${authority}`;

     

       422
        
       

     

       423
       -
                         return (

     

       424
       -
                           <div

     

       425
       -
                             id={`collection-${authority}`}

     

       426
       -
                             class="group flex items-start gap-2 rounded-lg p-1 transition-colors"

     

       427
       -
                             classList={{

     

       428
       -
                               "dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),

     

       429
       -
                               "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),

     

       430
       -
                             }}

     

       431
       -
                           >

     

       432
       -
                             <a

     

       433
       -
                               href={`#collections:${authority}`}

     

       434
       -
                               class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"

     

       435
        
                             >

     

       436
       -
                               <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">

     

       437
       -
                                 <span class="iconify lucide--link absolute -left-2 w-7"></span>

     

       438
       -
                               </span>

     

       439
       -
                               <Show when={!faviconLoaded()}>

     

       440
       -
                                 <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />

     

       441
       -
                               </Show>

     

       442
       -
                               <img

     

       443
       -
                                 src={

     

       444
       -
                                   ["bsky.app", "bsky.chat"].includes(reversedDomain) ?

     

       445
       -
                                     "https://web-cdn.bsky.app/static/apple-touch-icon.png"

     

       446
       -
                                   : `https://${reversedDomain}/favicon.ico`

     

       447
       -
                                 }

     

       448
       -
                                 alt={`${reversedDomain} favicon`}

     

       449
       -
                                 class="h-4 w-4"

     

       450
       -
                                 classList={{ hidden: !faviconLoaded() }}

     

       451
       -
                                 onLoad={() => setFaviconLoaded(true)}

     

       452
       -
                                 onError={() => setFaviconLoaded(false)}

     

       453
       -
                               />

     

       454
       -
                             </a>

     

       455
       -
                             <div class="flex flex-1 flex-col">

     

       456
       -
                               <For

     

       457
       -
                                 each={nsids()?.[authority].nsids.filter((nsid) =>

     

       458
       -
                                   filter() ? `${authority}.${nsid}`.includes(filter()!) : true,

     

       459
       -
                                 )}

     

       460
        
                               >

     

       461
       -
                                 {(nsid) => (

     

       462
       -
                                   <A

     

       463
       -
                                     href={`/at://${did}/${authority}.${nsid}`}

     

       464
       -
                                     class="hover:underline active:underline"

     

       465
       -
                                   >

     

       466
       -
                                     <span>{authority}</span>

     

       467
       -
                                     <span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>

     

       468
       -
                                   </A>

     

       469
       -
                                 )}

     

       470
       -
                               </For>

     

       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
        
       
     

       471
        
                             </div>

     

       472
       -
                           </div>

     

       473
       -
                         );

     

       474
       -
                       }}

     

       475
       -
                     </For>

     

       476
        
                   </div>

     

       477
        
                 </Show>

     

       478
        
                 <Show when={location.hash === "#identity" || (error() && !location.hash)}>

···

       404
        
                     />

     

       405
        
                   </Show>

     

       406
        
                   <div class="flex flex-col text-sm wrap-anywhere" classList={{ "-mt-1": !showFilter() }}>

     

       407
       +
                     <Show

     

       408
       +
                       when={Object.keys(nsids() ?? {}).length != 0}

     

       409
       +
                       fallback={<span class="text-center text-base mt-3">No collections found.</span>}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       410
        
                     >

     

       411
       +
                       <For

     

       412
       +
                         each={Object.keys(nsids() ?? {}).filter((authority) =>

     

       413
       +
                           filter() ?

     

       414
       +
                             authority.includes(filter()!) ||

     

       415
       +
                             nsids()?.[authority].nsids.some((nsid) =>

     

       416
       +
                               `${authority}.${nsid}`.includes(filter()!),

     

       417
       +
                             )

     

       418
       +
                           : true,

     

       419
       +
                         )}

     

       420
       +
                       >

     

       421
       +
                         {(authority) => {

     

       422
       +
                           const reversedDomain = authority.split(".").reverse().join(".");

     

       423
       +
                           const [faviconLoaded, setFaviconLoaded] = createSignal(false);

     

       424
        
       

     

       425
       +
                           const isHighlighted = () => location.hash === `#collections:${authority}`;

     

       426
        
       

     

       427
       +
                           return (

     

       428
       +
                             <div

     

       429
       +
                               id={`collection-${authority}`}

     

       430
       +
                               class="group flex items-start gap-2 rounded-lg p-1 transition-colors"

     

       431
       +
                               classList={{

     

       432
       +
                                 "dark:hover:bg-dark-200 hover:bg-neutral-200": !isHighlighted(),

     

       433
       +
                                 "bg-blue-100 dark:bg-blue-500/25": isHighlighted(),

     

       434
       +
                               }}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       435
        
                             >

     

       436
       +
                               <a

     

       437
       +
                                 href={`#collections:${authority}`}

     

       438
       +
                                 class="relative flex h-5 w-4 shrink-0 items-center justify-center hover:opacity-70"

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       439
        
                               >

     

       440
       +
                                 <span class="absolute top-1/2 -left-5 flex -translate-y-1/2 items-center text-base opacity-0 transition-opacity group-hover:opacity-100">

     

       441
       +
                                   <span class="iconify lucide--link absolute -left-2 w-7"></span>

     

       442
       +
                                 </span>

     

       443
       +
                                 <Show when={!faviconLoaded()}>

     

       444
       +
                                   <span class="iconify lucide--globe size-4 text-neutral-400 dark:text-neutral-500" />

     

       445
       +
                                 </Show>

     

       446
       +
                                 <img

     

       447
       +
                                   src={

     

       448
       +
                                     ["bsky.app", "bsky.chat"].includes(reversedDomain) ?

     

       449
       +
                                       "https://web-cdn.bsky.app/static/apple-touch-icon.png"

     

       450
       +
                                     : `https://${reversedDomain}/favicon.ico`

     

       451
       +
                                   }

     

       452
       +
                                   alt={`${reversedDomain} favicon`}

     

       453
       +
                                   class="h-4 w-4"

     

       454
       +
                                   classList={{ hidden: !faviconLoaded() }}

     

       455
       +
                                   onLoad={() => setFaviconLoaded(true)}

     

       456
       +
                                   onError={() => setFaviconLoaded(false)}

     

       457
       +
                                 />

     

       458
       +
                               </a>

     

       459
       +
                               <div class="flex flex-1 flex-col">

     

       460
       +
                                 <For

     

       461
       +
                                   each={nsids()?.[authority].nsids.filter((nsid) =>

     

       462
       +
                                     filter() ? `${authority}.${nsid}`.includes(filter()!) : true,

     

       463
       +
                                   )}

     

       464
       +
                                 >

     

       465
       +
                                   {(nsid) => (

     

       466
       +
                                     <A

     

       467
       +
                                       href={`/at://${did}/${authority}.${nsid}`}

     

       468
       +
                                       class="hover:underline active:underline"

     

       469
       +
                                     >

     

       470
       +
                                       <span>{authority}</span>

     

       471
       +
                                       <span class="text-neutral-500 dark:text-neutral-400">.{nsid}</span>

     

       472
       +
                                     </A>

     

       473
       +
                                   )}

     

       474
       +
                                 </For>

     

       475
       +
                               </div>

     

       476
        
                             </div>

     

       477
       +
                           );

     

       478
       +
                         }}

     

       479
       +
                       </For>

     

       480
       +
                     </Show>

     

       481
        
                   </div>

     

       482
        
                 </Show>

     

       483
        
                 <Show when={location.hash === "#identity" || (error() && !location.hash)}>

Compare changes