Add PR check script

.github/check.js

@@ -0,0 +1,85 @@
+const { readdirSync, readFileSync, existsSync } = require("fs");
+const { execSync } = require("child_process");
+
+// strip all metadata to ensure consistency
+exec("exiftool -All= -r -overwrite_original ./images");
+exec("exiftool -All= -r -overwrite_original ./print");
+
+checkDimensions("./images", 600, 600);
+checkDimensions("./print", 1200, 1200);
+
+checkList("software.json");
+checkList("groups.json");
+
+// check list of entries in json file
+function checkList(filename) {
+  console.info(`Checking list "${filename}"`);
+
+  // load and parse list
+  const list = JSON.parse(readFileSync(filename, { encoding: "utf8" }));
+
+  for (const [index, entry] of Object.entries(list)) {
+    console.info(`Checking entry ${+index + 1} of ${list.length}`);
+
+    // check fields
+    if (!entry.name?.trim()) throw Error(`Missing field "name"`);
+    if (!entry.description?.trim()) throw Error(`Missing field "description"`);
+    if (!entry.link?.trim()) throw Error(`Missing field "link"`);
+
+    // check for associated images
+    const filename = entry.name?.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+    const image = `./images/${filename}.png`;
+    const print = `./print/${filename}.png`;
+    if (!existsSync(image)) throw Error(`Missing image "${image}"`);
+    if (!existsSync(print)) throw Error(`Missing image "${print}"`);
+
+    // check length
+    if (entry.name?.trim().length > 40)
+      throw Error(`Name too long "${entry.name}"`);
+    if (entry.description?.trim().length > 120)
+      throw Error(`Description too long "${entry.description}"`);
+  }
+}
+
+// check dimensions of images in directory
+function checkDimensions(
+  directory,
+  expectedWidth,
+  expectedHeight,
+  extension = "png"
+) {
+  // get all images matching extension in directory
+  const paths = readdirSync(directory)
+    .filter((filename) => filename.endsWith(`.${extension}`))
+    .map((filename) => `${directory}/${filename}`);
+
+  for (const [index, path] of Object.entries(paths)) {
+    console.info(`Checking "${path}" (${+index + 1} of ${paths.length})`);
+
+    // extract dimensions
+    const [width, height] = exec(
+      `exiftool -s3 -ImageWidth -ImageHeight ${path}`,
+      false
+    )
+      .split(/\s/)
+      .filter(Boolean)
+      .map(Number);
+
+    // check dimensions
+    if (width !== expectedWidth || height !== expectedHeight)
+      throw Error(
+        `${width} × ${height}, expected ${expectedWidth} × ${expectedHeight}`
+      );
+
+    // check color space
+    const colorspace = exec(`exiftool -s3 -ColorType ${path}`, false);
+    if (!colorspace.toLowerCase().includes("rgb"))
+      throw Error(`Colorspace "${colorspace}", expected RGB`);
+  }
+}
+
+function exec(command, print = true) {
+  const result = execSync(command).toString().trim();
+  if (print) console.log(result);
+  return result;
+}

.github/workflows/check.yaml

@@ -0,0 +1,21 @@
+name: Check and clean files
+
+on: pull_request
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install exiftool
+        run: sudo apt install exiftool
+
+      - name: Run script
+        run: node ./.github/check.js
+
+      - name: Commit changed files
+        uses: stefanzweifel/git-auto-commit-action@v5
+        with:
+          commit_message: "Update files"

README.md

@@ -33,15 +33,16 @@ The order of entries on the website is shuffled randomly on each page visit to n
    Check "Allow edits by maintainers".
    Name the PR the canonical name(s) of the software/group(s) you're changing, using commas for multiple, e.g. "Word Lapse, Preprint Similarity Search".
 1. Shortly after opening the PR, a link will appear that shows a preview of the website with your changes (if any).
+   Add `?print` at the end of the url to view the print versions of images instead.
 1. We will review your changes, discuss or help you with them if needed, and merge the PR when everything is ready.
 1. Changes to the website will go live almost immediately, if any.
    We'll start ordering your stickers, if any.
 
 ### Changes
 
 1. Add an entry to **the top** of `software.json` / `groups.json`.
-   - Short ~3-20 character **name**.
-   - Short ~20-100 character **description**.
+   - Short ~3-40 character **name**.
+   - Short ~20-120 character **description**.
    - **Link** to a website or repo.
 1. Add a **website** image to `/images`.
    - Filename must be lowercase, kebab-case version of entry name, e.g. **Word Lapse** → `word-lapse`.

index.html

@@ -201,7 +201,7 @@ <h2 class="subtitle">
 
                 <img
                   class="image"
-                  :src="`images/${entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`"
+                  :src="`${$store.store.folder}/${entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`"
                   loading="lazy"
                   onerror="this.remove();"
                   aria-hidden="true"
@@ -279,7 +279,7 @@ <h2>GROUPS</h2>
 
                 <img
                   class="image"
-                  :src="`images/${entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`"
+                  :src="`${$store.store.folder}/${entry.name.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`"
                   loading="lazy"
                   onerror="this.remove();"
                   aria-hidden="true"

src/alpine.js

@@ -1,8 +1,13 @@
 // reactive render html
 
+// url flags
+const noShuffle = window.location.search.includes("order");
+const print = window.location.search.includes("print");
+
 document.addEventListener("alpine:init", async () => {
   // init store
   Alpine.store("store", {
+    folder: print ? "print" : "images",
     title: [],
     software: [],
     groups: [],
@@ -51,7 +56,7 @@ const loadList = async (url) => {
   try {
     let list = await (await fetch(url)).json();
     list = list.map((entry, index) => ({ ...entry, order: index }));
-    shuffle(list);
+    if (!noShuffle && !print) shuffle(list);
     return list;
   } catch (error) {
     return [];