From 6b680cdc5e2e218d5ebdd01a39504d0f9b244753 Mon Sep 17 00:00:00 2001
From: Matt Wang <matt@matthewwang.me>
Date: Wed, 7 Jul 2021 16:32:21 -0700
Subject: [PATCH] static implementation of carousel

---
 assets/css/home.css |  55 ++++++++++++++++--
 index.html          | 133 ++++++++++++++++++++++++++------------------
 2 files changed, 130 insertions(+), 58 deletions(-)

diff --git a/assets/css/home.css b/assets/css/home.css
index 248d7ca4a1..803ab8cf09 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -228,7 +228,7 @@
 }
 
 .button {
-  width: 10em;
+  min-width: 10em;
 }
 
 .container {
@@ -273,7 +273,10 @@
   display: flex;
 }
 
-.col-4 {
+/* TODO: completely refactor this */
+/* we shouldn't be overriding the default .col-4 styles */
+
+.why-column-padder {
   width: 30.5%;
   text-align:center;
   vertical-align:top;
@@ -283,12 +286,12 @@
   margin-right: 0.5em;
 }
 
-.col-4 p {
+.why-column-padder p {
   margin-top: 1em;
   font-size: 1.2em;
 }
 
-.col-4 h2 {
+.why-column-padder h2 {
   font-size: 1.6em;
 }
 
@@ -316,3 +319,47 @@
     margin-right: auto;
   }
 }
+
+/* code for the carousel plugin */
+
+.plugin-card {
+  border: 1px solid rgba(0,0,0,.125);
+  border-radius: .25rem;
+}
+
+.plugin-card-header {
+  background-color: rgba(0,0,0,.03);
+  border-bottom: 1px solid rgba(0,0,0,.125);
+  padding: .5rem 1rem;
+}
+
+.plugin-card-body {
+  padding: 1rem 1rem;
+}
+
+.plugin-nav-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0 -0.5rem;
+  padding-left: 0;
+}
+
+.carousel-item {
+  display: none;
+}
+
+.carousel-item-show {
+  display: block;
+}
+
+.img-fluid {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+}
+
+.img-plugin {
+  max-width: 50%;
+}
diff --git a/index.html b/index.html
index 713a49705d..bb8595ee86 100644
--- a/index.html
+++ b/index.html
@@ -85,7 +85,7 @@ <h2>
             <h1>Why ImageJ?</h1>
             <header class="container-whyij">
               <div class="row-whyij">
-                <div class="col-4">
+                <div class="col-4 why-column-padder">
                   <div class="fa-5x text-success">
                     <span class="fas fa-bolt"></span>
                   </div>
@@ -102,7 +102,7 @@ <h2>Powerful</h2>
                   and much more.
                   </p>
                 </div>
-                <div class="col-4">
+                <div class="col-4 why-column-padder">
                   <div class=" fa-5x text-primary">
                     <span class="fas fa-cogs"></span>
                   </div>
@@ -112,7 +112,7 @@ <h2>Extensible</h2>
                   hundreds of plugins to assist with any of your imaging needs.
                   </p>
                 </div>
-                <div class="col-4">
+                <div class="col-4 why-column-padder">
                   <div class=" fa-5x text-danger">
                     <span class="fas fa-heart"></span>
                   </div>
@@ -132,68 +132,93 @@ <h2>Free &amp; Open Source</h2>
     </div>
   </section>
 
-  <div class="col-md-8">
-    <div class="card text-center">
-      <div class="card-header">
-        <ul class="nav nav-tabs card-header-tabs" id="plugin-tabs" role="tablist">
-          <!-- dynamically generated from plugins.json -->
-        </ul>
-      </div>
-      <div class="card-body">
-        <div class="tab-content" id="plugin-tab-content">
-          <!-- dynamically generated from plugins.json -->
+  <section class="main">
+    <div class="container">
+      <div class="row">
+        <div class="col-4">
+          <h2>Plugins</h2>
+          <p>
+            Fiji features thousands of plugins that aid in scientific image processing and analysis. Here are a few featured plugins hand-picked by the Fiji community - refresh the page to see different plugins!
+          </p>
+          <a class="button solid" href="{{site.baseurl}}/list-of-extensions">
+            Explore Extensions
+          </a>
+        </div>
+        <div class="col-8">
+          <div class="plugin-card">
+            <div class="plugin-card-header">
+              <ul class="plugin-nav-tabs" id="plugin-tabs" role="tablist">
+                <!-- dynamically generated from plugins.json -->
+              </ul>
+            </div>
+            <div class="plugin-card-body">
+              <div class="tab-content" id="plugin-tab-content">
+                <!-- dynamically generated from plugins.json -->
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  </section>
 
-<!-- Spotlight -->
-<!-- Bootstrap core JavaScript
+  <!-- plugin javascript
      ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->
-  <script src="/assets/js/jquery-3.4.1.min.js"></script>
   <script>
+    function slugify(text){
+      return text.toString().toLowerCase()
+        .replace(/\s+/g, '-')           // Replace spaces with -
+        .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
+        .replace(/\-\-+/g, '-')         // Replace multiple - with single -
+        .replace(/^-+/, '')             // Trim - from start of text
+        .replace(/-+$/, '');            // Trim - from end of text
+    }
+
     let first = true;
     const MAX_PLUGIN_COUNT = 6; // controls max number of tabs shown
+    fetch('/plugins.json')
+      .then(response => response.json())
+      .then((json) => {
+        let plugins = json.plugins;
+        // Fisher-Yates shuffle; see: https://javascript.info/task/shuffle
+        for (let i = plugins.length - 1; i > 0; i--) {
+          let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
+          [plugins[i], plugins[j]] = [plugins[j], plugins[i]]; // swap elements
+        }
+        if (plugins.length > MAX_PLUGIN_COUNT){
+          plugins = plugins.slice(0,MAX_PLUGIN_COUNT);
+        }
 
-    $.getJSON("/plugins.json", function(json) {
-      let plugins = json.plugins;
-      // Fisher-Yates shuffle; see: https://javascript.info/task/shuffle
-      for (let i = plugins.length - 1; i > 0; i--) {
-        let j = Math.floor(Math.random() * (i + 1)); // random index from 0 to i
-        [plugins[i], plugins[j]] = [plugins[j], plugins[i]]; // swap elements
-      }
-      if (plugins.length > MAX_PLUGIN_COUNT){
-        plugins = plugins.slice(0,MAX_PLUGIN_COUNT);
-      }
-      plugins.map(function(val){
-        // generating the tab header
-        let nameSlug = 'plugin-' + slugify(val.name);
-        let tabString = `
-          <li class="nav-item">
-            <a class="nav-link ${first ? 'active' : ''}" id="${nameSlug}-tab-header" data-toggle="tab" href="#${nameSlug}-tab" role="tab" aria-controls="${nameSlug}" aria-selected="true">${val.name}</a>
-          </li>
-        `
+        // TODO(mattxwang): we should probably properly sanitize inputs before injecting them
+        plugins.map((val) => {
+          // generating the tab header
+          let nameSlug = 'plugin-' + slugify(val.name);
+          let tabString = `
+            <li class="nav-item" role="presentation">
+              <button class="nav-link ${first ? 'active' : ''}" id="${nameSlug}-tab-header" data-bs-toggle="tab" data-bs-target="#${nameSlug}-tab" role="tab" aria-controls="${nameSlug}" aria-selected="true">${val.name}</button>
+            </li>
+          `
 
-        // generating the tab panel
-        let paneString = `
-        <div class="tab-pane fade ${first ? 'show active' : ''}" id="${nameSlug}-tab" role="tabpanel" aria-labelledby="${nameSlug}-tab-header">
-          ${val.imgUrl ?
-            '<img class="img-fluid img-plugin" alt="image showing ' + val.name + ' in action" src = "' + val.imgUrl + '" /> <hr />'
-            : ''
-          }
-          <h5 class="card-title">${val.name}</h5>
-          <p class="card-text">${val.description}</p>
-          <a href="${val.link}" class="btn btn-primary">More information</a>
-        </div>
-        `
-        $("#plugin-tabs").append(tabString);
-        $("#plugin-tab-content").append(paneString);
+          // generating the tab panel
+          let paneString = `
+          <div class="carousel-item ${first ? 'carousel-item-show' : ''}" id="${nameSlug}-tab" role="tabpanel" aria-labelledby="${nameSlug}-tab-header">
+            ${val.imgUrl ?
+              '<img class="img-fluid img-plugin" alt="image showing ' + val.name + ' in action" src = "' + val.imgUrl + '" /> <hr />'
+              : ''
+            }
+            <h3>${val.name}</h3>
+            <p>${val.description}</p>
+            <a href="${val.link}" class="button solid">More information</a>
+          </div>
+          `
 
+          document.getElementById("plugin-tabs").innerHTML += tabString;
+          document.getElementById("plugin-tab-content").innerHTML += paneString;
 
-        if (first){
-          first = false;
-        }
-      })
-    });
+          if (first){
+            first = false;
+          }
+        })
+      });
   </script>