Add gitlab CI

This commit is contained in:
idotj 2024-02-26 13:55:28 +01:00
parent 580fd5809b
commit 4f8b4c34d2
2 changed files with 307 additions and 303 deletions

12
.gitlab-ci.yml Normal file
View File

@ -0,0 +1,12 @@
image: node:latest
stages:
- deploy
deploy:
stage: deploy
script:
- echo "@scope:registry=https://${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/" > .npmrc
- echo "//${CI_SERVER_HOST}/api/v4/projects/${CI_PROJECT_ID}/packages/npm/:_authToken=${CI_JOB_TOKEN}" >> .npmrc
- npm publish
environment: production

598
README.md
View File

@ -1,303 +1,295 @@
# 🐘 Mastodon embed timeline (new v4.2) # 🐘 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 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
- [🐘 Mastodon embed timeline (new v4.2)](#-mastodon-embed-timeline-new-v42) - [Installation](#installation)
- [📋 Table of contents](#-table-of-contents) - [Download](#download)
- [Installation](#installation) - [CDN](#cdn)
- [Download](#download) - [Package manager](#package-manager)
- [CDN](#cdn) - [Setup](#setup)
- [Package manager](#package-manager) - [Initialize](#initialize)
- [Setup](#setup) - [Local timeline](#local-timeline)
- [Initialize](#initialize) - [Profile timeline](#profile-timeline)
- [Local timeline](#local-timeline) - [Hashtag timeline](#hashtag-timeline)
- [Profile timeline](#profile-timeline) - [Customize](#customize)
- [Hashtag timeline](#hashtag-timeline) - [API](#api)
- [Customize](#customize) - [Examples](#examples)
- [API](#api)
- [Examples](#examples) ## Installation
- [🌐 Browser support](#-browser-support)
- [🚀 Improve me](#-improve-me) ### Download
- [⚖️ License](#-license)
- [💬 FAQ](#-faq) Ready-to-use compiled and minified files to easily start.
## Installation - Download into your project the following files:
- `dist/mastodon-timeline.min.css`
### Download - `dist/mastodon-timeline.umd.js`
Ready-to-use compiled and minified files to easily start. Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example:
- Download into your project the following files: ```html
- `dist/mastodon-timeline.min.css` <!DOCTYPE html>
- `dist/mastodon-timeline.umd.js` <html lang="en">
<head>
Now call the CSS and JS files in your HTML page using the `<link>` and `<script>` tags as follows in this example: <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
```html <title>Your site title</title>
<!DOCTYPE html>
<html lang="en"> <!-- CSS -->
<head> <link href="path/to/mastodon-timeline.min.css" rel="stylesheet" />
<meta charset="UTF-8" /> </head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <body>
<title>Your site title</title> <!-- Your HTML content -->
<!-- CSS --> <!-- JavaScript -->
<link href="path/to/mastodon-timeline.min.css" rel="stylesheet" /> <script src="path/to/mastodon-timeline.umd.js"></script>
</head> <script>
<body> // You can initialize the script here
<!-- Your HTML content --> </script>
</body>
<!-- JavaScript --> </html>
<script src="path/to/mastodon-timeline.umd.js"></script> ```
<script>
// You can initialize the script here ### CDN
</script>
</body> This option allows you to get started quickly without the need to upload any files into your server.
</html>
``` ```html
JS and CSS files available soon!
### CDN ```
This option allows you to get started quickly without the need to upload any files into your server. ### Package manager
```html Install your timeline using npm or yarn:
<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" />
```terminal
<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> npm install @idot/mastodon-embed-timeline
``` ```
### Package manager or
Install your timeline using npm or yarn: ```terminal
yarn add @idot/mastodon-embed-timeline
```terminal ```
npm install @idot/mastodon-embed-timeline
``` After installation, you can import the widget as follows:
or ```js
import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";
```terminal ```
yarn add @idot/mastodon-embed-timeline
``` Make sure to import also the `@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css` file in your project.
After installation, you can import the widget as follows: ## Setup
```js ### Initialize
import * as MastodonTimeline from "@idotj/mastodon-embed-timeline";
``` The first step to get your timeline up is to add the following HTML structure in your page:
Make sure to import also the `@idotj/mastodon-embed-timeline/dist/mastodon-timeline.min.css` file in your project. ```html
<div id="mt-container" class="mt-container">
## Setup <div class="mt-body" role="feed">
<div class="mt-loading-spinner"></div>
### Initialize </div>
</div>
The first step to get your timeline up is to add the following HTML structure in your page: ```
```html Then after that you can initialize the script by running:
<div id="mt-container" class="mt-container">
<div class="mt-body" role="feed"> ```js
<div class="mt-loading-spinner"></div> const myTimeline = new MastodonTimeline.Init();
</div> ```
</div>
``` By default it will show a timeline with 20 posts from the instance [mastodon.social](https://mastodon.social/public/local)
Then after that you can 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
const myTimeline = new MastodonTimeline.Init(); window.addEventListener("load", () => {
``` 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: 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**:
```js #### Local timeline
window.addEventListener("load", () => {
const myTimeline = new MastodonTimeline.Init(); Add the following option/value when initializing the timeline:
});
``` ```js
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**: instanceUrl: "https://mastodon.online",
});
#### Local timeline ```
Add the following option/value when initializing the timeline: It will show a timeline with posts from the instance [mastodon.online](https://mastodon.online/public/local)
```js #### Profile timeline
const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", Add the following options/values when initializing the timeline:
});
``` ```js
const myTimeline = new MastodonTimeline.Init({
It will show a timeline with posts from the instance [mastodon.online](https://mastodon.online/public/local) instanceUrl: "https://mastodon.online",
timelineType: "profile",
#### Profile timeline userId: "000180745",
profileName: "@idotj",
Add the following options/values when initializing the timeline: });
```
```js
const myTimeline = new MastodonTimeline.Init({ It will show a timeline with posts from my Mastodon profile [@idotj](https://mastodon.online/@idotj)
instanceUrl: "https://mastodon.online",
timelineType: "profile", If you don't know your `userId` you have two ways to get it:
userId: "000180745",
profileName: "@idotj", - 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.
It will show a timeline with posts from my Mastodon profile [@idotj](https://mastodon.online/@idotj) - 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/)
If you don't know your `userId` you have two ways to get it:
#### Hashtag timeline
- 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> Add the following options/values when initializing the timeline:
The first value you see in the list is your `id` number.
```js
- Click on the link below and put your `@USERNAME` and `@INSTANCE` in the input field: const myTimeline = new MastodonTimeline.Init({
[https://prouser123.me/mastodon-userid-lookup/](https://prouser123.me/mastodon-userid-lookup/) instanceUrl: "https://mastodon.online",
timelineType: "hashtag",
#### Hashtag timeline hashtagName: "fediverse",
});
Add the following options/values when initializing the timeline: ```
```js It will show a timeline with posts containing the hashtag [#fediverse](https://mastodon.online/tags/fediverse)
const myTimeline = new MastodonTimeline.Init({
instanceUrl: "https://mastodon.online", ### Customize
timelineType: "hashtag",
hashtagName: "fediverse", 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
It will show a timeline with posts containing the hashtag [#fediverse](https://mastodon.online/tags/fediverse) mtContainerId: "mt-container",
### Customize // Mastodon instance Url (including https://)
instanceUrl: "https://mastodon.social",
You can pass more options/values to personalize your timeline. Here you have all the available options:
// Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
```js timelineType: "local",
// Id of the <div> containing the timeline
mtContainerId: "mt-container", // Your user ID number on Mastodon instance. Leave it empty if you didn't choose 'profile' as type of timeline
userId: "",
// Mastodon instance Url (including https://)
instanceUrl: "https://mastodon.social", // 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: "",
// Choose type of posts to show in the timeline: 'local', 'profile', 'hashtag'. Default: local
timelineType: "local", // The name of the hashtag (not including the # symbol). Leave it empty if you didn't choose 'hashtag' as type of timeline
hashtagName: "",
// Your user ID number on Mastodon instance. Leave it empty if you didn't choose 'profile' as type of timeline
userId: "", // Class name for the loading spinner (also used in CSS file)
spinnerClass: "mt-loading-spinner",
// 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: "", // Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
defaultTheme: "auto",
// The name of the hashtag (not including the # symbol). Leave it empty if you didn't choose 'hashtag' as type of timeline
hashtagName: "", // Maximum number of posts to request to the server. Default: 20
maxNbPostFetch: "20",
// Class name for the loading spinner (also used in CSS file)
spinnerClass: "mt-loading-spinner", // Maximum number of posts to show in the timeline. Default: 20
maxNbPostShow: "20",
// Preferred color theme: 'light', 'dark' or 'auto'. Default: auto
defaultTheme: "auto", // Hide unlisted posts. Default: don't hide
hideUnlisted: false,
// Maximum number of posts to request to the server. Default: 20
maxNbPostFetch: "20", // Hide boosted posts. Default: don't hide
hideReblog: false,
// Maximum number of posts to show in the timeline. Default: 20
maxNbPostShow: "20", // Hide replies posts. Default: don't hide
hideReplies: false,
// Hide unlisted posts. Default: don't hide
hideUnlisted: false, // Hide video image preview and load video player instead. Default: don't hide
hideVideoPreview: false,
// Hide boosted posts. Default: don't hide
hideReblog: false, // Hide preview card if post contains a link, photo or video from a Url. Default: don't hide
hidePreviewLink: false,
// Hide replies posts. Default: don't hide
hideReplies: false, // Hide custom emojis available on the server. Default: don't hide
hideEmojos: false,
// Hide video image preview and load video player instead. Default: don't hide
hideVideoPreview: false, // Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Default: don't apply
markdownBlockquote: false,
// Hide preview card if post contains a link, photo or video from a Url. Default: don't hide
hidePreviewLink: false, // Hide replies, boosts and favourites posts counter. Default: don't hide
hideCounterBar: false,
// Hide custom emojis available on the server. Default: don't hide
hideEmojos: false, // Limit the text content to a maximum number of lines. Default: 0 (unlimited)
txtMaxLines: "0",
// Converts Markdown symbol ">" at the beginning of a paragraph into a blockquote HTML tag. Default: don't apply
markdownBlockquote: false, // Customize the text of the button used for showing/hiding sensitive/spolier text
btnShowMore: "SHOW MORE",
// Hide replies, boosts and favourites posts counter. Default: don't hide btnShowLess: "SHOW LESS",
hideCounterBar: false,
// Customize the text of the button used for showing sensitive/spolier media content
// Limit the text content to a maximum number of lines. Default: 0 (unlimited) btnShowContent: "SHOW CONTENT",
txtMaxLines: "0",
// 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
// Customize the text of the button used for showing/hiding sensitive/spolier text btnSeeMore: "See more posts at Mastodon",
btnShowMore: "SHOW MORE",
btnShowLess: "SHOW LESS", // 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",
// Customize the text of the button used for showing sensitive/spolier media content
btnShowContent: "SHOW CONTENT", // 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,
// 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", // Defines the maximum time to continue searching for the main <div> container. Default: 3 seconds
insistSearchContainerTime: "3000",
// 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 ### API
insistSearchContainer: false,
| Function | Description |
// Defines the maximum time to continue searching for the main <div> container. Default: 3 seconds | ------------------------- | ------------------------------------------------------------------------------- |
insistSearchContainerTime: "3000", | `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
| `mtUpdate()` | Reload the timeline by fetching the lastest posts |
```
### Examples
### API
The folder `examples/` contains several demos in HTML to play with. Download the full project and open each HTML file in your favorite browser.
| Function | Description |
| ------------------------- | ------------------------------------------------------------------------------- | 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.
| `mtColorTheme(themeType)` | Apply a theme color. `themeType` accepts only two values: `'light'` or `'dark'` |
| `mtUpdate()` | Reload the timeline by fetching the lastest posts | ## 🌐 Browser support
### Examples Mastodon embed timeline is supported on the latest versions of the following browsers:
The folder `examples/` contains several demos in HTML to play with. Download the full project and open each HTML file in your favorite browser. - Chrome
- Firefox
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. - Edge
- Safari
## 🌐 Browser support - Brave
- Opera
Mastodon embed timeline is supported on the latest versions of the following browsers:
## 🚀 Improve me
- Chrome
- Firefox Feel free to add your features and improvements.
- Edge 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.
- Safari
- Brave ## ⚖️ License
- Opera
GNU Affero General Public License v3.0
## 🚀 Improve me
## 💬 FAQ
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. 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.
## ⚖️ License 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.
GNU Affero General Public License v3.0 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)
## 💬 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)