Merge pull request 'work_xmpp' (#1) from work_xmpp into main

Reviewed-on: #1

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,148 @@
+<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>
+
+        <p>Ahora tendrémos que crear un usuario de XMPP para el bot, no uses el tuyo propio, crear el usuario sale del ámbito del tutorial debido a la amplia cantidad de opciones posibles en mi caso lo he creado en mi propia instancia con prosodyctl register.</p>
+
+        <p>El siguiente paso es escoger el dominio muc que vamos a usar, en mi caso voy a hacerlo en prueba.owlcode.tech que voy a crearen mi propio servidor.</p>
+        
+        <p>Puedes escoger un dominio muc que permita abrir salas sin problemas, pero asegurate de crearlas con tu usuario personal antes de añadirlas al bridge o el owner de la sala será el bridge lo cual puede ser problemático.</p>
+
+        <p>Voy a dejar instrucciones opcionales para crear nuestro propio dominio muc en un prosody ya configurado para favorecer la descentralización:</p>
+
+        <p>En primer lugar abriremos en nuestro editor de texto de preferencia la configuración de prosody.</p>
+
+        <code><pre>sudo vim /etc/prosody/prosody.cfg.lua</pre></code>
+        <p>Imaginemos que tenemos un VirtualHost como este.</p>
+        <code><pre>
+VirtualHost "host.postmarketos-en-espanol.freemyip.com"
+        enable = true
+        admins = { 'admin@example.com' }
+        disco_items = {
+                { 'postmarketos-en-espanol.freemyip.com', 'Canales públicos' }
+        }
+        Component "postmarketos-en-espanol.freemyip.com" "muc"
+                name = "Salas de chat de Postmarketos en Español"
+                restrict_room_creation = true
+                enforce_registered_nickname = true
+                component_admins_as_room_owners = true
+        </pre></code>
+
+	<p>Al final de este virtualhost tan solo tendrémos que añadir otro componente muc y actualizar los disco_items.</p>
+
+	<p>Recuerda añadir a tu usuario de XMPP como admin.</p>
+
+        <code><pre>
+VirtualHost "host.postmarketos-en-espanol.freemyip.com"
+        enable = true
+        admins = { 'admin@example.com' }
+        disco_items = {
+                { 'postmarketos-en-espanol.freemyip.com', 'Canales públicos' },
+                { 'prueba.owlcode.tech', 'Canales de prueba' }
+        }
+        Component "postmarketos-en-espanol.freemyip.com" "muc"
+                name = "Salas de chat de Postmarketos en Español"
+                restrict_room_creation = true
+                enforce_registered_nickname = true
+                component_admins_as_room_owners = true
+        Component "prueba.owlcode.tech" "muc"
+                name = "Sala de prueba para tutorial."
+                restrict_room_creation = true
+                enforce_registered_nickname = true
+                component_admins_as_room_owners = true
+        </pre></code>
+	
+	<p>Generamos un certificado TLS y un registro DNS para prueba.owlcode.tech.</p>
+
+	<code><pre>sudo certbot certonly</pre></code>	
+
+	<p>Y respondemos las preguntas.</p>
+
+	<p>Importamos los certificados en prosody:</p>
+
+	<code><pre>sudo /usr/bin/prosodyctl --root cert import /etc/letsencrypt/live</pre></code>
+
+	<p>Ahora cuando reiniciemos el servidor de prosody nuestro nuevo servidor de salas muc estará listo.</p>
+
+	<p>Deberemos unirnos con nuestra cuenta de admin a la sala que queramos enlazar, en este caso prueba@prueba.owlcode.tech.</p>
+
+	<p>Una vez hecho esto marcamos en las opciones de la sala como persistente y buscable publicamente para que se pueda buscar desde search.jabber.network y le ponemos nombre y descripción a la sala. (Opcional)</p>
+
+        <p>Hecho esto podemos empezar a configurar Matterbridge.</p>
+        
+        <code><pre>sudo useradd -m -d /var/lib/matterbridge matterbridge</pre></code>
+
+        <code><pre>sudo vim /var/lib/matterbridge/matterbridge.toml</pre></code>
+
+        <code><pre>
+[xmpp.pruebaxmpp]
+label="prueba.owlcode.tech"
+Server="&lt;el servidor de tu bot&gt;"
+#Jid your userid
+Jid="&lt;el jid de tu bot&gt;"
+Password="&lt;la contraseña de tu bot&gt;"
+Muc="prueba.owlcode.tech"
+Nick="Telegram User"
+RemoteNickFormat="({PROTOCOL}) {NICK}: "
+
+[telegram.pruebatelegram]
+Token="&lt;token de tu bot de telegram&gt;"
+RemoteNickFormat="(XMPP) {NICK} in <a href=\"https://conversations.im/j/{CHANNEL}@{LABEL}\">{CHANNEL}</a>: "
+MessageFormat="HTMLNick"
+[[gateway]]
+name="prueba-gateway"
+enable=true
+        [[gateway.inout]]
+        account="telegram.pruebatelegram"
+        channel="-10"
+        [[gateway.inout]]
+        account="xmpp.pruebaxmpp"
+        channel="prueba"
+        </pre></code>
+
+        <p>Instala Matterbridge con <code><pre>sudo -u matterbridge go install github.com/42wim/matterbridge@master</pre></code>
+        
+        <p>Ejecuta <code><pre>sudo -u matterbridge /var/lib/matterbridge/go/bin/matterbridge -conf /var/lib/matterbridge/matterbridge.toml</pre></code></p>
+
+	<p>Necesitarás unir al bot de telegram que has creado al grupo que quieres unir con XMPP y ejecutar /chatId en el grupo, despues de eso tendrás el verdadero id de tu grupo de telegram para su uso en la configuración, por ejemplo:</p>
+
+	<code><pre>
+	[[gateway.inout]]
+        account="telegram.pruebatelegram"
+        channel="-932023"
+	</pre></code>
+
+	<p>Reincia el comando <code><pre>sudo -u matterbridge /var/lib/matterbridge/go/bin/matterbridge -conf /var/lib/matterbridge/matterbridge.toml</pre></code></p>
+
+	<p>Prueba a enviar mensajes entre telegram y xmpp; y si lo has hecho bien deberían recibirse en las dos direcciones.</p>
+
+	<p>Ahora puedes escoger cualquier manera que deseés de hacer persistente el bridge, ya sea un cron al encender el ordenador, un systemd unit o un init service de openrc.</p>
+    </content>
+</post>

owlcode_tech.json.example

@@ -4,7 +4,7 @@
     "db": {
             "database": "example"
     },
-    "base_url": "https://owlcode.tech",
-    "listen": "https://localhost:3000",
-    "site_name": "Owlcode.tech",
+    "base_url": "http://localhost:3000",
+    "listen": "http://localhost:3000",
+    "site_name": "Owlcode.tech"
 }

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 {
-    display: none; }
-  body nav.mobile-shortcuts {
-    display: none; }
-  body div.search-in-page.active {
-    display: none; }
-  body div.page-contents {
-    top: 0%;
-    left: 0%;
-    height: 80%;
-    border: solid 1px black; }
-    body div.page-contents div.description.open-browser-container {
-      margin-left: 0;
-      margin-right: 0; }
-    body div.page-contents div.description {
-      margin-left: 10%;
-      margin-right: 10%; }
-    body div.page-contents nav.desktop {
-      display: block;
-      height: auto;
-      height: 60px; }
-      body div.page-contents nav.desktop a {
-        display: table-cell;
+  body {
+    font-size: 25px; }
+    body nav.mobile-foldable, body nav.mobile-foldable.show {
+      display: none; }
+    body nav.mobile-shortcuts {
+      display: none; }
+    body div.search-in-page.active {
+      display: none; }
+    body div.page-contents {
+      top: 0%;
+      left: 0%;
+      height: 80%;
+      border: solid 1px black; }
+      body div.page-contents div.description.open-browser-container {
+        margin-left: 0;
+        margin-right: 0; }
+      body div.page-contents div.description {
+        margin-left: 10%;
+        margin-right: 10%; }
+      body div.page-contents nav.desktop {
+        display: block;
+        height: auto;
         height: 60px; }
-        body div.page-contents nav.desktop a img.index-image-menu {
-          height: 40px;
-          width: 40px; }
-  body div.page-contents.no-carousel {
-    height: 100%; } }
+        body div.page-contents nav.desktop a {
+          display: table-cell;
+          height: 60px; }
+          body div.page-contents nav.desktop a img.index-image-menu {
+            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}%>"/>