feat: improve category cards spacing, overflow, and add fade effect to edges

.gitea/workflows/release-image.yaml

@@ -8,44 +8,7 @@ on:
   workflow_dispatch:
 
 jobs:
-  semantic-release:
-    runs-on: ubuntu-js
-    outputs:
-      new-release-published: ${{ steps.semantic.outputs.new-release-published }}
-      new-release-version: ${{ steps.semantic.outputs.new-release-version }}
-      new-release-git-tag: ${{ steps.semantic.outputs.new-release-git-tag }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v6
-        with:
-          fetch-depth: 0
-          token: ${{ secrets.BOT_TOKEN }}
-
-      - name: Set up Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24.14.0
-
-      - name: Set up Bun
-        uses: oven-sh/setup-bun@v2
-        with:
-          bun-version: 1.3.10
-
-      - name: Install Dependencies
-        run: bun install --frozen-lockfile
-
-      - name: Run Semantic Release
-        id: semantic
-        env:
-          GITEA_TOKEN: ${{ secrets.BOT_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
-          NODE_PATH: ${{ github.workspace }}/node_modules
-        run: |
-          bun run semantic-release
-
   build:
-    needs: semantic-release
-    if: ${{ needs.semantic-release.outputs.new-release-published == 'true' }}
     runs-on: ubuntu-js
     steps:
       - name: Checkout
@@ -98,8 +61,6 @@ jobs:
           image: true
 
   guarddog:
-    needs: semantic-release
-    if: ${{ needs.semantic-release.outputs.new-release-published == 'true' }}
     runs-on: ubuntu-js
     steps:
       - name: Checkout
@@ -136,9 +97,45 @@ jobs:
           actions: '[{"action": "view", "label": "Open Gitea", "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/actions?workflow=release-image.yaml", "clear": true}]'
           image: true
 
+  semantic-release:
+    needs: [ build, guarddog ]
+    runs-on: ubuntu-js
+    outputs:
+      new-release-published: ${{ steps.semantic.outputs.new-release-published }}
+      new-release-version: ${{ steps.semantic.outputs.new-release-version }}
+      new-release-git-tag: ${{ steps.semantic.outputs.new-release-git-tag }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.BOT_TOKEN }}
+
+      - name: Set up Node
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24.14.0
+
+      - name: Set up Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.10
+
+      - name: Install Dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Run Semantic Release
+        id: semantic
+        env:
+          GITEA_TOKEN: ${{ secrets.BOT_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.BOT_TOKEN }}
+          NODE_PATH: ${{ github.workspace }}/node_modules
+        run: |
+          bun run semantic-release
+
   release-harbor:
     runs-on: ubuntu-js
-    needs: [semantic-release, build, guarddog, ]
+    needs: semantic-release
     if: ${{ needs.semantic-release.outputs.new-release-published == 'true' }}
     steps:
       - name: Checkout
@@ -240,13 +237,10 @@ jobs:
 
   release-gitea:
     runs-on: ubuntu-js
-    needs: [ semantic-release, build, guarddog, release-harbor ]
+    needs: [ semantic-release, release-harbor ]
     if: |
       always() && 
-      needs.semantic-release.result == 'success' &&
+      needs.semantic-release.outputs.new-release-published == 'true'
-      needs.semantic-release.outputs.new-release-published == 'true' &&
-      needs.build.result == 'success' &&
-      needs.guarddog.result == 'success'
     steps:
       - name: Checkout
         uses: actions/checkout@v6

Dockerfile

@@ -1,4 +1,6 @@
-FROM dhi.io/bun:1.3.10-debian13-dev AS builder
+ARG REGISTRY=dhi.io
+FROM ${REGISTRY}/bun:1.3.10-alpine3.22-dev AS builder
+
 WORKDIR /app
 
 COPY package.json bun.lock ./
@@ -15,14 +17,14 @@ FROM build-deps AS build
 COPY . .
 RUN bun run build
 
-FROM dhi.io/bun:1.3.10-alpine3.22 AS runtime
+FROM ${REGISTRY}/bun:1.3.10-alpine3.22 AS runtime
 WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
 ARG APP_VERSION=latest
-ARG APP_VERSION
 
+ENV NODE_ENV=production
 ENV HOST=0.0.0.0
 ENV PORT=4321
 

astro.config.mjs

@@ -13,8 +13,6 @@ import { getSiteURL } from './src/support/url';
 export default defineConfig({
   site: getSiteURL(),
 
-  security: { csp: true },
-
   image: {
     remotePatterns: [
       { protocol: 'https', hostname: '*.alexlebens.net' },

package.json

@@ -19,8 +19,10 @@
   },
   "scripts": {
     "dev": "astro dev",
+    "full-dev": "rm -rf dist node_modules .astro && bun install && astro build && astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "full-preview": "rm -rf dist node_modules .astro && bun install && astro build && astro preview",
     "astro": "astro",
     "format": "prettier --write  \"**/*.{js,jsx,ts,tsx,md,mdx,astro}\"",
     "lint": "eslint \"src/**/*.{js,ts,jsx,tsx,astro}\"",

src/components/cards/CategoryCard.astro

@@ -22,8 +22,8 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
     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="mask-fade-edges 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="flex flex-row items-center mb-4 shrink-0">
           <div class="card-hover-icon-scale shrink-0 mr-3">
             <Logo
               srcLight={getDirectusImageURL(logoLight)}
@@ -35,12 +35,12 @@ const { slug, title, description, logoLight, logoDark, count, publishDate } = As
             {title}
           </h3>
         </div>
-        <div>
+        <div class="overflow-hidden">
-          <p class="card-text-description mb-4">
+          <p class="card-text-description line-clamp-3">
             {description}
           </p>
         </div>
-        <div class="card-text-description flex items-center justify-between text-xs mt-auto pt-1 md:pt-2">
+        <div class="card-text-description flex shrink-0 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"

src/components/sections/RecentPostsSection.astro

@@ -18,7 +18,7 @@ const global = await directus.request(readSingleton('site_global'));
 const { posts, title, subTitle } = Astro.props;
 ---
 
-<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-8">
+<section class="max-w-340 2xl:max-w-full px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto mb-2 md:mb-4">
   <div class="text-center max-w-2xl mx-auto mb-10 lg:mb-14">
     <h1 class="smooth-reveal card-text-header block">
       {title}

src/components/sections/WeatherSection.astro

@@ -20,7 +20,7 @@ const { forecastDays, error } = await getFiveDayForecast(latitude, longitude, ti
   </div>
   {error ? (
   <div class="card-base p-10 text-accent text-center">
-    Sorry, {error.toLowerCase}
+    Sorry, {error.toLowerCase()}
   </div>
   ) : (
   <div class="flex flex-wrap justify-center gap-4 lg:gap-6">

src/pages/index.astro

@@ -11,6 +11,10 @@ import GiteaSection from '@components/sections/GiteaSection.astro';
 import BaseLayout from '@layouts/BaseLayout.astro';
 import directus from '@lib/directus';
 
+// Weather section server island does not seem to load under Astro 6, setting the whole page for server
+// side rendering for now.
+export const prerender = false
+
 const global = await directus.request(readSingleton('site_global'));
 const weather = await directus.request(readSingleton('site_weather'));
 const posts = await directus.request(
@@ -55,6 +59,12 @@ const recentPosts = posts
 
   <FeatureSection />
 
+  <RecentPostsSection
+    posts={recentPosts}
+    title="Latest Posts"
+    subTitle="Checkout my most recent thoughts here"
+  />
+
   <WeatherSection
     server:defer
     latitude={weather.latitude}
@@ -63,12 +73,6 @@ const recentPosts = posts
     timezone={weather.timezone}
   />
 
-  <RecentPostsSection
-    posts={recentPosts}
-    title="Latest Posts"
-    subTitle="Checkout my most recent thoughts here"
-  />
-
   <GiteaSection
     title="Follow me on Gitea"
     subTitle="I love open source and have my code availabile on my Gitea server."

src/styles/utilities.css

@@ -138,3 +138,15 @@
          bg-neutral-100 dark:bg-neutral-800
          shadow-xs dark:shadow-md
 }
+
+@utility mask-fade-edges {
+  -webkit-mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+  mask-image: 
+    linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
+    linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
+
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
+}