commit 559cbff87b2ec196244d4e4819670d3a78ac972f · veryroundbird.house/pds-dash

+92

src/lib/GuestbookPostComponent.svelte

···

       1
       +
       <script lang="ts">

     

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

     

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

     

       4
       +
         import { onMount } from "svelte";

     

       5
       +
         import moment from "moment";

     

       6
       +
         

     

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

     

       8
       +
         console.log(post);

     

       9
       +
       </script>

     

       10
       +
       

     

       11
       +
       <div class="postContainer">

     

       12
       +
         <div class="postHeader">

     

       13
       +
           {#if post.author.avatar}

     

       14
       +
             <img

     

       15
       +
               class="avatar"

     

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

     

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

     

       18
       +
             />

     

       19
       +
           {/if}

     

       20
       +
           <div class="headerText">

     

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

     

       22
       +
             <p class="handle">

     

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

     

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

     

       25
       +
               >

     

       26
       +
               <a

     

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

     

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

     

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

     

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

     

       31
       +
             </p>

     

       32
       +
           </div>

     

       33
       +
         </div>

     

       34
       +
         <div class="postContent">

     

       35
       +
           {#if post.record.quote}

     

       36
       +
             <a

     

       37
       +
               class="quotingText"

     

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

     

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

     

       40
       +
             >

     

       41
       +
           {/if}

     

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

     

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

     

       44
       +
             <div id="carouselContainer">

     

       45
       +
               <img

     

       46
       +
                 class="embedImages"

     

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

     

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

     

       49
       +
                   .imagesCid[currentImageIndex]}"

     

       50
       +
               />

     

       51
       +
       

     

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

     

       53
       +
                 <div class="carouselControls">

     

       54
       +
                   <button

     

       55
       +
                     id="prevBtn"

     

       56
       +
                     onclick={prevImage}

     

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

     

       58
       +
                   >

     

       59
       +
                   <div class="carouselIndicators">

     

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

     

       61
       +
                       <div

     

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

     

       63
       +
                       ></div>

     

       64
       +
                     {/each}

     

       65
       +
                   </div>

     

       66
       +
                   <button

     

       67
       +
                     class="nextBtn"

     

       68
       +
                     onclick={nextImage}

     

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

     

       70
       +
                     >→</button

     

       71
       +
                   >

     

       72
       +
                 </div>

     

       73
       +
               {/if}

     

       74
       +
             </div>

     

       75
       +
           {/if}

     

       76
       +
           {#if post.record.videosLinkCid}

     

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

     

       78
       +
             <video

     

       79
       +
               class="embedVideo"

     

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

     

       81
       +
               controls

     

       82
       +
             ></video>

     

       83
       +
           {/if}

     

       84
       +
           {#if post.gifLink}

     

       85
       +
             <img

     

       86
       +
               class="embedVideo"

     

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

     

       88
       +
               alt="Post GIF"

     

       89
       +
             />

     

       90
       +
           {/if}

     

       91
       +
         </div>

     

       92
       +
       </div>

themes/birdrights/theme.css

···

       429
        
       	padding: 10px;

     

       430
        
       	gap: 10px;

     

       431
        
       	z-index: 10;

     

       0
        
       
     

       432
        
       }

     

       433
        
       

     

       434
        
       #guestbookContents:popover-open {

···

       429
        
       	padding: 10px;

     

       430
        
       	gap: 10px;

     

       431
        
       	z-index: 10;

     

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

     

       433
        
       }

     

       434
        
       

     

       435
        
       #guestbookContents:popover-open {