From 7327795d394f05039a3e0fe0e6615453138bcd6a Mon Sep 17 00:00:00 2001
From: Alex Lebens <alexanderlebens@gmail.com>
Date: Sun, 8 Mar 2026 21:38:54 -0500
Subject: [PATCH] feat: add an all page with cards to link to it

---
 pnpm-lock.yaml                                |   2 +-
 src/components/cards/LargeCategoryCard.astro  |  77 +++++++++++++
 src/components/cards/LargeInvisibleCard.astro |  59 ++++++++++
 .../sections/AllCategoriesSection.astro       |  31 +++++
 src/components/sections/AllPostsSection.astro |  20 ++++
 src/components/sections/CategorySection.astro |   2 +-
 src/lib/directusTypes.ts                      |   4 +
 src/pages/all.astro                           | 109 ++++++++++++++++++
 src/pages/blog/index.astro                    |   3 +
 src/pages/categories/[...slug].astro          |  59 +++++++++-
 src/pages/categories/index.astro              |   3 +
 src/pages/index.astro                         |   3 +
 12 files changed, 368 insertions(+), 4 deletions(-)
 create mode 100644 src/components/cards/LargeCategoryCard.astro
 create mode 100644 src/components/cards/LargeInvisibleCard.astro
 create mode 100644 src/components/sections/AllCategoriesSection.astro
 create mode 100644 src/components/sections/AllPostsSection.astro
 create mode 100644 src/pages/all.astro

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 55cf7fa..9148404 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,7 +75,7 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0
       photoswipe:
-        specifier: 5.4.4
+        specifier: ^5.4.4
         version: 5.4.4
       preline:
         specifier: ^4.1.2
diff --git a/src/components/cards/LargeCategoryCard.astro b/src/components/cards/LargeCategoryCard.astro
new file mode 100644
index 0000000..3d45a01
--- /dev/null
+++ b/src/components/cards/LargeCategoryCard.astro
@@ -0,0 +1,77 @@
+---
+import Logo from '@components/images/Logo.astro';
+import { getDirectusImageURL } from '@/support/url';
+
+interface Props {
+  url: string;
+  title: string;
+  description: string;
+  logoLight: string;
+  logoDark?: string;
+  count: number;
+  publishDate: string;
+}
+
+const { url, title, description, logoLight, logoDark, count, publishDate } = Astro.props;
+---
+
+<div class="smooth-reveal flex flex-col mx-auto w-full">
+  <a
+    class="card-base flex flex-col h-full min-h-55"
+    href={url}
+    data-astro-prefetch
+  >
+    <div class="relative grow overflow-hidden">
+      <div class="absolute inset-1 flex flex-col p-3 md:p-4 lg:p-5">
+        <div class="flex flex-row items-center mb-4">
+          <div class="card-hover-icon-scale shrink-0 mr-3">
+            <Logo
+              srcLight={getDirectusImageURL(logoLight)}
+              srcDark={getDirectusImageURL(logoDark!)}
+              alt={`Logo of ${title}`}
+            />
+          </div>
+          <h3 class="card-text-title-major card-hover-text-title whitespace-nowrap">
+            {title}
+          </h3>
+        </div>
+        <div>
+          <p class="card-text-description mb-4">
+            {description}
+          </p>
+        </div>
+        <div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
+            </svg>
+            {count}
+          </span>
+          <span class="inline-flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              class="mr-1"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+            {publishDate}
+          </span>
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
diff --git a/src/components/cards/LargeInvisibleCard.astro b/src/components/cards/LargeInvisibleCard.astro
new file mode 100644
index 0000000..7ca7c0a
--- /dev/null
+++ b/src/components/cards/LargeInvisibleCard.astro
@@ -0,0 +1,59 @@
+---
+import { Icon } from 'astro-icon/components';
+import { Image } from 'astro:assets';
+
+import { getDirectusImageURL } from '@/support/url';
+
+interface Props {
+  title: string;
+  subTitle: string;
+  url: string;
+  img?: string;
+  imgAlt?: string;
+}
+
+const { title, subTitle, url, img, imgAlt } = Astro.props;
+---
+
+<div class="smooth-reveal flex flex-col mx-auto w-full">
+  <a
+    class="md:card-base-hidden group items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 gap-8 xl:gap-16 w-full md:px-8 md:py-8"
+    href={url}
+    data-astro-prefetch
+  >
+    {img && (
+    <div>
+      <Image
+        class="rounded-2xl rounded-b-none md:rounded-2xl md:shadow-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
+        src={getDirectusImageURL(img)}
+        alt={imgAlt}
+        draggable="false"
+        loading="lazy"
+        width="850"
+        height="420"
+        inferSize={true}
+      />
+    </div>
+    )}
+    <div class="bg-background-card md:bg-transparent group-hover:bg-neutral-100 md:group-hover:bg-transparent dark:group-hover:bg-neutral-800/90 md:dark:group-hover:bg-transparent rounded-b-2xl transition-all duration-300 p-6">
+      <h2 class="card-text-header mb-2">
+        {title}
+      </h2>
+      <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
+        {subTitle}
+      </p>
+      <div class="flex items-center justify-between w-full">
+        <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
+          <div class="button-text-title flex relative items-center text-center">
+            <span class="mr-2">
+              Read More
+            </span>
+            <Icon
+              name="mdi:keyboard-arrow-right"
+              class="button-hover-arrow"
+            />
+          </div>
+        </div>
+      </div>
+  </a>
+</div>
diff --git a/src/components/sections/AllCategoriesSection.astro b/src/components/sections/AllCategoriesSection.astro
new file mode 100644
index 0000000..5fb2eed
--- /dev/null
+++ b/src/components/sections/AllCategoriesSection.astro
@@ -0,0 +1,31 @@
+---
+import { readItems, readSingleton } from '@directus/sdk';
+
+import LargeCategoryCard from '@components/cards/LargeCategoryCard.astro';
+import directus from '@lib/directus';
+import { timeago } from '@support/time';
+
+const global = await directus.request(readSingleton('site_global'));
+
+const posts = await directus.request(
+  readItems('posts', {
+    filter: { published: { _eq: true } },
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+---
+
+<section class:list={['mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full', Astro.props.className]}>
+  <div class="grid grid-cols-1">
+    <LargeCategoryCard
+      title="All Categories"
+      description="Here you can forgoe the organization and just look at everything I have posted"
+      url="/all"
+      logoLight={global.all_logoLight}
+      logoDark={global.all_logoDark}
+      count={posts.length}
+      publishDate={timeago(posts[0]?.published_date)}
+    />
+  </div>
+</section>
diff --git a/src/components/sections/AllPostsSection.astro b/src/components/sections/AllPostsSection.astro
new file mode 100644
index 0000000..96bd225
--- /dev/null
+++ b/src/components/sections/AllPostsSection.astro
@@ -0,0 +1,20 @@
+---
+import { readSingleton } from '@directus/sdk';
+
+import LargeInvisibleCard from '@components/cards/LargeInvisibleCard.astro';
+import directus from '@lib/directus';
+
+const global = await directus.request(readSingleton('site_global'));
+---
+
+<section class:list={['mx-auto px-4 py-10 sm:px-6 lg:px-8 lg:py-14 lg:pt-10 2xl:max-w-full', Astro.props.className]}>
+  <div class="grid grid-cols-1">
+    <LargeInvisibleCard
+      title="All Posts"
+      subTitle="Browse all articles from every category"
+      url="/all"
+      img={global.all_image}
+      imgAlt={global.all_image_alt}
+    />
+  </div>
+</section>
diff --git a/src/components/sections/CategorySection.astro b/src/components/sections/CategorySection.astro
index 949e7e8..0119ec9 100644
--- a/src/components/sections/CategorySection.astro
+++ b/src/components/sections/CategorySection.astro
@@ -1,7 +1,7 @@
 ---
 import { readItems } from '@directus/sdk';
 
-import type { Post, Category } from '@lib/directusTypes';
+import type { Post } from '@lib/directusTypes';
 
 import CategoryCard from '@components/cards/CategoryCard.astro';
 import directus from '@lib/directus';
diff --git a/src/lib/directusTypes.ts b/src/lib/directusTypes.ts
index fdfb6fc..126ed08 100644
--- a/src/lib/directusTypes.ts
+++ b/src/lib/directusTypes.ts
@@ -14,6 +14,10 @@ export type Global = {
   portrait_alt: string;
   home_image: string;
   home_image_alt: string;
+  all_image: string;
+  all_image_alt: string;
+  all_logoLight: string;
+  all_logoDark: string;
   blog_image: string;
   blog_image_alt: string;
   categories_image: string;
diff --git a/src/pages/all.astro b/src/pages/all.astro
new file mode 100644
index 0000000..5e89b1b
--- /dev/null
+++ b/src/pages/all.astro
@@ -0,0 +1,109 @@
+---
+import { readItems, readSingleton } from '@directus/sdk';
+
+import HeaderSection from '@components/sections/HeaderSection.astro';
+import BlogCard from '@components/cards/BlogCard.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
+
+const global = await directus.request(readSingleton('site_global'));
+const posts = await directus.request(
+  readItems('posts', {
+    filter: { published: { _eq: true } },
+    fields: ['*'],
+    sort: ['-published_date'],
+  })
+);
+---
+
+<BaseLayout
+  title="All Posts"
+  description="Browse all articles from every category."
+  structuredData={{
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    inLanguage: 'en-US',
+    '@id': Astro.url.href,
+    url: Astro.url.href,
+    name: `All Posts | ${global.name}`,
+    description: "Browse all articles from every category.",
+    isPartOf: {
+      url: `${global.site_url}`,
+      name: global.name,
+      description: global.about,
+    },
+  }}
+>
+
+  <HeaderSection
+    title="All Posts"
+    subTitle="Browse all articles from every category."
+    btnExists
+    btnTitle="To Categories"
+    btnURL="/categories"
+  />
+
+  <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
+    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
+      {posts.map((b) => 
+      <div class="break-inside-avoid mb-6">
+        <BlogCard post={b} />
+      </div>
+      )}
+    </div>
+  </section>
+
+</BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          50 + index * 100
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 150
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index af6cfe8..fbeb377 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,6 +6,7 @@ import type { Post } from '@lib/directusTypes';
 import HeroSection from '@components/sections/HeroSection.astro';
 import SelectedPostsSection from '@components/sections/SelectedPostsSection.astro';
 import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
+import AllPostsSection from '@components/sections/AllPostsSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 
@@ -60,6 +61,8 @@ const recentPosts: Post[] = posts.filter(
     title="Recent Posts"
   />
 
+  <AllPostsSection />
+  
 </BaseLayout>
 
 <script>
diff --git a/src/pages/categories/[...slug].astro b/src/pages/categories/[...slug].astro
index 6be4643..9bd0aa3 100644
--- a/src/pages/categories/[...slug].astro
+++ b/src/pages/categories/[...slug].astro
@@ -65,11 +65,66 @@ const categoriesPosts = posts
   />
 
   <section class="max-w-340 2xl:max-w-full mb-10 px-4 sm:px-6 lg:px-8 py-8 mx-auto mt-10">
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
       {categoriesPosts.map((b) => 
-      <BlogCard post={b} />
+      <div class="break-inside-avoid mb-6">
+        <BlogCard post={b} />
+      </div>
       )}
     </div>
   </section>
 
 </BaseLayout>
+
+<script>
+  // Add smooth reveal animations for content after loading
+  document.addEventListener('astro:page-load', () => {
+    const animateContent = () => {
+      // Animate group 1
+      const smoothReveal = document.querySelectorAll('.smooth-reveal');
+      smoothReveal.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          50 + index * 100
+        );
+      });
+
+      // Animate group 2
+      const smoothReveal2 = document.querySelectorAll('.smooth-reveal-2');
+      smoothReveal2.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          200 + index * 150
+        );
+      });
+
+      // Animate topic cards with staggered delay
+      const smoothRevealCards = document.querySelectorAll('.smooth-reveal-cards');
+      smoothRevealCards.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal');
+          },
+          500 + index * 100
+        );
+      });
+
+      // Animate with just fade in with staggered delay
+      const smoothRevealFade = document.querySelectorAll('.smooth-reveal-fade');
+      smoothRevealFade.forEach((el, index) => {
+        setTimeout(
+          () => {
+            el.classList.add('animate-reveal-fade');
+          },
+          100 + index * 250
+        );
+      });
+    };
+
+    animateContent();
+  });
+</script>
diff --git a/src/pages/categories/index.astro b/src/pages/categories/index.astro
index d6fd9a6..ac99fa0 100644
--- a/src/pages/categories/index.astro
+++ b/src/pages/categories/index.astro
@@ -3,6 +3,7 @@ import { readSingleton } from '@directus/sdk';
 
 import HeroSection from '@components/sections/HeroSection.astro';
 import CategorySection from '@components/sections/CategorySection.astro';
+import AllCategoriesSection from '@components/sections/AllCategoriesSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 
@@ -40,6 +41,8 @@ const global = await directus.request(readSingleton('site_global'));
 
   <CategorySection />
 
+  <AllCategoriesSection />
+
 </BaseLayout>
 
 <script>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index b0d653e..6d79a7c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,6 +7,7 @@ import HeroSection from '@components/sections/HeroSection.astro';
 import FeatureSection from '@components/sections/FeatureSection.astro';
 import WeatherSection from '@components/sections/WeatherSection.astro';
 import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
+import AllPostsSection from '@components/sections/AllPostsSection.astro';
 import GiteaSection from '@components/sections/GiteaSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
@@ -73,6 +74,8 @@ const recentPosts = posts
     subTitle="Checkout my most recent thoughts here"
   />
 
+  <AllPostsSection />
+  
   <GiteaSection
     title="Follow me on Gitea"
     subTitle="I love open source and have my code availabile on my Gitea server."