chore: add tech sponsors through actions (#18624)

* chore: add tech sponsors through actions * chore: add readme sponsors * chore: review changes Co-authored-by: Amaresh S M <amareshsm13@gmail.com> * chore: review changes Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> * chore: review changes Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com> --------- Co-authored-by: Amaresh S M <amareshsm13@gmail.com> Co-authored-by: Milos Djermanovic <milos.djermanovic@gmail.com>
eslint · Jul 5, 2024 · 51bf57c · 51bf57c
1 parent 9f416db
commit 51bf57c
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ ESLint is a tool for identifying and reporting on patterns found in ECMAScript/J
 10. [License](#license)
 11. [Team](#team)
 12. [Sponsors](#sponsors)
-13. [Technology Sponsors](#technology-sponsors)
+13. [Technology Sponsors](#technology-sponsors) <!-- markdownlint-disable-line MD051 -->
 
 ## Installation and Usage
 
@@ -294,14 +294,13 @@ The following companies, organizations, and individuals support ESLint's ongoing
 <!-- NOTE: This section is autogenerated. Do not manually edit.-->
 <!--sponsorsstart-->
 <h3>Platinum Sponsors</h3>
-<p><a href="https://automattic.com"><img src="https://images.opencollective.com/automattic/d0ef3e1/logo.png" alt="Automattic" height="undefined"></a> <a href="https://www.airbnb.com/"><img src="https://images.opencollective.com/airbnb/d327d66/logo.png" alt="Airbnb" height="undefined"></a></p><h3>Gold Sponsors</h3>
+<p><a href="https://automattic.com"><img src="https://images.opencollective.com/automattic/d0ef3e1/logo.png" alt="Automattic" height="128"></a> <a href="https://www.airbnb.com/"><img src="https://images.opencollective.com/airbnb/d327d66/logo.png" alt="Airbnb" height="128"></a></p><h3>Gold Sponsors</h3>
 <p><a href="#"><img src="https://images.opencollective.com/guest-bf377e88/avatar.png" alt="Eli Schleifer" height="96"></a> <a href="https://engineering.salesforce.com"><img src="https://images.opencollective.com/salesforce/ca8f997/logo.png" alt="Salesforce" height="96"></a></p><h3>Silver Sponsors</h3>
 <p><a href="https://www.jetbrains.com/"><img src="https://images.opencollective.com/jetbrains/fe76f99/logo.png" alt="JetBrains" height="64"></a> <a href="https://liftoff.io/"><img src="https://images.opencollective.com/liftoff/5c4fa84/logo.png" alt="Liftoff" height="64"></a> <a href="https://americanexpress.io"><img src="https://avatars.githubusercontent.com/u/3853301?v=4" alt="American Express" height="64"></a> <a href="https://www.workleap.com"><img src="https://avatars.githubusercontent.com/u/53535748?u=d1e55d7661d724bf2281c1bfd33cb8f99fe2465f&v=4" alt="Workleap" height="64"></a></p><h3>Bronze Sponsors</h3>
 <p><a href="https://www.notion.so"><img src="https://images.opencollective.com/notion/bf3b117/logo.png" alt="notion" height="32"></a> <a href="https://www.crosswordsolver.org/anagram-solver/"><img src="https://images.opencollective.com/anagram-solver/2666271/logo.png" alt="Anagram Solver" height="32"></a> <a href="https://icons8.com/"><img src="https://images.opencollective.com/icons8/7fa1641/logo.png" alt="Icons8" height="32"></a> <a href="https://discord.com"><img src="https://images.opencollective.com/discordapp/f9645d9/logo.png" alt="Discord" height="32"></a> <a href="https://www.ignitionapp.com"><img src="https://avatars.githubusercontent.com/u/5753491?v=4" alt="Ignition" height="32"></a> <a href="https://nx.dev"><img src="https://avatars.githubusercontent.com/u/23692104?v=4" alt="Nx" height="32"></a> <a href="https://herocoders.com"><img src="https://avatars.githubusercontent.com/u/37549774?v=4" alt="HeroCoders" height="32"></a> <a href="https://usenextbase.com"><img src="https://avatars.githubusercontent.com/u/145838380?v=4" alt="Nextbase Starter Kit" height="32"></a></p>
 <!--sponsorsend-->
 
-## Technology Sponsors
-
-* Site search ([eslint.org](https://eslint.org)) is sponsored by [Algolia](https://www.algolia.com)
-* Hosting for ([eslint.org](https://eslint.org)) is sponsored by [Netlify](https://www.netlify.com)
-* Password management is sponsored by [1Password](https://www.1password.com)
+<!--techsponsorsstart-->
+<h2>Technology Sponsors</h2>
+<p><a href="https://netlify.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/netlify-icon.svg" alt="Netlify" height="32"></a> <a href="https://algolia.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/algolia-icon.svg" alt="Algolia" height="32"></a> <a href="https://1password.com"><img src="https://raw.githubusercontent.com/eslint/eslint.org/main/src/assets/images/techsponsors/1password-icon.svg" alt="1Password" height="32"></a></p>
+<!--techsponsorsend-->
diff --git a/tools/update-readme.js b/tools/update-readme.js
@@ -22,13 +22,20 @@ const got = require("got");
 // Data
 //-----------------------------------------------------------------------------
 
-const SPONSORS_URL = "https://raw.githubusercontent.com/eslint/eslint.org/main/src/_data/sponsors.json";
-const TEAM_URL = "https://raw.githubusercontent.com/eslint/eslint.org/main/src/_data/team.json";
+const SPONSORS_URL =
+    "https://raw.githubusercontent.com/eslint/eslint.org/main/src/_data/sponsors.json";
+const TEAM_URL =
+    "https://raw.githubusercontent.com/eslint/eslint.org/main/src/_data/team.json";
 const README_FILE_PATH = "./README.md";
+const TECH_SPONSORS_URL =
+    "https://raw.githubusercontent.com/eslint/eslint.org/main/src/_data/techsponsors.json";
+const TECH_SPONSORS_IMAGE_PATH =
+    "https://raw.githubusercontent.com/eslint/eslint.org/main/src";
 
 const readme = fs.readFileSync(README_FILE_PATH, "utf8");
 
 const heights = {
+    platinum: 128,
     gold: 96,
     silver: 64,
     bronze: 32
@@ -67,14 +74,18 @@ async function fetchTeamData() {
 function formatTeamMembers(members) {
     /* eslint-disable indent -- Allow deeper template substitution indent */
     return stripIndents`
-        <table><tbody><tr>${
-        members.map((member, index) => `<td align="center" valign="top" width="11%">
+        <table><tbody><tr>${members
+            .map(
+                (member, index) => `<td align="center" valign="top" width="11%">
             <a href="https://github.com/${member.username}">
-                <img src="https://github.com/${member.username}.png?s=75" width="75" height="75" alt="${member.name.trim()}'s Avatar"><br />
+                <img src="https://github.com/${
+                    member.username
+                }.png?s=75" width="75" height="75" alt="${member.name.trim()}'s Avatar"><br />
                 ${member.name.trim()}
             </a>
-            </td>${(index + 1) % 9 === 0 ? "</tr><tr>" : ""}`).join("")
-        }</tr></tbody></table>`;
+            </td>${(index + 1) % 9 === 0 ? "</tr><tr>" : ""}`
+            )
+            .join("")}</tr></tbody></table>`;
     /* eslint-enable indent -- Allow deeper template substitution indent */
 }
 
@@ -84,20 +95,62 @@ function formatTeamMembers(members) {
  * @returns {string} The HTML for the readme.
  */
 function formatSponsors(sponsors) {
-    const nonEmptySponsors = Object.keys(sponsors).filter(tier => sponsors[tier].length > 0);
+    const nonEmptySponsors = Object.keys(sponsors).filter(
+        tier => sponsors[tier].length
+    );
 
     /* eslint-disable indent -- Allow deeper template substitution indent */
     return stripIndents`<!--sponsorsstart-->
-        ${
-            nonEmptySponsors.map(tier => `<h3>${tier[0].toUpperCase()}${tier.slice(1)} Sponsors</h3>
-            <p>${
-                sponsors[tier].map(sponsor => `<a href="${sponsor.url || "#"}"><img src="${sponsor.image}" alt="${sponsor.name}" height="${heights[tier]}"></a>`).join(" ")
-            }</p>`).join("")
-        }
+        ${nonEmptySponsors
+            .map(
+                tier => `<h3>${tier[0].toUpperCase()}${tier.slice(
+                    1
+                )} Sponsors</h3>
+            <p>${sponsors[tier]
+                .map(
+                    sponsor =>
+                        `<a href="${sponsor.url || "#"}"><img src="${
+                            sponsor.image
+                        }" alt="${sponsor.name}" height="${heights[tier]}"></a>`
+                )
+                .join(" ")}</p>`
+            )
+            .join("")}
     <!--sponsorsend-->`;
     /* eslint-enable indent -- Allow deeper template substitution indent */
 }
 
+/**
+ * Fetches the latest tech sponsors data from the website.
+ * @returns {Array<Object>} The tech sponsors array of data object.
+ */
+async function fetchTechSponsors() {
+    const data = await got(TECH_SPONSORS_URL).json();
+
+    return data;
+}
+
+/**
+ * Formats an array of sponsors into HTML for the readme.
+ * @param {Array} sponsors The array of sponsors.
+ * @returns {string} The HTML for the readme.
+ */
+function formatTechSponsors(sponsors) {
+    return stripIndents`<!--techsponsorsstart-->
+        <h2>Technology Sponsors</h2>
+            <p>${sponsors
+        .map(
+            sponsor =>
+                `<a href="${sponsor.url || "#"}"><img src="${
+                    TECH_SPONSORS_IMAGE_PATH + sponsor.image
+                }" alt="${sponsor.name}" height="${
+                    heights.bronze
+                }"></a>`
+        )
+        .join(" ")}</p>
+    <!--techsponsorsend-->`;
+}
+
 //-----------------------------------------------------------------------------
 // Main
 //-----------------------------------------------------------------------------
@@ -142,24 +195,34 @@ const HTML_TEMPLATE = stripIndents`
 `;
 
 (async () => {
-
-    const [allSponsors, team] = await Promise.all([
+    const [allSponsors, team, techSponsors] = await Promise.all([
         fetchSponsorsData(),
-        fetchTeamData()
+        fetchTeamData(),
+        fetchTechSponsors()
     ]);
 
     // replace all of the section
-    let newReadme = readme.replace(/<!--teamstart-->[\w\W]*?<!--teamend-->/u, ejs.render(HTML_TEMPLATE, {
-        team,
-        formatTeamMembers
-    }));
-
-    newReadme = newReadme.replace(/<!--sponsorsstart-->[\w\W]*?<!--sponsorsend-->/u, formatSponsors(allSponsors));
+    let newReadme = readme.replace(
+        /<!--teamstart-->[\w\W]*?<!--teamend-->/u,
+        ejs.render(HTML_TEMPLATE, {
+            team,
+            formatTeamMembers
+        })
+    );
+
+    newReadme = newReadme.replace(
+        /<!--sponsorsstart-->[\w\W]*?<!--sponsorsend-->/u,
+        formatSponsors(allSponsors)
+    );
+
+    newReadme = newReadme.replace(
+        /<!--techsponsorsstart-->[\w\W]*?<!--techsponsorsend-->/u,
+        formatTechSponsors(techSponsors)
+    );
 
     // replace multiple consecutive blank lines with just one blank line
     newReadme = newReadme.replace(/(?<=^|\n)\n{2,}/gu, "\n");
 
     // output to the file
     fs.writeFileSync(README_FILE_PATH, newReadme, "utf8");
-
 })();