test ghwf

.github/workflows/visualdiffs.yml

@@ -0,0 +1,68 @@
+name: Visual URL Comparison
+
+on:
+  pull_request:
+
+jobs:
+  visual-diff:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install deps for PR build
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
+
+      # Build and serve PR version
+      - name: Build PR version
+        run: npm run build
+
+      - name: Serve PR build
+        run: npm run preview -- --port 3001 &
+
+      - name: Wait for PR server
+        run: npx wait-on http://localhost:3001
+
+      # Checkout base branch and build
+      - name: Checkout base branch
+        run: |
+          git fetch origin ${{ github.event.pull_request.base.ref }} --depth=1
+          git checkout FETCH_HEAD
+
+      - name: Install deps for base build
+        run: npm ci
+
+      - name: Build base version
+        run: npm run build
+
+      - name: Serve base build
+        run: npm run preview -- --port 3002 &
+
+      - name: Wait for base server
+        run: npx wait-on http://localhost:3002
+
+      # Run visual diff and capture Markdown output
+      - name: Run visual diff
+        id: generate-diff
+        run: |
+          node scripts/visualDiff.cjs > diff.md
+          echo "comment<<EOF" >> $GITHUB_OUTPUT
+          cat diff.md >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
+      # Post visual diffs as a PR comment
+      - name: Comment visual diffs on PR
+        uses: peter-evans/create-or-update-comment@v5
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: ${{ steps.generate-diff.outputs.comment }}
+
+      # Upload raw diff artifacts
+      - uses: actions/upload-artifact@v4
+        with:
+          name: visual-diffs
+          path: diffs

package.json

@@ -28,6 +28,9 @@
     "eslint": "^9.33.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "pixelmatch": "^7.1.0",
+    "playwright": "^1.57.0",
+    "pngjs": "^7.0.0",
     "tailwindcss": "^4.1.16",
     "vite": "^7.1.2"
   }

scripts/visualDiff.cjs

@@ -0,0 +1,53 @@
+const { chromium } = require("playwright");
+const pixelmatch = require("pixelmatch").default || require("pixelmatch");
+const { PNG } = require("pngjs");
+const fs = require("fs");
+
+const urls = [{ name: "home", path: "/" }];
+
+async function run() {
+  if (!fs.existsSync("diffs")) fs.mkdirSync("diffs");
+
+  const browser = await chromium.launch();
+
+  let mdOutput = "## Visual Diff Results\n\n";
+
+  for (const { name, path } of urls) {
+    const page = await browser.newPage();
+
+    // PR screenshot
+    await page.goto(`http://localhost:3001${path}`);
+    const prPath = `diffs/${name}_pr.png`;
+    await page.screenshot({ path: prPath, fullPage: true });
+
+    // Base screenshot
+    await page.goto(`http://localhost:3002${path}`);
+    const basePath = `diffs/${name}_base.png`;
+    await page.screenshot({ path: basePath, fullPage: true });
+
+    // Compare
+    const img1 = PNG.sync.read(fs.readFileSync(basePath));
+    const img2 = PNG.sync.read(fs.readFileSync(prPath));
+    const out = new PNG({ width: img1.width, height: img1.height });
+
+    pixelmatch(img1.data, img2.data, out.data, img1.width, img1.height, {
+      threshold: 0.3,
+    });
+
+    const diffPath = `diffs/${name}_diff.png`;
+    fs.writeFileSync(diffPath, PNG.sync.write(out));
+
+    // Encode diff as base64 for PR comment
+    const base64 = fs.readFileSync(diffPath).toString("base64");
+    mdOutput += `### ${name}\n![${name} diff](data:image/png;base64,${base64})\n\n`;
+
+    await page.close();
+  }
+
+  await browser.close();
+
+  // Output markdown to stdout for GitHub Action step
+  console.log(mdOutput);
+}
+
+run();

src/components/OptimadeClient/OptimadeMetadata.jsx

@@ -14,7 +14,9 @@ export default function OptimadeMetadata({ child }) {
         <h3 className={headingclassName}>FAQs</h3>
 
         <section className={sectionclassName}>
-          <h4 className={headingclassName}>What is the OPTIMADE Client?</h4>
+          <h4 className={headingclassName}>
+            What is1232132 the OPTIMADE Client?
+          </h4>
           <p className={paragraphclassName}>
             This is a friendly client to search through databases and other
             implementations exposing an OPTIMADE RESTful API. To get more