Merge of Insiders features tied to 'Biquinho Vermelho' funding goal

Author: squidfunk

material/assets/javascripts/bundle.716f8af4.min.js

@@ -39,10 +39,10 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.3754935a.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.fe914879.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
-        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.f1a3b89f.min.css' | url }}">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.ba0d045b.min.css' | url }}">
         {% if palette.primary %}
           {% import "partials/palette.html" as map %}
           {% set primary = map.primary(
@@ -196,7 +196,7 @@ <h1>{{ page.title | d(config.site_name, true)}}</h1>
         "base": base_url,
         "features": features,
         "translations": {},
-        "search": "assets/javascripts/workers/search.477d984a.min.js" | url,
+        "search": "assets/javascripts/workers/search.53c85856.min.js" | url,
         "version": config.extra.version or None
       } -%}
       {%- set translations = app.translations -%}
@@ -223,7 +223,7 @@ <h1>{{ page.title | d(config.site_name, true)}}</h1>
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.ddd52ceb.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.716f8af4.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

material/assets/javascripts/bundle.716f8af4.min.js.map

@@ -35,5 +35,5 @@
 {% endblock %}
 {% block scripts %}
   {{ super() }}
-  <script src="{{ 'overrides/assets/javascripts/bundle.89b9c269.min.js' | url }}"></script>
+  <script src="{{ 'overrides/assets/javascripts/bundle.1d33a92e.min.js' | url }}"></script>
 {% endblock %}

material/assets/javascripts/bundle.ddd52ceb.min.js

@@ -12,6 +12,8 @@
   "meta.source": "Quellcode",
   "search.config.lang": "de",
   "search.placeholder": "Suche",
+  "search.share": "Teilen",
+  "search.reset": "Zurücksetzen",
   "search.result.initializer": "Suche wird initialisiert",
   "search.result.placeholder": "Suchbegriff eingeben",
   "search.result.none": "Keine Suchergebnisse",
@@ -20,6 +22,7 @@
   "search.result.more.one": "1 weiteres Suchergebnis auf dieser Seite",
   "search.result.more.other": "# weitere Suchergebnisse auf dieser Seite",
   "search.result.term.missing": "Es fehlt",
+  "search.title": "Suche",
   "select.language.title": "Sprache wechseln",
   "select.version.title": "Version auswählen",
   "skip.link.title": "Zum Inhalt",

material/assets/javascripts/bundle.ddd52ceb.min.js.map

@@ -18,6 +18,7 @@
   "search.config.pipeline": "trimmer, stopWordFilter",
   "search.config.separator": "[\s\-]+",
   "search.placeholder": "Search",
+  "search.share": "Share",
   "search.reset": "Clear",
   "search.result.initializer": "Initializing search",
   "search.result.placeholder": "Type to start searching",
@@ -27,6 +28,7 @@
   "search.result.more.one": "1 more on this page",
   "search.result.more.other": "# more on this page",
   "search.result.term.missing": "Missing",
+  "search.title": "Search",
   "select.language.title": "Select language",
   "select.version.title": "Select version",
   "skip.link.title": "Skip to content",

material/assets/javascripts/workers/search.477d984a.min.js renamed to material/assets/javascripts/workers/search.53c85856.min.js

@@ -6,14 +6,24 @@
   <label class="md-search__overlay" for="__search"></label>
   <div class="md-search__inner" role="search">
     <form class="md-search__form" name="search">
-      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
+      <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
       <label class="md-search__icon md-icon" for="__search">
         {% include ".icons/material/magnify.svg" %}
         {% include ".icons/material/arrow-left.svg" %}
       </label>
-      <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
-        {% include ".icons/material/close.svg" %}
-      </button>
+      <nav class="md-search__options" aria-label="{{ lang.t('search.title') }}">
+        {% if "search.share" in features %}
+          <a href="javascript:void(0)" class="md-search__icon md-icon" aria-label="{{ lang.t('search.share') }}" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
+            {% include ".icons/material/share-variant.svg" %}
+          </a>
+        {% endif %}
+        <button type="reset" class="md-search__icon md-icon" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
+          {% include ".icons/material/close.svg" %}
+        </button>
+      </nav>
+      {% if "search.suggest" in features %}
+        <div class="md-search__suggest" data-md-component="search-suggest"></div>
+      {% endif %}
     </form>
     <div class="md-search__output">
       <div class="md-search__scrollwrap" data-md-scrollfix>

material/assets/javascripts/workers/search.477d984a.min.js.map renamed to material/assets/javascripts/workers/search.53c85856.min.js.map

@@ -36,6 +36,9 @@ export type Flag =
   | "navigation.sections"              /* Sections navigation */
   | "navigation.tabs"                  /* Tabs navigation */
   | "navigation.top"                   /* Back-to-top button */
+  | "search.highlight"                 /* Search highlighting */
+  | "search.share"                     /* Search sharing */
+  | "search.suggest"                   /* Search suggestions */
   | "toc.integrate"                    /* Integrated table of contents */
 
 /* ------------------------------------------------------------------------- */

material/assets/stylesheets/main.3754935a.min.css

@@ -55,6 +55,7 @@ import {
   mountHeaderTitle,
   mountPalette,
   mountSearch,
+  mountSearchHiglight,
   mountSidebar,
   mountSource,
   mountTableOfContents,
@@ -195,6 +196,13 @@ const content$ = defer(() => merge(
   ...getComponentElements("content")
     .map(el => mountContent(el, { target$, viewport$, print$ })),
 
+  /* Search highlighting */
+  ...getComponentElements("content")
+    .map(el => feature("search.highlight")
+      ? mountSearchHiglight(el, { index$, location$ })
+      : NEVER
+    ),
+
   /* Header title */
   ...getComponentElements("header-title")
     .map(el => mountHeaderTitle(el, { viewport$, header$ })),

material/assets/stylesheets/main.3754935a.min.css.map

@@ -42,6 +42,8 @@ export type ComponentType =
   | "search"                           /* Search */
   | "search-query"                     /* Search input */
   | "search-result"                    /* Search results */
+  | "search-share"                     /* Search sharing */
+  | "search-suggest"                   /* Search suggestions */
   | "sidebar"                          /* Sidebar */
   | "skip"                             /* Skip link */
   | "source"                           /* Repository information */
@@ -83,6 +85,8 @@ interface ComponentTypeMap {
   "search": HTMLElement                /* Search */
   "search-query": HTMLInputElement     /* Search input */
   "search-result": HTMLElement         /* Search results */
+  "search-share": HTMLAnchorElement    /* Search sharing */
+  "search-suggest": HTMLElement        /* Search suggestions */
   "sidebar": HTMLElement               /* Sidebar */
   "skip": HTMLAnchorElement            /* Skip link */
   "source": HTMLAnchorElement          /* Repository information */

material/assets/stylesheets/main.fe914879.min.css

@@ -21,7 +21,7 @@
  */
 
 import { NEVER, Observable, ObservableInput, merge } from "rxjs"
-import { filter, sample, take } from "rxjs/operators"
+import { filter, mergeWith, sample, take } from "rxjs/operators"
 
 import { configuration } from "~/_"
 import {
@@ -34,14 +34,21 @@ import {
 } from "~/browser"
 import {
   SearchIndex,
+  SearchResult,
   isSearchQueryMessage,
   isSearchReadyMessage,
   setupSearchWorker
 } from "~/integrations"
 
-import { Component, getComponentElement } from "../../_"
+import {
+  Component,
+  getComponentElement,
+  getComponentElements
+} from "../../_"
 import { SearchQuery, mountSearchQuery } from "../query"
-import { SearchResult, mountSearchResult } from "../result"
+import { mountSearchResult } from "../result"
+import { SearchShare, mountSearchShare } from "../share"
+import { SearchSuggest, mountSearchSuggest } from "../suggest"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -53,6 +60,8 @@ import { SearchResult, mountSearchResult } from "../result"
 export type Search =
   | SearchQuery
   | SearchResult
+  | SearchShare
+  | SearchSuggest
 
 /* ----------------------------------------------------------------------------
  * Helper types
@@ -88,7 +97,7 @@ export function mountSearch(
   try {
     const worker = setupSearchWorker(config.search, index$)
 
-    /* Retrieve nested components */
+    /* Retrieve query and result components */
     const query  = getComponentElement("search-query", el)
     const result = getComponentElement("search-result", el)
 
@@ -97,8 +106,12 @@ export function mountSearch(
     tx$
       .pipe(
         filter(isSearchQueryMessage),
-        sample(rx$.pipe(filter(isSearchReadyMessage))),
-        take(1)
+        sample(rx$
+          .pipe(
+            filter(isSearchReadyMessage),
+            take(1)
+          )
+        )
       )
         .subscribe(tx$.next.bind(tx$))
 
@@ -111,10 +124,28 @@ export function mountSearch(
           const active = getActiveElement()
           switch (key.type) {
 
-            /* Enter: prevent form submission */
+            /* Enter: go to first (best) result */
             case "Enter":
-              if (active === query)
+              if (active === query) {
+                const anchors = new Map<HTMLAnchorElement, number>()
+                for (const anchor of getElements<HTMLAnchorElement>(
+                  ":first-child [href]", result
+                )) {
+                  const article = anchor.firstElementChild!
+                  anchors.set(anchor, parseFloat(
+                    article.getAttribute("data-md-score")!
+                  ))
+                }
+
+                /* Go to result with highest score, if any */
+                if (anchors.size) {
+                  const [[best]] = [...anchors].sort(([, a], [, b]) => b - a)
+                  best.click()
+                }
+
+                /* Otherwise omit form submission */
                 key.claim()
+              }
               break
 
             /* Escape or Tab: close search */
@@ -173,11 +204,21 @@ export function mountSearch(
         })
 
     /* Create and return component */
-    const query$ = mountSearchQuery(query, worker)
-    return merge(
-      query$,
-      mountSearchResult(result, worker, { query$ })
-    )
+    const query$  = mountSearchQuery(query, worker)
+    const result$ = mountSearchResult(result, worker, { query$ })
+    return merge(query$, result$)
+      .pipe(
+        mergeWith(
+
+          /* Search sharing */
+          ...getComponentElements("search-share", el)
+          .map(child => mountSearchShare(child, { query$ })),
+
+          /* Search suggestions */
+          ...getComponentElements("search-suggest", el)
+            .map(child => mountSearchSuggest(child, worker, { keyboard$ }))
+        )
+      )
 
   /* Gracefully handle broken search */
   } catch (err) {

material/assets/stylesheets/main.fe914879.min.css.map

@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "no-null/no-null": "off"
+  }
+}

material/assets/stylesheets/palette.f1a3b89f.min.css renamed to material/assets/stylesheets/palette.ba0d045b.min.css

@@ -0,0 +1,113 @@
+/*
+ * Copyright (c) 2016-2021 Martin Donath <[email protected]>
+ *
+ * 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 {
+  Observable,
+  ObservableInput,
+  combineLatest
+} from "rxjs"
+import { filter, map, startWith } from "rxjs/operators"
+
+import { getLocation } from "~/browser"
+import {
+  SearchIndex,
+  setupSearchHighlighter
+} from "~/integrations"
+import { h } from "~/utilities"
+
+import { Component } from "../../_"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Search highlighting
+ */
+export interface SearchHighlight {
+  nodes: Map<ChildNode, string>        /* Map of replacements */
+}
+
+/* ----------------------------------------------------------------------------
+ * Helper types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mount options
+ */
+interface MountOptions {
+  index$: ObservableInput<SearchIndex> /* Search index observable */
+  location$: Observable<URL>           /* Location observable */
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Mount search highlighting
+ *
+ * @param el - Content element
+ * @param options - Options
+ *
+ * @returns Search highlighting component observable
+ */
+export function mountSearchHiglight(
+  el: HTMLElement, { index$, location$ }: MountOptions
+): Observable<Component<SearchHighlight>> {
+  return combineLatest([
+    index$,
+    location$
+      .pipe(
+        startWith(getLocation()),
+        filter(url => url.searchParams.has("h"))
+      )
+  ])
+    .pipe(
+      map(([index, url]) => setupSearchHighlighter(index.config)(
+        url.searchParams.get("h")!
+      )),
+      map(fn => {
+        const nodes = new Map<ChildNode, string>()
+
+        /* Traverse text nodes and collect matches */
+        const it = document.createNodeIterator(el, NodeFilter.SHOW_TEXT)
+        for (let node = it.nextNode(); node; node = it.nextNode()) {
+          if (node.parentElement?.offsetHeight) {
+            const original = node.textContent!
+            const replaced = fn(original)
+            if (replaced.length > original.length)
+              nodes.set(node as ChildNode, replaced)
+          }
+        }
+
+        /* Replace original nodes with matches */
+        for (const [node, text] of nodes) {
+          const { childNodes } = h("span", null, text)
+          node.replaceWith(...Array.from(childNodes))
+        }
+
+        /* Return component */
+        return { ref: el, nodes }
+      })
+    )
+}