feat: Add Header component and implement dark mode support across various components

Darío Espinoza · Darío Espinoza · commit 973af6ac5c92 · 2025-04-13T23:20:37.000-04:00
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -1,9 +1,7 @@
-import ButtonPrint from "../islands/ButtonPrint.tsx";
 import DarkMode from "../islands/DarkMode.tsx";
 export default function Header() {
   return (
     <header class="min-w-min px-4 py-2 rounded-lg max-w-min mx-auto flex gap-4 items-center bg-slate-200/50 left-1/2 -translate-x-1/2 fixed bottom-4 md:sticky md:top-4 z-50 backdrop-blur-md dark:bg-slate-800/50 print:hidden">
-      <ButtonPrint />
       <a 
         href="https://github.com/darioesp"
         target="_blank"
diff --git a/components/WrapperPage.tsx b/components/WrapperPage.tsx
@@ -4,7 +4,7 @@ interface ParentComponentProps {
     readonly children: preact.ComponentChildren;
 }
 export default function WrapperPage({attrClass, children}: ParentComponentProps ) {
-    const valueClass = attrClass ? `${attrClass} relative bg-white px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5';
+    const valueClass = attrClass ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5';
     return (
         <div class={valueClass}>
             {children}
diff --git a/routes/[lang]/index.tsx b/routes/[lang]/index.tsx
@@ -1,5 +1,6 @@
 import { PageProps } from "$fresh/server.ts";
 import Footer from "../../components/Footer.tsx";
+import Header from "../../components/Header.tsx";
 import SectionWrapperContent from "../../components/SectionWrapperContent.tsx";
 import WrapperPage from "../../components/WrapperPage.tsx";
 import translations from "../../locales/es.json" with { type: "json" };
@@ -12,7 +13,7 @@ export default function Home({ state }: PageProps<State>) {
   const { lang: _lang, translations } = state;
   return (
     <>
-      {/* <Header /> */}
+      <Header />
       <div class="relative mx-4 md:mx-10 font-roboto-mono">
         <WrapperPage attrClass="">
           <div class="border-b pb-3 flex justify-end items-center gap-x-2 text-sm">
@@ -28,7 +29,7 @@ export default function Home({ state }: PageProps<State>) {
                   <h3 class="font-bold text-base mt-5">
                     {section.title}
                   </h3>
-                  <ul class="ml-6 list-disc col-span-full text-slate-800/90 text-pretty text-sm">
+                  <ul class="ml-6 list-disc col-span-full text-slate-800/90 dark:text-slate-200/80 text-pretty text-sm">
                     {
                       section.items.map((item, index) => (
                         <li key={index}>
diff --git a/routes/_404.tsx b/routes/_404.tsx
@@ -1,20 +1,27 @@
 import { Head } from "$fresh/runtime.ts";
 import { pageProps } from "$fresh/server.ts";
-export default function Error404({message}: pageProps<{message: string}>) {
+export default function Error404({ message }: pageProps<{ message: string }>) {
   return (
     <>
       <Head>
         <title>404 - ¡Creo que andas perdido!</title>
       </Head>
-      <section class="grid place-content-center h-screen w-screen bg-white py-4 px-5 md:py-10 md:px-12">
+      <section class="grid place-content-center h-screen w-screen bg-white dark:bg-slate-800 py-4 px-5 md:py-10 md:px-12">
         <div class="flex flex-col items-center gap-5">
           <h1 class="text-center flex flex-col items-center gap-2">
-            <span class="text-4xl md:text-6xl font-bold">Wow 🧉</span> ¡Creo que andas perdido!
+            <span class="text-4xl md:text-6xl font-bold">Wow 🧉</span>{" "}
+            ¡Creo que andas perdido!
           </h1>
-          <a href="/" class="flex justify-center items-center px-3 py-1.5 bg-black/5 border border-[#ddd] rounded-md backdrop-blur-sm">
+          <a
+            href="/"
+            class="flex justify-center items-center px-3 py-1.5 bg-black/5 dark:bg-black/95 border border-[#ddd] dark:border-black rounded-md backdrop-blur-sm"
+          >
             Regresar a Vibe Coding
           </a>
-          <a href="https://github.com/darioesp/vide-coding" class="flex justify-center items-center px-3 py-1.5 bg-black/5 border border-[#ddd] rounded-md backdrop-blur-sm">
+          <a
+            href="https://github.com/darioesp/vide-coding"
+            class="flex justify-center items-center px-3 py-1.5 bg-black/5 dark:bg-black/95 border border-[#ddd] dark:border-black rounded-md backdrop-blur-sm"
+          >
             ir al repositorio
           </a>
         </div>
diff --git a/routes/_app.tsx b/routes/_app.tsx
@@ -25,7 +25,7 @@ export default async function App(
         </title>
         <link rel="stylesheet" href="/styles.css" />
       </head>
-      <body class="bg-[#f9f9f9] text-[#444444]">
+      <body class="bg-[#f9f9f9] text-[#444444] dark:bg-[#0C0C0C] dark:text-[#f9f9f9]">
         <ctx.Component />
       </body>
     </html>
diff --git a/routes/index.tsx b/routes/index.tsx
@@ -1,5 +1,6 @@
 import { PageProps } from "$fresh/server.ts";
 import Footer from "../components/Footer.tsx";
+import Header from "../components/Header.tsx";
 import SectionWrapperContent from "../components/SectionWrapperContent.tsx";
 import WrapperPage from "../components/WrapperPage.tsx";
 import translations from "../locales/es.json" with { type: "json" };
@@ -12,7 +13,7 @@ export default function Home({ state }: PageProps<State>) {
   const { lang, translations } = state;
   return (
     <>
-      {/* <Header /> */}
+      <Header />
       <div class="relative mx-4 md:mx-10 font-roboto-mono">
         <WrapperPage attrClass="">
           <div class="border-b pb-3 flex justify-end items-center gap-x-2 text-sm">
@@ -27,7 +28,7 @@ export default function Home({ state }: PageProps<State>) {
                   <h3 class="font-bold text-base mt-5">
                     {section.title}
                   </h3>
-                  <ul class="ml-6 list-disc col-span-full text-slate-800/90 text-pretty text-sm">
+                  <ul class="ml-6 list-disc col-span-full text-slate-800/90 dark:text-slate-200/80 text-pretty text-sm">
                     {section.items.map((item, index) => (
                       <li key={index}>
                         <div

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ interface ParentComponentProps {`
`4`	`4`	`readonly children: preact.ComponentChildren;`
`5`	`5`	`}`
`6`	`6`	`export default function WrapperPage({attrClass, children}: ParentComponentProps ) {`
`7`		- const valueClass = attrClass ? `${attrClass} relative bg-white px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5';
	`7`	+ const valueClass = attrClass ? `${attrClass} relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[21cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 print:h-auto print:py-0 print:mt-0 mt-5 [&:has(.decorator-bl, .decorator-br)~div>.decorator-tl]:bg-red-100` : 'relative bg-white dark:bg-slate-800 px-4 md:px-12 rounded-sm container max-w-[22cm] min-h-[29.7cm] mx-auto py-16 aspect-[210mm 297mm] select-none z-10 mt-5';
`8`	`8`	`return (`
`9`	`9`	`<div class={valueClass}>`
`10`	`10`	`{children}`