offline search for mirror drives

base-theme/layouts/partials/header.html

@@ -1,5 +1,5 @@
 <!-- navbar for mobile screens -->
-{{ $siteRootUrl := partial "site_root_url.html" "/" }}
+{{ $homeUrl := partial "home_url.html" }}
 {{ $giveNowUrl := "https://giving.mit.edu/give/to/ocw/?utm_source=ocw&utm_medium=homepage_banner&utm_campaign=nextgen_home" }}
 {{ $aboutUrl := partial "site_root_url.html" "/about" }}
 {{ $zenDeskUrl := "https://mitocw.zendesk.com/hc/en-us" }}
@@ -18,7 +18,7 @@
       <i class="material-icons display-4 text-white align-bottom">menu</i>
     </button>
     <div class="mx-auto">
-      <a href="{{ $siteRootUrl }}">
+      <a href="{{ $homeUrl }}">
         <img width="250" src="/static_shared/images/ocw_logo_white_v2.svg" alt="MIT OpenCourseWare"/>
       </a>
     </div>
@@ -47,7 +47,7 @@
   <div class="contents">
     <div class="left">
       <div class="ocw-logo mr-6">
-        <a href="{{ $siteRootUrl }}">
+        <a href="{{ $homeUrl }}">
           <img src="/static_shared/images/ocw_logo_white_v2.svg" alt="MIT OpenCourseWare" />
         </a>
       </div>

base-theme/layouts/partials/home_url.html

@@ -0,0 +1,2 @@
+{{ $siteRootUrl := partial "site_root_url.html" "/" }}
+{{ return $siteRootUrl }}

package.json

@@ -97,7 +97,7 @@
     "expose-loader": "^4.0.0",
     "fancy-log": "^1.3.2",
     "file-loader": "^5.0.2",
-    "fuse.js": "^6.5.3",
+    "fuse.js": "^6.6.2",
     "gulp": "^4.0.2",
     "history": "^5.3.0",
     "hugo-bin-extended": "~0.112.7",

www-offline/assets/www-offline.tsx

@@ -1,13 +1,16 @@
 import "./css/www-offline.scss"
+import Fuse from "fuse.js"
 import Popper from "popper.js"
 
 export interface OCWWindow extends Window {
   $: JQueryStatic
   jQuery: JQueryStatic
   Popper: typeof Popper
+  Fuse: typeof Fuse
 }
 declare let window: OCWWindow
 
 window.jQuery = $
 window.$ = $
 window.Popper = Popper
+window.Fuse = Fuse

www-offline/content/search/_index.md

@@ -0,0 +1,5 @@
+---
+title: Search
+type: search
+renderSearchIcon: false
+---

www-offline/layouts/home.html

@@ -1,17 +1,16 @@
 {{ define "main" }}
 <div>
   {{ block "header" . }}
-  {{ $renderSearchIcon := false }}
-  {{ partial "header" . $renderSearchIcon }}
+  {{ partial "header" . }}
   {{ end }}
 </div>
 <div class="search-wrapper">
   <div class="search-page row justify-content-center">
-    <div class="search-results-area col-9 py-4">
+    <div class="search-results-area col-12 py-4">
       {{ $websites := where site.Pages ".Params.content_type" "==" "website" }}
       {{ $sortedWebsites := partial "sort_websites_by_course_number.html" $websites }}
       {{ $paginator := .Paginate $sortedWebsites }}
-      <section class="m-auto">
+      <section class="m-auto px-8">
       {{ range $paginator.Pages }}
       {{ $pathToRoot := strings.TrimSuffix "/" (partial "path_to_root.html" $paginator.URL) }}
       {{ $urlPath := strings.TrimPrefix "/" .Params.url_path }}

www-offline/layouts/partials/extraheader.html

@@ -0,0 +1,8 @@
+{{ define "extraheader" }}
+  {{ $renderSearchIcon := index .Params "renderSearchIcon" | default true}}
+  {{ if $renderSearchIcon}}
+    <a class="nav-link search-icon pr-6" href="/search.html">
+      <i class="material-icons">search</i>
+    </a>
+  {{end}}
+{{ end }}

www-offline/layouts/partials/home_url.html

@@ -0,0 +1 @@
+{{ return "/index.html" }}

www-offline/layouts/partials/include_css.html

@@ -2,6 +2,6 @@
 {{ $urls := .urls }}
 {{ range $url := $urls }}
     {{ with $url }}
-    <link href="{{ printf "%s/%s" (strings.TrimSuffix "/" $context.Permalink) (strings.TrimPrefix "/" $url) }}" rel="stylesheet">
+    <link href="{{ printf "%s/%s" (strings.TrimSuffix "/" (path.Dir $context.Permalink)) (strings.TrimPrefix "/" $url) }}" rel="stylesheet">
     {{ end }}
 {{ end }}

www-offline/layouts/search/section.html

@@ -0,0 +1,165 @@
+{{ define "main" }}
+{{ $pathToRoot := strings.TrimSuffix "/" (partial "path_to_root.html" .Permalink) }}
+{{ $websites := where site.Pages ".Params.content_type" "==" "website" }}
+{{ block "header" . }}
+{{ partial "header" . }}
+{{ end }}
+<div class="search-wrapper">
+  <div class="search-page row justify-content-center">
+    <div class="search-results-area col-12 py-4">
+      <div class="container-fluid">
+        <main>
+          <div class="container-fluid p-0">
+            <div class="row m-0">
+              <div id="search-page" class="w-100">
+                <div class="container">
+                  <div class="search-box py-sm-5 py-md-7 py-lg-5 row">
+                    <div class="col-lg-3"></div>
+                    <div class="col-lg-6 search-box-inner d-flex flex-column align-items-center mb-2 mb-sm-5 mb-md-4">
+                      <h1>Explore OpenCourseWare</h1>
+                      <div class="w-100 d-flex flex-column align-items-center search-input-wrapper mt-5">
+                        <div class="w-100">
+                          <form role="search" class="search-box d-flex flex-direction-row">
+                            <input
+                              id="search-input"
+                              class="w-100 pl-2"
+                              type="text"
+                              aria-label="Search"
+                              placeholder="Search OpenCourseWare"
+                              />
+                            <button id="search-button" type="submit" class="py-2 px-3">Search</button>
+                          </form>
+                        </div>
+                      </div>
+                    </div>                
+                    <div class="col-lg-3"></div>
+                  </div>
+                </div>
+                <section id="search-results" class="m-auto px-lg-8">
+                </section>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+window.onload = function() {
+  if (window.Fuse) {
+    // define the search-result web component and add it for use
+    const searchResultTemplate = document.createElement("template")
+    searchResultTemplate.innerHTML = `
+    <article>
+      <div class="card learning-resource-card compact-view">
+        <div class="card-contents">
+          <div class="lr-info search-result">
+            <div class="col-2 course-num">
+            </div>
+            <div class="course-title">
+              <a class="course-link"></a>
+            </div>
+            <div class="col-2 resource-level">
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+    `
+
+    class SearchResult extends HTMLElement {
+      constructor() {
+        super()
+      }
+
+      connectedCallback() {
+        this.innerHTML = searchResultTemplate.innerHTML
+        this.courseNumberDiv = this.querySelector(".course-num")
+        this.courseLink = this.querySelector(".course-link")
+        this.levelDiv = this.querySelector(".resource-level")
+        this.courseNumberDiv.innerHTML = this.primaryCourseNumber
+        this.courseLink.setAttribute("href", this.url)
+        this.courseLink.innerHTML = this.title
+        this.levelDiv.innerHTML = this.level
+      }
+
+      get title() {
+        return this.getAttribute("data-title")
+      }
+
+      get primaryCourseNumber() {
+        return this.getAttribute("data-primary-course-number")
+      }
+
+      get level() {
+        return this.getAttribute("data-level")
+      }
+
+      get url() {
+        return this.getAttribute("data-url")
+      }
+    }
+
+    window.customElements.define("search-result", SearchResult)
+
+    // an array of known websites generated at build time
+    const websites = [
+      {{ $websites := where site.Pages ".Params.content_type" "==" "website" }}
+      {{ range $websites }}
+      {{ $urlPath := strings.TrimPrefix "/" .Params.url_path }}
+      {{ $url := printf "%s/%s/index.html" $pathToRoot $urlPath }}
+      {
+        "title": {{- .Title | jsonify -}},
+        "primary_course_number": {{- .Params.primary_course_number | jsonify -}},
+        "url": {{- $url -}},
+        {{ if .Params.level }}
+        "level": {{ (delimit .Params.level ", ") | jsonify }}
+        {{ else }}
+        "level": ""
+        {{ end }}
+      },
+      {{ end }}
+    ]
+
+    // initialize Fuse and bind event listeners
+    const Fuse = window.Fuse
+    const searchOptions = {
+      shouldSort: true,
+      threshold: 0.4,
+      location: 0,
+      distance: 100,
+      matchAllTokens: true,
+      includeScore: true,
+      maxPatternLength: 32,
+      minMatchCharLength: 5,
+      keys: ["title", "primary_course_number"]
+    }
+    const fuse = new Fuse(websites, searchOptions)
+    const searchInput = document.getElementById("search-input")
+    const searchButton = document.getElementById("search-button")
+    const performSearch = searchString => {
+      const searchResults = fuse.search(searchString)
+      const searchResultComponents = searchResults.map(searchResult => {
+        return `<search-result data-url="${searchResult.item["url"]}" data-title=${searchResult.item["title"]} data-primary-course-number=${searchResult.item["primary_course_number"]} data-level=${searchResult.item["level"]}></search-result>`
+      })
+      const searchResultsSection = document.getElementById("search-results")
+      searchResultsSection.innerHTML = searchResultComponents.join("")
+    }
+    const onInput = e => {
+      if (e.target.value) {
+        const searchString = e.target.value
+        performSearch(searchString)
+      }
+    }
+    const onSearchButtonClick = e => {
+      e.preventDefault()
+      performSearch(searchInput.value)
+    }
+
+    searchInput.addEventListener("input", onInput)
+    searchButton.addEventListener("click", onSearchButtonClick)
+  }
+}
+</script>
+{{ end }}

yarn.lock

@@ -8230,10 +8230,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fuse.js@npm:^6.5.3":
-  version: 6.5.3
-  resolution: "fuse.js@npm:6.5.3"
-  checksum: f7c14f4422000e7f7e3515c66f7cefdfc38adec4cf380097f4146a201ea438af60b67dc5849b3c0de0115ce3f9bc5afad6fc6570c08dcfcef5bf6e95eb8e6d6f
+"fuse.js@npm:^6.6.2":
+  version: 6.6.2
+  resolution: "fuse.js@npm:6.6.2"
+  checksum: 17ae758ce205276ebd88bd9c9f088a100be0b4896abac9f6b09847151269d1690f41d7f98ff5813d4a58973162dbd99d0072ce807020fee6f9de60170f6b08eb
   languageName: node
   linkType: hard
 
@@ -12910,7 +12910,7 @@ __metadata:
     expose-loader: ^4.0.0
     fancy-log: ^1.3.2
     file-loader: ^5.0.2
-    fuse.js: ^6.5.3
+    fuse.js: ^6.6.2
     gulp: ^4.0.2
     history: ^5.3.0
     hugo-bin-extended: ~0.112.7