Update README.md

.github/workflows/docker-image.yml

@@ -1,7 +1,7 @@
 name: Build and Push Matrix-to Docker Image
 
 on:
-  workflow_dispatch: # Erlaubt den manuellen Start über das GitHub UI
+  workflow_dispatch: # Manueller Start
 
 jobs:
   build:
@@ -20,10 +20,16 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Generate Timestamp Tag
+        id: vars
+        run: echo "sha_short=$(date +%Y%m%d-%H%M)" >> $GITHUB_OUTPUT
+
       - name: Build and push Docker image
         uses: docker/build-push-action@v2
         with:
           context: .
           push: true
-          tags: domoel/matrix-to:latest
+          tags: |
+            domoel/matrix-to:latest
+            domoel/matrix-to:${{ steps.vars.outputs.sha_short }}
           no-cache: true

README.md

@@ -1,4 +1,30 @@
-# Matrix.to
+<p align="center">
+  <a href="https://ztfr.eu/matrix">
+    <img src="assets/community-badge.png" alt="Join Zeitfresser Matrix Community" height="70" />
+  </a>
+</p>
+
+<h1 align="center">
+Matrix.to Dracula Themed
+</span>
+<h4 align="center">
+<span style="display:inline-flex; align-items:center; gap:12px;">
+A simple stateless privacy-protecting URL redirecting service for Matrix Servers with an opinionated Dracula Theme
+</span>
+<p>
+
+<h6 align="center">
+  <a href="https://ztfr.eu">🏰 Website</a>
+  ·
+  <a href="https://ztfr.eu/matrix">📰 Zeitfresser Matrix Community</a>
+  ·
+  <a href="https://social.ztfr.eu/@dome">🐘 Mastodon</a> 
+  ·
+  <a href="https://look.ztfr.eu/#/#support:ztfr.eu">💬 Supportchat</a> 
+</h6>
+<br>
+
+## Introduction
 
 Matrix.to is a simple url redirection service for the Matrix.org ecosystem
 which lets users share links to matrix entities without being tied to a
@@ -103,3 +129,7 @@ services:
     environment:
       - NODE_ENV=production
 ```
+
+## 🛠 Development & Support
+
+If you need to get support or want to participate in the active development of this software, you can <a href="https://ztfr.eu/matrix">join our Zeitfresser Matrix Community</a> or the <a href="https://look.ztfr.eu/#/#support:ztfr.eu">Development & Support Channel</a> on Matrix.

css/client.css

@@ -19,7 +19,7 @@
 .ClientView:hover {
     background: #2f313d !important;
     border-left-color: var(--ztfr-purple) !important;
-    transform: translateX(5px);
+    /* transform: translateX(5px); - Entfernt, damit die Kachel nicht mehr springt */
 }
 
 .ClientView.isPreferred {
@@ -92,29 +92,55 @@
     margin: 5px auto;
 }
 
-/* --- ANPASSUNG FÜR DEN DEZENTEN LOOK --- */
+/* --- ANPASSUNG FÜR DEN DEZENTEN LOOK DER BUTTONS --- */
 
 .ClientView .actions .footer {
-    display: block !important; /* Kein Flex mehr, damit Links wie Text fließen */
+    display: block !important; 
     text-align: center !important;
     margin-top: 20px !important;
     width: 100%;
-    line-height: 1.8 !important; /* Gibt den Zeilen etwas Platz */
+    line-height: 1.8 !important; 
     color: var(--sub-text);
 }
 
-/* Der "Use Custom Web Instance" Bereich bekommt eine eigene Zeile */
+/* Reset der Button-Styles: Macht aus den grauen Kästen einfachen Text mit unsichtbarem Rahmen für ruckelfreien Hover */
+.ClientView .actions .footer button.change,
+.ClientView .actions .footer button.custom,
+.ClientView .actions .footer .custom,       
+.ClientView .actions .footer .custom button, 
+.PreviewView > .footer button.change        
+{
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 1px solid transparent !important; 
+    color: var(--sub-text) !important;
+    padding: 0 2px !important;
+    margin: 0 4px !important;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    cursor: pointer !important;
+    display: inline !important;
+    transition: all 0.2s ease !important;
+}
+
+/* Der Hover-Effekt: Hellerer Text und lila Unterstrich */
+.ClientView .actions .footer button.change:hover,
+.ClientView .actions .footer button.custom:hover,
+.ClientView .actions .footer .custom:hover,
+.ClientView .actions .footer .custom button:hover,
+.PreviewView > .footer button.change:hover
+{
+    color: var(--foreground) !important; 
+    border-bottom: 1px solid var(--ztfr-purple) !important; 
+}
+
+/* Layout-Anpassung für die Custom-Web-Instance-Zeile, damit sie sauber umbricht */
 .ClientView .actions .footer .custom {
     display: block !important;
     margin-top: 6px !important;
 }
 
-/* Sicherstellen, dass der "Change" Button im Textfluss bleibt */
+/* --- MOBILE ANPASSUNGEN --- */
-.ClientView .actions .footer button.change {
-    display: inline !important;
-    margin: 0 4px !important;
-}
-
 @media screen and (max-width: 480px) {
     .ClientView {
         padding: 15px;

css/main.css

@@ -212,23 +212,12 @@ input[type='text'].large {
     h1 { font-size: 1.5rem; }
 }
 
-/* --- FIX FÜR NUTZERPROFILE (null-Werte verstecken) --- */
+.memberCount.hidden,
-
+.topic.hidden {
-.PreviewView .members[data-count="null"],
-.PreviewView .members:empty {
     display: none !important;
 }
 
-.PreviewView .topic:empty,
+.memberCount:has(p:empty),
-.PreviewView .topic:contains("null") {
+.topic:empty {
     display: none !important;
 }
-
-.PreviewView p:empty, 
-.PreviewView span:empty {
-    display: none !important;
-}
-
-.PreviewView h2 + p {
-    margin-bottom: 0 !important;
-}

src/preview/PreviewView.js

@@ -51,12 +51,22 @@ class LoadedPreviewView extends TemplateView {
                 return t.div({className: "defaultAvatar"});
             }
         });
+
+        const hasMemberCount = vm => vm.memberCount && String(vm.memberCount) !== "null";
+        const hasTopic = vm => vm.topic && String(vm.topic) !== "null";
+
         return t.div({className: vm.isSpaceRoom ? "mxSpace" : undefined}, [
             t.div({className: "avatarContainer"}, avatar),
             t.h1(vm => vm.name),
             t.p({className: {identifier: true, hidden: vm => !vm.identifier}}, vm => vm.identifier),
-            t.div({className: {memberCount: true, hidden: vm => !vm.memberCount}}, t.p([vm => vm.memberCount, " members"])),
+            
-            t.p({className: {topic: true, hidden: vm => !vm.topic}}, [vm => vm.topic]),
+            t.div({className: {memberCount: true, hidden: vm => !hasMemberCount(vm)}}, 
+                t.p([vm => hasMemberCount(vm) ? vm.memberCount + " members" : ""])
+            ),
+            
+            t.p({className: {topic: true, hidden: vm => !hasTopic(vm)}}, 
+                [vm => hasTopic(vm) ? vm.topic : ""]
+            ),
         ]);
     }
 }