From ff3f66a8103bfa9a7797bc80ef33aebe3a8a107e Mon Sep 17 00:00:00 2001
From: M Bussonnier <bussonniermatthias@gmail.com>
Date: Wed, 11 Sep 2024 11:16:22 +0200
Subject: [PATCH] POC: use js to show status of gh issues and PR

See #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.
---
 docs/community/topics/kitchen-sink.md         |  6 ++
 .../theme/pydata_sphinx_theme/layout.html     | 83 +++++++++++++++++--
 2 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/docs/community/topics/kitchen-sink.md b/docs/community/topics/kitchen-sink.md
index 2a4b2b410..951fde7e9 100644
--- 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
index 39e1c7a6f..542a406f5 100644
--- 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() }}