mastodon-embed-timeline/docs/INSTALLATION.md
2025-04-07 17:59:44 +02:00

1.8 KiB

🐘 Mastodon embed timeline - 🛠️ Installation

You have three different ways to install it in your project:

Download

Download and copy these two files into your project folder:

  • dist/mastodon-timeline.min.css
  • dist/mastodon-timeline.umd.js

Load the CSS and JS files in your HTML page using the <link> and <script> tags as follows in this example:

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Example of site title</title>
    <!-- Your CSS -->
    <link href="your/path/to/file/mastodon-timeline.min.css" rel="stylesheet" />
  </head>

  <body>
    <!-- HTML content -->
    ...

    <!-- Your JavaScript -->
    <script src="your/path/to/file/mastodon-timeline.umd.js"></script>
    <script>
      // You can initialize the script here
    </script>
  </body>
</html>

CDN

This option allows you to start without the need to upload any files on your server.
Copy the following CSS and JS links to include them in your project:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.7.0/dist/mastodon-timeline.min.css">
<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.7.0/dist/mastodon-timeline.umd.js"></script>

Package manager

A quick way to get it installed using npm or yarn:

npm install @idotj/mastodon-embed-timeline

or

yarn add @idotj/mastodon-embed-timeline

After installation, you can import it as follows:

import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";

Make sure to import also the file mastodon-timeline.min.css into your project.