Adding xmpp post.

content/categories/xmpp.xml

@@ -0,0 +1,15 @@
+<category>
+    <title>XMPP Groups and Tips for administrators.</title>
+    <menu_text>XMPP</menu_text>
+    <description>
+        <p>Find your perfect XMPP community.</p>
+    </description>
+    <extra-text>
+        <h2>This is a mixed english and spanish category
+        for the XMPP protocol.</h2>
+        <p>Both for group discovery
+        and administration recipes.</p>
+    </extra-text>
+    <img src="/img/xmpp.webp"/>
+    <slug>xmpp</slug>
+</category>

content/posts/0000003-une-tus-grupos-de-telegram-y-xmpp-con-matterbridge.xml

@@ -0,0 +1,32 @@
+<post>
+    <author>Owlcode.tech</author>
+	<date>2024-03-27T00:30+00:00</date>
+	<title>Une tus grupos de Telegram y XMPP e incluso otras plataformas con Matterbridge.</title>
+	<ogdesc>Une tus grupos de Telegram y XMPP e incluso otras plataformas con Matterbridge.</ogdesc>
+	<ogdesc>Contrata nuestros servicios de desarrollo web.</ogdesc>
+	<category>xmpp</category>
+	<slug>une-tus-grupos-de-telegram-y-xmpp-con-matterbridge</slug>
+    <img src="/img/matterbridge.webp"/>
+    <content>
+        <p>Tanto Telegram como XMPP son posibles opciones a la hora de organizar tu comunidad;
+        ambos tienen ventajas y desventajas; y gente distinta que podría participar en ella.
+        Pero, ¿Y si pudieses crear una comunidad que traspasase las fronteras de los distintos
+        sistemas de mensajería?</p>
+
+        <p>Eso es precisamente lo que hace Matterbridge un software desarrollado en Golang por 42wim,
+        a lo largo de este artículo descubriréis que es un software muy sencillo de usar teniendo
+        un conocimiento mínimo de Linux.</p>
+
+        <p>En primer lugar vamos a crear el bot de telegram que servirá para enlazar la comunidad a XMPP:</p>
+
+        <p>Para realizar esto deberás hablar con <a href="https://t.me/BotFather">@BotFather</a> y en su menú
+        seleccionar /newbot, para el nombre del bot escribiremos "XMPP User" para que los usuarios sepan de
+        que tratan los mensajes que envía el bot.</p>
+
+        <p>A continuación nos preguntará por un nombre de usuario, puedes escoger el que deseés. Yo he escogido "pruebabridgexmppbot".</p>
+
+        <p>Ahora en el menú de Botfather seleccionaremos /mybots y pulsaremos sobre nuestro bot recien creado, tras hacer esto pulsaremos sobre "Bot Settings/Group Privacy" y seleccionaremos "Turn Off".</p>
+
+        <p>Este paso es necesario para que el bot de Telegram pueda leer los mensajes de los usuarios que no le mencionan directamente y enviarlos a XMPP.</p>
+    </content>
+</post>

public/css/styles.css

@@ -3,10 +3,18 @@ img.index-image-menu {
   padding: 5px;
   border-radius: 5px; }
 
+div.padding-side {
+  margin-left: 10%;
+  margin-right: 10%; }
+
 div.content {
   padding-left: 30px;
   padding-right: 30px; }
 
+.padding {
+  padding-left: 30px;
+  padding-right: 30px; }
+
 div.title-image {
   position: relative;
   max-height: 80vh;
@@ -518,35 +526,37 @@ body {
     max-width: 694px; } }
 
 @media (min-width: 1100px) {
-  body nav.mobile-foldable, body nav.mobile-foldable.show {
+  body {
-    display: none; }
+    font-size: 25px; }
-  body nav.mobile-shortcuts {
+    body nav.mobile-foldable, body nav.mobile-foldable.show {
-    display: none; }
+      display: none; }
-  body div.search-in-page.active {
+    body nav.mobile-shortcuts {
-    display: none; }
+      display: none; }
-  body div.page-contents {
+    body div.search-in-page.active {
-    top: 0%;
+      display: none; }
-    left: 0%;
+    body div.page-contents {
-    height: 80%;
+      top: 0%;
-    border: solid 1px black; }
+      left: 0%;
-    body div.page-contents div.description.open-browser-container {
+      height: 80%;
-      margin-left: 0;
+      border: solid 1px black; }
-      margin-right: 0; }
+      body div.page-contents div.description.open-browser-container {
-    body div.page-contents div.description {
+        margin-left: 0;
-      margin-left: 10%;
+        margin-right: 0; }
-      margin-right: 10%; }
+      body div.page-contents div.description {
-    body div.page-contents nav.desktop {
+        margin-left: 10%;
-      display: block;
+        margin-right: 10%; }
-      height: auto;
+      body div.page-contents nav.desktop {
-      height: 60px; }
+        display: block;
-      body div.page-contents nav.desktop a {
+        height: auto;
-        display: table-cell;
         height: 60px; }
-        body div.page-contents nav.desktop a img.index-image-menu {
+        body div.page-contents nav.desktop a {
-          height: 40px;
+          display: table-cell;
-          width: 40px; }
+          height: 60px; }
-  body div.page-contents.no-carousel {
+          body div.page-contents nav.desktop a img.index-image-menu {
-    height: 100%; } }
+            height: 40px;
+            width: 40px; }
+    body div.page-contents.no-carousel {
+      height: 100%; } }
 
 @media (min-width: 1333px) {
   body div.page-contents div.description div.articles a {

public/css/styles.scss

@@ -17,11 +17,21 @@ img.index-image-menu {
     border-radius: 5px;
 }
 
+div.padding-side {
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
 div.content {
     padding-left: 30px;
     padding-right: 30px;
 }
 
+.padding {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+
 div.title-image {
   position: relative;
   max-height: 80vh;
@@ -786,6 +796,7 @@ body {
 
 @media (min-width: 1100px) {
   body {
+    font-size: 25px;
     nav.mobile-foldable, nav.mobile-foldable.show {
       display: none;
     }

templates/page/post.html.ep

@@ -11,7 +11,7 @@
 % my $base_url = config 'base_url';
 % layout 'default', current_category_slug => $current_category->{slug}, categories => $categories, description_og => $description_og, ogimage => "$base_url/posts/$post->{slug}-preview.png?v=4";
 % title $post->{title};
-<div id="first-box" class="description margin">
+<div id="first-box" class="margin">
 % if (defined $post->{image}) {
     <div class="title-image">
         <img alt="Portada del artículo: <%= $post->{title} %>" src="<%=$post->{image}%>"/>