33 < div class ="overlay solid-overlay "> </ div >
44 < div class ="content-wrapper ">
55 < div class ="col-md-8 col-md-offset-2 ">
6- < a href ="{{site.mastodonServer}}/ {{ site.mastodonAccount }} " target ="_blank ">
6+ < a href ="{{site.mastodonServer}}{{ site.mastodonAccount }} " target ="_blank ">
77 < svg class ="icon " viewBox ="0 0 24 24 ">
88 < use xlink:href ="{{ site.baseurl }}/img/sprites/sprites.svg#icon-mastodon "> </ use >
99 </ svg >
1010 </ a >
11- < h3 > {{ site.tootsFeedTitle }} < a href ="{{ site.mastodonFeedUrl }} " target ="_blank "> #{{ site.mastodonHashTag }}</ a >
11+ < h3 > {{ site.tootsFeedTitle }} < a href ="{{site.mastodonServer}}{{ site.mastodonFeedUrl }} " target ="_blank "> #{{ site.mastodonHashTag }}</ a >
1212 </ h3 >
1313 < div id ="toots " class ="toots "> </ div >
1414 </ div >
1515 </ div >
1616</ section >
17- <!-- End Mastodon Feed Section -->
17+ < script >
18+ document . addEventListener ( 'DOMContentLoaded' , function ( ) {
19+ const mastodonFeedApiUrl = '{{ site.mastodonServer}}{{ site.mastodonFeedApiUrl }}' ;
20+ const mastodonRefreshIntervalMilliSeconds = '{{ site.mastodonRefreshIntervalMilliSeconds }}' ;
21+
22+ if ( typeof mastodonFeedApiUrl !== 'undefined' && mastodonFeedApiUrl ) {
23+ fetch ( mastodonFeedApiUrl )
24+ . then ( response => {
25+ if ( ! response . ok ) {
26+ throw new Error ( 'Network response was not ok' ) ;
27+ }
28+ return response . json ( ) ;
29+ } )
30+ . then ( data => {
31+ const tootsContainer = document . getElementById ( 'toots' ) ;
32+ data . forEach ( gist => {
33+ const tootDate = new Date ( gist . created_at ) ;
34+ const formattedTootDate = new Intl . DateTimeFormat ( 'en-US' , {
35+ dateStyle : 'full' ,
36+ timeStyle : 'long' ,
37+ timeZone : 'America/New_York'
38+ } ) . format ( tootDate ) ;
39+
40+ const tootElement = document . createElement ( 'div' ) ;
41+ tootElement . className = 'toot animated fadeInUp hidden' ;
42+
43+ tootElement . innerHTML =
44+ '<div class="toot-text">' +
45+ gist . content +
46+ '</div>' +
47+ '<p class="toot-meta">' +
48+ 'by <a href="' + gist . account . url + '" target="_blank">@' + gist . account . display_name + '</a>' +
49+ ' posted <a href="' + gist . url + '" target="_blank">' + formattedTootDate + '</a>' +
50+ '</p>' ;
51+
52+ tootsContainer . appendChild ( tootElement ) ;
53+ } ) ;
54+
55+ animateToots ( ) ;
56+ } )
57+ . catch ( error => console . error ( 'Error fetching Mastodon feed:' , error ) ) ;
58+
59+ function animateToots ( ) {
60+ const toots = document . querySelectorAll ( '#toots .toot' ) ;
61+ let i = 0 ;
62+
63+ if ( toots . length === 0 ) return ;
64+
65+ toots [ 0 ] . classList . remove ( 'hidden' ) ;
66+
67+ function changeToots ( ) {
68+ toots [ i ] . classList . add ( 'hidden' ) ;
69+ i = ( i + 1 ) % toots . length ;
70+ toots [ i ] . classList . remove ( 'hidden' ) ;
71+ }
72+
73+ setInterval ( changeToots , mastodonRefreshIntervalMilliSeconds ) ;
74+ }
75+ }
76+ } ) ;
77+ </ script >
78+ <!-- End Mastodon Feed Section -->
0 commit comments