custom element for embedding Bluesky posts and feeds mary-ext.github.io/bluesky-embed
typescript npm bluesky atcute
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: code nits around date formatting

Mary 40daaff0 c4d738a3

+11 -23
+5 -5
lib/core.tsx
··· 16 16 import { segment_richtext } from './utils/richtext/segmentize.ts'; 17 17 import type { Facet } from './utils/richtext/types.ts'; 18 18 19 - import { format_abs_date, format_abs_date_time } from './utils/date.ts'; 19 + import { abs_long, abs_short, format_date } from './utils/date.ts'; 20 20 import { format_compact } from './utils/number.ts'; 21 21 22 22 type ThreadResponse = AppBskyFeedGetPostThread.Output; ··· 182 182 ) : null} 183 183 184 184 <time datetime={record.createdAt} class="main-post__date"> 185 - {format_abs_date_time(record.createdAt)} 185 + {format_date(abs_long, record.createdAt)} 186 186 </time> 187 187 188 188 <div class="main-post__stats"> ··· 244 244 <a 245 245 href={post_url} 246 246 target="_blank" 247 - title={format_abs_date_time(record.createdAt)} 247 + title={format_date(abs_long, record.createdAt)} 248 248 class="reply-post__date" 249 249 > 250 - <time datetime={record.createdAt}>{format_abs_date(record.createdAt)}</time> 250 + <time datetime={record.createdAt}>{format_date(abs_short, record.createdAt)}</time> 251 251 </a> 252 252 </div> 253 253 ··· 592 592 · 593 593 </span> 594 594 595 - <span class="embed-post__date">{format_abs_date(record.createdAt)}</span> 595 + <span class="embed-post__date">{format_date(abs_short, record.createdAt)}</span> 596 596 </div> 597 597 598 598 {text ? (
+6 -18
lib/utils/date.ts
··· 1 - const is_nan = Number.isNaN; 2 - 3 - const abs_with_time = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'short' }); 4 - const abs_with_year = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }); 5 - 6 - export const format_abs_date = (time: string | number) => { 7 - const date = new Date(time); 8 - 9 - if (is_nan(date.getTime())) { 10 - return 'N/A'; 11 - } 12 - 13 - return abs_with_year.format(date); 14 - }; 1 + export const abs_long = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'short' }); 2 + export const abs_short = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }); 15 3 16 - export const format_abs_date_time = (time: string | number) => { 17 - const date = new Date(time); 4 + export const format_date = (formatter: Intl.DateTimeFormat, date: string | number) => { 5 + const inst = new Date(date); 18 6 19 - if (is_nan(date.getTime())) { 7 + if (isNaN(inst.getTime())) { 20 8 return 'N/A'; 21 9 } 22 10 23 - return abs_with_time.format(date); 11 + return formatter.format(inst); 24 12 };