feat: release 2.24.0

Reviewed-on: #369

.gitea/workflows/release-image-gitea.yml

@@ -42,14 +42,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Login to Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ vars.REPOSITORY_HOST }}
           username: ${{ gitea.actor }}
           password: ${{ secrets.REPOSITORY_TOKEN }}
 
       - name: Login to Docker
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ vars.DH_REGISTRY }}
           username: ${{ secrets.DH_USERNAME }}
@@ -62,7 +62,7 @@ jobs:
 
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
         with:
           driver: kubernetes
           driver-opts: |
@@ -77,7 +77,7 @@ jobs:
 
       - name: Extract Metadata
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           tags: |
             type=ref,event=branch
@@ -101,7 +101,7 @@ jobs:
           fi
 
       - name: Build and Push Image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           push: true

.gitea/workflows/release-image-harbor.yml

@@ -42,14 +42,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Login to Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ vars.REGISTRY_HOST }}
           username: ${{ vars.REGISTRY_USER }}
           password: ${{ secrets.REGISTRY_SECRET }}
 
       - name: Login to Docker
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ vars.DH_REGISTRY }}
           username: ${{ secrets.DH_USERNAME }}
@@ -62,7 +62,7 @@ jobs:
 
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
         with:
           driver: kubernetes
           driver-opts: |
@@ -77,7 +77,7 @@ jobs:
 
       - name: Extract Metadata
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
           tags: |
             type=ref,event=branch
@@ -101,7 +101,7 @@ jobs:
           fi
 
       - name: Build and Push Image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: .
           push: true

Dockerfile

@@ -22,7 +22,7 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.17.0"
+LABEL version="2.24.0"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0

package.json

@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.17.0",
+  "version": "2.24.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -33,11 +33,11 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
-    "@directus/sdk": "^21.1.0",
+    "@directus/sdk": "^21.2.0",
     "@giscus/react": "^3.1.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pajamas": "^1.2.15",
-    "@iconify-json/simple-icons": "^1.2.71",
+    "@iconify-json/simple-icons": "^1.2.72",
     "@playform/compress": "^0.2.1",
     "@swup/astro": "^1.8.0",
     "@tailwindcss/postcss": "^4.2.1",
@@ -46,16 +46,16 @@
     "@types/unist": "^3.0.3",
     "astro": "^5.18.0",
     "astro-icon": "^1.1.5",
-    "marked": "^17.0.3",
+    "marked": "^17.0.4",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
-    "preline": "^4.1.1",
+    "preline": "^4.1.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "reading-time": "^1.5.0",
     "sharp": "^0.34.5",
     "sharp-ico": "^0.1.5",
-    "shiki": "^3.23.0",
+    "shiki": "^4.0.1",
     "tailwindcss": "^4.2.1",
     "ultrahtml": "^1.6.0"
   },
@@ -63,7 +63,7 @@
     "@eslint-react/eslint-plugin": "^2.13.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "eslint": "^10.0.2",
+    "eslint": "^10.0.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-astro": "^1.6.0",
     "eslint-plugin-format": "^2.0.1",

src/components/Header.astro

@@ -12,7 +12,7 @@ const currentPath = pathname.slice(1);
   class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
 >
   <nav
-    class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
+    class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] transition-all duration-300 w-full px-4 py-3 mx-2 md:mx-8 mt-4"
     aria-label="Global"
   >
     <div class="flex items-center justify-between ml-0">

src/components/buttons/ThemeToggleButton.astro

@@ -64,7 +64,7 @@
       const overlay = document.createElement('div');
       overlay.className = 'theme-switch-overlay fixed inset-0 pointer-events-none z-50';
       overlay.style.opacity = '0';
-      overlay.style.transition = 'opacity 0.3s ease-out';
+      overlay.style.transition = 'opacity 0.15s ease-out';
       document.body.appendChild(overlay);
     }
 
@@ -130,7 +130,7 @@
                   overlay.style.opacity = '0';
                 }
                 document.documentElement.classList.remove('theme-switching');
-              }, 300);
+              }, 150);
             }, 50);
           },
           { passive: false }

src/components/cards/LargeBlogLeftCard.astro

@@ -2,28 +2,30 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
+import { formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
   url: string;
+  pubDate: Date,
   img: string;
   imgAlt: string;
 }
 
-const { title, subTitle, url, img, imgAlt } = Astro.props;
+const { title, subTitle, url, pubDate, img, imgAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
+<div class="smooth-reveal flex flex-col px-4 py-10 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 max-w-340 2xl:max-w-full md:px-8 md:py-8"
+    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
   >
     <div>
       <Image
-        class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
+        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"
@@ -40,17 +42,21 @@ const { title, subTitle, url, img, imgAlt } = Astro.props;
       <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
-      <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 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>
+        <span class="card-text-description text-sm ml-auto">
+          {formatDate(pubDate)}
+        </span>
       </div>
-    </div>
   </a>
 </div>

src/components/cards/LargeBlogRightCard.astro

@@ -2,25 +2,26 @@
 import { Icon } from 'astro-icon/components';
 import { Image } from 'astro:assets';
 
+import { formatDate } from '@support/time';
 import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
   url: string;
-  single?: boolean;
-  imgOne: any;
-  imgOneAlt: any;
-  imgTwo?: any;
-  imgTwoAlt?: any;
+  pubDate: Date;
+  imgOne: string;
+  imgOneAlt: string;
+  imgTwo?: string;
+  imgTwoAlt?: string;
 }
 
-const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
+const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
+<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
   <a
-    class="md:card-base-hidden group flex flex-col-reverse md:items-center md:grid md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 max-w-340 2xl:max-w-full md:px-8 md:py-8"
+    class="md:card-base-hidden group flex flex-col-reverse md:grid md:items-center md:grid-cols-2 lg:grid lg:grid-cols-2 md:gap-8 xl:gap-16 w-full md:px-8 md:py-8"
     href={url}
     data-astro-prefetch
   >
@@ -31,25 +32,30 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
       <p class="card-text-title font-light text-pretty sm:text-lg max-w-prose mb-8">
         {subTitle}
       </p>
-      <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 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>
+        <span class="card-text-description text-sm ml-auto">
+          {formatDate(pubDate)}
+        </span>
       </div>
     </div>
-    {single ? (
+    {!imgTwo ? (
     <div>
       <Image
-        class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
+        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(imgOne)}
         alt={imgOneAlt}
-        format="webp"
+        draggable="false"
         loading="lazy"
         width="850"
         height="420"
@@ -57,30 +63,42 @@ const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = A
       />
     </div>
     ) : (
-    <div class="grid grid-cols-2 gap-4">
-      <Image
-        class="rounded-xl w-full"
-        src={getDirectusImageURL(imgOne)}
-        alt={imgOneAlt}
-        draggable="false"
-        format="webp"
-        loading="lazy"
-        width="400"
-        height="230"
-        inferSize={true}
-      />
-      <Image
-        class="rounded-xl w-full mt-4 lg:mt-10"
-        src={getDirectusImageURL(imgTwo)}
-        alt={imgTwoAlt}
-        draggable="false"
-        format="webp"
-        loading="lazy"
-        width="400"
-        height="230"
-        inferSize={true}
-      />
-    </div>
+    <>
+      <div class="md:hidden">
+        <Image
+          class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
+          src={getDirectusImageURL(imgOne)}
+          alt={imgOneAlt}
+          draggable="false"
+          loading="lazy"
+          width="850"
+          height="420"
+          inferSize={true}
+        />
+      </div>
+      <div class="hidden md:flex md:items-start">
+        <Image
+          class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
+          src={getDirectusImageURL(imgOne)}
+          alt={imgOneAlt}
+          draggable="false"
+          loading="lazy"
+          width="600"
+          height="310"
+          inferSize={true}
+        />
+        <Image
+          class="rounded-xl shadow-2xl w-3/5 h-full -ml-16 mt-12 object-cover"
+          src={getDirectusImageURL(imgTwo)}
+          alt={imgTwoAlt}
+          draggable="false"
+          loading="lazy"
+          width="600"
+          height="310"
+          inferSize={true}
+        />
+      </div>
+    </>
     )}
   </a>
 </div>

src/components/images/ImageTheme.astro

@@ -4,12 +4,11 @@ import { Image } from 'astro:assets';
 const { srcLight, srcDark, alt, style, width, height } = Astro.props;
 ---
 
-<div class="themed-image-container">
+<div class="grid grid-cols-1 grid-rows-1">
   <Image
     src={srcLight}
     alt={alt}
-    class={`light-logo ${style}`}
-    inferSize={true}
+    class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-100 scale-100 dark:opacity-0 dark:scale-65', style]}
     width={width}
     height={height}
     inferSize={true}
@@ -18,29 +17,9 @@ const { srcLight, srcDark, alt, style, width, height } = Astro.props;
   <Image
     src={srcDark}
     alt={alt}
-    class={`dark-logo ${style}`}
-    inferSize={true}
+    class:list={['col-start-1 row-start-1 transition-all duration-300 ease-in-out opacity-0 scale-65 dark:opacity-100 dark:scale-100', style]}
     width={width}
     height={height}
     inferSize={true}
   />
 </div>
-
-<style>
-  .themed-image-container {
-    display: grid;
-    grid-template-areas: "stack";
-  }
-
-  .themed-image-container :global(img) {
-    grid-area: stack;
-  }
-
-  :global(.dark) .light-logo {
-    display: none !important;
-  }
-
-  :global(.dark) .dark-logo {
-    display: block !important;
-  }
-</style>

src/components/sections/CategorySection.astro

@@ -10,7 +10,7 @@ import { timeago } from '@support/time';
 const posts = await directus.request(
   readItems('posts', {
     filter: { published: { _eq: true } },
-    fields: ['*'],
+    fields: ['*', 'category.slug'],
     sort: ['-published_date'],
   })
 );
@@ -31,13 +31,16 @@ const layoutPattern = [
 const postMap: Map<string, Post[]> = posts
   .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
   .reduce((acc, obj) => {
-    let posts = acc.get(obj.category);
+    const categorySlug = obj.category?.slug;
+    if (!categorySlug) return acc;
+
+    let posts = acc.get(categorySlug);
     if (!posts) {
       posts = [];
     }
     posts.push(obj);
 
-    acc.set(obj.category, posts);
+    acc.set(categorySlug, posts);
 
     return acc;
   }, new Map<string, Post[]>());

src/components/sections/FeatureSection.astro

@@ -15,25 +15,29 @@ const global = await directus.request(readSingleton('site_global'));
           title="Cloud Engineer"
           description="Full stack and cloud engineer."
           url="/about"
-          logoUrlLight="https://img.icons8.com/cotton/64/cloud-development--v2.png"
+          logoUrlLight="https://directus.alexlebens.net/assets/8e674299-2dfc-4ea3-8193-a1c4050bf06f?key=system-large-contain&v=2026-02-26T21%3A23%3A22.457Z"
+          logoUrlDark="https://directus.alexlebens.net/assets/cdd6efce-3231-4213-8b1e-cae9c1b3a18f?key=system-large-contain&v=2026-03-03T19%3A30%3A01.263Z"
         />
         <FeaturesCard
           title="Homelab"
           description="Tinkering, testing, deploying, etc, etc ..."
           url="/categories/homelab/"
-          logoUrlLight="https://img.icons8.com/cotton/64/smart-home-connection.png"
+          logoUrlLight="https://directus.alexlebens.net/assets/4ccb3d9f-e203-4c2b-bfad-600f1aa5b7a4?key=system-large-contain&v=2026-02-26T21%3A25%3A30.853Z"
+          logoUrlDark="https://directus.alexlebens.net/assets/33fb6b45-1834-44a0-bc04-692be4f6d4ce?key=system-large-contain&v=2026-03-03T19%3A30%3A37.961Z"
         />
         <FeaturesCard
           title="Documentation"
           description="Reference and guides for my homelab."
           url="https://docs.alexlebens.dev"
-          logoUrlLight="https://img.icons8.com/cotton/64/bookmarked-document--v1.png"
+          logoUrlLight="https://directus.alexlebens.net/assets/5f5faad9-2c36-40a5-a519-f631d39ab388?key=system-large-contain&v=2026-03-03T19%3A49%3A43.620Z"
+          logoUrlDark="https://directus.alexlebens.net/assets/c49b40a9-ddf2-4fa2-ba35-6039682b93de?key=system-large-contain&v=2026-03-03T19%3A50%3A14.893Z"
         />
         <FeaturesCard
           title="Email"
           description={`Send me a message.`}
           url=`mailto:${global.email}`
-          logoUrlLight="https://img.icons8.com/cotton/64/secured-letter--v3.png"
+          logoUrlLight="https://directus.alexlebens.net/assets/4b1c771e-c709-4094-b018-0197b4747829?key=system-large-contain&v=2026-03-03T19%3A48%3A36.432Z"
+          logoUrlDark="https://directus.alexlebens.net/assets/cdf2ea11-fcfc-41f1-a701-43084fb06efa?key=system-large-contain&v=2026-03-03T19%3A47%3A28.109Z"
         />
       </div>
     </div>

src/components/sections/RecentPostsSection.astro

@@ -23,7 +23,11 @@ const { posts, title, subTitle } = Astro.props;
       </span>
     </div>
   </div>
-  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-    {posts.map((b) => <BlogCard post={b} />)}
+  <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>

src/components/sections/SelectedPostsSection.astro

@@ -11,12 +11,13 @@ interface Props {
 const { posts } = Astro.props;
 ---
 
-<section class="smooth-reveal flex flex-col gap-4">
+<section class="smooth-reveal flex flex-col gap-4 md:mb-20">
   {posts.map((post, index) => index % 2 === 0 ? (
   <LargeBlogLeftCard
     title={post.title}
     subTitle={post.description}
     url={`/blog/${post.slug}`}
+    pubDate={post.published_date}
     img={post.image}
     imgAlt={post.image_alt}
   />
@@ -25,7 +26,7 @@ const { posts } = Astro.props;
     title={post.title}
     subTitle={post.description}
     url={`/blog/${post.slug}`}
-    single={!post.image_second}
+    pubDate={post.published_date}
     imgOne={post.image}
     imgOneAlt={post.image_alt}
     imgTwo={post?.image_second}

src/layouts/BaseLayout.astro

@@ -68,90 +68,89 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     />
   </head>
 
-  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
+  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-hidden">
 
     <!-- Sliding backgrounds -->
     <div class="bg"/>
     <div class="bg bg2"/>
     <div class="bg bg3"/>
 
-    <!-- Layout -->
-    <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
+    <!-- Fixed header -->
+    <Header />
 
-      <Header />
+    <!-- Main body -->
+    <div id="reset-scroll" class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
+      <main>
 
-      <main class="has-js scroll-fade-container min-h-screen">
-        <slot />
+        <!-- Content -->
+        <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
+          <slot />
+        </div>
+
+        <!-- Footer -->
+        <Footer />
+        
       </main>
-
     </div>
 
-    <Footer />
-
   </body>
 </html>
 
 <script>
-  document.addEventListener('astro:page-load', () => {
-    const onScroll = () => {
-      document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
-      document.documentElement.classList.add('has-js');
-    };
-
-    window.removeEventListener('scroll', onScroll);
-    window.addEventListener('scroll', onScroll, { passive: true });
-
-    onScroll();
-  });
+  const resetScroll = () => {
+    const scrollContainer = document.getElementById('reset-scroll');
+    if (scrollContainer) {
+      scrollContainer.scrollTop = 0;
+    }
+  };
+  resetScroll();
+  document.addEventListener('astro:after-swap', resetScroll);
 </script>
 
 <style>
   /* Fade away content below header when scrolling */
-  .has-js .scroll-fade-container {
+  .mask-container {
     -webkit-mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 16px,
-      black 80px,
+      transparent 90px,
+      black 140px,
       black 100%
     );
 
     mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 16px,
-      black 60px,
+      transparent 90px,
+      black 140px,
       black 100%
     );
 
     -webkit-mask-size: 100vw 100vh;
     -webkit-mask-repeat: no-repeat;
-
-    -webkit-mask-position-y: var(--scroll-offset);
-    mask-position-y: var(--scroll-offset);
   }
 
   /* Background that creates the "glimmer" effect */
   .bg {
-    animation: slide 20s ease-in-out infinite alternate;
-    background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
-    filter: blur(80px);
+    animation: slide 25s ease-in-out infinite alternate;
+    background-image: linear-gradient(-55deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
+    filter: blur(40px);
     top: 0;
     bottom: 0;
-    left: -50%;
-    right: -50%;
+    left: -70%;
+    right: -70%;
     opacity: .5;
     position: fixed;
     z-index: -1;
     --bg-primary: #e5e5e5;
-    --bg-secondary: #d9d9d9;
-    --bg-tertiary: #ededed;
+    --bg-secondary: #dce3eb;
+    --bg-tertiary: #f4f6f8;
   }
 
   :global(.dark) .bg {
-    --bg-primary: #292524;
-    --bg-secondary: #44403c;
-    --bg-tertiary: #57534e;
+    --bg-primary: #3b3836;
+    --bg-secondary: #332f2e;
+    --bg-tertiary: #44403c;
   }
 
   .bg2 {
@@ -160,15 +159,15 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   }
 
   .bg3 {
-    animation-duration: 25s;
+    animation-duration: 20s;
   }
 
   @keyframes slide {
     0% {
-      transform:translateX(-25%);
+      transform: translateX(-30%);
     }
     100% {
-      transform:translateX(25%);
+      transform: translateX(30%);
     }
   }
 </style>

src/lib/directusTypes.ts

@@ -37,7 +37,7 @@ export type Post = {
   title: string;
   description: string;
   tags: string[];
-  category: string;
+  category: Category;
   selected: boolean;
   published: boolean;
   content: string;

src/pages/blog/[...slug].astro

@@ -17,7 +17,9 @@ import { getDirectusImageURL } from '@/support/url';
 const post = Astro.props;
 
 export async function getStaticPaths() {
-  const posts = await directus.request(readItems('posts'));
+  const posts = await directus.request(readItems('posts', {
+    fields: ['*', 'category.*'],
+  }));
   return posts.map((post) => ({
     params: { slug: post.slug },
     props: post,
@@ -25,12 +27,7 @@ export async function getStaticPaths() {
 }
 
 const global = await directus.request(readSingleton('site_global'));
-const [category] = post.category ? await directus.request(
-  readItems('categories', {
-    filter: { slug: { _eq: post.category },},
-    limit: 1,
-  }))
-  : [];
+const category = post.category;
 
 const readingTime = getReadingTime(post.content || '');
 

src/pages/blog/index.astro

@@ -20,7 +20,7 @@ const posts = await directus.request(
   })
 );
 
-const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 3);
+const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
 const recentPosts: Post[] = posts.filter(
   (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
   ).slice(0, 9);

src/pages/categories/[...slug].astro

@@ -22,7 +22,7 @@ const global = await directus.request(readSingleton('site_global'));
 const posts = await directus.request(
   readItems('posts', {
     filter: { published: { _eq: true } },
-    fields: ['*'],
+    fields: ['*', 'category.slug'],
     sort: ['-published_date'],
   })
 );
@@ -30,7 +30,7 @@ const posts = await directus.request(
 const categoriesPosts = posts
   .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
   .filter((b) => {
-    return b.category === category.slug;
+    return b.category?.slug === category.slug;
   });
 ---
 

src/styles/global.css

@@ -39,10 +39,10 @@
 
   /* Object colors */
   --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
-  --color-background-accent: light-dark(color-mix(in srgb, var(--color-neutral-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
+  --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
   --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));
 
-  --color-divider: light-dark(color-mix(in srgb, var(--color-neutral-400) 50%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
+  --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));
 }
 
 @layer base {