add mastodon timeline

2025-04-08 08:22:02 +04:00
parent 4564778567
commit eaa95838c6
5 changed files with 63 additions and 13 deletions
@@ -187,16 +187,32 @@ img {
 }

 /* Hero Section */
+.hero-mastodon-wrapper {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 30px;
+}
+
 .hero {
    position: relative;
-    width: 100%;
+    width: 50%;
    height: 400px;
    background-color: #888;
-    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 8px;
 }

+#mt-container {
+    width: 50%;
+    height: 400px;
+    border-radius: 8px;
+}
+
+.mt-body {
+    height: 100%;
+    overflow-y: auto;
+}
+
 .hero-content {
    position: absolute;
    top: 0;
@@ -572,7 +588,12 @@ img {
        display: none;
    }
    
-    .hero {
+    .hero-mastodon-wrapper {
+        flex-direction: column;
+    }
+    
+    .hero, #mt-container {
+        width: 100%;
        height: 300px;
    }
    
@@ -590,10 +611,6 @@ img {
        font-size: 20px;
    }
    
-    .hero {
-        height: 250px;
-    }
-    
    .hero-logo {
        font-size: 36px;
    }
@@ -6,6 +6,7 @@
    <title>Kaubuntu.re - Plateforme Multimédia</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="css/mastodon-timeline.min.css">
 </head>
 <body>
    <!-- Sidebar de navigation -->
@@ -88,15 +89,25 @@
            </div>
        </div>
        
-        <!-- Hero Banner -->
-        <div class="hero">
-            <div class="hero-content">
-                <div class="hero-logo">KAUBUNTU<span class="re">.RE</span></div>
-                <div class="play-button">
-                    <i class="fas fa-play"></i>
+        <!-- Hero and Mastodon container -->
+        <div class="hero-mastodon-wrapper">
+            <!-- Hero Banner -->
+            <div class="hero">
+                <div class="hero-content">
+                    <div class="hero-logo">KAUBUNTU<span class="re">.RE</span></div>
+                    <div class="play-button">
+                        <i class="fas fa-play"></i>
+                    </div>
+                </div>
+            </div>
+
+            <div id="mt-container" class="mt-container">
+                <div class="mt-body" role="feed">
+                    <div class="mt-loading-spinner"></div>
                </div>
            </div>
        </div>
+
        
        <!-- Hashtags en ligne -->
        <div class="tags-section">
@@ -444,5 +455,7 @@
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
+    <script src="js/mastodon-timeline.umd.js"></script>
+    <script src="js/mastodon-config.js"></script>
 </body>
 </html> 
@@ -0,0 +1,10 @@
+window.addEventListener("load", () => {
+  const myTimeline = new MastodonTimeline.Init({
+    instanceUrl: 'https://mamot.fr',
+    dateFormatLocale: 'fr-FR',
+    btnSeeMore: "Vori plus de post",
+    btnReload: "Rafraichir",
+    maxNbPostFetch: '10',
+    maxNbPostShow: '10'
+  });
+});