es blog: add quizes to zig 6

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,104 @@ 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>
+