chore(deps): update docker/metadata-action action to v6

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

@@ -26,18 +26,7 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install
-
-      - name: Cache Astro Build Cache
-        uses: actions/cache@v5
-        with:
-          path: |
-            node_modules/.cache
-            .astro/cache
-          key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            ${{ runner.os }}-astro-cache-
 
       - name: Lint Code
         run: pnpm lint
@@ -73,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: |
@@ -112,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
@@ -124,8 +113,6 @@ jobs:
             COMMIT_SHA=${{ steps.version.outputs.commit }}
             IS_RELEASE=${{ steps.version.outputs.is_release }}
           file: ./Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
 
       - name: ntfy Success
         uses: niniyas/ntfy-action@master

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

@@ -26,18 +26,7 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install
-
-      - name: Cache Astro Build Cache
-        uses: actions/cache@v5
-        with:
-          path: |
-            node_modules/.cache
-            .astro/cache
-          key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            ${{ runner.os }}-astro-cache-
 
       - name: Lint Code
         run: pnpm lint
@@ -73,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: |
@@ -112,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
@@ -124,8 +113,6 @@ jobs:
             COMMIT_SHA=${{ steps.version.outputs.commit }}
             IS_RELEASE=${{ steps.version.outputs.is_release }}
           file: ./Dockerfile
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
 
       - name: ntfy Success
         uses: niniyas/ntfy-action@master

.gitea/workflows/test-build.yaml

@@ -28,18 +28,7 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
+        run: pnpm install
-
-      - name: Cache Astro Build Cache
-        uses: actions/cache@v5
-        with:
-          path: |
-            node_modules/.cache
-            .astro/cache
-          key: ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ github.sha }}
-          restore-keys: |
-            ${{ runner.os }}-astro-cache-${{ hashFiles('**/pnpm-lock.yaml') }}-
-            ${{ runner.os }}-astro-cache-
 
       - name: Lint Code
         run: pnpm lint

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.25.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.25.0",
+  "version": "2.19.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
@@ -33,7 +33,7 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/rss": "^4.0.15",
     "@astrojs/sitemap": "^3.7.0",
-    "@directus/sdk": "^21.2.0",
+    "@directus/sdk": "^21.1.0",
     "@giscus/react": "^3.1.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pajamas": "^1.2.15",
@@ -46,10 +46,9 @@
     "@types/unist": "^3.0.3",
     "astro": "^5.18.0",
     "astro-icon": "^1.1.5",
-    "marked": "^17.0.4",
+    "marked": "^17.0.3",
     "marked-shiki": "^1.2.1",
     "mdast-util-to-string": "^4.0.0",
-    "photoswipe": "^5.4.4",
     "preline": "^4.1.2",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -64,7 +63,7 @@
     "@eslint-react/eslint-plugin": "^2.13.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
-    "eslint": "^10.0.3",
+    "eslint": "^10.0.2",
     "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] transition-all duration-300 w-full px-4 py-3 mx-2 md:mx-8 mt-4"
+    class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
     aria-label="Global"
   >
     <div class="flex items-center justify-between ml-0">

src/components/cards/LargeBlogLeftCard.astro

@@ -2,30 +2,28 @@
 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, pubDate, img, imgAlt } = Astro.props;
+const { title, subTitle, url, img, imgAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
+<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto">
   <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"
+    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"
     href={url}
     data-astro-prefetch
   >
     <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"
+        class="rounded-2xl rounded-b-none md:rounded-2xl w-full h-full sm:max-h-80 md:max-h-90 object-cover"
         src={getDirectusImageURL(img)}
         alt={imgAlt}
         draggable="false"
@@ -42,21 +40,17 @@ const { title, subTitle, url, pubDate, 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="flex items-center justify-between w-full">
+      <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
-        <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">
-          <div class="button-text-title flex relative items-center text-center">
+          <span class="mr-2">
-            <span class="mr-2">
+            Read More
-              Read More
+          </span>
-            </span>
+          <Icon
-            <Icon
+            name="mdi:keyboard-arrow-right"
-              name="mdi:keyboard-arrow-right"
+            class="button-hover-arrow"
-              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,26 +2,25 @@
 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;
+  single?: boolean;
-  imgOne: string;
+  imgOne: any;
-  imgOneAlt: string;
+  imgOneAlt: any;
-  imgTwo?: string;
+  imgTwo?: any;
-  imgTwoAlt?: string;
+  imgTwoAlt?: any;
 }
 
-const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
+const { title, subTitle, url, single, imgOne, imgOneAlt, imgTwo, imgTwoAlt } = Astro.props;
 ---
 
-<div class="smooth-reveal flex flex-col px-4 py-10 mx-auto w-full">
+<div class="smooth-reveal flex flex-col px-5 py-10 mx-auto">
   <a
-    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"
+    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"
     href={url}
     data-astro-prefetch
   >
@@ -32,30 +31,25 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
       <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-base button-bg-teal inline-flex rounded-lg gap-x-2">
+        <div class="button-text-title flex relative items-center text-center">
-          <div class="button-text-title flex relative items-center text-center">
+          <span class="mr-2">
-            <span class="mr-2">
+            Read More
-              Read More
+          </span>
-            </span>
+          <Icon
-            <Icon
+            name="mdi:keyboard-arrow-right"
-              name="mdi:keyboard-arrow-right"
+            class="button-hover-arrow"
-              class="button-hover-arrow"
+          />
-            />
-          </div>
         </div>
-        <span class="card-text-description text-sm ml-auto">
-          {formatDate(pubDate)}
-        </span>
       </div>
     </div>
-    {!imgTwo ? (
+    {single ? (
     <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"
+        class="rounded-2xl rounded-b-none md:rounded-2xl w-full"
         src={getDirectusImageURL(imgOne)}
         alt={imgOneAlt}
-        draggable="false"
+        format="webp"
         loading="lazy"
         width="850"
         height="420"
@@ -63,42 +57,30 @@ const { title, subTitle, url, pubDate, imgOne, imgOneAlt, imgTwo, imgTwoAlt } =
       />
     </div>
     ) : (
-    <>
+    <div class="grid grid-cols-2 gap-4">
-      <div class="md:hidden">
+      <Image
-        <Image
+        class="rounded-xl w-full"
-          class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
+        src={getDirectusImageURL(imgOne)}
-          src={getDirectusImageURL(imgOne)}
+        alt={imgOneAlt}
-          alt={imgOneAlt}
+        draggable="false"
-          draggable="false"
+        format="webp"
-          loading="lazy"
+        loading="lazy"
-          width="850"
+        width="400"
-          height="420"
+        height="230"
-          inferSize={true}
+        inferSize={true}
-        />
+      />
-      </div>
+      <Image
-      <div class="hidden md:flex md:items-start">
+        class="rounded-xl w-full mt-4 lg:mt-10"
-        <Image
+        src={getDirectusImageURL(imgTwo)}
-          class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
+        alt={imgTwoAlt}
-          src={getDirectusImageURL(imgOne)}
+        draggable="false"
-          alt={imgOneAlt}
+        format="webp"
-          draggable="false"
+        loading="lazy"
-          loading="lazy"
+        width="400"
-          width="600"
+        height="230"
-          height="310"
+        inferSize={true}
-          inferSize={true}
+      />
-        />
+    </div>
-        <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/cards/LargeCategoryCard.astro

@@ -1,77 +0,0 @@
----
-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>

src/components/cards/LargeInvisibleCard.astro

@@ -1,59 +0,0 @@
----
-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>

src/components/sections/AllCategoriesSection.astro

@@ -1,31 +0,0 @@
----
-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>

src/components/sections/AllPostsSection.astro

@@ -1,20 +0,0 @@
----
-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>

src/components/sections/CategorySection.astro

@@ -1,7 +1,7 @@
 ---
 import { readItems } from '@directus/sdk';
 
-import type { Post } from '@lib/directusTypes';
+import type { Post, Category } from '@lib/directusTypes';
 
 import CategoryCard from '@components/cards/CategoryCard.astro';
 import directus from '@lib/directus';
@@ -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/components/sections/RecentPostsSection.astro

@@ -23,11 +23,7 @@ const { posts, title, subTitle } = Astro.props;
       </span>
     </div>
   </div>
-  <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
+  <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-    {posts.map((b) => (
+    {posts.map((b) => <BlogCard post={b} />)}
-      <div class="break-inside-avoid mb-6">
-        <BlogCard post={b} />
-      </div>
-    ))}
   </div>
 </section>

src/components/sections/SelectedPostsSection.astro

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

src/layouts/BaseLayout.astro

@@ -68,66 +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">
 
-    <!-- Main body -->
+      <Header />
-    <div id="reset-scroll" class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
-      <main>
 
-        <!-- Content -->
+      <main class="has-js scroll-fade-container min-h-screen">
-        <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
+        <slot />
-          <slot />
-        </div>
-
-        <!-- Footer -->
-        <Footer />
-        
       </main>
+
     </div>
 
+    <Footer />
+
   </body>
 </html>
 
 <script>
-  const resetScroll = () => {
+  document.addEventListener('astro:page-load', () => {
-    const scrollContainer = document.getElementById('reset-scroll');
+    const onScroll = () => {
-    if (scrollContainer) {
+      document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
-      scrollContainer.scrollTop = 0;
+      document.documentElement.classList.add('has-js');
-    }
+    };
-  };
+
-  resetScroll();
+    window.removeEventListener('scroll', onScroll);
-  document.addEventListener('astro:after-swap', resetScroll);
+    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 */
@@ -148,9 +149,9 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   }
 
   :global(.dark) .bg {
-    --bg-primary: #3b3836;
+    --bg-primary: #332f2e;
-    --bg-secondary: #332f2e;
+    --bg-secondary: #44403c;
-    --bg-tertiary: #44403c;
+    --bg-tertiary: #57534e;
   }
 
   .bg2 {

src/lib/directusTypes.ts

@@ -14,10 +14,6 @@ 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;
@@ -41,7 +37,7 @@ export type Post = {
   title: string;
   description: string;
   tags: string[];
-  category: Category;
+  category: string;
   selected: boolean;
   published: boolean;
   content: string;

src/pages/all.astro

@@ -1,109 +0,0 @@
----
-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>

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

@@ -6,7 +6,6 @@ import { marked } from 'marked';
 import markedShiki from 'marked-shiki';
 import { createHighlighter } from 'shiki';
 import { readItems, readSingleton } from '@directus/sdk';
-import 'photoswipe/style.css';
 
 import SocialShareButton from '@components/buttons/SocialShareButton.astro';
 import Logo from '@components/images/Logo.astro';
@@ -18,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,
@@ -28,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 || '');
 
@@ -180,40 +182,6 @@ const content = marked.parse(post.content || '');
 </BaseLayout>
 
 <script>
-  import PhotoSwipeLightbox from 'photoswipe/lightbox';
-  const prose = document.querySelector('.prose');
-  if (prose) {
-    const images = prose.querySelectorAll('img');
-    images.forEach((img) => {
-      if (img.closest('a')) return;
-      const link = document.createElement('a');
-      link.href = img.src;
-      link.dataset.pswpSrc = img.src;
-      link.dataset.pswpWidth = img.naturalWidth.toString();
-      link.dataset.pswpHeight = img.naturalHeight.toString();
-      link.target = '_blank';
-      link.classList.add('pswp-link');
-
-      img.parentNode?.insertBefore(link, img);
-      link.appendChild(img);
-
-      if (!img.complete) {
-        img.onload = () => {
-          link.dataset.pswpWidth = img.naturalWidth.toString();
-          link.dataset.pswpHeight = img.naturalHeight.toString();
-        };
-      }
-    });
-
-    const lightbox = new PhotoSwipeLightbox({
-      gallery: prose,
-      children: 'a.pswp-link',
-      pswpModule: () => import('photoswipe'),
-    });
-
-    lightbox.init();
-  }
-
   // Add smooth reveal animations for content after loading
   document.addEventListener('astro:page-load', () => {
     const animateContent = () => {

src/pages/blog/index.astro

@@ -6,7 +6,6 @@ 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';
 
@@ -21,7 +20,7 @@ const posts = await directus.request(
   })
 );
 
-const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 4);
+const selectedPosts: Post[] = posts.filter((p) => p.selected).slice(0, 3);
 const recentPosts: Post[] = posts.filter(
   (p) => !selectedPosts.some((selected) => selected.slug === p.slug)
   ).slice(0, 9);
@@ -61,8 +60,6 @@ const recentPosts: Post[] = posts.filter(
     title="Recent Posts"
   />
 
-  <AllPostsSection />
-  
 </BaseLayout>
 
 <script>

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;
   });
 ---
 
@@ -65,66 +65,11 @@ 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="columns-1 sm:columns-2 lg:columns-3 gap-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
       {categoriesPosts.map((b) => 
-      <div class="break-inside-avoid mb-6">
+      <BlogCard post={b} />
-        <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>

src/pages/categories/index.astro

@@ -3,7 +3,6 @@ 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';
 
@@ -41,8 +40,6 @@ const global = await directus.request(readSingleton('site_global'));
 
   <CategorySection />
 
-  <AllCategoriesSection />
-
 </BaseLayout>
 
 <script>

src/pages/index.astro

@@ -7,7 +7,6 @@ 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';
@@ -74,8 +73,6 @@ 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."

src/support/paths.ts

@@ -0,0 +1,21 @@
+import { join } from 'node:path';
+
+function resolveFilePath(path: string) {
+  if (path.startsWith('/')) {
+    return resolveFilePathPublic(path);
+  }
+
+  return resolveFilePathInternal(path);
+}
+
+function resolveFilePathPublic(path: string) {
+  return join(process.cwd(), path);
+}
+
+function resolveFilePathInternal(path: string) {
+  const normalizePath = path.startsWith('@') ? path.replace('@', '') : path;
+
+  return join(process.cwd(), 'src/', normalizePath);
+}
+
+export { resolveFilePath, resolveFilePathPublic, resolveFilePathInternal };