[CONTENT] Agregando el contenido de la introduccion

components/NodeCard.vue

@@ -4,6 +4,12 @@
   import { Handle, Position } from '@vue-flow/core'
 
   const ignoreTypes = ["topics", "transparent"]
+  const positions = {
+      top: Position.Top,
+      left: Position.Left,
+      right: Position.Right,
+      bottom: Position.Bottom,
+  }
 
   const props = defineProps({
     data: Object,
@@ -32,24 +38,26 @@
     console.log(node)
   })
 
-  const checkSourceHandle = (ty) => {
-    return Object.values(props.data.sourcePosition || {}).includes(ty)
-  }
-  const checkTargetHandle = (ty) => {
-    return Object.values(props.data.targetPosition || {}).includes(ty)
+  const generateStyle = (handle, index) => {
+    return { [handle]: `${index * 10}px` }
   }
 </script>
 
 <template>
-  <Handle v-if="checkSourceHandle('right')" type="source" :position="Position.Right"  />
-  <Handle v-if="checkSourceHandle('top')" type="source" :position="Position.Top"  />
-  <Handle v-if="checkSourceHandle('left')" type="source" :position="Position.Left" />
-  <Handle v-if="checkSourceHandle('bottom')" type="source" :position="Position.Bottom"/>
-
-  <Handle v-if="checkTargetHandle('right')" type="target" :position="Position.Right" />
-  <Handle v-if="checkTargetHandle('top')" type="target" :position="Position.Top" />
-  <Handle v-if="checkTargetHandle('left')" type="target" :position="Position.Left" />
-  <Handle v-if="checkTargetHandle('bottom')" type="target" :position="Position.Bottom" />
+  <Handle
+    v-for="(handle, index) in Object.values(props.data.sourcePosition || {})"
+    :position="positions[handle]"
+    :key="`source-${index}-${handle}`"
+    :id="`source-${index}-${handle}`"
+    type="source"
+    />
+  <Handle
+    v-for="(handle, index) in Object.values(props.data.targetPosition || {})"
+    :position="positions[handle]"
+    :key="`target-${index}-${handle}`"
+    :id="`target-${index}-${handle}`"
+    type="target"
+    />
 
   {{ props.data.position }}
   <Card class="flex flex-row gap-x-2" :class="'topic-' + props.data.topicLevel" :moreTransparency="props.data.moreTransparency" :noInteractive="props.data.noInteractive">

content/1.introduction/code-editor.md

@@ -0,0 +1,122 @@
+---
+title: 'Configurando Tu Entorno'
+description: 'Guía de configuracion para los Editores de Texto Más Comunes (Vs Code, Visual Studio, IntelliJ IDEA, Vim, Neovim, Sublime Text)'
+draft: true
+data:
+  type: 'custom'
+  topicLevel: 'start'
+  position:
+    x: 620
+    y: 280
+  width: 320
+  externalLinks:
+    - name: 'Manual oficial de instalacion'
+      english: true
+      link: 'https://rust-analyzer.github.io/manual.html#installation'
+    - name: 'Extension de Rust para VsCode'
+      english: true
+      link: 'https://code.visualstudio.com/docs/languages/rust'
+    - name: 'Extension de Rust para Visual Studio'
+      english: true
+      link: 'https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer'
+    - name: 'Rust Enhanced (Sublime Text Extension)'
+      english: true
+      link: 'https://github.com/rust-lang/rust-enhanced'
+    - name: 'LSP de Rust Analyzer para Neovim/Vim'
+      english: true
+      link: 'https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#rust_analyzer'
+    - name: 'Lapce Code Editor'
+      english: true
+      link: 'https://lapce.dev/'
+    - name: 'Editor de texto Zed'
+      english: true
+      link: 'https://zed.dev/'
+    - name: 'Helix Code Editor (Terminal)'
+      english: true
+      link: 'https://helix-editor.com/'
+    - name: 'RustRover (Jetbrains IDE)'
+      english: true
+      link: 'https://www.jetbrains.com/rust/'
+---
+## Configurando Tu Entorno de Desarrollo para Rust: Guía para los Editores de Texto Más Comunes
+
+Rust es un lenguaje poderoso y eficiente, y para aprovecharlo al máximo, es importante configurar correctamente tu entorno de desarrollo. En este post, exploraremos cómo configurar algunos de los editores de texto más populares para trabajar con Rust, así como una mención a nuevos editores hechos en Rust que están ganando popularidad.
+
+> Para todos los editores debes asegurarte de haber instalado Rust correctamente, para eso aprovecha nuestra guia anterior.
+
+### Visual Studio Code (VSCode)
+
+VSCode es uno de los editores más populares y versátiles disponibles. Configurarlo para Rust es bastante sencillo:
+
+1. **Instala VSCode** desde [su sitio web](https://code.visualstudio.com/).
+2. **Abre VSCode** y ve a la **extensiones** (icono de cuadrado en la barra lateral izquierda).
+3. Busca e instala la extensión **Rust (rust-lang.rust)**. Esta extensión proporciona soporte para el lenguaje Rust.
+4. Opcionalmente, instala **rust-analyzer** para una experiencia mejorada de desarrollo. Busca **rust-analyzer** en la pestaña de extensiones e instálalo.
+5. Configura **rust-analyzer** y otras herramientas de Rust en el archivo de configuración de VSCode (`settings.json`) si es necesario. La configuración básica suele ser suficiente para empezar.
+
+### Visual Studio
+
+Para aquellos que prefieren el entorno de desarrollo de Visual Studio:
+
+1. **Instala Visual Studio** desde [su sitio web](https://visualstudio.microsoft.com/).
+2. Durante la instalación, asegúrate de incluir la **carga de trabajo de desarrollo de escritorio con C++**, ya que contiene herramientas necesarias para compilar Rust.
+3. Instala la extensión **Rust** desde el **Administrador de Extensiones** en Visual Studio.
+4. Abre un proyecto de Rust y Visual Studio debería configurarse automáticamente para proporcionar soporte básico.
+
+### IntelliJ IDEA
+
+JetBrains ofrece un excelente soporte para Rust a través de su IDE IntelliJ IDEA:
+
+1. **Descarga e instala IntelliJ IDEA** desde [su sitio web](https://www.jetbrains.com/idea/).
+2. Abre IntelliJ IDEA y ve a **Configuración > Plugins**.
+3. Busca e instala el plugin **Rust**.
+4. Reinicia IntelliJ IDEA para aplicar los cambios.
+5. Crea un nuevo proyecto de Rust o abre uno existente. IntelliJ IDEA proporcionará soporte completo para Rust, incluyendo resaltado de sintaxis, autocompletado y más.
+
+### Sublime Text
+
+Sublime Text es un editor ligero y rápido que también puede configurarse para Rust:
+
+1. **Descarga e instala Sublime Text** desde [su sitio web](https://www.sublimetext.com/).
+2. Abre Sublime Text y ve a **Preferences > Package Control**.
+3. Instala **Rust Enhanced** utilizando Package Control. Abre la paleta de comandos (`Ctrl+Shift+P` o `Cmd+Shift+P`), selecciona **Package Control: Install Package** y busca **Rust Enhanced**.
+4. Esta extensión proporciona resaltado de sintaxis, compilación y ejecución de código Rust.
+
+### Vim
+
+Vim es un editor muy popular entre los desarrolladores que prefieren trabajar en la terminal:
+
+1. Instala el plugin **rust.vim**. Si usas un gestor de plugins como **Vundle** o **Plug**, añade lo siguiente a tu archivo de configuración (`.vimrc`):
+
+   Con Vundle:
+   ```vim
+   Plugin 'rust-lang/rust.vim'
+   ```
+
+   Con Plug:
+   ```vim
+   Plug 'rust-lang/rust.vim'
+   ```
+
+2. Recarga tu archivo de configuración y ejecuta el comando para instalar el plugin (`:PluginInstall` o `:PlugInstall`).
+3. Para mejorar aún más la experiencia, considera instalar **coc.nvim** para soporte de LSP y autocompletado. Configura `coc.nvim` para usar `rust-analyzer` siguiendo las instrucciones en su [documentación](https://github.com/neoclide/coc.nvim).
+
+> Para Vim o Neovim tambien puedes optar por instalar el LSP correspondiente desde [Mason](https://github.com/williamboman/mason.nvim), el LSP de Rust por defecto es [rust-analyzer](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#rust_analyzer)
+
+### Nuevos Editores Hechos en Rust
+
+Además de los editores mencionados anteriormente, hay algunos nuevos editores desarrollados en Rust que están ganando popularidad:
+
+1. **Helix**: Helix es un editor moderno y potente que ofrece una experiencia de edición eficiente y rápida. Es altamente configurable y aprovecha las capacidades de Rust para ofrecer un rendimiento excelente. Puedes obtener más información y descargarlo desde [su repositorio en GitHub](https://github.com/helix-editor/helix).
+
+2. **Zed**: Zed es otro editor prometedor desarrollado en Rust. Aún en desarrollo, Zed promete ser un editor rápido y minimalista con un fuerte enfoque en la usabilidad y el rendimiento. Visita [el sitio web de Zed](https://zed.dev/) para más detalles.
+
+3. **Lapce**: Lapce es un editor de texto rápido y ligero que utiliza Rust para su backend y GUI, proporcionando una experiencia de edición moderna y eficiente. Puedes encontrar más información y descargar Lapce desde [su repositorio en GitHub](https://github.com/lapce/lapce).
+
+4. **RustRover**: RustRover es un entorno de desarrollo integrado (IDE) creado por JetBrains, diseñado específicamente para el lenguaje de programación Rust. Aprovechando la experiencia de JetBrains en la creación de herramientas de desarrollo robustas y eficientes, RustRover ofrece una serie de características avanzadas que facilitan el desarrollo con Rust.
+
+> RustRover cuenta con una licencia gratuita para proyectos personales.
+
+### Conclusión
+
+Configurar tu entorno de desarrollo para Rust puede mejorar significativamente tu productividad y experiencia de desarrollo. Ya sea que prefieras un editor ligero como Sublime Text o Vim, o un IDE completo como VSCode o IntelliJ IDEA, hay opciones disponibles para satisfacer tus necesidades. Además, los nuevos editores desarrollados en Rust como Helix, Zed y Lapce están abriendo nuevas posibilidades con su rendimiento y características avanzadas. ¡Elige tu editor favorito y comienza a disfrutar de la potencia de Rust!

content/1.introduction/environment.yml

@@ -0,0 +1,11 @@
+title: 'Configura tu Entorno'
+description: ''
+data:
+  type: 'transparent'
+  topicLevel: 'start'
+  position:
+    x: 620
+    y: 200
+  width: 320
+  sourcePosition:
+    introduction: 'left'

content/1.introduction/first-program.md

@@ -0,0 +1,108 @@
+---
+title: 'Tu Primer Programa'
+description: 'Escribiendo Tu Primer Programa en Rust: Una Guía Paso a Paso'
+draft: true
+data:
+  type: 'custom'
+  topicLevel: 'start'
+  position:
+    x: 620
+    y: 320
+  width: 320
+  externalLinks:
+    - name: '¡Hola, mundo!'
+      english: false
+      link: 'https://book.rustlang-es.org/ch01-02-hello-world'
+    - name: '¡Hola, Cargo!'
+      english: false
+      link: 'https://book.rustlang-es.org/ch01-03-hello-cargo'
+---
+## Escribiendo Tu Primer Programa en Rust: Una Guía Paso a Paso
+
+Rust es un lenguaje de programación moderno que se destaca por su seguridad y rendimiento. Si estás listo para dar tus primeros pasos en Rust, esta guía te ayudará a configurar tu entorno y a escribir tu primer programa sencillo. Vamos a crear un proyecto llamado "hola_mundo" utilizando Cargo, la herramienta de gestión de proyectos de Rust.
+
+### ¿Qué es Cargo?
+
+Cargo es la navaja suiza de Rust. Permite gestionar proyectos, probar código, manejar dependencias, y mucho más. Es una herramienta esencial para cualquier desarrollador de Rust.
+
+### Paso 1: Crear un Proyecto con Cargo
+
+Para crear tu primer proyecto con Cargo, abre una terminal y ejecuta el siguiente comando:
+
+```sh
+cargo new hola_mundo
+```
+
+Este comando creará un nuevo directorio y un proyecto llamado "hola_mundo". Cargo generará los archivos necesarios y un directorio para ti. Vamos a explorar lo que ha creado.
+
+### Paso 2: Explorar la Estructura del Proyecto
+
+Navega al directorio del proyecto y lista los archivos:
+
+```sh
+cd hola_mundo
+ls
+```
+
+Deberías ver los siguientes elementos:
+
+- `Cargo.toml`: Archivo de configuración de Cargo.
+- `src`: Directorio de código fuente.
+  - `main.rs`: Archivo principal de Rust que contiene el punto de entrada del programa.
+
+Cargo también inicializa un nuevo repositorio Git junto con un archivo `.gitignore`.
+
+### Paso 3: Entender el Código Generado
+
+Abre el archivo `src/main.rs` en tu editor de texto favorito. Verás el siguiente código:
+
+```rs
+fn main() {
+    println!("Hello, world!");
+}
+```
+
+Vamos a desglosar este código línea por línea.
+
+#### La Función `main`
+
+```rs
+fn main() {
+
+}
+```
+
+Estas líneas definen una función llamada `main`. La función `main` es especial: siempre es el primer código que se ejecuta en cada programa ejecutable de Rust. Aquí, la primera línea declara una función llamada `main` que no tiene parámetros y no devuelve nada. Si hubiera parámetros, irían dentro de los paréntesis `()`.
+
+El cuerpo de la función está envuelto en `{}`. Rust requiere llaves alrededor de todos los cuerpos de función. Es buena costumbre colocar la llave de apertura en la misma línea que la declaración de la función, agregando un espacio entre ambos.
+
+#### El Cuerpo de la Función `main`
+
+```rs
+println!("Hello, world!");
+```
+
+Esta línea hace todo el trabajo en este pequeño programa: imprime texto en la pantalla.
+
+`println!` llama a una macro de Rust. Si hubiéramos llamado a una función en su lugar, habríamos ingresado `println` (sin el `!`). Hablaremos de macros en Rust más adelante. Por ahora, solo necesitas saber que usar un `!` significa que estamos llamando a una macro en lugar de una función normal y que las macros no siempre siguen las mismas reglas que las funciones.
+
+Terminamos la línea con un punto y coma (`;`), lo que indica que esta expresión ha terminado y la siguiente está lista para comenzar. La mayoría de las líneas de código de Rust terminan con un punto y coma.
+
+### Paso 4: Ejecutar el Programa
+
+Ahora que entendemos el código, es hora de ejecutarlo. En la terminal, ejecuta:
+
+```sh
+cargo run
+```
+
+Deberías ver una salida similar a esta:
+
+```sh
+$ cargo run
+    Finished dev [unoptimized + debuginfo] target(s) in 0.0 secs
+     Running `target/debug/hola_mundo`
+Hello, world!
+```
+
+Si todo funciona correctamente, ¡felicitaciones! Has escrito y ejecutado tu primer programa en Rust.