add lucide icons, stats page, new post, 5 new frases

AugustoMelara-Dev · AugustoMelara-Dev · commit 36d4fcbe52d8 · 2026-02-22T05:26:54.000-06:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "framer-motion": "^11.11.0",
     "fuse.js": "^7.1.0",
     "html2canvas": "^1.4.1",
+    "lucide-react": "^0.575.0",
     "markdown-it": "^14.1.1",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 import { SITE } from "../config";
+import Icon from "./icons/Icon.tsx";
 ---
 
 <footer class="border-t border-[#1a1a1a] bg-[#0a0a0a]">
@@ -20,57 +21,23 @@ import { SITE } from "../config";
             class="text-[#525252] hover:text-lime-400 transition-colors"
             aria-label="Twitter"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
-              ></path>
-            </svg>
+            <Icon name="Twitter" size={18} client:load />
           </a>
-          <!-- Instagram -->
+          <!-- Email/Newsletter -->
           <a
             href="#"
             class="text-[#525252] hover:text-lime-400 transition-colors"
-            aria-label="Instagram"
+            aria-label="Email"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"
-              ></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
-              ></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
-            </svg>
+            <Icon name="Mail" size={18} client:load />
           </a>
           <!-- GitHub -->
           <a
             href="#"
             class="text-[#525252] hover:text-lime-400 transition-colors"
             aria-label="GitHub"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-              ></path>
-            </svg>
+            <Icon name="Github" size={18} client:load />
           </a>
         </div>
       </div>
@@ -134,22 +101,16 @@ import { SITE } from "../config";
             href="/rss.xml"
             class="text-sm text-[#737373] hover:text-lime-400 transition-colors flex items-center gap-2"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="14"
-              height="14"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              ><path d="M4 11a9 9 0 0 1 9 9"></path><path
-                d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"
-              ></circle></svg
-            >
+            <Icon name="Rss" size={18} client:load />
             RSS Feed
           </a>
+          <a
+            href="/stats"
+            class="text-sm text-[#737373] hover:text-lime-400 transition-colors flex items-center gap-2"
+          >
+            <Icon name="BarChart2" size={12} client:load />
+            Stats del blog
+          </a>
           <p class="text-xs text-[#2a2a2a]">
             Hecho con Astro y demasiado café ☕
           </p>
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
@@ -1,7 +1,7 @@
----
 import TagBadge from "./TagBadge.astro";
 import { format } from "date-fns";
 import { es } from "date-fns/locale";
+import Icon from "./icons/Icon.tsx";
 
 interface Props {
   title: string;
@@ -105,14 +105,22 @@ const orderNum = String(index + 1).padStart(2, "0");
       </p>
 
       <div class="flex flex-wrap items-center gap-3 mt-4 text-xs text-[#525252]">
-        <time datetime={pubDate.toISOString()}>{formattedDate}</time>
+        <time datetime={pubDate.toISOString()} class="flex items-center gap-1">
+          <Icon name="Calendar" size={12} color="#525252" client:load />{" "}
+          {formattedDate}
+        </time>
         <span class="text-[#1a1a1a]">·</span>
-        <span>{readingTime}</span>
+        <span class="flex items-center gap-1">
+          <Icon name="Clock" size={12} color="#525252" client:load />{" "}
+          {readingTime}
+        </span>
         {tags.length > 0 && (
           <>
             <span class="text-[#1a1a1a]">·</span>
             {tags.map((tag) => (
-              <span class="text-[#525252]">#{tag}</span>
+              <span class="text-[#525252] flex items-center gap-1">
+                <Icon name="Tag" size={12} color="#525252" client:load /> {tag}
+              </span>
             ))}
           </>
         )}
diff --git a/src/components/ReadingMode.tsx b/src/components/ReadingMode.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
+import { BookOpen, Minimize2 } from 'lucide-react';
+
 export default function ReadingMode() {
   const [isActive, setIsActive] = useState(false);
 
@@ -57,29 +59,27 @@ export default function ReadingMode() {
         >
           <AnimatePresence mode="wait">
             {isActive ? (
-              <motion.svg
+              <motion.div
                 key="close"
                 initial={{ opacity: 0, rotate: -90 }}
                 animate={{ opacity: 1, rotate: 0 }}
                 exit={{ opacity: 0, rotate: 90 }}
                 transition={{ duration: 0.2 }}
-                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+                className="flex items-center justify-center"
               >
-                <line x1="18" y1="6" x2="6" y2="18"></line>
-                <line x1="6" y1="6" x2="18" y2="18"></line>
-              </motion.svg>
+                <Minimize2 size={18} />
+              </motion.div>
             ) : (
-              <motion.svg
+              <motion.div
                 key="book"
                 initial={{ opacity: 0, scale: 0.5 }}
                 animate={{ opacity: 1, scale: 1 }}
                 exit={{ opacity: 0, scale: 0.5 }}
                 transition={{ duration: 0.2 }}
-                xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+                className="flex items-center justify-center"
               >
-                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
-                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path>
-              </motion.svg>
+                <BookOpen size={18} />
+              </motion.div>
             )}
           </AnimatePresence>
         </button>
diff --git a/src/components/icons/Icon.tsx b/src/components/icons/Icon.tsx
@@ -0,0 +1,12 @@
+import { LucideProps } from 'lucide-react'
+import * as Icons from 'lucide-react'
+
+interface IconProps extends LucideProps {
+  name: keyof typeof Icons
+}
+
+export default function Icon({ name, ...props }: IconProps) {
+  const LucideIcon = Icons[name] as React.FC<LucideProps>
+  if (!LucideIcon) return null
+  return <LucideIcon {...props} />
+}
diff --git a/src/content/frases/frase-26.md b/src/content/frases/frase-26.md
@@ -0,0 +1,5 @@
+---
+texto: "Explicar demasiado es una forma de pedir permiso. Y pedir permiso es entregar poder."
+categoria: "poder"
+fecha: 2026-02-22
+---
diff --git a/src/content/frases/frase-27.md b/src/content/frases/frase-27.md
@@ -0,0 +1,5 @@
+---
+texto: "No le debes una explicación a quien no tiene autoridad real sobre tu vida."
+categoria: "poder"
+fecha: 2026-02-22
+---
diff --git a/src/content/frases/frase-28.md b/src/content/frases/frase-28.md
@@ -0,0 +1,5 @@
+---
+texto: "Informar y justificarse no es lo mismo. Uno es comunicación. El otro es inseguridad."
+categoria: "reflexiones"
+fecha: 2026-02-22
+---
diff --git a/src/content/frases/frase-29.md b/src/content/frases/frase-29.md
@@ -0,0 +1,5 @@
+---
+texto: "David escribió sus errores en los Salmos. La mayoría de nosotros los borra del historial."
+categoria: "biblia"
+fecha: 2026-02-22
+---
diff --git a/src/content/frases/frase-30.md b/src/content/frases/frase-30.md
@@ -0,0 +1,5 @@
+---
+texto: "La persona más libre en una sala es la que puede irse sin perder el sueño."
+categoria: "poder"
+fecha: 2026-02-22
+---
diff --git a/src/content/posts/a-quien-le-debes-una-explicacion.mdx b/src/content/posts/a-quien-le-debes-una-explicacion.mdx
@@ -0,0 +1,53 @@
+---
+title: "A quién le debes una explicación — y a quién no"
+description: "Vivimos explicando decisiones que no requieren explicación a personas que no merecen el acceso."
+pubDate: 2026-02-22
+tags: ["poder", "reflexiones", "personas"]
+featured: false
+quote: "Explicar demasiado es una forma de pedir permiso. Y pedir permiso es entregar poder."
+serie: "El poder según VitoLogic"
+serieOrden: 4
+---
+
+## La costumbre de justificarse
+
+Desde pequeños nos enseñan que todas nuestras acciones deben venir acompañadas de una línea argumental coherente. Si decimos "no" a una invitación, sentimos que debemos proveer una excusa válida de al menos dos párrafos. Si tomamos una decisión de carrera poco convencional, pasamos días enteros redactando mentalmente un alegato como si estuviéramos frente a un tribunal supremo.
+
+Vivimos justificando decisiones personales ante personas que no tienen autoridad real sobre nuestra vida. Y en ese pequeño acto, casi automático, la mayoría pierde su autonomía sin darse cuenta.
+
+## La explicación como moneda
+
+Cada vez que explicas algo que no requería explicación, estás realizando una transacción. Estás pagando con tu propia autoridad. Explicar demasiado es una forma de pedir permiso. Y pedir permiso es entregar poder.
+
+Al justificar tu vida emocional, financiera o profesional frente a alguien que no debería estar sentado en la mesa de decisiones, le estás comunicando, de manera sutil pero clara: _"tu opinión sobre esto tiene el peso suficiente como para que yo gaste mi tiempo y energía en validarla"_.
+
+Incluso si lo que estás explicando es algo excelente. Incluso si lo haces por amabilidad. Sigues sometiendo tu agencia a la revisión del otro. El momento en el que dejas de responder con un simple "es lo que decidí" para pasar a un "es que si no lo hago pasaría X o Y" has abandonado tu asiento en la mesa.
+
+## A quién sí le debes una explicación
+
+Esto no es un manifiesto para justificar la frialdad o la comunicación áspera y unilateral.
+
+La vida requiere rendición de cuentas, y aislarse por completo no es símbolo de independencia, suele ser símbolo de orgullo frágil. Sí hay personas ante quienes rendir cuentas es necesario, táctico o simplemente correcto:
+
+- Personas que se verán material y directamente afectadas por tu decisión (familia íntima o socios).
+- Mentores reales y acreditados, a quienes tú mismo les has cedido la autoridad emocional y estratégica.
+- Dios, si actúas bajo un marco de fe y convicción personal.
+
+El error principal no es dar explicaciones. El error grave es darle la misma calidad e intensidad de explicación al vecino criticón, al compañero de oficina entrometido y al "amigo" cizañoso, que la que le das a las tres categorías que acabo de nombrar. Todos los demás no están evaluando tus decisiones para ayudarte; las están evaluando porque opinar es el deporte más barato del mundo.
+
+## Cómo dejar de hacerlo
+
+Ponerle un tope a esta práctica tiene dos frentes de ataque. Uno táctico y uno interno.
+
+Técnicamente, se trata de empezar a diferenciar entre informar y justificarse.
+
+- Informar es: "Cambié la estrategia porque vi los resultados."
+- Justificarse es: "Cambié la estrategia porque vi los resultados y si no lo hacía íbamos a quedarnos estancados y además el proveedor me dijo que...", agregándole razones a algo que ya es un hecho.
+
+Una regla general que ha funcionado bien: solo añade el "por qué" de las cosas cuando este agregue valor al que te escucha. Cuando le sirva para su propio crecimiento. Pero si solo le estás sumando "por qués" a tu discurso para sentirte tú aceptado y no sonar "mal" frente a los demás, corta esa línea inmediatamente.
+
+Cierra tu boca. La decisión está tomada.
+
+La próxima vez que un conocido requiera el reporte completo de las decisiones de tu vida de forma inquisitiva, date el lujo supremo de contestar, con amabilidad absoluta: "Simplemente me pareció lo correcto."
+
+Observa la incomodidad llenar el espacio como si fuera un gas invisible. Y sobre todo, observa qué bien se siente recuperar el poder.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,6 +1,7 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
 import AnimatedPost from "../components/AnimatedPost.tsx";
+import Icon from "../components/icons/Icon.tsx";
 import { getCollection } from "astro:content";
 
 const allPosts = (await getCollection("posts")).filter(
@@ -70,21 +71,27 @@ const allFrases = await getCollection("frases");
         </h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div class="bg-[#111111] border border-[#1f1f1f] rounded-lg p-6">
-            <div class="text-4xl mb-4">🧠</div>
+            <div class="mb-4">
+              <Icon name="Brain" size={32} color="#a3e635" client:load />
+            </div>
             <h3 class="text-xl font-bold text-[#f5f5f5] mb-2">Reflexiones</h3>
             <p class="text-[#a3a3a3]">
               Comportamiento humano. Lo que hacemos vs lo que decimos.
             </p>
           </div>
           <div class="bg-[#111111] border border-[#1f1f1f] rounded-lg p-6">
-            <div class="text-4xl mb-4">📖</div>
+            <div class="mb-4">
+              <Icon name="BookOpen" size={32} color="#a3e635" client:load />
+            </div>
             <h3 class="text-xl font-bold text-[#f5f5f5] mb-2">Biblia</h3>
             <p class="text-[#a3a3a3]">
               Personajes reales con decisiones eternas. Sin sermones.
             </p>
           </div>
           <div class="bg-[#111111] border border-[#1f1f1f] rounded-lg p-6">
-            <div class="text-4xl mb-4">♟️</div>
+            <div class="mb-4">
+              <Icon name="Crown" size={32} color="#a3e635" client:load />
+            </div>
             <h3 class="text-xl font-bold text-[#f5f5f5] mb-2">Poder</h3>
             <p class="text-[#a3a3a3]">
               Dinámicas sociales. Quién tiene el poder y cómo lo usa.
diff --git a/src/pages/stats.astro b/src/pages/stats.astro
