🎨 feat: blog improvements

src/components/badges/open-to-work.astro

@@ -6,9 +6,9 @@ const { lang = 'en' }: Props = Astro.props
 ---
 
 <span
-  class='bg-emerald-100 text-emerald-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-emerald-800 border border-emerald-400 font-merriweather xl:absolute top-1.5 right-1.5'
+  class='bg-emerald-100 text-emerald-800 text-xs font-bold inline-flex items-center px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-emerald-800 border-2 border-emerald-400 font-merriweather xl:absolute top-1.5 right-1.5'
 >
-  <svg viewBox='0 0 512 512' class="w-2.5 h-2.5 me-1.5" fill="currentColor"
+  <svg viewBox='0 0 512 512' class='w-2.5 h-2.5 me-1.5' fill='currentColor'
     ><title></title><g data-name='1' id='_1'
       ><path
         d='M291.48,449.94A15,15,0,0,1,278,441.5L207.5,296.57,62.57,226.08a15,15,0,0,1,1-27.41L435.48,49.08A15,15,0,0,1,455,68.6L305.4,440.54A15,15,0,0,1,292,449.93Zm-185.38-236,119.18,58a15,15,0,0,1,6.93,6.93l58,119.18L414,90Z'

src/components/badges/read-time.astro

@@ -0,0 +1,15 @@
+<span
+  class='bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400'
+>
+  <svg
+    class='w-2.5 h-2.5 me-1.5'
+    aria-hidden='true'
+    fill='currentColor'
+    viewBox='0 0 20 20'
+  >
+    <path
+      d='M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z'
+    ></path>
+  </svg>
+  <slot />
+</span>

src/components/blog/last-entries.tsx

@@ -21,13 +21,57 @@ const LAST_ENTRIES_STYLES = [
   'text-slate-900',
   'dark:text-slate-300',
   'py-4',
-  'px-2',
+  'px-2'
 ].join(' ')
 
 import { entries } from '@data/blog.json'
 
 import { Fragment } from 'preact'
 
+function ReadTimeBadge({
+  readTime,
+  lang = 'en'
+}: {
+  readTime: string | undefined
+  lang?: string
+}) {
+  if (!readTime) return null
+  return (
+    <span class='bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-800 border border-blue-400'>
+      <svg
+        class='w-2.5 h-2.5 me-1.5'
+        aria-hidden='true'
+        fill='currentColor'
+        viewBox='0 0 20 20'
+      >
+        <path d='M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z' />
+      </svg>
+      {readTime} {lang === 'en' ? 'min read' : 'min de lectura'}
+    </span>
+  )
+}
+
+function Badges({ badges }: { badges?: string[] }) {
+  if (!badges) return null
+  return (
+    <div class='flex flex-wrap gap-2'>
+      {badges.map((badge, index) => (
+        <GenericBadge key={index} text={badge} />
+      ))}
+    </div>
+  )
+}
+
+function GenericBadge({ text }: { text: string }) {
+  return (
+    <span
+      class={`bg-amber-100 text-amber-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 border border-amber-400`}
+    >
+      {text}
+    </span>
+  )
+}
+
 export default function LastEntries({ lang = 'en' }: { lang?: string }) {
   return (
     <article class={LAST_ENTRIES_STYLES}>
@@ -36,17 +80,21 @@ export default function LastEntries({ lang = 'en' }: { lang?: string }) {
       </h1>
       <ul class='grid grid-cols-[1fr_5fr] gap-3 w-full p-2 responsive-text-sm'>
         <li />
-        <li class='dark:text-cyan-300 text-cyan-950 text-xl' />
+        <li class='dark:text-cyan-400 text-cyan-950 text-xl' />
         {entries.map((entry, index) => {
           return (
             <Fragment key={index}>
               <li class='font-merriweather text-sm xl:text-base text-center'>
                 {entry.date}
               </li>
-              <li class='font-merriweather text-sm xl:text-base dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-[1.02] transition-all ease-in-out'>
-                <a href={`/blog/${lang === 'en' ? entry.href : entry.hrefEs}`}>
+              <li class='font-merriweather text-sm xl:text-base dark:bg-emerald-900 bg-emerald-300 py-1 px-2 rounded-sm cursor-pointer hover:scale-[1.02] transition-all ease-in-out flex flex-col gap-2'>
+                <a href={`${lang === 'en' ? entry.href : entry.hrefEs}`}>
                   {lang === 'en' ? entry.title : entry.titleEs}
                 </a>
+                <div>
+                  <ReadTimeBadge readTime={entry.readTimeMins} lang={lang} />
+                </div>
+                <Badges badges={entry.tags} />
               </li>
             </Fragment>
           )

src/components/css-peeps/peep.astro

@@ -18,7 +18,7 @@ const {
 ---
 
 <>
-  <div class='css-peeps' />
+  <div class='css-peeps'></div>
   <style
     define:vars={{
       head,

src/components/icons/copy.astro

@@ -1,5 +1,5 @@
 <svg viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg' {...Astro.props}
   ><path
     d='M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM266 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h74v224c0 26.51 21.49 48 48 48h96v42a6 6 0 0 1-6 6zm128-96H182a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h106v88c0 13.255 10.745 24 24 24h88v202a6 6 0 0 1-6 6zm6-256h-64V48h9.632c1.591 0 3.117.632 4.243 1.757l48.368 48.368a6 6 0 0 1 1.757 4.243V112z'
-   /></svg
+  ></path></svg
 >

src/components/icons/copyright.astro

@@ -1,4 +1,7 @@
-<svg viewBox='0 0 512 512' class="w-4 h-4 fill-slate-50" xmlns='http://www.w3.org/2000/svg'
+<svg
+  viewBox='0 0 512 512'
+  class='w-4 h-4 fill-slate-50'
+  xmlns='http://www.w3.org/2000/svg'
   ><path
     d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 464c-114.7 0-208-93.31-208-208S141.3 48 256 48s208 93.31 208 208S370.7 464 256 464zM255.1 176C255.1 176 255.1 176 255.1 176c21.06 0 40.92 8.312 55.83 23.38c9.375 9.344 24.53 9.5 33.97 .1562c9.406-9.344 9.469-24.53 .1562-33.97c-24-24.22-55.95-37.56-89.95-37.56c0 0 .0313 0 0 0c-33.97 0-65.95 13.34-89.95 37.56c-49.44 49.88-49.44 131 0 180.9c24 24.22 55.98 37.56 89.95 37.56c.0313 0 0 0 0 0c34 0 65.95-13.34 89.95-37.56c9.312-9.438 9.25-24.62-.1562-33.97c-9.438-9.312-24.59-9.219-33.97 .1562c-14.91 15.06-34.77 23.38-55.83 23.38c0 0 .0313 0 0 0c-21.09 0-40.95-8.312-55.89-23.38c-30.94-31.22-30.94-82.03 0-113.3C214.2 184.3 234 176 255.1 176z'
   ></path></svg

src/components/icons/go-back.astro

@@ -6,5 +6,5 @@
   {...Astro.props}
   ><path
     d='M12,9.059V6.5c0-0.256-0.098-0.512-0.293-0.708C11.512,5.597,11.256,5.5,11,5.5s-0.512,0.097-0.707,0.292L4,12l6.293,6.207  C10.488,18.402,10.744,18.5,11,18.5s0.512-0.098,0.707-0.293S12,17.755,12,17.5v-2.489c2.75,0.068,5.755,0.566,8,3.989v-1  C20,13.367,16.5,9.557,12,9.059z'
-   /></svg
+  ></path></svg
 >

src/components/icons/home.astro

@@ -1,5 +1,5 @@
 <svg {...Astro.props} viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'
   ><path
     d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'
-   /></svg
+  ></path></svg
 >

src/components/icons/moon.astro

@@ -1,5 +1,5 @@
 <svg height='512' viewBox='0 0 512 512' width='512' {...Astro.props}
   ><title>Dark Mode</title><path
     d='M264,480A232,232,0,0,1,32,248C32,154,86,69.72,169.61,33.33a16,16,0,0,1,21.06,21.06C181.07,76.43,176,104.66,176,136c0,110.28,89.72,200,200,200,31.34,0,59.57-5.07,81.61-14.67a16,16,0,0,1,21.06,21.06C442.28,426,358,480,264,480Z'
-   />
+  ></path>
 </svg>

src/components/icons/shuffle.astro

@@ -7,5 +7,5 @@
 >
   <path
     d='M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z'
-   />
+  ></path>
 </svg>

src/components/icons/sun.astro

@@ -1,19 +1,19 @@
 <svg viewBox='0 0 256 256' {...Astro.props}
-  ><rect fill='transparent' height='256' width='256' /><circle
+  ><rect fill='transparent' height='256' width='256'></rect><circle
     cx='128'
     cy='128'
-    r='68' /><path
+    r='68'></circle><path
     d='M128,44a8,8,0,0,0,8-8V16a8,8,0,0,0-16,0V36A8,8,0,0,0,128,44Z'
-   /><path
+  ></path><path
     d='M57.3,68.6a8.1,8.1,0,0,0,11.3,0,8,8,0,0,0,0-11.3L54.5,43.1A8.1,8.1,0,1,0,43.1,54.5Z'
-   /><path d='M44,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H36A8,8,0,0,0,44,128Z'
-   /><path
+  ></path><path d='M44,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H36A8,8,0,0,0,44,128Z'
+  ></path><path
     d='M57.3,187.4,43.1,201.5a8.1,8.1,0,0,0,0,11.4,8.5,8.5,0,0,0,5.7,2.3,8.3,8.3,0,0,0,5.7-2.3l14.1-14.2a8,8,0,0,0-11.3-11.3Z'
-   /><path
+  ></path><path
     d='M128,212a8,8,0,0,0-8,8v20a8,8,0,0,0,16,0V220A8,8,0,0,0,128,212Z'
-   /><path
+  ></path><path
     d='M198.7,187.4a8,8,0,0,0-11.3,11.3l14.1,14.2a8.3,8.3,0,0,0,5.7,2.3,8.5,8.5,0,0,0,5.7-2.3,8.1,8.1,0,0,0,0-11.4Z'
-   /><path d='M240,120H220a8,8,0,0,0,0,16h20a8,8,0,0,0,0-16Z' /><path
+  ></path><path d='M240,120H220a8,8,0,0,0,0,16h20a8,8,0,0,0,0-16Z'></path><path
     d='M193.1,70.9a7.8,7.8,0,0,0,5.6-2.3l14.2-14.1a8.1,8.1,0,0,0-11.4-11.4L187.4,57.3a8,8,0,0,0,0,11.3A7.8,7.8,0,0,0,193.1,70.9Z'
-   /></svg
+  ></path></svg
 >

src/components/icons/translator.astro

@@ -2,5 +2,5 @@
   <path
     fill-rule='evenodd'
     d='M9 2.25a.75.75 0 0 1 .75.75v1.506a49.384 49.384 0 0 1 5.343.371.75.75 0 1 1-.186 1.489c-.66-.083-1.323-.151-1.99-.206a18.67 18.67 0 0 1-2.97 6.323c.318.384.65.753 1 1.107a.75.75 0 0 1-1.07 1.052A18.902 18.902 0 0 1 9 13.687a18.823 18.823 0 0 1-5.656 4.482.75.75 0 0 1-.688-1.333 17.323 17.323 0 0 0 5.396-4.353A18.72 18.72 0 0 1 5.89 8.598a.75.75 0 0 1 1.388-.568A17.21 17.21 0 0 0 9 11.224a17.168 17.168 0 0 0 2.391-5.165 48.04 48.04 0 0 0-8.298.307.75.75 0 0 1-.186-1.489 49.159 49.159 0 0 1 5.343-.371V3A.75.75 0 0 1 9 2.25ZM15.75 9a.75.75 0 0 1 .68.433l5.25 11.25a.75.75 0 1 1-1.36.634l-1.198-2.567h-6.744l-1.198 2.567a.75.75 0 0 1-1.36-.634l5.25-11.25A.75.75 0 0 1 15.75 9Zm-2.672 8.25h5.344l-2.672-5.726-2.672 5.726Z'
-    clip-rule='evenodd' />
+    clip-rule='evenodd'></path>
 </svg>

src/components/main/about-me-card.astro

@@ -31,7 +31,7 @@ const ABOUT_ME_STYLES = [
 ---
 
 <article class={ABOUT_ME_STYLES} title='Get to know me'>
-  <header class="flex flex-col xl:flex-row gap-2 items-center">
+  <header class='flex flex-col xl:flex-row gap-2 items-center'>
     <h1 class='dark:text-emerald-300 text-emerald-950 text-2xl xl:text-3xl'>
       {lang === 'en' ? 'Get to know me' : 'Conóceme'}
     </h1>

src/components/main/background.astro

@@ -13,4 +13,4 @@
     }
   </style>
 </>
-<main class='background blur dark:blur-none' />
+<main class='background blur dark:blur-none'></main>

src/components/main/bento.astro

@@ -6,8 +6,8 @@ const BENTO_STYLES = [
   'xl:grid',
   'items-center',
   'justify-center',
-  // 'min-w-[95dvw]',
-  // 'min-h-[95dvh]',
+  'min-w-[95dvw]',
+  'min-h-[95dvh]',
   'w-[95dvw]',
   'xl:h-[95dvh]',
   'content-center',

src/components/main/blur-background.astro

@@ -9,5 +9,5 @@
       background-image: url('/pizarra.webp');
     }
   </style>
-  <div id='blur_background' />
+  <div id='blur_background'></div>
 </>

src/components/main/spinner.astro

@@ -8,10 +8,10 @@
   >
     <path
       d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z'
-      fill='currentColor' />
+      fill='currentColor'></path>
     <path
       d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z'
-      fill='currentFill' />
+      fill='currentFill'></path>
   </svg>
   <span class='sr-only'>Loading...</span>
 </div>

src/data/blog.json

@@ -4,8 +4,15 @@
       "title": "Building this awesome website with Astro and Tailwind CSS",
       "date": "2024-Jan-01",
       "titleEs": "El proceso de crear este sitio web con Astro y Tailwind CSS",
-      "href": "building-this-website",
-      "hrefEs": "construyendo-este-sitio-web"
+      "href": "blog/building-this-website",
+      "hrefEs": "blog/acerca-de-esta-web",
+      "readTimeMins": "5",
+      "tags": [
+        "astro",
+        "tailwindcss",
+        "preact",
+        "portfolio"
+      ]
     },
     {
       "title": "5+ years using Linux: My experience and setup",

src/data/resources.json

@@ -65,6 +65,10 @@
     {
       "title": "Best Pens 2023",
       "website": "https://codepen.io/2023/popular"
+    },
+    {
+      "title": "Color Palettes",
+      "website": "https://colorhunt.co/"
     }
   ]
 }