POC: use js to show status of gh issues and PR

See pydata#1895. Not that I heve the right skills and am good at desing, just show what could be done. Need to be pulled into a separate JS file and properely desinged.
Carreau · Jun 20, 2024 · f34eb67 · f34eb67
1 parent fd2c4ab
commit f34eb67
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/docs/community/topics/kitchen-sink.md b/docs/community/topics/kitchen-sink.md
@@ -6,3 +6,9 @@ The source files for these pages are stored [in the `sphinx-themes.org` reposito
 
 To update the kitchen sink source files, there is a helper Python script that will loop through the known kitchen sink files and copy over the latest text.
 To use it, run the following from the root of the repository:
+
+- [issue closed](https://github.com/pydata/pydata-sphinx-theme/issues/1882)
+- [issue open](https://github.com/pydata/pydata-sphinx-theme/issues/1895)
+- [pull open](https://github.com/pydata/pydata-sphinx-theme/issues/1888)
+- [pull merged](https://github.com/pydata/pydata-sphinx-theme/issues/1893)
+- [pull closed](https://github.com/pydata/pydata-sphinx-theme/issues/1853)
diff --git a/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html b/src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html
@@ -17,6 +17,85 @@
     document.documentElement.dataset.mode = localStorage.getItem("mode") || "{{ default_mode }}";
     document.documentElement.dataset.theme = localStorage.getItem("theme") || "{{ default_mode }}";
   </script>
+  <script type="module">
+      import { Octokit, App } from "https://esm.sh/octokit";
+      const octokit = new Octokit();
+      const anchorTags = document.querySelectorAll('a');
+
+      // Regular expression to match the desired GitHub issue URL pattern
+      const regex = /^https:\/\/github\.com\/([^\/]+)\/([^\/]+)\/(pulls|issues)\/(\d+)$/;
+
+      // Filter <a> tags that match the pattern
+      const githubIssueLinks = Array.prototype.filter.call(anchorTags, function(element) {
+          return regex.test(element.href);
+      });
+
+      githubIssueLinks.map(async (atag) =>  {
+        const match = atag.href.match(regex);
+        if (match) {
+            const [fullUrl, username, repo,pr, issueNumber] = match;
+            console.log("Username:", username);
+            console.log("Repository:", repo);
+            console.log("Issue Number:", issueNumber);
+            const res = await octokit.request(`GET /repos/${username}/${repo}/issues/${issueNumber}`, {
+              //owner: 'OWNER',
+              //repo: 'REPO',
+              //issue_number: 'ISSUE_NUMBER',
+              headers: {
+                'X-GitHub-Api-Version': '2022-11-28'
+                }
+            });
+            let pull_issue = 'unset';
+            let state = 'unset';
+            if (res.data.pull_request !== undefined){
+                  pull_issue = 'pull';
+                  state = res.data.pull_request.merged_at != null ? 'merged': res.data.state ; 
+            } else {
+                  pull_issue = 'issue';
+                  state = res.data.state;
+            }
+            console.log(pull_issue, state);
+            atag.classList.add(`pst-gh-${pull_issue}`)
+            atag.classList.add(`pst-gh-${state}`)
+        }
+     })
+
+  </script>
+  <style>
+    .pst-gh-open {
+    }
+    .pst-gh-closed {
+    }
+    .pst-gh-merged {
+    }
+    .pst-gh-open::before {
+        color: var(--pst-color-success);
+    }
+    .pst-gh-closed::before {
+        color: var(--pst-color-danger);
+    }
+
+    .pst-gh-merged::before {
+        color: var(--pst-color-accent);
+    }
+
+
+    .pst-gh-issue:before {
+        font-family: "Font Awesome 5 Free"; /* Ensure correct font family */
+        font-weight: 900; /* Adjust font weight if necessary */
+        content: "\f05a"; /* Unicode for the (i) icon */
+        margin-right: 5px; /* Optional: Adjust spacing between icon and text */
+        text-decoration: none;
+    }
+
+    .pst-gh-pull:before {
+        font-family: "Font Awesome 5 Free"; /* Ensure correct font family */
+        font-weight: 900; /* Adjust font weight if necessary */
+        content: "\f126"; /* Unicode for the pull-request icon */
+        margin-right: 5px; /* Optional: Adjust spacing between icon and text */
+        text-decoration: none;
+    }
+  </style>
   {{ _webpack.head_pre_assets() }}
   {{ _webpack.head_pre_icons() }}
   {{- css() }}