site-profile/src/pages/blog/index.astro

---
import BaseLayout from '../../layouts/BaseLayout.astro';

import directus from '../../../lib/directus';
import { readItems } from '@directus/sdk';

const posts = await directus.request(
  readItems('posts', {
    fields: ['*'],
    sort: ['-published_date'],
  })
);

const sortedPosts = posts.sort((a, b) => b.published_date.valueOf() - a.published_date.valueOf());

// Group posts by year for timeline effect
const postsByYear = sortedPosts.reduce((acc, post) => {
  const year = new Date(post.published_date).getFullYear();
  if (!acc[year]) acc[year] = [];
  acc[year].push(post);
  return acc;
}, {});

const years = Object.keys(postsByYear).sort((a, b) => b - a);
---

<BaseLayout title="Blog">
  <div class="mx-auto w-full max-w-6xl px-4 py-10 sm:px-6 sm:py-16" transition:animate="slide">
    <div class="relative mb-12 sm:mb-20">
      <div
        class="animate-blob absolute -top-10 -left-10 h-48 w-48 rounded-full bg-zinc-100 opacity-30 blur-3xl sm:-top-20 sm:-left-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
      >
      </div>
      <div
        class="animate-blob animation-delay-2000 absolute -right-10 -bottom-10 h-48 w-48 rounded-full bg-zinc-200 opacity-30 blur-3xl sm:-right-20 sm:-bottom-20 sm:h-72 sm:w-72 dark:bg-zinc-800/30"
      >
      </div>

      <div class="relative text-center">
        <h1
          class="mb-4 text-3xl font-bold tracking-tight text-zinc-900 sm:text-4xl md:text-5xl dark:text-zinc-100"
        >
          Blog
        </h1>

        <p
          class="mx-auto mb-6 max-w-2xl text-sm text-zinc-600 sm:mb-10 sm:text-base dark:text-zinc-400"
        >
          Thoughts, ideas, and explorations on technology and selfhosting.
        </p>
      </div>
    </div>

    <!-- Grid layout for mobile experience -->
    <div class="grid grid-cols-1 gap-6 sm:gap-8 md:grid-cols-12">
      <!-- Featured post (if exists) -->
      {
        sortedPosts.length > 0 && (
          <div class="mb-8 sm:mb-12 md:col-span-12">
            <article class="group relative overflow-hidden rounded-none border-b border-zinc-200 pb-6 sm:pb-8 dark:border-zinc-800">
              <div class="flex h-full flex-col gap-6 sm:gap-8 md:flex-row">
                {sortedPosts[0].image && (
                  <div class="mx-auto h-60 w-full max-w-full overflow-hidden sm:h-80 sm:max-w-md md:mx-0 md:h-96 md:w-1/2">
                    <img
                      src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${sortedPosts[0].image}`}
                      alt={sortedPosts[0].title}
                      class="h-full w-full object-cover grayscale transition-all duration-700 group-hover:scale-105 hover:grayscale-0"
                      loading="eager"
                    />
                  </div>
                )}

                <div class="flex flex-1 flex-col justify-center">
                  <div class="mb-3 flex items-center justify-center gap-2 text-xs text-zinc-500 sm:text-sm md:justify-start dark:text-zinc-400">
                    <span class="font-medium tracking-wider uppercase">Featured</span>
                    <span class="h-px w-6 bg-zinc-300 sm:w-8 dark:bg-zinc-700" />
                    {sortedPosts[0].published_date && (
                      <time datetime={sortedPosts[0].published_date.toLocaleString()}>
                        {sortedPosts[0].published_date.toLocaleString('en-US', {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric',
                        })}
                      </time>
                    )}
                  </div>

                  <h2 class="mb-3 text-center text-2xl font-bold text-zinc-900 transition-colors group-hover:text-zinc-700 sm:mb-4 sm:text-3xl md:text-left dark:text-zinc-100 dark:group-hover:text-zinc-300">
                    <a
                      href={`/blog/${sortedPosts[0].slug}/`}
                      class="before:absolute before:inset-0"
                    >
                      {sortedPosts[0].title}
                    </a>
                  </h2>

                  <p class="mb-4 line-clamp-3 text-center text-sm text-zinc-600 sm:mb-6 sm:text-base md:text-left dark:text-zinc-400">
                    {sortedPosts[0].description}
                  </p>

                  <div class="flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:justify-start">
                    {sortedPosts[0].tags && (
                      <div class="flex flex-wrap justify-center gap-2 md:justify-start">
                        {sortedPosts[0].tags.slice(0, 2).map((tag) => (
                          <span class="border border-zinc-200 px-2 py-1 text-xs tracking-wider text-zinc-600 uppercase sm:px-3 dark:border-zinc-800 dark:text-zinc-400">
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </article>
          </div>
        )
      }

      <!-- Sidebar for mobile -->
      <div class="relative md:col-span-3">
        <div class="mb-8 space-y-4 md:sticky md:top-24 md:mb-0">
          <h3
            class="mb-4 text-center text-lg font-medium tracking-wider text-zinc-900 uppercase md:text-left dark:text-zinc-100"
          >
            Archive
          </h3>

          <!-- Horizontal scrollable archive on mobile, vertical on desktop -->
          <div
            class="hide-scrollbar flex overflow-x-auto pb-4 md:flex-col md:overflow-visible md:pb-0"
          >
            {
              years.map((year, index) => (
                <a
                  href={`#year-${year}`}
                  class={`hover mr-3 flex items-center rounded-full border-b border-zinc-100 px-4 py-2 whitespace-nowrap transition-colors hover:bg-zinc-50 md:mr-0 md:w-full md:rounded-none md:px-0 md:py-3 md:whitespace-normal dark:border-zinc-800 dark:hover:bg-zinc-900 ${index === 0 ? 'bg-zinc-50 dark:bg-zinc-800/50' : ''}`}
                >
                  <span class="text-base font-medium text-zinc-900 md:text-lg dark:text-zinc-100">
                    {year}
                  </span>
                  <span class="ml-2 text-xs text-zinc-500 md:ml-auto md:text-sm dark:text-zinc-400">
                    {postsByYear[year].length} post{postsByYear[year].length !== 1 ? 's' : ''}
                  </span>
                </a>
              ))
            }
          </div>
        </div>
      </div>

      <!-- Post grid for mobile -->
      <div class="md:col-span-9">
        {
          years.map((year) => (
            <div id={`year-${year}`} class="mb-12 scroll-mt-16 sm:mb-20">
              <h2 class="mb-6 border-b border-zinc-200 pb-3 text-center text-xl font-bold text-zinc-900 sm:mb-8 sm:pb-4 sm:text-2xl md:text-left dark:border-zinc-800 dark:text-zinc-100">
                {year}
              </h2>

              <div
                class={`grid grid-cols-1 ${postsByYear[year].length >= 2 ? 'md:grid-cols-2' : 'md:grid-cols-1'} gap-8 sm:gap-12`}
              >
                {postsByYear[year].map((post) => (
                  <article class="group relative mx-auto flex h-full w-full max-w-sm flex-col sm:max-w-md md:mx-0">
                    {post.image && (
                      <div class="mb-4 h-48 overflow-hidden rounded-lg sm:h-56">
                        <img
                          src={`${process.env.DIRECTUS_URL ?? 'https://directus.alexlebens.dev'}/assets/${post.image}`}
                          alt={post.title}
                          class="h-full w-full object-cover grayscale transition-all duration-700 group-hover:scale-105 hover:grayscale-0"
                          loading="lazy"
                        />
                      </div>
                    )}

                    <div class="flex flex-1 flex-col">
                      <div class="mb-2 flex flex-wrap items-center justify-center gap-3 text-xs text-zinc-500 sm:mb-3 sm:gap-4 sm:text-sm md:justify-start dark:text-zinc-400">
                        {post.pubDate && (
                          <time
                            datetime={post.published_date.toLocaleString()}
                            class="flex items-center"
                          >
                            {post.published_date.toLocaleString('en-US', {
                              month: 'short',
                              day: 'numeric',
                            })}
                          </time>
                        )}
                      </div>

                      <h3 class="mb-2 text-center text-lg font-semibold text-zinc-900 transition-colors group-hover:text-zinc-700 sm:mb-3 sm:text-xl md:text-left dark:text-zinc-100 dark:group-hover:text-zinc-300">
                        <a href={`/blog/${post.slug}/`} class="before:absolute before:inset-0">
                          {post.title}
                        </a>
                      </h3>

                      <p class="mb-4 line-clamp-2 grow text-center text-sm text-zinc-600 md:text-left dark:text-zinc-400">
                        {post.description}
                      </p>

                      {post.tags && (
                        <div class="mt-auto flex flex-wrap justify-center gap-2 md:justify-start">
                          {post.tags.slice(0, 2).map((tag) => (
                            <span class="border border-zinc-200 px-2 py-1 text-xs tracking-wider text-zinc-600 uppercase sm:px-3 dark:border-zinc-800 dark:text-zinc-400">
                              {tag}
                            </span>
                          ))}
                          {post.tags.length > 2 && (
                            <span class="border border-zinc-200 px-2 py-1 text-xs tracking-wider text-zinc-600 uppercase sm:px-3 dark:border-zinc-800 dark:text-zinc-400">
                              +{post.tags.length - 2}
                            </span>
                          )}
                        </div>
                      )}
                    </div>
                  </article>
                ))}
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </div>
</BaseLayout>

<style>
  /* Blob animation */
  .animate-blob {
    animation: blob-bounce 8s infinite ease;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  @keyframes blob-bounce {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    25% {
      transform: translate(5%, 5%) scale(1.05);
    }
    50% {
      transform: translate(0, 10%) scale(1);
    }
    75% {
      transform: translate(-5%, 5%) scale(0.95);
    }
  }

  /* Search container hover effect */
  .search-container:hover .search-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  /* Input focus animation */
  input:focus + div .search-pulse {
    animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Hide scrollbar but keep functionality */
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Line clamp for descriptions */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Touch targets for mobile */
  @media (max-width: 640px) {
    a,
    button {
      min-height: 44px;
      display: flex;
      align-items: center;
    }
  }
</style>

<script>
  document.addEventListener('astro:page-load', () => {
    const backToTopButton = document.getElementById('back-to-top');

    if (backToTopButton) {
      // Show button when scrolled down
      const toggleBackToTopButton = () => {
        if (window.scrollY > 300) {
          backToTopButton.classList.remove('opacity-0', 'invisible');
          backToTopButton.classList.add('opacity-100', 'visible');
        } else {
          backToTopButton.classList.remove('opacity-100', 'visible');
          backToTopButton.classList.add('opacity-0', 'invisible');
        }
      };

      // Scroll to top when clicked
      backToTopButton.addEventListener('click', () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        });
      });

      // Check scroll position
      window.addEventListener('scroll', toggleBackToTopButton);
      toggleBackToTopButton();
    }

    // Add smooth scrolling to year links
    document.querySelectorAll('a[href^="#year-"]').forEach((anchor) => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        const targetElement = document.querySelector(targetId);

        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 100,
            behavior: 'smooth',
          });

          // Update URL hash without jumping
          history.pushState(null, null, targetId);
        }
      });
    });

    // Add touch support for hover effects
    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

    if (isTouchDevice) {
      const articles = document.querySelectorAll('article');

      articles.forEach((article) => {
        article.addEventListener('touchstart', () => {
          article.classList.add('is-touched');
        });

        article.addEventListener('touchend', () => {
          setTimeout(() => {
            article.classList.remove('is-touched');
          }, 300);
        });
      });
    }
  });
</script>