From 62a704661265fef55ad84807fd84964dc22900d7 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Fri, 12 Sep 2025 16:16:56 -0600
Subject: [PATCH] Fix performance tests

---
 .gitea/workflows/ci.yaml |   3 +-
 app/blog/page.js         |  61 +++++++++++++++
 performance-budgets.json | 162 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 225 insertions(+), 1 deletion(-)
 create mode 100644 app/blog/page.js

diff --git a/.gitea/workflows/ci.yaml b/.gitea/workflows/ci.yaml
index 77d2cf1..9d4e29a 100644
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@@ -316,7 +316,8 @@ jobs:
           "$CHROME_PATH" --version
 
           # Run LHCI with arm64 Node + arm64 Chrome
-          npx lhci autorun --chrome-path="$CHROME_PATH" --collect.url=http://$HOST:$PORT/
+          # Test homepage and blog pages
+          npx lhci autorun --chrome-path="$CHROME_PATH" --collect.url=http://$HOST:$PORT/ --collect.url=http://$HOST:$PORT/blog --collect.url=http://$HOST:$PORT/blog/resolving-active-conflicts
 
           kill "$SVPID" 2>/dev/null || true
         env:
diff --git a/app/blog/page.js b/app/blog/page.js
new file mode 100644
index 0000000..7953ccf
--- /dev/null
+++ b/app/blog/page.js
@@ -0,0 +1,61 @@
+import { getAllBlogPosts } from "../../lib/content";
+import Header from "../components/Header";
+import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
+import ContentContainer from "../components/ContentContainer";
+
+export const metadata = {
+  title: "Blog - CommunityRule",
+  description:
+    "Learn about community governance, decision-making, and building successful organizations.",
+  openGraph: {
+    title: "Blog - CommunityRule",
+    description:
+      "Learn about community governance, decision-making, and building successful organizations.",
+    url: "https://communityrule.com/blog",
+    siteName: "CommunityRule",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Blog - CommunityRule",
+    description:
+      "Learn about community governance, decision-making, and building successful organizations.",
+  },
+};
+
+export default function BlogPage() {
+  const posts = getAllBlogPosts();
+
+  // Create slug order for consistent icon cycling
+  const slugOrder = posts.map((post) => post.slug);
+
+  return (
+    <div className="min-h-screen bg-[#F4F3F1]">
+      <Header />
+      <main className="pt-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+          <div className="text-center mb-12">
+            <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-content-default-primary)] mb-4">
+              Blog
+            </h1>
+            <p className="text-lg text-[var(--color-content-default-secondary)] max-w-2xl mx-auto">
+              Learn about community governance, decision-making, and building
+              successful organizations.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {posts.map((post, index) => (
+              <ContentThumbnailTemplate
+                key={post.slug}
+                post={post}
+                slugOrder={slugOrder}
+                variant={index % 2 === 0 ? "vertical" : "horizontal"}
+              />
+            ))}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/performance-budgets.json b/performance-budgets.json
index b545e77..6a5df61 100644
--- a/performance-budgets.json
+++ b/performance-budgets.json
@@ -180,6 +180,168 @@
             "budget": 5
           }
         ]
+      },
+      {
+        "path": "/blog",
+        "timings": [
+          {
+            "metric": "first-contentful-paint",
+            "budget": 2000
+          },
+          {
+            "metric": "largest-contentful-paint",
+            "budget": 2500
+          },
+          {
+            "metric": "first-meaningful-paint",
+            "budget": 2000
+          },
+          {
+            "metric": "speed-index",
+            "budget": 3000
+          },
+          {
+            "metric": "interactive",
+            "budget": 3000
+          },
+          {
+            "metric": "total-blocking-time",
+            "budget": 300
+          },
+          {
+            "metric": "cumulative-layout-shift",
+            "budget": 0.1
+          },
+          {
+            "metric": "max-potential-fid",
+            "budget": 130
+          }
+        ],
+        "resourceSizes": [
+          {
+            "resourceType": "script",
+            "budget": 300
+          },
+          {
+            "resourceType": "total",
+            "budget": 500
+          },
+          {
+            "resourceType": "image",
+            "budget": 100
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 50
+          },
+          {
+            "resourceType": "font",
+            "budget": 50
+          }
+        ],
+        "resourceCounts": [
+          {
+            "resourceType": "script",
+            "budget": 10
+          },
+          {
+            "resourceType": "total",
+            "budget": 50
+          },
+          {
+            "resourceType": "image",
+            "budget": 20
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 5
+          },
+          {
+            "resourceType": "font",
+            "budget": 5
+          }
+        ]
+      },
+      {
+        "path": "/blog/*",
+        "timings": [
+          {
+            "metric": "first-contentful-paint",
+            "budget": 2000
+          },
+          {
+            "metric": "largest-contentful-paint",
+            "budget": 2500
+          },
+          {
+            "metric": "first-meaningful-paint",
+            "budget": 2000
+          },
+          {
+            "metric": "speed-index",
+            "budget": 3000
+          },
+          {
+            "metric": "interactive",
+            "budget": 3000
+          },
+          {
+            "metric": "total-blocking-time",
+            "budget": 300
+          },
+          {
+            "metric": "cumulative-layout-shift",
+            "budget": 0.1
+          },
+          {
+            "metric": "max-potential-fid",
+            "budget": 130
+          }
+        ],
+        "resourceSizes": [
+          {
+            "resourceType": "script",
+            "budget": 300
+          },
+          {
+            "resourceType": "total",
+            "budget": 500
+          },
+          {
+            "resourceType": "image",
+            "budget": 100
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 50
+          },
+          {
+            "resourceType": "font",
+            "budget": 50
+          }
+        ],
+        "resourceCounts": [
+          {
+            "resourceType": "script",
+            "budget": 10
+          },
+          {
+            "resourceType": "total",
+            "budget": 50
+          },
+          {
+            "resourceType": "image",
+            "budget": 20
+          },
+          {
+            "resourceType": "stylesheet",
+            "budget": 5
+          },
+          {
+            "resourceType": "font",
+            "budget": 5
+          }
+        ]
       }
     ]
   }