commit 9f6d3b6914f5a81e4c6da1fdee9910fc682e26a9 · knotbin.com/airport

+65

components/Link.tsx

···

       1
       1
       +
       import { JSX } from "preact";

     

       2
       2
       +
       

     

       3
       3
       +
       /**

     

       4
       4
       +
        * Props for the Link component

     

       5
       5
       +
        */

     

       6
       6
       +
       type Props = Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "href"> & {

     

       7
       7
       +
         /** URL for the link */

     

       8
       8
       +
         href: string;

     

       9
       9
       +
         /** Whether this is an external link that should show an outbound icon */

     

       10
       10
       +
         isExternal?: boolean;

     

       11
       11
       +
         /** Link text content */

     

       12
       12
       +
         children: JSX.Element | string;

     

       13
       13
       +
       };

     

       14
       14
       +
       

     

       15
       15
       +
       /**

     

       16
       16
       +
        * A link component that handles external links with appropriate styling and accessibility.

     

       17
       17
       +
        * Automatically adds external link icon and proper attributes for external links.

     

       18
       18
       +
        */

     

       19
       19
       +
       export function Link(props: Props) {

     

       20
       20
       +
         const {

     

       21
       21
       +
           isExternal = false,

     

       22
       22
       +
           class: className = "",

     

       23
       23
       +
           children,

     

       24
       24
       +
           href,

     

       25
       25
       +
           ...rest

     

       26
       26
       +
         } = props;

     

       27
       27
       +
       

     

       28
       28
       +
         // SVG for external link icon

     

       29
       29
       +
         const externalLinkIcon = (

     

       30
       30
       +
           <svg

     

       31
       31
       +
             xmlns="http://www.w3.org/2000/svg"

     

       32
       32
       +
             viewBox="0 0 20 20"

     

       33
       33
       +
             fill="currentColor"

     

       34
       34
       +
             className="w-4 h-4 inline-block ml-1"

     

       35
       35
       +
             aria-hidden="true"

     

       36
       36
       +
           >

     

       37
       37
       +
             <path

     

       38
       38
       +
               fillRule="evenodd"

     

       39
       39
       +
               d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"

     

       40
       40
       +
             />

     

       41
       41
       +
             <path

     

       42
       42
       +
               fillRule="evenodd"

     

       43
       43
       +
               d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"

     

       44
       44
       +
             />

     

       45
       45
       +
           </svg>

     

       46
       46
       +
         );

     

       47
       47
       +
       

     

       48
       48
       +
         return (

     

       49
       49
       +
           <a

     

       50
       50
       +
             href={href}

     

       51
       51
       +
             {...rest}

     

       52
       52
       +
             className={`inline-flex items-center hover:underline ${className}`}

     

       53
       53
       +
             {...(isExternal && {

     

       54
       54
       +
               target: "_blank",

     

       55
       55
       +
               rel: "noopener noreferrer",

     

       56
       56
       +
               "aria-label": `${

     

       57
       57
       +
                 typeof children === "string" ? children : ""

     

       58
       58
       +
               } (opens in new tab)`,

     

       59
       59
       +
             })}

     

       60
       60
       +
           >

     

       61
       61
       +
             {children}

     

       62
       62
       +
             {isExternal && externalLinkIcon}

     

       63
       63
       +
           </a>

     

       64
       64
       +
         );

     

       65
       65
       +
       }

+22 -14

islands/DidPlcProgress.tsx

···

       1
       1
        
       import { useState } from "preact/hooks";

     

       2
       2
       +
       import { Link } from "../components/Link.tsx";

     

       2
       3
        
       

     

       3
       4
        
       interface PlcUpdateStep {

     

       4
       5
        
         name: string;

     
···

       514
       515
        
                 {/* Main Description */}

     

       515
       516
        
                 <div class="prose dark:prose-invert max-w-none mb-6">

     

       516
       517
        
                   <p class="text-blue-800 dark:text-blue-200 mb-4">

     

       517
       517
       -
                     This tool helps you add a new rotation key to your PLC (Public

     

       518
       518
       -
                     Ledger of Credentials). Having control of a rotation key gives you

     

       519
       519
       -
                     sovereignty over your DID (Decentralized Identifier).

     

       518
       518
       +
                     This tool helps you add a new rotation key to your{" "}

     

       519
       519
       +
                     <Link

     

       520
       520
       +
                       href="https://web.plc.directory/"

     

       521
       521
       +
                       isExternal

     

       522
       522
       +
                       class="text-blue-600 dark:text-blue-400"

     

       523
       523
       +
                     >

     

       524
       524
       +
                       PLC (Public Ledger of Credentials)

     

       525
       525
       +
                     </Link>

     

       526
       526
       +
                     . Having control of a rotation key gives you sovereignty over your

     

       527
       527
       +
                     DID (Decentralized Identifier).

     

       520
       528
        
                   </p>

     

       521
       529
        
       

     

       522
       530
        
                   <h4 class="text-blue-900 dark:text-blue-100 font-medium mt-4 mb-2">

     
···

       540
       548
        
                     Process Overview:

     

       541
       549
        
                   </h4>

     

       542
       550
        
                   <ol class="space-y-2 text-sm text-blue-700 dark:text-blue-300 list-decimal pl-5">

     

       543
       543
       -
                     <li>Generate a secure rotation key</li>

     

       544
       544
       -
                     <li>Download and safely store the key</li>

     

       551
       551
       +
                     <li>Generate a new rotation key</li>

     

       552
       552
       +
                     <li>Download the key</li>

     

       545
       553
        
                     <li>Verify your identity via email</li>

     

       546
       546
       -
                     <li>Add the key to your PLC record</li>

     

       554
       554
       +
                     <li>Add the key to your PLC document</li>

     

       547
       555
        
                   </ol>

     

       548
       556
        
                 </div>

     

       549
       557
        
       

     
···

       554
       562
        
                   </h4>

     

       555
       563
        
                   <p class="text-sm text-gray-600 dark:text-gray-400">

     

       556
       564
        
                     The rotation key is a did:key that will be added to your PLC

     

       557
       557
       -
                     record's rotationKeys array. This process uses the ATP PLC

     

       558
       558
       -
                     operations to update your DID document.

     

       559
       559
       -
                     <a

     

       560
       560
       -
                       href="https://atproto.com/specs/did-plc"

     

       561
       561
       -
                       target="_blank"

     

       562
       562
       -
                       class="text-blue-600 dark:text-blue-400 hover:underline ml-1"

     

       565
       565
       +
                     document's rotationKeys array. This process uses the AT Protocol's

     

       566
       566
       +
                     PLC operations to update your DID document.

     

       567
       567
       +
                     <Link

     

       568
       568
       +
                       href="https://web.plc.directory/"

     

       569
       569
       +
                       class="text-blue-600 dark:text-blue-400 ml-1"

     

       570
       570
       +
                       isExternal

     

       563
       571
        
                     >

     

       564
       564
       -
                       Learn more about PLC DIDs →

     

       565
       565
       -
                     </a>

     

       572
       572
       +
                       Learn more about did:plc

     

       573
       573
       +
                     </Link>

     

       566
       574
        
                   </p>

     

       567
       575
        
                 </div>

     

       568
       576

+15 -6

islands/Header.tsx

···

       51
       51
        
               setUser(

     

       52
       52
        
                 userData

     

       53
       53
        
                   ? {

     

       54
       54
       -
                     did: userData.did,

     

       55
       55
       -
                     handle: userData.handle,

     

       56
       56
       -
                   }

     

       57
       57
       -
                   : null,

     

       54
       54
       +
                       did: userData.did,

     

       55
       55
       +
                       handle: userData.handle,

     

       56
       56
       +
                     }

     

       57
       57
       +
                   : null

     

       58
       58
        
               );

     

       59
       59
        
             } catch (error) {

     

       60
       60
        
               console.error("Failed to fetch user:", error);

     
···

       97
       97
        
                 />

     

       98
       98
        
       

     

       99
       99
        
                 <div className="flex items-center gap-3">

     

       100
       100
       +
                   {/* Ticket booth (did:plc update) */}

     

       101
       101
       +
                   <Button

     

       102
       102
       +
                     href="/ticket-booth"

     

       103
       103
       +
                     color="amber"

     

       104
       104
       +
                     icon="/icons/ticket_bold.svg"

     

       105
       105
       +
                     iconAlt="Ticket"

     

       106
       106
       +
                     label="TICKET BOOTH"

     

       107
       107
       +
                   />

     

       108
       108
       +
       

     

       100
       109
        
                   {/* Departures (Migration) */}

     

       101
       110
        
                   <Button

     

       102
       111
        
                     href="/migrate"

     
···

       112
       121
        
                       <div className="relative">

     

       113
       122
        
                         <Button

     

       114
       123
        
                           color="amber"

     

       115
       115
       -
                           icon="/icons/ticket_bold.svg"

     

       124
       124
       +
                           icon="/icons/account.svg"

     

       116
       125
        
                           iconAlt="Check-in"

     

       117
       126
        
                           label="CHECKED IN"

     

       118
       127
        
                           onClick={() => setShowDropdown(!showDropdown)}

     
···

       141
       150
        
                       <Button

     

       142
       151
        
                         href="/login"

     

       143
       152
        
                         color="amber"

     

       144
       144
       -
                         icon="/icons/ticket_bold.svg"

     

       153
       153
       +
                         icon="/icons/account.svg"

     

       145
       154
        
                         iconAlt="Check-in"

     

       146
       155
        
                         label="CHECK-IN"

     

       147
       156
        
                       />

static/icons/account.svg

···

       1
       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M235.2-279.59q51-38.52 113.52-60.54 62.52-22.02 131.33-22.02t131.64 22.38q62.83 22.38 113.11 60.42 34.29-41.24 53.31-91.92 19.02-50.69 19.02-108.73 0-131.57-92.78-224.35T480-797.13q-131.57 0-224.35 92.78T162.87-480q0 57.8 18.9 108.49 18.9 50.68 53.43 91.92ZM480-437.85q-59.96 0-100.93-40.86-40.98-40.86-40.98-100.81 0-59.96 40.98-100.94 40.97-40.97 100.93-40.97 59.96 0 100.93 40.97 40.98 40.98 40.98 100.94 0 59.95-40.98 100.81-40.97 40.86-100.93 40.86Zm-.02 365.98q-84.65 0-159.09-32.1-74.43-32.1-129.63-87.29-55.19-55.2-87.29-129.65-32.1-74.46-32.1-159.11 0-84.65 32.1-159.09 32.1-74.43 87.29-129.63 55.2-55.19 129.65-87.29 74.46-32.1 159.11-32.1 84.65 0 159.09 32.1 74.43 32.1 129.63 87.29 55.19 55.2 87.29 129.65 32.1 74.46 32.1 159.11 0 84.65-32.1 159.09-32.1 74.43-87.29 129.63-55.2 55.19-129.65 87.29-74.46 32.1-159.11 32.1Zm.02-91q51.8 0 97.37-14.9 45.56-14.9 84.56-42.95-39.47-28.28-84.44-43.06-44.97-14.79-97.49-14.79-52.52 0-97.37 14.79-44.85 14.78-84.33 43.06 39 28.05 84.45 42.95 45.45 14.9 97.25 14.9Zm0-358.56q25.04 0 41.57-16.53 16.52-16.52 16.52-41.56 0-25.05-16.52-41.69-16.53-16.64-41.57-16.64t-41.57 16.64q-16.52 16.64-16.52 41.69 0 25.04 16.52 41.56 16.53 16.53 41.57 16.53Zm0-58.09Zm.24 358.8Z"/></svg>