Fix performance tests

.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:

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>
+  );
+}

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
+          }
+        ]
       }
     ]
   }