chore(deps): update dependency @directus/sdk to v21.2.0

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

@@ -42,14 +42,14 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Login to Registry
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ vars.REPOSITORY_HOST }}
           username: ${{ gitea.actor }}
           password: ${{ secrets.REPOSITORY_TOKEN }}
 
       - name: Login to Docker
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         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@v4
+        uses: docker/setup-buildx-action@v3
         with:
           driver: kubernetes
           driver-opts: |
@@ -77,7 +77,7 @@ jobs:
 
       - name: Extract Metadata
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           tags: |
             type=ref,event=branch
@@ -101,7 +101,7 @@ jobs:
           fi
 
       - name: Build and Push Image
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         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@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ vars.REGISTRY_HOST }}
           username: ${{ vars.REGISTRY_USER }}
           password: ${{ secrets.REGISTRY_SECRET }}
 
       - name: Login to Docker
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         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@v4
+        uses: docker/setup-buildx-action@v3
         with:
           driver: kubernetes
           driver-opts: |
@@ -77,7 +77,7 @@ jobs:
 
       - name: Extract Metadata
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           tags: |
             type=ref,event=branch
@@ -101,7 +101,7 @@ jobs:
           fi
 
       - name: Build and Push Image
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         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.21.0"
+LABEL version="2.19.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.21.0",
+  "version": "2.19.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",

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: ['*', 'category.slug'],
+    fields: ['*'],
     sort: ['-published_date'],
   })
 );
@@ -31,16 +31,13 @@ const layoutPattern = [
 const postMap: Map<string, Post[]> = posts
   .sort((a: Post, b: Post) => b.published_date.valueOf() - a.published_date.valueOf())
   .reduce((acc, obj) => {
-    const categorySlug = obj.category?.slug;
+    let posts = acc.get(obj.category);
-    if (!categorySlug) return acc;
-
-    let posts = acc.get(categorySlug);
     if (!posts) {
       posts = [];
     }
     posts.push(obj);
 
-    acc.set(categorySlug, posts);
+    acc.set(obj.category, posts);
 
     return acc;
   }, new Map<string, Post[]>());

src/layouts/BaseLayout.astro

@@ -68,51 +68,67 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     />
   </head>
 
-  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-hidden">
+  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
 
     <!-- Sliding backgrounds -->
     <div class="bg"/>
     <div class="bg bg2"/>
     <div class="bg bg3"/>
 
-    <!-- Fixed header -->
+    <!-- Layout -->
-    <Header />
+    <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
 
-    <!-- Content -->
+      <Header />
-    <div class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
-      <main class="pt-20">
 
+      <main class="has-js scroll-fade-container min-h-screen">
         <slot />
-
-        <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();
+  });
+</script>
+
 <style>
   /* Fade away content below header when scrolling */
-  .mask-container {
+  .has-js .scroll-fade-container {
     -webkit-mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 90px,
+      transparent 16px,
-      black 140px,
+      black 80px,
       black 100%
     );
 
     mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 90px,
+      transparent 16px,
-      black 140px,
+      black 60px,
       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 */

src/lib/directusTypes.ts

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

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

@@ -17,9 +17,7 @@ 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,
@@ -27,7 +25,12 @@ export async function getStaticPaths() {
 }
 
 const global = await directus.request(readSingleton('site_global'));
-const category = post.category;
+const [category] = post.category ? await directus.request(
+  readItems('categories', {
+    filter: { slug: { _eq: post.category },},
+    limit: 1,
+  }))
+  : [];
 
 const readingTime = getReadingTime(post.content || '');
 

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: ['*', 'category.slug'],
+    fields: ['*'],
     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?.slug === category.slug;
+    return b.category === category.slug;
   });
 ---