Compare commits
No commits in common. "bcaa5a5edd2607dfd8a72c821f3653e57c9e2d5c" and "7edce5ab0fe775260c70e7ab79c2f38827fbc62e" have entirely different histories.
bcaa5a5edd
...
7edce5ab0f
4 changed files with 23 additions and 99 deletions
|
|
@ -1,12 +1,6 @@
|
|||
{
|
||||
"navbarBrandText": "Netzbegrünung Mastowall - gruene.social",
|
||||
"navbarBrandText": "Netzbegrünung Mastowall",
|
||||
"defaultServerUrl": "https://gruene.social",
|
||||
"navbarColor": "#008939",
|
||||
"duration": 10,
|
||||
"refreshDuration": 30,
|
||||
"maxAge": 604800,
|
||||
"extraCards": [
|
||||
"<img src='sharepic.jpg' style='max-width: 100%;max-height: 100%;vertical-align: middle;'>"
|
||||
],
|
||||
"includeReplies": true
|
||||
}
|
||||
|
|
|
|||
82
script.js
82
script.js
|
|
@ -1,6 +1,12 @@
|
|||
// The existingPosts array is used to track already displayed posts
|
||||
let existingPosts = [];
|
||||
|
||||
// below times are in milliseconds
|
||||
// duration for slide animations
|
||||
let duration = 5000;
|
||||
// refresh rate
|
||||
let refresh = 30000;
|
||||
|
||||
// getUrlParameter helps to fetch URL parameters
|
||||
function getUrlParameter(name) {
|
||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
||||
|
|
@ -17,44 +23,23 @@ const secondsAgo = date => Math.floor((new Date() - date) / 1000);
|
|||
const timeAgo = function(seconds) {
|
||||
// An array of intervals for years, months, days, hours, and minutes.
|
||||
const intervals = [
|
||||
{ limit: 31536000, singular: 'Jahre', plural: 'Jahren' },
|
||||
{ limit: 2592000, singular: 'Monat', plural: 'Monaten' },
|
||||
{ limit: 86400, singular: 'Tag', plural: 'Tagen' },
|
||||
{ limit: 3600, singular: 'Stunde', plural: 'Stunden' },
|
||||
{ limit: 60, singular: 'Minute', plural: 'Minuten' }
|
||||
{ limit: 31536000, text: 'Jahren' },
|
||||
{ limit: 2592000, text: 'Monaten' },
|
||||
{ limit: 86400, text: 'Tagen' },
|
||||
{ limit: 3600, text: 'Stunden' },
|
||||
{ limit: 60, text: 'Minuten' }
|
||||
];
|
||||
|
||||
// Loop through the intervals to find which one is the best fit.
|
||||
for (let interval of intervals) {
|
||||
if (seconds >= interval.limit) {
|
||||
let amount = Math.floor(seconds / interval.limit);
|
||||
let text;
|
||||
if (amount !== 1) {
|
||||
text = interval.plural;
|
||||
} else {
|
||||
text = interval.singular;
|
||||
}
|
||||
return `Vor ${amount} ${text}`;
|
||||
return "Vor " + Math.floor(seconds / interval.limit) + ` ${interval.text}`;
|
||||
}
|
||||
}
|
||||
let text = "Sekunde";
|
||||
let amount = Math.floor(seconds);
|
||||
if (amount !== 1) {
|
||||
text += "n";
|
||||
}
|
||||
return `Vor ${amount} ${text}`;
|
||||
return "Vor " + Math.floor(seconds) + " Sekunden";
|
||||
};
|
||||
|
||||
let includeReplies;
|
||||
// max post age in seconds
|
||||
let maxAge;
|
||||
// below times are in milliseconds
|
||||
// duration for slide animations
|
||||
let duration;
|
||||
// refresh rate
|
||||
let refresh;
|
||||
// extra cards text
|
||||
let extraCards;
|
||||
|
||||
// fetchConfig fetches the configuration from the config.json file
|
||||
const fetchConfig = async function() {
|
||||
|
|
@ -63,22 +48,12 @@ const fetchConfig = async function() {
|
|||
$('#navbar-brand').text(config.navbarBrandText);
|
||||
$('.navbar').css('background-color', config.navbarColor);
|
||||
includeReplies = config.includeReplies;
|
||||
maxAge = config.maxAge;
|
||||
duration = config.duration * 1000;
|
||||
refresh = config.refreshDuration * 1000;
|
||||
extraCards = config.extraCards;
|
||||
return config.defaultServerUrl;
|
||||
} catch (error) {
|
||||
console.log("Error loading config.json:", error);
|
||||
$('#navbar-brand').text("Netzbegrünung Mastowall - gruene.social");
|
||||
$('#navbar-brand').text("Netzbegrünung Mastowall");
|
||||
$('.navbar').css('background-color', "#008939");
|
||||
includeReplies = true;
|
||||
maxAge = 60 * 60 * 24 * 7;
|
||||
duration = 10000;
|
||||
refresh = 30000;
|
||||
extraCards = [
|
||||
"<div><img src='sharepic.jpg' style='max-width: 100%;max-height: 100%'></div>"
|
||||
];
|
||||
return "https://gruene.social";
|
||||
}
|
||||
}
|
||||
|
|
@ -113,7 +88,7 @@ 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">${DOMPurify.sanitize(post.account.display_name)}</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>
|
||||
|
|
@ -129,22 +104,11 @@ const displayPost = function(post) {
|
|||
return 1;
|
||||
};
|
||||
|
||||
const processPosts = function(posts) {
|
||||
posts = posts.filter((post) => {
|
||||
return secondsAgo(new Date(post.created_at)) < maxAge && post.content.indexOf("nitter.") === -1
|
||||
});
|
||||
|
||||
return posts;
|
||||
};
|
||||
|
||||
// updateWall displays all posts
|
||||
const updateWall = function(posts) {
|
||||
if (!posts || posts.length === 0) return;
|
||||
|
||||
posts = processPosts(posts);
|
||||
|
||||
posts.sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
|
||||
|
||||
let ret = 0
|
||||
posts.forEach(post => ret += displayPost(post));
|
||||
$('.masonry-grid').masonry('layout');
|
||||
|
|
@ -156,8 +120,6 @@ const updateWall = function(posts) {
|
|||
const updateCarousel = function(slides, posts) {
|
||||
if (!posts || posts.length === 0) return;
|
||||
|
||||
posts = processPosts(posts);
|
||||
|
||||
posts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
|
||||
|
||||
// remove slides in carousel
|
||||
|
|
@ -179,7 +141,7 @@ const updateCarousel = function(slides, posts) {
|
|||
<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">${DOMPurify.sanitize(post.account.display_name)}</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row align-items-center vertical-align-center">
|
||||
|
|
@ -198,15 +160,6 @@ 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">
|
||||
<div className="card-big">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
${extraCards[i]}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
newHTML += '</div>'
|
||||
document.getElementById("myCarousel").innerHTML = newHTML;
|
||||
};
|
||||
|
|
@ -311,8 +264,7 @@ $(document).ready(async function() {
|
|||
const popover = $('#popover');
|
||||
|
||||
if (hashtagsArray.length > 0 && hashtagsArray[0] !== '') {
|
||||
let allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||
|
||||
const allPosts = await Promise.all(hashtagsArray.map(hashtag => fetchPosts(serverUrl, hashtag)));
|
||||
updateWall(allPosts.flat());
|
||||
setTimeout(function() {
|
||||
$('.masonry-grid').masonry('layout');
|
||||
|
|
|
|||
BIN
sharepic.jpg
BIN
sharepic.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 129 KiB |
30
styles.css
30
styles.css
|
|
@ -66,7 +66,7 @@
|
|||
|
||||
/* Custom navbar styles */
|
||||
.navbar {
|
||||
min-height: 50px; /* reduce the height of the navbar */
|
||||
height: 50px; /* reduce the height of the navbar */
|
||||
background-color: rgb(0, 137, 57);
|
||||
margin-bottom: 10px !important;
|
||||
top: -10px !important;
|
||||
|
|
@ -76,13 +76,13 @@
|
|||
.navbar-brand {
|
||||
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
||||
margin: 0 auto; /* center the brand name */
|
||||
font-size: 1.8em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.navbar-info {
|
||||
color: rgba(255, 255, 255, 0.8) !important; /* change the text color */
|
||||
margin: 0 auto; /* center the brand name */
|
||||
font-size: 2.4em;
|
||||
font-size: 1.2em;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
|
|
@ -139,11 +139,6 @@ body {
|
|||
padding-top:0.3em
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: normal;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 2000px !important;
|
||||
}
|
||||
|
|
@ -186,10 +181,6 @@ body {
|
|||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.card-text ~ p {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.card-img-bottom {
|
||||
max-width: 600px;
|
||||
max-height: 500px;
|
||||
|
|
@ -205,19 +196,6 @@ body {
|
|||
|
||||
.text-muted {
|
||||
color:#6c757d !important;
|
||||
font-size: 1.2em;
|
||||
font-size: 0.6em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.footer .text-muted {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: rgba(255, 255, 255, 0.8) !important;
|
||||
}
|
||||
Loading…
Reference in a new issue