Merge branch 'dev' into feat/116-User-Dashboard-Password-Settings-Page

.github/workflows/lint.yml

@@ -15,7 +15,4 @@ jobs:
         with:
           version: 9
       - run: pnpm install
-      - uses: reviewdog/action-eslint@v1
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          eslint_flags: ". --ext js,jsx,ts,tsx --ignore-path=.gitignore"
+      - run: pnpm lint

app/components/BlogCards.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+interface BlogCardProps {
+  title: string;
+  description: string;
+  date: string;
+  authorName: string;
+  authorProfilePicture: string;
+  tag: string;
+  timeOfReading: string;
+  blogImage: string;
+  link: string;
+}
+
+const BlogCard: React.FC<BlogCardProps> = ({
+  title,
+  description,
+  date,
+  authorName,
+  authorProfilePicture,
+  tag,
+  timeOfReading,
+  blogImage,
+  link,
+}) => {
+  return (
+    <div className="max-w-sm lg:max-w-full lg:flex lg:flex-row rounded overflow-hidden shadow-lg m-4">
+      <img className="w-full lg:w-1/3 lg:order-2" src={blogImage} alt={title} />
+      <div className="p-4 lg:w-2/3 lg:order-1">
+        <div className="flex items-center mb-2">
+          <span className="inline-block w-3 h-3 rounded-full bg-gray-400 mr-2"></span>
+          <span className="text-sm font-semibold text-gray-700">{tag}</span>
+        </div>
+        <div>
+          <a href={link} className="text-black hover:text-blue-800">
+            <h3 className="font-bold text-xl mb-2">{title}</h3>
+          </a>
+          <p className="text-gray-700 text-base mb-4">{description}</p>
+        </div>
+        <div className="flex justify-between text-gray-500 text-sm mb-4">
+          <span>{date}</span>
+          <span>{timeOfReading} mins Read</span>
+        </div>
+        <div className="flex items-center">
+          <img
+            className="w-10 h-10 rounded-full mr-4"
+            src={authorProfilePicture}
+            alt={authorName}
+          />
+          <div className="text-sm">
+            <p className="text-gray-900 leading-none">{authorName}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

docker/development/Dockerfile

@@ -1,39 +1,44 @@
 # Stage 1: Build
 FROM node:20-alpine AS builder
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set working directory
 WORKDIR /app
 
 # Install dependencies
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
 
 # Copy all files
 COPY . .
 
 # Build the application
-RUN npm run build
+RUN pnpm run build
 
 # Stage 2: Production Image
 FROM node:20-alpine AS runner
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set NODE_ENV to production
 ENV NODE_ENV=production
 
 # Set working directory
 WORKDIR /app
 
 # Copy only necessary files from build stage
-COPY --from=builder /app/package.json /app/package-lock.json ./
+COPY --from=builder /app/package.json /app/pnpm-lock.yaml ./
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/public ./public
 
 # Install only production dependencies
-RUN npm install --production
+RUN pnpm install --prod
 
 # Expose the port the app runs on
 EXPOSE 3000
 
 # Command to run the application
-CMD ["npm", "start"]
-
+CMD ["pnpm", "start"]

docker/prod/Dockerfile

@@ -1,39 +1,44 @@
 # Stage 1: Build
 FROM node:20-alpine AS builder
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set working directory
 WORKDIR /app
 
 # Install dependencies
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
 
 # Copy all files
 COPY . .
 
 # Build the application
-RUN npm run build
+RUN pnpm run build
 
 # Stage 2: Production Image
 FROM node:20-alpine AS runner
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set NODE_ENV to production
 ENV NODE_ENV=production
 
 # Set working directory
 WORKDIR /app
 
 # Copy only necessary files from build stage
-COPY --from=builder /app/package.json /app/package-lock.json ./
+COPY --from=builder /app/package.json /app/pnpm-lock.yaml ./
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/public ./public
 
 # Install only production dependencies
-RUN npm install --production
+RUN pnpm install --prod
 
 # Expose the port the app runs on
 EXPOSE 3000
 
 # Command to run the application
-CMD ["npm", "start"]
-
+CMD ["pnpm", "start"]

docker/staging/Dockerfile

@@ -1,38 +1,44 @@
 # Stage 1: Build
 FROM node:20-alpine AS builder
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set working directory
 WORKDIR /app
 
 # Install dependencies
-COPY package.json package-lock.json ./
-RUN npm install
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
 
 # Copy all files
 COPY . .
 
 # Build the application
-RUN npm run build
+RUN pnpm run build
 
 # Stage 2: Production Image
 FROM node:20-alpine AS runner
 
+# Install pnpm
+RUN npm install -g pnpm
+
 # Set NODE_ENV to production
 ENV NODE_ENV=production
 
 # Set working directory
 WORKDIR /app
 
 # Copy only necessary files from build stage
-COPY --from=builder /app/package.json /app/package-lock.json ./
+COPY --from=builder /app/package.json /app/pnpm-lock.yaml ./
 COPY --from=builder /app/build ./build
 COPY --from=builder /app/public ./public
 
 # Install only production dependencies
-RUN npm install --production
+RUN pnpm install --prod
 
 # Expose the port the app runs on
 EXPOSE 3000
 
 # Command to run the application
-CMD ["npm", "start"]
+CMD ["pnpm", "start"]