Refactored search result templates

material/assets/manifest.json

@@ -1,8 +1,8 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.9db80570.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.870b014d.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.9db80570.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.870b014d.min.js.map",
-  "assets/javascripts/vendor.js": "assets/javascripts/vendor.e3b5b4d0.min.js",
+  "assets/javascripts/vendor.js": "assets/javascripts/vendor.25dd9bf1.min.js",
-  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.e3b5b4d0.min.js.map",
+  "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.25dd9bf1.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2693be28.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2693be28.min.js.map",
   "assets/stylesheets/main.css": "assets/stylesheets/main.6a8334c2.min.css",

material/base.html

@@ -172,8 +172,8 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/vendor.e3b5b4d0.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/vendor.25dd9bf1.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.9db80570.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.870b014d.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

src/assets/javascripts/templates/search/index.tsx

@@ -28,72 +28,63 @@ import {
 import { h, translate, truncate } from "utilities"
 
 /* ----------------------------------------------------------------------------
- * Helper function
+ * Helper types
  * ------------------------------------------------------------------------- */
 
 /**
- * Render an article document
+ * Render flag
- *
- * @param document - Article document
- * @param teaser - Whether to render the teaser
- *
- * @return Element
  */
-function renderArticleDocument(
+const enum Flag {
-  { location, title, text, terms, score }: SearchDocument & SearchMetadata,
+  TEASER = 1,                          /* Render teaser */
-  teaser: boolean
+  PARENT = 2                           /* Render as parent */
-) {
-  const miss = Object.keys(terms)
-    // tslint:disable-next-line: array-type
-    .reduce<Array<Element | string>>((list, key) => [
-      ...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
-    ], [])
-  return (
-    <a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
-      <article
-        class="md-search-result__article md-search-result__article--document"
-        data-md-score={score.toFixed(2)}
-      >
-        <div class="md-search-result__icon md-icon"></div>
-        <h1 class="md-search-result__title">{title}</h1>
-        {teaser && text.length > 0 &&
-          <p class="md-search-result__teaser">{truncate(text, 320)}</p>
-        }
-        {teaser && miss.length > 0 &&
-          <p class="md-search-result__terms">
-            {translate("search.result.term.missing")}: {...miss.slice(0, -1)}
-          </p>
-        }
-      </article>
-    </a>
-  )
 }
 
+/* ----------------------------------------------------------------------------
+ * Helper function
+ * ------------------------------------------------------------------------- */
+
 /**
  * Render a search document
  *
  * @param section - Search document
+ * @param flag - Render flags
  *
  * @return Element
  */
-function renderSection(
+function renderSearchDocument(
-  { location, title, text, terms, score }: SearchDocument & SearchMetadata
+  document: SearchDocument & SearchMetadata, flag: Flag
 ) {
-  const miss = Object.keys(terms)
+  const parent = flag & Flag.PARENT
-    // tslint:disable-next-line: array-type
+  const teaser = flag & Flag.TEASER
-    .reduce<Array<Element | string>>((list, key) => [
+
-      ...list, ...!terms[key] ? [<del>{key}</del>, " "] : []
+  /* Render missing query terms */
-    ], [])
+  const missing = Object.keys(document.terms)
+    .filter(key => !document.terms[key])
+    .map(key => [<del>{key}</del>, " "])
+    .flat()
+    .slice(0, -1)
+
+  /* Render article or section, depending on flags */
+  const url = document.location.replace(/%20/g, "+")
   return (
-    <a href={location.toString().replace(/%20/g, "+")} class="md-search-result__link" tabIndex={-1}>
+    <a href={url} class="md-search-result__link" tabIndex={-1}>
-      <article class="md-search-result__article" data-md-score={score.toFixed(2)}>
+      <article
-        <h1 class="md-search-result__title">{title}</h1>
+        class={["md-search-result__article", ...parent
-        {text.length > 0 &&
+          ? ["md-search-result__article--document"]
-          <p class="md-search-result__teaser">{truncate(text, 320)}</p>
+          : []
+        ].join(" ")}
+        data-md-score={document.score.toFixed(2)}
+      >
+        {parent > 0 && <div class="md-search-result__icon md-icon"></div>}
+        <h1 class="md-search-result__title">{document.title}</h1>
+        {teaser > 0 && document.text.length > 0 &&
+          <p class="md-search-result__teaser">
+            {truncate(document.text, 320)}
+          </p>
         }
-        {miss.length > 0 &&
+        {teaser > 0 && missing.length > 0 &&
           <p class="md-search-result__terms">
-            {translate("search.result.term.missing")}: {...miss.slice(0, -1)}
+            {translate("search.result.term.missing")}: {...missing}
           </p>
         }
       </article>
@@ -132,8 +123,8 @@ export function renderSearchResult(
 
   /* Render children */
   const children = [
-    renderArticleDocument(article, !parent && index === 0),
+    renderSearchDocument(article, Flag.PARENT | +(!parent && index === 0)),
-    ...best.map(renderSection),
+    ...best.map(section => renderSearchDocument(section, Flag.TEASER)),
     ...more.length ? [
       <details class="md-search-result__more">
         <summary tabIndex={-1}>
@@ -142,7 +133,7 @@ export function renderSearchResult(
             : translate("search.result.more.other", more.length)
           }
         </summary>
-        {...more.map(renderSection)}
+        {...more.map(section => renderSearchDocument(section, Flag.TEASER))}
       </details>
     ] : []
   ]