Fix icon preview comment workflow (#1775)

* Add helpers

* fix preview script

* refactor markup to javascript

* test

* Add escaping

* Try alternative escaping

* test comment markup

* update comment markup

* Revert comment markup step

* revert escaping

* Test with markup file instead of GITHUB_OUTPUT var

scripts/generateChangedIconsCommentMarkup.mjs

@@ -0,0 +1,98 @@
+import fs from 'fs';
+import path from 'path';
+import { shuffle, readSvgDirectory, getCurrentDirPath } from './helpers.mjs';
+
+const currentDir = getCurrentDirPath(import.meta.url);
+const ICONS_DIR = path.resolve(currentDir, '../icons');
+const BASE_URL = 'https://lucide.dev/api/gh-icon';
+
+const changedFilesPathString = process.env.CHANGED_FILES;
+
+const changedFiles = changedFilesPathString
+  .split(' ')
+  .map((file) => file.replace('.json', '.svg'))
+  .filter((file, idx, arr) => arr.indexOf(file) === idx);
+
+const getImageTagsByFiles = (files, getBaseUrl, width) =>
+  files
+    .map((file) => {
+      const svgContent = fs.readFileSync(path.join(process.cwd(), file), 'utf-8');
+      const strippedAttrsSVG = svgContent
+        .replace(/<svg[^>]*>/, '<svg>')
+        .replaceAll(/\n| {2}|\t/g, '');
+
+      const base64 = Buffer.from(strippedAttrsSVG).toString('base64');
+      const url = getBaseUrl(file);
+      const widthAttr = width ? `width="${width}"` : '';
+
+      return `<img title="${file}" alt="${file}" ${widthAttr} src="${url}/${base64}.svg"/>`;
+    })
+    .join('');
+
+const svgFiles = readSvgDirectory(ICONS_DIR).map((file) => `icons/${file}`);
+
+const iconsFilteredByName = (search) => svgFiles.filter((file) => file.includes(search));
+
+const cohesionRandomImageTags = getImageTagsByFiles(
+  shuffle(svgFiles).slice(0, changedFiles.length),
+  () => `${BASE_URL}/stroke-width/2`,
+);
+
+const cohesionSquaresImageTags = getImageTagsByFiles(
+  shuffle(iconsFilteredByName('square')).slice(0, changedFiles.length),
+  () => `${BASE_URL}/stroke-width/2`,
+);
+
+const changeFiles1pxStrokeImageTags = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/stroke-width/1`,
+);
+
+const changeFiles2pxStrokeImageTags = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/stroke-width/2`,
+);
+
+const changeFiles3pxStrokeImageTags = getImageTagsByFiles(
+  changedFiles,
+  () => `${BASE_URL}/stroke-width/3`,
+);
+
+const changeFilesLowDPIImageTags = getImageTagsByFiles(changedFiles, () => `${BASE_URL}/dpi/24`);
+
+const changeFilesXRayImageTags = getImageTagsByFiles(
+  changedFiles,
+  (file) => {
+    const iconName = path.basename(file, '.svg');
+
+    return `${BASE_URL}/${iconName}`;
+  },
+  400,
+);
+
+const commentMarkup = `\
+### Added or changed icons
+${changeFiles2pxStrokeImageTags}
+<details>
+<summary>Preview cohesion</summary>
+${cohesionSquaresImageTags}<br/>
+${changeFiles2pxStrokeImageTags}<br/>
+${cohesionRandomImageTags}<br/>
+</details>
+<details>
+<summary>Preview stroke widths</summary>
+${changeFiles1pxStrokeImageTags}<br/>
+${changeFiles2pxStrokeImageTags}<br/>
+${changeFiles3pxStrokeImageTags}<br/>
+</details>
+<details>
+<summary>DPI Preview (24px)</summary>
+${changeFilesLowDPIImageTags}<br/>
+</details>
+<details>
+<summary>Icon X-rays</summary>
+${changeFilesXRayImageTags}
+</details>
+`;
+
+console.log(commentMarkup);

scripts/helpers.mjs

@@ -90,12 +90,13 @@ export const writeFileIfNotExists = (content, fileName, outputDirectory) => {
  * @returns {object} A map of icon or category metadata
  */
 export const readAllMetadata = (directory) =>
-  fs.readdirSync(directory).filter((file) => path.extname(file) === '.json').reduce(
-    (acc, fileName, i) => {
+  fs
+    .readdirSync(directory)
+    .filter((file) => path.extname(file) === '.json')
+    .reduce((acc, fileName, i) => {
       acc[path.basename(fileName, '.json')] = readMetadata(fileName, directory);
       return acc;
-    }, {}
-  );
+    }, {});
 
 /**
  * Reads metadata for an icon or category
@@ -111,7 +112,7 @@ export const readMetadata = (fileName, directory) =>
  * reads the icon directory
  *
  * @param {string} directory
- * @returns {array} An array of file paths containig svgs
+ * @returns {array} An array of file paths containing svgs
  */
 export const readSvgDirectory = (directory, fileExtension = '.svg') =>
   fs.readdirSync(directory).filter((file) => path.extname(file) === fileExtension);
@@ -189,4 +190,21 @@ export const mergeArrays = (a, b) => {
   return a;
 };
 
+/**
+ * @param {string} currentPath
+ * @returns {string}
+ */
 export const getCurrentDirPath = (currentPath) => path.dirname(fileURLToPath(currentPath));
+
+/**
+ * @param {array} array
+ * @returns {array}
+ */
+export const shuffle = (array) => {
+  // eslint-disable-next-line no-plusplus
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+};