Community: Render chats page in cards

Closes #1382

content/community/chat.md

@@ -13,25 +13,10 @@ The XSF hosts a variety of chat rooms and all archives are available online. Par
 
 All logs of public XSF chatrooms are available at [logs.xmpp.org](https://logs.xmpp.org/).
 
-### XSF chatroom
-Chat about the XMPP Standards Foundation itself, including the standards process. ([join](xmpp:xsf@muc.xmpp.org?join) | [logs](https://logs.xmpp.org/xsf/) | [webchat](https://xmpp.org/chat?xsf))
+### Chatrooms
 
-### Developer chatroom
-Ask questions about developing XMPP software. ([join](xmpp:jdev@muc.xmpp.org?join) | [logs](https://logs.xmpp.org/jdev/) | [webchat](https://xmpp.org/chat?jdev))
-
-### Operators chatroom
-A place for civil discussion between XMPP server operators about the XMPP network. Anyone may join and follow discussions. To reduce noise, active participation is limited to XSF members and server operators, see the [channel guidelines](/community/channels/operators/) for more information. ([join](xmpp:operators@muc.xmpp.org?join) | [logs](https://logs.xmpp.org/operators/) | [webchat](https://xmpp.org/chat?operators))
-
-### Council chatroom
-The Council meets once a week in this chatroom - anyone can join in, comments from the floor are welcome. ([join](xmpp:council@muc.xmpp.org?join) |
-[logs](https://logs.xmpp.org/council/) | [webchat](https://xmpp.org/chat?council))
-
-### Editors chatroom
-Chat about the XMPP standards process and the editorial work ([join](xmpp:editor@muc.xmpp.org?join) | [logs](https://logs.xmpp.org/editor/) | [webchat](https://xmpp.org/chat?editor))
-
-### XSF Communications Team
-Here we discuss general communication for the XSF, this website and of course the XMPP Newsletter.
-([join](xmpp:commteam@muc.xmpp.org?join) | [logs](https://logs.xmpp.org/commteam/) | [webchat](https://xmpp.org/chat?commteam))
+{{< community-chat-cards >}}
 
 ### Other chatrooms
+
 Additionally, community chats for software support and other topics can be found via [XMPP Chat Room Search Engine](https://search.jabber.network/rooms/1) (the search engine and external chats are not hosted or operated by the XSF).

data/community_chats.json

@@ -0,0 +1,50 @@
+[
+    {
+        "name": "XSF",
+        "text": "Chat about the XMPP Standards Foundation itself, including the standards process.",
+        "logo": "/images/logos/chatroom-xsf.png",
+        "chat": "xmpp:xsf@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?xsf",
+        "logs": "https://logs.xmpp.org/xsf/"
+    },
+    {
+        "name": "Developers",
+        "text": "Ask questions about developing XMPP software.",
+        "logo": "/images/logos/chatroom-jdev.png",
+        "chat": "xmpp:jev@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?jdev",
+        "logs": "https://logs.xmpp.org/jdev/"
+    },
+    {
+        "name": "Operators",
+        "text": "A place for civil discussion between XMPP server operators about the XMPP network. Anyone may join and follow discussions. To reduce noise, active participation is limited to XSF members and server operators, see the [channel guidelines](/community/channels/operators/) for more information.",
+        "logo": "/images/logos/chatroom-operators.png",
+        "chat": "xmpp:operators@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?operators",
+        "logs": "https://logs.xmpp.org/operators/"
+    },
+    {
+        "name": "Council",
+        "text": "The Council meets once a week in this chatroom - anyone can join in, comments from the floor are welcome.",
+        "logo": "/images/logos/chatroom-council.svg",
+        "chat": "xmpp:council@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?council",
+        "logs": "https://logs.xmpp.org/council/"
+    },
+    {
+        "name": "Editors",
+        "text": "Chat about the XMPP standards process and the editorial work.",
+        "logo": "/images/logos/chatroom-editors.svg",
+        "chat": "xmpp:editor@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?editor",
+        "logs": "https://logs.xmpp.org/editor/"
+    },
+    {
+        "name": "XSF Communications",
+        "text": "Here we discuss general communication for the XSF, this website and of course the XMPP Newsletter.",
+        "logo": "/images/logos/chatroom-commteam.png",
+        "chat": "xmpp:commteam@muc.xmpp.org?join",
+        "web_chat": "https://xmpp.org/chat?commteam",
+        "logs": "https://logs.xmpp.org/commteam/"
+    }
+]

themes/xmpp.org/layouts/shortcodes/community-chat-cards.html

@@ -0,0 +1,23 @@
+<div class="row row-cols-1 row-cols-md-2">
+    {{- range .Site.Data.community_chats -}}
+    <div class="col pb-4">
+        <div class="card h-100 shadow-sm">
+            <div class="card-img-top text-center bg-body-tertiary">
+                <img src="{{ .logo }}" class="p-2" alt="Chat Logo" style="max-width: 40%;">
+            </div>
+            <div class="card-body">
+                <h3 class="card-title fw-bold">{{ .name }}</h3>
+                <span class="card-text text-muted">{{ .text | markdownify }}</span>
+            </div>
+            <div class="card-footer text-body-secondary text-center">
+                <a href="{{ .chat }}" class="btn btn-sm btn-primary m-1"><i
+                        class="fa-regular fa-comments me-2"></i>Join</a>
+                <a href="{{ .web_chat }}" target="_blank" class="btn btn-sm btn-secondary m-1"><i
+                        class="fa-regular fa-comment-dots me-2"></i></i>Web Chat</a>
+                <a href="{{ .logs }}" target="_blank" class="btn btn-sm btn-outline-secondary m-1"><i
+                        class="fa-solid fa-box-archive me-2"></i>Logs</a>
+            </div>
+        </div>
+    </div>
+    {{ end }}
+</div>