Update Lighthouse CI workflow for pull requests

.env.test.example

@@ -0,0 +1,16 @@
+# Test Environment Variables
+# Copy this file to .env.test and fill in your values
+
+# WordPress API Configuration
+WORDPRESS_API_URL=https://wp.keploy.io/graphql
+NEXT_PUBLIC_WORDPRESS_API_URL=https://wp.keploy.io/graphql
+
+# Test Configuration
+# Base URL for the application under test
+BASE_URL=http://localhost:3000/blog
+
+# Timeouts (milliseconds)
+TEST_TIMEOUT=30000
+TEST_EXPECT_TIMEOUT=10000
+TEST_ACTION_TIMEOUT=15000
+TEST_NAVIGATION_TIMEOUT=30000

.github/workflows/lighthouse_comment.yml

@@ -1,29 +1,51 @@
-name: Lighthouse – Comment
+name: Lighthouse CI
 
 on:
-  workflow_run:
-    workflows: ["Lighthouse – Run"]
-    types:
-      - completed
+  workflow_dispatch:
 
 permissions:
-  issues: write
+  contents: read
   pull-requests: write
+  issues: write
 
 jobs:
-  comment:
+  lighthouse:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Download Lighthouse comment artifact
-        uses: actions/download-artifact@v4
+      # 1. Checkout code
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      # 2. Setup Node
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      # 3. Install dependencies (if needed)
+      - name: Install dependencies
+        run: npm install
+
+      # 4. Build project (if React/Vite)
+      - name: Build project
+        run: npm run build
+
+      # 5. Run Lighthouse CI
+      - name: Run Lighthouse CI
+        uses: treosh/lighthouse-ci-action@v11
         with:
-          name: lighthouse-comment
-          path: .
+          urls: |
+            https://your-live-site-url.com
+          uploadArtifacts: true
 
-      - name: Ensure comment file exists
-        run: test -f lighthouse-comment.md
+      # 6. Generate comment file
+      - name: Create Lighthouse comment
+        run: |
+          echo "## 🚀 Lighthouse Report" > lighthouse-comment.md
+          echo "Check performance report in artifacts." >> lighthouse-comment.md
 
+      # 7. Post comment on PR
       - name: Post Lighthouse comment
         uses: peter-evans/create-or-update-comment@v4
         with:

.github/workflows/lighthouse_runner.yml

@@ -72,11 +72,4 @@ jobs:
             http://localhost:3000/blog
           uploadArtifacts: true
 
-      - name: Generate Lighthouse comment
-        run: node .github/scripts/lighthouse-report.js
 
-      - name: Upload Lighthouse comment artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: lighthouse-comment
-          path: lighthouse-comment.md

.github/workflows/playwright.yml

@@ -0,0 +1,54 @@
+name: Playwright E2E Tests
+
+on:
+  pull_request:
+    branches: [ main, master ]
+  push:
+    branches: [ main, master ]
+
+jobs:
+  test:
+    name: E2E Tests (chromium)
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: npm run test:e2e -- --project=chromium
+        env:
+          CI: true
+          BASE_URL: http://localhost:3000/blog
+
+      - name: Upload test results
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results-chromium
+          path: test-results/
+          retention-days: 7
+
+      - name: Upload test report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-chromium
+          path: playwright-report/
+          retention-days: 7
+

.gitignore

@@ -27,7 +27,9 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
-.env*
+.env
+.env*.local
+.env.test
 
 # vercel
 .vercel
@@ -37,3 +39,11 @@ yarn-error.log*
 next-env.d.ts
 
 .early.coverage
+
+# Playwright
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

components/AuthorCard.tsx

@@ -71,6 +71,7 @@ const AuthorCard: React.FC<AuthorCardProps> = ({
 
   return (
     <div
+      data-testid="author-card"
       className="rounded-xl overflow-hidden bg-white"
       style={{ border: "1.5px solid #e5e7eb" }}
     >

components/BlogSidebar.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { useRouter } from "next/router";
 import {
   FaFacebook,
@@ -103,46 +104,62 @@ function SidebarShare() {
 
 /* ── Ad / CTA Banner ── */
 function SidebarAdBanner() {
+  // Image size (adjust as needed)
+  // Remove fixed width/height from container, let image set size
+  const [imgError, setImgError] = React.useState(false);
   return (
     <div
-      className="rounded-2xl p-5"
-      style={{
-        backgroundColor: "#FFF4EE",
-        border: "1.5px solid #FF914D",
-      }}
+      className="rounded-2xl flex items-center justify-center bg-[#FFF4EE] border border-[#FF914D]"
+      style={{ padding: 0, overflow: 'hidden', position: 'relative', maxWidth: 320, margin: '0 auto' }}
     >
-      <h4
-        className="font-bold text-base leading-snug mb-1.5"
-        style={{
-          fontFamily: "'DM Sans', sans-serif",
-          color: "#1D2022",
-        }}
-      >
-        Try Keploy for free
-      </h4>
-
-      <p
-        className="text-sm leading-relaxed mb-3"
-        style={{
-          fontFamily: "'DM Sans', sans-serif",
-          color: "#4b5563",
-        }}
-      >
-        Generate test cases and data mocks with one click. Reduce unit test development time by 90%.
-      </p>
-
-      <Link
-        href="https://app.keploy.io/signin"
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex items-center gap-1 font-semibold text-sm transition-colors duration-150 hover:opacity-80"
-        style={{
-          fontFamily: "'DM Sans', sans-serif",
-          color: "#FF6D41",
-        }}
-      >
-        Sign up <span aria-hidden="true">→</span>
-      </Link>
+      {!imgError ? (
+        <Link
+          href="https://app.keploy.io/signin"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Sign up for Keploy"
+          style={{ display: 'block', width: '100%' }}
+        >
+          <Image
+            src="/blog/images/keploy-ad-banner.jpg"
+            alt="Keploy Ad Banner"
+            width={320}
+            height={400}
+            sizes="320px"
+            className="transition-shadow duration-200 ease-in-out cursor-pointer hover:shadow-lg"
+            style={{ borderRadius: '16px', width: '100%', height: 'auto', display: 'block', transition: 'box-shadow 0.2s' }}
+            loading="lazy"
+            onError={() => setImgError(true)}
+          />
+        </Link>
+      ) : (
+        <div
+          className="rounded-2xl p-5 w-full h-full flex flex-col justify-center"
+          style={{ backgroundColor: "#FFF4EE" }}
+        >
+          <h4
+            className="font-bold text-base leading-snug mb-1.5"
+            style={{ fontFamily: "'DM Sans', sans-serif", color: "#1D2022" }}
+          >
+            Try Keploy for free
+          </h4>
+          <p
+            className="text-sm leading-relaxed mb-3"
+            style={{ fontFamily: "'DM Sans', sans-serif", color: "#4b5563" }}
+          >
+            Generate test cases and data mocks with one click. Reduce unit test development time by 90%.
+          </p>
+          <Link
+            href="https://app.keploy.io/signin"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 font-semibold text-sm transition-colors duration-150 hover:opacity-80"
+            style={{ fontFamily: "'DM Sans', sans-serif", color: "#FF6D41" }}
+          >
+            Sign up <span aria-hidden="true">→</span>
+          </Link>
+        </div>
+      )}
     </div>
   );
 }

components/NotFoundPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import Header from "./header";
 import Container from "./container";
 import Image from "next/image";
@@ -48,18 +48,21 @@ const NotFoundPage = ({ latestPosts, communityPosts, technologyPosts }: NotFound
     setSearchTerm(event.target.value);
   };
 
-  const allPosts = [
+  const allPosts = useMemo(() => [
     ...(latestPosts?.edges || []),
     ...(communityPosts?.edges || []),
     ...(technologyPosts?.edges || [])
-  ].filter((post, index, self) => 
+  ].filter((post, index, self) =>
     index === self.findIndex(p => p.node.slug === post.node.slug)
-  );
+  ), [latestPosts, communityPosts, technologyPosts]);
 
-  const filteredAllPosts = allPosts.filter(({ node }) => 
-    node.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    node.excerpt.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredAllPosts = useMemo(() => {
+    const term = searchTerm.toLowerCase();
+    return allPosts.filter(({ node }) =>
+      (node.title || '').toLowerCase().includes(term) ||
+      (node.excerpt || '').toLowerCase().includes(term)
+    );
+  }, [allPosts, searchTerm]);
 
   return (
     <>