Use MDX instead of markdown

13 files changed, 98 insertions, 36 deletions

diff --git a/.prettierrc.cjs b/.prettierrc.cjs
index c3a95df..1b180e2 100644
--- a/.prettierrc.cjs
+++ b/.prettierrc.cjs
@@ -8,5 +8,5 @@ module.exports = {
         parser: "astro",
       },
     },
-  ]
+  ],
 };
diff --git a/package-lock.json b/package-lock.json
index b990d91..f9f32dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@astrojs/sitemap": "^3.3.0",
         "@fontsource-variable/sen": "5.2.5",
         "@fontsource/beiruti": "^5.2.5",
+        "@iconify-json/ph": "^1.2.2",
         "astro": "^5.6.1",
         "astro-icon": "^1.1.5",
         "bootstrap": "^5.3.5",
@@ -775,6 +776,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@iconify-json/ph": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/ph/-/ph-1.2.2.tgz",
+      "integrity": "sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify/tools": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@iconify/tools/-/tools-4.1.2.tgz",
diff --git a/package.json b/package.json
index 15d7613..4855f9c 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@astrojs/sitemap": "^3.3.0",
     "@fontsource-variable/sen": "5.2.5",
     "@fontsource/beiruti": "^5.2.5",
+    "@iconify-json/ph": "^1.2.2",
     "astro": "^5.6.1",
     "astro-icon": "^1.1.5",
     "bootstrap": "^5.3.5",
diff --git a/src/components/Alert.astro b/src/components/Alert.astro
new file mode 100644
index 0000000..0cb5fa2
--- /dev/null
+++ b/src/components/Alert.astro
@@ -0,0 +1,57 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  type: "note" | "warning";
+}
+
+const { type } = Astro.props;
+
+const icon = {
+  note: "ph:info",
+  warning: "ph:warning",
+}[type];
+---
+
+<div role="alert" class={type}>
+  <Icon name={icon} />
+  <slot />
+</div>
+
+<style lang="scss" is:global>
+  @use "../../styles/shared.scss" as *;
+
+  div[role="alert"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    padding: 1rem;
+    margin-block: 1rem;
+    border-radius: 0.5rem;
+
+    &.note {
+      background-color: $noteBackground;
+      color: $noteText;
+      box-shadow: 0 0 0 1px $noteText;
+    }
+
+    &.warning {
+      background-color: $warningBackground;
+      color: $warningText;
+      box-shadow: 0 0 0 1px $warningText;
+    }
+  }
+
+  div[role="alert"] svg {
+    width: 1.5em;
+    height: 1.5em;
+    margin-inline-end: 0.5rem;
+    color: inherit;
+    vertical-align: middle;
+  }
+
+  div[role="alert"] p {
+    margin-block: 0;
+  }
+</style>
diff --git a/src/content.config.ts b/src/content.config.ts
index 999e4af..3d69039 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -5,7 +5,7 @@ const blog = defineCollection({
   loader: glob({ pattern: "**/*.{md,mdx}", base: "src/data/blog" }),
   schema: z.object({
     title: z.string(),
-    metaDescription: z.string(),
+    description: z.string(),
     publishedAt: z.coerce.date(),
   }),
 });
diff --git a/src/data/blog/americans-so-much-freedom.md b/src/data/blog/americans-so-much-freedom.mdx
index 9dc711e..bf7c476 100644
--- a/src/data/blog/americans-so-much-freedom.md
+++ b/src/data/blog/americans-so-much-freedom.mdx
@@ -1,12 +1,18 @@
 ---
 title: "Americans: so much for your \"freedom\""
-metaDescription: "Regarding the \"freedom\" of Americans, the ban of TikTok, and whether Europe should follow suit"
+description: "Regarding the \"freedom\" of Americans, the ban of TikTok, and whether Europe should follow suit"
 publishedAt: 2025-01-17
 ---
 
-<div role="alert" class="note">
+import Alert from '@/components/Alert.astro';
+
+export const components = {
+    Alert
+}
+
+<Alert type="note">
     This article is written in english because it's mainly directed to an international audience.
-</div>
+</Alert>
 
 I've been thinking about the concept of "freedom" lately. It's a word that's thrown around a lot, especially in the United States. Americans are proud of their "freedom" and how they can do whatever they want. But is that really true? They do like to call us out about our "lack of freedom" in Europe and the insane amount of bureaucracy we have to deal with (and they are somewhat right), but they also have their own problems.
 
@@ -28,4 +34,4 @@ Now, the EU should stop giving him slaps on the wrist (because of his platform a
 
 Dear European Union politicians, and fellow european citizens. We must act now. We must ban these harmful platforms from our land, and protect ourselves from this espionage, manipulation and hate speech. Or else, we might end up having another dark age, like the one with the austrian painter, but this time with foreign billionaires in charge.
 
-We must act now, before it's too late. We must protect our freedom, our democracy, our values. We must protect our future, unless we want to live in countries with no freedom, no democracy, no values and no future apart of the one dictated by the billionaires.
\ No newline at end of file
+We must act now, before it's too late. We must protect our freedom, our democracy, our values. We must protect our future, unless we want to live in countries with no freedom, no democracy, no values and no future apart of the one dictated by the billionaires.
diff --git a/src/data/blog/configurar-php-iis.md b/src/data/blog/configurar-php-iis.mdx
index 9ce289a..cce6051 100644
--- a/src/data/blog/configurar-php-iis.md
+++ b/src/data/blog/configurar-php-iis.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Alojar aplicación PHP en servidor IIS"
-metaDescription: "Un breve tutorial de cómo alojar una aplicación PHP en un servidor IIS para desarrollo"
+description: "Un breve tutorial de cómo alojar una aplicación PHP en un servidor IIS para desarrollo"
 publishedAt: 2024-08-21
 ---
 
@@ -36,7 +36,7 @@ En la barra izquierda, en Sitios hacemos clic derecho y seleccionamos Agregar si
 - Enlace:
     - Tipo: `https`
     - Dirección IP: `Todas las direcciones no asignadas`
-    - Puerto: `443` 
+    - Puerto: `443`
     - Nombre del host: `app.internal`
     - Requerir indicación del nombre del servidor: `Sí`
     - Deshabilitar [...] `No`
@@ -108,4 +108,4 @@ Hacer clic en Aceptar y la regla se añadirá. Ahora, la aplicación PHP deberí
 
 ## Conclusión
 
-En este tutorial, aprendiste a alojar una aplicación PHP en un servidor IIS. Aprendiste a crear un certificado TLS autofirmado, a configurar PHP y a configurar la reescritura de URL para que la aplicación funcione correctamente. Ahora puedes alojar aplicaciones PHP en un servidor IIS y acceder a ellas de forma segura.
\ No newline at end of file
+En este tutorial, aprendiste a alojar una aplicación PHP en un servidor IIS. Aprendiste a crear un certificado TLS autofirmado, a configurar PHP y a configurar la reescritura de URL para que la aplicación funcione correctamente. Ahora puedes alojar aplicaciones PHP en un servidor IIS y acceder a ellas de forma segura.
diff --git a/src/data/blog/gobierno-no-aprueba-leyes.md b/src/data/blog/gobierno-no-aprueba-leyes.mdx
index 0cf3bfa..6a29387 100644
--- a/src/data/blog/gobierno-no-aprueba-leyes.md
+++ b/src/data/blog/gobierno-no-aprueba-leyes.mdx
@@ -1,6 +1,6 @@
 ---
 title: "El gobierno no 'aprueba una ley' sobre el derecho a rectificación"
-metaDescription: "Hablemos de la frase 'el gobierno aprueba una ley' y por qué no es correcta, poniendo como ejemplo la ley de derecho a rectificación en prensa"
+description: "Hablemos de la frase 'el gobierno aprueba una ley' y por qué no es correcta, poniendo como ejemplo la ley de derecho a rectificación en prensa"
 publishedAt: 2024-12-17
 ---
 
@@ -40,4 +40,4 @@ Ahora bien, si Pepito realmente es un ladrón, aún así, puede solicitar la rec
 
 O dicho de otro modo, el Gobierno no está decidiendo qué es verdad y qué no, y no se ha inventado este derecho; simplemente lo está adaptando a la era digital, donde los _influencers_ y las redes sociales tienen un papel importante en la difusión de información, y no solo los medios tradicionales con una redacción y un director.
 
-Y visto el panorama, de que los medios abusan del sensacionalismo, me parece de lo más normal del mundo que se quieran implementar medidas para evitar que se difundan bulos y mentiras. ¡Dejen de mentir, panda de mentirosos!
\ No newline at end of file
+Y visto el panorama, de que los medios abusan del sensacionalismo, me parece de lo más normal del mundo que se quieran implementar medidas para evitar que se difundan bulos y mentiras. ¡Dejen de mentir, panda de mentirosos!
diff --git a/src/data/blog/mapa-facil-protomaps.md b/src/data/blog/mapa-facil-protomaps.mdx
index acdc13b..371faf8 100644
--- a/src/data/blog/mapa-facil-protomaps.md
+++ b/src/data/blog/mapa-facil-protomaps.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Crear un mapa de manera fácil con Protomaps"
-metaDescription: "Una guía rápida para crear un mapa de manera fácil con Protomaps, sin servidor ni historias complicadas"
+description: "Una guía rápida para crear un mapa de manera fácil con Protomaps, sin servidor ni historias complicadas"
 publishedAt: 2025-01-03
 ---
 
@@ -56,7 +56,7 @@ Si estás usando tecnologías JavaScript (ya sea Vite con algún framework, o As
    }
   </style>
  </head>
- 
+
  <body>
   <div id="map"></div>
 
diff --git a/src/data/blog/shitshow-wordpress.md b/src/data/blog/shitshow-wordpress.mdx
index e7afb10..e72ab53 100644
--- a/src/data/blog/shitshow-wordpress.md
+++ b/src/data/blog/shitshow-wordpress.mdx
@@ -1,6 +1,6 @@
 ---
 title: "El espectáculo que está montando WordPress (o mejor dicho, Matt Mullenweg)"
-metaDescription: "Hablemos de la polémica que ha surgido en torno a WordPress y su fundador, Matt Mullenweg, contra WPEngine y todo lo que ha desencadenado."
+description: "Hablemos de la polémica que ha surgido en torno a WordPress y su fundador, Matt Mullenweg, contra WPEngine y todo lo que ha desencadenado."
 publishedAt: 2024-10-13
 ---
 
@@ -17,7 +17,7 @@ Con esto en mente, vamos a la historia.
 
 ## El origen de la polémica
 
-WPEngine lleva existiendo desde 2010, y ha crecido hasta ser uno de los mayores proveedores de hosting de WordPress. Sin embargo, en 2024, Mullenweg decidió comenzar una batalla contra WPEngine, porque según él, WPEngine estaba aprovechando el software libre WordPress para su beneficio comercial, sin dar nada a cambio a la comunidad de WordPress. 
+WPEngine lleva existiendo desde 2010, y ha crecido hasta ser uno de los mayores proveedores de hosting de WordPress. Sin embargo, en 2024, Mullenweg decidió comenzar una batalla contra WPEngine, porque según él, WPEngine estaba aprovechando el software libre WordPress para su beneficio comercial, sin dar nada a cambio a la comunidad de WordPress.
 
 Además, se supo que Mullenweg exigía una "compensación" a WPEngine por valor de varios millones de dólares (sobre el 8% de ingresos de WPE) para parar esta campaña de desprestigio. WPEngine, por supuesto, se negó a pagar esta cantidad, y Mullenweg decidió seguir adelante con su campaña de desprestigio, hablando mal de WPEngine en la edición de este año de WordCamp US.
 
@@ -66,4 +66,4 @@ El tarado de Mullenweg decidió empezar una guerra "nuclear" contra WPEngine por
 
 Y desde luego, demuestra que es un peligro que exista tal absolutismo en un proyecto, donde tanto el brazo comercial como el de la comunidad están en manos de una sola persona, que puede hacer lo que le dé la gana, sin importarle las consecuencias.
 
-Si no fuera porque a mí WordPress generalmente ni me va ni me viene, lo uso únicamente cuando me lo piden, haría un fork de WordPress realmente libre, implementaría el sistema de plugins abierto o descentralizado, y garantizaría que no se repitieran estos abusos en el futuro. Pero como no es mi problema, solo voy a quedarme al margen, agarrar palomitas 🍿 y disfrutar del show.
\ No newline at end of file
+Si no fuera porque a mí WordPress generalmente ni me va ni me viene, lo uso únicamente cuando me lo piden, haría un fork de WordPress realmente libre, implementaría el sistema de plugins abierto o descentralizado, y garantizaría que no se repitieran estos abusos en el futuro. Pero como no es mi problema, solo voy a quedarme al margen, agarrar palomitas 🍿 y disfrutar del show.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ff3a6cc..5ef87ac 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -110,24 +110,6 @@ const urlWithoutLocale = getUrlWithoutLocale(Astro.url.pathname);
     font-family: $monoFontStack;
   }
 
-  div[role="alert"] {
-    padding: 1rem;
-    margin-block: 1rem;
-    border-radius: 0.5rem;
-
-    &.note {
-      background-color: $noteBackground;
-      color: $noteText;
-      box-shadow: 0 0 0 1px $noteText;
-    }
-
-    &.warning {
-      background-color: $warningBackground;
-      color: $warningText;
-      box-shadow: 0 0 0 1px $warningText;
-    }
-  }
-
   main {
     box-sizing: border-box;
     margin-bottom: auto;
diff --git a/styles/shared.scss b/styles/shared.scss
index 9bdf7d8..46afa45 100644
--- a/styles/shared.scss
+++ b/styles/shared.scss
@@ -12,7 +12,7 @@ $background: hsl(210, 40%, 96%);
 $light: hsl(214, 64%, 98%);
 $lightAlt: hsl(0, 0%, 100%);
 
-$noteBackground: hsl(210, 40%, 96%);
+$noteBackground: hsl(210, 40%, 86%);
 $noteText: hsl(210, 40%, 40%);
 
 $warningBackground: hsl(40, 100%, 90%);
diff --git a/tsconfig.json b/tsconfig.json
index bcbf8b5..a997d74 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,9 @@
 {
-  "extends": "astro/tsconfigs/strict"
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }