add project image shadow and page size var

Author: nemanjam

src/components/ProjectCard.astro

@@ -30,7 +30,7 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
     {...IMAGE_SIZES.RESPONSIVE.PROJECT_CARD}
     src={heroImage}
     alt={heroAlt}
-    class="rounded-t-box mb-2"
+    class="rounded-t-box shadow shadow-base-300 mb-2"
   />
 
   <h4 class="b-h4 break-words line-clamp-2 mb-0">

src/config/client.ts

@@ -14,6 +14,7 @@ const configClientData: ConfigClientType = {
   PLAUSIBLE_DOMAIN,
   PAGE_SIZE_POST_CARD: 3,
   PAGE_SIZE_POST_CARD_SMALL: 6,
+  PAGE_SIZE_PROJECT_CARD: 6,
   MORE_POSTS_COUNT: 3,
   DEFAULT_MODE: 'light',
   DEFAULT_THEME: 'default-light',

src/content/project/2024/02-13-example-project-1/index.mdx

@@ -14,4 +14,4 @@ import FlowersImage from '../../../../content/project/2024/02-13-example-project
 
 # This is the first project
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={FlowersImage} alt="" />
+<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={FlowersImage} class="shadow-lg shadow-base-300" alt="" />

src/content/project/2024/03-15-example-project-2/index.mdx

@@ -16,4 +16,4 @@ import BicycleImage from '../../../../content/project/2024/03-15-example-project
 
 # This is the second project
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={BicycleImage} alt="" />
+<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={BicycleImage} class="shadow-lg shadow-base-300" alt="" />

src/content/project/2024/05-16-example-project-3/index.mdx

@@ -13,4 +13,4 @@ import MorningImage from '../../../../content/project/2024/05-16-example-project
 
 # This is the third project
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={MorningImage} alt="" />
+<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={MorningImage} class="shadow-lg shadow-base-300" alt="" />

src/content/project/2024/12-09-hackernews-new-jobs/index.mdx

@@ -12,7 +12,7 @@ import HackerNewsNewJobsImage from '../../../../content/project/2024/12-09-hacke
 
 # HackerNews new jobs
 
-<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={HackerNewsNewJobsImage} alt="Homepage HackerNews new jobs" />
+<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={HackerNewsNewJobsImage} class="shadow-lg shadow-base-300" alt="Homepage HackerNews new jobs" />
 
 ## Overview
 

src/pages/projects/[...page].astro

@@ -11,7 +11,7 @@ import type { GetStaticPathsOptions, Page } from 'astro';
 
 export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
   const sortedProjects: Project[] = await getAllProjects();
-  const pageSize = CONFIG_CLIENT.PAGE_SIZE_POST_CARD;
+  const pageSize = CONFIG_CLIENT.PAGE_SIZE_PROJECT_CARD;
 
   const pagination = paginate(sortedProjects, { pageSize });
   pagination.push({ params: { page: '1' }, props: pagination[0].props });

src/schemas/config.ts

@@ -46,6 +46,7 @@ export const configClientSchema = processEnvSchema
       SITE_DESCRIPTION: z.string().min(1),
       PAGE_SIZE_POST_CARD: z.number(),
       PAGE_SIZE_POST_CARD_SMALL: z.number(),
+      PAGE_SIZE_PROJECT_CARD: z.number(),
       MORE_POSTS_COUNT: z.number(),
       DEFAULT_MODE: z.enum(modeValues), // check that theme and mode match
       DEFAULT_THEME: z.enum(themeValues),