From ea64ae5ecdb3dc62e0f816264736dff3ce148ba8 Mon Sep 17 00:00:00 2001
From: Markus Schlichting <markus.schlichting@karakun.com>
Date: Wed, 20 Sep 2023 21:37:40 +0200
Subject: [PATCH] replace mastodon widget with new script

also remove twitter
---
 css/mastodon-timeline.min.css |   1 +
 css/mastodon.widget.css       | 264 ------------
 index.html                    |  28 +-
 scripts/mastodon-timeline.js  | 787 ++++++++++++++++++++++++++++++++++
 scripts/mastodon.widget.js    | 382 -----------------
 5 files changed, 795 insertions(+), 667 deletions(-)
 create mode 100644 css/mastodon-timeline.min.css
 delete mode 100644 css/mastodon.widget.css
 create mode 100644 scripts/mastodon-timeline.js
 delete mode 100644 scripts/mastodon.widget.js

diff --git a/css/mastodon-timeline.min.css b/css/mastodon-timeline.min.css
new file mode 100644
index 0000000..c3fcc84
--- /dev/null
+++ b/css/mastodon-timeline.min.css
@@ -0,0 +1 @@
+:root{--text-max-lines:none}:root,html[data-theme=light]{--bg-color:#fff;--bg-hover-color:#d9e1e8;--line-gray-color:#c0cdd9;--content-text:#000;--link-color:#2a6496;--error-text-color:#8b0000}html[data-theme=dark]{--bg-color:#282c37;--bg-hover-color:#313543;--line-gray-color:#393f4f;--content-text:#fff;--link-color:#8c8dff;--error-text-color:#fe6c6c}.mt-timeline{height:100%;overflow-y:auto;position:relative;background:var(--bg-color);scrollbar-color:var(--bg-hover-color) rgba(0,0,0,.1)}.mt-timeline a,.mt-timeline a:active,.mt-timeline a:link{text-decoration:none;color:var(--link-color)}.mt-timeline a:not(.toot-preview-link):hover{text-decoration:underline}.mt-timeline::-webkit-scrollbar{width:.75rem;height:.75rem}.mt-timeline::-webkit-scrollbar-corner{background:0 0}.mt-timeline::-webkit-scrollbar-thumb{border:0 var(--content-text);border-radius:2rem;background:var(--bg-hover-color)}.mt-timeline::-webkit-scrollbar-track{border:0 var(--content-text);border-radius:0;background:rgba(0,0,0,.1)}.mt-body{padding:1rem 1.5rem;white-space:pre-wrap;word-wrap:break-word}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-toot{margin:.25rem;padding:1rem .5rem 1.5rem 4rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--line-gray-color)}.mt-toot:focus,.mt-toot:hover{cursor:pointer;background-color:var(--bg-hover-color)}.mt-toot p:last-child{margin-bottom:0}.mt-avatar{width:3rem;height:3rem;position:absolute;top:1rem;left:.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image img{width:100%;height:auto}.mt-avatar-image .mt-avatar-boosted{width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-avatar-image .mt-avatar-account{width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-user{display:table;font-weight:600;margin-bottom:1rem}.mt-user>a{color:var(--content-text)!important}.toot-text{margin-bottom:.25rem;color:var(--content-text)}.toot-text .spoiler-link{display:inline-block}.toot-text .spoiler-text-hidden{display:none}.toot-text.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--text-max-lines);-webkit-box-orient:vertical}.toot-text:not(.truncate) .ellipsis::after{content:"..."}.toot-text blockquote{border-left:.25rem solid var(--line-gray-color);margin-left:0;padding-left:.5rem}.toot-text .custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.toot-poll{margin-bottom:.25rem;color:var(--content-text)}.toot-poll ul{list-style:none;padding:0;margin:0}.toot-poll ul li{font-size:.9rem;margin-bottom:.5rem}.toot-poll ul li:not(:last-child){margin-bottom:.25rem}.toot-poll ul li:before{content:"◯";padding-right:.5rem}.toot-media{overflow:hidden;margin-bottom:.5rem}.toot-media-preview{position:relative;margin-top:.25rem;height:auto;text-align:center;width:100%}.toot-media>.spoiler-link{position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)}.toot-media-spoiler>img{filter:blur(2rem)}.toot-media-preview a{display:block;position:absolute;top:0;right:0;bottom:0;left:0}.img-ratio14_7{position:relative;padding-top:56.95%;width:100%}.img-ratio14_7>img{width:100%;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.toot-preview-link{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--line-gray-color);border-radius:.5rem;color:var(--link-color);font-size:.8rem;margin:1rem 0 .5rem 0;overflow:hidden}.toot-preview-image{width:40%;align-self:stretch}.toot-preview-image img{display:block;width:100%;height:100%;object-fit:cover}.toot-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.toot-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.toot-preview-title{font-weight:600}.spoiler-link{border-radius:2px;background-color:var(--line-gray-color);border:0;color:var(--content-text);font-weight:700;font-size:.7rem;padding:0 .35rem;text-transform:uppercase;line-height:1.25rem;cursor:pointer;vertical-align:top}.toot-date{float:right;text-decoration: none;}.mt-error{position:absolute;display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--error-text-color);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{padding:1rem 0}.mt-error-message hr{color:var(--line-gray-color)}.mt-body>.loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.loading-spinner{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.0' viewBox='0 0 128 128' %3E%3Cg%3E%3Cpath d='M64 128A64 64 0 0 1 18.34 19.16L21.16 22a60 60 0 1 0 52.8-17.17l.62-3.95A64 64 0 0 1 64 128z' fill='%23404040'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;background-color:transparent;background-size:min(2.5rem,calc(100% - .5rem))}.mt-footer{margin:1rem auto 2rem auto;padding:0 2rem;text-align:center}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
\ No newline at end of file
diff --git a/css/mastodon.widget.css b/css/mastodon.widget.css
deleted file mode 100644
index dad88a4..0000000
--- a/css/mastodon.widget.css
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * Mastodon User Timeline Widget
- * Copyright (c) 2017 有限会社アゼット
- * ライセンスに関して、LICENSEファイルを参照下さい。
- * see license file for details: https://github.com/AzetJP/mastodon-timeline-widget/blob/master/LICENSE.txt
- *
- * @author Azet <http://www.azet.jp>
- * @version 1.05
- */
-
-/* main container >>> */
-
-.mt-header,
-.mt-footer {
-	padding: 10px 10px;
-}
-
-.mastodon-timeline a:link,
-.mastodon-timeline a:active,
-.mastodon-timeline a {
-	text-decoration: none;
-	font-weight: normal;
-}
-
-.mt-header {
-	font-weight: bold;
-	border-bottom: 1px solid purple;
-}
-
-.mt-header h4 {
-	display: inline-block;
-}
-
-.mt-body {
-	height: 500px;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
-
-	/* force wrap */
-    white-space: pre-wrap; /* css-3 */
-    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-    white-space: -pre-wrap; /* Opera 4-6 */
-    white-space: -o-pre-wrap; /* Opera 7 */
-    word-wrap: break-word; /* Internet Explorer 5.5+ */
-}
-
-.mt-body .invisible {
-	display: none;
-}
-
-.mt-loading {
-	padding: 10px;
-	text-align: center;
-}
-
-.mt-footer {
-	text-align: center;
-}
-
-/* toots -messages */
-.mt-toot {
-	margin: 5px;
-	padding: 5px 5px 5px 65px;
-	position: relative;
-	min-height: 60px;
-}
-
-.mt-footer,
-.mt-toot:nth-child(n+2) {
-	border-top: 1px solid purple;
-}
-
-.mt-toot p:last-child {
-	margin-bottom: 0;
-}
-
-.mt-date {
-	text-align: right;
-}
-
-.mt-date .nsfw {
-	background: purple;
-	color: white;
-	margin-right: 1em;
-	padding: 0 3px;
-	border-radius: 2px;
-}
-
-
-.mt-avatar {
-	position: absolute;
-	top: 5px;
-	left: 5px;
-	/*margin: 0 10px 5px 0;*/
-	width: 50px;
-	height: 50px;
-	border-radius: 5px;
-	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
-}
-
-.mt-avatar-boosted {
-	width: 40px;
-	height: 40px;
-}
-
-.mt-avatar-booster {
-	width: 25px;
-	height: 25px;
-	top: 25px;
-	left: 25px;
-}
-
-.mt-error {
-	color: darkred;
-	background: lightpink;
-	margin: 5px;
-	padding: 10px;
-}
-
-/* spoiler === */
-a.btn-spoiler {
-	margin-left: 5px;
-	padding: 3px;
-	background: purple;
-	color: white;
-	border-radius: 3px;
-	font-size: 80%;
-}
-.spoiler-body {
-	display: none;
-}
-
-/* medias === */
-.toot-media-preview {
-	position: relative;
-	margin-top: 5px;
-	height: 100px;
-	background-size: cover;
-	background-position: center center;
-	box-sizing: border-box;
-	color: white;
-	text-align: center;
-	padding-top: 40px;
-}
-
-.toot-media-preview a {
-	display: block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
-/* toots status === */
-.toot-status {
-	font-weight: bold;
-	margin-top: 5px;
-}
-
-.toot-status .toot-status-boosts,
-.toot-status .toot-status-favourites {
-	display: inline-block;
-	white-space: nowrap;
-	margin-right: 10px;
-}
-
-/* medias display === */
-.toot-media-filter {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.9);
-}
-
-.toot-media-zoom {
-	position: fixed;
-	top: 5%;
-	right: 5%;
-	bottom: 5%;
-	left: 5%;
-}
-
-/* <<< */
-
-/* light theme >>> */
-.mastodon-timeline-light {
-	background: #fafafa;
-	color: #555;
-}
-
-.mastodon-timeline-light .mt-footer,
-.mastodon-timeline-light .mt-header {
-	background: #eee;
-}
-
-.mastodon-timeline-light a:link,
-.mastodon-timeline-light a:active,
-.mastodon-timeline-light a {
-	color: #26afff;
-}
-
-.mastodon-timeline-light .mt-header {
-	border-bottom-color: lightgrey;
-}
-
-.mastodon-timeline-light .mt-footer,
-.mastodon-timeline-light .mt-toot:nth-child(n+2) {
-	border-top-color:  lightgrey;
-}
-
-.mastodon-timeline-light .toot-status,
-.mastodon-timeline-light .mt-date a {
-	color: #aaa;
-}
-
-/* spoiler === */
-.mastodon-timeline-light a.btn-spoiler {
-	background: #26afff;
-	color: white;
-}
-/* <<< */
-
-/* dark theme >>> */
-.mastodon-timeline-dark {
-	background: #393f4f;
-	color: white;
-}
-
-.mastodon-timeline-dark .mt-footer,
-.mastodon-timeline-dark .mt-header {
-	background: #313543;
-}
-
-.mastodon-timeline-dark a:link,
-.mastodon-timeline-dark a:active,
-.mastodon-timeline-dark a {
-	color: #2b90d9;
-}
-
-.mastodon-timeline-dark .mt-header {
-	border-bottom-color: #606984;
-}
-
-.mastodon-timeline-dark .mt-footer,
-.mastodon-timeline-dark .mt-toot:nth-child(n+2) {
-	border-top-color: #606984;
-}
-
-.mastodon-timeline-dark .toot-status,
-.mastodon-timeline-dark .mt-date a {
-	color: #606984;
-}
-
-/* spoiler === */
-.mastodon-timeline-dark a.btn-spoiler {
-	background: #687390;
-	color: #393F4F;
-}
-/* <<< */
-
-/* vim set foldmethod=marker foldlevel=0 */
diff --git a/index.html b/index.html
index 2f5a7ab..1cab5f0 100644
--- a/index.html
+++ b/index.html
@@ -27,7 +27,7 @@
     <link href="css/main.css" rel="stylesheet">
 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-    <link href="css/mastodon.widget.css" rel="stylesheet">
+    <link href="css/mastodon-timeline.min.css" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -155,7 +155,6 @@
                         <li><a href="feed.xml">Hackergarten Events RSS Feed</a></li>
                         <li><a href="http://github.com/hackergarten">Public Git Repository</a><br>
                             <li><a href="https://fosstodon.org/@hackergarten">@Hackergarten on Mastodon</a></li>
-                            <li><a href="http://www.twitter.com/Hackergarten">@Hackergarten on Twitter</a></li>
                             <li><a href="https://gitter.im/hackergarten?utm_source=share-link&utm_medium=link&utm_campaign=share-link">Gitter</a></li>
                         <li>Slack: <a href="https://forms.gle/93guiZ3rXtW4azdo6">request invitation</a> and/or <a href="https://hackergarten.slack.com/">enter workspace</a></li>
                     </ul>
@@ -163,15 +162,12 @@
             </div>
 
             <div class="panel panel-default">
-              <div class="panel-heading">Mastodon</div>
-              <div class="mastodon-timeline mastodon-timeline-light" id="mastodon-timeline"></div>
-            </div>
-
-            <div class="panel panel-default">
-                <div class="panel-heading">Twitter</div>
-                <div class="panel-body">
-                    <a class="twitter-timeline" data-width="500" data-height="500" data-dnt="true" data-link-color="#428bca" href="https://twitter.com/Hackergarten?ref_src=twsrc%5Etfw">Tweets by Hackergarten</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+              <div class="panel-heading">#Hackergarten on fosstodon.org Mastodon Instance</div>
+              <div class="mt-timeline">
+                <div id="mt-body" class="mt-body" role="feed">
+                  <div class="loading-spinner"></div>
                 </div>
+              </div>
             </div>
 
             <div class="panel panel-default">
@@ -275,17 +271,7 @@ <h4><strong>Hack {{ngDialogData.title}}.</strong></h4>
 <script src="scripts/github.js"></script>
 <script src="scripts/locations.js"></script>
 
-<script src="scripts/mastodon.widget.js"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-    var mapi = new MastodonApi({
-        target_selector: '#mastodon-timeline',
-        pic_icon              : '<i class="fa fa-picture-o"></i>',
-		boosts_count_icon     : '<i class="fa fa-retweet"></i>',
-		favourites_count_icon : '<i class="fa fa-star"></i>'
-    });
-});
-</script>
+<script src="scripts/mastodon-timeline.js"></script>
 
 <script>
     function checkLicense() {
diff --git a/scripts/mastodon-timeline.js b/scripts/mastodon-timeline.js
new file mode 100644
index 0000000..f609e08
--- /dev/null
+++ b/scripts/mastodon-timeline.js
@@ -0,0 +1,787 @@
+/**
+ * Mastodon embed feed timeline v3.9.1
+ * More info at:
+ * https://gitlab.com/idotj/mastodon-embed-feed-timeline
+ */
+
+/**
+ * Timeline settings
+ * Adjust these parameters to customize your timeline
+ */
+window.addEventListener("load", () => {
+  const mastodonTimeline = new MastodonApi({
+    // Id of the <div> containing the timeline
+    container_body_id: "mt-body",
+
+    // Class name for the loading spinner (also used in CSS file)
+    spinner_class: "loading-spinner",
+
+    // Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
+    default_theme: "light",
+
+    // Your Mastodon instance
+    instance_url: "https://fosstodon.org",
+
+    // Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
+    timeline_type: "hashtag",
+
+    // Your user ID on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
+    user_id: "",
+
+    // Your user name on Mastodon instance. Leave empty if you didn't choose 'profile' as type of timeline
+    profile_name: "",
+
+    // The name of the hashtag. Leave empty if you didn't choose 'hashtag' as type of timeline
+    hashtag_name: "hackergarten",
+
+    // Maximum amount of toots to get. Default: 20
+    toots_limit: "20",
+
+    // Hide unlisted toots. Default: don't hide
+    hide_unlisted: false,
+
+    // Hide boosted toots. Default: don't hide
+    hide_reblog: false,
+
+    // Hide replies toots. Default: don't hide
+    hide_replies: false,
+
+    // Hide preview card if toot contains a link, photo or video from a URL. Default: don't hide
+    hide_preview_link: false,
+
+    // Hide custom emojis available on the server. Default: don't hide
+    hide_emojos: false,
+
+    // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Ddefault: don't apply
+    markdown_blockquote: false,
+
+    //set the font icon for replies counter, e.g. 
+    replies_count_icon: '<i class="fa fa-reply"></i>',
+
+    //set the font icon for boosts counter
+    boosts_count_icon: '<i class="fa fa-retweet"></i>',
+
+    //set the font icon for favourites counter
+    favourites_count_icon: '<i class="fa fa-star"></i>',
+
+    // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
+    text_max_lines: "0",
+
+    // Customize the text of the link pointing to the Mastodon page (appears after the last toot)
+    link_see_more: "See more posts at Mastodon",
+  });
+});
+
+/**
+ * Set all variables with customized values or use default ones
+ * @param {object} params_ User customized values
+ * Trigger main function to build the timeline
+ */
+const MastodonApi = function (params_) {
+  this.CONTAINER_BODY_ID = params_.container_body_id || "mt-body";
+  this.SPINNER_CLASS = params_.spinner_class || "loading-spinner";
+  this.DEFAULT_THEME = params_.default_theme || "auto";
+  this.INSTANCE_URL = params_.instance_url;
+  this.USER_ID = params_.user_id || "";
+  this.PROFILE_NAME = this.USER_ID ? params_.profile_name : "";
+  this.TIMELINE_TYPE = params_.timeline_type || "local";
+  this.HASHTAG_NAME = params_.hashtag_name || "";
+  this.TOOTS_LIMIT = params_.toots_limit || "20";
+  this.HIDE_UNLISTED =
+    typeof params_.hide_unlisted !== "undefined"
+      ? params_.hide_unlisted
+      : false;
+  this.HIDE_REBLOG =
+    typeof params_.hide_reblog !== "undefined" ? params_.hide_reblog : false;
+  this.HIDE_REPLIES =
+    typeof params_.hide_replies !== "undefined" ? params_.hide_replies : false;
+  this.HIDE_PREVIEW_LINK =
+    typeof params_.hide_preview_link !== "undefined"
+      ? params_.hide_preview_link
+      : false;
+  this.HIDE_EMOJOS =
+    typeof params_.hide_emojos !== "undefined" ? params_.hide_emojos : false;
+  this.MARKDOWN_BLOCKQUOTE =
+    typeof params_.markdown_blockquote !== "undefined"
+      ? params_.markdown_blockquote
+      : false;
+  this.TEXT_MAX_LINES = params_.text_max_lines || "0";
+  this.LINK_SEE_MORE = params_.link_see_more;
+  this.FETCHED_DATA = {};
+
+  this.REPLIES_COUNT_ICON     = params_.replies_count_icon || '[Replies]';
+	this.BOOSTS_COUNT_ICON     = params_.boosts_count_icon || '[Boost]';
+	this.FAVOURITES_COUNT_ICON = params_.favourites_count_icon || '[Favourite]';
+
+  this.mtBodyContainer = document.getElementById(this.CONTAINER_BODY_ID);
+
+  this.buildTimeline();
+};
+
+/**
+ * Trigger functions and construct timeline
+ */
+MastodonApi.prototype.buildTimeline = async function () {
+  // Apply color theme
+  this.setTheme();
+
+  // Get server data
+  await this.getTimelineData();
+
+  // Empty the <div> container
+  this.mtBodyContainer.innerHTML = "";
+
+  for (let i in this.FETCHED_DATA.timeline) {
+    // First filter (Public / Unlisted)
+    if (
+      this.FETCHED_DATA.timeline[i].visibility == "public" ||
+      (!this.HIDE_UNLISTED &&
+        this.FETCHED_DATA.timeline[i].visibility == "unlisted")
+    ) {
+      // Second filter (Reblog / Replies)
+      if (
+        (this.HIDE_REBLOG && this.FETCHED_DATA.timeline[i].reblog) ||
+        (this.HIDE_REPLIES && this.FETCHED_DATA.timeline[i].in_reply_to_id)
+      ) {
+        // Nothing here (Don't append toots)
+      } else {
+        // Append toots
+        this.appendToot(this.FETCHED_DATA.timeline[i], Number(i));
+      }
+    }
+  }
+
+  // Check if there are toots in the container (due to filters applied)
+  if (this.mtBodyContainer.innerHTML === "") {
+    this.mtBodyContainer.setAttribute("role", "none");
+    this.mtBodyContainer.innerHTML =
+      '<div class="mt-error"><span class="mt-error-icon">📭</span><br/><strong>Sorry, no toots to show</strong><br/><div class="mt-error-message">Got ' +
+      this.FETCHED_DATA.timeline.length +
+      ' toots from the server but due to the "hide filters" applied, no toot is shown</div></div>';
+  } else {
+    // Insert link after last toot to visit Mastodon page
+    if (this.LINK_SEE_MORE) {
+      let linkSeeMorePath = "";
+      if (this.TIMELINE_TYPE === "profile") {
+        linkSeeMorePath = this.PROFILE_NAME;
+      } else if (this.TIMELINE_TYPE === "hashtag") {
+        linkSeeMorePath = "tags/" + this.HASHTAG_NAME;
+      } else if (this.TIMELINE_TYPE === "local") {
+        linkSeeMorePath = "public/local";
+      }
+      let linkSeeMore =
+        '<div class="mt-footer"><a href="' +
+        this.INSTANCE_URL +
+        "/" +
+        linkSeeMorePath +
+        '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' +
+        this.LINK_SEE_MORE +
+        "</a></div>";
+      this.mtBodyContainer.parentNode.insertAdjacentHTML(
+        "beforeend",
+        linkSeeMore
+      );
+    }
+
+    // Control loading spinners
+    this.manageSpinner();
+  }
+
+  // Toot interactions
+  this.mtBodyContainer.addEventListener("click", function (e) {
+    // Check if toot cointainer was clicked
+    if (
+      e.target.localName == "article" ||
+      e.target.offsetParent.localName == "article" ||
+      (e.target.localName == "img" &&
+        e.target.offsetParent.className !== "mt-avatar" &&
+        e.target.offsetParent.className !== "mt-avatar-account")
+    ) {
+      openTootURL(e);
+    }
+    // Check if Show More/Less button was clicked
+    if (
+      e.target.localName == "button" &&
+      e.target.className == "spoiler-link"
+    ) {
+      toogleSpoiler(e);
+    }
+  });
+  this.mtBodyContainer.addEventListener("keydown", function (e) {
+    // Check if Enter key was pressed with focus in an article
+    if (e.key === "Enter" && e.target.localName == "article") {
+      openTootURL(e);
+    }
+  });
+
+  /**
+   * Open toot in a new page avoiding any other natural link
+   * @param {event} e User interaction trigger
+   */
+  const openTootURL = function (e) {
+    let urlToot = e.target.closest(".mt-toot").dataset.location;
+    if (
+      e.target.localName !== "a" &&
+      e.target.localName !== "span" &&
+      e.target.localName !== "button" &&
+      e.target.parentNode.className !== "toot-preview-image" &&
+      urlToot
+    ) {
+      window.open(urlToot, "_blank");
+    }
+  };
+
+  /**
+   * Spoiler button
+   * @param {event} e User interaction trigger
+   */
+  const toogleSpoiler = function (e) {
+    const nextSibling = e.target.nextSibling;
+    if (nextSibling.localName === "img") {
+      e.target.parentNode.classList.remove("toot-media-spoiler");
+      e.target.style.display = "none";
+    } else if (
+      nextSibling.classList.contains("spoiler-text-hidden") ||
+      nextSibling.classList.contains("spoiler-text-visible")
+    ) {
+      if (e.target.textContent == "Show more") {
+        nextSibling.classList.remove("spoiler-text-hidden");
+        nextSibling.classList.add("spoiler-text-visible");
+        e.target.setAttribute("aria-expanded", "true");
+        e.target.textContent = "Show less";
+      } else {
+        nextSibling.classList.remove("spoiler-text-visible");
+        nextSibling.classList.add("spoiler-text-hidden");
+        e.target.setAttribute("aria-expanded", "false");
+        e.target.textContent = "Show more";
+      }
+    }
+  };
+};
+
+/**
+ * Set the theme style chosen by the user or by the browser/OS
+ */
+MastodonApi.prototype.setTheme = function () {
+  /**
+   * Set the theme value in the <html> tag using the attribute "data-theme"
+   * @param {string} theme Type of theme to apply: dark or light
+   */
+  const setTheme = function (theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+  };
+
+  if (this.DEFAULT_THEME === "auto") {
+    let systemTheme = window.matchMedia("(prefers-color-scheme: dark)");
+    systemTheme.matches ? setTheme("dark") : setTheme("light");
+    // Update the theme if user change browser/OS preference
+    systemTheme.addEventListener("change", (e) => {
+      e.matches ? setTheme("dark") : setTheme("light");
+    });
+  } else {
+    setTheme(this.DEFAULT_THEME);
+  }
+};
+
+/**
+ * Requests to the server to get all the data
+ */
+MastodonApi.prototype.getTimelineData = async function () {
+  return new Promise((resolve, reject) => {
+    /**
+     * Fetch data from server
+     * @param {string} url address to fetch
+     * @returns {object} List of objects
+     */
+    async function fetchData(url) {
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error(
+          "Failed to fetch the following URL: " +
+            url +
+            "<hr>" +
+            "Error status: " +
+            response.status +
+            "<hr>" +
+            "Error message: " +
+            response.statusText
+        );
+      }
+
+      const data = await response.json();
+      return data;
+    }
+
+    // URLs to fetch
+    let urls = {};
+    if (this.TIMELINE_TYPE === "profile") {
+      urls.timeline = `${this.INSTANCE_URL}/api/v1/accounts/${this.USER_ID}/statuses?limit=${this.TOOTS_LIMIT}`;
+    } else if (this.TIMELINE_TYPE === "hashtag") {
+      urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/tag/${this.HASHTAG_NAME}?limit=${this.TOOTS_LIMIT}`;
+    } else if (this.TIMELINE_TYPE === "local") {
+      urls.timeline = `${this.INSTANCE_URL}/api/v1/timelines/public?local=true&limit=${this.TOOTS_LIMIT}`;
+    }
+    if (!this.HIDE_EMOJOS) {
+      urls.emojos = this.INSTANCE_URL + "/api/v1/custom_emojis";
+    }
+
+    const urlsPromises = Object.entries(urls).map(([key, url]) => {
+      return fetchData(url)
+        .then((data) => ({ [key]: data }))
+        .catch((error) => {
+          reject(new Error("Something went wrong fetching data"));
+          this.mtBodyContainer.innerHTML =
+            '<div class="mt-error"><span class="mt-error-icon">❌</span><br/><strong>Sorry, request failed:</strong><br/><div class="mt-error-message">' +
+            error.message +
+            "</div></div>";
+          this.mtBodyContainer.setAttribute("role", "none");
+          return { [key]: [] };
+        });
+    });
+
+    // Fetch all urls simultaneously
+    Promise.all(urlsPromises).then((dataObjects) => {
+      this.FETCHED_DATA = dataObjects.reduce((result, dataItem) => {
+        return { ...result, ...dataItem };
+      }, {});
+
+      // console.log("Timeline data: ", this.FETCHED_DATA);
+      resolve();
+    });
+  });
+};
+
+/**
+ * Inner function to add each toot in timeline container
+ * @param {object} c Toot content
+ * @param {number} i Index of toot
+ */
+MastodonApi.prototype.appendToot = function (c, i) {
+  this.mtBodyContainer.insertAdjacentHTML("beforeend", this.assambleToot(c, i));
+};
+
+/**
+ * Build toot structure
+ * @param {object} c Toot content
+ * @param {number} i Index of toot
+ */
+MastodonApi.prototype.assambleToot = function (c, i) {
+  let avatar, user, content, url, date;
+
+  if (c.reblog) {
+    // BOOSTED toot
+    // Toot url
+    url = c.reblog.url;
+
+    // Boosted avatar
+    avatar =
+      '<a href="' +
+      c.reblog.account.url +
+      '" class="mt-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
+      '<div class="mt-avatar-image">' +
+      '<div class="mt-avatar-boosted">' +
+      '<img src="' +
+      c.reblog.account.avatar +
+      '" alt="' +
+      c.reblog.account.username +
+      ' avatar" loading="lazy" />' +
+      "</div>" +
+      '<div class="mt-avatar-account">' +
+      '<img src="' +
+      c.account.avatar +
+      '" alt="' +
+      c.account.username +
+      ' avatar" loading="lazy" />' +
+      "</div>" +
+      "</div>" +
+      "</a>";
+
+    // User name and url
+    user =
+      '<div class="mt-user">' +
+      '<a href="' +
+      c.reblog.account.url +
+      '" rel="nofollow noopener noreferrer" target="_blank">' +
+      (c.reblog.account.display_name
+        ? c.reblog.account.display_name
+        : c.reblog.account.username) +
+      '<span class="visually-hidden"> account</span>' +
+      "</a>" +
+      "</div>";
+
+    // Date
+    date = this.formatDate(c.reblog.created_at);
+  } else {
+    // STANDARD toot
+    // Toot url
+    url = c.url;
+
+    // Avatar
+    avatar =
+      '<a href="' +
+      c.account.url +
+      '" class="mt-avatar" rel="nofollow noopener noreferrer" target="_blank">' +
+      '<div class="mt-avatar-image">' +
+      '<img src="' +
+      c.account.avatar +
+      '" alt="' +
+      c.account.username +
+      ' avatar" loading="lazy" />' +
+      "</div>" +
+      "</a>";
+
+    // User name and url
+    user =
+      '<div class="mt-user">' +
+      '<a href="' +
+      c.account.url +
+      '" rel="nofollow noopener noreferrer" target="_blank">' +
+      (c.account.display_name ? c.account.display_name : c.account.username) +
+      '<span class="visually-hidden"> account</span>' +
+      "</a>" +
+      "</div>";
+
+    // Date
+    date = this.formatDate(c.created_at);
+  }
+
+  // Main text
+  let text_css = "";
+  if (this.TEXT_MAX_LINES !== "0") {
+    text_css = "truncate";
+    document.documentElement.style.setProperty(
+      "--text-max-lines",
+      this.TEXT_MAX_LINES
+    );
+  }
+
+  if (c.spoiler_text !== "") {
+    content =
+      '<div class="toot-text">' +
+      c.spoiler_text +
+      ' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>' +
+      '<div class="spoiler-text-hidden">' +
+      this.formatTootText(c.content) +
+      "</div>" +
+      "</div>";
+  } else if (
+    c.reblog &&
+    c.reblog.content !== "" &&
+    c.reblog.spoiler_text !== ""
+  ) {
+    content =
+      '<div class="toot-text">' +
+      c.reblog.spoiler_text +
+      ' <button type="button" class="spoiler-link" aria-expanded="false">Show more</button>' +
+      '<div class="spoiler-text-hidden">' +
+      this.formatTootText(c.reblog.content) +
+      "</div>" +
+      "</div>";
+  } else if (
+    c.reblog &&
+    c.reblog.content !== "" &&
+    c.reblog.spoiler_text === ""
+  ) {
+    content =
+      '<div class="toot-text ' +
+      text_css +
+      '">' +
+      "<div>" +
+      this.formatTootText(c.reblog.content) +
+      "</div>" +
+      "</div>";
+  } else {
+    content =
+      '<div class="toot-text ' +
+      text_css +
+      '">' +
+      "<div>" +
+      this.formatTootText(c.content) +
+      "</div>" +
+      "</div>";
+  }
+
+  // Media attachments
+  let media = "";
+  if (c.media_attachments.length > 0) {
+    for (let picid in c.media_attachments) {
+      media = this.placeMedias(c.media_attachments[picid], c.sensitive);
+    }
+  }
+  if (c.reblog && c.reblog.media_attachments.length > 0) {
+    for (let picid in c.reblog.media_attachments) {
+      media = this.placeMedias(
+        c.reblog.media_attachments[picid],
+        c.reblog.sensitive
+      );
+    }
+  }
+
+  // Preview link
+  let preview_link = "";
+  if (!this.HIDE_PREVIEW_LINK && c.card) {
+    preview_link = this.placePreviewLink(c.card);
+  }
+
+  // Poll
+  let poll = "";
+  let pollOption = "";
+  if (c.poll) {
+    for (let i in c.poll.options) {
+      pollOption += "<li>" + c.poll.options[i].title + "</li>";
+    }
+    poll = '<div class="toot-poll">' + "<ul>" + pollOption + "</ul>" + "</div>";
+  }
+
+  // Date
+  const timestamp =
+    '<div class="toot-date">' +
+    '<a href="' +
+    url +
+    '" rel="nofollow noopener noreferrer" tabindex="-1" target="_blank">' +
+    date +
+    "</a>" +
+    "</div>";
+
+  // stats (boosts + favourites counts) >>>
+		// data
+		var repliesCountIcon     = '<span class="toot-status-replies">'   + this.REPLIES_COUNT_ICON    +": "+ c.replies_count    + ' </span>';
+    var boostsCountIcon     = '<span class="toot-status-boosts">'     + this.BOOSTS_COUNT_ICON     +": "+ c.reblogs_count    + ' </span>';
+		var favouritesCountIcon = '<span class="toot-status-favourites">' + this.FAVOURITES_COUNT_ICON +": "+ c.favourites_count + ' </span>';
+
+		// html nodes
+		var statusBar = '<div class="toot-status">' +
+      repliesCountIcon +
+			boostsCountIcon +
+			favouritesCountIcon +
+			'</div>';
+  
+
+  // Add all to main toot container
+  const toot =
+    '<article class="mt-toot" aria-posinset="' +
+    (i + 1) +
+    '" aria-setsize="' +
+    this.TOOTS_LIMIT +
+    '" data-location="' +
+    url +
+    '" tabindex="0">' +
+    avatar +
+    timestamp +
+    user +
+    content +
+    media +
+    preview_link +
+    poll +
+    
+    statusBar +
+    "</article>";
+
+  return toot;
+};
+
+/**
+ * Handle text changes made to toots
+ * @param {string} c Text content
+ * @returns {string} Text content modified
+ */
+MastodonApi.prototype.formatTootText = function (c) {
+  let content = c;
+
+  // Format hashtags and mentions
+  content = this.addTarget2hashtagMention(content);
+
+  // Convert emojos shortcode into images
+  if (!this.HIDE_EMOJOS) {
+    content = this.showEmojos(content, this.FETCHED_DATA.emojos);
+  }
+
+  // Convert markdown styles into HTML
+  if (this.MARKDOWN_BLOCKQUOTE) {
+    content = this.replaceHTMLtag(
+      content,
+      "<p>&gt;",
+      "</p>",
+      "<blockquote><p>",
+      "</p></blockquote>"
+    );
+  }
+
+  return content;
+};
+
+/**
+ * Add target="_blank" to all #hashtags and @mentions in the toot
+ * @param {string} c Text content
+ * @returns {string} Text content modified
+ */
+MastodonApi.prototype.addTarget2hashtagMention = function (c) {
+  let content = c.replaceAll('rel="tag"', 'rel="tag" target="_blank"');
+  content = content.replaceAll(
+    'class="u-url mention"',
+    'class="u-url mention" target="_blank"'
+  );
+
+  return content;
+};
+
+/**
+ * Find all custom emojis shortcode and replace by image
+ * @param {string} c Text content
+ * @param {array} e List with all custom emojis
+ * @returns {string} Text content modified
+ */
+MastodonApi.prototype.showEmojos = function (c, e) {
+  if (c.includes(":")) {
+    for (const emojo of e) {
+      const regex = new RegExp(`\\:${emojo.shortcode}\\:`, "g");
+      c = c.replace(
+        regex,
+        `<img src="${emojo.url}" class="custom-emoji" alt="Emoji ${emojo.shortcode}" />`
+      );
+    }
+
+    return c;
+  } else {
+    return c;
+  }
+};
+
+/**
+ * Find all start/end <tags> and replace them by another start/end <tags>
+ * @param {string} c Text content
+ * @param {string} initialTagOpen Start HTML tag to replace
+ * @param {string} initialTagClose End HTML tag to replace
+ * @param {string} replacedTagOpen New start HTML tag
+ * @param {string} replacedTagClose New end HTML tag
+ * @returns {string} Text in HTML format
+ */
+MastodonApi.prototype.replaceHTMLtag = function (
+  c,
+  initialTagOpen,
+  initialTagClose,
+  replacedTagOpen,
+  replacedTagClose
+) {
+  if (c.includes(initialTagOpen)) {
+    const regex = new RegExp(initialTagOpen + "(.*?)" + initialTagClose, "gi");
+
+    return c.replace(regex, replacedTagOpen + "$1" + replacedTagClose);
+  } else {
+    return c;
+  }
+};
+
+/**
+ * Place media
+ * @param {object} m Media content
+ * @param {boolean} s Spoiler/Sensitive status
+ * @returns {string} Media in HTML format
+ */
+MastodonApi.prototype.placeMedias = function (m, s) {
+  let spoiler = s || false;
+  const pic =
+    '<div class="toot-media ' +
+    (spoiler ? "toot-media-spoiler" : "") +
+    " img-ratio14_7 " +
+    this.SPINNER_CLASS +
+    '">' +
+    (spoiler ? '<button class="spoiler-link">Show content</button>' : "") +
+    '<img src="' +
+    m.preview_url +
+    '" alt="' +
+    (m.description ? m.description : "") +
+    '" loading="lazy" />' +
+    "</div>";
+
+  return pic;
+};
+
+/**
+ * Place preview link
+ * @param {object} c Preview link content
+ * @returns {string} Preview link in HTML format
+ */
+MastodonApi.prototype.placePreviewLink = function (c) {
+  let card =
+    '<a href="' +
+    c.url +
+    '" class="toot-preview-link" target="_blank" rel="noopener noreferrer">' +
+    (c.image
+      ? '<div class="toot-preview-image ' +
+        this.SPINNER_CLASS +
+        '"><img src="' +
+        c.image +
+        '" alt="" loading="lazy" /></div>'
+      : '<div class="toot-preview-noImage">📄</div>') +
+    "</div>" +
+    '<div class="toot-preview-content">' +
+    (c.provider_name
+      ? '<span class="toot-preview-provider">' + c.provider_name + "</span>"
+      : "") +
+    '<span class="toot-preview-title">' +
+    c.title +
+    "</span>" +
+    (c.author_name
+      ? '<span class="toot-preview-author">By ' + c.author_name + "</span>"
+      : "") +
+    "</div>" +
+    "</a>";
+
+  return card;
+};
+
+/**
+ * Format date
+ * @param {string} d Date in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
+ * @returns {string} Date formated (MM DD, YYYY)
+ */
+MastodonApi.prototype.formatDate = function (d) {
+  const monthNames = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+
+  let date = new Date(d);
+
+  const displayDate =
+    monthNames[date.getMonth()] +
+    " " +
+    date.getDate() +
+    ", " +
+    date.getFullYear();
+
+  return displayDate;
+};
+
+/**
+ * Add/Remove event listener for loading spinner
+ */
+MastodonApi.prototype.manageSpinner = function () {
+  // Remove CSS class to container and listener to images
+  const spinnerCSS = this.SPINNER_CLASS;
+  const removeSpinner = function () {
+    this.parentNode.classList.remove(spinnerCSS);
+    this.removeEventListener("load", removeSpinner);
+    this.removeEventListener("error", removeSpinner);
+  };
+
+  // Add listener to images
+  this.mtBodyContainer
+    .querySelectorAll(`.${this.SPINNER_CLASS} > img`)
+    .forEach((e) => {
+      e.addEventListener("load", removeSpinner);
+      e.addEventListener("error", removeSpinner);
+    });
+};
diff --git a/scripts/mastodon.widget.js b/scripts/mastodon.widget.js
deleted file mode 100644
index e7c7633..0000000
--- a/scripts/mastodon.widget.js
+++ /dev/null
@@ -1,382 +0,0 @@
-/**
- * Mastodon User Timeline Widget
- * Copyright (c) 2017 有限会社アゼット
- * ライセンスに関して、LICENSEファイルを参照下さい。
- * see license file for details: https://github.com/AzetJP/mastodon-timeline-widget/blob/master/LICENSE.txt
- *
- * @author Azet <http://www.azet.jp>
- * @version 1.07 (also update MastodonAPI.version below)
- * @param object params_
- *    instance_uri    : the instance to fetch messages from
- *    access_token    : widget's application access token (can be generated from http://www.azet.jp/mastodon.wizard/wizard_en.html)
- *    account_id      : user account id to fetch messages of
- *    target_selector : HTML node selector (jquery/css style)
- *    toots_limit     : max toots display count (default 20 like API)
- */
-
-/* constructor >>> */
-var MastodonApi = function(params_) {
-
-	// endpoint access settings
-	this.INSTANCE_URI        = params_.instance_uri;
-	this.ACCESS_TOKEN        = params_.access_token;
-	this.ACCOUNT_ID          = params_.account_id;
-	// optional parameters
-	this.toots_limit         = params_.toots_limit || 20;
-	this.picIcon             = params_.pic_icon || '[PICTURE]';
-	this.boostsCountIcon     = params_.boosts_count_icon || '[Boost]';
-	this.favouritesCountIcon = params_.favourites_count_icon || '[Favourite]';
-
-	// display target element
-	this.widget = $(params_.target_selector);
-
-	// build the basic widget
-	this.makeWidget();
-	this.listStatuses();
-
-	// spoiler toggle
-	// jQuery event handler
-	var toggleSpoiler = function(e_) {
-		e_.preventDefault();
-
-		// btn text
-		if( $(this).hasClass('spoiler-opened') ) {
-			$(this).text(MastodonApi.text.spoilerBtnClosed);
-		}
-		else {
-			$(this).text(MastodonApi.text.spoilerBtnOpened);
-		}
-		$(this).toggleClass('spoiler-opened');
-
-		// open body
-		$(this).parent().next('.spoiler-body').toggle();
-
-	};
-
-
-	// nsfw toggle
-	// jQuery event handler
-	var toggleNsfwMedia = function(e_) {
-		e_.preventDefault();
-
-		if($(this).hasClass('nsfw-opened')) {
-			// hide image ===
-			$(this).css({
-				'background' : 'black'
-			})
-			.text(MastodonApi.text.nsfwViewMsg)
-			.removeClass('nsfw-opened');
-		}
-		else {
-			// display image ===
-			var img = $(this).attr('data-picpreview-url');
-			$(this).css({
-				'background'       : 'url('+img+') center center no-repeat'
-				,'background-size' : 'cover'
-			})
-			.text('')
-			.addClass('nsfw-opened');
-		}
-
-	}
-
-
-	/**
-	 * toggle the display of pictures in a modal-ish fashion
-	 *
-	 * @author Azet
-	 * @param jquery_event e_
-	 */
-	var toggleMedia = function(e_) {
-		e_.preventDefault();
-
-		var link = $(this).attr('href');
-		var filter = makeFilter();
-		var pic = $('<div class="toot-media-zoom" style="background: url('+link+') 50% 50% no-repeat; background-size: contain;"></div>');
-		filter.append(pic);
-	};
-
-
-	var makeFilter = function() {
-		var filter = $('<div class="toot-media-filter"></div>');
-		filter.click(function(e_) {
-			e_.preventDefault();
-			$(this).remove();
-		});
-		$('body').append(filter);
-		return filter;
-	}
-
-
-	// spoiler buttons events
-	this.widget.on('click', '.btn-spoiler', toggleSpoiler);
-
-	// hidden media display toggle
-	this.widget.on('click', '.toot-media-nsfw', toggleNsfwMedia);
-
-	// clicks on media icon links
-	this.widget.on('click', '.toot-media-link', toggleMedia);
-}
-/* <<< end constructor */
-
-
-/* widget Attributes >>> */
-MastodonApi.build = 7;        // later for version comparisons if needed
-MastodonApi.version = "1.07"; // display
-/* <<< */
-
-
-/* texts >>> */
-MastodonApi.text = {
-	spoilerBtnClosed  : "Show more"
-	,spoilerBtnOpened : "Show less"
-	,nsfwLabel        : "NSFW"
-	,nsfwViewMsg      : "Click to view"
-};
-/* <<< */
-
-
-/**
- * build timeline widget
- */
-MastodonApi.prototype.makeWidget = function() {
-	this.widget.addClass('mastodon-timeline');
-	this.widget.append($('<div class="mt-body"><div class="mt-loading">loading...</div></div>'));
-	this.widget.append($('<div class="mt-footer">View more on <a href="https://fosstodon.org/tags/hackergarten">Mastodon</a></div>'));
-};
-
-
-/**
- * listing function
- */
-MastodonApi.prototype.listStatuses = function() {
-	var mapi = this;
-
-	// get request
-	$.ajax({
-		url: 'https://fosstodon.org/api/v1/timelines/tag/hackergarten'
-		,method : 'GET'
-		,dataType: 'json'
-		,data : {
-			limit : this.toots_limit
-		}
-		,success: function(data_) {
-			// clear the loading message
-			$('.mt-body', mapi.widget).html("");
-			//console.log( data_ );
-
-			// add posts
-			for(var i in data_) {
-				if(i==0) {
-					// update user link only at first post
-					//var account = data_[i].account;
-					//setHeaderUserLink.call(mapi, account);
-					//setFooterLink.call(mapi, account);
-				}
-				if(data_[i].visibility=='public') {
-					// list only public toots
-					appendStatus.call(mapi, data_[i]);
-				}
-			}
-
-			// fix content link target
-			$('a', mapi.widget).attr('target', '_blank');
-		}
-		,error: function(d_) {
-			//console.log( d_ );
-			if(d_.responseJSON) {
-				$('.mt-body', mapi.widget).html( '<div class="mt-error">' + d_.responseJSON.error + '</div>');
-			}
-		}
-	});
-
-
-	/**
-	 * add user link
-	 * @param object account_
-	 */
-	var setHeaderUserLink = function(account_) {
-		// set user name and link
-		$('.user-link', this.widget).append("<a href='"+account_.url+"'>@"+account_.username+"</a>");
-	};
-
-
-	/**
-	 * inner function to add each message in container
-	 * @param object status_
-	 */
-	var appendStatus = function(status_) {
-		//console.log( status_ );
-		var content;
-		var date, url, avatar, user;
-
-		// dealing with spoiler content
-		if(status_.spoiler_text != "") {
-			// handle spoilers
-			//content.wrap('<div class="spoiler"></div>');
-			content = $(
-				'<div class="spoiler-header">'+status_.spoiler_text+'<a class="btn-spoiler" href="#open-spoiler">'+MastodonApi.text.spoilerBtnClosed+'</a></div>'+
-				'<div class="spoiler-body toot-text">'+status_.content+'</div>' +
-				'<div class="toot-medias"></div>'
-			);
-		}
-		else {
-			content = $("<div class='toot-text'>" + status_.content + "</div>" + "<div class='toot-medias'></div>");
-		}
-
-		if(status_.reblog) {
-			// data from BOOSTED status
-
-			// toot date
-			date = prepareDateDisplay(status_.reblog.created_at);
-
-			// toot url
-			url = status_.reblog.url;
-
-			// boosted avatar
-			avatar = $("<div class='mt-avatar mt-avatar-boosted'></div>");
-			avatar.css(makeAvatarCss(status_.reblog.account.avatar));
-
-			// booster avatar
-			var boosterAvatar = $("<div class='mt-avatar mt-avatar-booster'></div>");
-			boosterAvatar.css(makeAvatarCss(status_.account.avatar));
-			avatar.append(boosterAvatar);
-
-			// user name and url
-			user = $("<div class='mt-user'><a href='"+status_.reblog.account.url+"'>"+status_.reblog.account.username+"</a></div>");
-		}
-		else {
-			// data from status
-
-			// toot date
-			date = prepareDateDisplay(status_.created_at);
-
-			// toot url
-			url = status_.url;
-
-			// avatar
-			avatar = $("<div class='mt-avatar'></div>");
-			avatar.css(makeAvatarCss(status_.account.avatar));
-
-			// user name and url
-			user = $("<div class='mt-user'><a href='"+status_.account.url+"'>"+status_.account.username+"</a></div>");
-		}
-
-		// format date
-		var timestamp = $("<div class='mt-date'><a href='"+url+"'>" + date + "</a></div>");
-
-		// sensitive content
-		if(status_.sensitive) {
-			timestamp.prepend('<span class="nsfw">' + MastodonApi.text.nsfwLabel + '</span>');
-		}
-
-		// status container
-		var toot = $("<div class='mt-toot'></div>");
-
-		// add to HTML
-
-		if(status_.reblog) {
-			toot.append("<div class='toot-retoot'>"+ this.boostsCountIcon +"</div>");
-		}
-
-		toot.append( avatar );
-		toot.append( user );
-		toot.append( timestamp );
-		toot.append( content );
-		$('.mt-body', this.widget).append(toot);
-
-		// media attachments? >>>
-		if(status_.media_attachments.length>0) {
-			var pic;
-			for(var picid in status_.media_attachments) {
-				pic = this.replaceMedias(content, status_.media_attachments[picid], status_.sensitive);
-				toot.append( pic );
-			}
-		}
-		// <<<
-
-		// stats (boosts + favourites counts) >>>
-		// data
-		var boostsCountIcon     = '<span class="toot-status-boosts">'     + this.boostsCountIcon     +":"+ status_.reblogs_count    + '</span>';
-		var favouritesCountIcon = '<span class="toot-status-favourites">' + this.favouritesCountIcon +":"+ status_.favourites_count + '</span>';
-
-		// html nodes
-		var statusBar = $('<div class="toot-status">' +
-			boostsCountIcon +
-			favouritesCountIcon +
-			'</div>');
-
-		toot.append( statusBar );
-		// <<<
-	};
-
-
-	/**
-	 * display toot time
-	 *
-	 * @author Azet
-	 * @param StringDate date_ (standard time format)
-	 * @return String
-	 */
-	var prepareDateDisplay = function(date_) {
-		var displayTime = "";
-
-		//var now  = new Date();
-		var date = new Date( date_ );
-
-		displayTime = date.getFullYear()
-			+"/"+(date.getMonth()+1)
-			+"/"+date.getDate()
-			+" "+date.getHours()
-			+":"+("0"+date.getMinutes()).replace(/0(\d{2})/, "$1")
-		;
-
-		return displayTime;
-	};
-
-
-	/**
-	 * simple method that sets CSS attributes for the avatar
-	 * @param string avatar_ url of the avatar picture to apply
-	 * @return object css properties to apply with jQuery.css method
-	 */
-	var makeAvatarCss = function(avatar_) {
-		return {
-			'background' : "white url('"+avatar_+"') 50% 50% no-repeat"
-			,'background-size' : 'contain'
-		};
-	};
-
-};
-
-
-/**
- * replace media (pictures) in text with an icon and appends a preview
- *
- * @author Azet
- * @param jquery_object content
- * @param object media_ (received with toot's JSON data)
- * @param bool nsfw_ indicates the media is not to be displayed
- * @return object modifier content object
- */
-MastodonApi.prototype.replaceMedias = function(content, media_, nsfw_) {
-	var nsfw = nsfw_ || false;
-
-	// icon in place of link in content
-	var icon = '<a href="'+media_.url+'" class="toot-media-link" target="_blank">'+this.picIcon+'</a>';
-	$('a[href="'+media_.text_url+'"]', content).replaceWith(icon);
-
-	if(nsfw) {
-		// pics hidden
-		var pic = '<div class="toot-media-preview toot-media-nsfw" style="background:black;" data-picpreview-url="'+media_.preview_url+'">' +
-			MastodonApi.text.nsfwViewMsg +
-			'</div>';
-	}
-	else {
-		// pics visible
-		var pic = '<div class="toot-media-preview" style="background-image:url('+media_.preview_url+');"></div>';
-	}
-
-	return pic;
-};
-