Update hashtag

Fix fullscreen mode on iOS/iPadOS
Hashtag #wasjetztzählt hinzugefügt
2024-05-05 09:10:49 +02:00 · 2024-05-04 11:57:17 +02:00 · 2024-01-21 11:42:57 +01:00 · 2024-01-20 15:19:31 +01:00 · 2024-01-20 13:29:50 +01:00 · 2024-01-20 13:28:25 +01:00
7 changed files with 45 additions and 29 deletions
--- a/README.md
+++ b/README.md
@ -1,9 +1,10 @@
 # Mastowall 1.1

+Forked from [https://github.com/rstockm/mastowall](https://github.com/rstockm/mastowall)
+
 Mastowall is a social wall application that displays posts from the [Mastodon](https://joinmastodon.org/) social network based on specified hashtags. It was written entirely by [ChatGPT4](https://openai.com/product/gpt-4), guided only by text prompts.

-<img width="1348" alt="image" src="https://github.com/rstockm/mastowall/assets/3195116/7060536e-4847-4e38-801e-3c0312b8b194">
-
+<img width="1348" alt="image" src="https://git.verdigado.com/NB-Public/mastowall/raw/branch/main/screenshot.jpg">

 Try it live: [Mastowall for BDK23](https://tretkowski.de/mastowall/?hashtags=bdk23,netzbegruenung&server=https://gruene.social)

--- a/config.json
+++ b/config.json
@ -5,8 +5,8 @@
  "duration": 10,
  "refreshDuration": 30,
  "maxAge": 604800,
-  "extraCards": [
-    "<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
-  ],
+//  "extraCards": [
+//    "<img src='sharepic.png' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
+//  ],
  "includeReplies": true
 }
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <title>Netzbegrünung Mastowall</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@ -38,11 +38,7 @@
                    </div>
                    <div class="form-group">
                        <label for="hashtag2">Hashtag 2:</label>
-                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="bdk23">
-                    </div>
-                    <div class="form-group">
-                        <label for="hashtag3">Hashtag 3:</label>
-                        <input type="text" class="form-control" id="hashtag3" placeholder="Enter a hashtag">
+                        <input type="text" class="form-control" id="hashtag2" placeholder="Enter a hashtag" value="lptsh">
                    </div>
                    <div class="form-group">
                        <label for="serverUrl">Server:</label>
--- a/screenshot.jpg
+++ b/screenshot.jpg
--- a/script.js
+++ b/script.js
@ -76,9 +76,9 @@ const fetchConfig = async function() {
        maxAge = 60 * 60 * 24 * 7;
        duration = 10000;
        refresh = 30000;
-        extraCards = [
-            "<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
-        ];
+//        extraCards = [
+//            "<div><img src='sharepic.png' style='max-width: 100%;max-height: 100%'></div>"
+//        ];
        return "https://gruene.social";
    }
 }
@ -104,6 +104,14 @@ const updateTimesOnPage = function() {
    });
 };

+// replace certain emojies in some text with images
+const replaceEmojies = (text, emojis) => {
+    emojis.forEach(emoji => {
+        text = text.replaceAll(`:${emoji.shortcode}:`, `<img class="emoji" src="${emoji.static_url}">`);
+    });
+    return text;
+};
+
 // displayPost creates and displays a post
 const displayPost = function(post) {
    if (existingPosts.includes(post.id) || (!includeReplies && post.in_reply_to_id !== null)) return 0;
@ -115,10 +123,14 @@ const displayPost = function(post) {
            <div class="card m-2 p-2">
                <div class="d-flex align-items-center mb-2">
                    <img src="${post.account.avatar}" class="avatar-img rounded-circle mr-2">
-                    <p class="m-0">${DOMPurify.sanitize(post.account.display_name)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="m-0">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)}  <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                </div>
-                ${post.media_attachments[0] ? `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">` : ''}
-                <p class="card-text">${DOMPurify.sanitize(post.content)}</p>
+                ${post.media_attachments[0] ?
+                    (post.media_attachments[0].url.endsWith('.mp4') ?
+                        `<video src="${post.media_attachments[0].url}" controls autoplay muted loop></video>` :
+                        `<img src="${post.media_attachments[0].url}" class="card-img-top mb-2">`) :
+                    ''}
+                <p class="card-text">${replaceEmojies(DOMPurify.sanitize(post.content), post.emojis)}</p>
                ${post.spoiler_text ? `<p class="card-text text-muted spoiler">${DOMPurify.sanitize(post.spoiler_text)}</p>` : ''}
                <p class="card-text text-right"><small class="text-muted"><a class="time" href="${post.url}" target="_blank" data-time="${post.created_at}">${timeAgo(secondsAgo(new Date(post.created_at)))}</a></small></p>
            </div>
@ -185,17 +197,22 @@ const updateCarousel = function(slides, posts) {
        else {
            newHTML += `<div class="carousel-item" data-interval="${duration}" data-pause="false">`;
        }
-        const postContent = DOMPurify.sanitize(post.content);
+        const postContent = replaceEmojies(DOMPurify.sanitize(post.content), post.emojis);
        newHTML += `
            <div class="card-big">
                <div class="d-flex align-items-center mb-4">
                    <img src="${post.account.avatar}" class="avatar-img-big rounded-circle mr-4">
-                    <p class="avatar-name">${DOMPurify.sanitize(post.account.display_name)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
+                    <p class="avatar-name">${replaceEmojies(DOMPurify.sanitize(post.account.display_name), post.account.emojis)} <span class="user-name">@${DOMPurify.sanitize(post.account.acct)}</span></p>
                </div>
                <hr>
                <div class="row align-items-center vertical-align-center">
-                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 800 ? `style="font-size: 0.9em;"`: ``}>${postContent}</div></div>
-                    ${post.media_attachments[0] ? `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>` : ''}
+                    <div class="${post.media_attachments[0] ? `col-md-6` : `col-md-12`}"><div class="card-text" ${strip(postContent).length > 700 ? `style="font-size: ${strip(postContent).length > 1000 ? `0.5`:`0.9`}em;"`: ``}>${postContent}</div></div>
+                    ${post.media_attachments[0] ?
+                        (post.media_attachments[0].url.endsWith('.mp4') ?
+                            `<div class="col-md-6"><video src="${post.media_attachments[0].url}" controls autoplay muted loop class="card-img-bottom" align="center"></video></div>` :
+                            `<div class="col-md-6"><img src="${post.media_attachments[0].url}" class="card-img-bottom" align="center"> </div>`) :
+                        ''}
+
                </div>
                <hr>
                <p class="card-text text-right">
@ -210,7 +227,7 @@ const updateCarousel = function(slides, posts) {
        newHTML += '</div>';
    }
    for( let i = 0; i < extraCards.length; i++ ) {
-        newHTML += `<div class="carousel-item" data-mdb-interval="${duration * 2}" data-mdb-pause="false">
+        newHTML += `<div class="carousel-item" data-interval="${duration * 2}" data-pause="false">
        <div className="card-big">
            <div class="d-flex align-items-center mb-4">
                ${extraCards[i]}
@ -263,7 +280,7 @@ const handleHashtagDisplayClick = function(serverUrl) {

    const currentHashtags = getUrlParameter('hashtags').split(',');
    if ( currentHashtags = null ) {
-        currentHasttags = "netzbegruenung,bdk23".split(',')
+        currentHasttags = "netzbegruenung,lpt24".split(',')
    }

    for (let i = 0; i < currentHashtags.length; i++) {
@ -314,7 +331,7 @@ $(document).ready(async function() {
    
    let hashtags = getUrlParameter('hashtags');
    if ( hashtags == '' ) {
-        hashtags = "netzbegruenung,bdk23";
+        hashtags = "netzbegruenung,lptsh,wasjetztzählt";
    }
    const hashtagsArray = hashtags ? hashtags.split(',') : [];
    const serverUrl = getUrlParameter('server') || defaultServerUrl;
@ -341,9 +358,7 @@ $(document).ready(async function() {
            const newPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
            let updated = updateWall(newPosts.flat());
            if ( updated > 0 ) {
-                hideCarousel()
                updateCarousel(slides, newPosts.flat());
-                setTimeout(async function() { showCarousel(); }, duration)
            }
        }, refresh);
    } else {
--- a/sharepic.png
+++ b/sharepic.png
--- a/styles.css
+++ b/styles.css
@ -51,9 +51,9 @@
 }

 .carousel .card-text {
-    font-size: 1.4em;
+    font-size: 1.6em;
    overflow: hidden;
-    max-height: 60vh;
+    max-height: 50vh;
 }

 .card {
@ -208,7 +208,7 @@ body {

 .text-muted {
    color:#6c757d !important;
-    font-size: 1.2em;
+    font-size: 1em;
    text-align: right;
 }

@ -223,4 +223,8 @@ body {

 .footer a {
    color: rgba(255, 255, 255, 0.8) !important;
+}
+
+.emoji {
+    height: 1em;
 }
Author	SHA1	Message	Date
Norbert Tretkowski	dbf57bea46	Update hashtag	2024-05-05 09:10:49 +02:00
Norbert Tretkowski	bd1d3a5e2e	Fix fullscreen mode on iOS/iPadOS	2024-05-04 11:57:17 +02:00
Norbert Tretkowski	5099cd92a5	Hashtag #wasjetztzählt hinzugefügt	2024-01-21 11:42:57 +01:00
Norbert Tretkowski	aacb05aee2	Add support for displaying video attachments based on https://github.com/rstockm/mastowall/pull/10	2024-01-20 15:19:31 +01:00
Norbert Tretkowski	1faf17e67f	Update screenshot in README.md	2024-01-20 13:29:50 +01:00
Norbert Tretkowski	dcc607df51	Use jpg for screenshot	2024-01-20 13:28:25 +01:00
Norbert Tretkowski	ba7df6c13e	Add screenshot	2024-01-20 13:27:16 +01:00
Norbert Tretkowski	1237e84670	Update hashtags	2024-01-20 10:00:38 +01:00
Norbert Tretkowski	5c111f86d7	Sharepic fuer LDK24 Potsdam	2024-01-20 09:58:54 +01:00
Tretkowski Norbert	f216b42011	Merge pull request 'Even more improvements' (#5 ) from lisswoma/mastowall:for-pi2 into main Reviewed-on: #5	2023-11-25 10:21:11 +01:00
Max L.	ec902d12f2	Fix extra cards display duration	2023-11-25 02:21:55 +01:00
Max L.	004c92b392	Add emoji support	2023-11-25 02:18:39 +01:00
Max L.	7acd5f4e38	Improve long post handling	2023-11-25 01:48:53 +01:00
Max L.	8efbafef3c	Directly show new posts in carousel	2023-11-25 01:13:05 +01:00
Max L.	c12f8220f4	Improve font sizes	2023-11-25 01:08:41 +01:00
Tretkowski Norbert	39138ef889	Merge pull request 'for-pi2' (#4 ) from for-pi2 into main Reviewed-on: #4	2023-11-24 21:17:28 +01:00
Norbert Tretkowski	e821501f6c	Link to original project on GitHub	2023-11-24 08:05:29 +01:00
Tretkowski Norbert	98d8c3b994	Merge pull request 'for-pi2' (#2 ) from for-pi2 into main Reviewed-on: #2	2023-11-24 07:54:18 +01:00