From 116ec5d2eb496b802d3669b0a790354843cae8e3 Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Thu, 14 Mar 2024 23:54:35 +0100
Subject: [PATCH] Add Plaudit endorsements for articles with a DOI

For now, this merely displays a count of existing endorsements,
rather than fetching the actual names of the endorsers from ORCID,
to keep the implementation fully client-side and avoid having to
authenticate against the ORCID Public API.
---
 browse/static/js/plaudit.js         | 49 +++++++++++++++++++++++++++++
 browse/static/js/toggle-labs.js     |  7 +++++
 browse/templates/abs/labs_tabs.html | 25 +++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 browse/static/js/plaudit.js

diff --git a/browse/static/js/plaudit.js b/browse/static/js/plaudit.js
new file mode 100644
index 000000000..2c9154284
--- /dev/null
+++ b/browse/static/js/plaudit.js
@@ -0,0 +1,49 @@
+(async function () {
+  $output = $('#plauditContainer');
+  const articleDoi = $output[0].dataset.doi;
+  const articleTitleElementContent = document
+    .querySelector("h1.title")
+    .textContent;
+  const articleTitle = articleTitleElementContent.startsWith("Title:")
+    // The `h1.title` has a `span.description` preceding the title that just
+    // says "Title:", so we'll need to strip that off:
+    ? articleTitleElementContent.substring("Title:".length)
+    : articleTitleElementContent;
+
+  const endorsementsResponse = await fetch(
+    `https://api.eventdata.crossref.org/v1/events?mailto=arxiv_integration@plaudit.pub&obj-id=${encodeURIComponent(`https://doi.org/${articleDoi}`)}&source=plaudit`
+  );
+  /**
+   * @type {{
+   *   status: "ok",
+   *   "message-type": "event-list",
+   *   message: {
+   *     "total-results": number,
+   *     events: Array<{
+   *       obj_id: `https://doi.org/10.${string}`,
+   *       subj_id:	`https://orcid.org/${string}`,
+   *       occurred_at: string,
+   *       source_id: "plaudit",
+   *       action: "add",
+   *     }>,
+   *   },
+   * }}
+   */
+  const endorsementsData = await endorsementsResponse.json();
+
+  const endorsements = endorsementsData.message.events.filter(
+    event => event.source_id === "plaudit" && event.action === "add",
+  );
+
+  const endorsementDescription = document.createElement("p");
+  endorsementDescription.innerHTML = endorsements.length === 0
+    ? `
+      <a href="https://plaudit.pub/endorsements/doi:${articleDoi}" target="_blank" rel="noopener noreferrer">
+        Be the first to endorse <b>${articleTitle}</b>.
+      </a>`
+    : `
+      <a href="https://plaudit.pub/endorsements/doi:${articleDoi}" target="_blank" rel="noopener noreferrer">
+        View ${endorsements.length} endorsement${endorsements.length > 0 && "s"} of <b>${articleTitle}</b>, or add your own.
+      </a>`
+  $output.append(endorsementDescription);
+})();
\ No newline at end of file
diff --git a/browse/static/js/toggle-labs.js b/browse/static/js/toggle-labs.js
index d4222299b..76f53c539 100644
--- a/browse/static/js/toggle-labs.js
+++ b/browse/static/js/toggle-labs.js
@@ -25,6 +25,7 @@ $(document).ready(function() {
     "influenceflower": $('#influenceflower-toggle').data('script-url'),
     "sciencecast": $('#sciencecast-toggle').data('script-url'),
     "gotitpub": $('#gotitpub-toggle').data('script-url'),
+    "plaudit": $('#plaudit-toggle').data('script-url'),
     "bibex": {
       "url": "https://static.arxiv.org/js/bibex/bibex.js?20210223",
       "container": "#bib-main"
@@ -75,6 +76,10 @@ $(document).ready(function() {
           $.cachedScript(scripts["paperwithcode"]).done(function(script, textStatus) {
             console.log(textStatus);
           });
+        } else if (key == "plaudit-toggle") {
+          $.cachedScript(scripts["plaudit"]).done(function(script, textStatus) {
+            console.log(textStatus);
+          });
         } else if (key === "replicate-toggle") {
           $.cachedScript(scripts["replicate"]).done(function(script, textStatus) {
             // console.log(textStatus, "replicate (on cookie check)");
@@ -179,6 +184,8 @@ $(document).ready(function() {
       $.cachedScript(scripts["paperwithcode"]).done(function(script, textStatus) {
         console.log(textStatus);
       });
+    } else if ($(this).attr("id") == "plaudit-toggle") {
+      $.cachedScript(scripts["plaudit"]).done(function(script, textStatus) {});
     } else if ($(this).attr("id") == "replicate-toggle") {
       $.cachedScript(scripts["replicate"]).done(function(script, textStatus) {
         // console.log(textStatus, "replicate (on lab toggle)");
diff --git a/browse/templates/abs/labs_tabs.html b/browse/templates/abs/labs_tabs.html
index 69fa4bef1..b28caae75 100644
--- a/browse/templates/abs/labs_tabs.html
+++ b/browse/templates/abs/labs_tabs.html
@@ -169,6 +169,31 @@ <h1>Code, Data and Media Associated with this Article</h1>
       <div id="pwc-data-output" style="display:none"></div>
       <div id="sciencecast-output" style="display:none"></div>
     </div>
+    {%- if abs_meta.doi -%}
+    <input type="radio" name="tabs" id="tabfive">
+    <label for="tabfive">Endorsements</label>
+    <div class="tab">
+      <h1>Endorsements</h1>
+      <div class="toggle">
+        <div class="columns is-mobile lab-row">
+          <div class="column lab-switch">
+            <label class="switch">
+              <input
+                id="plaudit-toggle"
+                data-script-url="{{ url_for('static', filename='js/plaudit.js') }}"
+                type="checkbox" class="lab-toggle" aria-labelledby="label-for-plaudit">
+              <span class="slider"></span>
+              <span class="is-sr-only">Plaudit endorsements toggle</span>
+            </label>
+          </div>
+          <div class="column lab-name">
+            <span id="label-for-plaudit">Plaudit endorsements</span> <em>(<a href="https://labs.arxiv.org/">What is Plaudit?</a>)</em>
+          </div>
+        </div>
+      </div>
+      <div id="plauditContainer" data-doi="{{ abs_meta.doi }}"></div>
+    </div>
+    {% endif %}
 
 
       <input type="radio" name="tabs" id="labstabs-demos-input">