diff --git a/astro.config.mjs b/astro.config.mjs index 7e7ad09..b9fb9be 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,16 +1,31 @@ import { defineConfig } from 'astro/config'; import tailwind from "@astrojs/tailwind"; import mdx from "@astrojs/mdx"; +import { + transformerNotationDiff, + transformerNotationFocus, + transformerMetaHighlight, + transformerNotationHighlight, + transformerNotationErrorLevel, +} from '@shikijs/transformers' // https://astro.build/config export default defineConfig({ - integrations: [tailwind(), mdx()], - markdown: { - shikiConfig: { - themes: { - light: "catppuccin-latte", - dark: "github-dark" - } + integrations: [tailwind(), mdx()], + markdown: { + shikiConfig: { + themes: { + light: "catppuccin-latte", + dark: "dark-plus" + }, + transformers: [ + transformerNotationDiff(), + transformerNotationFocus(), + transformerMetaHighlight(), + transformerNotationHighlight(), + transformerNotationErrorLevel(), + ], + defaultColor: false, + } } - } }); diff --git a/public/blog.css b/public/blog.css index 612bb93..14aadca 100644 --- a/public/blog.css +++ b/public/blog.css @@ -6,7 +6,7 @@ } pre.astro-code { - padding: 1rem; + padding-top: 1rem; border-radius: 0.5rem; border: solid 1px var(--c-border-1); font-size: 0.8rem; @@ -74,11 +74,13 @@ pre.astro-code>code .line::before { } @media (prefers-color-scheme: dark) { + .astro-code { + background-color: var(--shiki-dark-bg) !important; + } .astro-code, .astro-code span { color: var(--shiki-dark) !important; - background-color: var(--shiki-dark-bg) !important; /* Optional, if you also want font styles */ font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; @@ -94,3 +96,63 @@ pre.astro-code>code .line::before { #isso-thread input { color: black; } + +/* Shiki transformers */ +.astro-code { + --shiki-highlight-color: #cccccc; + --shiki-error-bg-color: rgba(244, 63, 63, 0.25); +} + +@media (prefers-color-scheme: dark) { + .astro-code { + --shiki-highlight-color: #343434; + --shiki-error-bg-color: rgba(244, 63, 94, 0.16); + } +} + +.line { + display: inline-block; + width: 100%; +} + +.line.highlighted:not(.error) { + background-color: var(--shiki-highlight-color) !important; +} + +.line.highlighted.error { + background-color: var(--shiki-error-bg-color) !important; +} + + + +.line_ + +.diff { + display: inline-block; + width: 100vw; + margin: 0 -12px; + padding: 0 12px; +} + +.diff.add { + background-color: #0505; +} + +.diff.remove { + background-color: #8005; +} + +.diff:before { + position: absolute; + left: 40px; +} + +.has-focused .line:not(.focused) { + filter: blur(0.08rem); + transition: filter linear 250ms; +} + +.has-focused:hover .line:not(.focuser) { + filter: none; +} + diff --git a/public/global.css b/public/global.css index ef76e14..41e38ba 100644 --- a/public/global.css +++ b/public/global.css @@ -9,21 +9,21 @@ } @font-face { - font-family: 'Iosevka Fixed Web'; - font-display: swap; - font-weight: 700; - font-stretch: normal; - font-style: normal; - src: url('/Iosevka/Bold.woff2') format('woff2'); + font-family: 'Iosevka Fixed Web'; + font-display: swap; + font-weight: 700; + font-stretch: normal; + font-style: normal; + src: url('/Iosevka/Bold.woff2') format('woff2'); } @font-face { - font-family: 'Iosevka Etoile Web'; - font-display: swap; - font-weight: 900; - font-stretch: normal; - font-style: normal; - src: url('/IosevkaEtoile/Heavy.woff2') format('woff2'); + font-family: 'Iosevka Etoile Web'; + font-display: swap; + font-weight: 900; + font-stretch: normal; + font-style: normal; + src: url('/IosevkaEtoile/Heavy.woff2') format('woff2'); } /* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka */ diff --git a/public/img/blog/es/tutorial/007-zig1.jpg b/public/img/blog/es/tutorial/007-zig1.jpg deleted file mode 100644 index d313047..0000000 Binary files a/public/img/blog/es/tutorial/007-zig1.jpg and /dev/null differ diff --git a/src/pages/blog/es/programacion-03.md b/src/pages/blog/es/programacion-03.md index 8f85b18..beb1cfa 100644 --- a/src/pages/blog/es/programacion-03.md +++ b/src/pages/blog/es/programacion-03.md @@ -25,7 +25,7 @@ funcionan igual en Windows 11. ## Descargar e instalar VSCode Si sabes como instalar un programa y no necesitas instrucciones -paso a paso, saltate esta sección. +paso a paso, saltate esta sección y [ve a la siguiente sección](#introducción-a-vscode). Primero busca `VSCode` en Google, y entra a la primera página que sale. diff --git a/src/pages/blog/es/programacion-05.md b/src/pages/blog/es/programacion-05.md index c4c9f0c..e68e161 100644 --- a/src/pages/blog/es/programacion-05.md +++ b/src/pages/blog/es/programacion-05.md @@ -20,41 +20,63 @@ modificarlo y entender algunos otros conceptos. Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo) que se escribe cuando se aprende a programar. -Vamos a empezar con este programa. Entra a la siguiente página web: -[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW) +Abre VSCode y abre el proyecto que creaste en el artículo anterior. -Veras lo siguiente: +Allí, abre el archivo `src/main.zig`. -![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) +![VSCode](/img/blog/es/tutorial/063-zig.jpg) -Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés: +A partir de ahora vamos a trabajar en ese único archivo. -- "Run" ejecuta el programa. -- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún. -- "Share" comparte el código que escribimos. No lo usaremos. +Verás un montón de código raro: -Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún. +![VSCode](/img/blog/es/tutorial/078-zig.jpg) -Si lo modificaste y quieres volver al código original, cierra la página y vuelve a -abrirla con el link de arriba. +Vamos a eliminar todo y escribir desde cero. -## Ejecutando el código -Presiona el boton "Run". Aparecerá texto debajo del recuadro del código: +## Hola mundo -![Zig online 2](/img/blog/es/tutorial/008-zig.png) +El primer programa siempre es el más fácil. Vas a escribirlo +(o copiar y pegar) y ejecutarlo. -Este texto es el resultado de ejecutar el programa. Se lee: +Borra todo el contenido del archivo `src/main.zig` y +coloca lo siguiente: -- `Hola mundo!` : Este es el resultado del programa. -- `Program exited.` : Significa "El programa terminó" en ingles. Nos - indica que el programa terminó de ejecutarse. Puedes ignorarlo. +```zig +const std = @import("std"); -Felicidades! Has ejecutado tu primer programa. +pub fn main() !void { + std.debug.print("Hola mundo!\n", .{}); +} +``` -> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual. - Utiliza la imágen como guía. +Entra a `src/main.zig` y reemplaza todo el código que está ahí +por el código de arriba. +> Nota: Puede que notes que las imágenes no sean exáctamente + iguales a como cuando tu escribas el código. + No te preocupes, no es un problema. + +Una vez que hayas modificado el código, verás un punto blanco arriba: + +![VSCode](/img/blog/es/tutorial/080-zig.jpg) + +Esto significa que el archivo está modificado, pero no guardado. +Presiona `Control + S` para guardar el archivo. + +Ahora, ejecuta el código: Ve al terminal y ejecuta el comando +`zig build run`: + +> Nota: Verás que mi terminal se ve diferente. Pero lo importante + son los comandos, y el resultado. + +![VSCode](/img/blog/es/tutorial/081-zig.jpg) + +El resultado sale abajo: `Hola mundo!`. + + +¡Ejecutaste tu primer programa! ## ¿Qué significan todas estas letras? @@ -66,59 +88,44 @@ Así como el francés, árabe o coreano, el **lenguaje** de programación Zig tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance el tiempo. Mientras tanto, puedes ignorar todas esas palabras. -> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa - (con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa? - -## Magia negra y abstracción - -Según [Significados.com](https://www.significados.com/abstracto/), -abstracto significa vago, impreciso, teórico, que no tiene existencia -física (entre otras cosas). Algo abstracto suele ser algo difícil -de entender, o imaginario. - - -En programación, abstracto tiene otro significado. Puedes buscar su -definición técnica en internet, pero me parece muy confusa para -un principiante, así que lo explicare en mis términos. - -En programación, abstracto significa que sabemos **qué** hace, pero -no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que -al pisar el acelerador, el auto avanza. Pero no sabemos **cómo** -pisar el acelerador ocasiona que el combustible se transforme en -energía cinemática. - -Por ejemplo, voy a hablar más adelante de "imprimir" en el programa. -Imprimir significa mostrar un mensaje en la pantalla. Sin embargo, -no te voy a explicar cómo funciona la impresión. El concepto de -"imprimir" es abstracto. - -### Magia negra +## Magia negra Escuché este termino del canal de Youtube Imesi.net. Magia negra -es algo que: no se qué hace, cómo funciona, ni tampoco me importa. +es algo que: no se cómo funciona, ni tampoco me importa. +Solo me importa lo que hace. Voy a utilizar el término "magia negra" para referirme a algo por lo que no necesitas preocuparte, o intentar entender. Por -ejemplo, en el código de más arriba: +ejemplo, en el codigo que escribiste y ejecutaste, +todo lo de rojo es magia negra: -![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg) - -Todo el texto que dice: ```zig -const std = @import("std") +const std = @import("std"); // [!code error:3] -pub fn main() { - std.debug.print(); +pub fn main() !void { + std.debug.print("Hola mundo!\n", .{}); +} // [!code error] +``` + +Todo lo de rojo tiene un significado, pero aun no necesitamos +saber cuál es. Pero es importante que este ahí, tal como está +escrito. + +Lo que nosotros vamos a escribir es lo de "adentro": + +```zig +const std = @import("std"); + +pub fn main() !void { + std.debug.print("Hola mundo!\n", .{}); // [!code focus] // [!code highlight] } ``` -es magia negra. Funciona, hace algo, pero no importa. No te -preocupes en intentar entenderlo. +Y a medida que aprendamos conceptos nuevos, descifraremos +qué significan todas esas cosas. -Eventualmente, y a medida que aprendas conceptos nuevos, -entenderas qué significan esas cosas. ## Inglés