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

Dockerfile

@@ -21,11 +21,10 @@ 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
-COPY --from=builder /app/package.json ./
 
 ARG APP_VERSION=latest
-ARG APP_VERSION
 
+ENV NODE_ENV=production
 ENV HOST=0.0.0.0
 ENV PORT=4321
 

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="flex flex-row items-center mb-4">
+      <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 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>
-          <p class="card-text-description mb-4">
+        <div class="overflow-hidden">
+          <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;
+}