Propuesta de rediseño de la UI: Simplificación y Modo Oscuro por defecto

src/components/blogCard.astro

@@ -2,91 +2,57 @@
 import dayjs from "dayjs";
 import "dayjs/locale/es";
 dayjs.locale("es");
-import readingTime from "reading-time";
-import categories from "../data/categories.json";
 import { members_api_url } from "../data/conf.json";
-import { Image } from 'astro:assets';
+import { Image, type ImgAttributes } from 'astro:assets';
 import { convertASCIICharsToText, convertMarkdownToPlainText } from "markdown-to-text-renderer";
 
-const { post, index } = Astro.props;
+interface Props {
+  post: any;
+  imgLoading: ImgAttributes['loading'];
+}
+
+const { post, imgLoading } = Astro.props;
 const response = await fetch(members_api_url + "/members/" + post.data.username);
 const user_data = await response.json();
-const stats = readingTime(post.body);
-const read_time = stats.text.replace("read", "");
 const description = post.data.description
   ? post.data.description
   : convertASCIICharsToText(convertMarkdownToPlainText(post.body.slice(0, 160))) + "...";
 
 const display_date = dayjs(post.data.pubDate).format("D MMM. YYYY");
-let imgLoading = index === 0 || index === 1 ? "eager" : "lazy";
 ---
 
-<div class="bg-white border border-gray-200 rounded-lg mb-5 dark:bg-gray-800 dark:border-gray-700 w-full">
-  <a href={"/publicaciones/" + post.slug}>
-    {
-      post.data.image && (
-        <Image
-          class="rounded-t-lg inline h-[13rem] md:h-[14rem] lg:h-[16rem] xl:h-[20rem] 2xl:h-[28rem] object-cover"
-          src={post.data.image}
-          alt={post.data.title + " logo"}
-          format="webp"
-          quality={85}
-          width={908}
-          height={500}
-          loading={imgLoading}
-          aspectRatio={16 / 9}
-          fit="cover"
-          position="center"
-        />
-      )
-    }
-  </a>
-
-  <div class="p-5 pb-3">
-    <div class="mb-3 flex justify-between">
-      <a href={"/dev/" + user_data.username} class="flex items-center space-x-4">
-        <img
-          class="w-10 h-10 rounded-full"
-          src={user_data.avatar_url_small}
-          alt={user_data.name + " avatar"}
-          loading="lazy"
-          decoding="async"
-        />
-        <div class="font-medium dark:text-white">
-          <div>
-            {user_data.name}
-            <spam class="mx-2 text-gray-700 dark:text-gray-300">•</spam>
-            <spam class="text-gray-500 dark:text-gray-300 font-normal text-sm capitalize"> {display_date}</spam>
-          </div>
-          <div class="text-sm text-gray-500 dark:text-gray-300">{user_data.headline}</div>
-        </div>
-      </a>
-    </div>
+ <a 
+  href={"/publicaciones/" + post.slug} 
+  class="w-full h-full flex flex-col space-y-6 md:px-8 first:pl-0 last:pr-0"
+>
+  {
+    post.data.image && (
+      <Image
+        src={post.data.image}
+        alt={post.data.title + " logo"}
+        class='aspect-[400/225] object-cover rounded border border-[#1b1c1e]'
+        format="webp"
+        quality={85}
+        width={800}
+        height={450}
+        loading={imgLoading}
+      />
+    )
+  }
 
-    <a href={"/publicaciones/" + post.slug}>
-      <h5 class="mb-2 text-lg md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-        {post.data.title}
-      </h5>
-    </a>
-    <a href={"/publicaciones/" + post.slug}>
-      <p class="mb-5 font-normal text-gray-700 dark:text-gray-300 line-clamp-3 md:line-clamp-3">
-        {description}
-      </p>
-    </a>
-    <div class="my-2 flex justify-between">
-      <div>
-        {
-          post.data.categories.map((category) => (
-            <a
-              href={"/categorias/" + categories[category].slug}
-              class="text-gray-600 bg-white my-1 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-normal rounded md:text-base text-sm px-1 py-1.5 mr-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
-            >
-              {"#" + categories[category].text}
-            </a>
-          ))
-        }
-      </div>
-      <div class="text-sm text-gray-500">{read_time + " lectura"}</div>
-    </div>
+  <div class="space-y-2">
+    <h3 class="mb-2 text-lg md:text-2xl line-clamp-2 font-semibold tracking-tight text-gray-900 dark:text-white">
+      {post.data.title}
+    </h3>
+    <p class="mb-5 font-normal text-[#8a8f98] line-clamp-3">
+      {description}
+    </p>
   </div>
-</div>
+
+  <span class="mt-auto text-sm text-[#62666d]">
+    {user_data.name}
+    <span class="inline-block [margin-inline:4px]">·</span>
+    {display_date}
+  </span>
+</a>
+

src/components/footer.astro

@@ -6,10 +6,10 @@ import SearchBtnFooter from "./ui/searchBtnFooter.svelte";
 ---
 
 <footer
-  class="hidden sm:block p-4 mt-8 bg-white border border-x-0 shadow md:px-6 md:py-8 dark:bg-gray-900 dark:border-gray-700"
+  class="hidden sm:block p-4 mt-8 bg-white border border-x-0 shadow md:px-6 md:py-8 dark:bg-[#08090a] dark:border-[#1e1e1e]"
 >
   <nav class="flex items-center justify-center flex-col container mx-auto">
-    <a href="/" class="flex items-center mb-6 dar:text-white">
+    <a href="/" class="flex items-center mb-6 dar:text-white" aria-label="Ir a página de inicio"></a>
       <CucodersLogo classes="h-7 mr-3 sm:h-8 dark:fill-gray-100" />
     </a>
     <ul class="flex flex-wrap items-center mb-6 justify-center text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
@@ -46,13 +46,13 @@ import SearchBtnFooter from "./ui/searchBtnFooter.svelte";
       </li>
     </ul>
   </nav>
-  <hr class="my-5 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-6" />
+  <hr class="my-5 border-gray-200 sm:mx-auto dark:border-[#1e1e1e] lg:my-6" />
   <span class="block text-sm text-gray-500 text-center dark:text-gray-400">© 2023 CuCoders. Hecho con ❤️ en Cuba 🇨🇺</span>
 </footer>
 
 <div class="sm:hidden pt-20"></div>
 <footer
-  class="sm:hidden px-3 py-1 bg-white/80 backdrop-blur-md dark:bg-gray-900/80 dark:border-gray-700 -mb-[1px] bottom-0 border border-b-0 border-x-0 shadow fixed justify-around flex left-0 z-20 w-full"
+  class="sm:hidden px-3 py-1 bg-white/80 backdrop-blur-md dark:bg-gray-900/80 dark:border-[#1e1e1e] -mb-[1px] bottom-0 border border-b-0 border-x-0 shadow fixed justify-around flex left-0 z-20 w-full"
 >
   <a href="/">
     <img

src/components/helpers/darkTheme.js

@@ -1,16 +1,11 @@
 function toggleTheme() {
   if (localStorage.getItem("color-theme") === "light") {
     document.documentElement.classList.add("dark");
-    localStorage.setItem("color-theme", "dark");
+    localStorage.removeItem("color-theme");
   } else {
     document.documentElement.classList.remove("dark");
     localStorage.setItem("color-theme", "light");
   }
 }
 
-function initializeTheme() {
-  const theme = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-  localStorage.setItem("color-theme", theme);
-}
-
-export { toggleTheme, initializeTheme };
+export { toggleTheme };

src/components/navbar/addMenu.astro

@@ -5,7 +5,7 @@
   type="button"
   aria-label="Open main menu"
 >
-  <img src="/assets/img/icons/add-squared2.svg" class="h-7 w-7 dark:invert opacity-60 dark:contrast-200 dark:saturate-0" />
+  <img src="/assets/img/icons/add-squared2.svg" alt="Open main menu" class="h-7 w-7 dark:invert opacity-60 dark:contrast-200 dark:saturate-0" />
 </button>
 
 <div

src/components/navbar/navBar.astro

@@ -7,7 +7,7 @@ import SearchBtn from "../ui/searchBtn.svelte";
 ---
 
 <nav
-  class="bg-white/70 backdrop-blur-md px-2 sm:px-4 py-1.5 dark:bg-gray-900/70 fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600"
+  class="bg-white/70 backdrop-blur-md px-2 sm:px-4 py-1.5 dark:bg-[#0a0a0b] fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-[#1e1e1e]"
 >
   <div class="container flex flex-wrap items-center justify-between mx-auto px-4">
     {
@@ -17,7 +17,7 @@ import SearchBtn from "../ui/searchBtn.svelte";
           type="button"
           class="inline-flex items-center md:hidden p-2 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         >
-          <img src="/assets/img/icons/arrow-back.svg" class="h-7 w-7 dark:invert dark:contrast-200 dark:saturate-0" />
+          <img src="/assets/img/icons/arrow-back.svg" alt="Ir atrás" class="h-7 w-7 dark:invert dark:contrast-200 dark:saturate-0" />
         </button>
       ) : (
         <button
@@ -29,12 +29,12 @@ import SearchBtn from "../ui/searchBtn.svelte";
           class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         >
           <span class="sr-only">Open main menu</span>
-          <img src="/assets/img/icons/menu1.svg" class="h-7 w-7 dark:invert dark:contrast-200 dark:saturate-0" />
+          <img src="/assets/img/icons/menu1.svg" alt="Menú" class="h-7 w-7 dark:invert dark:contrast-200 dark:saturate-0" />
         </button>
       )
     }
 
-    <a href="/" class="flex items-center">
+    <a href="/" class="flex items-center" aria-label="Ir a página de inicio">
       <CucodersLogo />
     </a>
 

src/components/navbar/userProfileMenu.astro

@@ -9,6 +9,7 @@
     id="noUserAvatar"
     src="/assets/img/icons/account-circle-baseline.svg"
     class="w-8 h-8 opacity-70 dark:invert dark:contrast-200 dark:saturate-0"
+    alt="Usuario sin foto"
   />
   <img id="userAvatar" class="w-9 h-9 rounded-full hidden" src="" alt="user photo" />
 </button>

src/components/ui/themeToggle.astro

@@ -8,5 +8,5 @@ const classes =
 ---
 
 <button id={id} class={classes} type="button">
-  <img src="/assets/img/icons/dark-light.svg" class="w-6 h-6 dark:invert dark:contrast-200 dark:saturate-0" />
+  <img src="/assets/img/icons/dark-light.svg" alt="Tema claro" class="w-6 h-6 dark:invert dark:contrast-200 dark:saturate-0" />
 </button>

src/layouts/baseLayout.astro

@@ -19,10 +19,10 @@ const {
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <script is:inline>
-      if (localStorage.getItem("color-theme") === "dark") document.documentElement.classList.add("dark");
+      if (localStorage.getItem("color-theme") === "light") document.documentElement.classList.remove("dark");
     </script>
 
     <script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-PX2S82TBFB"></script>
@@ -35,14 +35,6 @@ const {
       gtag("config", "G-PX2S82TBFB");
     </script>
 
-    <script>
-      import { initializeTheme } from "../components/helpers/darkTheme";
-      if (!("color-theme" in localStorage)) {
-        initializeTheme();
-        if (localStorage.getItem("color-theme") === "dark") document.documentElement.classList.add("dark");
-      }
-    </script>
-
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/assets/img/favicon.png" />
@@ -52,7 +44,7 @@ const {
     {seoSchema && <Schema item={seoSchema} />}
     <PageMetaTags title={title} description={description} image={image} />
   </head>
-  <body class="bg-gray-50 dark:bg-gray-900">
+  <body class="bg-gray-50 dark:bg-[#08090a] dark:text-white">
     <script>
       import topbar from "topbar";
       topbar.config({

src/pages/index.astro

@@ -2,40 +2,46 @@
 import BaseLayout from "../layouts/baseLayout.astro";
 import SideBar from "../components/mainSideBar.astro";
 import BlogCard from "../components/blogCard.astro";
-import RightSideBar from "../components/rightSideBar.astro";
 import RightDrawer from "../components/rightDrawer.astro";
 import Pagination from "../components/pagination.astro";
-import BreadcrumbContainer from "../components/ui/breadcrumbContainer.astro";
 import { getCollection } from "astro:content";
+import categories from "../data/categories.json";
 
 const allPosts = (await getCollection("blog")).sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
 
 const posts = allPosts.slice(0, 6);
 const showPagination = Object.keys(allPosts).length > 6;
+
+const pathname = Astro.url.pathname
 ---
 
 <BaseLayout
   title="CuCoders | La plataforma de los programadores cubanos"
   description="Cucoders es una plataforma para potenciar el desarrollo de software en Cuba y apoyar a los desarrolladores y emprendedores en su carrera profesional. Descubre recursos, aplicaciones, artículos, perfiles de programadores y ofertas laborales. Cucoders es el lugar perfecto para encontrar oportunidades y mantenerse actualizado en el mundo de la programación."
   hasRightSidebar={true}
 >
-  <div class="grid w-full mt-4 md:mt-8 gap-8 grid-cols-1 md:grid-cols-[16rem_1fr] lg:grid-cols-[16rem_1fr_17rem]">
-    <div class="hidden md:block">
-      <SideBar />
+  <div class=" w-full mt-[78px] gap-8 px-6 md:px-[115px] space-y-[64px]">
+    <div class="space-y-4">
+      <h1 class="text-5xl dark:text-white">Últimas Publicaciones</h1>
+      <div class="flex gap-4 overflow-x-auto md:overflow-x-hidden py-2">
+        <a href="/" class:list={[pathname === "/" ? "text-white" : 'text-[#8a8f98]']}>Todas</a>
+         {Object.keys(categories).slice(0, 8).map((category) => {
+          const categoryUrl = "/categorias/" + categories[category].slug;
+          return (
+            <a 
+              href={categoryUrl}
+              class:list={[pathname === categoryUrl  ? "text-white" : 'text-[#8a8f98]', 'hover:text-white transition duration-100 whitespace-nowrap']}
+            >
+              {categories[category].text}
+            </a>
+          );
+          })}
+      </div>
     </div>
-    <div>
-      <BreadcrumbContainer
-        breadcrumbItems={[{ label: "Publicaciones", home: true, url: "/" }, { label: "Últimas Publicaciones" }]}
-        btnLabel="Publicar Artículo"
-        btnUrl="/nueva-publicacion"
-        btnIcon="/assets/img/icons/write.svg"
-      />
-      {posts.map((post,index) => <BlogCard post={post} index={index} />)}
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-16 md:divide-x md:divide-[#1b1c1e]">
+      {posts.map((post,index) => <BlogCard post={post} imgLoading={[0,1,2].includes(index) ? "eager" : "lazy"} />)}
       {showPagination && <Pagination next="/categorias/todo/2" />}
     </div>
-    <div class="hidden lg:block">
-      <RightSideBar />
-    </div>
   </div>
 </BaseLayout>