i-jot-j upstream Mastodon-Embed-Feed-Timeline Demo

Upstream Mastodon timeline

by Chris Vitalos

HTML

<!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: white;
      }

			h1 {
				font-family: serif;
				color: black;
				font-size: 24px;
			}
			
      .dummy-container {
        width: 100%;
        max-width: 30rem;
        height: calc(100% - 4rem);
        margin: 2rem auto;
      }

    </style>
  </head>

  <body>
    <h1>
      Recent Posts
    </h1>
    <div class="dummy-container">
      <div id="mt-timeline" class="mt-timeline">
        <div id="mt-body" class="mt-body">
          <div class="loading-spinner"></div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        // Create Mastodon timeline

        let mapi = new MastodonApi({
          container_id: 'mt-timeline',
          container_body_id: 'mt-body',
          instance_url: 'https://mastodon.green',
          timeline_type: "profile",
          user_id: '109526206518128162',
          profile_name: '@srrpnj',
          toots_limit: 20,
          hide_unlisted: true,
          hide_reblog: false,
          hide_replies: false,
          markdown_blockquote: true,
          link_see_more: 'Read more posts on Mastodon'
        });

      });

    </script>
  </body>

</html>

CSS

/* Mastodon embed feed timeline v3.11.0 */
/* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */

/* Variables */
:root {
  --text-max-lines: none;
}

/* Theme colors */
:root,
html[data-theme="light"] {
  --bg-color: #fff;
  --bg-hover-color: #d9e1e8;
  --line-gray-color: #c0cdd9;
  --contrast-gray-color: #606984;
  --content-text: #000;
  --link-color: #3a3bff;
  --error-text-color: #8b0000;
}
html[data-theme="dark"] {
  --bg-color: #282c37;
  --bg-hover-color: #313543;
  --line-gray-color: #393f4f;
  --contrast-gray-color: #606984;
  --content-text: #fff;
  --link-color: #8c8dff;
  --error-text-color: #fe6c6c;
}

/* Main container */
.mt-container {
  height: 100%;
  overflow-y: auto;
  position: relative;
  background-color: var(--bg-color);
  scrollbar-color: var(--line-gray-color) var(--bg-color);
  scrollbar-width: thin;
}
.mt-container::-webkit-scrollbar {
  width: 0.25rem;
  height: 0.25rem;
}
.mt-container::-webkit-scrollbar-thumb {
  background-color: var(--line-gray-color);
  border: none;
  border-radius: 3rem;
}
.mt-container::-webkit-scrollbar-thumb:hover,
.mt-container::-webkit-scrollbar-thumb:active {
  background-color: var(--line-gray-color);
}
.mt-container::-webkit-scrollbar-track {
  background-color: var(--bg-color);
  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(--bg-color);
}
.mt-container a:link,
.mt-container a:active,
.mt-container a {
  text-decoration: none;
  color: var(--link-color);
}
.mt-container a:not(.mt-toot-preview):hover {
  text-decoration: underline;
}
.mt-body {
  padding: 1rem clamp(0.25rem, 4vw, 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;
}

/* Toot container */
.mt-toot {
  margin: 0.25rem;
  padding:...

JavaScript

/**
 * Mastodon embed feed timeline v3.11.0
 * 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: "auto",

    // Your Mastodon instance
    instance_url: "https://mastdn.social",

    // Choose type of toots to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
    timeline_type: "local",

    // Your user ID number on Mastodon instance. Leave it empty if you didn't choose 'profile' as type of timeline
    user_id: "",

    // Your user name on Mastodon instance (including the @ symbol at the beginning). Leave it empty if you didn't choose 'profile' as type of timeline
    profile_name: "",

    // The name of the hashtag (not including the # symbol). Leave it empty if you didn't choose 'hashtag' as type of timeline
    hashtag_name: "",

    // 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,

    // Hide replies, boosts and favourites toots counter. Default: don't hide
   ...