diff --git a/content/categories/xmpp.xml b/content/categories/xmpp.xml new file mode 100644 index 0000000..421b7d1 --- /dev/null +++ b/content/categories/xmpp.xml @@ -0,0 +1,15 @@ + + XMPP Groups and Tips for administrators. + XMPP + +

Find your perfect XMPP community.

+
+ +

This is a mixed english and spanish category + for the XMPP protocol.

+

Both for group discovery + and administration recipes.

+
+ + xmpp +
diff --git a/content/posts/0000003-une-tus-grupos-de-telegram-y-xmpp-con-matterbridge.xml b/content/posts/0000003-une-tus-grupos-de-telegram-y-xmpp-con-matterbridge.xml new file mode 100644 index 0000000..4194bd8 --- /dev/null +++ b/content/posts/0000003-une-tus-grupos-de-telegram-y-xmpp-con-matterbridge.xml @@ -0,0 +1,148 @@ + + Owlcode.tech + 2024-03-27T00:30+00:00 + Une tus grupos de Telegram y XMPP e incluso otras plataformas con Matterbridge. + Une tus grupos de Telegram y XMPP e incluso otras plataformas con Matterbridge. + Contrata nuestros servicios de desarrollo web. + xmpp + une-tus-grupos-de-telegram-y-xmpp-con-matterbridge + + +

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?

+ +

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.

+ +

En primer lugar vamos a crear el bot de telegram que servirá para enlazar la comunidad a XMPP:

+ +

Para realizar esto deberás hablar con @BotFather 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.

+ +

A continuación nos preguntará por un nombre de usuario, puedes escoger el que deseés. Yo he escogido "pruebabridgexmppbot".

+ +

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".

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

Voy a dejar instrucciones opcionales para crear nuestro propio dominio muc en un prosody ya configurado para favorecer la descentralización:

+ +

En primer lugar abriremos en nuestro editor de texto de preferencia la configuración de prosody.

+ +
sudo vim /etc/prosody/prosody.cfg.lua
+

Imaginemos que tenemos un VirtualHost como este.

+
+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
+        
+ +

Al final de este virtualhost tan solo tendrémos que añadir otro componente muc y actualizar los disco_items.

+ +

Recuerda añadir a tu usuario de XMPP como admin.

+ +
+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
+        
+ +

Generamos un certificado TLS y un registro DNS para prueba.owlcode.tech.

+ +
sudo certbot certonly
+ +

Y respondemos las preguntas.

+ +

Importamos los certificados en prosody:

+ +
sudo /usr/bin/prosodyctl --root cert import /etc/letsencrypt/live
+ +

Ahora cuando reiniciemos el servidor de prosody nuestro nuevo servidor de salas muc estará listo.

+ +

Deberemos unirnos con nuestra cuenta de admin a la sala que queramos enlazar, en este caso prueba@prueba.owlcode.tech.

+ +

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)

+ +

Hecho esto podemos empezar a configurar Matterbridge.

+ +
sudo useradd -m -d /var/lib/matterbridge matterbridge
+ +
sudo vim /var/lib/matterbridge/matterbridge.toml
+ +
+[xmpp.pruebaxmpp]
+label="prueba.owlcode.tech"
+Server="<el servidor de tu bot>"
+#Jid your userid
+Jid="<el jid de tu bot>"
+Password="<la contraseña de tu bot>"
+Muc="prueba.owlcode.tech"
+Nick="Telegram User"
+RemoteNickFormat="({PROTOCOL}) {NICK}: "
+
+[telegram.pruebatelegram]
+Token="<token de tu bot de telegram>"
+RemoteNickFormat="(XMPP) {NICK} in {CHANNEL}: "
+MessageFormat="HTMLNick"
+[[gateway]]
+name="prueba-gateway"
+enable=true
+        [[gateway.inout]]
+        account="telegram.pruebatelegram"
+        channel="-10"
+        [[gateway.inout]]
+        account="xmpp.pruebaxmpp"
+        channel="prueba"
+        
+ +

Instala Matterbridge con

sudo -u matterbridge go install github.com/42wim/matterbridge@master
+ +

Ejecuta

sudo -u matterbridge /var/lib/matterbridge/go/bin/matterbridge -conf /var/lib/matterbridge/matterbridge.toml

+ +

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:

+ +
+	[[gateway.inout]]
+        account="telegram.pruebatelegram"
+        channel="-932023"
+	
+ +

Reincia el comando

sudo -u matterbridge /var/lib/matterbridge/go/bin/matterbridge -conf /var/lib/matterbridge/matterbridge.toml

+ +

Prueba a enviar mensajes entre telegram y xmpp; y si lo has hecho bien deberían recibirse en las dos direcciones.

+ +

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.

+
+
diff --git a/owlcode_tech.json.example b/owlcode_tech.json.example index 0142035..9aed934 100644 --- a/owlcode_tech.json.example +++ b/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" } diff --git a/public/css/styles.css b/public/css/styles.css index bbbd576..2827699 100644 --- a/public/css/styles.css +++ b/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 { diff --git a/public/css/styles.scss b/public/css/styles.scss index 0de8631..d6a9b1c 100644 --- a/public/css/styles.scss +++ b/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; } diff --git a/public/img/matterbridge.webp b/public/img/matterbridge.webp new file mode 100644 index 0000000..01fa016 Binary files /dev/null and b/public/img/matterbridge.webp differ diff --git a/public/img/xmpp.webp b/public/img/xmpp.webp new file mode 100644 index 0000000..341a8a8 Binary files /dev/null and b/public/img/xmpp.webp differ diff --git a/templates/page/post.html.ep b/templates/page/post.html.ep index cfd4ca4..842dc84 100644 --- a/templates/page/post.html.ep +++ b/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}; -
+
% if (defined $post->{image}) {
Portada del artículo: <%= $post->{title} %>