Add Tag component

site/docs/.vuepress/components/Tag.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    required: true,
+  },
+});
+
+const items = computed(() => {
+  return props.type.split(" ").map(value => {
+    return {src: `/badges/${value}.svg`, alt: value};
+  });
+})
+</script>
+
+<template>
+  <p>
+    <div v-for="item in items" class="tag">
+      <img :src="item.src" :alt="item.alt"/>
+    </div>
+  </p>
+</template>
+
+<style scoped>
+.tag {
+  margin-right: 0.5rem;
+  display: inline;
+}
+</style>

site/docs/.vuepress/config.ts

@@ -2,6 +2,7 @@ import { defaultTheme, defineUserConfig } from "vuepress-vite";
 import { betterLineBreaks } from "./plugins/better-line-breaks";
 import { currentVersions } from "./plugins/current-versions/plugin";
 import { docsearch } from "./plugins/docsearch";
+import { registerComponents } from "./plugins/registerComponents";
 
 export default defineUserConfig({
   locales: {
@@ -1504,6 +1505,7 @@ export default defineUserConfig({
     }),
     betterLineBreaks(),
     currentVersions(),
+    registerComponents(),
   ],
   markdown: {
     typographer: true,

site/docs/.vuepress/plugins/registerComponents.ts

@@ -0,0 +1,11 @@
+import { registerComponentsPlugin } from "@vuepress/plugin-register-components";
+import { getDirname, path } from "@vuepress/utils";
+import { type Plugin } from "vuepress-vite";
+
+export function registerComponents(): Plugin {
+  const __dirname = getDirname(import.meta.url);
+
+  return registerComponentsPlugin({
+    componentsDir: path.resolve(__dirname, "../components"),
+  });
+}

site/docs/es/hosting/deno-deploy.md

@@ -1,5 +1,7 @@
 # Alojamiento: Deno Deploy
 
+<Tag type="deno"/>
+
 Esta guía le informa sobre las formas de alojar sus bots de grammY en [Deno Deploy](https://deno.com/deploy).
 
 Ten en cuenta que esta guía es sólo para usuarios de Deno, y que necesitas tener una cuenta de [GitHub](https://github.com) para crear una cuenta de [Deno Deploy](https://deno.com/deploy).
@@ -89,7 +91,7 @@ deployctl deploy --project <project> ./mod.ts --prod --token <token>
 Después de poner en marcha tu aplicación, debes configurar los ajustes de los webhooks de tu bot para que apunten a tu aplicación.
 Para ello, envía una petición a
 
-```text
+```md:no-line-numbers
 https://api.telegram.org/bot<token>/setWebhook?url=<url>
 ```
 

site/docs/es/hosting/heroku.md

@@ -1,5 +1,7 @@
 # Alojamiento: Heroku
 
+<Tag type="deno nodejs"/>
+
 > Asumimos que tienes los conocimientos básicos sobre la creación de bots usando grammY.
 > Si aún no estás preparado, ¡no dudes en dirigirte a nuestra amigable [Guía](../guide)! :cohete:
 

site/docs/es/hosting/supabase.md

@@ -1,5 +1,7 @@
 # Hosting: Supabase Edge Functions
 
+<Tag type="deno"/>
+
 Esta guía te explica cómo puedes alojar tus bots de grammY en [Supabase](https://supabase.com/).
 
 Ten en cuenta que necesitas tener una cuenta de [GitHub](https://github.com) antes de poder utilizar [Supabase Edge Functions](https://supabase.com/docs/guides/functions).

site/docs/es/hosting/vps.md

@@ -1,5 +1,7 @@
 # Alojamiento: VPS
 
+<Tag type="deno nodejs"/>
+
 Un servidor virtual privado, mayormente conocido como VPS, es una máquina virtual que se ejecuta en la nube y cuyos usuarios tienen el control total de su sistema.
 
 En esta guía, aprenderás varios métodos para ejecutar tu bot en un VPS, manteniéndolo en línea 24/7, haciendo que se ejecute automáticamente cuando tu VPS se inicie y se reinicie en caso de caída.

site/docs/es/plugins/auto-retry.md

@@ -1,5 +1,7 @@
 # Reintentar solicitudes de la API (`auto-retry`)
 
+<Tag type="official-es"/>
+
 > Considera usar el [plugin throttler](./transformer-throttler.md) en su lugar.
 
 Este plugin es una [función transformadora de la API](../advanced/transformers.md), lo que significa que le permite interceptar y modificar las peticiones HTTP salientes sobre la marcha.

site/docs/es/plugins/autoquote.md

@@ -1,5 +1,7 @@
 # Responder siempre a los mensajes
 
+<Tag type="third-party-es deno nodejs"/>
+
 A veces es necesario enviar siempre los mensajes como respuestas, especialmente para los bots que están destinados a ser utilizados en grupos.
 Normalmente hacemos esto añadiendo el parámetro `reply_to_message_id` a los métodos que envían el mensaje: `sendText`, `reply`, `sendPhoto`, `replyWithPhoto` y otros.
 Sin embargo, si estás haciendo esto para cada mensaje, puede ser un desastre y aburrido.

site/docs/es/plugins/console-time.md

@@ -1,5 +1,7 @@
 # Registro en la consola mientras se depura
 
+<Tag type="third-party-es nodejs"/>
+
 Si estás familiarizado con JavaScript / TypeScript probablemente hayas utilizado [`console.log`](https://developer.mozilla.org/en-US/docs/Web/API/Console/log) o [`console.time`](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) para comprobar lo que está sucediendo mientras depuras algo.
 Mientras trabajas en tu bot o middleware puede que quieras comprobar algo similar: ¿Qué ha pasado y cuánto tiempo ha tardado?
 

site/docs/es/plugins/conversations.md

@@ -1,5 +1,7 @@
 # Conversaciones (`conversations`)
 
+<Tag type="official-es"/>
+
 Crea potentes interfaces conversacionales con facilidad.
 
 ## Introducción

site/docs/es/plugins/emoji.md

@@ -1,5 +1,7 @@
 # Plugin Emoji (`emoji`)
 
+<Tag type="official-es"/>
+
 Con este plugin, puedes insertar fácilmente emojis en tus respuestas buscándolos en lugar de copiar y pegar manualmente un emoji de la web en tu código.
 
 ## ¿Por qué debería utilizarlo?

site/docs/es/plugins/files.md

@@ -1,5 +1,7 @@
 # Manejo de archivos simplificado en grammY (`files`)
 
+<Tag type="official-es"/>
+
 Este plugin te permite descargar fácilmente archivos de los servidores de Telegram, y obtener una URL para que puedas descargar el archivo tú mismo.
 
 ## Descargando Archivos

site/docs/es/plugins/fluent.md

@@ -1,5 +1,7 @@
 # Internacionalización con Fluent (`fluent`)
 
+<Tag type="official-es"/>
+
 [Fluent](https://projectfluent.org/) es un sistema de localización creado por la Fundación Mozilla para realizar traducciones naturales.
 Tiene una sintaxis muy potente y elegante que permite a cualquiera escribir traducciones eficientes y totalmente comprensibles.
 Este plugin aprovecha este increíble sistema de localización para hacer que los bots alimentados por grammY sean fluidos con traducciones de alta calidad.

site/docs/es/plugins/hydrate.md

@@ -1,5 +1,7 @@
 # Plugin Hydration para grammY (`hydrate`)
 
+<Tag type="official-es"/>
+
 Este plugin instala métodos útiles en dos tipos de objetos, a saber
 
 1. los resultados de las llamadas a la API, y

site/docs/es/plugins/i18n.md

@@ -1,5 +1,7 @@
 # Internacionalización (`i18n`)
 
+<Tag type="official-es"/>
+
 El plugin de internacionalización hace que tu bot hable varios idiomas.
 
 ::: tip No se debe confundir

site/docs/es/plugins/menu.md

@@ -1,5 +1,7 @@
 # Menús interactivos (`menu`)
 
+<Tag type="official-es"/>
+
 Crea fácilmente menús interactivos.
 
 ## Introducción

site/docs/es/plugins/middlewares.md

@@ -1,5 +1,7 @@
 # Conjunto de middlewares útiles
 
+<Tag type="third-party-es nodejs"/>
+
 Seguí reescribiendo los mismos middlewares una y otra vez para todos mis bots así que decidí extraerlos todos a un paquete separado.
 
 ## Instalación

site/docs/es/plugins/parse-mode.md

@@ -1,5 +1,7 @@
 # Parse Mode Plugin (`parse-mode`)
 
+<Tag type="official-es"/>
+
 Este plugin proporciona un transformador para establecer el `parse_mode` por defecto, y un middleware para hidratar el `Context` con los métodos variantes familiares de `reply` - es decir, `replyWithHTML`, `replyWithMarkdown`, etc.
 
 ## Uso

site/docs/es/plugins/ratelimiter.md

@@ -1,5 +1,7 @@
 # Usuarios con límite de velocidad (`ratelimiter`)
 
+<Tag type="official-es"/>
+
 ratelimiter es un middleware de limitación de tasa para los bots de Telegram hechos con los frameworks de bots grammY o [Telegraf](https://github.com/telegraf/telegraf).
 En términos simples, es un plugin que te ayuda a desviar el spam pesado en tus bots.
 Para entender mejor ratelimiter, puedes echar un vistazo a la siguiente ilustración:

site/docs/es/plugins/router.md

@@ -1,5 +1,7 @@
 # Router (`router`)
 
+<Tag type="official-es"/>
+
 La clase `Router` ([Referencia API](https://doc.deno.land/https://deno.land/x/grammy_router/router.ts)) proporciona una forma de estructurar tu bot enrutando objetos de contexto a diferentes partes de tu código.
 Es una versión más sofisticada de `bot.route` en `Composer` ([grammY API Reference](https://doc.deno.land/https://deno.land/x/grammy/mod.ts/~/Composer#route)).
 

site/docs/es/plugins/runner.md

@@ -1,5 +1,7 @@
 # Concurrencia con grammY runner (`runner`)
 
+<Tag type="official-es"/>
+
 Este paquete se puede utilizar si ejecutas tu bot [usando long polling](../guide/deployment-types.md), y quieres que los mensajes se procesen concurrentemente.
 
 > Asegúrate de entender [Scaling Up II](../advanced/scaling.md#long-polling) antes de usar el runner de grammY.

site/docs/es/plugins/stateless-question.md

@@ -1,5 +1,7 @@
 # Pregunta sin estado (`stateless-question`)
 
+<Tag type="official-es"/>
+
 > Crear preguntas sin estado a los usuarios de Telegram que trabajan en modo de privacidad
 
 ¿Quieres mantener la privacidad del usuario con el [modo de privacidad de Telegram activado (por defecto)](https://core.telegram.org/bots#privacy-mode), enviar a los usuarios preguntas traducidas en su idioma y no guardar el estado que los usuarios están haciendo actualmente?