commit 01f1da39d8e3235b4bbc9eb4bbc2d3b5ba7660ed · dunkirk.sh/zera

+20

sass/css/mods.css

···

       259
       259
        
           color: var(--accent-text);

     

       260
       260
        
           display: inline-block;

     

       261
       261
        
           text-align: center;

     

       262
       262
       +
           transition:

     

       263
       263
       +
               transform 0.3s ease,

     

       264
       264
       +
               opacity 0.3s ease;

     

       265
       265
       +
       }

     

       266
       266
       +
       

     

       267
       267
       +
       @keyframes bubbleIn {

     

       268
       268
       +
           0% {

     

       269
       269
       +
               opacity: 0;

     

       270
       270
       +
               transform: translateY(10px) scale(0.95);

     

       271
       271
       +
           }

     

       272
       272
       +
           100% {

     

       273
       273
       +
               opacity: 1;

     

       274
       274
       +
               transform: translateY(0) scale(1);

     

       275
       275
       +
           }

     

       276
       276
       +
       }

     

       277
       277
       +
       

     

       278
       278
       +
       @media (prefers-reduced-motion: no-preference) {

     

       279
       279
       +
           .bubble.animate-in {

     

       280
       280
       +
               animation: bubbleIn 0.3s ease-out forwards;

     

       281
       281
       +
           }

     

       262
       282
        
       }

     

       263
       283
        
       

     

       264
       284
        
       .bubble a {

+61 -14

templates/shortcodes/is.md

···

       1
       1
       -
       <div class="bubble">

     

       2
       2
       -
         <span><a href="https://bsky.app/@doing.dunkirk.sh" id="verb-link">Kieran is</a> <i id="status-text">"doing smthing interesting"</i> - <span id="time-ago"></span></span>

     

       1
       1
       +
       <div class="bubble" style="visibility: hidden; opacity: 0;">

     

       2
       2
       +
         <span><a href="https://bsky.app/@doing.dunkirk.sh" id="verb-link">Kieran is</a> <i id="status-text"></i> - <span id="time-ago"></span></span>

     

       3
       3
        
       </div>

     

       4
       4
        
       

     

       5
       5
        
       <script>

     

       6
       6
        
         document.addEventListener("DOMContentLoaded", () => {

     

       7
       7
       +
           // Initialize RelativeTimeFormat with user's locale

     

       8
       8
       +
           const rtf = new Intl.RelativeTimeFormat(navigator.language, {

     

       9
       9
       +
             numeric: "auto",

     

       10
       10
       +
             style: "long"

     

       11
       11
       +
           });

     

       12
       12
       +
           

     

       7
       13
        
           fetch(

     

       8
       14
        
             "https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=dunkirk.sh&collection=a.status.update",

     

       9
       15
        
           )

     
···

       15
       21
        
             })

     

       16
       22
        
             .then((statusData) => {

     

       17
       23
        
               if (statusData.records && statusData.records.length > 0) {

     

       18
       18
       -
                 const latestStatus = `"${statusData.records[0].value.text}"`;

     

       19
       19
       -
                 document.getElementById("status-text").textContent = latestStatus;

     

       20
       20
       -
       

     

       21
       21
       -
                 // Calculate and display time ago

     

       24
       24
       +
                 // Calculate time difference

     

       22
       25
        
                 if (statusData.records[0].value.createdAt) {

     

       23
       26
        
                   const createdDate = new Date(statusData.records[0].value.createdAt);

     

       24
       27
        
                   const now = new Date();

     
···

       27
       30
        
                   const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));

     

       28
       31
        
                   const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));

     

       29
       32
        
       

     

       33
       33
       +
                   // Ignore if older than 12 hours

     

       34
       34
       +
                   if (diffInHours > 12) {

     

       35
       35
       +
                     return;

     

       36
       36
       +
                   }

     

       37
       37
       +
       

     

       38
       38
       +
                   const latestStatus = `"${statusData.records[0].value.text}"`;

     

       39
       39
       +
                   document.getElementById("status-text").textContent = latestStatus;

     

       40
       40
       +
                   

     

       41
       41
       +
                   // Format time contextually using Intl.RelativeTimeFormat

     

       30
       42
        
                   let timeAgoText;

     

       43
       43
       +
                   const createdHour = createdDate.getHours();

     

       44
       44
       +
                   const isToday = diffInHours < 24 && now.getDate() === createdDate.getDate();

     

       45
       45
       +
                   const isYesterday = diffInHours >= 24 && diffInHours < 48 && 

     

       46
       46
       +
                                      (now.getDate() - createdDate.getDate() === 1 ||

     

       47
       47
       +
                                       (now.getDate() === 1 && new Date(now.getFullYear(), now.getMonth(), 0).getDate() === createdDate.getDate()));

     

       48
       48
       +
                   

     

       31
       49
        
                   if (diffInMins < 1) {

     

       32
       32
       -
                     timeAgoText = "just now";

     

       33
       33
       -
                   } else if (diffInMins < 30) {

     

       34
       34
       -
                     timeAgoText = `in the last ${diffInMins} minute${diffInMins === 1 ? '' : 's'}`;

     

       50
       50
       +
                     timeAgoText = rtf.format(0, "minute"); // "now" in the user's language

     

       51
       51
       +
                   } else if (diffInMins < 5) {

     

       52
       52
       +
                     timeAgoText = rtf.format(-1, "minute"); // "1 minute ago" in the user's language

     

       35
       53
        
                   } else if (diffInMins < 60) {

     

       36
       36
       -
                     timeAgoText = `${diffInMins} minute${diffInMins === 1 ? '' : 's'} ago`;

     

       37
       37
       -
                   } else if (diffInHours < 24) {

     

       38
       38
       -
                     timeAgoText = `${diffInHours} hour${diffInHours === 1 ? '' : 's'} ago`;

     

       54
       54
       +
                     timeAgoText = rtf.format(-diffInMins, "minute");

     

       55
       55
       +
                   } else if (diffInHours < 3) {

     

       56
       56
       +
                     timeAgoText = rtf.format(-diffInHours, "hour");

     

       57
       57
       +
                   } else if (isToday) {

     

       58
       58
       +
                     // Time of day context, but still localized

     

       59
       59
       +
                     if (createdHour < 12) {

     

       60
       60
       +
                       timeAgoText = "this morning";

     

       61
       61
       +
                     } else if (createdHour < 17) {

     

       62
       62
       +
                       timeAgoText = "this afternoon";

     

       63
       63
       +
                     } else {

     

       64
       64
       +
                       timeAgoText = "this evening";

     

       65
       65
       +
                     }

     

       66
       66
       +
                   } else if (isYesterday) {

     

       67
       67
       +
                     timeAgoText = rtf.format(-1, "day"); // "yesterday" in the user's language

     

       68
       68
       +
                   } else if (diffInDays < 7) {

     

       69
       69
       +
                     timeAgoText = rtf.format(-diffInDays, "day");

     

       39
       70
        
                   } else {

     

       40
       40
       -
                     timeAgoText = `${diffInDays} day${diffInDays === 1 ? '' : 's'} ago`;

     

       71
       71
       +
                     // For older posts, use a date formatter

     

       72
       72
       +
                     const dateFormatter = new Intl.DateTimeFormat(navigator.language, {

     

       73
       73
       +
                       month: 'short', 

     

       74
       74
       +
                       day: 'numeric'

     

       75
       75
       +
                     });

     

       76
       76
       +
                     timeAgoText = `on ${dateFormatter.format(createdDate)}`;

     

       41
       77
        
                   }

     

       42
       78
        
       

     

       43
       79
        
                   document.getElementById("time-ago").textContent = timeAgoText;

     

       44
       80
        
       

     

       45
       45
       -
                   // Change "is" to "was" if more than 30 minutes old

     

       81
       81
       +
                   // Change "is" to "was" based on recency

     

       46
       82
        
                   const verbLink = document.getElementById("verb-link");

     

       47
       83
        
                   if (diffInMins > 30) {

     

       48
       84
        
                     verbLink.textContent = "Kieran was";

     

       85
       85
       +
                   }

     

       86
       86
       +
       

     

       87
       87
       +
                   // Show and animate the bubble since we have a valid status

     

       88
       88
       +
                   const bubble = document.querySelector(".bubble");

     

       89
       89
       +
                   bubble.style.visibility = "visible";

     

       90
       90
       +
                   bubble.classList.add("animate-in");

     

       91
       91
       +
                   

     

       92
       92
       +
                   // For reduced motion preferences, ensure the bubble is always visible

     

       93
       93
       +
                   if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {

     

       94
       94
       +
                     bubble.style.transform = "none"; // Ensure no transform is applied

     

       95
       95
       +
                     bubble.style.opacity = "1"; // Ensure content is visible

     

       49
       96
        
                   }

     

       50
       97
        
                 }

     

       51
       98
        
               }