Merge pull request #28 from Phosphorus-M/some-modifications

Author: Brayan-724

assets/css/app.css

@@ -23,15 +23,15 @@ body {
 
 section>div>div>h1 {
   font-size: 1.5rem;
-  margin: 0.2rem auto;
+  margin: 0.5rem auto;
 }
 section>div>div>h2 {
   font-size: 1.3rem;
-  margin: 0.2rem auto;
+  margin: 0.5rem auto;
 }
 section>div>div>h3 {
   font-size: 1.2rem;
-  margin: 0.2rem auto;
+  margin: 0.5rem auto;
 }
 section>div>div>h4 {
   font-size: 1.1rem;
@@ -46,9 +46,17 @@ section>div>div>h6 {
   margin: 0.2rem auto;
 }
 
+section>div>div{
+  gap: 0.5rem;
+}
+section>div>div>p>code{
+  padding: 0.2rem;
+}
+
 .NOTE{
   border-left: 3px solid var(--note-bg);
   margin: 0.5rem auto;
+  width: 100%;
   .title{
     font-weight: 500;
   }
@@ -127,4 +135,9 @@ li strong {
   color: var(--yellow);
 }
 
+hr {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 /* FIN DE LOS ESTILOS DE MD */

components/CodeMirror.vue

@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue';
 import { basicSetup, EditorView } from 'codemirror';
 import { gruvbox } from '../helpers/codemirror/theme.ts';
 import { rust } from '../helpers/codemirror/config.ts';
+import {keymap, lineNumbers} from "@codemirror/view"
+import {indentWithTab} from "@codemirror/commands"
 
 const props = defineProps<{
   code?: string;
@@ -19,6 +21,8 @@ onMounted(() => {
       basicSetup,
       gruvbox,
       rust(),
+      keymap.of([indentWithTab]),
+
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newCode = update.state.doc.toString();

content/6.hola-mundo.md

@@ -1,6 +1,7 @@
 ---
-nextPath: ""
-previousPath: "05-editor"
+nextPath: "variables"
+previousPath: "editor"
+expectedResponse: "Hello, world!\n"
 ---
 
 

content/7.variables.md

@@ -0,0 +1,75 @@
+---
+nextPath: "constants"
+previousPath: "hola-mundo"
+expectedResponse: "edad = 25\ncontador = 0\nnuevo contador = 1\n"
+initialCode: |
+  fn main() {
+    edad = 25
+    contador = 0
+    println!("edad = {edad}");
+    println!("contador = {contador}");
+    contador = 1
+    println!("nuevo contador = {contador}");
+  }
+
+---
+
+# Variables
+
+Cuando programemos usaremos infinidad de veces algo llamado variables.
+
+Una variable es un contenedor que almacena un valor o información en un programa de computadora. Estos valores pueden ser números, texto, lógicos como verdadero o falso, u otros tipos de información.
+
+Veamos el siguiente ejemplo.
+
+```rust
+let mi_numero = 2;
+```
+
+En Rust, las variables se declaran usando la palabra clave `let`.
+Por defecto, las variables son **inmutables**, lo que significa que no puedes cambiar su valor una vez asignado.
+Si quieres que una variable sea mutable, debes usar la palabra clave `mut`.
+
+Ejemplo:
+
+```rust
+fn main() {
+    let x = 5;       // variable inmutable
+    let mut y = 10;  // variable mutable
+
+    println!("x = {}", x);
+    println!("y = {}", y);
+
+    y = 15; // permitido porque es mutable
+    println!("nuevo y = {}", y);
+}
+```
+
+👉 Observa que `x` no puede ser modificado, pero `y` sí.
+Esto hace que Rust promueva la **seguridad en la programación**, evitando cambios accidentales.
+
+---
+
+### 📝 Ejercicio
+
+Declara dos variables:
+
+1. Una inmutable llamada `edad` con el valor `25`.
+2. Una mutable llamada `contador` con el valor `0`.
+
+Después:
+
+* Intenta imprimir ambas variables.
+* Cambia el valor de `contador` a `1`.
+* Imprime nuevamente el valor de `contador`.
+
+🔹 Tu programa debería mostrar algo como:
+
+```rust
+edad = 25
+contador = 0
+println!("edad = {edad}");
+println!("contador = {contador}");
+contador = 1;
+println!("nuevo contador = {contador}");
+```

content/8.constants.md

@@ -0,0 +1,58 @@
+---
+nextPath: ""
+previousPath: "variables"
+expectedResponse: "Un día tiene 86400 segundos\n"
+initialCode: |
+  // Escribe aquí tus constantes:
+  SECONDS_IN_MINUTE = ...;
+  HOURS_IN_DAY = ...;
+  
+  fn main() {
+      // Calcula los segundos en un día usando las constantes
+  
+      // Muestra el resultado
+      println!("Un día tiene ??? segundos");
+      // Reemplaza ??? con el cálculo correcto
+  }
+
+---
+
+# Constantes
+
+En Rust, además de las variables, podemos definir **constantes**.
+Una constante es un valor **inmutable** que se conoce **en tiempo de compilación** y no puede cambiar durante la ejecución del programa.
+
+Se definen con la palabra clave `const` y, a diferencia de `let`, **siempre requieren un tipo explícito**.
+
+Por ejemplo:
+
+```rust
+const PI: f64 = 3.14159;
+const MAX_USERS: u32 = 100;
+```
+
+* `PI` es una constante de tipo `f64`.
+* `MAX_USERS` es una constante de tipo `u32`.
+
+Las constantes son muy útiles cuando necesitas valores fijos que no deben variar, como configuraciones predeterminadas o límites dentro de un programa.
+
+📌 Diferencia con `let`:
+
+* `let` puede ser mutable (`let mut`) o inmutable, y su valor se conoce en **tiempo de ejecución**.
+* `const` siempre es inmutable, y su valor debe estar disponible en **tiempo de compilación**.
+
+---
+
+### ✏️ Ejercicio
+
+Declara dos constantes:
+
+1. `SECONDS_IN_MINUTE` de tipo `u32` con valor `60`.
+2. `HOURS_IN_DAY` de tipo `u32` con valor `24`.
+
+Luego, usa estas constantes para calcular cuántos **segundos hay en un día** y muestra el resultado con `println!`.
+
+<div class="NOTE">
+  <p class="title">💡 Pista</p>
+  <p>Multiplica en orden → segundos por minuto × minutos por hora × horas por día. 😀</p>
+</div>

helpers/getCodeResponse.ts

@@ -1,13 +1,18 @@
 import { hitApi } from "~/services/api";
 
-export async function getCodeResponse(payload: Object): Promise<Object> {
+export type RustPlaygroundResponse = {
+  body: {
+    result: string,
+    error?: string
+  },
+  status: number
+}
+
+export async function getCodeResponse(payload: Object): Promise<RustPlaygroundResponse> {
   const response = await hitApi(
     "POST",
-    "https://emkc.org/api/v2/piston/execute",
+    "https://play.rust-lang.org/evaluate.json",
     payload,
   );
-  if (response.run.code !== 0) {
-    return response.run.stderr;
-  }
-  return response.run.stdout;
+  return response;
 }

nuxt.config.ts

@@ -17,8 +17,9 @@ export default defineNuxtConfig({
     "nitro-cloudflare-dev",
     "nuxt-clarity-analytics",
   ],
-
+  
   content: {
+    documentDriven: true,
     highlight: {
       theme: {
         default: "dracula",