Prototyped icon search

src/assets/javascripts/integrations/clipboard/index.ts

@@ -75,7 +75,8 @@ export function setupClipboard(
 
   /* Initialize clipboard */
   const clipboard$ = new Observable<ClipboardJS.Event>(subscriber => {
-    new ClipboardJS(".md-clipboard").on("success", ev => subscriber.next(ev))
+    new ClipboardJS("[data-clipboard-target], [data-clipboard-text]")
+      .on("success", ev => subscriber.next(ev))
   })
     .pipe(
       share()

src/base.html

@@ -206,7 +206,7 @@
     <!-- Overlay for expanded drawer -->
     <label class="md-overlay" for="__drawer"></label>
 
-    <!-- Link to skip to content -->
+    <!-- Skip to content -->
     <div data-md-component="skip">
       {% if page.toc | first is defined %}
         {% set skip = page.toc | first %}
@@ -232,7 +232,7 @@
       {% include "partials/header.html" %}
     {% endblock %}
 
-    <!-- Container, necessary for web-application context -->
+    <!-- Container -->
     <div class="md-container" data-md-component="container">
 
       <!-- Hero teaser -->

src/overrides/assets/javascripts/index.ts

@@ -1,4 +1,59 @@
-import { fromEvent } from "rxjs"
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { from, fromEvent } from "rxjs"
+import { filter } from "fuzzaldrin-plus"
+
+import { getElement, getElementOrThrow } from "browser"
+import { map, switchMap } from "rxjs/operators"
+import { renderIconSearch } from "./templates/icon"
+
+// Obtain configuration
+const el = getElementOrThrow("#__config")
+const config = JSON.parse(el.textContent!)
+
+// Now, load icons.json
+const icons$ =
+  from(fetch(`${config.base}/overrides/assets/javascripts/icons.json`)
+    .then(res => res.json())
+  )
+
+// Render icon search, if present
+const search = getElement<HTMLInputElement>("#icon-search")
+if (search) {
+  icons$
+    .pipe(
+      switchMap(icons => fromEvent<InputEvent>(search, "keyup")
+        .pipe(
+          map(() => filter(icons, search.value))
+        )
+      )
+    )
+      .subscribe((result: any[]) => {
+        const list = getElementOrThrow(".tx-icon-result")
+        list.innerHTML = ""
+        list.appendChild(renderIconSearch(result, search.value))
+      })
+}
 
 // Track click events
 fromEvent(document.body, "click")
@@ -6,6 +61,8 @@ fromEvent(document.body, "click")
     if (ev.target instanceof HTMLElement) {
       var el = ev.target.closest("a[href^=http]")
       if (el instanceof HTMLLinkElement)
+        // @ts-ignore
         ga("send", "event", "outbound", "click", el.href)
     }
   })
+

src/overrides/assets/javascripts/templates/icon/index.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { wrap } from "fuzzaldrin-plus"
+import { h, round } from "utilities"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+function transform(value: string, query: string) {
+  return `:${wrap(value.replace(/\.svg$/, "").replace(/\//g, "-"), query, {
+    wrap: {
+      tagOpen: "<b>",
+      tagClose: "</b>"
+    }
+  })}:`
+}
+
+const base = "https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/"
+
+export function renderIconSearch(
+  results: string[], query: string
+) {
+  if (!query.length)
+    return <div class=""></div>
+  return (
+    <div class="">
+      <span>{round(results.length)} results</span>
+      <ul class="tx-icon-search__list">
+        {results.slice(0, 10).map(result => (
+          <li class="tx-icon-search__item">
+            <span class="twemoji">
+              <img src={base + result} style="width: 18px; height: 18px" />
+            </span> – <button
+              class="md-clipboard--inline"
+              data-clipboard-text={
+                ":" + result.replace(/\.svg$/, "").replace(/\//g, "-") + ":"
+              }
+            >
+              <code>{transform(result, query)}</code>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/overrides/assets/stylesheets/main.scss

@@ -41,3 +41,5 @@
 @import "main/layout/announce";
 @import "main/layout/content";
 @import "main/layout/hero";
+
+@import "main/shame";

src/overrides/assets/stylesheets/main/_shame.scss

@@ -0,0 +1,66 @@
+////
+/// Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+///
+/// Permission is hereby granted, free of charge, to any person obtaining a
+/// copy of this software and associated documentation files (the "Software"),
+/// to deal in the Software without restriction, including without limitation
+/// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+/// and/or sell copies of the Software, and to permit persons to whom the
+/// Software is furnished to do so, subject to the following conditions:
+///
+/// The above copyright notice and this permission notice shall be included in
+/// all copies or substantial portions of the Software.
+///
+/// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+/// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+/// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL
+/// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+/// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+/// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+/// DEALINGS
+////
+
+// ----------------------------------------------------------------------------
+// Nothing to see here, move along
+// ----------------------------------------------------------------------------
+
+// Scoped in typesetted content to match specificity of regular content
+.md-typeset {
+
+  // Input
+  .md-input {
+    @include z-depth(1);
+
+    width: 100%;
+    height: px2rem(36px);
+    padding: 0 px2rem(12px);
+    font-size: px2rem(16px);
+    border-radius: px2rem(2px);
+    box-shadow:
+      0 px2rem(4px)   px2rem(10px) hsla(0, 0%, 0%, 0.1),
+      0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.1);
+    transition: box-shadow 250ms;
+
+    &:hover,
+    &:focus {
+      box-shadow:
+        0 px2rem(8px)   px2rem(20px) hsla(0, 0%, 0%, 0.15),
+        0 px2rem(0.5px) px2rem(1px)  hsla(0, 0%, 0%, 0.15);
+    }
+  }
+
+  .md-clipboard--inline {
+    cursor: pointer;
+    code {
+      transition:
+        color            250ms,
+        background-color 250ms;
+    }
+
+    &:focus code,
+    &:hover code {
+      color: var(--md-accent-fg-color);
+      background-color: var(--md-accent-fg-color--transparent);
+    }
+  }
+}

src/overrides/main.html

@@ -96,6 +96,18 @@
 {% block scripts %}
   {{ super() }}
 
+  <!-- Application configuration -->
+  {% block config %}
+    {%- set configuration = {
+      "base": base_url,
+      "features": features
+    } -%}
+    <script id="__config" type="application/json">
+      {{- configuration | tojson -}}
+    </script>
+  {% endblock %}
+
   <!-- Extra JavaScript -->
   <script src="{{ 'overrides/assets/javascripts/bundle.js' | url }}"></script>
 {% endblock %}
+