diff --git a/CHANGELOG b/CHANGELOG index d9110bb..73a403a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,3 +1,8 @@ +v4.0.3 - 16/02/2024 +- Delete duplicated JS/CSS files for examples +- Move docker file to root folder and update paths +- Add DOMContentLoad for container and body nodes + v4.0.1 - 08/02/2024 - Fix error in emojis present in user/profile title diff --git a/README.md b/README.md index 0b50efa..68e9e07 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ const myTimeline = new MastodonTimeline(); By default it will show a timeline with 20 posts from the instance [mastodon.social](https://mastodon.social/public/local) -ℹ️ If you are trying to use your timeline in a CMS such as Drupal, Wordpress, Joomla, etc... you will need to initialize your script when the whole page has loaded. In that case initialize the script by running: +ℹ️ If you are trying to initialize the script before `mastodon-timeline.js` is loaded, you will probably get such an error: "MastodonTimeline is not defined". To fix that initialize the script by running: ```js window.addEventListener("load", () => { @@ -216,7 +216,7 @@ You can pass more options/values to personalize your timeline: ### Examples -The folder `examples/` contains several demos in HTML to play with. Just download the folder and open each HTML file in your favorite browser. +The folder `examples/` contains several demos in HTML to play with. Download the full project and open each HTML file in your favorite browser. Also, you have a Docker file to perform your tests if needed. Simply inside the `examples/` folder run: diff --git a/dist/mastodon-timeline.min.css b/dist/mastodon-timeline.min.css index f331c69..3b9a799 100644 --- a/dist/mastodon-timeline.min.css +++ b/dist/mastodon-timeline.min.css @@ -1 +1 @@ -.mt-container,.mt-container[data-theme=light]{--mt-txt-max-lines:none;--mt-color-bg:#fff;--mt-color-bg-hover:#d9e1e8;--mt-color-line-gray:#c0cdd9;--mt-color-contrast-gray:#606984;--mt-color-content-txt:#000;--mt-color-link:#3a3bff;--mt-color-error-txt:#8b0000;--mt-color-btn-bg:#6364ff;--mt-color-btn-bg-hover:#563acc;--mt-color-btn-txt:#fff}.mt-container[data-theme=dark]{--mt-color-bg:#282c37;--mt-color-bg-hover:#313543;--mt-color-line-gray:#393f4f;--mt-color-contrast-gray:#606984;--mt-color-content-txt:#fff;--mt-color-link:#8c8dff;--mt-color-error-txt:#fe6c6c}.mt-container button{font:inherit}.mt-container a,.mt-container button{cursor:pointer}.mt-container{display:flex;flex-direction:column;height:100%;overflow-y:auto;position:relative;background-color:var(--mt-color-bg);scrollbar-color:var(--mt-color-contrast-gray) var(--mt-color-bg);scrollbar-width:auto}.mt-container::-webkit-scrollbar{width:.25rem;height:.25rem}.mt-container::-webkit-scrollbar-thumb{background-color:var(--mt-color-contrast-gray);border:none;border-radius:3rem}.mt-container::-webkit-scrollbar-thumb:active,.mt-container::-webkit-scrollbar-thumb:hover{background-color:var(--mt-color-contrast-gray)}.mt-container::-webkit-scrollbar-track{background-color:var(--mt-color-bg);border:none;border-radius:0}.mt-container::-webkit-scrollbar-corner,.mt-container::-webkit-scrollbar-track:active,.mt-container::-webkit-scrollbar-track:hover{background-color:var(--mt-color-bg)}.mt-container a,.mt-container a:active,.mt-container a:link{text-decoration:none;color:var(--mt-color-link)}.mt-container a:not(.mt-post-preview):hover{text-decoration:underline}.mt-body{padding:1rem clamp(.25rem,4vw,1rem);white-space:pre-wrap;word-wrap:break-word;margin-bottom:1rem}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-post{margin:.25rem;padding:1rem .5rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--mt-color-line-gray)}.mt-post:focus,.mt-post:hover{cursor:pointer;background-color:var(--mt-color-bg-hover)}.mt-post p:last-child{margin-bottom:0}.mt-post-avatar{margin-right:.75rem}.mt-post-avatar-standard{width:2.25rem;height:2.25rem}.mt-post-avatar-boosted{width:3rem;height:3rem;position:relative}.mt-post-avatar-image-big img{aspect-ratio:1/1;width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-post-avatar-image-small img{aspect-ratio:1/1;width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-post-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.mt-post-header-user{font-weight:600;margin-top:.5rem;padding-right:1rem}.mt-post-header-user>a{display:flex;align-items:flex-start;color:var(--mt-color-content-txt)!important;overflow-wrap:anywhere}.mt-post-header-date{font-size:.75rem;text-align:right;margin:.5rem 0 0 auto}.mt-post-header-date>a{color:var(--mt-color-contrast-gray)!important}.mt-post-txt{margin-bottom:1rem;color:var(--mt-color-content-txt)}.mt-post-txt .spoiler-txt-hidden{display:none}.mt-post-txt.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--mt-txt-max-lines);-webkit-box-orient:vertical}.mt-post-txt:not(.truncate) .ellipsis::after{content:"..."}.mt-post-txt blockquote{border-left:.25rem solid var(--mt-color-line-gray);margin-left:0;padding-left:.5rem}.mt-post-header-user .mt-custom-emoji,.mt-post-txt .mt-custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.mt-post-poll{margin-bottom:1rem;color:var(--mt-color-content-txt)}.mt-post-poll ul{list-style:none;padding:0;margin:0}.mt-post-poll ul li{font-size:.9rem;margin-bottom:.5rem}.mt-post-poll.mt-post-poll-expired ul li{color:var(--mt-color-contrast-gray)}.mt-post-poll ul li:not(:last-child){margin-bottom:.25rem}.mt-post-poll ul li:before{content:"◯";padding-right:.5rem}.mt-post-poll.mt-post-poll-expired ul li:before{content:"";padding-right:0}.mt-post-media{position:relative;overflow:hidden;margin-bottom:1rem}.mt-post-media-spoiler>.mt-post-media-play-icon,.mt-post-media-spoiler>audio,.mt-post-media-spoiler>img,.mt-post-media-spoiler>video{filter:blur(2rem);pointer-events:none}.mt-post-media>audio{width:100%;position:relative;z-index:1}.mt-post-media>img,.mt-post-media>video{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--mt-color-content-txt)}.mt-post-media.mt-loading-spinner .mt-post-media-play-icon{display:none}.mt-post-media-play-icon{display:flex;position:absolute;width:3rem;height:3rem;top:calc(50% - 1.5rem);left:calc(50% - 1.5rem);justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer}.mt-post-media-play-icon>svg{width:2.5rem;height:2.5rem;fill:var(--mt-color-bg);stroke:var(--mt-color-content-txt);stroke-width:1px}.mt-post-preview{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--mt-color-line-gray);border-radius:.5rem;color:var(--mt-color-link);font-size:.8rem;margin:1rem 0;overflow:hidden}.mt-post-preview-image{width:40%;align-self:stretch}.mt-post-preview-image img{display:block;width:100%;height:100%;object-fit:cover;color:var(--mt-color-content-txt)}.mt-post-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.mt-post-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.mt-post-preview-title{font-weight:600}.mt-post-counter-bar{display:flex;min-width:6rem;max-width:40rem;justify-content:space-between;color:var(--mt-color-contrast-gray)}.mt-post-counter-bar-favorites,.mt-post-counter-bar-reblog,.mt-post-counter-bar-replies{display:flex;font-size:.75rem;gap:.25rem;align-items:center;opacity:.5}.mt-post-counter-bar-favorites>svg,.mt-post-counter-bar-reblog>svg,.mt-post-counter-bar-replies>svg{width:1rem;fill:var(--mt-color-contrast-gray)}.mt-container .mt-btn-dark{display:flex;border-radius:.25rem;background-color:var(--mt-color-line-gray);border:0;color:var(--mt-color-content-txt);font-weight:600;font-size:.75rem;text-align:center;padding:0 .5rem;line-height:1.25rem;vertical-align:top}.mt-container .mt-btn-violet,.mt-container a.mt-btn-violet{display:flex;gap:.5rem;border-radius:.25rem;border:.5rem;padding:.5rem .75rem;font-size:1rem;font-weight:600;text-align:center;background-color:var(--mt-color-btn-bg);color:var(--mt-color-btn-txt)}.mt-container .mt-btn-violet:hover,.mt-container a.mt-btn-violet:hover{background-color:var(--mt-color-btn-bg-hover);text-decoration:none}.mt-post-txt .mt-btn-spoiler{display:inline-block}.mt-post-media.mt-loading-spinner>.mt-btn-spoiler{display:none}.mt-post-media>.mt-btn-spoiler{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.mt-error{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--mt-color-error-txt);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{width:100%;padding:1rem 0}.mt-error-message hr{color:var(--mt-color-line-gray)}.mt-body>.mt-loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.mt-loading-spinner{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'/%3E%3Cpath d='M64 6.69a57.3 57.3 0 1 1 0 114.61A57.3 57.3 0 0 1 6.69 64' fill='none' stroke='%23404040' stroke-width='12'/%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{display:flex;flex-flow:wrap;margin:auto auto 2rem auto;padding:0 1.5rem;gap:1.5rem;align-items:center;justify-content: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 +.mt-container,.mt-container[data-theme=light]{--mt-txt-max-lines:none;--mt-color-bg:#fff;--mt-color-bg-hover:#d9e1e8;--mt-color-line-gray:#c0cdd9;--mt-color-contrast-gray:#606984;--mt-color-content-txt:#000;--mt-color-link:#3a3bff;--mt-color-error-txt:#8b0000;--mt-color-btn-bg:#6364ff;--mt-color-btn-bg-hover:#563acc;--mt-color-btn-txt:#fff}.mt-container[data-theme=dark]{--mt-color-bg:#282c37;--mt-color-bg-hover:#313543;--mt-color-line-gray:#393f4f;--mt-color-contrast-gray:#606984;--mt-color-content-txt:#fff;--mt-color-link:#8c8dff;--mt-color-error-txt:#fe6c6c}.mt-container button{font:inherit}.mt-container a,.mt-container button{cursor:pointer}.mt-container{display:flex;flex-direction:column;height:100%;overflow-y:auto;position:relative;background-color:var(--mt-color-bg);scrollbar-color:var(--mt-color-contrast-gray) var(--mt-color-bg);scrollbar-width:auto}.mt-container::-webkit-scrollbar{width:.25rem;height:.25rem}.mt-container::-webkit-scrollbar-thumb{background-color:var(--mt-color-contrast-gray);border:none;border-radius:3rem}.mt-container::-webkit-scrollbar-thumb:active,.mt-container::-webkit-scrollbar-thumb:hover{background-color:var(--mt-color-contrast-gray)}.mt-container::-webkit-scrollbar-track{background-color:var(--mt-color-bg);border:none;border-radius:0}.mt-container::-webkit-scrollbar-corner,.mt-container::-webkit-scrollbar-track:active,.mt-container::-webkit-scrollbar-track:hover{background-color:var(--mt-color-bg)}.mt-container a,.mt-container a:active,.mt-container a:link{text-decoration:none;color:var(--mt-color-link)}.mt-container a:not(.mt-post-preview):hover{text-decoration:underline}.mt-body{padding:1rem clamp(.25rem,4vw,1rem);white-space:pre-wrap;word-wrap:break-word;margin-bottom:1rem}.mt-body .invisible{font-size:0;line-height:0;display:inline-block;width:0;height:0;position:absolute}.mt-post{margin:.25rem;padding:1rem .5rem;position:relative;min-height:3.75rem;background-color:transparent;border-bottom:1px solid var(--mt-color-line-gray)}.mt-post:focus,.mt-post:hover{cursor:pointer;background-color:var(--mt-color-bg-hover)}.mt-post p:last-child{margin-bottom:0}.mt-post-avatar{margin-right:.75rem}.mt-post-avatar-standard{width:2.25rem;height:2.25rem}.mt-post-avatar-boosted{width:3rem;height:3rem;position:relative}.mt-post-avatar-image-big img{aspect-ratio:1/1;width:2.25rem;height:2.25rem;border-radius:.25rem;overflow:hidden}.mt-post-avatar-image-small img{aspect-ratio:1/1;width:1.5rem;height:1.5rem;top:1.5rem;left:1.5rem;position:absolute;border-radius:.25rem;overflow:hidden}.mt-post-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.mt-post-header-user{font-weight:600;margin-top:.5rem;padding-right:1rem}.mt-post-header-user>a{display:flex;align-items:flex-start;color:var(--mt-color-content-txt)!important;overflow-wrap:anywhere}.mt-post-header-date{font-size:.75rem;text-align:right;margin:.5rem 0 0 auto}.mt-post-header-date>a{color:var(--mt-color-contrast-gray)!important}.mt-post-txt{margin-bottom:1rem;color:var(--mt-color-content-txt)}.mt-post-txt .spoiler-txt-hidden{display:none}.mt-post-txt.truncate{display:-webkit-box;overflow:hidden;-webkit-line-clamp:var(--mt-txt-max-lines);-webkit-box-orient:vertical}.mt-post-txt:not(.truncate) .ellipsis::after{content:"..."}.mt-post-txt blockquote{border-left:.25rem solid var(--mt-color-line-gray);margin-left:0;padding-left:.5rem}.mt-post-header-user .mt-custom-emoji,.mt-post-txt .mt-custom-emoji{height:1.5rem;min-width:1.5rem;margin-bottom:-.25rem;width:auto}.mt-post-poll{margin-bottom:1rem;color:var(--mt-color-content-txt)}.mt-post-poll ul{list-style:none;padding:0;margin:0}.mt-post-poll ul li{font-size:.9rem;margin-bottom:.5rem}.mt-post-poll.mt-post-poll-expired ul li{color:var(--mt-color-contrast-gray)}.mt-post-poll ul li:not(:last-child){margin-bottom:.25rem}.mt-post-poll ul li:before{content:"◯";padding-right:.5rem}.mt-post-poll.mt-post-poll-expired ul li:before{content:"";padding-right:0}.mt-post-media{position:relative;overflow:hidden;margin-bottom:1rem}.mt-post-media-spoiler>.mt-post-media-play-icon,.mt-post-media-spoiler>audio,.mt-post-media-spoiler>img,.mt-post-media-spoiler>video{filter:blur(2rem);pointer-events:none}.mt-post-media>audio{width:100%;position:relative;z-index:1}.mt-post-media>img,.mt-post-media>video{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--mt-color-content-txt)}.mt-post-media.mt-loading-spinner .mt-post-media-play-icon{display:none}.mt-post-media-play-icon{display:flex;position:absolute;width:3rem;height:3rem;top:calc(50% - 1.5rem);left:calc(50% - 1.5rem);justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer}.mt-post-media-play-icon>svg{width:2.5rem;height:2.5rem;fill:var(--mt-color-bg);stroke:var(--mt-color-content-txt);stroke-width:1px}.mt-post-preview{min-height:4rem;display:flex;flex-direction:row;border:1px solid var(--mt-color-line-gray);border-radius:.5rem;color:var(--mt-color-link);font-size:.8rem;margin:1rem 0;overflow:hidden}.mt-post-preview-image{width:40%;align-self:stretch}.mt-post-preview-image img{display:block;width:100%;height:100%;object-fit:cover;color:var(--mt-color-content-txt)}.mt-post-preview-noImage{width:40%;font-size:1.5rem;align-self:center;text-align:center}.mt-post-preview-content{width:60%;display:flex;align-self:center;flex-direction:column;padding:.5rem 1rem;gap:.5rem}.mt-post-preview-title{font-weight:600}.mt-post-counter-bar{display:flex;min-width:6rem;max-width:40rem;justify-content:space-between;color:var(--mt-color-contrast-gray)}.mt-post-counter-bar-favorites,.mt-post-counter-bar-reblog,.mt-post-counter-bar-replies{display:flex;font-size:.75rem;gap:.25rem;align-items:center;opacity:.5}.mt-post-counter-bar-favorites>svg,.mt-post-counter-bar-reblog>svg,.mt-post-counter-bar-replies>svg{width:1rem;fill:var(--mt-color-contrast-gray)}.mt-container .mt-btn-dark{display:flex;border-radius:.25rem;background-color:var(--mt-color-line-gray);border:0;color:var(--mt-color-content-txt);font-weight:600;font-size:.75rem;text-align:center;padding:0 .5rem;line-height:1.25rem;vertical-align:top}.mt-container .mt-btn-violet,.mt-container a.mt-btn-violet{display:flex;gap:.5rem;border-radius:.25rem;border:.5rem;padding:.5rem .75rem;font-size:1rem;font-weight:600;text-align:center;background-color:var(--mt-color-btn-bg);color:var(--mt-color-btn-txt)}.mt-container .mt-btn-violet:hover,.mt-container a.mt-btn-violet:hover{background-color:var(--mt-color-btn-bg-hover);text-decoration:none}.mt-post-txt .mt-btn-spoiler{display:inline-block}.mt-post-media.mt-loading-spinner>.mt-btn-spoiler{display:none}.mt-post-media>.mt-btn-spoiler{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%)}.mt-error{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;height:calc(100% - 3.5rem);width:calc(100% - 4.5rem);justify-content:center;align-items:center;color:var(--mt-color-error-txt);padding:.75rem;text-align:center}.mt-error-icon{font-size:2rem}.mt-error-message{width:100%;padding:1rem 0}.mt-error-message hr{color:var(--mt-color-line-gray)}.mt-body>.mt-loading-spinner{position:absolute;width:3rem;height:3rem;margin:auto;top:calc(50% - 1.5rem);right:calc(50% - 1.5rem)}.mt-loading-spinner{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'/%3E%3Cpath d='M64 6.69a57.3 57.3 0 1 1 0 114.61A57.3 57.3 0 0 1 6.69 64' fill='none' stroke='%23404040' stroke-width='12'/%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{display:flex;flex-flow:wrap;margin:auto auto 2rem auto;padding:0 1.5rem;gap:1.5rem;align-items:center;justify-content: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} diff --git a/dist/mastodon-timeline.min.js b/dist/mastodon-timeline.min.js index 34f83b8..6dd8988 100644 --- a/dist/mastodon-timeline.min.js +++ b/dist/mastodon-timeline.min.js @@ -1,7 +1,7 @@ /** * Mastodon embed feed timeline * @author idotj - * @version 4.0.1 + * @version 4.0.3 * @url https://gitlab.com/idotj/mastodon-embed-feed-timeline * @license GNU AGPLv3 -*/ "use strict";class MastodonTimeline{constructor(t={}){this.defaultSettings={mtContainerId:"mt-container",mtBody:"",instanceUrl:"https://mastodon.social",timelineType:"local",userId:"",profileName:"",hashtagName:"",spinnerClass:"mt-loading-spinner",defaultTheme:"auto",maxNbPostFetch:"20",maxNbPostShow:"20",hideUnlisted:!1,hideReblog:!1,hideReplies:!1,hideVideoPreview:!1,hidePreviewLink:!1,hideEmojos:!1,markdownBlockquote:!1,hideCounterBar:!1,txtMaxLines:"0",btnShowMore:"SHOW MORE",btnShowLess:"SHOW LESS",btnShowContent:"SHOW CONTENT",btnSeeMore:"See more posts at Mastodon",btnReload:"Refresh",fetchedData:{}},this.mtSettings={...this.defaultSettings,...t},this.mtSettings.mtBody=document.getElementById(this.mtSettings.mtContainerId).getElementsByClassName("mt-body")[0],this.mtInit()}mtInit(){this.#a(),this.#b("newTimeline")}mtUpdate(){this.mtSettings.mtBody.replaceChildren(),this.mtSettings.mtBody.insertAdjacentHTML("afterbegin",''),this.#b("updateTimeline")}mtColorTheme(t){document.getElementById(this.mtSettings.mtContainerId).setAttribute("data-theme",t)}#a(){if("auto"===this.mtSettings.defaultTheme){let t=window.matchMedia("(prefers-color-scheme: dark)");t.matches?this.mtColorTheme("dark"):this.mtColorTheme("light"),t.addEventListener("change",t=>{t.matches?this.mtColorTheme("dark"):this.mtColorTheme("light")})}else this.mtColorTheme(this.mtSettings.defaultTheme)}#c(){return new Promise((t,e)=>{async function s(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following Url:
"+t+"
Error status: "+e.status+"
Error message: "+e.statusText);let s=await e.json();return s}let i={};this.mtSettings.instanceUrl?"profile"===this.mtSettings.timelineType?this.mtSettings.userId?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/accounts/${this.mtSettings.userId}/statuses?limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your userId value","⚠️"):"hashtag"===this.mtSettings.timelineType?this.mtSettings.hashtagName?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/timelines/tag/${this.mtSettings.hashtagName}?limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your hashtagName value","⚠️"):"local"===this.mtSettings.timelineType?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/timelines/public?local=true&limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your timelineType value","⚠️"):this.#d("Please check your instanceUrl value","⚠️"),this.mtSettings.hideEmojos||(i.emojos=this.mtSettings.instanceUrl+"/api/v1/custom_emojis");let a=Object.entries(i).map(([t,i])=>s(i).then(e=>({[t]:e})).catch(s=>(e(Error("Something went wrong fetching data from: "+i)),this.#d(s.message),{[t]:[]})));Promise.all(a).then(e=>{this.mtSettings.fetchedData=e.reduce((t,e)=>({...t,...e}),{}),t()})})}async #b(e){await this.#c(),this.mtSettings.mtBody.replaceChildren();let s=0;for(let i in this.mtSettings.fetchedData.timeline)("public"==this.mtSettings.fetchedData.timeline[i].visibility||!this.mtSettings.hideUnlisted&&"unlisted"==this.mtSettings.fetchedData.timeline[i].visibility)&&(this.mtSettings.hideReblog&&this.mtSettings.fetchedData.timeline[i].reblog||this.mtSettings.hideReplies&&this.mtSettings.fetchedData.timeline[i].in_reply_to_id||sThis may be due to an incorrect configuration in the parameters or to filters applied (to hide certains type of posts)";this.#d(a,"\uD83D\uDCED")}else"newTimeline"===e?(this.#f(),this.#g(),this.#h()):"updateTimeline"===e?this.#f():this.#d("The function buildTimeline() was expecting a param")}#e(o,n){this.mtSettings.mtBody.insertAdjacentHTML("beforeend",this.#i(o,n))}#i(r,l){let m,d,h,c,g,p,u,v,b;r.reblog?(c=r.reblog.url,m='
'+this.#j(r.account.username)+' avatar
',h=r.reblog.account.display_name?r.reblog.account.display_name:r.reblog.account.username,this.mtSettings.hideEmojos||(h=this.#k(h,this.mtSettings.fetchedData.emojos)),d='
'+h+'
',g=r.reblog.created_at,b=r.reblog.replies_count,v=r.reblog.reblogs_count,u=r.reblog.favourites_count):(c=r.url,m='
',h=r.account.display_name?r.account.display_name:r.account.username,this.mtSettings.hideEmojos||(h=this.#k(h,this.mtSettings.fetchedData.emojos)),d='
'+h+'
',g=r.created_at,b=r.replies_count,v=r.reblogs_count,u=r.favourites_count),p=this.#l(g);let S='
",$="";"0"!==this.mtSettings.txtMaxLines&&($=" truncate",this.mtSettings.mtBody.parentNode.style.setProperty("--mt-txt-max-lines",this.mtSettings.txtMaxLines));let f="";f=""!==r.spoiler_text?'
'+r.spoiler_text+'
'+this.#m(r.content)+"
":r.reblog&&""!==r.reblog.content&&""!==r.reblog.spoiler_text?'
'+r.reblog.spoiler_text+'
'+this.#m(r.reblog.content)+"
":r.reblog&&""!==r.reblog.content&&""===r.reblog.spoiler_text?'
'+this.#m(r.reblog.content)+"
":'
'+this.#m(r.content)+"
";let _=[];if(r.media_attachments.length>0)for(let w in r.media_attachments)_.push(this.#n(r.media_attachments[w],r.sensitive));if(r.reblog&&r.reblog.media_attachments.length>0)for(let y in r.reblog.media_attachments)_.push(this.#n(r.reblog.media_attachments[y],r.reblog.sensitive));let x="";!this.mtSettings.hidePreviewLink&&r.card&&(x=this.#o(r.card));let N="";if(r.poll){let T="";for(let L in r.poll.options)T+="
  • "+r.poll.options[L].title+"
    • ";N='
    "}let k="";if(!this.mtSettings.hideCounterBar){let C='
    '+b+"
    ",E='
    '+v+"
    ",M='
    '+u+"
    ";k='
    '+C+E+M+"
    "}let B='
    '+m+d+S+"
    "+f+_.join("")+x+N+k+"
    ";return B}#m(P){let H=P;return H=this.#p(H),this.mtSettings.hideEmojos||(H=this.#k(H,this.mtSettings.fetchedData.emojos)),this.mtSettings.markdownBlockquote&&(H=this.#q(H,"

    >","

    ","

    ","

    ")),H}#p(j){let A=j.replaceAll('rel="tag"','rel="tag" target="_blank"');return A.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')}#q(I,D,U,F,R){if(!I.includes(D))return I;{let z=RegExp(D+"(.*?)"+U,"gi");return I.replace(z,F+"$1"+R)}}#j(q){return(q??"").replaceAll("&","&").replaceAll("<","<").replaceAll(">",">").replaceAll('"',""").replaceAll("'","'")}#k(O,Z){if(!O.includes(":"))return O;for(let V of Z){let J=RegExp(`\\:${V.shortcode}\\:`,"g");O=O.replace(J,`Emoji ${V.shortcode}`)}return O}#l(W){let Y=new Date(W),G=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][Y.getMonth()]+" "+Y.getDate()+", "+Y.getFullYear();return G}#n(K,Q){let X=Q||!1,tt=K.type,te="";return"image"===tt&&(te='
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    '),"audio"===tt&&(te=K.preview_url?'
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    ':'
    '+(X?'":"")+'
    '),("video"===tt||"gifv"===tt)&&(te=this.mtSettings.hideVideoPreview?'
    '+(X?'":"")+'
    ':'
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    '),te}#r(ts){let ti=ts.target.closest("[data-video-url]"),ta=ti.dataset.videoUrl;ti.replaceChildren(),ti.innerHTML=''}#s(to){let tn=to.target.nextSibling;"img"===tn.localName||"audio"===tn.localName||"video"===tn.localName?(to.target.parentNode.classList.remove("mt-post-media-spoiler"),to.target.style.display="none"):(tn.classList.contains("spoiler-txt-hidden")||tn.classList.contains("spoiler-txt-visible"))&&(to.target.textContent==this.mtSettings.btnShowMore?(tn.classList.remove("spoiler-txt-hidden"),tn.classList.add("spoiler-txt-visible"),to.target.setAttribute("aria-expanded","true"),to.target.textContent=this.mtSettings.btnShowLess):(tn.classList.remove("spoiler-txt-visible"),tn.classList.add("spoiler-txt-hidden"),to.target.setAttribute("aria-expanded","false"),to.target.textContent=this.mtSettings.btnShowMore))}#o=function(t){let e=''+(t.image?'
    '+this.#j(t.image_description)+'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(t.provider_name?''+this.#t(t.provider_name)+"":"")+''+t.title+""+(t.author_name?''+this.#t(t.author_name)+"":"")+"
    ";return e};#t(tr){let tl=new DOMParser,tm=tl.parseFromString(tr,"text/html");return tm.body.textContent}#h(){if(this.mtSettings.btnSeeMore||this.mtSettings.btnReload){this.mtSettings.mtBody.parentNode.insertAdjacentHTML("beforeend",'
    ');let td=document.getElementById(this.mtSettings.mtContainerId).getElementsByClassName("mt-footer")[0];if(this.mtSettings.btnSeeMore){let th="";"profile"===this.mtSettings.timelineType?this.mtSettings.profileName?th=this.mtSettings.profileName:this.#d("Please check your profileName value","⚠️"):"hashtag"===this.mtSettings.timelineType?th="tags/"+this.mtSettings.hashtagName:"local"===this.mtSettings.timelineType&&(th="public/local");let tc=''+this.mtSettings.btnSeeMore+"";td.insertAdjacentHTML("beforeend",tc)}if(this.mtSettings.btnReload){let tg='";td.insertAdjacentHTML("beforeend",tg);let tp=document.getElementById(this.mtSettings.mtContainerId).getElementsByClassName("btn-refresh")[0];tp.addEventListener("click",()=>{this.mtUpdate()})}}}#g(){this.mtSettings.mtBody.addEventListener("click",t=>{"article"!=t.target.localName&&t.target.offsetParent?.localName!="article"&&("img"!=t.target.localName||t.target.parentNode.getAttribute("data-video-url"))||this.#u(t),"button"==t.target.localName&&t.target.classList.contains("mt-btn-spoiler")&&this.#s(t),("mt-post-media-play-icon"==t.target.className||"svg"==t.target.localName&&"mt-post-media-play-icon"==t.target.parentNode.className||"path"==t.target.localName&&"mt-post-media-play-icon"==t.target.parentNode.parentNode.className||"img"==t.target.localName&&t.target.parentNode.getAttribute("data-video-url"))&&this.#r(t)}),this.mtSettings.mtBody.addEventListener("keydown",t=>{"Enter"===t.key&&"article"==t.target.localName&&this.#u(t)})}#u(tu){let tv=tu.target.closest(".mt-post").dataset.location;"a"!==tu.target.localName&&"span"!==tu.target.localName&&"button"!==tu.target.localName&&"time"!==tu.target.localName&&"mt-post-preview-noImage"!==tu.target.className&&"mt-post-avatar-image-big"!==tu.target.parentNode.className&&"mt-post-avatar-image-small"!==tu.target.parentNode.className&&"mt-post-preview-image"!==tu.target.parentNode.className&&"mt-post-preview"!==tu.target.parentNode.className&&tv&&window.open(tv,"_blank","noopener")}#f(){let tb=t=>{t.target.parentNode.classList.remove(this.mtSettings.spinnerClass),t.target.removeEventListener("load",tb),t.target.removeEventListener("error",tb)};this.mtSettings.mtBody.querySelectorAll(`.${this.mtSettings.spinnerClass} > img`).forEach(t=>{t.addEventListener("load",tb),t.addEventListener("error",tb)})}#d(tS,t$){throw this.mtSettings.mtBody.innerHTML='
    '+(t$||"❌")+'
    Oops, something\'s happened:
    '+tS+"
    ",this.mtSettings.mtBody.setAttribute("role","none"),Error("Stopping the script due to an error building the timeline.")}} +*/ "use strict";class MastodonTimeline{constructor(t={}){this.defaultSettings={mtContainerId:"mt-container",instanceUrl:"https://mastodon.social",timelineType:"local",userId:"",profileName:"",hashtagName:"",spinnerClass:"mt-loading-spinner",defaultTheme:"auto",maxNbPostFetch:"20",maxNbPostShow:"20",hideUnlisted:!1,hideReblog:!1,hideReplies:!1,hideVideoPreview:!1,hidePreviewLink:!1,hideEmojos:!1,markdownBlockquote:!1,hideCounterBar:!1,txtMaxLines:"0",btnShowMore:"SHOW MORE",btnShowLess:"SHOW LESS",btnShowContent:"SHOW CONTENT",btnSeeMore:"See more posts at Mastodon",btnReload:"Refresh"},this.mtSettings={...this.defaultSettings,...t},this.mtContainerNode="",this.mtBodyNode="",this.fetchedData={},this.mtInit()}onDOMContentLoaded(t){"undefined"!=typeof document&&("complete"===document.readyState||"interactive"===document.readyState)?t():"undefined"!=typeof document&&("complete"!==document.readyState||"interactive"!==document.readyState)&&document.addEventListener("DOMContentLoaded",t)}mtInit(){this.onDOMContentLoaded(()=>{this.mtContainerNode=document.getElementById(this.mtSettings.mtContainerId),this.mtBodyNode=this.mtContainerNode.getElementsByClassName("mt-body")[0],this.#a(),this.#b("newTimeline")})}mtUpdate(){this.onDOMContentLoaded(()=>{this.mtBodyNode.replaceChildren(),this.mtBodyNode.insertAdjacentHTML("afterbegin",''),this.#b("updateTimeline")})}mtColorTheme(t){this.onDOMContentLoaded(()=>{this.mtContainerNode.setAttribute("data-theme",t)})}#a(){if("auto"===this.mtSettings.defaultTheme){let t=window.matchMedia("(prefers-color-scheme: dark)");t.matches?this.mtColorTheme("dark"):this.mtColorTheme("light"),t.addEventListener("change",t=>{t.matches?this.mtColorTheme("dark"):this.mtColorTheme("light")})}else this.mtColorTheme(this.mtSettings.defaultTheme)}#c(){return new Promise((t,e)=>{async function s(t){let e=await fetch(t);if(!e.ok)throw Error("Failed to fetch the following Url:
    "+t+"
    Error status: "+e.status+"
    Error message: "+e.statusText);let s=await e.json();return s}let i={};this.mtSettings.instanceUrl?"profile"===this.mtSettings.timelineType?this.mtSettings.userId?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/accounts/${this.mtSettings.userId}/statuses?limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your userId value","⚠️"):"hashtag"===this.mtSettings.timelineType?this.mtSettings.hashtagName?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/timelines/tag/${this.mtSettings.hashtagName}?limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your hashtagName value","⚠️"):"local"===this.mtSettings.timelineType?i.timeline=`${this.mtSettings.instanceUrl}/api/v1/timelines/public?local=true&limit=${this.mtSettings.maxNbPostFetch}`:this.#d("Please check your timelineType value","⚠️"):this.#d("Please check your instanceUrl value","⚠️"),this.mtSettings.hideEmojos||(i.emojos=this.mtSettings.instanceUrl+"/api/v1/custom_emojis");let a=Object.entries(i).map(([t,i])=>s(i).then(e=>({[t]:e})).catch(s=>(e(Error("Something went wrong fetching data from: "+i)),this.#d(s.message),{[t]:[]})));Promise.all(a).then(e=>{this.mtSettings.fetchedData=e.reduce((t,e)=>({...t,...e}),{}),t()})})}async #b(e){await this.#c(),this.mtBodyNode.replaceChildren();let s=0;for(let i in this.mtSettings.fetchedData.timeline)("public"==this.mtSettings.fetchedData.timeline[i].visibility||!this.mtSettings.hideUnlisted&&"unlisted"==this.mtSettings.fetchedData.timeline[i].visibility)&&(this.mtSettings.hideReblog&&this.mtSettings.fetchedData.timeline[i].reblog||this.mtSettings.hideReplies&&this.mtSettings.fetchedData.timeline[i].in_reply_to_id||sThis may be due to an incorrect configuration in the parameters or to filters applied (to hide certains type of posts)";this.#d(a,"\uD83D\uDCED")}else"newTimeline"===e?(this.#f(),this.#g(),this.#h()):"updateTimeline"===e?this.#f():this.#d("The function buildTimeline() was expecting a param")}#e(o,n){this.mtBodyNode.insertAdjacentHTML("beforeend",this.#i(o,n))}#i(r,l){let m,d,h,c,p,g,u,v,b;r.reblog?(c=r.reblog.url,m='
    '+this.#j(r.account.username)+' avatar
    ',h=r.reblog.account.display_name?r.reblog.account.display_name:r.reblog.account.username,this.mtSettings.hideEmojos||(h=this.#k(h,this.mtSettings.fetchedData.emojos)),d='
    '+h+'
    ',p=r.reblog.created_at,b=r.reblog.replies_count,v=r.reblog.reblogs_count,u=r.reblog.favourites_count):(c=r.url,m='
    ',h=r.account.display_name?r.account.display_name:r.account.username,this.mtSettings.hideEmojos||(h=this.#k(h,this.mtSettings.fetchedData.emojos)),d='
    '+h+'
    ',p=r.created_at,b=r.replies_count,v=r.reblogs_count,u=r.favourites_count),g=this.#l(p);let S='
    ",$="";"0"!==this.mtSettings.txtMaxLines&&($=" truncate",this.mtBodyNode.parentNode.style.setProperty("--mt-txt-max-lines",this.mtSettings.txtMaxLines));let f="";f=""!==r.spoiler_text?'
    '+r.spoiler_text+'
    '+this.#m(r.content)+"
    ":r.reblog&&""!==r.reblog.content&&""!==r.reblog.spoiler_text?'
    '+r.reblog.spoiler_text+'
    '+this.#m(r.reblog.content)+"
    ":r.reblog&&""!==r.reblog.content&&""===r.reblog.spoiler_text?'
    '+this.#m(r.reblog.content)+"
    ":'
    '+this.#m(r.content)+"
    ";let _=[];if(r.media_attachments.length>0)for(let w in r.media_attachments)_.push(this.#n(r.media_attachments[w],r.sensitive));if(r.reblog&&r.reblog.media_attachments.length>0)for(let y in r.reblog.media_attachments)_.push(this.#n(r.reblog.media_attachments[y],r.reblog.sensitive));let N="";!this.mtSettings.hidePreviewLink&&r.card&&(N=this.#o(r.card));let x="";if(r.poll){let L="";for(let T in r.poll.options)L+="
  • "+r.poll.options[T].title+"
    • ";x='
      '+L+"
    "}let C="";if(!this.mtSettings.hideCounterBar){let M='
    '+b+"
    ",k='
    '+v+"
    ",E='
    '+u+"
    ";C='
    '+M+k+E+"
    "}let P='
    '+m+d+S+"
    "+f+_.join("")+N+x+C+"
    ";return P}#m(B){let H=B;return H=this.#p(H),this.mtSettings.hideEmojos||(H=this.#k(H,this.mtSettings.fetchedData.emojos)),this.mtSettings.markdownBlockquote&&(H=this.#q(H,"

    >","

    ","

    ","

    ")),H}#p(j){let A=j.replaceAll('rel="tag"','rel="tag" target="_blank"');return A.replaceAll('class="u-url mention"','class="u-url mention" target="_blank"')}#q(D,U,I,O,F){if(!D.includes(U))return D;{let R=RegExp(U+"(.*?)"+I,"gi");return D.replace(R,O+"$1"+F)}}#j(z){return(z??"").replaceAll("&","&").replaceAll("<","<").replaceAll(">",">").replaceAll('"',""").replaceAll("'","'")}#k(q,Z){if(!q.includes(":"))return q;for(let V of Z){let J=RegExp(`\\:${V.shortcode}\\:`,"g");q=q.replace(J,`Emoji ${V.shortcode}`)}return q}#l(W){let Y=new Date(W),G=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",][Y.getMonth()]+" "+Y.getDate()+", "+Y.getFullYear();return G}#n(K,Q){let X=Q||!1,tt=K.type,te="";return"image"===tt&&(te='
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    '),"audio"===tt&&(te=K.preview_url?'
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    ':'
    '+(X?'":"")+'
    '),("video"===tt||"gifv"===tt)&&(te=this.mtSettings.hideVideoPreview?'
    '+(X?'":"")+'
    ':'
    '+(X?'":"")+''+(K.description?this.#j(K.description):
    '),te}#r(ts){let ti=ts.target.closest("[data-video-url]"),ta=ti.dataset.videoUrl;ti.replaceChildren(),ti.innerHTML=''}#s(to){let tn=to.target.nextSibling;"img"===tn.localName||"audio"===tn.localName||"video"===tn.localName?(to.target.parentNode.classList.remove("mt-post-media-spoiler"),to.target.style.display="none"):(tn.classList.contains("spoiler-txt-hidden")||tn.classList.contains("spoiler-txt-visible"))&&(to.target.textContent==this.mtSettings.btnShowMore?(tn.classList.remove("spoiler-txt-hidden"),tn.classList.add("spoiler-txt-visible"),to.target.setAttribute("aria-expanded","true"),to.target.textContent=this.mtSettings.btnShowLess):(tn.classList.remove("spoiler-txt-visible"),tn.classList.add("spoiler-txt-hidden"),to.target.setAttribute("aria-expanded","false"),to.target.textContent=this.mtSettings.btnShowMore))}#o(tr){let tl=''+(tr.image?'
    '+this.#j(tr.image_description)+'
    ':'
    \uD83D\uDCC4
    ')+'
    '+(tr.provider_name?''+this.#t(tr.provider_name)+"":"")+''+tr.title+""+(tr.author_name?''+this.#t(tr.author_name)+"":"")+"
    ";return tl}#t(tm){let td=new DOMParser,th=td.parseFromString(tm,"text/html");return th.body.textContent}#h(){if(this.mtSettings.btnSeeMore||this.mtSettings.btnReload){this.mtBodyNode.parentNode.insertAdjacentHTML("beforeend",'
    ');let tc=this.mtContainerNode.getElementsByClassName("mt-footer")[0];if(this.mtSettings.btnSeeMore){let tp="";"profile"===this.mtSettings.timelineType?this.mtSettings.profileName?tp=this.mtSettings.profileName:this.#d("Please check your profileName value","⚠️"):"hashtag"===this.mtSettings.timelineType?tp="tags/"+this.mtSettings.hashtagName:"local"===this.mtSettings.timelineType&&(tp="public/local");let tg=''+this.mtSettings.btnSeeMore+"";tc.insertAdjacentHTML("beforeend",tg)}if(this.mtSettings.btnReload){let tu='";tc.insertAdjacentHTML("beforeend",tu);let tv=this.mtContainerNode.getElementsByClassName("btn-refresh")[0];tv.addEventListener("click",()=>{this.mtUpdate()})}}}#g(){this.mtBodyNode.addEventListener("click",t=>{"article"!=t.target.localName&&t.target.offsetParent?.localName!="article"&&("img"!=t.target.localName||t.target.parentNode.getAttribute("data-video-url"))||this.#u(t),"button"==t.target.localName&&t.target.classList.contains("mt-btn-spoiler")&&this.#s(t),("mt-post-media-play-icon"==t.target.className||"svg"==t.target.localName&&"mt-post-media-play-icon"==t.target.parentNode.className||"path"==t.target.localName&&"mt-post-media-play-icon"==t.target.parentNode.parentNode.className||"img"==t.target.localName&&t.target.parentNode.getAttribute("data-video-url"))&&this.#r(t)}),this.mtBodyNode.addEventListener("keydown",t=>{"Enter"===t.key&&"article"==t.target.localName&&this.#u(t)})}#u(tb){let tS=tb.target.closest(".mt-post").dataset.location;"a"!==tb.target.localName&&"span"!==tb.target.localName&&"button"!==tb.target.localName&&"time"!==tb.target.localName&&"mt-post-preview-noImage"!==tb.target.className&&"mt-post-avatar-image-big"!==tb.target.parentNode.className&&"mt-post-avatar-image-small"!==tb.target.parentNode.className&&"mt-post-preview-image"!==tb.target.parentNode.className&&"mt-post-preview"!==tb.target.parentNode.className&&tS&&window.open(tS,"_blank","noopener")}#f(){let t$=t=>{t.target.parentNode.classList.remove(this.mtSettings.spinnerClass),t.target.removeEventListener("load",t$),t.target.removeEventListener("error",t$)};this.mtBodyNode.querySelectorAll(`.${this.mtSettings.spinnerClass} > img`).forEach(t=>{t.addEventListener("load",t$),t.addEventListener("error",t$)})}#d(tf,t_){throw this.mtBodyNode.innerHTML='
    '+(t_||"❌")+'
    Oops, something\'s happened:
    '+tf+"
    ",this.mtBodyNode.setAttribute("role","none"),Error("Stopping the script due to an error building the timeline.")}} diff --git a/examples/docker-compose.yml b/docker-compose.yml similarity index 50% rename from examples/docker-compose.yml rename to docker-compose.yml index ca24ec8..5b7092b 100644 --- a/examples/docker-compose.yml +++ b/docker-compose.yml @@ -12,13 +12,13 @@ services: - "8080:80" - "8443:443" volumes: - - ./css/mastodon-timeline.css:/var/www/css/mastodon-timeline.css - - ./js/mastodon-timeline.js:/var/www/js/mastodon-timeline.js - - ./local-timeline.html:/var/www/index.html - - ./profile-timeline.html:/var/www/profile-timeline.html - - ./hashtag-timeline.html:/var/www/hashtag-timeline.html - - ./theme-timeline.html:/var/www/theme-timeline.html - - ./multiple-timelines.html:/var/www/multiple-timelines.html + - ./src/mastodon-timeline.css:/var/www/src/mastodon-timeline.css + - ./src/mastodon-timeline.js:/var/www/src/mastodon-timeline.js + - ./examples/local-timeline.html:/var/www/index.html + - ./examples/profile-timeline.html:/var/www/profile-timeline.html + - ./examples/hashtag-timeline.html:/var/www/hashtag-timeline.html + - ./examples/theme-timeline.html:/var/www/theme-timeline.html + - ./examples/multiple-timelines.html:/var/www/multiple-timelines.html environment: - PORT=80 - SERVER_NAME=mastodon-timeline diff --git a/examples/css/mastodon-timeline.css b/examples/css/mastodon-timeline.css deleted file mode 100644 index 44a5627..0000000 --- a/examples/css/mastodon-timeline.css +++ /dev/null @@ -1,462 +0,0 @@ -/* Mastodon embed feed timeline v4.0.1 */ -/* More info at: */ -/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ - -/* Variables */ -.mt-container, -.mt-container[data-theme="light"] { - --mt-txt-max-lines: none; - --mt-color-bg: #fff; - --mt-color-bg-hover: #d9e1e8; - --mt-color-line-gray: #c0cdd9; - --mt-color-contrast-gray: #606984; - --mt-color-content-txt: #000; - --mt-color-link: #3a3bff; - --mt-color-error-txt: #8b0000; - --mt-color-btn-bg: #6364ff; - --mt-color-btn-bg-hover: #563acc; - --mt-color-btn-txt: #fff; -} -.mt-container[data-theme="dark"] { - --mt-color-bg: #282c37; - --mt-color-bg-hover: #313543; - --mt-color-line-gray: #393f4f; - --mt-color-contrast-gray: #606984; - --mt-color-content-txt: #fff; - --mt-color-link: #8c8dff; - --mt-color-error-txt: #fe6c6c; -} - -/* Reset CSS */ -.mt-container button { - font: inherit; -} -.mt-container a, -.mt-container button { - cursor: pointer; -} - -/* Main container */ -.mt-container { - display: flex; - flex-direction: column; - height: 100%; - overflow-y: auto; - position: relative; - background-color: var(--mt-color-bg); - scrollbar-color: var(--mt-color-contrast-gray) var(--mt-color-bg); - scrollbar-width: auto; -} -.mt-container::-webkit-scrollbar { - width: 0.25rem; - height: 0.25rem; -} -.mt-container::-webkit-scrollbar-thumb { - background-color: var(--mt-color-contrast-gray); - border: none; - border-radius: 3rem; -} -.mt-container::-webkit-scrollbar-thumb:hover, -.mt-container::-webkit-scrollbar-thumb:active { - background-color: var(--mt-color-contrast-gray); -} -.mt-container::-webkit-scrollbar-track { - background-color: var(--mt-color-bg); - border: none; - border-radius: 0; -} -.mt-container::-webkit-scrollbar-track:hover, -.mt-container::-webkit-scrollbar-track:active, -.mt-container::-webkit-scrollbar-corner { - background-color: var(--mt-color-bg); -} -.mt-container a:link, -.mt-container a:active, -.mt-container a { - text-decoration: none; - color: var(--mt-color-link); -} -.mt-container a:not(.mt-post-preview):hover { - text-decoration: underline; -} -.mt-body { - padding: 1rem clamp(0.25rem, 4vw, 1rem); - white-space: pre-wrap; - word-wrap: break-word; - margin-bottom: 1rem; -} -.mt-body .invisible { - font-size: 0; - line-height: 0; - display: inline-block; - width: 0; - height: 0; - position: absolute; -} - -/* Post container */ -.mt-post { - margin: 0.25rem; - padding: 1rem 0.5rem; - position: relative; - min-height: 3.75rem; - background-color: transparent; - border-bottom: 1px solid var(--mt-color-line-gray); -} -.mt-post:hover, -.mt-post:focus { - cursor: pointer; - background-color: var(--mt-color-bg-hover); -} -.mt-post p:last-child { - margin-bottom: 0; -} - -/* User avatar */ -.mt-post-avatar { - margin-right: 0.75rem; -} -.mt-post-avatar-standard { - width: 2.25rem; - height: 2.25rem; -} -.mt-post-avatar-boosted { - width: 3rem; - height: 3rem; - position: relative; -} -.mt-post-avatar-image-big img { - aspect-ratio: 1/1; - width: 2.25rem; - height: 2.25rem; - border-radius: 0.25rem; - overflow: hidden; -} -.mt-post-avatar-image-small img { - aspect-ratio: 1/1; - width: 1.5rem; - height: 1.5rem; - top: 1.5rem; - left: 1.5rem; - position: absolute; - border-radius: 0.25rem; - overflow: hidden; -} - -/* User name and date */ -.mt-post-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 1rem; -} -.mt-post-header-user { - font-weight: 600; - margin-top: 0.5rem; - padding-right: 1rem; -} -.mt-post-header-user > a { - display: flex; - align-items: flex-start; - color: var(--mt-color-content-txt) !important; - overflow-wrap: anywhere; -} -.mt-post-header-date { - font-size: 0.75rem; - text-align: right; - margin: 0.5rem 0 0 auto; -} -.mt-post-header-date > a { - color: var(--mt-color-contrast-gray) !important; -} - -/* Text */ -.mt-post-txt { - margin-bottom: 1rem; - color: var(--mt-color-content-txt); -} -.mt-post-txt .spoiler-txt-hidden { - display: none; -} -.mt-post-txt.truncate { - display: -webkit-box; - overflow: hidden; - -webkit-line-clamp: var(--mt-txt-max-lines); - -webkit-box-orient: vertical; -} -.mt-post-txt:not(.truncate) .ellipsis::after { - content: "..."; -} -.mt-post-txt blockquote { - border-left: 0.25rem solid var(--mt-color-line-gray); - margin-left: 0; - padding-left: 0.5rem; -} -.mt-post-header-user .mt-custom-emoji, -.mt-post-txt .mt-custom-emoji { - height: 1.5rem; - min-width: 1.5rem; - margin-bottom: -0.25rem; - width: auto; -} - -/* Poll */ -.mt-post-poll { - margin-bottom: 1rem; - color: var(--mt-color-content-txt); -} -.mt-post-poll ul { - list-style: none; - padding: 0; - margin: 0; -} -.mt-post-poll ul li { - font-size: 0.9rem; - margin-bottom: 0.5rem; -} -.mt-post-poll.mt-post-poll-expired ul li { - color: var(--mt-color-contrast-gray); -} -.mt-post-poll ul li:not(:last-child) { - margin-bottom: 0.25rem; -} -.mt-post-poll ul li:before { - content: "◯"; - padding-right: 0.5rem; -} -.mt-post-poll.mt-post-poll-expired ul li:before { - content: ""; - padding-right: 0; -} - -/* Medias */ -.mt-post-media { - position: relative; - overflow: hidden; - margin-bottom: 1rem; -} -.mt-post-media-spoiler > img, -.mt-post-media-spoiler > audio, -.mt-post-media-spoiler > video, -.mt-post-media-spoiler > .mt-post-media-play-icon { - filter: blur(2rem); - pointer-events: none; -} -.mt-post-media > audio { - width: 100%; - position: relative; - z-index: 1; -} -.mt-post-media > img, -.mt-post-media > video { - width: 100%; - height: 100%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - color: var(--mt-color-content-txt); -} -.mt-post-media.mt-loading-spinner .mt-post-media-play-icon { - display: none; -} -.mt-post-media-play-icon { - display: flex; - position: absolute; - width: 3rem; - height: 3rem; - top: calc(50% - 1.5rem); - left: calc(50% - 1.5rem); - justify-content: center; - align-items: center; - background-color: transparent; - border: none; - cursor: pointer; -} -.mt-post-media-play-icon > svg { - width: 2.5rem; - height: 2.5rem; - fill: var(--mt-color-bg); - stroke: var(--mt-color-content-txt); - stroke-width: 1px; -} - -/* Preview link */ -.mt-post-preview { - min-height: 4rem; - display: flex; - flex-direction: row; - border: 1px solid var(--mt-color-line-gray); - border-radius: 0.5rem; - color: var(--mt-color-link); - font-size: 0.8rem; - margin: 1rem 0; - overflow: hidden; -} -.mt-post-preview-image { - width: 40%; - align-self: stretch; -} -.mt-post-preview-image img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - color: var(--mt-color-content-txt); -} -.mt-post-preview-noImage { - width: 40%; - font-size: 1.5rem; - align-self: center; - text-align: center; -} -.mt-post-preview-content { - width: 60%; - display: flex; - align-self: center; - flex-direction: column; - padding: 0.5rem 1rem; - gap: 0.5rem; -} -.mt-post-preview-title { - font-weight: 600; -} - -/* Counter bar */ -.mt-post-counter-bar { - display: flex; - min-width: 6rem; - max-width: 40rem; - justify-content: space-between; - color: var(--mt-color-contrast-gray); -} -.mt-post-counter-bar-replies, -.mt-post-counter-bar-reblog, -.mt-post-counter-bar-favorites { - display: flex; - font-size: 0.75rem; - gap: 0.25rem; - align-items: center; - opacity: 0.5; -} -.mt-post-counter-bar-replies > svg, -.mt-post-counter-bar-reblog > svg, -.mt-post-counter-bar-favorites > svg { - width: 1rem; - fill: var(--mt-color-contrast-gray); -} - -/* Buttons */ -.mt-container .mt-btn-dark { - display: flex; - border-radius: 0.25rem; - background-color: var(--mt-color-line-gray); - border: 0; - color: var(--mt-color-content-txt); - font-weight: 600; - font-size: 0.75rem; - text-align: center; - padding: 0 0.5rem; - line-height: 1.25rem; - - vertical-align: top; -} -.mt-container .mt-btn-violet, -.mt-container a.mt-btn-violet { - display: flex; - gap: 0.5rem; - border-radius: 0.25rem; - border: 0.5rem; - padding: 0.5rem 0.75rem; - font-size: 1rem; - font-weight: 600; - text-align: center; - background-color: var(--mt-color-btn-bg); - color: var(--mt-color-btn-txt); -} -.mt-container .mt-btn-violet:hover, -.mt-container a.mt-btn-violet:hover { - background-color: var(--mt-color-btn-bg-hover); - text-decoration: none; -} -.mt-post-txt .mt-btn-spoiler { - display: inline-block; -} -.mt-post-media.mt-loading-spinner > .mt-btn-spoiler { - display: none; -} -.mt-post-media > .mt-btn-spoiler { - position: absolute; - top: 50%; - left: 50%; - z-index: 2; - transform: translate(-50%, -50%); -} - -/* Error */ -.mt-error { - position: absolute; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - height: calc(100% - 3.5rem); - width: calc(100% - 4.5rem); - justify-content: center; - align-items: center; - color: var(--mt-color-error-txt); - padding: 0.75rem; - text-align: center; -} -.mt-error-icon { - font-size: 2rem; -} -.mt-error-message { - width: 100%; - padding: 1rem 0; -} -.mt-error-message hr { - color: var(--mt-color-line-gray); -} - -/* Loading spinner */ -.mt-body > .mt-loading-spinner { - position: absolute; - width: 3rem; - height: 3rem; - margin: auto; - top: calc(50% - 1.5rem); - right: calc(50% - 1.5rem); -} -.mt-loading-spinner { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='1000ms' repeatCount='indefinite'/%3E%3Cpath d='M64 6.69a57.3 57.3 0 1 1 0 114.61A57.3 57.3 0 0 1 6.69 64' fill='none' stroke='%23404040' stroke-width='12'/%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% - 0.5rem)); -} - -/* Footer */ -.mt-footer { - display: flex; - flex-flow: wrap; - margin: auto auto 2rem auto; - padding: 0 1.5rem; - gap: 1.5rem; - align-items: center; - justify-content: center; -} - -/* Hidden elements */ -.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; -} diff --git a/examples/hashtag-timeline.html b/examples/hashtag-timeline.html index 57f651a..92acf08 100644 --- a/examples/hashtag-timeline.html +++ b/examples/hashtag-timeline.html @@ -8,7 +8,7 @@ - +