commit ab1c8fcf3162893fa73af07a4c78064ebf86fc79 · juli.ee/cleanfollow

+29 -19

index.html

···

       1
       1
       -
       <!DOCTYPE html>

     

       1
       1
       +
       <!doctype html>

     

       2
       2
        
       <html lang="en">

     

       3
       3
       -
       

     

       4
       4
       -
       <head>

     

       5
       5
       -
         <meta charset="utf-8" />

     

       6
       6
       -
         <meta name="viewport" content="width=device-width, initial-scale=1" />

     

       7
       7
       -
         <meta name="theme-color" content="#000000" />

     

       8
       8
       -
         <meta property="og:title" content="cleanfollow-bsky" />

     

       9
       9
       -
         <meta property="og:type" content="website" />

     

       10
       10
       -
         <meta property="og:url" content="https://cleanfollow-bsky.pages.dev" />

     

       11
       11
       -
         <meta property="og:description" content="Unfollow blocked, deleted, suspended, and deactivated Bluesky accounts" />

     

       12
       12
       -
         <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />

     

       13
       13
       -
         <title>cleanfollow-bsky</title>

     

       14
       14
       -
       </head>

     

       15
       15
       -
       

     

       16
       16
       -
       <body>

     

       17
       17
       -
         <noscript>You need to enable JavaScript to run this app.</noscript>

     

       18
       18
       -
         <div id="root"></div>

     

       3
       3
       +
         <head>

     

       4
       4
       +
           <meta charset="utf-8" />

     

       5
       5
       +
           <meta name="viewport" content="width=device-width, initial-scale=1" />

     

       6
       6
       +
           <meta name="theme-color" content="#000000" />

     

       7
       7
       +
           <meta property="og:title" content="cleanfollow-bsky" />

     

       8
       8
       +
           <meta property="og:type" content="website" />

     

       9
       9
       +
           <meta property="og:url" content="https://cleanfollow-bsky.pages.dev" />

     

       10
       10
       +
           <meta

     

       11
       11
       +
             property="og:description"

     

       12
       12
       +
             content="Unfollow blocked, deleted, suspended, and deactivated Bluesky accounts"

     

       13
       13
       +
           />

     

       14
       14
       +
           <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />

     

       15
       15
       +
           <title>cleanfollow-bsky</title>

     

       16
       16
       +
           <script>

     

       17
       17
       +
             if (

     

       18
       18
       +
               localStorage.theme === "dark" ||

     

       19
       19
       +
               (!("theme" in localStorage) &&

     

       20
       20
       +
                 window.matchMedia("(prefers-color-scheme: dark)").matches)

     

       21
       21
       +
             )

     

       22
       22
       +
               document.documentElement.classList.add("dark");

     

       23
       23
       +
             else document.documentElement.classList.remove("dark");

     

       24
       24
       +
           </script>

     

       25
       25
       +
         </head>

     

       19
       26
        
       

     

       20
       20
       -
         <script src="/src/index.tsx" type="module"></script>

     

       21
       21
       -
       </body>

     

       27
       27
       +
         <body id="root" class="dark:bg-dark-500 bg-slate-100">

     

       28
       28
       +
           <noscript>You need to enable JavaScript to run this app.</noscript>

     

       29
       29
       +
           <div id="root"></div>

     

       22
       30
        
       

     

       31
       31
       +
           <script src="/src/index.tsx" type="module"></script>

     

       32
       32
       +
         </body>

     

       23
       33
        
       </html>

+60 -34

src/App.tsx

···

       24
       24
        
         resolveFromIdentity,

     

       25
       25
        
         type Session,

     

       26
       26
        
       } from "@atcute/oauth-browser-client";

     

       27
       27
       +
       import { AiFillGithub, Bluesky, TbMoonStar, TbSun } from "./svg";

     

       27
       28
        
       

     

       28
       29
        
       configureOAuth({

     

       29
       30
        
         metadata: {

     
···

       148
       149
        
         return (

     

       149
       150
        
           <div class="flex flex-col items-center">

     

       150
       151
        
             <Show when={!loginState() && !notice().includes("Loading")}>

     

       151
       151
       -
               <form

     

       152
       152
       -
                 class="flex flex-col items-center"

     

       153
       153
       -
                 onsubmit={(e) => e.preventDefault()}

     

       154
       154
       -
               >

     

       155
       155
       -
                 <label for="handle">Handle:</label>

     

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

     

       153
       153
       +
                 <label for="handle" class="ml-0.5">

     

       154
       154
       +
                   Handle

     

       155
       155
       +
                 </label>

     

       156
       156
        
                 <input

     

       157
       157
        
                   type="text"

     

       158
       158
        
                   id="handle"

     

       159
       159
        
                   placeholder="user.bsky.social"

     

       160
       160
       -
                   class="mb-3 mt-1 rounded-md border border-black px-2 py-1"

     

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

     

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

     

       162
       162
        
                 />

     

       163
       163
        
                 <button

     

       164
       164
        
                   onclick={() => loginBsky(loginInput())}

     

       165
       165
       -
                   class="rounded bg-blue-500 px-2 py-2 font-bold text-white hover:bg-blue-700"

     

       165
       165
       +
                   class="rounded bg-blue-600 py-1.5 font-bold text-slate-100 hover:bg-blue-700"

     

       166
       166
        
                 >

     

       167
       167
        
                   Login

     

       168
       168
        
                 </button>

     
···

       170
       170
        
             </Show>

     

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

     

       172
       172
        
               <div class="mb-4">

     

       173
       173
       -
                 Logged in as @{handle()} (

     

       174
       174
       -
                 <a href="" class="text-red-600" onclick={() => logoutBsky()}>

     

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

     

       174
       174
       +
                 <a href="" class="ml-2 text-red-500" onclick={() => logoutBsky()}>

     

       175
       175
        
                   Logout

     

       176
       176
        
                 </a>

     

       177
       177
       -
                 )

     

       178
       177
        
               </div>

     

       179
       178
        
             </Show>

     

       180
       179
        
             <Show when={notice()}>

     
···

       315
       314
        
               <button

     

       316
       315
        
                 type="button"

     

       317
       316
        
                 onclick={() => fetchHiddenAccounts()}

     

       318
       318
       -
                 class="rounded bg-blue-500 px-2 py-2 font-bold text-white hover:bg-blue-700"

     

       317
       317
       +
                 class="rounded bg-blue-600 px-2 py-2 font-bold text-slate-100 hover:bg-blue-700"

     

       319
       318
        
               >

     

       320
       319
        
                 Preview

     

       321
       320
        
               </button>

     
···

       324
       323
        
               <button

     

       325
       324
        
                 type="button"

     

       326
       325
        
                 onclick={() => unfollow()}

     

       327
       327
       -
                 class="rounded bg-green-600 px-2 py-2 font-bold text-white hover:bg-green-700"

     

       326
       326
       +
                 class="rounded bg-green-600 px-2 py-2 font-bold text-slate-100 hover:bg-green-700"

     

       328
       327
        
               >

     

       329
       328
        
                 Confirm

     

       330
       329
        
               </button>

     
···

       371
       370
        
       

     

       372
       371
        
         return (

     

       373
       372
        
           <div class="mt-6 flex flex-col sm:w-full sm:flex-row sm:justify-center">

     

       374
       374
       -
             <div class="sticky top-0 mb-3 mr-5 flex w-full flex-wrap justify-around border-b border-b-gray-400 bg-white pb-3 sm:top-3 sm:mb-0 sm:w-auto sm:flex-col sm:self-start sm:border-none">

     

       373
       373
       +
             <div class="dark:bg-dark-500 sticky top-0 mb-3 mr-5 flex w-full flex-wrap justify-around border-b border-b-gray-400 bg-slate-100 pb-3 sm:top-3 sm:mb-0 sm:w-auto sm:flex-col sm:self-start sm:border-none">

     

       375
       374
        
               <For each={options}>

     

       376
       375
        
                 {(option, index) => (

     

       377
       376
        
                   <div

     
···

       396
       395
        
                           }

     

       397
       396
        
                         />

     

       398
       397
        
                         <span class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"></span>

     

       399
       399
       -
                         <span class="ms-3 select-none dark:text-gray-300">

     

       400
       400
       -
                           {option.label}

     

       401
       401
       -
                         </span>

     

       398
       398
       +
                         <span class="ms-3 select-none">{option.label}</span>

     

       402
       399
        
                       </label>

     

       403
       400
        
                     </div>

     

       404
       401
        
                     <div class="flex items-center">

     
···

       434
       431
        
                     <div

     

       435
       432
        
                       classList={{

     

       436
       433
        
                         "mb-1 flex items-center border-b py-1": true,

     

       437
       437
       -
                         "bg-red-400": record.toDelete,

     

       434
       434
       +
                         "bg-red-300 dark:bg-red-800": record.toDelete,

     

       438
       435
        
                       }}

     

       439
       436
        
                     >

     

       440
       437
        
                       <div class="mx-2">

     
···

       471
       468
        
       };

     

       472
       469
        
       

     

       473
       470
        
       const App: Component = () => {

     

       471
       471
       +
         const [theme, setTheme] = createSignal(

     

       472
       472
       +
           (

     

       473
       473
       +
             localStorage.theme === "dark" ||

     

       474
       474
       +
               (!("theme" in localStorage) &&

     

       475
       475
       +
                 globalThis.matchMedia("(prefers-color-scheme: dark)").matches)

     

       476
       476
       +
           ) ?

     

       477
       477
       +
             "dark"

     

       478
       478
       +
           : "light",

     

       479
       479
       +
         );

     

       480
       480
       +
       

     

       474
       481
        
         return (

     

       475
       475
       -
           <div class="m-5 flex flex-col items-center">

     

       476
       476
       -
             <h1 class="mb-2 text-xl font-bold">cleanfollow-bsky</h1>

     

       477
       477
       -
             <div class="mb-2 text-center">

     

       478
       478
       -
               <p>Select then unfollow inactive or blocked accounts</p>

     

       479
       479
       -
               <div>

     

       480
       480
       -
                 <a

     

       481
       481
       -
                   class="text-blue-600 hover:underline"

     

       482
       482
       -
                   href="https://github.com/notjuliet/cleanfollow-bsky"

     

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

     

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

     

       484
       484
       +
               <div class="basis-1/3">

     

       485
       485
       +
                 <div

     

       486
       486
       +
                   class="w-fit cursor-pointer"

     

       487
       487
       +
                   onclick={() => {

     

       488
       488
       +
                     setTheme(theme() === "light" ? "dark" : "light");

     

       489
       489
       +
                     if (theme() === "dark")

     

       490
       490
       +
                       document.documentElement.classList.add("dark");

     

       491
       491
       +
                     else document.documentElement.classList.remove("dark");

     

       492
       492
       +
                     localStorage.theme = theme();

     

       493
       493
       +
                   }}

     

       483
       494
        
                 >

     

       484
       484
       -
                   Source Code

     

       485
       485
       -
                 </a>

     

       486
       486
       -
                 <span> | </span>

     

       495
       495
       +
                   {theme() === "dark" ?

     

       496
       496
       +
                     <TbMoonStar class="size-6" />

     

       497
       497
       +
                   : <TbSun class="size-6" />}

     

       498
       498
       +
                 </div>

     

       499
       499
       +
               </div>

     

       500
       500
       +
               <div class="basis-1/3 text-center text-xl font-bold">

     

       501
       501
       +
                 <a href="">cleanfollow</a>

     

       502
       502
       +
               </div>

     

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

     

       487
       504
        
                 <a

     

       488
       488
       -
                   class="text-blue-600 hover:underline"

     

       489
       505
        
                   href="https://bsky.app/profile/did:plc:b3pn34agqqchkaf75v7h43dk"

     

       506
       506
       +
                   target="_blank"

     

       490
       507
        
                 >

     

       491
       491
       -
                   Bluesky

     

       508
       508
       +
                   <Bluesky class="size-6" />

     

       492
       509
        
                 </a>

     

       493
       493
       -
                 <span> | </span>

     

       494
       510
        
                 <a

     

       495
       495
       -
                   class="text-blue-600 hover:underline"

     

       496
       496
       -
                   href="https://mary-ext.codeberg.page/bluesky-quiet-posters/"

     

       511
       511
       +
                   href="https://github.com/notjuliet/cleanfollow-bsky"

     

       512
       512
       +
                   target="_blank"

     

       497
       513
        
                 >

     

       498
       498
       -
                   Quiet Posters

     

       514
       514
       +
                   <AiFillGithub class="size-6" />

     

       499
       515
        
                 </a>

     

       500
       516
        
               </div>

     

       517
       517
       +
             </div>

     

       518
       518
       +
             <div class="mb-2 text-center">

     

       519
       519
       +
               <p>Select then unfollow inactive or blocked accounts</p>

     

       520
       520
       +
               <a

     

       521
       521
       +
                 class="text-blue-500 hover:underline"

     

       522
       522
       +
                 target="_blank"

     

       523
       523
       +
                 href="https://mary-ext.codeberg.page/bluesky-quiet-posters/"

     

       524
       524
       +
               >

     

       525
       525
       +
                 Quiet Posters

     

       526
       526
       +
               </a>

     

       501
       527
        
             </div>

     

       502
       528
        
             <Login />

     

       503
       529
        
             <Show when={loginState()}>

+91

src/svg.tsx

···

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

     

       2
       2
       +
       

     

       3
       3
       +
       const AiFillGithub: Component<{ class?: string }> = (props) => {

     

       4
       4
       +
         return (

     

       5
       5
       +
           <div class={props.class}>

     

       6
       6
       +
             <svg

     

       7
       7
       +
               class="size-full"

     

       8
       8
       +
               fill="currentColor"

     

       9
       9
       +
               stroke-width="0"

     

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

     

       11
       11
       +
               viewBox="0 0 16 16"

     

       12
       12
       +
               height="1em"

     

       13
       13
       +
               width="1em"

     

       14
       14
       +
               style="overflow: visible; color: currentcolor;"

     

       15
       15
       +
             >

     

       16
       16
       +
               <path

     

       17
       17
       +
                 fill="currentColor"

     

       18
       18
       +
                 d="M8 .198a8 8 0 0 0-2.529 15.591c.4.074.547-.174.547-.385 0-.191-.008-.821-.011-1.489-2.226.484-2.695-.944-2.695-.944-.364-.925-.888-1.171-.888-1.171-.726-.497.055-.486.055-.486.803.056 1.226.824 1.226.824.714 1.223 1.872.869 2.328.665.072-.517.279-.87.508-1.07-1.777-.202-3.645-.888-3.645-3.954 0-.873.313-1.587.824-2.147-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.201.82A7.672 7.672 0 0 1 8 4.066c.68.003 1.365.092 2.004.269 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.079 2.117.513.56.823 1.274.823 2.147 0 3.073-1.872 3.749-3.653 3.947.287.248.543.735.543 1.481 0 1.07-.009 1.932-.009 2.195 0 .213.144.462.55.384A8 8 0 0 0 8.001.196z"

     

       19
       19
       +
               ></path>

     

       20
       20
       +
             </svg>

     

       21
       21
       +
           </div>

     

       22
       22
       +
         );

     

       23
       23
       +
       };

     

       24
       24
       +
       

     

       25
       25
       +
       const Bluesky: Component<{ class?: string }> = (props) => {

     

       26
       26
       +
         return (

     

       27
       27
       +
           <div class={props.class}>

     

       28
       28
       +
             <svg

     

       29
       29
       +
               class="size-full"

     

       30
       30
       +
               width="1em"

     

       31
       31
       +
               height="1em"

     

       32
       32
       +
               viewBox="0 0 568 501"

     

       33
       33
       +
               fill="currentColor"

     

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

     

       35
       35
       +
             >

     

       36
       36
       +
               <path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" />

     

       37
       37
       +
             </svg>

     

       38
       38
       +
           </div>

     

       39
       39
       +
         );

     

       40
       40
       +
       };

     

       41
       41
       +
       

     

       42
       42
       +
       const TbMoonStar: Component<{ class?: string }> = (props) => {

     

       43
       43
       +
         return (

     

       44
       44
       +
           <div class={props.class}>

     

       45
       45
       +
             <svg

     

       46
       46
       +
               class="size-full"

     

       47
       47
       +
               fill="none"

     

       48
       48
       +
               stroke-width="2"

     

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

     

       50
       50
       +
               width="1em"

     

       51
       51
       +
               height="1em"

     

       52
       52
       +
               viewBox="0 0 24 24"

     

       53
       53
       +
               stroke="currentColor"

     

       54
       54
       +
               stroke-linecap="round"

     

       55
       55
       +
               stroke-linejoin="round"

     

       56
       56
       +
               style="overflow: visible; color: currentcolor;"

     

       57
       57
       +
             >

     

       58
       58
       +
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

     

       59
       59
       +
               <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>

     

       60
       60
       +
               <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>

     

       61
       61
       +
               <path d="M19 11h2m-1 -1v2"></path>

     

       62
       62
       +
             </svg>

     

       63
       63
       +
           </div>

     

       64
       64
       +
         );

     

       65
       65
       +
       };

     

       66
       66
       +
       

     

       67
       67
       +
       const TbSun: Component<{ class?: string }> = (props) => {

     

       68
       68
       +
         return (

     

       69
       69
       +
           <div class={props.class}>

     

       70
       70
       +
             <svg

     

       71
       71
       +
               class="size-full"

     

       72
       72
       +
               fill="none"

     

       73
       73
       +
               stroke-width="2"

     

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

     

       75
       75
       +
               width="1em"

     

       76
       76
       +
               height="1em"

     

       77
       77
       +
               viewBox="0 0 24 24"

     

       78
       78
       +
               stroke="currentColor"

     

       79
       79
       +
               stroke-linecap="round"

     

       80
       80
       +
               stroke-linejoin="round"

     

       81
       81
       +
               style="overflow: visible; color: currentcolor;"

     

       82
       82
       +
             >

     

       83
       83
       +
               <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>

     

       84
       84
       +
               <path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>

     

       85
       85
       +
               <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>

     

       86
       86
       +
             </svg>

     

       87
       87
       +
           </div>

     

       88
       88
       +
         );

     

       89
       89
       +
       };

     

       90
       90
       +
       

     

       91
       91
       +
       export { AiFillGithub, Bluesky, TbMoonStar, TbSun };