commit 71515fd00c07a14b2eb19e78c5318ecf41113d8d
parent eab40f9bb91d4b61e5cf3f453cfdfb6d47f24067
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date: Wed, 12 Mar 2025 18:59:37 +0100
feat: mark posts as inactive if they are older than 24h
Diffstat:
3 files changed, 37 insertions(+), 7 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -43,4 +43,11 @@ a.button > img {
width: auto;
margin-right: 5px;
}
-
+/* inactive class */
+.inactive {
+ opacity: 0.5;
+}
+.inactive:hover,
+.inactive:focus {
+ opacity: 1.0;
+}
diff --git a/assets/js/mark_old.js b/assets/js/mark_old.js
@@ -0,0 +1,22 @@
+function mark_as_old(obj) {
+ // get current time
+ let now = new Date();
+
+ // get object time data attribute
+ let time = new Date(obj.getAttribute("data"));
+
+ // check whether object is older than 24 hours
+ if ((now - time) > (24 * 60 * 60 * 1000)) {
+ obj.classList.add("inactive");
+ } else {
+ obj.classList.remove("inactive");
+ }
+}
+
+function check_articles() {
+ // find all article sections
+ let articles = document.querySelectorAll("section");
+
+ // mark old articles as inactive
+ articles.forEach(mark_as_old);
+}
diff --git a/template.tt b/template.tt
@@ -20,12 +20,13 @@
<link rel="apple-touch-icon" href="assets/favicon.png">
<link rel="stylesheet" type="text/css" href="assets/css/simple.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
+ <script async src="assets/js/mark_as_old.js"></script>
<link rel="alternate" title="[%feed.title %]" type="application/atom+xml" href="rss.xml">
<link crossorigin="use-credentials" rel="manifest" href=<!--MANIFEST-->>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
- <body>
+ <body onload="check_articles();">
<header>
<nav>
@@ -49,7 +50,7 @@
This is updated by find-and-replace
WORKAROUND: [% feed.modified %] is hardcoded to UTC
-->
- <p>
+ <p>Last Update:
<!--UPDATED-->
</p>
@@ -63,12 +64,12 @@
<!-- Content Entries -->
[% FOREACH entry IN feed.entries %]
- <section>
- <h2>
+ <section data="[% entry.issued | html %]">
+ <h3>
<a href="[% entry.link | url | html %]" target="_blank">
- [% entry.title | html %] ↗
+ [% entry.title | html %]
</a>
- </h2>
+ </h3>
<div class="article_content">
[% IF entry.summary.body %]
<p>[% entry.summary.body %]</p>
