es blog: Add exercises

src/components/Blog/Exercise.astro

@@ -0,0 +1,42 @@
+<div class="border-l border-c-on-bg pl-4 my-8">
+    <slot />
+
+    <div>
+        <button class="inline-block py-2 px-4 rounded-md bg-cyan-300 text-cyan-950
+            font-bold hover:underline exercise-button"
+        >
+            Mostrar solución
+        </button>
+    </div>
+
+    <div class="pt-4 hidden exercise-solution">
+        <slot name="solution" />
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const solutionButtons = document.querySelectorAll(".exercise-button");
+
+        for (const button of solutionButtons) {
+            button.addEventListener("click", (ev) => {
+                const el = ev.target as HTMLButtonElement;
+                const button_text = el.innerText;
+                const solution_div = el.parentElement?.parentElement?.querySelector(".exercise-solution");
+
+                if (!solution_div) {
+                    console.error("A solution button doesn't have its correspoding solution");
+                    console.error(el);
+                }
+
+                if (button_text === "Mostrar solución") {
+                    el.innerText = "Ocultar solución";
+                } else {
+                    el.innerText = "Mostrar solución";
+                }
+
+                solution_div?.classList.toggle("hidden");
+            });
+        }
+    });
+</script>

src/components/Blog/Sh.astro

@@ -0,0 +1,5 @@
+---
+const {code} = Astro.props;
+---
+
+<div class="whitespace-pre p-2 bg-black text-white rounded-md mb-4 font-mono">{code}</div>

src/pages/blog/es/index.astro

@@ -1,7 +1,7 @@
 ---
 import BlogLayout from "../../../layouts/BlogLayout.astro";
 
-const allPosts = await Astro.glob("./*.md");
+const allPosts = await Astro.glob("./*.{md,mdx}");
 ---
 
 <BlogLayout lang="es">

src/pages/blog/es/programacion-06.mdx

@@ -10,6 +10,9 @@ image:
     alt: ""
     caption: ""
 ---
+import Exercise from "../../../components/Blog/Exercise.astro"
+import Sh from "../../../components/Blog/Sh.astro"
+
 
 En el artículo anterior escribimos nuestro primer programa:
 Hola mundo. En este artículos vamos a modificar el mensaje
@@ -148,7 +151,6 @@ pub fn main() !void {
 
 Cada instrucción se coloca en una linea nueva.
 
-
 ## Siguiente
 
 En el siguiente artículo continuaremos trabajando
@@ -156,5 +158,122 @@ con impresiones, y aprenderemos qué es ese dato
 adicional misterioso.
 
 
+## Ejercicios
+
+Resuelve estos ejercicios en tu editor de texto VSCode.
+Al ejecutar debe salir en el terminal el mismo resultado
+que el del enunciado.
+
+Si estas atascado en un problema puedes mostrar la solución,
+pero intenta resolverlos por ti mismo antes.
+
+<Exercise>
+    1: Utiliza `std.debug.print` para imprimir:
+
+    <Sh code={"Son las 10:00pm"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("Son las 10:00pm", .{}); // [!code focus]
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    2: Escribe un programa que imprima el siguiente texto
+    (necesitaras usar `\n` para crear 2 lineas):
+
+    <Sh code={"hola\nmundo"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("hola\nmundo", .{}); // [!code focus]
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    3: Escribe un programa que imprima el siguiente texto.
+    Utiliza 1 `std.debug.print` para cada linea
+
+    <Sh code={"El\ncielo\nes\nazul"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("El\n", .{}); // [!code focus:4]
+        std.debug.print("cielo\n", .{});
+        std.debug.print("es\n", .{});
+        std.debug.print("azul\n", .{});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    4: Escribe un programa que imprima el siguiente texto.
+    Utiliza **solo 1** `std.debug.print`;
+
+    <Sh code={"El\ncielo\nes\nazul"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("El\ncielo\nes\nazul\n", .{}); // [!code focus]
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    5: Escribe un programa que imprima el siguiente texto
+    (fíjate en los espacios en blanco antes de cada palabra):
+
+    <Sh code={"    El\n    cielo\n    es\n    azul"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("    El\n", .{}); // [!code focus:4]
+        std.debug.print("    cielo\n", .{});
+        std.debug.print("    es\n", .{});
+        std.debug.print("    azul\n", .{});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    6: Escribe un programa que imprima el siguiente texto
+    (fíjate en las lineas en blanco):
+
+    <Sh code={"linea 1\n\nlinea2\n\n\nlinea3"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("linea 1\n\n", .{}); // [!code focus:3]
+        std.debug.print("linea 2\n\n\n", .{});
+        std.debug.print("linea 3", .{});
+    }
+    ```
+    </Fragment>
+</Exercise>
 
 

src/pages/blog/es/programacion-07.mdx

@@ -10,6 +10,8 @@ image:
     alt: ""
     caption: ""
 ---
+import Exercise from "../../../components/Blog/Exercise.astro"
+import Sh from "../../../components/Blog/Sh.astro"
 
 En este artículo aprenderemos más acerca de la impresión,
 especialmente un aspecto importante para futúros artículos:
@@ -83,4 +85,27 @@ Hemos visto el formato `{s}`, pero existen muchos más,
 que aprenderemos a medida que los necesitemos.
 
 
+## Ejercicios
 
+Resuelve estos ejercicios en tu editor de texto VSCode.
+Al ejecutar debe salir en el terminal el mismo resultado
+que el del enunciado.
+
+Si estas atascado en un problema puedes mostrar la solución,
+pero intenta resolverlos por ti mismo antes.
+
+<Exercise>
+    1: Utiliza el formato `{s}` para imprimir:
+
+    <Sh code={"Hola mundo"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        std.debug.print("Hola {s}", .{"mundo"}); // [!code focus]
+    }
+    ```
+    </Fragment>
+</Exercise>

src/pages/blog/es/programacion-08.mdx

@@ -10,6 +10,8 @@ image:
     alt: ""
     caption: ""
 ---
+import Exercise from "../../../components/Blog/Exercise.astro"
+import Sh from "../../../components/Blog/Sh.astro"
 
 Ahora veremos un concepto fundamental: Variables.
 
@@ -162,8 +164,6 @@ Para crear una variable se escribe:
 - El valor de la variable
 - `;`
 
-El nombre de la variable solo puede tener letras,
-números y guiones bajos. No puede tener espacios.
 
 Puedes crear varias variables, cada una en una
 línea. Por ejemplo:
@@ -174,6 +174,37 @@ const edad = "32";
 const helado_favorito = "Vainilla";
 ```
 
+
+## Nombre de la variable
+
+Los nombres de las variables siguen algunas reglas:
+
+- El nombre inicia con letra minúscula o guión bajo `_`
+- El nombre despues puede tener letras minúsculas, mayúsculas,
+    números o guiones bajos `_`.
+- No pueden haber espacios, guiones `-` u otros.
+
+Por ejemplo, los siguientes nombres son válidos:
+
+```zig
+_nombre
+apellido
+nombres_y_apellidos
+numeroDeVentas
+ratio_fiscal_2
+```
+
+Los siguientes nombres son inválidos:
+
+```zig
+Nombre              // inicia con N mayuscula
+3_gatos             // inicia con un número
+nombres y apellidos // tiene espacios
+apelido-paterno     // tiene un guión
+```
+
+
+
 ## Error de duplicado
 
 Otro dato importante es que solo se puede crear
@@ -221,4 +252,143 @@ En el siguiente artículo aprenderemos los conceptos:
 comentarios, números y operaciones matemáticas.
 
 
+## Ejercicios
+
+Resuelve estos ejercicios en tu editor de texto VSCode.
+Al ejecutar debe salir en el terminal el mismo resultado
+que el del enunciado.
+
+Tu respuesta no necesita ser exáctamente la misma a la
+que está aquí, pero debería funcionar.
+
+<Exercise>
+    1: Crea una variable `nombre` con valor `"John"`,
+    y una variable `apellido` con valor `"Doe"`.
+    Imprime ambas utilizando formatos.
+
+    <Sh code={"John Doe"} />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        const nombre = "John"; // [!code focus:4]
+        const apellido = "Doe";
+
+        std.debug.print("{s} {s}\n", .{nombre, apellido});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    2: Necesito un programa que imprima el siguiente mensaje:
+
+    <Sh code={"Bienvenido a ACME inc\n\nTu postulación a ACME inc ha sido aceptada.\nEn breve recibirás un correo con el código de conducta de ACME inc"} />
+
+    Mi empresa aún no tiene un nombre fijo, así que necesito
+    poder cambiar `ACME inc` fácilmente después.
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        const empresa = "ACME inc"; // [!code focus:5]
+
+        std.debug.print("Bienvenido a {s}\n\n", .{empresa});
+        std.debug.print("Tu postulación a {s} ha sido aceptada.\n", .{empresa});
+        std.debug.print("En breve recibirás un correo con el código de conducta de {s}\n", .{empresa});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    3: También necesito un programa que imprima una lista de invitados:
+
+    <Sh code={"Lista de invitados:\n\n"
+        + "Área A de ACME inc: Rosa\n"
+        + "Área A de ACME inc: María\n"
+        + "Área A de ACME inc: Andrea\n"
+        + "Área B de ACME inc: Rodrigo\n"
+        + "Área B de ACME inc: Pedro\n"
+        + "Área C de ACME inc: Raul\n"
+        + "Área C de ACME inc: Ana\n"
+    } />
+
+    Como puedes ver, aun está el nombre provisional `ACME inc`.
+    Pero también hay nombres provisionales de las áreas de la
+    empresa: `Área A`, `Área B` y `Área C`. Estos nombres
+    eventualmente cambiarán, asi que necesito poder cambiarlos
+    después en un único lugar. Los nombres de las personas
+    no cambiarán.
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        const empresa = "ACME inc"; // [!code focus:13]
+        const area_1 = "Área A";
+        const area_2 = "Área B";
+        const area_3 = "Área C";
+
+        std.debug.print("Lista de invitados:\n\n", .{});
+        std.debug.print("{} de {}: Rosa\n", .{area_1, empresa});
+        std.debug.print("{} de {}: María\n", .{area_1, empresa});
+        std.debug.print("{} de {}: Andrea\n", .{area_1, empresa});
+        std.debug.print("{} de {}: Rodrigo\n", .{area_2, empresa});
+        std.debug.print("{} de {}: Pedro\n", .{area_2, empresa});
+        std.debug.print("{} de {}: Raul\n", .{area_3, empresa});
+        std.debug.print("{} de {}: Ana\n", .{area_3, empresa});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+<Exercise>
+    4: Mis socios y yo nos pusimos de acuerdo. Necesito el programa
+    para imprimir la lista de invitados. El nombre final de la
+    empresa es `AXM SAC`, y las 3 áreas son (en orden):
+    `Administración`, `Tesorería` y `Ventas`.
+
+    La lista debe verse así:
+
+    <Sh code={"Lista de invitados:\n\n"
+        + "Administración de AXM SAC: Rosa\n"
+        + "Administración de AXM SAC: María\n"
+        + "Administración de AXM SAC: Andrea\n"
+        + "Tesorería de AXM SAC: Rodrigo\n"
+        + "Tesorería de AXM SAC: Pedro\n"
+        + "Ventas de AXM SAC: Raul\n"
+        + "Ventas de AXM SAC: Ana\n"
+    } />
+
+    <Fragment slot="solution">
+    ```zig
+    const std = @import("std");
+
+    pub fn main() !void {
+        const empresa = "AXM SAC"; // [!code focus:13]
+        const area_1 = "Administración";
+        const area_2 = "Tesorería";
+        const area_3 = "Ventas";
+
+        std.debug.print("Lista de invitados:\n\n", .{});
+        std.debug.print("{} de {}: Rosa\n", .{area_1, empresa});
+        std.debug.print("{} de {}: María\n", .{area_1, empresa});
+        std.debug.print("{} de {}: Andrea\n", .{area_1, empresa});
+        std.debug.print("{} de {}: Rodrigo\n", .{area_2, empresa});
+        std.debug.print("{} de {}: Pedro\n", .{area_2, empresa});
+        std.debug.print("{} de {}: Raul\n", .{area_3, empresa});
+        std.debug.print("{} de {}: Ana\n", .{area_3, empresa});
+    }
+    ```
+    </Fragment>
+</Exercise>
+
+
+
 

src/pages/blog/es/programacion-09.mdx

@@ -10,6 +10,8 @@ image:
     alt: "Imágen del meme 'Matemáticas hijo'"
     caption: "¡Matemáticas hijo!"
 ---
+import Exercise from "../../../components/Blog/Exercise.astro"
+import Sh from "../../../components/Blog/Sh.astro"
 
 En este artículo vemos 3 conceptos: Comentarios, números
 y operaciones matemáticas.
@@ -72,6 +74,23 @@ A partir de ahora, utilizaré comentarios en el código
 para explicar mejor los conceptos.
 
 
+### Strings vs comentarios
+
+Los comentarios no pueden ir dentro de un string:
+
+```zig
+const std = @import("std");
+
+pub fn main() !void {
+    const nombre = "Juan // no es comentario"
+    std.debug.print("Hola {s}", .{nombre});
+}
+```
+
+<Sh code="Hola Juan" />
+
+
+
 ## Números
 
 Hay un concepto importante que aprenderemos en un
@@ -184,6 +203,21 @@ agruparlas con paréntesis.
     const resultado = 80 + 20 / (5 - 3);
 ```
 
+Y puedes utilizar variables:
+
+```zig
+const std = @import("std");
+
+pub fn main() !void {
+    const largo = 150; // [!code focus:6]
+    const ancho = 70;
+    const area = largo * ancho; // [!code highlight]
+
+    // Imprime `El área es 10500m2`
+    std.debug.print("El área es {d}m2", .{area});
+}
+```
+