Add feature, show local timeline

CHANGELOG

@@ -1,3 +1,6 @@
+v3.2.1 - 04/02/2023
+- Add feature, show local feed insted of user feed
+
 v3.2.0 - 04/02/2023
 - Add version
 

README.md

@@ -33,14 +33,14 @@ Then copy the following html structure:
 
 Great, you have a Mastodon timeline running in your page.
 
-The next step will be to setup the timeline with your account info.
+The next step will be to setup the timeline.  
-For that, edit the the JS file *mastodon-timeline.js*  and at the beginning replace the following values:
+Edit the the JS file *mastodon-timeline.js* and at the beginning replace the following values:
-
 ```
     instance_uri:   'Your Mastodon instance',
     user_id:        'Your user ID on Mastodon instance',
     profile_name:   'Your user name on Mastodon instance',
 ```
+Leave `user_id` and `profile_name` empty if you just want to show your instance local timeline.
 
 If you don't know your user_id, you have two ways to get it:
 

src/mastodon-timeline.css

@@ -1,4 +1,4 @@
-/* Mastodon embed feed timeline  v3.2.0 */
+/* Mastodon embed feed timeline  v3.2.1 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
 
@@ -122,10 +122,14 @@
 }
 
 .mt-error {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
   color: #8b0000;
-  background: #f1a0ad;
-  margin: 5px;
   padding: 10px;
+  text-align: center;
 }
 
 /* Poll */

src/mastodon-timeline.js

@@ -1,4 +1,4 @@
-// Mastodon embed feed timeline v3.2.0
+// Mastodon embed feed timeline v3.2.1
 // More info at:
 // https://gitlab.com/idotj/mastodon-embed-feed-timeline
 
@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
 		hide_reblog: false,
 		hide_replies: false,
 		text_max_lines: '0',
-		btn_see_more: 'See more posts at Mastodon'
+		link_see_more: 'See more posts at Mastodon'
 	});
 });
 
@@ -21,13 +21,13 @@ let MastodonApi = function (params_) {
 
 	// Endpoint access settings
 	this.INSTANCE_URI = params_.instance_uri;
-	this.USER_ID = params_.user_id;
+	this.USER_ID = params_.user_id || '';
-	this.PROFILE_NAME = params_.profile_name;
+	this.PROFILE_NAME = this.USER_ID ? params_.profile_name : '';
 	this.TOOTS_LIMIT = params_.toots_limit || '20';
 	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.TEXT_MAX_LINES = params_.text_max_lines || '0';
-	this.BTN_SEE_MORE = params_.btn_see_more;
+	this.LINK_SEE_MORE = params_.link_see_more;
 
 	// Target selector
 	this.mtBodyContainer = document.getElementById(params_.container_body_id);
@@ -81,12 +81,27 @@ let MastodonApi = function (params_) {
 // Listing toots function
 MastodonApi.prototype.getToots = function () {
 	let mapi = this;
+	let requestURL = '';
 
-	// Get request
+	// Get request (user toots or local timeline toots)
-	fetch(this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT, {
+	if (this.USER_ID) {
-		method: 'get',
+		requestURL = this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT;
-	})
+	} else {
-		.then(response => response.json())
+		requestURL = this.INSTANCE_URI + '/api/v1/timelines/public?limit=' + this.TOOTS_LIMIT;
+	}
+
+	fetch(requestURL, { method: 'get' })
+		.then(
+			response => {
+				if (response.ok) {
+					return response.json()
+				} else if (response.status === 404) {
+					throw new Error("404 Not found", { cause: response });
+				} else {
+					throw new Error(response.status);
+				}
+			}
+		)
 		.then(jsonData => {
 			// console.log('jsonData: ', jsonData);
 
@@ -112,13 +127,19 @@ MastodonApi.prototype.getToots = function () {
 				allHashtags[j].rel = "tag nofollow noopener noreferrer";
 			}
 
-			// Insert button after last toot to visit account page
+			// Insert link after last toot to visit Mastodon page
-			if (mapi.BTN_SEE_MORE) {
+			if (mapi.LINK_SEE_MORE) {
-				this.mtBodyContainer.insertAdjacentHTML('beforeend', '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.BTN_SEE_MORE + '</a></div>');
+				let linkHtml = '';
+				if (this.USER_ID) {
+					linkHtml = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/' + mapi.PROFILE_NAME + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
+				} else {
+					linkHtml = '<div class="mt-seeMore"><a href="' + mapi.INSTANCE_URI + '/public/local' + '" class="btn" target="_blank" rel="nofollow noopener noreferrer">' + mapi.LINK_SEE_MORE + '</a></div>';
+				}
+				this.mtBodyContainer.insertAdjacentHTML('beforeend', linkHtml);
 			}
 		})
 		.catch(err => {
-			this.mtBodyContainer.innerHTML = '<div class="d-flex h-100"><div class="w-100 my-auto text-center">✖️<br/>Request Failed:<br/>' + err + '</div></div>';
+			this.mtBodyContainer.innerHTML = '<div class="mt-error">✖️<br/><strong>Request Failed:</strong><br/>' + err + '</div>';
 		});
 
 	// Inner function to add each toot content in container