From ccc50fbb7f14c63f137cba6d46c7a26bd644cb11 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Tue, 20 Aug 2024 16:40:08 -0500
Subject: [PATCH] es blog: add quizes to zig 6

---
 src/components/Blog/Exercise.astro            |  42 +++++++
 src/components/Blog/Sh.astro                  |   5 +
 src/pages/blog/es/index.astro                 |   2 +-
 ...programacion-06.md => programacion-06.mdx} | 103 +++++++++++++++++-
 4 files changed, 150 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Blog/Exercise.astro
 create mode 100644 src/components/Blog/Sh.astro
 rename src/pages/blog/es/{programacion-06.md => programacion-06.mdx} (62%)

diff --git a/src/components/Blog/Exercise.astro b/src/components/Blog/Exercise.astro
new file mode 100644
index 0000000..efe78cf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Blog/Sh.astro b/src/components/Blog/Sh.astro
new file mode 100644
index 0000000..57e1a4e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/blog/es/index.astro b/src/pages/blog/es/index.astro
index 07da64a..175acc3 100644
--- a/src/pages/blog/es/index.astro
+++ b/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">
diff --git a/src/pages/blog/es/programacion-06.md b/src/pages/blog/es/programacion-06.mdx
similarity index 62%
rename from src/pages/blog/es/programacion-06.md
rename to src/pages/blog/es/programacion-06.mdx
index af736a1..56e2b36 100644
--- a/src/pages/blog/es/programacion-06.md
+++ b/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>
+