Ein anpassbares Mastodon-Widget, das es ermöglicht, Toots von einem bestimmten Benutzer oder einer Instanz anzuzeigen. Es unterstützt mehrere Themes, benutzerdefinierte Optionen und ein responsives Design.
- Anpassbare Themes: Unterstützung für verschiedene Farbthemen wie
dark,mastodon,green,midnight,inkblackundcostume. - Responsives Design: Passt sich flexibel an verschiedene Bildschirmgrößen an.
- Benutzerdefinierte Optionen: Konfigurierbar über JavaScript-Optionen.
- Unterstützung für Mastodon-Funktionen: Zeigt Toots, Medien, Antworten, Boosts und Favoriten an.
- Hover-Effekte und Icons: Verbesserte Benutzerinteraktion durch SVG-Icons und Effekte.
- Automatische Aktualisierung: Lädt Toots in regelmäßigen Abständen neu.
-
CSS einbinden
Füge die Dateimastodon-widget.cssin dein Projekt ein und binde sie in deinem HTML ein:<link rel="stylesheet" href="mastodon-widget.css">
-
JavaScript einbinden
Füge die Dateimastodon-widget.jsin dein Projekt ein:<script src="mastodon-widget.js"></script>
-
HTML-Container hinzufügen
Erstelle einen Container, in dem das Widget angezeigt werden soll:<div id="mastodon-widget"></div>
-
Widget initialisieren
Initialisiere das Widget mit deinen Einstellungen:<script> MastodonWidget.init({ instanceUrl: "https://mastodon.social", user: "@username", elementId: "mastodon-widget", theme: "dark", maxToots: 5, showHeader: true, showFooter: true, interval: 60, // Aktualisierung alle 60 Sekunden }); </script>
Die Datei mastodon-widget.css verwendet CSS-Variablen, um die Anpassung zu erleichtern:
:root {
--bg: #fff; /* Hintergrundfarbe */
--text: #111; /* Textfarbe */
--border: #ccc; /* Rahmenfarbe */
--hashtag: #027ec5; /* Farbe für Hashtags */
--button-bg: #a3a3a3; /* Hintergrundfarbe für Buttons */
--button-text: #111; /* Textfarbe für Buttons */
}Jedes Theme definiert eigene Farben:
[data-theme="dark"] {
--bg: #1e1e1e;
--text: #eee;
--border: #444;
--hashtag: #6f6f6f;
--button-bg: #454545;
--button-text: #eee;
}
[data-theme="mastodon"] {
--bg: #563ACC;
--text: #f4f4f4;
--border: #785ee3;
--hashtag: #f4f4f4;
--button-bg: #f4f4f4;
--button-text: #563ACC;
}#mastodon-widget {
font-family: "Roboto", sans-serif;
border: 1px solid var(--border);
background: var(--bg);
color: var(--text);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
resize: both;
width: 100%;
height: 100%;
box-sizing: border-box;
}Die init-Funktion wird verwendet, um das Widget zu konfigurieren und zu starten:
MastodonWidget.init({
instanceUrl: "https://mastodon.social",
user: "@username",
elementId: "mastodon-widget",
theme: "dark",
maxToots: 5,
showHeader: true,
showFooter: true,
interval: 60, // Aktualisierung alle 60 Sekunden
});instanceUrl: Die URL der Mastodon-Instanz.user: Der Benutzername des Mastodon-Kontos (z. B.@username).elementId: Die ID des Containers, in dem das Widget angezeigt wird.theme: Das Theme des Widgets (dark,mastodon,green, etc.).maxToots: Maximale Anzahl der anzuzeigenden Toots.showHeader: Zeigt den Header mit Benutzerinformationen an.showFooter: Zeigt den Footer mit einem Profil-Link an.interval: Intervall für die automatische Aktualisierung (in Sekunden).
fetchToots: Lädt Toots von der Mastodon-API.renderToots: Rendert die Toots im HTML-Container.formatRelativeTime: Formatiert das Datum in eine relative Zeitangabe (z. B. "vor 2 Stunden").
Hier ist ein Beispiel für die Verwendung des Widgets:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mastodon Widget</title>
<link rel="stylesheet" href="mastodon-widget.css">
</head>
<body>
<div id="mastodon-widget"></div>
<script src="mastodon-widget.js"></script>
<script>
MastodonWidget.init({
instanceUrl: "https://mastodon.social",
user: "@username",
elementId: "mastodon-widget",
theme: "dark",
maxToots: 5,
showHeader: true,
showFooter: true,
interval: 60,
});
</script>
</body>
</html>Dieses Projekt steht unter MIT Lizenz.
Viel Spaß beim Verwenden des Mastodon-Widgets!
