script to update readme image

.github/workflows/build_test_publish.yml

@@ -109,7 +109,6 @@ jobs:
           pnpm install
           ./cli build:www
           pnpm wrangler pages deploy \
-            --env production \
             --project-name react-social-icons \
             www/dist
         env:

.gitignore

@@ -12,3 +12,4 @@ notes.md
 /playwright-report/
 /playwright/.cache/
 .pnpm-debug.log
+vite.config.js.timestamp*

cli

@@ -72,6 +72,73 @@ task:setup-dev() {
   pnpm install
 }
 
+task:update-readme-image() {
+
+    echo "...checking playwright install..."
+
+    pnpm playwright install
+
+    echo "...building website..."
+
+    pnpm vite build -l silent -c www/vite.config.js www/
+
+    echo "...running server..."
+
+    pnpm vite preview \
+      --host 0.0.0.0 \
+      --port 4173 \
+      --strictPort \
+      -c vite.config.js \
+      -l silent \
+      "www" &
+
+    echo "...taking screenshot..."
+
+    node --experimental-detect-module -e "
+    import { chromium } from 'playwright';
+    import { scheduler } from 'node:timers/promises';
+    const load = async page => {
+      for (let i = 0; i < 10; i++) {
+        try {
+          await page.goto('http://localhost:4173');
+          break;
+        }
+        catch(error) {
+          await scheduler.wait(500);
+        }
+      }
+    }
+    (async () => {
+      const browser = await chromium.launch();
+      const page = await browser.newPage({
+        vewport: { width: 1440, height: 800 },
+        deviceScaleFactor: 2
+      });
+      await load(page);
+      await page.locator('#lib').screenshot({ path: 'readme-image.png' });
+      await page.close();
+      await browser.close();
+    })()
+    "
+
+    echo "...killing server..."
+
+    ps | grep 'vite.*preview.*port.4173' | grep -v 'grep' | awk '{ print $1 }' | xargs kill
+
+    echo "...uploading image..."
+
+    pnpm wrangler r2 object put \
+      --file readme-image.png \
+      --content-type "image/png" \
+      react-social-icons/readme-image.png
+
+    echo '...cleaning up image...'
+
+    rm readme-image.png
+
+    echo "---Finished---"
+}
+
 test:lint() {
   build --silent
   pnpm eslint .eslintrc.cjs . db/*

package.json

@@ -134,6 +134,7 @@
     "global-jsdom": "^24.0.0",
     "globals": "^15.8.0",
     "jsdom": "^24.1.1",
+    "playwright": "^1.45.3",
     "prettier": "^3.3.3",
     "publint": "^0.2.9",
     "rollup": "^4.19.0",

www/app.css

@@ -80,7 +80,7 @@ p code, li code {
 }
 
 #lib .social-icon {
-  margin: 0 20px 20px 0;
+  margin: 10px;
 }
 
 #lib .social-icon:hover {

www/app.jsx

@@ -16,7 +16,9 @@ function Page() {
       <h2>Library</h2>
       <p>Here are the available icons.</p>
       <div id="lib">
-        {getKeys().map(k => <SocialIcon network={k} title={k} key={k} />)}
+        {getKeys().sort((a, b) => a.localeCompare(b)).map(k =>
+          <SocialIcon network={k} title={k} key={k} />
+        )}
       </div>
 
       <h2>Usage</h2>