Add page for available icons, do some JS cleanup

.gitignore

@@ -50,3 +50,6 @@ mkdocs.yml
 
 overrides/assets/javascripts/*.min.js*
 overrides/assets/stylesheets/*.css*
+
+# generated by tools/icon-list and used at build-time only
+tools/icon-list/*.fragment

base.yml

@@ -72,6 +72,7 @@ theme:
     - attr_list # Attribute Lists
     - md_in_html # Markdown in HTML
     - pymdownx.blocks.caption # Caption
+    - content.tooltips # Enhanced tooltips
 
   palette:
     - scheme: default
@@ -168,6 +169,7 @@ nav:
           - docs/resources/index.md
           - docs/resources/resource-versions.md
           - docs/resources/managing-resources.md
+          - docs/resources/available-resource-icons.md
       - Resource Types:
           - docs/resource-types/index.md
           - docs/resource-types/implementing.md

docs/docs/resources/available-resource-icons.md

@@ -0,0 +1,65 @@
+---
+title: Available Resource Icons
+---
+
+# Available Resource Icons
+
+This is a list[^1] of icons and their names that you can use in your pipelines' `resource`
+definitions. Hover over an icon to get the name of the icon or click it to copy the name to 
+your clipboard. You can also search using the text field below, with or without the `si/`
+prefix.
+
+<div id="icon-list" class="notready" markdown>
+<input type="search" class="search" placeholder="Search for an icon" autofocus />
+<div class="list grid" markdown>
+-8<- "tools/icon-list/all-icons.fragment"
+</div>
+</div>
+
+[^1]:
+    There are more icons available from [Simple Icons](https://simpleicons.org) than listed here;
+    this is due to the version of Simple Icons used by [Material for Mkdocs](https://squidfunk.github.io/mkdocs-material).
+    Go to their site to find the complete list, and prefix the name there with `si/` to use in Concourse.
+
+<script>
+  (function() {
+    const itemClickHandler = (event) => {
+        const item = event.currentTarget;
+        const name = item.getAttribute("data-title");
+        if (name) {
+            navigator.clipboard
+                .writeText(name)
+                .then(function () {
+                console.log(`copied ${name} to clipboard`);
+                item.classList.add("copied");
+                setTimeout(() => item.classList.remove("copied"), 2000);
+            })
+                .catch(function (err) {
+                console.error(`failed to copy ${name} to the clipboard: ${err}`);
+            });
+        }
+    };
+    const updateListItems = (list) => {
+        list.visibleItems.forEach((item) => {
+            item.elm.addEventListener("click", itemClickHandler);
+        });
+    };
+
+    var script = document.createElement('script');
+    script.src = '/assets/javascripts/list.min.js';
+    script.onload = function() {
+      console.log("list.min.js loaded");
+      document.getElementById("icon-list").classList.remove("notready");
+      const list = new List("icon-list", {
+          valueNames: [{ data: ["search"] }],
+          indexAsync: true,
+          page: 25000,
+      });
+      list.on("parseComplete", (l) => {
+        updateListItems(l);
+        l.on("updated", updateListItems);
+      });   
+    };
+    document.head.appendChild(script);
+  })();
+</script>

docs/docs/resources/index.md

@@ -78,9 +78,10 @@ schema.
     ### `icon`
     The name of a [Material Design](https://materialdesignicons.com/) or
     [Simple Icons](https://simpleicons.org/) icon to show next to the resource
-    name in the web UI. For example, `github`.
+    name in the web UI. For example, `github` or `si/concourse`.
 
     Simple Icons were added in v8.2.0 and their names must be prefixed by `si/`.
+    You can find all available icons [here](./available-resource-icons.md).
 
 ??? info "`version`: [`version`](../config-basics.md#version-schema)"
 

docs/resource-types-list.md

@@ -2005,23 +2005,24 @@ to add a resource type that you've made, make a Pull Request in the
       </tr>
     </tbody>
   </table>
-
-</div>
-
-<script>
-(function() {
-  var script = document.createElement('script');
-  script.src = '/assets/javascripts/list.min.js';
-  script.onload = function() {
-    console.log("list.min.js loaded");
-    var options = {
-      valueNames: [ 'hidden-search-field' ]
+  <script>
+  (function() {
+    var script = document.createElement('script');
+    script.src = '/assets/javascripts/list.min.js';
+    script.onload = function() {
+      console.log("list.min.js loaded");
+      var options = {
+          valueNames: ["hidden-search-field"],
+      };
+      var resourceList = new List("resource-types-table", options);
+      // Randomly sort the list so we're never playing favourites
+      resourceList.sort("name", {
+        sortFunction: function () {
+            return Math.random() - 0.5;
+        },
+      });
     };
-
-    var resourceList = new List('resource-types-table', options);
-    // Randomly sort the list so we're never playing favourites
-    resourceList.sort('name', { sortFunction: function() { return Math.random() - 0.5; }});
-  };
-  document.head.appendChild(script);
-})();
-</script>
+    document.head.appendChild(script);
+  })();
+  </script>
+</div>