patch of Improve general accessibility · round #0 · pull #2 · katproto.girlonthemoon.xyz/katproto_index

+193 -186

index.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.0" />

     

       6
       -
       	

     

       7
       -
       	<meta name="title" content="girl on the moon :: atproto" />

     

       8
       -
       	<meta name="description" content="girl on the moon PDS" />

     

       9
       -
       	<meta name="author" content="girlonthemoon.xyz" />

     

       10
       -
       	<meta property="og:title" content="girl on the moon :: atproto" />

     

       11
       -
       	<meta property="og:description" content="girl on the moon PDS" />

     

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

     

       13
       -
       	<meta property="og:url" content="https://katproto.girlonthemoon.xyz" />

     

       14
       -
       	<meta property="og:image" content="https://stash.4-walls.net/pics/pochacco.jpg" />

     

       15
       -
       

     

       16
       -
       	<link rel="canonical" href="https://katproto.girlonthemoon.xyz" />

     

       17
       -
       	<link rel="icon" type="image/png" sizes="64x64" href="https://stash.4-walls.net/pics/pochacco_favicon.png" />

     

       18
       -
       

     

       19
       -
       	<script src="https://stash.4-walls.net/katproto_demo/katproto_users.js"></script>

     

       20
       -
       

     

       21
       -
       	<title>katproto</title>

     

       22
       -
       	

     

       23
       -
       	<style>

     

       24
       -
       		@import url(https://fonts.bunny.net/css?family=victor-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);

     

       25
       -
       

     

       26
       -
       		:root {

     

       27
       -
       			--font: "Victor Mono", monospace;

     

       28
       -
       			--main-color: #ff69b4;

     

       29
       -
       		}

     

       30
       -
       

     

       31
       -
       		body {

     

       32
       -
       			font-family: var(--font) !important;			

     

       33
       -
       			counter-reset: Span-count;

     

       34
       -
       			font-size: .9rem;

     

       35
       -
       		}

     

       36
       -
       		

     

       37
       -
       		pre {

     

       38
       -
       			font-family: var(--font) !important;

     

       39
       -
       			margin: 0 !important;

     

       40
       -
       			padding: 0 !important;

     

       41
       -
       		}

     

       42
       -
       

     

       43
       -
       		.nosc {

     

       44
       -
       			font-family: var(--font) !important;

     

       45
       -
       			font-size: .9rem;

     

       46
       -
       		}

     

       47
       -
       

     

       48
       -
       		div[aria-label] {

     

       49
       -
       			margin: 0 !important;

     

       50
       -
       			padding: 0 !important;

     

       51
       -
       		}

     

       52
       -
       

     

       53
       -
       		pre h1 {

     

       54
       -
       			color: var(--main-color);

     

       55
       -
       			margin: 0 0 0 1rem;

     

       56
       -
       			padding: 0 !important;

     

       57
       -
       			font-style: italic;

     

       58
       -
       		}

     

       59
       -
       

     

       60
       -
       		h2 {

     

       61
       -
       			color: var(--main-color);

     

       62
       -
       			padding: 0 !important;

     

       63
       -
       			font-style: italic;

     

       64
       -
       		}

     

       65
       -
       

     

       66
       -
       		a {

     

       67
       -
       			text-underline-offset: 4px;

     

       68
       -
       			color: var(--main-color);

     

       69
       -
       			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

     

       70
       -
       		}

     

       71
       -
       

     

       72
       -
       		dfn, i {

     

       73
       -
       			color: var(--main-color);

     

       74
       -
       		}

     

       75
       -
       

     

       76
       -
       		a:hover {

     

       77
       -
       			text-decoration: none;

     

       78
       -
       			text-shadow: none;

     

       79
       -
       		}

     

       80
       -
       

     

       81
       -
       		hr {

     

       82
       -
       			border: 1px dashed var(--main-color);

     

       83
       -
       			width: 40%;

     

       84
       -
       			margin: 1rem 1rem 1rem 0;

     

       85
       -
       			padding: 0;

     

       86
       -
       		}

     

       87
       -
       

     

       88
       -
       		#not-pre {

     

       89
       -
       			margin: 0 0 0 1rem;

     

       90
       -
       		}

     

       91
       -
       

     

       92
       -
       		#list-users {

     

       93
       -
       			font-family: var(--font);

     

       94
       -
       			font-size: .9rem;

     

       95
       -
       			margin: 0 !important;

     

       96
       -
       			padding: 0 !important;

     

       97
       -
       		}

     

       98
       -
       

     

       99
       -
       		.user-count {

     

       100
       -
       			counter-increment: Span-count;

     

       101
       -
       			display: inline-block;

     

       102
       -
       			margin-bottom: .5rem;

     

       103
       -
       		}

     

       104
       -
       

     

       105
       -
       		.user-count:before {

     

       106
       -
       			content: counter(Span-count) ". ";

     

       107
       -
       		}

     

       108
       -
       	</style>

     

       109
       -
       	</head>

     

       110
       -
       

     

       111
       -
       	<body>

     

       112
       -
       

     

       113
       -
       <pre>

     

       114
       -
       <div aria-label="ASCII text art of pochacco" role="img">

     

       115
       -
                            ,8,

     

       116
       -
                            d8b

     

       117
       -
                            888

     

       118
       -
             __        ,    888

     

       119
       -
           d88888b.   -.\,- 888

     

       120
       -
              `Y8888b."```"-888

     

       121
       -
                  /`"       `8\

     

       122
       -
                 |             |

     

       123
       -
                 |             |

     

       124
       -
                 |             |

     

       125
       -
             __  /  O   _   O  \

     

       126
       -
           /`  '.\     '-'     /

     

       127
       -
           \     .'.         .;

     

       128
       -
            '. .'   `"""""""`  \

     

       129
       -
              `\            /.-.|

     

       130
       -
                `|         |`   |

     

       131
       -
                 |          \___/

     

       132
       -
                 ;-.._______..-;

     

       133
       -
           jgs  /       |       \

     

       134
       -
                \___,---'---,___/

     

       135
       -
       </div>

     

       136
       -
         <h1 id="katproto">katproto</h1>

     

       137
       -
         this is an at protocol <dfn>personal data server</dfn> (aka, an atproto PDS).

     

       138
       -
         more specifically, it's <a href="https://girlonthemoon.xyz/">kat</a>'s PDS!

     

       139
       -
       </pre>

     

       140
       -
       

     

       141
       -
       <div id="not-pre">

     

       142
       -
       	<hr>

     

       143
       -
       	

     

       144
       -
       	<h2 id="users">users</h2>

     

       145
       -
       

     

       146
       -
       	<div id="list-users">

     

       147
       -
       	</div>

     

       148
       -
       

     

       149
       -
       	<hr>

     

       150
       -
       

     

       151
       -
       	<noscript>

     

       152
       -
       		<span class="nosc">sorry, to see the dynamic list of users, you must have javascript enabled!</span>

     

       153
       -
       		<hr>

     

       154
       -
       	</noscript>

     

       155
       -
       

     

       156
       -
       	<script>

     

       157
       -
       	async function printUsers() {

     

       158
       -
       		document.getElementById("list-users").innerHTML = await getKatprotoUsers();

     

       159
       -
       	}

     

       160
       -
       	printUsers();

     

       161
       -
       	</script>

     

       162
       -
       

     

       163
       -
       	<h2 id="status">status</h2>

     

       164
       -
       

     

       165
       -
       	<p>Current status: <span id="current-status">Loading...</span></p>

     

       166
       -
       

     

       167
       -
       	<p>off-site status page in case the PDS goes down; in other words,<br>

     

       168
       -
       	   this page will remain up even when the PDS is down.</p>

     

       169
       -
       

     

       170
       -
       	<p><a href="https://uptime.4-walls.net/status/katproto">status page</a></p>

     

       171
       -
       

     

       172
       -
       	<hr>

     

       173
       -
       

     

       174
       -
       	<h2 id="credits">credits</h2>

     

       175
       -
       

     

       176
       -
       	<p>

     

       177
       -
       	    PDS: <a href="https://github.com/bluesky-social/pds">github.com/bluesky-social/pds</a><br>

     

       178
       -
       	    dynamic user list: <a href="https://tangled.org/@vielle.dev/server-config/blob/master/landing/landing.ts">most of the code here</a><br>

     

       179
       -
       	</p>

     

       180
       -
       

     

       181
       -
       	<hr>

     

       182
       -
       

     

       183
       -
       	<h2 id="source">source</h2>

     

       184
       -
       

     

       185
       -
       	<p>

     

       186
       -
       		index page: <a href="https://tangled.org/@katproto.girlonthemoon.xyz/katproto_index">tangled.org/@katproto.girlonthemoon.xyz/katproto_index</a>

     

       187
       -
       	</p>

     

       188
       -
       </div>

     

       189
       -
       

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       190
        
       </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.0" />

     

       6
       +
       

     

       7
       +
           <meta name="title" content="girl on the moon :: atproto" />

     

       8
       +
           <meta name="description" content="girl on the moon PDS" />

     

       9
       +
           <meta name="author" content="girlonthemoon.xyz" />

     

       10
       +
           <meta property="og:title" content="girl on the moon :: atproto" />

     

       11
       +
           <meta property="og:description" content="girl on the moon PDS" />

     

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

     

       13
       +
           <meta property="og:url" content="https://katproto.girlonthemoon.xyz" />

     

       14
       +
           <meta

     

       15
       +
             property="og:image"

     

       16
       +
             content="https://stash.4-walls.net/pics/pochacco.jpg"

     

       17
       +
           />

     

       18
       +
       

     

       19
       +
           <link rel="canonical" href="https://katproto.girlonthemoon.xyz" />

     

       20
       +
           <link

     

       21
       +
             rel="icon"

     

       22
       +
             type="image/png"

     

       23
       +
             sizes="64x64"

     

       24
       +
             href="https://stash.4-walls.net/pics/pochacco_favicon.png"

     

       25
       +
           />

     

       26
       +
       

     

       27
       +
           <script src="https://stash.4-walls.net/katproto_demo/katproto_users.js"></script>

     

       28
       +
       

     

       29
       +
           <title>katproto</title>

     

       30
       +
       

     

       31
       +
           <style>

     

       32
       +
             @import url(https://fonts.bunny.net/css?family=victor-mono:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i);

     

       33
       +
       

     

       34
       +
             :root {

     

       35
       +
               --font: "Victor Mono", monospace;

     

       36
       +
               --main-color: #ff69b4;

     

       37
       +
             }

     

       38
       +
       

     

       39
       +
             body {

     

       40
       +
               font-family: var(--font);

     

       41
       +
               font-size: 0.9rem;

     

       42
       +
               margin: 0 0 0 1rem;

     

       43
       +
             }

     

       44
       +
       

     

       45
       +
             pre {

     

       46
       +
               font-family: var(--font);

     

       47
       +
               margin: 0;

     

       48
       +
               padding: 0;

     

       49
       +
             }

     

       50
       +
       

     

       51
       +
             h1 {

     

       52
       +
               color: var(--main-color);

     

       53
       +
               margin: 1rem 0 0 0;

     

       54
       +
               font-style: italic;

     

       55
       +
             }

     

       56
       +
       

     

       57
       +
             h2 {

     

       58
       +
               color: var(--main-color);

     

       59
       +
               font-style: italic;

     

       60
       +
             }

     

       61
       +
       

     

       62
       +
             p {

     

       63
       +
               max-width: 60ch;

     

       64
       +
             }

     

       65
       +
       

     

       66
       +
             a {

     

       67
       +
               text-underline-offset: 4px;

     

       68
       +
               color: var(--main-color);

     

       69
       +
               text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

     

       70
       +
             }

     

       71
       +
       

     

       72
       +
             dfn,

     

       73
       +
             i {

     

       74
       +
               color: var(--main-color);

     

       75
       +
             }

     

       76
       +
       

     

       77
       +
             a:hover {

     

       78
       +
               text-decoration: none;

     

       79
       +
               text-shadow: none;

     

       80
       +
             }

     

       81
       +
       

     

       82
       +
             hr {

     

       83
       +
               border: 1px dashed var(--main-color);

     

       84
       +
               max-width: 40ch;

     

       85
       +
               margin: 1rem 1rem 1rem 0;

     

       86
       +
               padding: 0;

     

       87
       +
             }

     

       88
       +
           </style>

     

       89
       +
         </head>

     

       90
       +
         <body>

     

       91
       +
           <header>

     

       92
       +
             <div aria-label="ASCII text art of pochacco" role="img">

     

       93
       +
               <pre>

     

       94
       +
       

     

       95
       +
                          ,8,

     

       96
       +
                          d8b

     

       97
       +
                          888

     

       98
       +
           __        ,    888

     

       99
       +
         d88888b.   -.\,- 888

     

       100
       +
            `Y8888b."```"-888

     

       101
       +
                /`"       `8\

     

       102
       +
               |             |

     

       103
       +
               |             |

     

       104
       +
               |             |

     

       105
       +
           __  /  O   _   O  \

     

       106
       +
         /`  '.\     '-'     /

     

       107
       +
         \     .'.         .;

     

       108
       +
          '. .'   `"""""""`  \

     

       109
       +
            `\            /.-.|

     

       110
       +
              `|         |`   |

     

       111
       +
               |          \___/

     

       112
       +
               ;-.._______..-;

     

       113
       +
         jgs  /       |       \

     

       114
       +
              \___,---'---,___/

     

       115
       +
       </pre

     

       116
       +
               >

     

       117
       +
             </div>

     

       118
       +
             <h1 id="katproto">katproto</h1>

     

       119
       +
             <p>

     

       120
       +
               this is an at protocol <dfn>personal data server</dfn> (aka, an atproto

     

       121
       +
               PDS). more specifically, it's

     

       122
       +
               <a href="https://girlonthemoon.xyz/">kat</a>'s PDS!

     

       123
       +
             </p>

     

       124
       +
           </header>

     

       125
       +
       

     

       126
       +
           <hr />

     

       127
       +
       

     

       128
       +
           <main>

     

       129
       +
             <section>

     

       130
       +
               <h2 id="users">users</h2>

     

       131
       +
               <ol id="list-users">

     

       132
       +
                 <!-- this is _not great_ but im lazy and its still a marked improvement

     

       133
       +
       													 looks kinda cool imo, ngl -->

     

       134
       +
                 Loading...

     

       135
       +
               </ol>

     

       136
       +
               <noscript>

     

       137
       +
                 <span class="nosc">

     

       138
       +
                   sorry, to see the dynamic list of users, you must have javascript

     

       139
       +
                   enabled!

     

       140
       +
                 </span>

     

       141
       +
                 <style>

     

       142
       +
                   #list-users {

     

       143
       +
                     display: none;

     

       144
       +
                   }

     

       145
       +
                 </style>

     

       146
       +
               </noscript>

     

       147
       +
               <script>

     

       148
       +
                 async function printUsers() {

     

       149
       +
                   document.getElementById("list-users").innerHTML =

     

       150
       +
                     await getKatprotoUsers();

     

       151
       +
                 }

     

       152
       +
                 printUsers();

     

       153
       +
               </script>

     

       154
       +
             </section>

     

       155
       +
       

     

       156
       +
             <hr />

     

       157
       +
       

     

       158
       +
             <section>

     

       159
       +
               <h2 id="status">status</h2>

     

       160
       +
               <p>Current status: <span id="current-status">Loading...</span></p>

     

       161
       +
               <p>

     

       162
       +
                 off-site status page in case the PDS goes down; in other words, this

     

       163
       +
                 page will remain up even when the PDS is down.

     

       164
       +
               </p>

     

       165
       +
               <p>

     

       166
       +
                 <a href="https://uptime.4-walls.net/status/katproto">status page</a>

     

       167
       +
               </p>

     

       168
       +
             </section>

     

       169
       +
       

     

       170
       +
             <hr />

     

       171
       +
       

     

       172
       +
             <section>

     

       173
       +
               <h2 id="credits">credits</h2>

     

       174
       +
               <p>

     

       175
       +
                 PDS:

     

       176
       +
                 <a href="https://github.com/bluesky-social/pds"

     

       177
       +
                   >github.com/bluesky-social/pds</a

     

       178
       +
                 ><br />

     

       179
       +
                 dynamic user list:

     

       180
       +
                 <a

     

       181
       +
                   href="https://tangled.org/@vielle.dev/server-config/blob/master/landing/landing.ts"

     

       182
       +
                   >most of the code here</a

     

       183
       +
                 ><br />

     

       184
       +
               </p>

     

       185
       +
               <hr />

     

       186
       +
               <h2 id="source">source</h2>

     

       187
       +
               <p>

     

       188
       +
                 index page:

     

       189
       +
                 <a

     

       190
       +
                   href="https://tangled.org/@katproto.girlonthemoon.xyz/katproto_index"

     

       191
       +
                   >tangled.org/@katproto.girlonthemoon.xyz/katproto_index</a

     

       192
       +
                 >

     

       193
       +
               </p>

     

       194
       +
             </section>

     

       195
       +
           </main>

     

       196
       +
         </body>

     

       197
        
       </html>

+2 -3

katproto_users.ts

···

       36
        
               await Promise.all(

     

       37
        
                 users.map(

     

       38
        
                   async (x) =>

     

       39
       -
                     `<span class="user-count"><a href="https://bsky.app/profile/${x.did}">${await x.display}</a></span>`

     

       40
        
                 )

     

       41
        
               )

     

       42
        
           );

     

       43
        
       

     

       44
       -
         const fin = Array.from(users).join("<br>");

     

       45
       -
         return await fin;

     

       46
        
       }

     

       47
        
       

     

       48
        
       async function checkStatus() {

···

       36
        
               await Promise.all(

     

       37
        
                 users.map(

     

       38
        
                   async (x) =>

     

       39
       +
                     `<li><a href="https://bsky.app/profile/${x.did}">${await x.display}</a></li>`

     

       40
        
                 )

     

       41
        
               )

     

       42
        
           );

     

       43
        
       

     

       44
       +
         return users.join("");

     

       0
        
       
     

       45
        
       }

     

       46
        
       

     

       47
        
       async function checkStatus() {