index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Fiji: A batteries-included distribution of ImageJ.">
  <meta name="author" content="The Fiji Team">
  <link rel="shortcut icon" href="site/ico/favicon.ico">

  <title>Fiji: ImageJ, with "Batteries Included"</title>

  <!-- Bootstrap core CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

  <!-- Custom site styling -->
  <link href="site/css/style.css?v1.0.0" rel="stylesheet">

  <!-- UAParser.js - https://docs.uaparser.dev/ -->
  <script src="site/js/ua-parser.min.js"></script>

  <!-- Geolib - https://github.com/manuelbieh/geolib -->
  <script src="https://cdn.jsdelivr.net/npm/geolib@3.3.4/lib/index.min.js" integrity="sha384-NjoyEEeJoKbSiXKYLjyH72gT5ZK+3myZB3zLyxf8i6k94c/dGoe66u+SRGuPqMgT" crossorigin="anonymous"></script>

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v6.7.2/js/solid.js"
    integrity="sha384-Jx4lvM3f1foL3gcKtEZPpp/IOxYaIOJ+KQRq3vP7Towpgy4bjb6wo5QK5VRtnpLh" crossorigin="anonymous">
  </script>
  <script defer src="https://use.fontawesome.com/releases/v6.7.2/js/brands.js"
    integrity="sha384-wRU6vtIpkIdXnWzp+Hq7CNH527PHkmlZz1n7ITVY0YhEPUcSlz2voGAQfVb3d9xe" crossorigin="anonymous">
  </script>
  <script defer src="https://use.fontawesome.com/releases/v6.7.2/js/fontawesome.js"
    integrity="sha384-dCcP+1ToHaZKWNvVqy4+4ekZYXP73UfD3KsBQ0xg54c0+R0I6zsewwjQiM3JUwg+" crossorigin="anonymous">
  </script>
</head>

<body role="document">
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" role="navigation">
    <div class="container">
      <a class="navbar-brand" href="/">
        <img width="30" height="30" class="d-inline-block align-top" src="site/logo.png" alt="Fiji logo" /> Fiji</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://imagej.net/software/fiji">Wiki</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/fiji">Source</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://forum.image.sc/tag/fiji">Forum</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container" role="main">

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <!-- See: https://getbootstrap.com/docs/5.0/examples/jumbotron/ -->
    <div class="p-5 mb-4 bg-light rounded-3">
      <div class="row">
        <div class="col-12 col-md-4 col-lg-3">
          <img class="img-fluid img-logo" src="site/logo.png" alt="Fiji logo" />
        </div>
        <div class="col-12 col-md-8 col-lg-9">
          <h1 class="display-3">Fiji</h1>
          <p>
            Fiji is an image processing package &mdash;
            a "batteries-included" distribution of
            <a href="https://imagej.net/">ImageJ</a>,
            bundling many plugins which facilitate scientific image analysis.
          </p>

          <!-- Download section -->
          <div class="download-section d-flex flex-column flex-lg-row">

            <!-- Download button -->
            <div class="download-button-container mb-3 mb-lg-0 col-lg-6 pe-lg-3">
              <div class="btn-group w-100">
                <a href="#" class="btn btn-lg btn-success w-100" id="auto-download">
                  Choose a download &#8594;
                </a>
                <button type="button" class="btn btn-lg btn-success dropdown-toggle dropdown-toggle-split"
                        data-bs-toggle="dropdown" aria-expanded="false" id="download-dropdown">
                  <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end" id="download-options">
                  <!-- Options will be dynamically populated -->
                </ul>
              </div>
            </div>

            <!-- Download option toggles -->
            <div class="toggles-container col-lg-6 ps-lg-4 ps-xl-3">

              <!-- Distribution toggle -->
              <div class="download-toggle row mb-2">
                <label class="col-5 col-xs-4 col-xxl-3 col-form-label">Distribution</label>
                <div class="col-7 col-xs-8 ps-3">
                  <div class="btn-group w-100" role="group">
                    <input type="radio" class="btn-check" name="distribution" id="dist-latest" value="latest" checked>
                    <label class="btn btn-outline-secondary" for="dist-latest" title="The newest and shiniest version of Fiji. More frequent updates with bug-fixes and new features, but maybe also more bugs.">Latest</label>
                    <input type="radio" class="btn-check" name="distribution" id="dist-stable" value="stable">
                    <label class="btn btn-outline-secondary" for="dist-stable" title="The safe and rarely changing version of Fiji. Use this if you need Fiji to remain exactly the same for a long period of time.">Stable</label>
                  </div>
                </div>
              </div>

              <!-- Java toggle -->
              <div class="download-toggle row mb-2">
                <label class="col-5 col-xs-4 col-xxl-3 col-form-label">Bundled&nbsp;Java</label>
                <div class="col-7 col-xs-8 ps-3">
                  <div class="btn-group w-100" role="group">
                    <input type="radio" class="btn-check" name="java" id="java-jdk" value="jdk" checked>
                    <label class="btn btn-outline-secondary" for="java-jdk" title="Include a full copy of Java, so that all Fiji features work directly.">JDK</label>
                    <input type="radio" class="btn-check" name="java" id="java-jre" value="jre" title="Hello">
                    <label class="btn btn-outline-secondary" for="java-jre" title="Include a slim copy of Java. Smaller download size than the JDK version, but on-the-fly compilation of Java source code will not work.">JRE</label>
                    <input type="radio" class="btn-check" name="java" id="java-none" value="none">
                    <label class="btn btn-outline-secondary" for="java-none" title="Do not include a copy of Java. You will need to install Java yourself.">None</label>
                  </div>
                </div>
              </div>

              <!-- Mirror toggle -->
              <div class="download-toggle row">
                <label class="col-5 col-xs-4 col-xxl-3 col-form-label">Mirror</label>
                <div class="col-7 col-xs-8 ps-3">
                  <div class="btn-group w-100" role="group">
                    <input type="radio" class="btn-check" name="mirror" id="mirror-us" value="US" checked>
                    <label class="btn btn-outline-secondary" for="mirror-us" title="Download Fiji from UW-Madison in Wisconsin, USA.">US</label>
                    <!--
                    <input type="radio" class="btn-check" name="mirror" id="mirror-uk" value="UK">
                    <label class="btn btn-outline-secondary" for="mirror-uk" title="Download Fiji from Oxford in England.">UK</label>
                    -->
                  </div>
                </div>
              </div>
            </div>
          </div>

          <hr />
          <p>
            <a href="https://imagej.net/software/fiji/downloads#other-downloads" class="btn btn-success mb-1"><span class="fas fa-download"></span> More Downloads</a>
            <a class="btn btn-primary mb-1" href="#cite"><span class="fas fa-quote-left"></span> Cite</a>
            <a class="btn btn-dark mb-1" href="https://github.com/fiji"><span class="fab fa-github"></span> Contribute</a>
          </p>
        </div>
      </div>
    </div>

    <h1 class="text-center">Why Fiji?</h1>
    <div class="row text-center">
      <div class="col-12 col-md-4">
        <div class=" fa-5x text-success"><span class="fas fa-check-circle"></span></div>
        <h2>Easy to Use</h2>
        <p>
          Fiji is easy to use and install - in one-click, Fiji installs all of its plugins, features an automatic updater, and offers comprehensive documentation.
        </p>
      </div>
      <div class="col-12 col-md-4">
        <div class=" fa-5x text-primary"><span class="fas fa-cogs"></span></div>
        <h2>Powerful</h2>
        <p>
          Fiji bundles together many popular and useful ImageJ plugins for image analysis into one installation, and automatically manages their dependencies and updating.
        </p>
      </div>
      <div class="col-12 col-md-4">
        <div class=" fa-5x text-danger"><span class="fas fa-heart"></span></div>
        <h2>Free &amp; Open Source</h2>
        <p>
          Like ImageJ itself, Fiji is an <a href="https://imagej.net/licensing/open-source">open source</a> project hosted on <a href="https://github.com/fiji">GitHub</a>, developed and written by the community.
        </p>
      </div>
    </div>
    <hr />
    <div class="row">
      <div class="col-md-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>
        <p>
          <a class="btn btn-outline-primary" href="https://imagej.net/list-of-extensions">List of All Plugins</a>
        </p>
      </div>
      <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 -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="row">
      <div class="col-md-6">
        <h2>Contributors</h2>
        <p>
          Fiji is developed by <a href="https://imagej.net/people">contributors around the world</a>, and <a href="https://imagej.net/contribute/funding">funded from various sources</a>. It is maintained by the <a href="https://imagej.net/orgs/loci">Eliceiri/LOCI group</a> at the University of Wisconsin-Madison, the <a href="https://imagej.net/people/fjug">Jug</a> group at <a href="https://imagej.net/orgs/human-technopole">Human Technopole</a> in Milan, and <a href="https://imagej.net/people/tomancak">Tomancak</a> lab at the <a href="https://imagej.net/orgs/mpi-cbg">MPI-CBG</a> in Dresden.
        </p>
        <p class="card-text">
          Fiji is an <a href="https://imagej.net/licensing/open-source">open source</a> project, so everybody is welcome to <a href="https://imagej.net/software/fiji/#contributing">contribute</a> with plugins, patches, bug reports, tutorials, documentation, and artwork.
        </p>
        <p>
          <a class="btn btn-outline-primary" href="https://imagej.net/software/fiji/#contributing">Read more</a>
        </p>
        <hr />
        <h2>Licensing</h2>
        <p>
          Fiji is licensed under the <a href="https://imagej.net/licensing/gpl">GNU General Public License</a>. It builds on top of the <a href="https://imagej.net/software/imagej2">ImageJ2</a> core, which is licensed under the permissive <a href="https://imagej.net/licensing/bsd#simplified-bsd-license">BSD 2-clause license</a>. Plugins and other components have <a href="https://github.com/fiji/fiji/blob/master/LICENSES">their own licenses</a>.
        </p>
        <p>
          <a class="btn btn-outline-primary btn-lg" href="https://imagej.net/licensing">Read more</a>
        </p>
        <hr />
        <h2 id="cite">Citing Fiji</h2>
        <p>
          Like most scientific software, funding for the Fiji project is driven by <a href="https://scholar.google.com/scholar?as_sdt=0,5&hl=en&scisbd=1&sciodt=0,5&cites=17249863664147333646&scipsc=">citations</a>. If you use Fiji, please <a href="https://imagej.net/contribute/citing">cite it</a> in your publications!
        </p>
        <p>
          <a class="btn btn-outline-primary btn-lg" href="https://imagej.net/contribute/citing">Read more</a>
        </p>
        <hr class="d-md-none" />
      </div>
      <div class="col-md-6">
        <h2>Partnered Projects</h2>
        <p>
          The Fiji project is driven by a strong desire to improve the tools available for life sciences to process and analyze data. To this end, Fiji collaborates closely with the following projects:
        </p>
        <div class="row text-center d-flex align-items-end">
          <div class="col-4">
            <a href="https://imagej.net/software/imagej">
              <img class="img-fluid partner-icon" src="site/img/imagej.png" alt="ImageJ logo" />
            </a>
            <p>
              <a href="https://imagej.net/software/imagej">ImageJ</a>
            </p>
          </div>
          <div class="col-4">
            <a href="https://imagej.net/software/imagej2">
              <img class="img-fluid partner-icon" src="site/img/imagej2.png" alt="ImageJ2 logo" />
            </a>
            <p>
              <a href="https://imagej.net/software/imagej2">ImageJ2</a>
            </p>
          </div>
          <div class="col-4">
            <a href="https://imagej.net/software/micro-manager">
              <img class="img-fluid partner-icon" src="site/img/micromanager.jpg" alt="Micro-Manager logo" />
            </a>
            <p>
              <a href="https://imagej.net/software/micro-manager">&micro;Manager</a>
            </p>
          </div>
          <div class="col-4">
            <a href="https://imagej.net/software/knime">
              <img class="img-fluid partner-icon" src="site/img/knime.svg" alt="KNIME logo" />
            </a>
            <p>
              <a href="https://imagej.net/software/knime">KNIME</a>
            </p>
          </div>
          <div class="col-4">
            <a href="https://imagej.net/formats/bio-formats">
              <img class="img-fluid partner-icon" src="site/img/bio-formats.png" alt="Bio-Formats logo" />
            </a>
            <p>
              <a href="https://imagej.net/formats/bio-formats">Bio-Formats</a>
            </p>
          </div>
          <div class="col-4">
            <a href="https://imagej.net/software/omero">
              <img class="img-fluid partner-icon" src="site/img/ome.png" alt="OME logo" />
            </a>
            <p>
              <a href="https://imagej.net/software/omero">OME</a>
            </p>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <footer class="text-center">
      <p>
        Made with <span class="fas fa-heart" style="color:red"></span> by the <a href="https://imagej.net/people/#fiji">Fiji team</a>
      </p>
      <p>
        <a href="https://github.com/fiji"><span class="fab fa-lg fa-github" style="color:black"></span></a>
        <a href="https://twitter.com/FijiSc"><span class="fab fa-lg fa-twitter" style="color:#48A1EB"></span></a>
      </p>
    </footer>
  </div>

  <!-- Bootstrap core JavaScript
      ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
  <script>
    // -- Download selector --

    const mirrors = {
      US: {
        prefix: 'https://downloads.imagej.net/fiji/',
        coords: {latitude: 43.076, longitude: -89.415}
      },
      UK: {
        prefix: 'https://downloads.micron.ox.ac.uk/fiji_update/mirrors/fiji-',
        coords: {latitude: 51.757, longitude: -1.255}
      }
    };

    const downloadLinks = {
      latest: {
        linux_arm64: {
          prefix: 'fiji-latest-linux-arm64',
          icon: 'fab fa-linux',
          text: 'for Linux &nbsp;|&nbsp; arm64'
        },
        linux_x64: {
          prefix: 'fiji-latest-linux64',
          icon: 'fab fa-linux',
          text: 'for Linux &nbsp;|&nbsp; x86-64',
          divider: true
        },
        macos_arm64: {
          prefix: 'fiji-latest-macos-arm64',
          icon: 'fab fa-apple',
          text: 'for macOS &nbsp;|&nbsp; Apple silicon'
        },
        macos_x64: {
          prefix: 'fiji-latest-macos64',
          icon: 'fab fa-apple',
          text: 'for macOS &nbsp;|&nbsp; Intel',
          divider: true
        },
        /*
        windows_arm64: {
          prefix: 'fiji-latest-win-arm64',
          icon: 'fab fa-windows',
          text: 'for Windows &nbsp;|&nbsp; arm64'
        },
        */
        windows_x64: {
          prefix: 'fiji-latest-win64',
          icon: 'fab fa-windows',
          text: 'for Windows &nbsp;|&nbsp; x86-64',
          divider: true
        },
        other: {
          prefix: 'fiji-latest-portable',
          icon: 'fa fa-rocket',
          text: 'portable &nbsp;|&nbsp; no bundled Java'
        }
      },
      stable: {
        linux_x64: {
          prefix: 'fiji-stable-linux64',
          icon: 'fab fa-linux',
          text: 'for Linux &nbsp;|&nbsp; x86-64',
          divider: true
        },
        macosx: {
          prefix: 'fiji-stable-macosx',
          icon: 'fab fa-apple',
          text: 'for macOS &nbsp;|&nbsp; Intel',
          divider: true
        },
        windows_x32: {
          prefix: 'fiji-stable-win32',
          icon: 'fab fa-windows',
          text: 'for Windows &nbsp;|&nbsp; x86-32'
        },
        windows_x64: {
          prefix: 'fiji-stable-win64',
          icon: 'fab fa-windows',
          text: 'for Windows &nbsp;|&nbsp; x86-64',
          divider: true
        },
        other: {
          prefix: 'fiji-stable-portable',
          icon: 'fa fa-rocket',
          text: 'portable &nbsp;|&nbsp; no bundled Java'
        }
      }
    };

    function selectedDistribution() {
      return document.querySelector('input[name="distribution"]:checked').value;
    }

    function selectedJava() {
      return document.querySelector('input[name="java"]:checked').value;
    }

    function selectedMirror() {
      return document.querySelector('input[name="mirror"]:checked').value;
    }

    function javaSlug(prefix, java, force) {
      if (prefix.endsWith('-portable')) {
        // Portable bundle never includes Java.
        return force ? 'nojava' : '';
      }
      if (java === 'none') {
        // Platform-specific bundle always includes Java.
        return 'jdk';
      }
      return java;
    }

    function urlForDownload(option, distro, java, mirror) {
      if (option === undefined) return undefined;
      const prefix = option['prefix'];
      const suffix = javaSlug(prefix, java, true)
      return `${mirrors[mirror].prefix}${distro}/${prefix}-${suffix}.zip`;
    }

    function updateDownloadOptions() {
      const distro = selectedDistribution();
      const java = selectedJava();
      const mirror = selectedMirror();
      currentPlatform = java === 'none' ? 'other' : autoDetectPlatform();
      setDownload(currentPlatform, distro, java, mirror);
      updateDropdownOptions(distro, java, mirror);
    }

    function setDownload(platform, distro, java, mirror) {
      const autoDownload = document.getElementById('auto-download');
      autoDownload.classList.remove('btn-danger');
      autoDownload.classList.add('btn-success');
      const option = downloadLinks[distro][platform];
      const url = urlForDownload(option, distro, java, mirror);
      if (url === undefined) return;
      autoDownload.href = url;
      const javaLabel = platform === 'other' || java === 'none' ?
        '' : ` &nbsp;|&nbsp; ${java}`;
      const downloadText = '<span class="big-text">Download</span><br>' +
        `<span class="scaled-text">${distro} ` +
        `&nbsp;|&nbsp; ${option['text'].replace('for ', '')}${javaLabel} ` +
        `&nbsp;|&nbsp; ${mirror}</span>`;
      autoDownload.innerHTML =
        `<span class="big-text ${option['icon']}"></span>&nbsp;
        ${downloadText}`;
    }

    function updateDropdownOptions(distro, java, mirror) {
      const dropdownMenu = document.getElementById('download-options');
      // Clear existing options
      dropdownMenu.innerHTML = '';

      // Add all available options for the selected distribution
      for (const platform in downloadLinks[distro]) {
        const option = downloadLinks[distro][platform];
        const url = urlForDownload(option, distro, java, mirror);
        if (url === undefined) continue;
        const slug = javaSlug(option.prefix, java, false);
        const javaSuffix = slug === '' ? '' : ` &nbsp;|&nbsp; ${slug}`;
        const downloadText = `Download ${option.text}${javaSuffix}`;

        const listItem = document.createElement('li');
        const link = document.createElement('a');
        link.className = 'dropdown-item';
        link.href = url;
        link.innerHTML = `<span class="fa-fw ${option.icon}"></span> ${downloadText}`;

        listItem.appendChild(link);
        dropdownMenu.appendChild(listItem);

        if (option.divider) {
          const divider = document.createElement('li');
          divider.innerHTML = '<div class="dropdown-divider"></div>';
          dropdownMenu.appendChild(divider);
        }
      }
    }

    function autoDetectPlatform() {
      // Discern operating system.
      if (navigator.platform.indexOf('Linux') != -1) os = 'linux';
      else if (navigator.platform.indexOf('Mac') != -1) os = 'macos';
      else if (navigator.platform.indexOf('Win') != -1) os = 'windows';
      else return 'other';

      // Discern architecture.
      // https://docs.uaparser.dev/info/cpu/arch.html
      const uap = new UAParser();
      const cpu = uap.getCPU();
      switch (cpu['architecture']) {
        case 'amd64': arch = 'x64'; break;
        case 'arm64': arch = 'arm64'; break;
        case 'ia32': arch = 'x32'; break;
        default:
          if (os === 'macos') {
            // Best-effort Apple Silicon detection, lifted from:
            // https://github.com/faisalman/ua-parser-js/blob/72c59b53/src/helpers/ua-parser-helpers.js#L21-L42
            try {
              const canvas = document.createElement('canvas');
              const webgl = canvas.getContext('webgl2') || canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
              const debug = webgl.getExtension('WEBGL_debug_renderer_info');
              const renderer = webgl.getParameter(debug.UNMASKED_RENDERER_WEBGL);
              if (renderer.match(/apple m\d/i)) {
                return 'macos_arm64';
              }
            } catch { }
            return 'macos_x64';
          }
          arch = 'x64';
      }

      return `${os}_${arch}`;
    }

    function selectClosestMirror() {
      // Note: we avoid using navigator.geolocation because the
      // popup requesting permission to share location is annoying.
      fetch('https://ipapi.co/json/')
        .then(response => response.json())
        .then(data => {
          const userCoords = {
            latitude: data.latitude,
            longitude: data.longitude
          };
          var closestMirror = null;
          var closestDist = null;
          for (const mirror in mirrors) {
            const mirrorCoords = mirrors[mirror].coords;
            const dist = geolib.getDistance(userCoords, mirrorCoords);
            if (closestMirror == null || dist < closestDist) {
              closestMirror = mirror.toLowerCase();
              closestDist = dist;
            }
          }
          const mirror = document.getElementById(`mirror-${closestMirror}`);
          mirror.checked = true;
          updateDownloadOptions();
        });
    }

    //selectClosestMirror();
    updateDownloadOptions(); //TEMP
    const toggleIDs = [
      'dist-latest', 'dist-stable',
      'java-jdk', 'java-jre', 'java-none',
      'mirror-us', 'mirror-uk'
    ];
    toggleIDs.forEach(id => {
      el = document.getElementById(id);
      if (el != null) el.addEventListener('change', updateDownloadOptions);
    });

    // -- Plugin highlights --

    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('site/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);
        }

        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>
          `

          document.getElementById('plugin-tabs').innerHTML += tabString;
          document.getElementById('plugin-tab-content').innerHTML += paneString;

          if (first) {
            first = false;
          }
        })
      });
  </script>
</body>

</html>