Add back preview-theme workflow

Author: steven-steven

.github/workflows/preview-theme.yml

@@ -0,0 +1,24 @@
+name: Theme preview
+
+on:
+  pull_request_target:
+    types: [opened, synchronize, reopened]
+    branches:
+      - master
+      - theme-preview-script
+      - "themes/index.js"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Install & Preview
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: bahmutov/npm-install@v1
+        with:
+          useLockFile: false
+      - run: npm run preview-theme
+        env:
+          CI: true
+          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "preview-theme": "node scripts/preview-theme"
   },
   "author": "Steven",
   "license": "MIT",

scripts/preview-theme.js

@@ -0,0 +1,196 @@
+const core = require("@actions/core");
+const github = require("@actions/github");
+const parse = require("parse-diff");
+const Hjson = require("hjson");
+const snakeCase = require("lodash.snakecase");
+const ColorContrastChecker = require("color-contrast-checker");
+
+require("dotenv").config();
+
+const OWNER = "steven-steven";
+const REPO = "typeracer-readme-stats";
+const COMMENT_TITLE = "Automated Theme Preview";
+
+function getPrNumber() {
+  const pullRequest = github.context.payload.pull_request;
+  if (!pullRequest) {
+    return undefined;
+  }
+
+  return pullRequest.number;
+}
+
+function findCommentPredicate(inputs, comment) {
+  return (
+    (inputs.commentAuthor && comment.user
+      ? comment.user.login === inputs.commentAuthor
+      : true) &&
+    (inputs.bodyIncludes && comment.body
+      ? comment.body.includes(inputs.bodyIncludes)
+      : true)
+  );
+}
+
+async function findComment(octokit, issueNumber) {
+  const parameters = {
+    owner: OWNER,
+    repo: REPO,
+    issue_number: issueNumber,
+  };
+  const inputs = {
+    commentAuthor: OWNER,
+    bodyIncludes: COMMENT_TITLE,
+  };
+
+  for await (const { data: comments } of octokit.paginate.iterator(
+    octokit.rest.issues.listComments,
+    parameters,
+  )) {
+    // Search each page for the comment
+    const comment = comments.find((comment) =>
+      findCommentPredicate(inputs, comment),
+    );
+    if (comment) return comment;
+  }
+}
+
+async function upsertComment(octokit, props) {
+  if (props.comment_id !== undefined) {
+    await octokit.issues.updateComment(props);
+  } else {
+    await octokit.issues.createComment(props);
+  }
+}
+
+function getWebAimLink(color1, color2) {
+  return `https://webaim.org/resources/contrastchecker/?fcolor=${color1}&bcolor=${color2}`;
+}
+
+function getGrsLink(colors) {
+  const url = `https://typeracer-readme-stats.vercel.app/api?username=juninight29`;
+  const colorString = Object.keys(colors)
+    .map((colorKey) => `${colorKey}=${colors[colorKey]}`)
+    .join("&");
+
+  return `${url}&${colorString}&show_icons=true`;
+}
+
+const themeContribGuidelines = `
+  \rHi, thanks for the theme contribution, please read our theme [contribution guidelines](https://github.com/steven-steven/github-readme-stats/blob/master/CONTRIBUTING.md#themes-contribution).  
+  \rWe are currently only accepting color combinations from any VSCode theme or themes which have good color combination to minimize bloating the themes collection.
+
+  \r> Also note that if this theme is exclusively for your personal use, then instead of adding it to our theme collection you can use card [customization options](https://github.com/steven-steven/github-readme-stats#customization) 
+`;
+
+async function run() {
+  try {
+    const ccc = new ColorContrastChecker();
+    const warnings = [];
+    const token = core.getInput("token");
+    console.log("token?");
+    console.log(token);
+    const octokit = github.getOctokit(token || process.env.PERSONAL_TOKEN);
+    const pullRequestId = getPrNumber();
+
+    if (!pullRequestId) {
+      console.log("PR not found");
+      return;
+    }
+
+    const res = await octokit.pulls.get({
+      owner: OWNER,
+      repo: REPO,
+      pull_number: pullRequestId,
+      mediaType: {
+        format: "diff",
+      },
+    });
+    const comment = await findComment(octokit, pullRequestId);
+
+    const diff = parse(res.data);
+    const content1 = diff
+      .find((file) => file.to === "themes/index.js")
+      .chunks[0].changes;
+    
+    const content = content1.filter((c) => c.type === "add").map((c) => c.content.replace("+", ""))
+      .join("");
+
+    console.log("content1 diff");
+    console.log(content1);
+    console.log("content");
+    console.log(content);
+
+    const themeObject = Hjson.parse(content);
+    const themeName = Object.keys(themeObject)[0];
+    const colors = themeObject[themeName];
+
+    if (themeName !== snakeCase(themeName)) {
+      warnings.push("Theme name isn't in snake_case");
+    }
+
+    if (!colors) {
+      await upsertComment({
+        comment_id: comment?.id,
+        owner: OWNER,
+        repo: REPO,
+        issue_number: pullRequestId,
+        body: `
+        \r**${COMMENT_TITLE}**
+        
+        \rCannot create theme preview
+
+        ${themeContribGuidelines}
+        `,
+      });
+      return;
+    }
+
+    const titleColor = colors.title_color;
+    const iconColor = colors.icon_color;
+    const textColor = colors.text_color;
+    const bgColor = colors.bg_color;
+    const url = getGrsLink(colors);
+
+    const colorPairs = {
+      title_color: [titleColor, bgColor],
+      icon_color: [iconColor, bgColor],
+      text_color: [textColor, bgColor],
+    };
+
+    // check color contrast
+    Object.keys(colorPairs).forEach((key) => {
+      const color1 = colorPairs[key][0];
+      const color2 = colorPairs[key][1];
+      if (!ccc.isLevelAA(`#${color1}`, `#${color2}`)) {
+        const permalink = getWebAimLink(color1, color2);
+        warnings.push(
+          `\`${key}\` does not pass [AA contrast ratio](${permalink})`,
+        );
+      }
+    });
+
+    await upsertComment(octokit, {
+      comment_id: comment?.id,
+      issue_number: pullRequestId,
+      owner: OWNER,
+      repo: REPO,
+      body: `
+      \r**${COMMENT_TITLE}**  
+      
+      \r${warnings.map((warning) => `- :warning: ${warning}\n`).join("")}
+
+      \ntitle_color: <code>#${titleColor}</code> | icon_color: <code>#${iconColor}</code> | text_color: <code>#${textColor}</code> | bg_color: <code>#${bgColor}</code>
+      
+      \r[Preview Link](${url})
+
+      \r[![](${url})](${url})
+      
+      ${themeContribGuidelines}
+      `,
+    });
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+run();