Release v4.2.0

2024-02-26 13:50:32 +01:00 · 2024-02-26 13:50:32 +01:00 · 580fd5809b
commit 580fd5809b
parent 4d25f1a3d8
20 changed files with 2361 additions and 1440 deletions
--- a/8
+++ b/8
@ -1,3 +1,11 @@
+v4.2.0 - 26/02/2024
+- Changed project name: mastodon-embed-feed-timeline -> mastodon-embed-timeline
+- Improved DOM load for module purposes
+- New build script with Rollup.js
+- Added CDN and NPM install steps
+- Added Contributing documentation
+- Added example for JS module case
+
 v4.0.4 - 20/02/2024
 - Improve alignment for refresh button

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -0,0 +1,84 @@
+# Contributing to Mastodon embed timeline
+
+Thanks for your interest in contributing. Any feature and improvement from the community to make this project better is always welcome.
+
+## How to Contribute
+
+### Reporting Issues
+
+If you find any bugs, issues, or have suggestions, please [create a new issue](https://gitlab.com/idotj/mastodon-embed-timeline/-/issues/new) and provide detailed information about the problem or feature.
+
+### Code Contributions
+
+1. Fork the repository on GitLab.
+2. Create a new branch from the `main` branch for your changes.
+3. Make your modifications and ensure that your code follows the coding standards.
+4. Compile and test your changes thoroughly.
+5. Submit a pull request to the `main` branch with a clear title and description.
+
+## Getting Started
+
+### Setup your environment
+
+- Choose your favorite IDE and check that the configuration matches the `.editorconfig` setup to respect the same coding styles.  
+  By default, this project is developed using [VScode](https://code.visualstudio.com/) with the plugins [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode).
+
+- Get [Git](https://git-scm.com/downloads) if you don't have it in your computer and after installation clone the repository by typing:
+  
+  ```terminal
+  git clone https://gitlab.com/idotj/mastodon-embed-timeline.git
+  ```
+
+- Install [Node.js](https://nodejs.org/en) if you don't have it and then go into the project folder `mastodon-embed-timeline/` and enter:
+  
+  ```terminal
+  npm i
+  ```
+
+- After all the packages are installed, do a check to see that it compiles as expected typing the following script to run a build:
+
+  ```terminal
+  npm run build
+  ```
+
+- All set, time to code!
+
+### Testing
+
+Ensure that your changes do not break existing functionality. If applicable, provide tests for new features or bug fixes.  
+
+The example pages located in the folder `examples/` can be a good reference to test the changes made.  
+
+If you need to emulate a server for your local development/testing, here are some options:
+
+- Install a static HTTP server via npm:
+
+  ```terminal
+  npm install --global http-server
+  ```
+
+  After installation, run the command:
+
+  ```terminal
+  http-server ./
+  ```
+
+  Now you can open your browser and navigate to any of the HTML examples. For example to open a Local timeline, your default url will be:  
+  [http://localhost:8080/examples/local-timeline.html](http://localhost:8080/examples/local-timeline.html)
+
+- Install [Docker compose](https://docs.docker.com/compose/install/) in your computer and run the following command:
+  
+  ```terminal
+  docker compose up
+  ```
+
+  Now open your browser and entering the following url you will land in the Local timeline page:  
+  [http://localhost:8080/examples/local-timeline.html](http://localhost:8080/examples/local-timeline.html)
+
+## Code Review Process
+
+All contributions will go through a code review process. Be prepared to address feedback and make necessary changes to your code.
+
+## License
+
+By contributing to this project, you agree that your contributions will be licensed under the GNU Affero General Public License v3.0.
--- a/2
+++ b/2
@ -629,7 +629,7 @@ to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.

-    Mastodon embed feed timeline
+    Mastodon embed timeline
    Copyright (C) 2021  i.j

    This program is free software: you can redistribute it and/or modify
--- a/README.md
+++ b/README.md
@ -1,257 +1,303 @@
-# 🐘 Mastodon embed timeline (new v4)
-
-![Mastodon timeline widget screenshot](screenshot-light-dark.jpg "Mastodon timeline widget screenshot")
-
-Embed a mastodon feed timeline in your page, only with a CSS and JS file.
-
-Demo running:
-<https://codepen.io/ipuntoj/pen/MWppNGL>
-
-## 📋 Table of contents
-
- [**Installation**](#installation)
- [**Setup**](#setup)
-  - [Initialize](#initialize)
-    - [Local timeline](#local-timeline)
-    - [Profile timeline](#profile-timeline)
-    - [Hashtag timeline](#hashtag-timeline)
-  - [Customize](#customize)
-  - [API](#api)
-  - [Examples](#examples)
-
-## Installation
-
-Ready-to-use compiled and minified files to easily start.
-
- Download into your project the following files:
-  - `dist/mastodon-timeline.min.css`
-  - `dist/mastodon-timeline.min.js`
-
-Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mastodon embed timeline</title>
-
-    <!-- CSS -->
-    <link href="path/to/mastodon-timeline.min.css" rel="stylesheet" />
-  </head>
-  <body>
-    <!-- Your HTML content -->
-
-    <!-- JavaScript -->
-    <script src="path/to/mastodon-timeline.min.js"></script>
-    <script>
-          // You can initialize the script here
-    </script>
-  </body>
-</html>
-```
-
-## Setup
-
-### Initialize
-
-The first step to get your timeline up is to add the following HTML structure in your page:
-
-```html
-<div id="mt-container" class="mt-container">
-  <div class="mt-body" role="feed">
-    <div class="mt-loading-spinner"></div>
-  </div>
-</div>
-```
-
-Then after that you can initialize the script by running:
-
-```js
-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 initialize the script before `mastodon-timeline.min.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", () => {
-  const myTimeline = new MastodonTimeline();
-});
-```
-
-The next step is to configure the options/values of your timeline according to the type you need. There are three types, **Local**, **Profile** and **Hashtag**:
-
-#### Local timeline
-
-Add the following option/value when initializing the timeline:
-
-```js
-const myTimeline = new MastodonTimeline({
-  instanceUrl: "https://mastodon.online",
-});
-```
-
-It will show a timeline with posts from the instance [mastodon.online](https://mastodon.online/public/local)
-
-#### Profile timeline
-
-Add the following options/values when initializing the timeline:
-
-```js
-const myTimeline = new MastodonTimeline({
-  instanceUrl: "https://mastodon.online",
-  timelineType: "profile",
-  userId: "000180745",
-  profileName: "@idotj",
-});
-```
-
-It will show a timeline with posts from my Mastodon profile [@idotj](https://mastodon.online/@idotj)
-
-ℹ️ If you don't know your `userId` you have two ways to get it:
-
- Copy the url below and paste it in a new tab. Remember to replace the words `INSTANCE` and `USERNAME` with your current values in the url:  
-  <https://INSTANCE/api/v1/accounts/lookup?acct=USERNAME>  
-  The first value you see in the list is your `id` number.
-
- Click on the link below and put your `@USERNAME` and `@INSTANCE` in the input field:  
-  [https://prouser123.me/mastodon-userid-lookup/](https://prouser123.me/mastodon-userid-lookup/)
-
-#### Hashtag timeline
-
-Add the following options/values when initializing the timeline:
-
-```js
-const myTimeline = new MastodonTimeline({
-  instanceUrl: "https://mastodon.online",
-  timelineType: "hashtag",
-  hashtagName: "fediverse",
-});
-```
-
-It will show a timeline with posts containing the hashtag [#fediverse](https://mastodon.online/tags/fediverse)
-
-### Customize
-
-You can pass more options/values to personalize your timeline. Here you have all the available options:
-
-```js
-  // Id of the <div> containing the timeline
-  mtContainerId: "mt-container",
-
-  // Mastodon instance Url (including https://)
-  instanceUrl: "https://mastodon.social",
-
-  // Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
-  timelineType: "local",
-
-  // Your user ID number on Mastodon instance. Leave it empty if you didn't choose 'profile' as type of timeline
-  userId: "",
-
-  // 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
-  profileName: "",
-
-  // The name of the hashtag (not including the # symbol). Leave it empty if you didn't choose 'hashtag' as type of timeline
-  hashtagName: "",
-
-  // Class name for the loading spinner (also used in CSS file)
-  spinnerClass: "mt-loading-spinner",
-
-  // Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
-  defaultTheme: "auto",
-
-  // Maximum number of posts to request to the server. Default: 20
-  maxNbPostFetch: "20",
-
-  // Maximum number of posts to show in the timeline. Default: 20
-  maxNbPostShow: "20",  
-
-  // Hide unlisted posts. Default: don't hide
-  hideUnlisted: false,
-
-  // Hide boosted posts. Default: don't hide
-  hideReblog: false,
-
-  // Hide replies posts. Default: don't hide
-  hideReplies: false,
-
-  // Hide video image preview and load video player instead. Default: don't hide
-  hideVideoPreview: false,
-
-  // Hide preview card if post contains a link, photo or video from a Url. Default: don't hide
-  hidePreviewLink: false,
-
-  // Hide custom emojis available on the server. Default: don't hide
-  hideEmojos: false,
-
-  // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Default: don't apply
-  markdownBlockquote: false,
-
-  // Hide replies, boosts and favourites posts counter. Default: don't hide
-  hideCounterBar: false,
-
-  // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
-  txtMaxLines: "0",
-
-  // Customize the text of the button used for showing/hiding sensitive/spolier text
-  btnShowMore: "SHOW MORE",
-  btnShowLess: "SHOW LESS",
-
-  // Customize the text of the button used for showing sensitive/spolier media content
-  btnShowContent: "SHOW CONTENT",
-
-  // Customize the text of the button pointing to the Mastodon page placed at the end of the timeline. Leave the value empty to hide it
-  btnSeeMore: "See more posts at Mastodon",
-
-  // Customize the text of the button reloading the list of posts placed at the end of the timeline. Leave the value empty to hide it
-  btnReload: "Refresh",
-
-```
-
-### API
-
-| Function | Description |
-| --- | --- |
-| `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
-| `mtUpdate()` | Reload the timeline by fetching the lastest posts |
-
-### Examples
-
-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 run:
-
-```terminal
-docker compose up
-```
-
-## 🌐 Browser support
-
-Mastodon embed timeline is supported on the latest versions of the following browsers:
-
- Chrome
- Firefox
- Edge
- Safari
- Brave
- Opera
-
-## 🚀 Improve me
-
-Feel free to add your features and improvements.
-
-## ⚖️ License
-
-GNU Affero General Public License v3.0
-
-## 💬 FAQ
-
-Check the [closed issues](https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/issues/?sort=created_date&state=closed&first_page_size=20), you might find your question there.
-
-If nothing matches with your problem, check the [open issues](https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/issues/?sort=created_date&state=opened&first_page_size=20) or feel free to create a new one.
-
-Looking for a previous version of Mastodon embed timeline?  
-Check on the tags list to see all the released versions: [Tags version history](https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/tags)
+# 🐘 Mastodon embed timeline (new v4.2)
+
+![Mastodon timeline widget screenshot](screenshot-light-dark.jpg "Mastodon timeline widget screenshot")
+
+Embed a mastodon timeline in your page, only with a CSS and JS file.
+
+Demo running:
+<https://codepen.io/ipuntoj/pen/MWppNGL>
+
+## 📋 Table of contents
+
+- [🐘 Mastodon embed timeline (new v4.2)](#-mastodon-embed-timeline-new-v42)
+  - [📋 Table of contents](#-table-of-contents)
+  - [Installation](#installation)
+    - [Download](#download)
+    - [CDN](#cdn)
+    - [Package manager](#package-manager)
+  - [Setup](#setup)
+    - [Initialize](#initialize)
+      - [Local timeline](#local-timeline)
+      - [Profile timeline](#profile-timeline)
+      - [Hashtag timeline](#hashtag-timeline)
+    - [Customize](#customize)
+    - [API](#api)
+    - [Examples](#examples)
+  - [🌐 Browser support](#-browser-support)
+  - [🚀 Improve me](#-improve-me)
+  - [⚖️ License](#️-license)
+  - [💬 FAQ](#-faq)
+
+## Installation
+
+### Download
+
+Ready-to-use compiled and minified files to easily start.
+
+- Download into your project the following files:
+  - `dist/mastodon-timeline.min.css`
+  - `dist/mastodon-timeline.umd.js`
+
+Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Your site title</title>
+
+    <!-- CSS -->
+    <link href="path/to/mastodon-timeline.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <!-- Your HTML content -->
+
+    <!-- JavaScript -->
+    <script src="path/to/mastodon-timeline.umd.js"></script>
+    <script>
+      // You can initialize the script here
+    </script>
+  </body>
+</html>
+```
+
+### CDN
+
+This option allows you to get started quickly without the need to upload any files into your server.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.2.0/dist/mastodon-timeline.min.css" integrity="sha256-RS5EmHN6wbvM+CqlWZmYPJ+Yh6BhLP/lmz646sBzwq0=" crossorigin="anonymous" />
+
+<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.2.0/dist/mastodon-timeline.umd.js" integrity="sha256-4a8ZoATaIg72pDzQNp97w0/M8EXBiPqHUAPC88MnYN4=" crossorigin="anonymous"></script>
+```
+
+### Package manager
+
+Install your timeline using npm or yarn:
+
+```terminal
+npm install @idot/mastodon-embed-timeline
+```
+
+or
+
+```terminal
+yarn add @idot/mastodon-embed-timeline
+```
+
+After installation, you can import the widget as follows:
+
+```js
+import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";
+```
+
+Make sure to import also the `@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css` file in your project.
+
+## Setup
+
+### Initialize
+
+The first step to get your timeline up is to add the following HTML structure in your page:
+
+```html
+<div id="mt-container" class="mt-container">
+  <div class="mt-body" role="feed">
+    <div class="mt-loading-spinner"></div>
+  </div>
+</div>
+```
+
+Then after that you can initialize the script by running:
+
+```js
+const myTimeline = new MastodonTimeline.Init();
+```
+
+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 initialize the script before `mastodon-timeline.umd.js` is loaded, you will probably get such an error in the console: "_MastodonTimeline is not defined_". To fix that initialize the script by running:
+
+```js
+window.addEventListener("load", () => {
+  const myTimeline = new MastodonTimeline.Init();
+});
+```
+
+The next step is to configure the options/values of your timeline according to the type you need. There are three types, **Local**, **Profile** and **Hashtag**:
+
+#### Local timeline
+
+Add the following option/value when initializing the timeline:
+
+```js
+const myTimeline = new MastodonTimeline.Init({
+  instanceUrl: "https://mastodon.online",
+});
+```
+
+It will show a timeline with posts from the instance [mastodon.online](https://mastodon.online/public/local)
+
+#### Profile timeline
+
+Add the following options/values when initializing the timeline:
+
+```js
+const myTimeline = new MastodonTimeline.Init({
+  instanceUrl: "https://mastodon.online",
+  timelineType: "profile",
+  userId: "000180745",
+  profileName: "@idotj",
+});
+```
+
+It will show a timeline with posts from my Mastodon profile [@idotj](https://mastodon.online/@idotj)
+
+ℹ️ If you don't know your `userId` you have two ways to get it:
+
+- Copy the url below and paste it in a new tab. Remember to replace the words `INSTANCE` and `USERNAME` with your current values in the url:  
+  <https://INSTANCE/api/v1/accounts/lookup?acct=USERNAME>  
+  The first value you see in the list is your `id` number.
+
+- Click on the link below and put your `@USERNAME` and `@INSTANCE` in the input field:  
+  [https://prouser123.me/mastodon-userid-lookup/](https://prouser123.me/mastodon-userid-lookup/)
+
+#### Hashtag timeline
+
+Add the following options/values when initializing the timeline:
+
+```js
+const myTimeline = new MastodonTimeline.Init({
+  instanceUrl: "https://mastodon.online",
+  timelineType: "hashtag",
+  hashtagName: "fediverse",
+});
+```
+
+It will show a timeline with posts containing the hashtag [#fediverse](https://mastodon.online/tags/fediverse)
+
+### Customize
+
+You can pass more options/values to personalize your timeline. Here you have all the available options:
+
+```js
+  // Id of the <div> containing the timeline
+  mtContainerId: "mt-container",
+
+  // Mastodon instance Url (including https://)
+  instanceUrl: "https://mastodon.social",
+
+  // Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
+  timelineType: "local",
+
+  // Your user ID number on Mastodon instance. Leave it empty if you didn't choose 'profile' as type of timeline
+  userId: "",
+
+  // 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
+  profileName: "",
+
+  // The name of the hashtag (not including the # symbol). Leave it empty if you didn't choose 'hashtag' as type of timeline
+  hashtagName: "",
+
+  // Class name for the loading spinner (also used in CSS file)
+  spinnerClass: "mt-loading-spinner",
+
+  // Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
+  defaultTheme: "auto",
+
+  // Maximum number of posts to request to the server. Default: 20
+  maxNbPostFetch: "20",
+
+  // Maximum number of posts to show in the timeline. Default: 20
+  maxNbPostShow: "20",
+
+  // Hide unlisted posts. Default: don't hide
+  hideUnlisted: false,
+
+  // Hide boosted posts. Default: don't hide
+  hideReblog: false,
+
+  // Hide replies posts. Default: don't hide
+  hideReplies: false,
+
+  // Hide video image preview and load video player instead. Default: don't hide
+  hideVideoPreview: false,
+
+  // Hide preview card if post contains a link, photo or video from a Url. Default: don't hide
+  hidePreviewLink: false,
+
+  // Hide custom emojis available on the server. Default: don't hide
+  hideEmojos: false,
+
+  // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Default: don't apply
+  markdownBlockquote: false,
+
+  // Hide replies, boosts and favourites posts counter. Default: don't hide
+  hideCounterBar: false,
+
+  // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
+  txtMaxLines: "0",
+
+  // Customize the text of the button used for showing/hiding sensitive/spolier text
+  btnShowMore: "SHOW MORE",
+  btnShowLess: "SHOW LESS",
+
+  // Customize the text of the button used for showing sensitive/spolier media content
+  btnShowContent: "SHOW CONTENT",
+
+  // Customize the text of the button pointing to the Mastodon page placed at the end of the timeline. Leave the value empty to hide it
+  btnSeeMore: "See more posts at Mastodon",
+
+  // Customize the text of the button reloading the list of posts placed at the end of the timeline. Leave the value empty to hide it
+  btnReload: "Refresh",
+
+  // Keep searching for the main <div> container before building the timeline. Useful in some cases where extra time is needed to render the page. Default: false
+  insistSearchContainer: false,
+
+  // Defines the maximum time to continue searching for the main <div> container. Default: 3 seconds
+  insistSearchContainerTime: "3000",
+
+```
+
+### API
+
+| Function                  | Description                                                                     |
+| ------------------------- | ------------------------------------------------------------------------------- |
+| `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
+| `mtUpdate()`              | Reload the timeline by fetching the lastest posts                               |
+
+### Examples
+
+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 other alternatives to run these examples locally. Consult the document [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to use other options like Docker or Http-server.
+
+## 🌐 Browser support
+
+Mastodon embed timeline is supported on the latest versions of the following browsers:
+
+- Chrome
+- Firefox
+- Edge
+- Safari
+- Brave
+- Opera
+
+## 🚀 Improve me
+
+Feel free to add your features and improvements.  
+Take a look at the [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md) document to learn more about how to build and collaborate on the project.
+
+## ⚖️ License
+
+GNU Affero General Public License v3.0
+
+## 💬 FAQ
+
+Check the [closed issues](https://gitlab.com/idotj/mastodon-embed-timeline/-/issues/?sort=created_date&state=closed&first_page_size=20), you might find your question there.
+
+If nothing matches with your problem, check the [open issues](https://gitlab.com/idotj/mastodon-embed-timeline/-/issues/?sort=created_date&state=opened&first_page_size=20) or feel free to create a new one.
+
+Looking for a previous version of Mastodon embed timeline?  
+Check on the tags list to see all the released versions: [Tags history](https://gitlab.com/idotj/mastodon-embed-timeline/-/tags)
--- a/dist/mastodon-timeline.d.ts
+++ b/dist/mastodon-timeline.d.ts
@ -0,0 +1 @@
+declare module '@idotj/mastodon-embed-timeline';
--- a/dist/mastodon-timeline.esm.js
+++ b/dist/mastodon-timeline.esm.js
--- a/dist/mastodon-timeline.min.js
+++ b/dist/mastodon-timeline.min.js
--- a/dist/mastodon-timeline.umd.js
+++ b/dist/mastodon-timeline.umd.js
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,28 +1,23 @@
-# This is a docker compose file to demonstrate and test the mastodon-timeline widget
-# Run this docker CLI from the root repo directory:
-#
-# $ docker compose up
-
-version: "3.3"
-
-services:
-  lighttpd:
-    image: jitesoft/lighttpd
-    ports:
-      - "8080:80"
-      - "8443:443"
-    volumes:
-      - ./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
-      - SERVER_ROOT=/var/www
-      - CONFIG_FILE=/etc/lighttpd/lighttpd.conf
-      - SKIP_HEALTHCHECK=false
-      - MAX_FDS=1024
+# This is a docker compose file to demonstrate and test the Mastodon embed timeline widget
+# Run this docker CLI from the root repository directory:
+#
+# $ docker compose up
+
+version: "3.3"
+
+services:
+  lighttpd:
+    image: jitesoft/lighttpd
+    ports:
+      - "8080:80"
+      - "8443:443"
+    volumes:
+      - ./dist:/var/www/dist
+      - ./examples:/var/www/examples
+    environment:
+      - PORT=80
+      - SERVER_NAME=mastodon-timeline
+      - SERVER_ROOT=/var/www
+      - CONFIG_FILE=/etc/lighttpd/lighttpd.conf
+      - SKIP_HEALTHCHECK=false
+      - MAX_FDS=1024
--- a/examples/hashtag-timeline.html
+++ b/examples/hashtag-timeline.html
@ -8,7 +8,7 @@
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <link rel="shortcut icon" href="#" />
-    <link rel="stylesheet" href="../src/mastodon-timeline.css" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
    <style>
      * {
        box-sizing: border-box;
@ -82,7 +82,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline = new MastodonTimeline({
+    const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.online",
      timelineType: "hashtag",
      hashtagName: "fediverse",
@ -103,9 +103,9 @@
    </div>

    <!-- JavaScript -->
-    <script src="../src/mastodon-timeline.js"></script>
+    <script src="../dist/mastodon-timeline.umd.js"></script>
    <script>
-      const myTimeline = new MastodonTimeline({
+      const myTimeline = new MastodonTimeline.Init({
        instanceUrl: "https://mastodon.online",
        timelineType: "hashtag",
        hashtagName: "fediverse",
--- a/examples/local-timeline-module.html
+++ b/examples/local-timeline-module.html
@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Mastodon embed timeline</title>
+    <meta name="author" content="i.j" />
+    <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" />
+    <link rel="shortcut icon" href="#" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        height: 100%;
+      }
+      body {
+        height: 100%;
+        background: lightgrey;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 16px;
+        margin: 0;
+      }
+      .dummy-main-container {
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+      }
+      .dummy-wrapper-text,
+      .dummy-wrapper-timeline {
+        width: 50%;
+        max-width: 30rem;
+        height: calc(100% - 4rem);
+        padding: 0 1rem;
+      }
+      .dummy-wrapper-text h1,
+      .dummy-wrapper-text h2,
+      .dummy-wrapper-text p {
+        margin: 0 0 1rem 0;
+      }
+      .dummy-wrapper-text pre {
+        display: flex;
+        background: lightsteelblue;
+        border-left: 3px solid #563acc;
+        color: midnightblue;
+        page-break-inside: avoid;
+        font-family: monospace;
+        line-height: 1.5;
+        max-width: 100%;
+        overflow: auto;
+        word-wrap: break-word;
+      }
+      .dummy-wrapper-text hr {
+        margin: 2rem 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="dummy-main-container">
+      <!-- Title + Explained details of the example -->
+      <div class="dummy-wrapper-text">
+        <h1>🐘 Mastodon embed timeline</h1>
+        <h2>Local timeline (Javascript module)</h2>
+        <p>
+          This example shows 20 posts from the following instance:
+          <br />
+          <a
+            href="https://mastodon.online/public/local"
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            >mastodon.online</a
+          >
+        </p>
+        <p>
+          It loads the Javascript file as a module and has been initialized with
+          the following script:
+        </p>
+        <pre>
+        <code>
+  &lt;script type="module"&gt;
+    import * as MastodonTimeline from '../dist/mastodon-timeline.esm.js'
+    const myTimeline = new MastodonTimeline.Init({
+      instanceUrl: "https://mastodon.online"
+    });
+  &lt;/script&gt;
+          </code>
+        </pre>
+
+        <hr />
+
+        <p>
+          If you get an error in your browser console related with CORS:
+          <em
+            >"Cross-Origin Request Blocked: The Same Origin Policy disallows
+            reading the remote resource..."</em
+          >
+          I recommend to check the
+          <a
+            href="https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing"
+            target="_blank"
+            >CONTRIBUTING.md</a
+          >
+          document and setup a local environment to test.
+        </p>
+      </div>
+
+      <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>
+    </div>
+
+    <!-- JavaScript -->
+    <script type="module">
+      import * as MastodonTimeline from "../dist/mastodon-timeline.esm.js";
+      const myTimeline = new MastodonTimeline.Init({
+        instanceUrl: "https://mastodon.online",
+      });
+    </script>
+  </body>
+</html>
--- a/examples/local-timeline.html
+++ b/examples/local-timeline.html
@ -8,7 +8,7 @@
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <link rel="shortcut icon" href="#" />
-    <link rel="stylesheet" href="../src/mastodon-timeline.css" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
    <style>
      * {
        box-sizing: border-box;
@ -85,7 +85,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline = new MastodonTimeline();
+    const myTimeline = new MastodonTimeline.Init();
  &lt;/script&gt;
          </code>
        </pre>
@ -111,7 +111,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline = new MastodonTimeline({
+    const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.online"
    });
  &lt;/script&gt;
@ -130,9 +130,9 @@
    </div>

    <!-- JavaScript -->
-    <script src="../src/mastodon-timeline.js"></script>
+    <script src="../dist/mastodon-timeline.umd.js"></script>
    <script>
-      const myTimeline = new MastodonTimeline();
+      const myTimeline = new MastodonTimeline.Init();
    </script>
  </body>
 </html>
--- a/examples/multiple-timelines.html
+++ b/examples/multiple-timelines.html
@ -8,7 +8,7 @@
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <link rel="shortcut icon" href="#" />
-    <link rel="stylesheet" href="../src/mastodon-timeline.css" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
    <style>
      * {
        box-sizing: border-box;
@ -96,17 +96,17 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline01 = new MastodonTimeline({
+    const myTimeline01 = new MastodonTimeline.Init({
      mtContainerId: "mt-container-01",
      instanceUrl: "https://mastodon.social",
    });

-    const myTimeline02 = new MastodonTimeline({
+    const myTimeline02 = new MastodonTimeline.Init({
      mtContainerId: "mt-container-02",
      instanceUrl: "https://mastodon.online",
    });

-    const myTimeline03 = new MastodonTimeline({
+    const myTimeline03 = new MastodonTimeline.Init({
      mtContainerId: "mt-container-03",
      instanceUrl: "https://mstdn.social",
    });
@ -144,19 +144,19 @@
    </div>

    <!-- JavaScript -->
-    <script src="../src/mastodon-timeline.js"></script>
+    <script src="../dist/mastodon-timeline.umd.js"></script>
    <script>
-      const myTimeline01 = new MastodonTimeline({
+      const myTimeline01 = new MastodonTimeline.Init({
        mtContainerId: "mt-container-01",
        instanceUrl: "https://mastodon.social",
      });

-      const myTimeline02 = new MastodonTimeline({
+      const myTimeline02 = new MastodonTimeline.Init({
        mtContainerId: "mt-container-02",
        instanceUrl: "https://mastodon.online",
      });

-      const myTimeline03 = new MastodonTimeline({
+      const myTimeline03 = new MastodonTimeline.Init({
        mtContainerId: "mt-container-03",
        instanceUrl: "https://mstdn.social",
      });
--- a/examples/profile-timeline.html
+++ b/examples/profile-timeline.html
@ -8,7 +8,7 @@
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <link rel="shortcut icon" href="#" />
-    <link rel="stylesheet" href="../src/mastodon-timeline.css" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
    <style>
      * {
        box-sizing: border-box;
@ -82,7 +82,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline = new MastodonTimeline({
+    const myTimeline = new MastodonTimeline.Init({
      instanceUrl: "https://mastodon.online",
      timelineType: "profile",
      userId: "000180745",
@ -104,9 +104,9 @@
    </div>

    <!-- JavaScript -->
-    <script src="../src/mastodon-timeline.js"></script>
+    <script src="../dist/mastodon-timeline.umd.js"></script>
    <script>
-      const myTimeline = new MastodonTimeline({
+      const myTimeline = new MastodonTimeline.Init({
        instanceUrl: "https://mastodon.online",
        timelineType: "profile",
        userId: "000180745",
--- a/examples/theme-timeline.html
+++ b/examples/theme-timeline.html
@ -8,7 +8,7 @@
    <meta name="keywords" content="mastodon, embed timeline" />
    <meta name="description" content="Mastodon embed timeline" />
    <link rel="shortcut icon" href="#" />
-    <link rel="stylesheet" href="../src/mastodon-timeline.css" />
+    <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
    <style>
      * {
        box-sizing: border-box;
@ -95,7 +95,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline01 = new MastodonTimeline({
+    const myTimeline01 = new MastodonTimeline.Init({
      mtContainerId: "mt-container-01",
      defaultTheme: "light",
    });
@ -111,7 +111,7 @@
        <pre>
        <code>
  &lt;script&gt;
-    const myTimeline02 = new MastodonTimeline({
+    const myTimeline02 = new MastodonTimeline.Init({
      mtContainerId: "mt-container-02",
      defaultTheme: "dark",
    });
@ -166,14 +166,14 @@
    </div>

    <!-- JavaScript -->
-    <script src="../src/mastodon-timeline.js"></script>
+    <script src="../dist/mastodon-timeline.umd.js"></script>
    <script>
-      const myTimeline01 = new MastodonTimeline({
+      const myTimeline01 = new MastodonTimeline.Init({
        mtContainerId: "mt-container-01",
        defaultTheme: "light",
      });

-      const myTimeline02 = new MastodonTimeline({
+      const myTimeline02 = new MastodonTimeline.Init({
        mtContainerId: "mt-container-02",
        defaultTheme: "dark",
      });
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,575 @@
+{
+  "name": "@idotj/mastodon-embed-timeline",
+  "version": "4.2.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@idotj/mastodon-embed-timeline",
+      "version": "4.2.0",
+      "license": "GNU",
+      "devDependencies": {
+        "@rollup/plugin-terser": "^0.4.4",
+        "clean-css-cli": "^5.6.3",
+        "rollup": "^4.12.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@rollup/plugin-terser": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.4.tgz",
+      "integrity": "sha512-XHeJC5Bgvs8LfukDwWZp7yeqin6ns8RTl2B9avbejt6tZqsqvVoWI7ZTQrcNsfKEDWBTnTxM8nMDkO2IFFbd0A==",
+      "dev": true,
+      "dependencies": {
+        "serialize-javascript": "^6.0.1",
+        "smob": "^1.0.0",
+        "terser": "^5.17.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.0.tgz",
+      "integrity": "sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.0.tgz",
+      "integrity": "sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dev": true,
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/clean-css-cli": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/clean-css-cli/-/clean-css-cli-5.6.3.tgz",
+      "integrity": "sha512-MUAta8pEqA/d2DKQwtZU5nm0Og8TCyAglOx3GlWwjhGdKBwY4kVF6E5M6LU/jmmuswv+HbYqG/dKKkq5p1dD0A==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.2",
+        "clean-css": "^5.3.3",
+        "commander": "7.x",
+        "glob": "^7.1.6"
+      },
+      "bin": {
+        "cleancss": "bin/cleancss"
+      },
+      "engines": {
+        "node": ">= 10.12.0"
+      }
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.12.0.tgz",
+      "integrity": "sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.12.0",
+        "@rollup/rollup-android-arm64": "4.12.0",
+        "@rollup/rollup-darwin-arm64": "4.12.0",
+        "@rollup/rollup-darwin-x64": "4.12.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.12.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.12.0",
+        "@rollup/rollup-linux-arm64-musl": "4.12.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.12.0",
+        "@rollup/rollup-linux-x64-gnu": "4.12.0",
+        "@rollup/rollup-linux-x64-musl": "4.12.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.12.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.12.0",
+        "@rollup/rollup-win32-x64-msvc": "4.12.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/smob": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/smob/-/smob-1.4.1.tgz",
+      "integrity": "sha512-9LK+E7Hv5R9u4g4C3p+jjLstaLe11MDsL21UpYaCNmapvMkYhqCV4A/f/3gyH8QjMyh6l68q9xC85vihY9ahMQ==",
+      "dev": true
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.27.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
+      "integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -1,17 +1,11 @@
 {
-  "name": "@idotj/mastodon-embed-feed-timeline",
+  "name": "@idotj/mastodon-embed-timeline",
+  "version": "4.2.0",
  "description": "Displays Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
-  "version": "4.0.4",
-  "private": false,
+  "license": "GNU",
  "author": {
-    "name": "idotj"
-  },
-  "scripts": {
-    "test": "echo \"No test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.com/idotj/mastodon-embed-feed-timeline.git"
+    "name": "idotj",
+    "url": "https://www.idotj.com"
  },
  "keywords": [
    "mastodon",
@ -20,9 +14,34 @@
    "embedded",
    "fediverse"
  ],
-  "bugs": {
-    "url": "https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/issues"
+  "homepage": "https://gitlab.com/idotj/mastodon-embed-timeline",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/idotj/mastodon-embed-timeline.git"
  },
-  "homepage": "https://gitlab.com/idotj/mastodon-embed-feed-timeline",
-  "license": "GNU"
+  "bugs": {
+    "url": "https://gitlab.com/idotj/mastodon-embed-timeline/-/issues"
+  },
+  "private": false,
+  "type": "module",
+  "main": "dist/mastodon-timeline.esm.js",
+  "types": "dist/mastodon-timeline.d.ts",
+  "style": "dist/mastodon-timeline.min.css",
+  "publishConfig": {
+    "registry": "https://gitlab.com/api/v4/projects/25689941/packages/npm/"
+  },
+  "scripts": {
+    "test": "echo \"No test specified\" && exit 1",
+    "build": "npm run build:minifyCss && rollup -c",
+    "build:minifyCss": "cleancss src/mastodon-timeline.css -o dist/mastodon-timeline.min.css"
+  },
+  "devDependencies": {
+    "clean-css-cli": "^5.6.3",
+    "rollup": "^4.12.0",
+    "@rollup/plugin-terser": "^0.4.4"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
 }
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,20 @@
+import terser from "@rollup/plugin-terser";
+
+export default [
+  {
+    input: "src/mastodon-timeline.js",
+    output: [
+      {
+        file: "dist/mastodon-timeline.esm.js",
+        format: "esm",
+        sourcemap: false,
+      },
+      {
+        name: "MastodonTimeline",
+        file: "dist/mastodon-timeline.umd.js",
+        format: "umd",
+      },
+    ],
+    plugins: [terser()],
+  },
+];
--- a/src/mastodon-timeline.css
+++ b/src/mastodon-timeline.css
@ -1,6 +1,6 @@
-/* Mastodon embed feed timeline v4.0.4 */
+/* Mastodon embed timeline v4.2.0 */
 /* More info at: */
-/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */
+/* https://gitlab.com/idotj/mastodon-embed-timeline */

 /* Variables */
 .mt-container,
--- a/src/mastodon-timeline.js
+++ b/src/mastodon-timeline.js
				`@ -0,0 +1 @@`
				`declare module '@idotj/mastodon-embed-timeline';`