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 · Sep 11, 2024 · d4b1af6 · d4b1af6
1 parent 80221a4
commit d4b1af6
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 5 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
@@ -20,12 +20,85 @@
   <!-- 
     this give us a css class that will be invisible only if js is disabled 
   -->
-  <noscript>
-    <style>
-      .pst-js-only { display: none !important; }
+  <script type="module">
+      import { Octokit, App } from "https://esm.sh/octokit";
+      const octokit = new Octokit();
+      const anchorTags = document.querySelectorAll('a');
 
-    </style>
-  </noscript>
+      // 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("[PST] Username:", username);
+            console.log("[PST] Repository:", repo);
+            console.log("[PST] 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() }}
   {{- css() }}
   {{ _webpack.head_js_preload() }}