commit ab1c8fcf3162893fa73af07a4c78064ebf86fc79 · juli.ee/cleanfollow

+29 -19

index.html

···

       1
       -
       <!DOCTYPE html>

     

       2
        
       <html lang="en">

     

       3
       -
       

     

       4
       -
       <head>

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       14
       -
       </head>

     

       15
       -
       

     

       16
       -
       <body>

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       19
        
       

     

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

     

       21
       -
       </body>

     

       0
        
       
     

       22
        
       

     

       0
        
       
     

       0
        
       
     

       23
        
       </html>

···

       1
       +
       <!doctype html>

     

       2
        
       <html lang="en">

     

       3
       +
         <head>

     

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

     

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

     

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

     

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

     

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

     

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

     

       10
       +
           <meta

     

       11
       +
             property="og:description"

     

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

     

       13
       +
           />

     

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

     

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

     

       16
       +
           <script>

     

       17
       +
             if (

     

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

     

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

     

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

     

       21
       +
             )

     

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

     

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

     

       24
       +
           </script>

     

       25
       +
         </head>

     

       26
        
       

     

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

     

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

     

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

     

       30
        
       

     

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

     

       32
       +
         </body>

     

       33
        
       </html>

+60 -34

src/App.tsx

···

       24
        
         resolveFromIdentity,

     

       25
        
         type Session,

     

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

     

       0
        
       
     

       27
        
       

     

       28
        
       configureOAuth({

     

       29
        
         metadata: {

     
···

       148
        
         return (

     

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

     

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

     

       151
       -
               <form

     

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

     

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

     

       154
       -
               >

     

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

     

       156
        
                 <input

     

       157
        
                   type="text"

     

       158
        
                   id="handle"

     

       159
        
                   placeholder="user.bsky.social"

     

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

     

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

     

       162
        
                 />

     

       163
        
                 <button

     

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

     

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

     

       166
        
                 >

     

       167
        
                   Login

     

       168
        
                 </button>

     
···

       170
        
             </Show>

     

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

     

       172
        
               <div class="mb-4">

     

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

     

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

     

       175
        
                   Logout

     

       176
        
                 </a>

     

       177
       -
                 )

     

       178
        
               </div>

     

       179
        
             </Show>

     

       180
        
             <Show when={notice()}>

     
···

       315
        
               <button

     

       316
        
                 type="button"

     

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

     

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

     

       319
        
               >

     

       320
        
                 Preview

     

       321
        
               </button>

     
···

       324
        
               <button

     

       325
        
                 type="button"

     

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

     

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

     

       328
        
               >

     

       329
        
                 Confirm

     

       330
        
               </button>

     
···

       371
        
       

     

       372
        
         return (

     

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

     

       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">

     

       375
        
               <For each={options}>

     

       376
        
                 {(option, index) => (

     

       377
        
                   <div

     
···

       396
        
                           }

     

       397
        
                         />

     

       398
        
                         <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
       -
                         <span class="ms-3 select-none dark:text-gray-300">

     

       400
       -
                           {option.label}

     

       401
       -
                         </span>

     

       402
        
                       </label>

     

       403
        
                     </div>

     

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

     
···

       434
        
                     <div

     

       435
        
                       classList={{

     

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

     

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

     

       438
        
                       }}

     

       439
        
                     >

     

       440
        
                       <div class="mx-2">

     
···

       471
        
       };

     

       472
        
       

     

       473
        
       const App: Component = () => {

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       474
        
         return (

     

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

     

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

     

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

     

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

     

       479
       -
               <div>

     

       480
       -
                 <a

     

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

     

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

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       483
        
                 >

     

       484
       -
                   Source Code

     

       485
       -
                 </a>

     

       486
       -
                 <span> | </span>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       487
        
                 <a

     

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

     

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

     

       0
        
       
     

       490
        
                 >

     

       491
       -
                   Bluesky

     

       492
        
                 </a>

     

       493
       -
                 <span> | </span>

     

       494
        
                 <a

     

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

     

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

     

       497
        
                 >

     

       498
       -
                   Quiet Posters

     

       499
        
                 </a>

     

       500
        
               </div>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       501
        
             </div>

     

       502
        
             <Login />

     

       503
        
             <Show when={loginState()}>

···

       24
        
         resolveFromIdentity,

     

       25
        
         type Session,

     

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

     

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

     

       28
        
       

     

       29
        
       configureOAuth({

     

       30
        
         metadata: {

     
···

       149
        
         return (

     

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

     

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

     

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

     

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

     

       154
       +
                   Handle

     

       155
       +
                 </label>

     

       0
        
       
     

       156
        
                 <input

     

       157
        
                   type="text"

     

       158
        
                   id="handle"

     

       159
        
                   placeholder="user.bsky.social"

     

       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
        
                   onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       162
        
                 />

     

       163
        
                 <button

     

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

     

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

     

       166
        
                 >

     

       167
        
                   Login

     

       168
        
                 </button>

     
···

       170
        
             </Show>

     

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

     

       172
        
               <div class="mb-4">

     

       173
       +
                 Logged in as @{handle()}

     

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

     

       175
        
                   Logout

     

       176
        
                 </a>

     

       0
        
       
     

       177
        
               </div>

     

       178
        
             </Show>

     

       179
        
             <Show when={notice()}>

     
···

       314
        
               <button

     

       315
        
                 type="button"

     

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

     

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

     

       318
        
               >

     

       319
        
                 Preview

     

       320
        
               </button>

     
···

       323
        
               <button

     

       324
        
                 type="button"

     

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

     

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

     

       327
        
               >

     

       328
        
                 Confirm

     

       329
        
               </button>

     
···

       370
        
       

     

       371
        
         return (

     

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

     

       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">

     

       374
        
               <For each={options}>

     

       375
        
                 {(option, index) => (

     

       376
        
                   <div

     
···

       395
        
                           }

     

       396
        
                         />

     

       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>

     

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

     

       0
        
       
     

       0
        
       
     

       399
        
                       </label>

     

       400
        
                     </div>

     

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

     
···

       431
        
                     <div

     

       432
        
                       classList={{

     

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

     

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

     

       435
        
                       }}

     

       436
        
                     >

     

       437
        
                       <div class="mx-2">

     
···

       468
        
       };

     

       469
        
       

     

       470
        
       const App: Component = () => {

     

       471
       +
         const [theme, setTheme] = createSignal(

     

       472
       +
           (

     

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

     

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

     

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

     

       476
       +
           ) ?

     

       477
       +
             "dark"

     

       478
       +
           : "light",

     

       479
       +
         );

     

       480
       +
       

     

       481
        
         return (

     

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

     

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

     

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

     

       485
       +
                 <div

     

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

     

       487
       +
                   onclick={() => {

     

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

     

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

     

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

     

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

     

       492
       +
                     localStorage.theme = theme();

     

       493
       +
                   }}

     

       494
        
                 >

     

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

     

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

     

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

     

       498
       +
                 </div>

     

       499
       +
               </div>

     

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

     

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

     

       502
       +
               </div>

     

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

     

       504
        
                 <a

     

       0
        
       
     

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

     

       506
       +
                   target="_blank"

     

       507
        
                 >

     

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

     

       509
        
                 </a>

     

       0
        
       
     

       510
        
                 <a

     

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

     

       512
       +
                   target="_blank"

     

       513
        
                 >

     

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

     

       515
        
                 </a>

     

       516
        
               </div>

     

       517
       +
             </div>

     

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

     

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

     

       520
       +
               <a

     

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

     

       522
       +
                 target="_blank"

     

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

     

       524
       +
               >

     

       525
       +
                 Quiet Posters

     

       526
       +
               </a>

     

       527
        
             </div>

     

       528
        
             <Login />

     

       529
        
             <Show when={loginState()}>

+91

src/svg.tsx

···

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

     

       2
       +
       

     

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

     

       4
       +
         return (

     

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

     

       6
       +
             <svg

     

       7
       +
               class="size-full"

     

       8
       +
               fill="currentColor"

     

       9
       +
               stroke-width="0"

     

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

     

       11
       +
               viewBox="0 0 16 16"

     

       12
       +
               height="1em"

     

       13
       +
               width="1em"

     

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

     

       15
       +
             >

     

       16
       +
               <path

     

       17
       +
                 fill="currentColor"

     

       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
       +
               ></path>

     

       20
       +
             </svg>

     

       21
       +
           </div>

     

       22
       +
         );

     

       23
       +
       };

     

       24
       +
       

     

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

     

       26
       +
         return (

     

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

     

       28
       +
             <svg

     

       29
       +
               class="size-full"

     

       30
       +
               width="1em"

     

       31
       +
               height="1em"

     

       32
       +
               viewBox="0 0 568 501"

     

       33
       +
               fill="currentColor"

     

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

     

       35
       +
             >

     

       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
       +
             </svg>

     

       38
       +
           </div>

     

       39
       +
         );

     

       40
       +
       };

     

       41
       +
       

     

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

     

       43
       +
         return (

     

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

     

       45
       +
             <svg

     

       46
       +
               class="size-full"

     

       47
       +
               fill="none"

     

       48
       +
               stroke-width="2"

     

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

     

       50
       +
               width="1em"

     

       51
       +
               height="1em"

     

       52
       +
               viewBox="0 0 24 24"

     

       53
       +
               stroke="currentColor"

     

       54
       +
               stroke-linecap="round"

     

       55
       +
               stroke-linejoin="round"

     

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

     

       57
       +
             >

     

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

     

       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
       +
               <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
       +
               <path d="M19 11h2m-1 -1v2"></path>

     

       62
       +
             </svg>

     

       63
       +
           </div>

     

       64
       +
         );

     

       65
       +
       };

     

       66
       +
       

     

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

     

       68
       +
         return (

     

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

     

       70
       +
             <svg

     

       71
       +
               class="size-full"

     

       72
       +
               fill="none"

     

       73
       +
               stroke-width="2"

     

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

     

       75
       +
               width="1em"

     

       76
       +
               height="1em"

     

       77
       +
               viewBox="0 0 24 24"

     

       78
       +
               stroke="currentColor"

     

       79
       +
               stroke-linecap="round"

     

       80
       +
               stroke-linejoin="round"

     

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

     

       82
       +
             >

     

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

     

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

     

       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
       +
             </svg>

     

       87
       +
           </div>

     

       88
       +
         );

     

       89
       +
       };

     

       90
       +
       

     

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