chore(deps): update actions/cache action to v5

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

@@ -26,7 +26,18 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - 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
@@ -113,6 +124,8 @@ 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,7 +26,18 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - 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
@@ -113,6 +124,8 @@ 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,7 +28,18 @@ jobs:
           cache: pnpm
 
       - name: Install Dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - 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.23.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.23.0",
+  "version": "2.24.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.1.0",
+    "@directus/sdk": "^21.2.0",
     "@giscus/react": "^3.1.0",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/pajamas": "^1.2.15",
@@ -46,7 +46,7 @@
     "@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.2",
@@ -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/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="flex items-center justify-between w-full">
-        <div class="button-text-title flex relative items-center text-center">
+        <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
-          <span class="mr-2">
+          <div class="button-text-title flex relative items-center text-center">
-            Read More
+            <span class="mr-2">
-          </span>
+              Read More
-          <Icon
+            </span>
-            name="mdi:keyboard-arrow-right"
+            <Icon
-            class="button-hover-arrow"
+              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;
+  pubDate: Date;
-  imgOne: any;
+  imgOne: string;
-  imgOneAlt: any;
+  imgOneAlt: string;
-  imgTwo?: any;
+  imgTwo?: string;
-  imgTwoAlt?: any;
+  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="flex items-center justify-between w-full">
-        <div class="button-text-title flex relative items-center text-center">
+        <div class="button-base button-bg-teal inline-flex rounded-lg gap-x-2">
-          <span class="mr-2">
+          <div class="button-text-title flex relative items-center text-center">
-            Read More
+            <span class="mr-2">
-          </span>
+              Read More
-          <Icon
+            </span>
-            name="mdi:keyboard-arrow-right"
+            <Icon
-            class="button-hover-arrow"
+              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
+      <div class="md:hidden">
-        class="rounded-xl w-full"
+        <Image
-        src={getDirectusImageURL(imgOne)}
+          class="rounded-2xl rounded-b-none shadow-2xl w-full h-full sm:max-h-80 object-cover"
-        alt={imgOneAlt}
+          src={getDirectusImageURL(imgOne)}
-        draggable="false"
+          alt={imgOneAlt}
-        format="webp"
+          draggable="false"
-        loading="lazy"
+          loading="lazy"
-        width="400"
+          width="850"
-        height="230"
+          height="420"
-        inferSize={true}
+          inferSize={true}
-      />
+        />
-      <Image
+      </div>
-        class="rounded-xl w-full mt-4 lg:mt-10"
+      <div class="hidden md:flex md:items-start">
-        src={getDirectusImageURL(imgTwo)}
+        <Image
-        alt={imgTwoAlt}
+          class="rounded-xl z-10 shadow-2xl w-3/5 h-full object-cover"
-        draggable="false"
+          src={getDirectusImageURL(imgOne)}
-        format="webp"
+          alt={imgOneAlt}
-        loading="lazy"
+          draggable="false"
-        width="400"
+          loading="lazy"
-        height="230"
+          width="600"
-        inferSize={true}
+          height="310"
-      />
+          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/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">
+  <div class="columns-1 sm:columns-2 lg:columns-3 gap-6">
-    {posts.map((b) => <BlogCard post={b} />)}
+    {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

@@ -79,8 +79,8 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     <Header />
 
     <!-- Main body -->
-    <div class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
+    <div id="reset-scroll" class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
-      <main class="pt-20">
+      <main>
 
         <!-- Content -->
         <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
@@ -96,6 +96,17 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
   </body>
 </html>
 
+<script>
+  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 */
   .mask-container {

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);