From 825e7f25ce2211e7cbe1352f3fb14b388fe01d70 Mon Sep 17 00:00:00 2001
From: "Martine S. Lenders" <mail@martine-lenders.eu>
Date: Sat, 2 Mar 2024 13:17:58 +0100
Subject: [PATCH] index.html: use mastodon timeline instead of twitter timeline

---
 _sass/pages/index.scss | 10 +++++-----
 assets/js/main.js      | 25 +++++++++++--------------
 index.html             |  7 +++----
 3 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/_sass/pages/index.scss b/_sass/pages/index.scss
index 5b6f4e7d..c7fd0d5b 100644
--- a/_sass/pages/index.scss
+++ b/_sass/pages/index.scss
@@ -817,10 +817,10 @@ section {
 }
 
 ///
-// Twitter timeline
+// Mastodon timeline
 ///
-#twitter-timeline {
-  $twitter-blue: #1DA1F2;
+#mastodon-timeline {
+  $mastodon-purple: #6364FF;
 
   max-height: 450px;
   overflow: hidden;
@@ -833,13 +833,13 @@ section {
   }
 
   .placeholder {
-    color: $twitter-blue;
+    color: $mastodon-purple;
     width: 100%;
     i {
       font-size: 5rem;
     }
     a {
-      color: $twitter-blue;
+      color: $mastodon-purple;
     }
   }
 }
diff --git a/assets/js/main.js b/assets/js/main.js
index 7e4feb40..660dc32c 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -247,28 +247,25 @@
   });
 
   /**
-   * Create a new 'script' element which sources Twitter widgets script
+   * Create an 'iframe' element which shows the mastofeed
    */
-  function loadTwitterScript() {
-    let script = document.createElement('script');
-    let timeline = $("#twitter-timeline");
-    let cb = () => {
-      // When the script is loaded we bind to the widget rendering event to display it
-      twttr.events.bind("rendered", (event) => {
-          timeline.addClass("rendered");
-      });
-    }
+  function loadMastodonTimeline() {
+    let iframe = document.createElement('iframe');
+    let timeline = $("#mastodon-timeline");
 
-    script.src = "https://platform.twitter.com/widgets.js"
-    script.onload = cb;
-    document.head.append(script);
+    iframe.src = "https://www.riot-os.org/mastofeed/apiv2/feed?replies=false&boosts=false&theme=light&size=90.9";
+    iframe.title = "@RIOT_OS mastodon feed";
+    iframe.width = "100%";
+    iframe.height = "100%";
+    timeline.children('.placeholder').remove()
+    timeline.append(iframe);
   }
 
   /**
    * We need to wait until we know the user accepts using third party cookies
    */
   $(window).on("cookiesAccepted", () => {
-    loadTwitterScript();
+    loadMastodonTimeline();
   });
 
 })()
diff --git a/index.html b/index.html
index 3b30ecd6..42ec1cdf 100644
--- a/index.html
+++ b/index.html
@@ -368,14 +368,13 @@ <h2>Get in touch</h2>
         </div>
 
         <div class="row">
-          <div class="col-12 col-md-8 col-lg-4 offset-md-2 offset-lg-0 border border-1 rounded-1" id="twitter-timeline">
+          <div class="col-12 col-md-8 col-lg-4 offset-md-2 offset-lg-0 p-1 border border-1 rounded-1" id="mastodon-timeline">
             <div class="placeholder h-100">
               <div class="col d-flex flex-column justify-content-center align-items-center h-100">
-                <i class="ri-twitter-line text-center align-text-bottom"></i>
-                <a href="https://twitter.com/RIOT_OS?ref_src=twsrc%5Etfw" target="_blank">Follow us on Twitter! @RIOT_OS</a>
+                <i class="ri-mastodon-fill text-center align-text-bottom"></i>
+                <a href="https://fosstodon.org/@RIOT_OS" target="_blank">Follow us on Mastodon! @RIOT_OS@fosstodon.org</a>
               </div>
             </div>
-            <a class="twitter-timeline" data-lang="en" data-dnt="true" data-theme="light" href="https://twitter.com/RIOT_OS?ref_src=twsrc%5Etfw">@RIOT_OS</a>
           </div>
           <hr class="d-block d-lg-none mt-5">
           <div class="col-12 col-md-6 col-lg-4">