comparing d01e878ff7fc94cdea86435c6f2880efc4a6d592 and main on veryroundbird.house/pds-dash

+61

.tangled/workflows/build.yml

···

       1
       1
       +
       when:

     

       2
       2
       +
         - event: ["push", "manual"]

     

       3
       3
       +
           branch: ["main"]

     

       4
       4
       +
       

     

       5
       5
       +
       engine: "nixery"

     

       6
       6
       +
       

     

       7
       7
       +
       dependencies:

     

       8
       8
       +
         nixpkgs:

     

       9
       9
       +
           - deno

     

       10
       10
       +
           - openssh

     

       11
       11
       +
           - su

     

       12
       12
       +
       

     

       13
       13
       +
       steps:

     

       14
       14
       +
         - name: "Pretend we have a real local user"

     

       15
       15
       +
           command: |

     

       16
       16
       +
             echo "🪶 pretend root is a real user"

     

       17
       17
       +
             echo "root:x:0:0:System administrator:/root:/run/current-system/sw/bin/bash" >> /etc/passwd

     

       18
       18
       +
           

     

       19
       19
       +
         - name: "Copy config to server"

     

       20
       20
       +
           command: |

     

       21
       21
       +
             echo "🪶 copying config from secrets"

     

       22
       22
       +
             echo "${CONFIG}" > config.ts

     

       23
       23
       +
            

     

       24
       24
       +
         - name: "Set up Deno"

     

       25
       25
       +
           command: |

     

       26
       26
       +
             echo "🪶 installing deno packages"

     

       27
       27
       +
             deno install

     

       28
       28
       +
           

     

       29
       29
       +
         - name: "Build static files"

     

       30
       30
       +
           command: |

     

       31
       31
       +
             echo "🪶 building static files"

     

       32
       32
       +
             deno run build

     

       33
       33
       +
         

     

       34
       34
       +
         - name: "SSH setup"

     

       35
       35
       +
           command: |

     

       36
       36
       +
             echo "🪶 setting up ssh connection"

     

       37
       37
       +
             mkdir ~/.ssh

     

       38
       38
       +
             echo "${SSH_KEY}" > ~/.ssh/id_tangledsh

     

       39
       39
       +
             chmod 600 ~/.ssh/id_tangledsh

     

       40
       40
       +
             cat > /etc/ssh/ssh_config << EOF

     

       41
       41
       +
             Host deploy

     

       42
       42
       +
               HostName ${SERVER_HOST}

     

       43
       43
       +
               User ${SERVER_USER}

     

       44
       44
       +
               IdentityFile ~/.ssh/id_tangledsh

     

       45
       45
       +
               StrictHostKeyChecking no

     

       46
       46
       +
               UserKnownHostsFile /dev/null

     

       47
       47
       +
               BatchMode yes

     

       48
       48
       +
               PasswordAuthentication no

     

       49
       49
       +
               PubkeyAuthentication yes

     

       50
       50
       +
             EOF

     

       51
       51
       +
             chmod 600 /etc/ssh/ssh_config

     

       52
       52
       +
             ssh-keyscan -H $SERVER_HOST >> ~/.ssh/known_hosts

     

       53
       53
       +
         

     

       54
       54
       +
         - name: "Deploy via SCP"

     

       55
       55
       +
           command: |

     

       56
       56
       +
             echo "🪶 deploying files via scp"

     

       57
       57
       +
             scp -r ./dist/* deploy:/pds/caddy/etc/caddy/static

     

       58
       58
       +
         

     

       59
       59
       +
         - name: "Done!"

     

       60
       60
       +
           command: |

     

       61
       61
       +
             echo "🪶 all done!

-32

.tangled/workflows/pipeline.yml

···

       1
       1
       -
       when:

     

       2
       2
       -
       	- event: ["push", "manual"]

     

       3
       3
       -
       		branch: ["main"]

     

       4
       4
       -
       engine: "nixery"

     

       5
       5
       -
       dependencies:

     

       6
       6
       -
       	nixpkgs:

     

       7
       7
       -
       		- deno

     

       8
       8
       -
       steps:

     

       9
       9
       -
       	- name: "Build static files"

     

       10
       10
       -
       		command: "deno run build"

     

       11
       11
       -
       	- name: "SSH setup"

     

       12
       12
       -
       		command: |

     

       13
       13
       -
       			mkdir ~/.ssh

     

       14
       14
       -
       			echo "${{secrets.SSH_KEY}}" > ~/.ssh/id_tangledsh

     

       15
       15
       -
       			chmod 600 ~/.ssh/id_tangledsh

     

       16
       16
       -
       			cat > ~/.ssh/config << EOF

     

       17
       17
       -
       			Host deploy

     

       18
       18
       -
       				HostName ${{ secrets.SERVER_HOST }}

     

       19
       19
       -
       				User ${{ secrets.SERVER_USER }}

     

       20
       20
       -
       				IdentityFile ~/.ssh/id_tangledsh

     

       21
       21
       -
       				StrictHostKeyChecking accept-new

     

       22
       22
       -
       				BatchMode yes

     

       23
       23
       -
       				PasswordAuthentication no

     

       24
       24
       -
       				PubkeyAuthentication yes

     

       25
       25
       -
       			EOF

     

       26
       26
       -
       			chmod 600 ~/.ssh/config

     

       27
       27
       -
       			ssh-keyscan -H ${{ secrets.SERVER_HOST }} >> ~/.ssh/known_hosts

     

       28
       28
       -
       			echo "🪶 deploying to shimaenaga pds"

     

       29
       29
       -
       	- name: "Deploy via SCP"

     

       30
       30
       -
       		run: scp -r ./dist/* deploy:/pds/caddy/webroot

     

       31
       31
       -
       	- name: "Done!"

     

       32
       32
       -
       		command: "echo \"🪶 all done!\""

+5 -2

README.md

···

       8
       8
        
       * Added some stuff in the backend code to also pull the user's description and banner to make the account cards fancier

     

       9
       9
        
       * Changed font to Recursive Variable (waffling on changing this to space mono though and maybe using recursive just for the profile cards)

     

       10
       10
        
       * Replaced favicon

     

       11
       11
       -
       * Add guestbook functionality (see new config options)

     

       12
       12
       -
       * Wrote deploy pipeline for tangled.sh

     

       11
       11
       +
       * Ported in guestbook functionality from another PDS frontpage (see new config options)

     

       12
       12
       +
       * Secret unique easter egg :)

     

       13
       13
       +
       * Wrote deploy pipeline for tangled.sh (WORK IN PROGRESS help try #5 - changing ssh perms?)

     

       14
       14
       +
       

     

       15
       15
       +
       you can see it running at [my pds!](https://shimaenaga.veryroundbird.house)

     

       13
       16
        
       

     

       14
       17
        
       # original readme below this line

     

       15
       18

public/fonts/spacemono-bold-webfont.woff2

This is a binary file and will not be displayed.

public/fonts/spacemono-bolditalic-webfont.woff2

This is a binary file and will not be displayed.

public/fonts/spacemono-italic-webfont.woff2

This is a binary file and will not be displayed.

public/fonts/spacemono-regular-webfont.woff2

This is a binary file and will not be displayed.

+89 -17

src/App.svelte

···

       1
       1
        
       <script lang="ts">

     

       2
       2
        
         import PostComponent from "./lib/PostComponent.svelte";

     

       3
       3
       +
         import GuestbookPostComponent from "./lib/GuestbookPostComponent.svelte";

     

       3
       4
        
         import AccountComponent from "./lib/AccountComponent.svelte";

     

       4
       5
        
         import InfiniteLoading from "svelte-infinite-loading";

     

       5
       5
       -
         import { getNextPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";

     

       6
       6
       +
         import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";

     

       6
       7
        
         import { Config } from "../config";

     

       7
       8
        
         const accountsPromise = getAllMetadataFromPds();

     

       8
       9
        
         import { onMount } from "svelte";

     

       9
       10
        
       

     

       10
       11
        
         let posts: Post[] = [];

     

       12
       12
       +
       	let guestbookPosts: Post[] = [];

     

       11
       13
        
       

     

       12
       12
       -
         let hue: number = 1;

     

       13
       13
       -
         const cycleColors = async () => {

     

       14
       14
       -
           while (true) {  

     

       15
       15
       -
             hue += 1;

     

       16
       16
       -
             if (hue > 360) {

     

       17
       17
       -
               hue = 0;

     

       18
       18
       -
             }

     

       19
       19
       -
             document.documentElement.style.setProperty("--primary-h", hue.toString());

     

       20
       20
       -
             await new Promise((resolve) => setTimeout(resolve, 10));

     

       21
       21
       -
           }

     

       22
       22
       -
         }

     

       23
       14
        
         let clickCounter = 0;

     

       24
       24
       -
         const carameldansenfusion = async () => {

     

       15
       15
       +
         const birdbrain = async () => {

     

       25
       16
        
           clickCounter++;

     

       26
       17
        
           if (clickCounter >= 10) {

     

       27
       18
        
             clickCounter = 0;

     

       28
       28
       -
             cycleColors();

     

       19
       19
       +
       			document.getElementById('birdbrain').showPopover();

     

       29
       20
        
           }

     

       30
       21
        
         };

     

       31
       22
        
       

     
···

       34
       25
        
           getNextPosts().then((initialPosts) => {

     

       35
       26
        
             posts = initialPosts;

     

       36
       27
        
           });

     

       28
       28
       +
       		fetchGuestbookPosts().then((gbPosts) => {

     

       29
       29
       +
       			console.log(gbPosts);

     

       30
       30
       +
       			guestbookPosts = gbPosts;

     

       31
       31
       +
       		});

     

       37
       32
        
         });

     

       38
       33
        
         // Infinite loading function

     

       39
       34
        
         const onInfinite = ({

     
···

       56
       51
        
       <main>

     

       57
       52
        
         <div id="content">

     

       58
       53
        
           {#await accountsPromise}

     

       59
       59
       -
             <p>Loading...</p>

     

       54
       54
       +
       			<div id="loadingbirds">

     

       55
       55
       +
       			<div class="small">

     

       56
       56
       +
       <pre>

     

       57
       57
       +
                                     █▓░░░░░░░░░▒        

     

       58
       58
       +
                                   █▓▒           ░▒      

     

       59
       59
       +
                                ▓▒▒▒░              ▒     

     

       60
       60
       +
                              ▓▒░░░░                ░▓   

     

       61
       61
       +
                            █▒  ░░     ░   ░   ▓▒    ░█  

     

       62
       62
       +
                          ▓░    ░░     ▒▓░░▒▒░        ▒  

     

       63
       63
       +
       ███████      ██▓▒░▒▒░   ░░░░       ░░░          ▒ 

     

       64
       64
       +
       █▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░                     ▓

     

       65
       65
       +
               ███▓▒░░▒░░░░▓▓█▓▓▒░                      ░

     

       66
       66
       +
                       ▓                                ░

     

       67
       67
       +
                       █              ░                 ▒

     

       68
       68
       +
                       █░                              ▒█

     

       69
       69
       +
                        ▒                             ▒  

     

       70
       70
       +
                        █▒                           █   

     

       71
       71
       +
                          ▓                        ░█    

     

       72
       72
       +
                           ▓▒    ░░              ░▒      

     

       73
       73
       +
                             ▓▒▒░░▒▓░  ░░░▒▒▓▓▒▓▓        

     

       74
       74
       +
                                 █▓█▓▓█    ███▓█         

     

       75
       75
       +
                                  ████      ████         

     

       76
       76
       +
       </pre>

     

       77
       77
       +
       			</div>

     

       78
       78
       +
       			<div class="large">

     

       79
       79
       +
       <pre>

     

       80
       80
       +
                                                                        ████▓▒░░░░░░░▒▓██                   

     

       81
       81
       +
                                                                     █▓░                 ▒█                

     

       82
       82
       +
                                                                  ██▓░                     ▒█              

     

       83
       83
       +
                                                                ██▒                          ▒█            

     

       84
       84
       +
                                                            ███▓▒░                             ▓█          

     

       85
       85
       +
                                                          █▓░   ░                               █          

     

       86
       86
       +
                                                       ██░     ░                                 ░█        

     

       87
       87
       +
                                                      █░                                           ▓       

     

       88
       88
       +
                                                    █▒                                              ▓      

     

       89
       89
       +
                                                 ██▒                                   ▒▓▓           █     

     

       90
       90
       +
                                               █▒                       ▓█     ░▒       ▒▓           ▓█    

     

       91
       91
       +
                                            ██▒                         ▒▓░   ░▒░░                    ▓█   

     

       92
       92
       +
                                        ███▒░                                ░▒▒▒▒▒░                   ▓█  

     

       93
       93
       +
        █████                       ██▓░    ░░░░                                                        █  

     

       94
       94
       +
       █▓▒░░░░░░▒▒▒▓▓██████████▓▓▒░   ░▒▒▒▒▒▒▓▒▒░         ░▒▒░                                          ░█ 

     

       95
       95
       +
          ██████▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒▒▓▒▒▓▓▓▓▒▒▒▒▒▒▓▒░░░▒▒▒░                                           ▒█

     

       96
       96
       +
                     ███▓▓▒▒░░░░       ░░░▒▓▓▓▒▒▓▓▓▓▓▒░░▒▒▒▒░                                             █

     

       97
       97
       +
                                ███▓▓▒         ▒▓▓▓▓▓▓▓█▓▒░░                                              █

     

       98
       98
       +
                                      █▓           ░▒▒▓▒░                                                 ▓

     

       99
       99
       +
                                       █▓                                                                 ▓

     

       100
       100
       +
                                        █                                                                 █

     

       101
       101
       +
                                        █                                                                ░█

     

       102
       102
       +
                                        █                                                                ▓█

     

       103
       103
       +
                                        █░                                                              ▒█ 

     

       104
       104
       +
                                         ▒                                                             ▓█  

     

       105
       105
       +
                                         ▓                                                            █    

     

       106
       106
       +
                                         █▒                                                         ▒█     

     

       107
       107
       +
                                          █▒                                                       ▒█      

     

       108
       108
       +
                                           █▓                                                     ▒█       

     

       109
       109
       +
                                            ██                                                   ██        

     

       110
       110
       +
                                              █▒                                               ▓█          

     

       111
       111
       +
                                               ██░                                           ▒█            

     

       112
       112
       +
                                                  █░                                      ░▓█              

     

       113
       113
       +
                                                    █▓░       ▓▓▓░               ░▓▓▒  ░██                 

     

       114
       114
       +
                                                       ███▓▒░ ▒▓▓▓    ▒▓▓▓▓▓▓▓████▓▓▓▓▒█                   

     

       115
       115
       +
                                                            █▓██▓▓▓▓██          ████▓▓▓██                  

     

       116
       116
       +
                                                               ██▓▓██              ██▓▓██                  

     

       117
       117
       +
                                                              ███▓██               █▓▓▓██                  

     

       118
       118
       +
                                                            ██████              ███████                                        

     

       119
       119
       +
       </pre>

     

       120
       120
       +
       			</div>

     

       121
       121
       +
       			<p id="loadingText" data-text="pds is landing..." title="pds is landing...">pds is landing...</p>

     

       122
       122
       +
             </div>

     

       60
       123
        
           {:then accountsData}

     

       61
       124
        
             <div id="account">

     

       62
       125
        
       				<pre id="asciiart">

     
···

       80
       143
        
                                 █▓█▓▓█    ███▓█         

     

       81
       144
        
                                  ████      ████         

     

       82
       145
        
       				</pre>

     

       83
       83
       -
               <h1 onclick={carameldansenfusion} id="header">shimaenaga pds</h1>

     

       146
       146
       +
               <h1 onclick={birdbrain} id="header">shimaenaga pds</h1>

     

       84
       147
        
       				<p id="subtitle">a project of <a href="https://veryroundbird.house" target="_blank">veryroundbird.house</a></p>

     

       85
       148
        
       				{#if Config.SHOW_GUESTBOOK}

     

       86
       149
        
       					<div id="guestbook">

     
···

       88
       151
        
       						<div id="guestbookContents" popover>

     

       89
       152
        
       							<div id="signInfo">You can sign the guestbook <a href="{Config.GUESTBOOK_POST}" target="_blank">here</a>!</div>

     

       90
       153
        
       							<div id="guestbookPosts">

     

       91
       91
       -
       							

     

       154
       154
       +
       								{#if guestbookPosts.length > 0}

     

       155
       155
       +
       									{#each guestbookPosts as postObject}

     

       156
       156
       +
                           <GuestbookPostComponent post={postObject.post} />

     

       157
       157
       +
       									{/each}

     

       158
       158
       +
       								{:else}

     

       159
       159
       +
       									<p class="noGuestbookPosts">No guestbook posts yet!</p>

     

       160
       160
       +
       								{/if}

     

       92
       161
        
       							</div>

     

       93
       162
        
       						</div>

     

       94
       163
        
       					</div>

     
···

       112
       181
        
             <InfiniteLoading on:infinite={onInfinite} distance={3000} />

     

       113
       182
        
           </div>

     

       114
       183
        
         </div>

     

       184
       184
       +
       	<div id="birdbrain" popover>

     

       185
       185
       +
       		<iframe width="560" height="315" src="https://www.youtube.com/embed/0iVlSNpq8i8?si=Ao4bcr_4HIBqsBy2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

     

       186
       186
       +
       	</div>

     

       115
       187
        
       </main>

+2 -3

src/lib/AccountComponent.svelte

···

       1
       1
        
       <script lang="ts">

     

       2
       2
        
         import type { AccountMetadata } from "./pdsfetch";

     

       3
       3
        
         const { account }: { account: AccountMetadata } = $props();

     

       4
       4
       -
       	console.log(account);

     

       5
       4
        
         import { Config } from "../../config";

     

       6
       5
        
       </script>

     

       7
       6
        
       

     

       8
       8
       -
       <button class="accountBtn" type="button" popovertarget="{account.handle.replace('.')}" title="{account.handle}">

     

       7
       7
       +
       <button class="accountBtn" type="button" popovertarget="{account.handle.replace('.', '')}" title="{account.handle}">

     

       9
       8
        
         <div class="accountContainer">

     

       10
       9
        
           {#if account.avatarCid}

     

       11
       10
        
             <img

     
···

       25
       24
        
       	    />

     

       26
       25
        
           {/if}

     

       27
       26
        
         </div>

     

       28
       28
       -
       	<div class="accountTooltip" popover id="{account.handle.replace('.')}">

     

       27
       27
       +
       	<div class="accountTooltip" popover id="{account.handle.replace('.', '')}">

     

       29
       28
        
       		<div class="banner">

     

       30
       29
        
       			<img class="bannerImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.bannerCid}" alt="{account.displayName}'s banner" width="300" height="100" />

     

       31
       30
        
       			<img class="avatarInsetImg" src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}" alt="{account.displayName}'s avatar" width="50" height="50" />

+92

src/lib/GuestbookPostComponent.svelte

···

       1
       1
       +
       <script lang="ts">

     

       2
       2
       +
         import { Post } from "./pdsfetch";

     

       3
       3
       +
         import { Config } from "../../config";

     

       4
       4
       +
         import { onMount } from "svelte";

     

       5
       5
       +
         import moment from "moment";

     

       6
       6
       +
         

     

       7
       7
       +
         let { post }: { post: Post } = $props();

     

       8
       8
       +
         console.log(post);

     

       9
       9
       +
       </script>

     

       10
       10
       +
       

     

       11
       11
       +
       <div class="postContainer">

     

       12
       12
       +
         <div class="postHeader">

     

       13
       13
       +
           {#if post.author.avatar}

     

       14
       14
       +
             <img

     

       15
       15
       +
               class="avatar"

     

       16
       16
       +
               src="{post.author.avatar}"

     

       17
       17
       +
               alt="avatar of {post.author.displayName}"

     

       18
       18
       +
             />

     

       19
       19
       +
           {/if}

     

       20
       20
       +
           <div class="headerText">

     

       21
       21
       +
             <a class="displayName" href="{Config.FRONTEND_URL}/profile/{post.author.did}">{post.author.displayName}</a>

     

       22
       22
       +
             <p class="handle">

     

       23
       23
       +
               <a href="{Config.FRONTEND_URL}/profile/{post.author.handle}"

     

       24
       24
       +
                 >@{post.author.handle}</a

     

       25
       25
       +
               >

     

       26
       26
       +
               <a

     

       27
       27
       +
                 class="postLink" href="{Config.FRONTEND_URL}/profile/{post.author.did}/post/{post.record.id}"

     

       28
       28
       +
                 >{moment(post.record.createdAt).isBefore(moment().subtract(1, "month"))

     

       29
       29
       +
                   ? moment(post.record.createdAt).format("MMM D, YYYY")

     

       30
       30
       +
                   : moment(post.record.createdAt).fromNow()}</a>

     

       31
       31
       +
             </p>

     

       32
       32
       +
           </div>

     

       33
       33
       +
         </div>

     

       34
       34
       +
         <div class="postContent">

     

       35
       35
       +
           {#if post.record.quote}

     

       36
       36
       +
             <a

     

       37
       37
       +
               class="quotingText"

     

       38
       38
       +
               href="{Config.FRONTEND_URL}/profile/{post.record.quote.uri}/post/{post

     

       39
       39
       +
                 .quotingUri.rkey}">quoting {post.quotingUri.repo}</a

     

       40
       40
       +
             >

     

       41
       41
       +
           {/if}

     

       42
       42
       +
           <div class="postText">{post.record.text}</div>

     

       43
       43
       +
           {#if post.record.imagesCid && post.record.imagesCid.length > 0}

     

       44
       44
       +
             <div id="carouselContainer">

     

       45
       45
       +
               <img

     

       46
       46
       +
                 class="embedImages"

     

       47
       47
       +
                 alt="Post Image {currentImageIndex + 1} of {post.record.imagesCid.length}"

     

       48
       48
       +
                 src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.record.author.did}&cid={post.record

     

       49
       49
       +
                   .imagesCid[currentImageIndex]}"

     

       50
       50
       +
               />

     

       51
       51
       +
       

     

       52
       52
       +
               {#if post.imagesCid.length > 1}

     

       53
       53
       +
                 <div class="carouselControls">

     

       54
       54
       +
                   <button

     

       55
       55
       +
                     id="prevBtn"

     

       56
       56
       +
                     onclick={prevImage}

     

       57
       57
       +
                     disabled={currentImageIndex === 0}>←</button

     

       58
       58
       +
                   >

     

       59
       59
       +
                   <div class="carouselIndicators">

     

       60
       60
       +
                     {#each post.record.imagesCid as _, i}

     

       61
       61
       +
                       <div

     

       62
       62
       +
                         class="indicator {i === currentImageIndex ? 'active' : ''}"

     

       63
       63
       +
                       ></div>

     

       64
       64
       +
                     {/each}

     

       65
       65
       +
                   </div>

     

       66
       66
       +
                   <button

     

       67
       67
       +
                     class="nextBtn"

     

       68
       68
       +
                     onclick={nextImage}

     

       69
       69
       +
                     disabled={currentImageIndex === post.imagesCid.length - 1}

     

       70
       70
       +
                     >→</button

     

       71
       71
       +
                   >

     

       72
       72
       +
                 </div>

     

       73
       73
       +
               {/if}

     

       74
       74
       +
             </div>

     

       75
       75
       +
           {/if}

     

       76
       76
       +
           {#if post.record.videosLinkCid}

     

       77
       77
       +
             <!-- svelte-ignore a11y_media_has_caption -->

     

       78
       78
       +
             <video

     

       79
       79
       +
               class="embedVideo"

     

       80
       80
       +
               src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={post.authorDid}&cid={post.videosLinkCid}"

     

       81
       81
       +
               controls

     

       82
       82
       +
             ></video>

     

       83
       83
       +
           {/if}

     

       84
       84
       +
           {#if post.gifLink}

     

       85
       85
       +
             <img

     

       86
       86
       +
               class="embedVideo"

     

       87
       87
       +
               src="{post.record.gifLink}"

     

       88
       88
       +
               alt="Post GIF"

     

       89
       89
       +
             />

     

       90
       90
       +
           {/if}

     

       91
       91
       +
         </div>

     

       92
       92
       +
       </div>

+51 -1

src/lib/pdsfetch.ts

···

       359
       359
        
         }

     

       360
       360
        
       };

     

       361
       361
        
       

     

       362
       362
       -
       export { getAllMetadataFromPds, getNextPosts, Post };

     

       362
       362
       +
       const convertUri = (uri: string) => {

     

       363
       363
       +
         if (uri.startsWith("at://")) {

     

       364
       364
       +
           return uri;

     

       365
       365
       +
         }

     

       366
       366
       +
       

     

       367
       367
       +
         if (uri.includes("bsky.app/profile/")) {

     

       368
       368
       +
           const match = uri.match(/profile\/([\w.]+)\/post\/([\w]+)/);

     

       369
       369
       +
           if (match) {

     

       370
       370
       +
             const [, did, postId] = match;

     

       371
       371
       +
       			try {

     

       372
       372
       +
             	return `at://${did}/app.bsky.feed.post/${postId}`;

     

       373
       373
       +
       			} catch (e) {

     

       374
       374
       +
       				console.error("Invalid Bluesky post URL format", e);

     

       375
       375
       +
       				return null;

     

       376
       376
       +
       			}

     

       377
       377
       +
           }

     

       378
       378
       +
         }

     

       379
       379
       +
       }

     

       380
       380
       +
       

     

       381
       381
       +
       const fetchGuestbookPosts = async () => {

     

       382
       382
       +
         const params = new URLSearchParams({ uri: convertUri(Config.GUESTBOOK_POST) });

     

       383
       383
       +
         const url = `https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?${params.toString()}`;

     

       384
       384
       +
       

     

       385
       385
       +
         try {

     

       386
       386
       +
           const response = await fetch(url, {

     

       387
       387
       +
             method: "GET",

     

       388
       388
       +
             headers: {

     

       389
       389
       +
               Accept: "application/json",

     

       390
       390
       +
             },

     

       391
       391
       +
             cache: "no-store",

     

       392
       392
       +
           });

     

       393
       393
       +
       

     

       394
       394
       +
           if (!response.ok) {

     

       395
       395
       +
             const errorText = await response.text();

     

       396
       396
       +
             console.error("Fetch Error: ", errorText);

     

       397
       397
       +
             throw new Error(`Failed to fetch thread: ${response.statusText}`);

     

       398
       398
       +
           }

     

       399
       399
       +
       

     

       400
       400
       +
           const data = await response.json();

     

       401
       401
       +
       

     

       402
       402
       +
           if (!data.thread || !data.thread.replies) {

     

       403
       403
       +
             throw new Error("Invalid thread data: Missing expected properties.");

     

       404
       404
       +
           }

     

       405
       405
       +
       

     

       406
       406
       +
           return data.thread.replies;

     

       407
       407
       +
       	} catch (e) {

     

       408
       408
       +
       		console.error("Is this the wrong kind of Bluesky object?", e);

     

       409
       409
       +
       	}

     

       410
       410
       +
       }

     

       411
       411
       +
       

     

       412
       412
       +
       export { getAllMetadataFromPds, getNextPosts, Post, fetchGuestbookPosts };

     

       363
       413
        
       export type { AccountMetadata };

+88 -9

themes/birdrights/theme.css

···

       1
       1
        
       @font-face {

     

       2
       2
        
         font-family: "Recursive Variable";

     

       3
       3
        
       	font-weight: 100 700;

     

       4
       4
       -
       	font-style: -5deg 5deg;

     

       5
       4
        
         src: url(/fonts/Recursive_VF_1.085.woff2) format('woff2');

     

       6
       5
        
       }

     

       7
       6
        
       

     

       7
       7
       +
       @font-face {

     

       8
       8
       +
       	font-family: "Space Mono";

     

       9
       9
       +
       	font-weight: normal;

     

       10
       10
       +
       	font-style: normal;

     

       11
       11
       +
       	src: url(/fonts/spacemono-regular-webfont.woff2) format('woff2');

     

       12
       12
       +
       }

     

       13
       13
       +
       

     

       14
       14
       +
       @font-face {

     

       15
       15
       +
       	font-family: "Space Mono";

     

       16
       16
       +
       	font-weight: bold;

     

       17
       17
       +
       	font-style: normal;

     

       18
       18
       +
       	src: url(/fonts/spacemono-bold-webfont.woff2) format('woff2');

     

       19
       19
       +
       }

     

       20
       20
       +
       

     

       21
       21
       +
       @font-face {

     

       22
       22
       +
       	font-family: "Space Mono";

     

       23
       23
       +
       	font-weight: normal;

     

       24
       24
       +
       	font-style: italic;

     

       25
       25
       +
       	src: url(/fonts/spacemono-italic-webfont.woff2) format('woff2');

     

       26
       26
       +
       }

     

       27
       27
       +
       

     

       28
       28
       +
       @font-face {

     

       29
       29
       +
       	font-family: "Space Mono";

     

       30
       30
       +
       	font-weight: bold;

     

       31
       31
       +
       	font-style: italic;

     

       32
       32
       +
       	src: url(/fonts/spacemono-bolditalic-webfont.woff2) format('woff2');

     

       33
       33
       +
       }

     

       34
       34
       +
       

     

       8
       35
        
       :root {

     

       9
       36
        
         /* Color overrides, edit to whatever you want */

     

       10
       37
        
         --primary-h: 260; /* Hue */

     
···

       34
       61
        
         min-width: 320px;

     

       35
       62
        
         min-height: 100vh;

     

       36
       63
        
         background-color: var(--background-color);

     

       37
       37
       -
         font-family: "Recursive Variable";

     

       64
       64
       +
         font-family: "Recursive Variable", monospace;

     

       38
       65
        
         font-size: var(--base-font-size);

     

       39
       66
        
         color: var(--text-color);

     

       40
       67
        
         border-color: var(--border-color);

     
···

       55
       82
        
       }

     

       56
       83
        
       

     

       57
       84
        
       h1 {

     

       85
       85
       +
       	font-family: "Space Mono", monospace;

     

       58
       86
        
         font-size: 2em;

     

       59
       87
        
         line-height: 1.1;

     

       60
       88
        
       	margin-bottom: 0;

     
···

       300
       328
        
       	background-color: transparent;

     

       301
       329
        
       	padding: 0;

     

       302
       330
        
       	position: relative;

     

       331
       331
       +
       	cursor: pointer;

     

       303
       332
        
       }

     

       304
       333
        
       

     

       305
       334
        
       .accountContainer {

     
···

       326
       355
        
         white-space: nowrap;

     

       327
       356
        
       }

     

       328
       357
        
       

     

       329
       329
       -
       .accountTooltip {

     

       358
       358
       +
       .accountTooltip[popover] {

     

       330
       359
        
       	border: 1px var(--border-color) solid;

     

       331
       360
        
       	color: var(--text-color);

     

       332
       361
        
       	background-color: var(--content-background-color);

     
···

       396
       425
        
       #guestbookContents {

     

       397
       426
        
       	width: 100%;

     

       398
       427
        
       	max-width: 600px;

     

       399
       399
       -
       	border: 1px var(--border-color) solid;

     

       400
       400
       -
       	color: var(--text-color);

     

       401
       401
       -
       	background-color: var(--content-background-color);

     

       402
       402
       -
       	backdrop-filter: blur(5px);

     

       403
       428
        
       	height: calc(100vh - 20px);

     

       404
       429
        
       	padding: 10px;

     

       405
       405
       -
       	border-radius: 5px;

     

       406
       430
        
       	gap: 10px;

     

       407
       431
        
       	z-index: 10;

     

       432
       432
       +
         grid-template-rows: auto 1fr;

     

       408
       433
        
       }

     

       409
       434
        
       

     

       410
       435
        
       #guestbookContents:popover-open {

     
···

       418
       443
        
       /* Source Link */

     

       419
       444
        
       

     

       420
       445
        
       #footer {

     

       421
       421
       -
       	position: absolute;

     

       446
       446
       +
       	position: fixed;

     

       422
       447
        
       	bottom: 5px;

     

       423
       448
        
       	right: 5px;

     

       424
       449
        
       	z-index: 99;

     
···

       435
       460
        
       	opacity: 1;

     

       436
       461
        
       }

     

       437
       462
        
       

     

       463
       463
       +
       #loadingbirds {

     

       464
       464
       +
       	line-height: 1;

     

       465
       465
       +
       	text-align: center;

     

       466
       466
       +
       	width: 100%;

     

       467
       467
       +
       }

     

       468
       468
       +
       

     

       469
       469
       +
       #loadingbirds pre {

     

       470
       470
       +
       	display: inline-block;

     

       471
       471
       +
       	margin: 0 auto;

     

       472
       472
       +
       	text-align: left;

     

       473
       473
       +
       }

     

       474
       474
       +
       

     

       475
       475
       +
       #loadingbirds .small {

     

       476
       476
       +
       	display: none;

     

       477
       477
       +
       }

     

       478
       478
       +
       

     

       479
       479
       +
       #loadingbirds #loadingText {

     

       480
       480
       +
       	font-family: "Space Mono", monospace;

     

       481
       481
       +
       	text-align: center;

     

       482
       482
       +
       	font-style: oblique 5deg;

     

       483
       483
       +
       	font-size: 2em;

     

       484
       484
       +
       	min-height: 1em;

     

       485
       485
       +
       }

     

       486
       486
       +
       

     

       487
       487
       +
       @media screen and (max-width: 780px) {

     

       488
       488
       +
       	#loadingbirds .small {

     

       489
       489
       +
       		display: block;

     

       490
       490
       +
       	}

     

       491
       491
       +
       	

     

       492
       492
       +
       	#loadingbirds .large {

     

       493
       493
       +
       		display: none;

     

       494
       494
       +
       	}

     

       495
       495
       +
       	

     

       496
       496
       +
       	#loadingbirds #loadingText {

     

       497
       497
       +
       		font-size: 1.25em;

     

       498
       498
       +
       	}

     

       499
       499
       +
       }

     

       500
       500
       +
       

     

       438
       501
        
       /* Responsive Styling */

     

       439
       502
        
       @media screen and (max-width: 600px) {

     

       440
       503
        
       	#accountsList {

     

       441
       504
        
       		grid-template-columns: repeat(6, 1fr);

     

       442
       505
        
       	}

     

       506
       506
       +
       }

     

       507
       507
       +
       

     

       508
       508
       +
       /* Popovers */

     

       509
       509
       +
       [popover] {

     

       510
       510
       +
       	padding: 0;

     

       511
       511
       +
       	max-width: 600px;

     

       512
       512
       +
       	border: 1px var(--border-color) solid;

     

       513
       513
       +
       	color: var(--text-color);

     

       514
       514
       +
       	background-color: var(--content-background-color);

     

       515
       515
       +
       	backdrop-filter: blur(5px);

     

       516
       516
       +
       	border-radius: 5px;

     

       517
       517
       +
       	z-index: 10;

     

       518
       518
       +
       }

     

       519
       519
       +
       

     

       520
       520
       +
       [popover] iframe {

     

       521
       521
       +
       	display: block;

     

       443
       522
        
       }

     

       444
       523
        
       

     

       445
       524
        
       /* Scrollbars */

Compare changes