Mastodon-Embed-Feed-Timeline Demo

** BLOG LINKED **

by Chris Vitalos

HTML

<script src="https://clvgt12.github.io/js/mastodon-timeline-4.0.3-1.js"></script>
<!DOCTYPE html>
<html lang="en" data-theme="">

  <head>
    <meta charset="utf-8" />
    <title>Mastodon embed timeline</title>
    <meta name="author" content="clvgt12" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <style>
      html {
        height: 100%;
      }

      body {
        height: 100%;
        font-size: 16px;
        font-family: sans-serif;
        background-color: #444;
      }

      h1 {
        font-family: serif;
        color: white;
        font-size: 24px;
      }

      .dummy-wrapper-timeline {
        width: 100%;
        max-width: 30rem;
        height: calc(100% - 4rem);
        margin: 2rem auto;
      }

      .mt-post-preview-provider,
      .mt-post-preview-author,
      .mt-post-preview-title {
        margin: 0 1rem 0 1rem;
      }

    </style>
  </head>

  <body>
    <h1>
      Recent Posts
    </h1>
    <div class="dummy-wrapper-timeline">
      <!-- Mastodon Timeline -->
      <div id="mt-container" class="mt-container">
        <div class="mt-body" role="feed">
          <div class="mt-loading-spinner"></div>
        </div>
      </div>
    </div>

    <!-- JavaScript -->
    <script>
      const myTimeline = new MastodonTimeline({
        instanceUrl: "https://indieweb.social",
        timelineType: "profile",
        userId: "109429985620687299",
        profileName: "@chrisvitalos",
        markdownBlockquote: true,
        hideReplies: true
      });

    </script>

  </body>

</html>

CSS

/* Mastodon embed feed timeline v4.0.3-1*/
/* More info at: */
/* https://gitlab.com/clvgt12/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: #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;
}

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

JavaScript

/**
 * Mastodon embed feed timeline
 * @author clvgt12
 * @version 4.0.3-1
 * @url https://gitlab.com/clvgt12/mastodon-embed-feed-timeline
 * @license GNU AGPLv3
 */

/**
 * Mastodon embed feed timeline
 * @author idotj
 * @version 4.0.3
 * @url https://gitlab.com/idotj/mastodon-embed-feed-timeline
 * @license GNU AGPLv3
 */
"use strict";

class MastodonTimeline {
  constructor(customSettings = {}) {
    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: false,
      hideReblog: false,
      hideReplies: false,
      hideVideoPreview: false,
      hidePreviewLink: false,
      hideEmojos: false,
      markdownBlockquote: false,
      hideCounterBar: false,
      txtMaxLines: "0",
      btnShowMore: "SHOW MORE",
      btnShowLess: "SHOW LESS",
      btnShowContent: "SHOW CONTENT",
      btnSeeMore: "See more posts at Mastodon",
      btnReload: "Refresh",
    };

    this.mtSettings = {
      ...this.defaultSettings,
      ...customSettings
    };

    this.mtContainerNode = "";
    this.mtBodyNode = "";
    this.fetchedData = {};

    this.mtInit();
  }

  /**
   * Trigger callback when DOM loaded or complete
   * @param {function} c Callback executed
   */
  onDOMContentLoaded(c) {
    if (
      typeof document !== "undefined" &&
      (document.readyState === "complete" ||
        document.readyState === "interactive")
    ) {
      c();
    } else if (
      typeof document !== "undefined" &&
      (document.readyState !== "complete" ||
        document.readyState !== "interactive")
    ) {
      document.addEventListener("DOMContentLoaded", c);
    }
  }

  /**
   * Initialize and build the timeline
   */
  mtInit() {
    // console.log("Creating Mastodon timeline with...