kunjinkao/mastodon-embed-timeline
1
0
Fork 0
forked from mirror/mastodon-embed-timeline
Code Pull Requests Activity

Release v4.2.0

Browse Source
This commit is contained in:
idotj 2024-02-26 13:50:32 +01:00
parent 4d25f1a3d8
commit 580fd5809b
20 changed files with 2361 additions and 1440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG
View File

@ -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 v4.0.4 - 20/02/2024
- Improve alignment for refresh button - Improve alignment for refresh button

84
CONTRIBUTING.md Normal file
View File

@ -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.

2
LICENSE
View File

@ -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 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. 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 Copyright (C) 2021 i.j
This program is free software: you can redistribute it and/or modify This program is free software: you can redistribute it and/or modify

110
README.md
View File

@ -1,31 +1,42 @@
# 🐘 Mastodon embed timeline (new v4) # 🐘 Mastodon embed timeline (new v4.2)
![Mastodon timeline widget screenshot](screenshot-light-dark.jpg "Mastodon timeline widget screenshot") ![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. Embed a mastodon timeline in your page, only with a CSS and JS file.
Demo running: Demo running:
<https://codepen.io/ipuntoj/pen/MWppNGL> <https://codepen.io/ipuntoj/pen/MWppNGL>
## 📋 Table of contents ## 📋 Table of contents
- [**Installation**](#installation) - [🐘 Mastodon embed timeline (new v4.2)](#-mastodon-embed-timeline-new-v42)
- [**Setup**](#setup) - [📋 Table of contents](#-table-of-contents)
- [Initialize](#initialize) - [Installation](#installation)
- [Local timeline](#local-timeline) - [Download](#download)
- [Profile timeline](#profile-timeline) - [CDN](#cdn)
- [Hashtag timeline](#hashtag-timeline) - [Package manager](#package-manager)
- [Customize](#customize) - [Setup](#setup)
- [API](#api) - [Initialize](#initialize)
- [Examples](#examples) - [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 ## Installation
### Download
Ready-to-use compiled and minified files to easily start. Ready-to-use compiled and minified files to easily start.
- Download into your project the following files: - Download into your project the following files:
- `dist/mastodon-timeline.min.css` - `dist/mastodon-timeline.min.css`
- `dist/mastodon-timeline.min.js` - `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: Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
@ -35,7 +46,7 @@ Now call the CSS and JS files in your HTML page using the `<link>` and `<script>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mastodon embed timeline</title> <title>Your site title</title>
<!-- CSS --> <!-- CSS -->
<link href="path/to/mastodon-timeline.min.css" rel="stylesheet" /> <link href="path/to/mastodon-timeline.min.css" rel="stylesheet" />
@ -44,14 +55,46 @@ Now call the CSS and JS files in your HTML page using the `<link>` and `<script>
<!-- Your HTML content --> <!-- Your HTML content -->
<!-- JavaScript --> <!-- JavaScript -->
<script src="path/to/mastodon-timeline.min.js"></script> <script src="path/to/mastodon-timeline.umd.js"></script>
<script> <script>
// You can initialize the script here // You can initialize the script here
</script> </script>
</body> </body>
</html> </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 ## Setup
### Initialize ### Initialize
@ -69,16 +112,16 @@ The first step to get your timeline up is to add the following HTML structure in
Then after that you can initialize the script by running: Then after that you can initialize the script by running:
```js ```js
const myTimeline = new MastodonTimeline(); 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) 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: ℹ️ 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 ```js
window.addEventListener("load", () => { window.addEventListener("load", () => {
const myTimeline = new MastodonTimeline(); const myTimeline = new MastodonTimeline.Init();
}); });
``` ```
@ -89,7 +132,7 @@ The next step is to configure the options/values of your timeline according to t
Add the following option/value when initializing the timeline: Add the following option/value when initializing the timeline:
```js ```js
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
}); });
``` ```
@ -101,7 +144,7 @@ It will show a timeline with posts from the instance [mastodon.online](https://m
Add the following options/values when initializing the timeline: Add the following options/values when initializing the timeline:
```js ```js
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "profile", timelineType: "profile",
userId: "000180745", userId: "000180745",
@ -125,7 +168,7 @@ It will show a timeline with posts from my Mastodon profile [@idotj](https://mas
Add the following options/values when initializing the timeline: Add the following options/values when initializing the timeline:
```js ```js
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "hashtag", timelineType: "hashtag",
hashtagName: "fediverse", hashtagName: "fediverse",
@ -209,24 +252,26 @@ You can pass more options/values to personalize your timeline. Here you have all
// 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 // 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", 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 ### API
| Function | Description | | Function | Description |
| --- | --- | | ------------------------- | ------------------------------------------------------------------------------- |
| `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` | | `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
| `mtUpdate()` | Reload the timeline by fetching the lastest posts | | `mtUpdate()` | Reload the timeline by fetching the lastest posts |
### Examples ### 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. 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: 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.
```terminal
docker compose up
```
## 🌐 Browser support ## 🌐 Browser support
@ -242,6 +287,7 @@ Mastodon embed timeline is supported on the latest versions of the following bro
## 🚀 Improve me ## 🚀 Improve me
Feel free to add your features and improvements. 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 ## ⚖️ License
@ -249,9 +295,9 @@ GNU Affero General Public License v3.0
## 💬 FAQ ## 💬 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. 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-feed-timeline/-/issues/?sort=created_date&state=opened&first_page_size=20) or feel free to create a new one. 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? 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) Check on the tags list to see all the released versions: [Tags history](https://gitlab.com/idotj/mastodon-embed-timeline/-/tags)

1
dist/mastodon-timeline.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module '@idotj/mastodon-embed-timeline';

8
dist/mastodon-timeline.esm.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
dist/mastodon-timeline.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
dist/mastodon-timeline.umd.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

13
docker-compose.yml
View File

@ -1,5 +1,5 @@
# This is a docker compose file to demonstrate and test the mastodon-timeline widget # This is a docker compose file to demonstrate and test the Mastodon embed timeline widget
# Run this docker CLI from the root repo directory: # Run this docker CLI from the root repository directory:
# #
# $ docker compose up # $ docker compose up
@ -12,13 +12,8 @@ services:
- "8080:80" - "8080:80"
- "8443:443" - "8443:443"
volumes: volumes:
- ./src/mastodon-timeline.css:/var/www/src/mastodon-timeline.css - ./dist:/var/www/dist
- ./src/mastodon-timeline.js:/var/www/src/mastodon-timeline.js - ./examples:/var/www/examples
- ./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: environment:
- PORT=80 - PORT=80
- SERVER_NAME=mastodon-timeline - SERVER_NAME=mastodon-timeline

8
examples/hashtag-timeline.html
View File

@ -8,7 +8,7 @@
<meta name="keywords" content="mastodon, embed timeline" /> <meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" /> <meta name="description" content="Mastodon embed timeline" />
<link rel="shortcut icon" href="#" /> <link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="../src/mastodon-timeline.css" /> <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -82,7 +82,7 @@
<pre> <pre>
<code> <code>
&lt;script&gt; &lt;script&gt;
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "hashtag", timelineType: "hashtag",
hashtagName: "fediverse", hashtagName: "fediverse",
@ -103,9 +103,9 @@
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->
<script src="../src/mastodon-timeline.js"></script> <script src="../dist/mastodon-timeline.umd.js"></script>
<script> <script>
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "hashtag", timelineType: "hashtag",
hashtagName: "fediverse", hashtagName: "fediverse",

132
examples/local-timeline-module.html Normal file
View File

@ -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>

10
examples/local-timeline.html
View File

@ -8,7 +8,7 @@
<meta name="keywords" content="mastodon, embed timeline" /> <meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" /> <meta name="description" content="Mastodon embed timeline" />
<link rel="shortcut icon" href="#" /> <link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="../src/mastodon-timeline.css" /> <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -85,7 +85,7 @@
<pre> <pre>
<code> <code>
&lt;script&gt; &lt;script&gt;
const myTimeline = new MastodonTimeline(); const myTimeline = new MastodonTimeline.Init();
&lt;/script&gt; &lt;/script&gt;
</code> </code>
</pre> </pre>
@ -111,7 +111,7 @@
<pre> <pre>
<code> <code>
&lt;script&gt; &lt;script&gt;
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online" instanceUrl: "https://mastodon.online"
}); });
&lt;/script&gt; &lt;/script&gt;
@ -130,9 +130,9 @@
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->
<script src="../src/mastodon-timeline.js"></script> <script src="../dist/mastodon-timeline.umd.js"></script>
<script> <script>
const myTimeline = new MastodonTimeline(); const myTimeline = new MastodonTimeline.Init();
</script> </script>
</body> </body>
</html> </html>

16
examples/multiple-timelines.html
View File

@ -8,7 +8,7 @@
<meta name="keywords" content="mastodon, embed timeline" /> <meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" /> <meta name="description" content="Mastodon embed timeline" />
<link rel="shortcut icon" href="#" /> <link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="../src/mastodon-timeline.css" /> <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -96,17 +96,17 @@
<pre> <pre>
<code> <code>
&lt;script&gt; &lt;script&gt;
const myTimeline01 = new MastodonTimeline({ const myTimeline01 = new MastodonTimeline.Init({
mtContainerId: "mt-container-01", mtContainerId: "mt-container-01",
instanceUrl: "https://mastodon.social", instanceUrl: "https://mastodon.social",
}); });
const myTimeline02 = new MastodonTimeline({ const myTimeline02 = new MastodonTimeline.Init({
mtContainerId: "mt-container-02", mtContainerId: "mt-container-02",
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
}); });
const myTimeline03 = new MastodonTimeline({ const myTimeline03 = new MastodonTimeline.Init({
mtContainerId: "mt-container-03", mtContainerId: "mt-container-03",
instanceUrl: "https://mstdn.social", instanceUrl: "https://mstdn.social",
}); });
@ -144,19 +144,19 @@
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->
<script src="../src/mastodon-timeline.js"></script> <script src="../dist/mastodon-timeline.umd.js"></script>
<script> <script>
const myTimeline01 = new MastodonTimeline({ const myTimeline01 = new MastodonTimeline.Init({
mtContainerId: "mt-container-01", mtContainerId: "mt-container-01",
instanceUrl: "https://mastodon.social", instanceUrl: "https://mastodon.social",
}); });
const myTimeline02 = new MastodonTimeline({ const myTimeline02 = new MastodonTimeline.Init({
mtContainerId: "mt-container-02", mtContainerId: "mt-container-02",
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
}); });
const myTimeline03 = new MastodonTimeline({ const myTimeline03 = new MastodonTimeline.Init({
mtContainerId: "mt-container-03", mtContainerId: "mt-container-03",
instanceUrl: "https://mstdn.social", instanceUrl: "https://mstdn.social",
}); });

8
examples/profile-timeline.html
View File

@ -8,7 +8,7 @@
<meta name="keywords" content="mastodon, embed timeline" /> <meta name="keywords" content="mastodon, embed timeline" />
<meta name="description" content="Mastodon embed timeline" /> <meta name="description" content="Mastodon embed timeline" />
<link rel="shortcut icon" href="#" /> <link rel="shortcut icon" href="#" />
<link rel="stylesheet" href="../src/mastodon-timeline.css" /> <link rel="stylesheet" href="../dist/mastodon-timeline.min.css" />
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -82,7 +82,7 @@
<pre> <pre>
<code> <code>
&lt;script&gt; &lt;script&gt;
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "profile", timelineType: "profile",
userId: "000180745", userId: "000180745",
@ -104,9 +104,9 @@
</div> </div>
<!-- JavaScript --> <!-- JavaScript -->
<script src="../src/mastodon-timeline.js"></script> <script src="../dist/mastodon-timeline.umd.js"></script>
<script> <script>
const myTimeline = new MastodonTimeline({ const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", instanceUrl: "https://mastodon.online",
timelineType: "profile", timelineType: "profile",
userId: "000180745", userId: "000180745",

12
examples/theme-timeline.html
View File

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

575
package-lock.json generated Normal file
View File

@ -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
}
}
}

49
package.json
View File

@ -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.", "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", "license": "GNU",
"private": false,
"author": { "author": {
"name": "idotj" "name": "idotj",
}, "url": "https://www.idotj.com"
"scripts": {
"test": "echo \"No test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://gitlab.com/idotj/mastodon-embed-feed-timeline.git"
}, },
"keywords": [ "keywords": [
"mastodon", "mastodon",
@ -20,9 +14,34 @@
"embedded", "embedded",
"fediverse" "fediverse"
], ],
"bugs": { "homepage": "https://gitlab.com/idotj/mastodon-embed-timeline",
"url": "https://gitlab.com/idotj/mastodon-embed-feed-timeline/-/issues" "repository": {
"type": "git",
"url": "git+https://gitlab.com/idotj/mastodon-embed-timeline.git"
}, },
"homepage": "https://gitlab.com/idotj/mastodon-embed-feed-timeline", "bugs": {
"license": "GNU" "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"
]
} }

20
rollup.config.js Normal file
View File

@ -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()],
},
];

4
src/mastodon-timeline.css
View File

@ -1,6 +1,6 @@
/* Mastodon embed feed timeline v4.0.4 */ /* Mastodon embed timeline v4.2.0 */
/* More info at: */ /* More info at: */
/* https://gitlab.com/idotj/mastodon-embed-feed-timeline */ /* https://gitlab.com/idotj/mastodon-embed-timeline */
/* Variables */ /* Variables */
.mt-container, .mt-container,

88
src/mastodon-timeline.js
View File

@ -1,13 +1,13 @@
/** /**
* Mastodon embed feed timeline * Mastodon embed timeline
* @author idotj * @author idotj
* @version 4.0.4 * @version 4.2.0
* @url https://gitlab.com/idotj/mastodon-embed-feed-timeline * @url https://gitlab.com/idotj/mastodon-embed-timeline
* @license GNU AGPLv3 * @license GNU AGPLv3
*/ */
"use strict"; "use strict";
class MastodonTimeline { export class Init {
constructor(customSettings = {}) { constructor(customSettings = {}) {
this.defaultSettings = { this.defaultSettings = {
mtContainerId: "mt-container", mtContainerId: "mt-container",
@ -34,6 +34,8 @@ class MastodonTimeline {
btnShowContent: "SHOW CONTENT", btnShowContent: "SHOW CONTENT",
btnSeeMore: "See more posts at Mastodon", btnSeeMore: "See more posts at Mastodon",
btnReload: "Refresh", btnReload: "Refresh",
insistSearchContainer: false,
insistSearchContainerTime: "3000",
}; };
this.mtSettings = { ...this.defaultSettings, ...customSettings }; this.mtSettings = { ...this.defaultSettings, ...customSettings };
@ -42,55 +44,85 @@ class MastodonTimeline {
this.mtBodyNode = ""; this.mtBodyNode = "";
this.fetchedData = {}; this.fetchedData = {};
this.mtInit(); this.#onDOMContentLoaded(() => {
this.#getContainerNode();
});
} }
/** /**
* Trigger callback when DOM loaded or complete * Trigger callback when DOM loaded or completed
* @param {function} c Callback executed * @param {function} c Callback executed
*/ */
onDOMContentLoaded(c) { #onDOMContentLoaded(c) {
if ( if (typeof document !== "undefined" && document.readyState === "complete") {
typeof document !== "undefined" &&
(document.readyState === "complete" ||
document.readyState === "interactive")
) {
c(); c();
} else if ( } else if (
typeof document !== "undefined" && typeof document !== "undefined" &&
(document.readyState !== "complete" || document.readyState !== "complete"
document.readyState !== "interactive")
) { ) {
document.addEventListener("DOMContentLoaded", c); document.addEventListener("DOMContentLoaded", c());
} }
} }
/** /**
* Initialize and build the timeline * Find main container in DOM before building the timeline
*/ */
mtInit() { #getContainerNode() {
// console.log("Creating Mastodon timeline with settings: ", this.mtSettings); // console.log("Initializing Mastodon timeline with settings: ", this.mtSettings);
this.onDOMContentLoaded(() => { const assignContainerNode = () => {
// Register container node
this.mtContainerNode = document.getElementById( this.mtContainerNode = document.getElementById(
this.mtSettings.mtContainerId this.mtSettings.mtContainerId
); );
// Register body node
this.mtBodyNode = this.mtBodyNode =
this.mtContainerNode.getElementsByClassName("mt-body")[0]; this.mtContainerNode.getElementsByClassName("mt-body")[0];
this.#loadColorTheme(); this.#loadColorTheme();
this.#buildTimeline("newTimeline"); this.#buildTimeline("newTimeline");
}); };
// Some frameworks render the DOM in deferred way and need some extra time
if (this.mtSettings.insistSearchContainer) {
const startCheck = performance.now();
const findContainerNode = () => {
// Check if the container is ready in DOM
if (document.getElementById(this.mtSettings.mtContainerId)) {
assignContainerNode();
} else {
// If the container is not found, check again
const currentCheck = performance.now();
if (
currentCheck - startCheck <
this.mtSettings.insistSearchContainerTime
) {
requestAnimationFrame(findContainerNode);
} else {
console.error(
`Impossible to find the <div> container with id: "${
this.mtSettings.mtContainerId
}" after several attempts for ${
this.mtSettings.insistSearchContainerTime / 1000
} seconds`
);
}
}
};
findContainerNode();
} else {
if (document.getElementById(this.mtSettings.mtContainerId)) {
assignContainerNode();
} else {
console.error(
`Impossible to find the <div> container with id: "${this.mtSettings.mtContainerId}". Please try to add the option 'insistSearchContainer: true' when initializing the script`
);
}
}
} }
/** /**
* Reload the timeline by fetching the lastest posts * Reload the timeline by fetching the lastest posts
*/ */
mtUpdate() { mtUpdate() {
this.onDOMContentLoaded(() => { this.#onDOMContentLoaded(() => {
this.mtBodyNode.replaceChildren(); this.mtBodyNode.replaceChildren();
this.mtBodyNode.insertAdjacentHTML( this.mtBodyNode.insertAdjacentHTML(
"afterbegin", "afterbegin",
@ -105,7 +137,7 @@ class MastodonTimeline {
* @param {string} themeType Type of color theme * @param {string} themeType Type of color theme
*/ */
mtColorTheme(themeType) { mtColorTheme(themeType) {
this.onDOMContentLoaded(() => { this.#onDOMContentLoaded(() => {
this.mtContainerNode.setAttribute("data-theme", themeType); this.mtContainerNode.setAttribute("data-theme", themeType);
}); });
} }
@ -217,7 +249,7 @@ class MastodonTimeline {
return { ...result, ...dataItem }; return { ...result, ...dataItem };
}, {}); }, {});
// console.log("Timeline data fetched: ", this.mtSettings.fetchedData); // console.log("Mastodon timeline data fetched: ", this.mtSettings.fetchedData);
resolve(); resolve();
}); });
}); });
@ -1042,7 +1074,7 @@ class MastodonTimeline {
} }
/** /**
* Open post in a new page avoiding any other natural link * Open post in a new tab/page avoiding any other natural link
* @param {event} e User interaction trigger * @param {event} e User interaction trigger
*/ */
#openPostUrl(e) { #openPostUrl(e) {