From 702ac7f0bec5ba0bca01e19f255e975275f7c166 Mon Sep 17 00:00:00 2001
From: esemyonov <132259164+esemyonov@users.noreply.github.com>
Date: Thu, 16 Nov 2023 18:15:24 +0600
Subject: [PATCH 1/3] Ratemyopenapi integration (#1)

* feat(ratemyopenapi): data receiving

* feat(ratemyopenapi): added bagdes
---
 src/_includes/card.html               |  5 ++
 src/assets/javascript/apis.js         | 81 +++++++++++++++++++--------
 src/assets/scss/code-red-updates.scss |  3 +
 3 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/_includes/card.html b/src/_includes/card.html
index f2dcbd8..3159c87 100644
--- a/src/_includes/card.html
+++ b/src/_includes/card.html
@@ -22,6 +22,11 @@ <h2 title="{{=it.info.title }}">
         <footer>
           <h3> OpenAPI: </h3>
           <h4>Preferred Version - {{=it.preferred}}</h4>
+          {{? it.badge }}
+            <div class="badge">
+              <img src="{{=it.badge}}" alt="{{=it.info.title }} badge">
+            </div>
+          {{?}}
           <ul class="preferred-api">
             <li><a href="{{=it.api.swaggerUrl}}" target="_blank" >JSON</a></li>
             <li><a href='{{=it.api.swaggerYamlUrl}}' target="_blank" >YAML</a></li>
diff --git a/src/assets/javascript/apis.js b/src/assets/javascript/apis.js
index b9b9420..d9aa9f7 100644
--- a/src/assets/javascript/apis.js
+++ b/src/assets/javascript/apis.js
@@ -63,12 +63,14 @@ function CardModel() {
     this.cardDescription = '';
     this.added = null;
     this.updated = null;
+    this.badge = '';
 }
 
 CardModel.prototype.fromAPIs = function(name, apis) {
     this.preferred = apis.preferred;
     this.api = apis.versions[this.preferred];
     this.info = this.api.info;
+    this.badge = this.api.badge;
     this.externalDocs = this.api.externalDocs || {};
     this.contact = this.info.contact || {};
     this.externalUrl = this.externalDocs.url || this.contact.url || (name.indexOf('.local') < 0 ? 'https://'+name.split(':')[0] : '');
@@ -128,6 +130,19 @@ CardModel.prototype.fromAPIs = function(name, apis) {
     return this;
 };
 
+function getScoreStrokeColor(score) {
+  switch (true) {
+    case score === 0:
+      return "gray";
+    case score >= 80:
+      return "green";
+    case score >= 50 && score < 80:
+      return "yellow";
+    case score > 0 && score < 50:
+      return "red";
+  }
+}
+
 if (window.$) {
   $(document).ready(function () {
     var cardTemplateSrc = document.querySelector('script[type="text/dot-template"]').innerText;
@@ -187,38 +202,60 @@ if (window.$) {
        newData = true;
     }
 
-    $.ajax({
-      type: "GET",
-      url: (newData ? "https://raw.githubusercontent.com/APIs-guru/openapi-directory/gh-pages/v2/list.json" : "https://api.apis.guru/v2/list.json"),
-      dataType: 'json',
-      cache: true,
-      success: function (data) {
-        $('#apis-list').empty();
+    $.ajaxSetup({ cache: true });
+    $.when(
+      $.getJSON(newData ? "https://raw.githubusercontent.com/APIs-guru/openapi-directory/gh-pages/v2/list.json" : "https://api.apis.guru/v2/list.json"),
+      $.getJSON("https://storage.googleapis.com/rate-my-openapi-public/apis-guru/ratings.json"),
+    )
+    .done(function(apiList, apiRatings) {
+      const [ratings] = apiRatings;
+      let [resultApiList] = apiList;
+
+      ratings.forEach(function(ratingItem) {
+        const [_, apiName, version] = ratingItem.file.split('/');
+        let api = resultApiList[apiName];
+        
+        if (api && ratingItem.score !== null) {
+          const badgeColor = getScoreStrokeColor(ratingItem.score);
+
+          resultApiList[apiName] = {
+            ...api,
+            versions: {
+              ...api.versions,
+              [version]: {
+                ...api.versions[version],
+                badge: `https://img.shields.io/badge/ratemyopenapi-${ratingItem.score}-${badgeColor}`
+              }
+            }
+          };
+        }
+      });
+
+      $('#apis-list').empty();
         let search = $('#search-input').val().toLowerCase();
         if (search || category || tag || status) {
-            let result = filter(data, search, category, tag, status);
-            updateCards(result);
+          let result = filter(resultApiList, search, category, tag, status);
+          updateCards(result);
         }
         else {
-            updateCards(data);
+          updateCards(resultApiList);
         }
 
         var searchInput = $('#search-input')[0];
         searchInput.addEventListener('keyup', debounce(function() {
-            $('#apis-list').empty();
+          $('#apis-list').empty();
 
-            let search = $('#search-input').val().toLowerCase();
-            history.replaceState(null, '', '/' + (search ? '?q='+encodeURIComponent(search) : ''));
-            if (search) {
-              $('#btnCopy').show();
-            }
-            else {
-              $('#btnCopy').hide();
-            }
-            let result = filter(data, search, category, tag, status);
-            updateCards(result);
+          let search = $('#search-input').val().toLowerCase();
+          history.replaceState(null, '', '/' + (search ? '?q='+encodeURIComponent(search) : ''));
+          if (search) {
+            $('#btnCopy').show();
+          }
+          else {
+            $('#btnCopy').hide();
+          }
+          let result = filter(resultApiList, search, category, tag, status);
+          updateCards(result);
         }, 333), false);
-      }
     });
 
     for (let i=0;i<15;i++) { updateCards(dummy); }
diff --git a/src/assets/scss/code-red-updates.scss b/src/assets/scss/code-red-updates.scss
index e5788ef..a7aa320 100644
--- a/src/assets/scss/code-red-updates.scss
+++ b/src/assets/scss/code-red-updates.scss
@@ -128,6 +128,9 @@
     cursor: pointer;
 }
 
+.card footer .badge {
+    padding: 5px 0 7px;
+}
 .support {
     text-align: center;
     & p {

From 28415359fb6a52c879806d259f5d77593bf08ce9 Mon Sep 17 00:00:00 2001
From: Nathan Totten <nathan@ntotten.com>
Date: Thu, 16 Nov 2023 12:28:14 -0500
Subject: [PATCH 2/3] style updates

---
 src/_includes/card.html               |  8 +++++---
 src/assets/javascript/apis.js         | 15 ++++++++++-----
 src/assets/scss/code-red-updates.scss |  7 ++++---
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/_includes/card.html b/src/_includes/card.html
index 3159c87..726fcfd 100644
--- a/src/_includes/card.html
+++ b/src/_includes/card.html
@@ -22,9 +22,11 @@ <h2 title="{{=it.info.title }}">
         <footer>
           <h3> OpenAPI: </h3>
           <h4>Preferred Version - {{=it.preferred}}</h4>
-          {{? it.badge }}
-            <div class="badge">
-              <img src="{{=it.badge}}" alt="{{=it.info.title }} badge">
+          {{? it.rating }}
+            <div class="rating">
+              <a class="badge" href="https://ratemyopenapi.com/report/{{=it.rating.reportId }}?source=external" target="_blank">
+                <img src="https://img.shields.io/badge/ratemyopenapi-{{=it.rating.score }}-{{=it.rating.color }}" alt="API score {{=it.rating.score }}">
+              </a>
             </div>
           {{?}}
           <ul class="preferred-api">
diff --git a/src/assets/javascript/apis.js b/src/assets/javascript/apis.js
index d9aa9f7..1d1ade2 100644
--- a/src/assets/javascript/apis.js
+++ b/src/assets/javascript/apis.js
@@ -63,14 +63,14 @@ function CardModel() {
     this.cardDescription = '';
     this.added = null;
     this.updated = null;
-    this.badge = '';
+    this.rating = null;
 }
 
 CardModel.prototype.fromAPIs = function(name, apis) {
     this.preferred = apis.preferred;
     this.api = apis.versions[this.preferred];
     this.info = this.api.info;
-    this.badge = this.api.badge;
+    this.rating = this.api.rating;
     this.externalDocs = this.api.externalDocs || {};
     this.contact = this.info.contact || {};
     this.externalUrl = this.externalDocs.url || this.contact.url || (name.indexOf('.local') < 0 ? 'https://'+name.split(':')[0] : '');
@@ -152,6 +152,7 @@ if (window.$) {
         var fragment = $(document.createDocumentFragment());
         $.each(data, function (name, apis) {
             var model = new CardModel().fromAPIs(name, apis);
+            console.log(model)
             var view = cardTemplate(model);
             fragment.append($(view));
         });
@@ -212,9 +213,8 @@ if (window.$) {
       let [resultApiList] = apiList;
 
       ratings.forEach(function(ratingItem) {
-        const [_, apiName, version] = ratingItem.file.split('/');
+        const { name: apiName, version } = ratingItem;
         let api = resultApiList[apiName];
-        
         if (api && ratingItem.score !== null) {
           const badgeColor = getScoreStrokeColor(ratingItem.score);
 
@@ -224,10 +224,15 @@ if (window.$) {
               ...api.versions,
               [version]: {
                 ...api.versions[version],
-                badge: `https://img.shields.io/badge/ratemyopenapi-${ratingItem.score}-${badgeColor}`
+                rating: {
+                  score: ratingItem.score,
+                  ratingId: ratingItem.ratingId,
+                  color: badgeColor, 
+                }
               }
             }
           };
+          console.log(resultApiList[apiName])
         }
       });
 
diff --git a/src/assets/scss/code-red-updates.scss b/src/assets/scss/code-red-updates.scss
index a7aa320..0624703 100644
--- a/src/assets/scss/code-red-updates.scss
+++ b/src/assets/scss/code-red-updates.scss
@@ -113,7 +113,7 @@
     font-size: 0.8em;
 }
 
-.card footer a {
+.card footer a:not(.badge) {
     padding: .1em .5em .1em;
     background-color: #388c9a;
     border-radius: 2px;
@@ -128,9 +128,10 @@
     cursor: pointer;
 }
 
-.card footer .badge {
-    padding: 5px 0 7px;
+.card footer .rating {
+    padding-bottom: 7px;
 }
+
 .support {
     text-align: center;
     & p {

From 1e34db910ae8ffcae6c51adf930561e360d01369 Mon Sep 17 00:00:00 2001
From: Nathan Totten <nathan@ntotten.com>
Date: Thu, 16 Nov 2023 13:51:01 -0500
Subject: [PATCH 3/3] updated api links

---
 src/assets/javascript/apis.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/assets/javascript/apis.js b/src/assets/javascript/apis.js
index 1d1ade2..082b1a0 100644
--- a/src/assets/javascript/apis.js
+++ b/src/assets/javascript/apis.js
@@ -152,7 +152,6 @@ if (window.$) {
         var fragment = $(document.createDocumentFragment());
         $.each(data, function (name, apis) {
             var model = new CardModel().fromAPIs(name, apis);
-            console.log(model)
             var view = cardTemplate(model);
             fragment.append($(view));
         });
@@ -217,7 +216,6 @@ if (window.$) {
         let api = resultApiList[apiName];
         if (api && ratingItem.score !== null) {
           const badgeColor = getScoreStrokeColor(ratingItem.score);
-
           resultApiList[apiName] = {
             ...api,
             versions: {
@@ -226,13 +224,12 @@ if (window.$) {
                 ...api.versions[version],
                 rating: {
                   score: ratingItem.score,
-                  ratingId: ratingItem.ratingId,
+                  reportId: ratingItem.reportId,
                   color: badgeColor, 
                 }
               }
             }
           };
-          console.log(resultApiList[apiName])
         }
       });