[DOCS] Añadido soporte para imágenes de documentación y mejorada la documentación de Gum
- Actualizada la configuración .gitignore para incluir las imágenes de documentación - Añadidas referencias a imágenes en la documentación de Gum - Mejorado el formato de la documentación - Eliminadas secciones redundantes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
ae3b7c7094
commit
7e4b7ec8bd
GPG key ID:
83BD2A5F674B7E26
2 changed files with 26 additions and 127 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -37,3 +37,4 @@ data/*
|
|||
!inventory/**
|
||||
!sops/*.yaml
|
||||
!docs/*.md
|
||||
!docs/img/**
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
[Gum](https://github.com/charmbracelet/gum) es una herramienta de línea de comandos desarrollada por [Charm](https://charm.sh/) que permite crear interfaces de texto (TUI) elegantes y funcionales para scripts Bash. Con Gum, puedes mejorar dramáticamente la experiencia de usuario de tus scripts de shell, añadiendo formularios interactivos, menús, estilos y más.
|
||||
|
||||
|
||||
|
||||
Este tutorial cubre cómo utilizar Gum para crear formularios interactivos en scripts de shell dentro del entorno MRDevs Tools.
|
||||
|
||||
## Requisitos Previos
|
||||
|
|
@ -11,37 +13,24 @@ Este tutorial cubre cómo utilizar Gum para crear formularios interactivos en sc
|
|||
- MRDevs Tools instalado (bootstrap.sh ya instala Gum automáticamente)
|
||||
- Conocimientos básicos de shell scripting
|
||||
|
||||
## Instalación de Gum
|
||||
|
||||
Si no tienes MRDevs Tools instalado o necesitas instalar Gum manualmente, puedes hacerlo con:
|
||||
|
||||
```bash
|
||||
# Verifica si gum está instalado
|
||||
command -v gum > /dev/null || {
|
||||
echo "Instalando gum..."
|
||||
bin/bootstrap.sh
|
||||
}
|
||||
```
|
||||
|
||||
## Componentes Básicos de Gum
|
||||
|
||||
Gum ofrece varios comandos para crear diferentes tipos de elementos de interfaz:
|
||||
|
||||
| Comando | Descripción |
|
||||
|---------|-------------|
|
||||
| `gum style` | Da formato al texto (color, negrita, etc.) |
|
||||
| `gum input` | Campo de entrada para texto |
|
||||
| `gum write` | Área de texto multilínea |
|
||||
| `gum confirm` | Diálogo de confirmación (Sí/No) |
|
||||
| `gum choose` | Menú de selección de opciones |
|
||||
| `gum filter` | Lista filtrable de opciones |
|
||||
| `gum spin` | Indicador de carga con mensaje |
|
||||
| `gum format` | Formatea texto (Markdown, código, etc.) |
|
||||
| `gum join` | Combina salidas en layouts |
|
||||
| `gum table` | Muestra datos en formato de tabla |
|
||||
| `gum pager` | Visualizador de texto paginado |
|
||||
|
||||
## Ejemplos Prácticos
|
||||
| Comando | Descripción |
|
||||
|---------------|--------------------------------------------|
|
||||
| `gum style` | Da formato al texto (color, negrita, etc.) |
|
||||
| `gum input` | Campo de entrada para texto |
|
||||
| `gum write` | Área de texto multilínea |
|
||||
| `gum confirm` | Diálogo de confirmación (Sí/No) |
|
||||
| `gum choose` | Menú de selección de opciones |
|
||||
| `gum filter` | Lista filtrable de opciones |
|
||||
| `gum spin` | Indicador de carga con mensaje |
|
||||
| `gum format` | Formatea texto (Markdown, código, etc.) |
|
||||
| `gum join` | Combina salidas en layouts |
|
||||
| `gum table` | Muestra datos en formato de tabla |
|
||||
| `gum pager` | Visualizador de texto paginado |
|
||||
|
||||
### 1. Formulario Básico de Registro
|
||||
|
||||
|
|
@ -51,10 +40,6 @@ Vamos a crear un formulario simple que solicite nombre, correo electrónico y co
|
|||
#!/bin/bash
|
||||
# Ejemplo de formulario básico con Gum
|
||||
|
||||
# Importar bibliotecas necesarias (opcional para MRDevs Tools)
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
source "${SCRIPT_DIR}/lib/base.lib"
|
||||
|
||||
# Título estilizado
|
||||
echo
|
||||
gum style --foreground 212 --bold --align center "Formulario de Registro"
|
||||
|
|
@ -84,6 +69,8 @@ else
|
|||
fi
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 2. Selector de Proyecto
|
||||
|
||||
Creemos un selector para elegir el tipo de proyecto a crear:
|
||||
|
|
@ -139,6 +126,8 @@ else
|
|||
fi
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 3. Utilidad de Configuración del Sistema
|
||||
|
||||
Este ejemplo muestra cómo crear una utilidad para configurar aspectos del sistema:
|
||||
|
|
@ -241,6 +230,8 @@ main() {
|
|||
main
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Técnicas Avanzadas
|
||||
|
||||
### Layouts con `gum join`
|
||||
|
|
@ -261,6 +252,8 @@ gum join --vertical \
|
|||
"$(gum style --padding "1 2" --border normal --width 50 "Fila 3")"
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Tablas de Datos
|
||||
|
||||
Las tablas son útiles para mostrar datos estructurados:
|
||||
|
|
@ -271,6 +264,8 @@ echo -e "NOMBRE\tROL\tDEPARTAMENTO\nJuan Pérez\tDesarrollador\tTecnología\nAna
|
|||
gum table --widths 20,15,20 --height 10
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Filtrar Listas Largas
|
||||
|
||||
Para buscar en listas extensas:
|
||||
|
|
@ -296,103 +291,6 @@ gum input --prompt "Nombre: "
|
|||
gum confirm "¿Continuar?"
|
||||
```
|
||||
|
||||
## Integración con MRDevs Tools
|
||||
|
||||
### Template de Asistente con Gum
|
||||
|
||||
Aquí hay un template para crear asistentes interactivos en MRDevs Tools:
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
#Script : asistente_ejemplo.sh
|
||||
#Apps : MRDEVS TOOLS
|
||||
#Description : Asistente interactivo con Gum
|
||||
#Author : Tu Nombre
|
||||
#Created : 2025/04/05
|
||||
#Modified : 2025/04/05
|
||||
#Version : 1.0.0
|
||||
#Use Notes :
|
||||
#==============================================================================
|
||||
# Derechos de Autor 2025 Mauro Rosero P. <mauro@rosero.one>
|
||||
#==============================================================================
|
||||
# Este programa es software libre: usted puede redistribuirlo y/o modificarlo
|
||||
# bajo los términos de la Licencia Pública Affero General de GNU tal como
|
||||
# lo publica la Free Software Foundation, ya sea la versión 3 de la licencia,
|
||||
# o (a su elección) cualquier versión posterior.
|
||||
#
|
||||
# [...]
|
||||
|
||||
# Configuración inicial
|
||||
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
|
||||
source "${SCRIPT_DIR}/lib/base.lib"
|
||||
source "${SCRIPT_DIR}/lib/console.lib"
|
||||
|
||||
# Cargar mensajes
|
||||
load_messages "${SCRIPT_DIR}" "msg" "${LANG:0:2}" "head"
|
||||
|
||||
# Verificar que gum esté instalado
|
||||
command_installed gum
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "Error: Gum no está instalado. Ejecutando bootstrap.sh..."
|
||||
"${SCRIPT_DIR}/bootstrap.sh"
|
||||
|
||||
# Verificar nuevamente
|
||||
command_installed gum
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "Error: No se pudo instalar Gum. Abortando."
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
|
||||
# Funciones del asistente
|
||||
mostrar_titulo() {
|
||||
clear
|
||||
gum style \
|
||||
--foreground 212 --border double --border-foreground 99 \
|
||||
--align center --width 60 --margin "1 0" --padding "1 2" \
|
||||
"Asistente Interactivo MRDevs"
|
||||
}
|
||||
|
||||
mostrar_menu() {
|
||||
gum style --foreground 99 "Selecciona una opción:"
|
||||
gum choose --height 10 \
|
||||
"1. Opción Uno" \
|
||||
"2. Opción Dos" \
|
||||
"3. Opción Tres" \
|
||||
"4. Salir"
|
||||
}
|
||||
|
||||
# Flujo principal
|
||||
main() {
|
||||
mostrar_titulo
|
||||
|
||||
while true; do
|
||||
echo
|
||||
opcion=$(mostrar_menu)
|
||||
|
||||
case $opcion in
|
||||
"1. Opción Uno")
|
||||
gum style --foreground 82 "Has seleccionado la Opción Uno"
|
||||
gum input --placeholder "Presiona Enter para continuar..."
|
||||
mostrar_titulo
|
||||
;;
|
||||
"4. Salir")
|
||||
gum style --foreground 82 "¡Gracias por usar el Asistente MRDevs!"
|
||||
exit 0
|
||||
;;
|
||||
*)
|
||||
gum style --foreground 196 "Opción no implementada aún."
|
||||
gum input --placeholder "Presiona Enter para continuar..."
|
||||
mostrar_titulo
|
||||
;;
|
||||
esac
|
||||
done
|
||||
}
|
||||
|
||||
# Iniciar programa
|
||||
main
|
||||
```
|
||||
|
||||
### Ejemplo Práctico: Asistente de Configuración de Proyecto
|
||||
|
||||
Este ejemplo muestra cómo usar Gum para crear un asistente para inicializar proyectos:
|
||||
|
|
|
|||
Loading…
Reference in a new issue