kunjinkao/mastodon-embed-timeline
1
0
Fork 0
forked from mirror/mastodon-embed-timeline
Code Pull Requests Activity

Add feature, show local timeline

Browse Source
This commit is contained in:
idotj 2023-02-04 19:17:57 +01:00
parent 01f0e7c6b9
commit 7ad1c14fe8
4 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG
View File

@ -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

6
README.md
View File

@ -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.
For that, edit the the JS file *mastodon-timeline.js* and at the beginning replace the following values:
The next step will be to setup the timeline.
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:

10
src/mastodon-timeline.css
View File

@ -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 */

49
src/mastodon-timeline.js
View File

@ -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.PROFILE_NAME = params_.profile_name;
this.USER_ID = params_.user_id || '';
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
fetch(this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT, {
method: 'get',
})
.then(response => response.json())
// Get request (user toots or local timeline toots)
if (this.USER_ID) {
requestURL = this.INSTANCE_URI + '/api/v1/accounts/' + this.USER_ID + '/statuses?limit=' + this.TOOTS_LIMIT;
} else {
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
if (mapi.BTN_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>');
// Insert link after last toot to visit Mastodon page
if (mapi.LINK_SEE_MORE) {
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