Improve supports

site/_includes/scripts.html

@@ -1,4 +1,4 @@
-<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script async defer src="https://buttons.github.io/buttons.js"></script>
@@ -12,9 +12,18 @@ $(function () {
 </script>
 {%- endif -%}
 
-<script src="{{ site.baseurl }}/assets/js/docs.min.js?m=1"></script>
-<script src="{{ site.baseurl }}/assets/js/supports.js?m=3"></script>
+{%- if page.layout == "home" -%}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/supports.js?m=4"></script>
+
+<script async src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
+<script>(function($) {
+  window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';
+}(jQuery))</script>
+{%- endif -%}
+
 <script src="https://gg.wenzhixin.net.cn/bootstrap-table/gg.js"></script>
+<script src="{{ site.baseurl }}/assets/js/docs.min.js?m=1"></script>
 
 {% include analytics.html %}
 

site/_includes/stylesheet.html

@@ -7,6 +7,6 @@
 {% endif %}
 {% if page.layout != "examples" %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
-<link href="{{ site.baseurl }}/assets/css/style.css?m=6" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/style.css?m=7" rel="stylesheet">
 {% endif %}
 {%- endif -%}

site/_includes/subscribe.html

@@ -32,6 +32,3 @@
   </div>
 </form>
 </div>
-
-<script async src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
-<script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>

site/_includes/supports.html

@@ -9,52 +9,48 @@
     </div>
   </div>
 
-  <div class="supports pt-5 pb-5">
-    <div>
-      <h3>Gold Sponsors</h3>
-    </div>
-
-    <div class="support-description">
-      <b>Gold Sponsors</b> are those who have pledged $100 or more to bootstrap-table.
-      <a href="https://opencollective.com/bootstrap-table#sponsor" target="_blank">
-        Become a gold sponsor
-      </a>
-    </div>
-
-    <div class="gold-sponsors">
-    </div>
-  </div>
-
-  <div class="supports pt-5 pb-5">
-    <div>
-      <h3>Bronze Sponsors</h3>
-    </div>
-
-    <div class="support-description">
-      <b>Bronze Sponsors</b> are those who have pledged $10 to $100 to bootstrap-table.
-      <a href="https://opencollective.com/bootstrap-table#sponsor" target="_blank">
-        Become a bronze sponsor
-      </a>
-    </div>
-
-    <div class="bronze-sponsors">
-    </div>
-  </div>
-
-  <div class="supports pt-5 pb-5">
-    <div>
-      <h3>Backers</h3>
-    </div>
-
-    <div class="support-description">
-      The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support bootstrap-table.
-      Every little bit helps, and we appreciate even the smallest contributions.
-      <a href="https://opencollective.com/bootstrap-table#sponsor" target="_blank">
-        Become a backer
-      </a>
-    </div>
-
-    <div class="support-backers">
+  <div id="supports" style="display: none">
+    <div
+      v-for="(rank, i) in ranks"
+      :key="i"
+      class="supports pt-5 pb-5"
+    >
+      <div>
+        <h3><span v-text="rank.title"></span> Sponsors</h3>
+      </div>
+
+      <div v-if="rank.title === 'Backer'" class="support-description">
+        The following <b>Backers</b> are individuals who have contributed various amounts of money in order to help support bootstrap-table.
+        Every little bit helps, and we appreciate even the smallest contributions.
+        <a href="https://opencollective.com/bootstrap-table#sponsor" target="_blank">
+          Become a backer
+        </a>
+      </div>
+
+      <div v-else class="support-description">
+        <b><span v-text="rank.title"></span> Sponsors</b> are those who have pledged $<span v-text="rank.minimum + (rank.maximum ? ' to $' + rank.maximum : ' or more')"></span> to bootstrap-table.
+        <a href="https://opencollective.com/bootstrap-table#section-contribute" target="_blank">
+          Become a sponsor
+        </a>
+      </div>
+
+      <div>
+        <a
+          v-for="support in rank.supports"
+          :key="support.slug"
+          :href="support.website || 'https://opencollective.com/' + support.slug"
+          :title="'$' + support.totalDonations + ' by ' + support.name || support.slug"
+          class="support-item"
+          target="_blank"
+        >
+          <img
+            :class="rank.title"
+            :src="support.avatar"
+            :alt="support.name || support.slug"
+            class="support-avatar"
+          >
+        </a>
+      </div>
     </div>
   </div>
 </div>

site/assets/css/style.css

@@ -151,17 +151,19 @@ header.themes .bd-lead {
   background-color: rgba(108,117,125,.25098);
 }
 
-.support-gold-avatar {
+.support-avatar.Gold {
   max-height: 96px;
   max-width: 288px;
-  min-height: 48px;
-  min-width: 48px;
-  vertical-align: middle;
 }
 
-.support-silver-avatar {
+.support-avatar.Bronze {
   max-height: 64px;
   max-width: 192px;
+}
+
+.support-avatar {
+  max-height: 48px;
+  max-width: 144px;
   min-height: 48px;
   min-width: 48px;
   vertical-align: middle;

site/assets/js/supports.js

@@ -15,48 +15,36 @@ $(function () {
     ].join('')
   }
 
-  $.getJSON('https://examples.wenzhixin.net.cn/opencollective/all.json', function (res) {
-    res.push({
-      website: 'https://edubirdie.com/write-my-essay',
-      totalAmountDonated: 600,
-      name: 'Write my essay services from Edubirdie',
-      image: window.baseurl + '/assets/images/edu-birdie.png',
-      isActive: true,
-      role: 'BACKER'
-    })
-
-    res.sort(function (a, b) {
-      return b.totalAmountDonated - a.totalAmountDonated
-    })
-
-    var goldSponsors = res.filter(function (item) {
-      var isGold = item.isActive &&
-        item.role === 'BACKER' &&
-        item.totalAmountDonated >= 100
-
-      if (isGold) {
-        item.classes = 'gold'
+  $.getJSON('https://examples.wenzhixin.net.cn/opencollective/supports.json', function (res) {
+    var ranks = [
+      {
+        title: 'Gold',
+        minimum: 200
+      },
+      {
+        title: 'Bronze',
+        minimum: 20,
+        maximum: 200
+      },
+      {
+        title: 'Backer',
+        maximum: 20
       }
-      return isGold
-    })
+    ]
 
-    var bronzeSponsors = res.filter(function (item) {
-      return item.isActive &&
-        item.role === 'BACKER' &&
-        item.totalAmountDonated >= 10 &&
-        item.totalAmountDonated < 100
+    ranks.forEach(function (rank) {
+      rank.supports = res.filter(function (row) {
+        return row.totalDonations >= (rank.minimum || 0) &&
+          row.totalDonations < (rank.maximum || Number.MAX_VALUE)
+      })
     })
 
-    var backers = res.filter(function (item) {
-      return item.isActive &&
-        item.role === 'BACKER' &&
-        item.totalAmountDonated < 10
+    new window.Vue({
+      el: '#supports',
+      data: {
+        ranks: ranks
+      }
     })
-
-    $('.gold-sponsors').html(goldSponsors.map(function (item) {
-      return createSupportItem(item, 'gold')
-    }).join(''))
-    $('.bronze-sponsors').html(bronzeSponsors.map(createSupportItem).join(''))
-    $('.support-backers').html(backers.map(createSupportItem).join(''))
+    $('#supports').show()
   })
 })