Implement search page

src/v2/search/index.md

@@ -0,0 +1,5 @@
+---
+title: Search Vue.js
+type: search
+search: true
+---

themes/vue/layout/page.ejs

@@ -23,6 +23,8 @@
   <% } %>
   <% if (page.sponsors) { %>
     <%- partial('sponsors-page') %>
+  <% } else if (page.search) { %>
+    <%- partial('search-page') %>
   <% } else { %>
     <%- page.content %>
   <% } %>

themes/vue/layout/partials/sidebar.ejs

@@ -5,25 +5,27 @@
     </ul>
     <div class="list">
       <%- partial('partials/sponsors_sidebar') %>
-      <h2>
-        <% titles = {
-          api: 'API',
-          examples: 'Examples',
-          guide: 'Guide',
-          cookbook: 'Cookbook<sup class="beta">beta</sup>',
-          'style-guide': 'Style Guide<sup class="beta">beta</sup>'
-        } %>
-        <%- titles[type] %>
-        <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
-          <select class="version-select">
-            <option value="SELF" selected>2.x</option>
-            <option value="v1">1.0</option>
-            <option value="012">0.12</option>
-            <option value="011">0.11</option>
-          </select>
-        <% } %>
-      </h2>
-      <%- partial('partials/toc', { type: type }) %>
+      <% if (type !== 'search') { %>
+        <h2>
+          <% titles = {
+            api: 'API',
+            examples: 'Examples',
+            guide: 'Guide',
+            cookbook: 'Cookbook<sup class="beta">beta</sup>',
+            'style-guide': 'Style Guide<sup class="beta">beta</sup>'
+          } %>
+          <%- titles[type] %>
+          <% if (['cookbook', 'style-guide'].indexOf(type) === -1) { %>
+            <select class="version-select">
+              <option value="SELF" selected>2.x</option>
+              <option value="v1">1.0</option>
+              <option value="012">0.12</option>
+              <option value="011">0.11</option>
+            </select>
+          <% } %>
+        </h2>
+        <%- partial('partials/toc', { type: type }) %>
+      <% } %>
     </div>
   </div>
 </div>

themes/vue/layout/search-page.ejs

@@ -0,0 +1,178 @@
+<div id="search-page">
+  <form class="search-form" @submit="submit">
+    <input
+      class="search-query"
+      v-model="search"
+      placeholder="Search Vue.js"
+    >
+    <div class="search-footer">
+      <p>
+        <template v-if="totalResults">
+          <strong>{{ totalResults }} results</strong> found in {{ queryTime }}ms
+        </template>
+      </p>
+      <a target="_blank" href="https://www.algolia.com/">
+          <img src="/images/search-by-algolia.png" height="16">
+      </a>
+    </div>
+  </form>
+
+  <template v-if="results.length">
+    <search-result
+      v-for="(result, i) in results"
+      :key="i"
+      :result="result"
+    ></search-result>
+  </template>
+
+  <p v-else>No results were found.</p>
+
+  <div ref="infiniteScrollAnchor"></div>
+
+</div>
+
+<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
+<script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
+<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>
+<script>
+var match = window.location.pathname.match(/^\/(v\d+)/)
+var version = match ? match[1] : 'v2'
+var algolia = algoliasearch('BH4D9OD16A', '85cc3221c9f23bfbaa4e3913dd7625ea')
+var algoliaHelper = algoliasearchHelper(algolia, 'vuejs', {
+  hitsPerPage: 15,
+  maxValuesPerFacet: 10,
+  advancedSyntax: true,
+  facets: ['version'],
+})
+
+algoliaHelper.addFacetRefinement('version', version)
+algoliaHelper.on('result', parseSearchResults)
+
+var searchPage = new Vue({
+  el: '#search-page',
+  components: {
+    'search-result': {
+      props: {
+        result: {
+          type: Object,
+          required: true,
+        },
+      },
+      render(h) {
+        var content = []
+        content.push(h('a', {
+          attrs: {
+            class: 'title',
+            href: this.result.url,
+          },
+          domProps: { innerHTML: this.result.title },
+        }))
+        if (this.result.summary) {
+          content.push(h('p', {
+            attrs: { class: 'summary' },
+            domProps: { innerHTML: this.result.summary },
+          }))
+        }
+        content.push(h(
+          'div',
+          { attrs: { class: 'breadcrumbs'} },
+          this.result.breadcrumbs.map(function(breadcrumb) {
+            return h('span', {
+              attrs: { class: 'breadcrumb' },
+              domProps: { innerHTML: breadcrumb },
+            })
+          })
+        ))
+        return h('div', { attrs: { class: 'search-result' } }, content)
+      }
+    }
+  },
+  data: {
+    search: (new URL(location)).searchParams.get('q') || '',
+    totalResults: 0,
+    queryTime: 0,
+    results: [],
+    totalPages: 0,
+    lastPage: 0,
+  },
+  watch: {
+    search() {
+      this.updateSearch()
+      window.history.pushState(
+        {},
+        'Vue.js Search',
+        window.location.origin + window.location.pathname + '?q=' + encodeURIComponent(this.search)
+      )
+    }
+  },
+  created() {
+    this.updateSearch()
+  },
+  mounted() {
+    var observer = new IntersectionObserver(function(entries) {
+      if (entries[0].isIntersecting && searchPage.totalPages > searchPage.lastPage + 1) {
+        searchPage.addPage()
+      }
+    })
+    observer.observe(this.$refs.infiniteScrollAnchor)
+  },
+  methods: {
+    addPage() {
+      algoliaHelper.setCurrentPage(this.lastPage + 1).search()
+    },
+    updateSearch() {
+      algoliaHelper.setCurrentPage(0).setQuery(this.search).search()
+    },
+    submit(e) {
+      e.preventDefault()
+      if (this.results.length > 0) {
+        window.location = this.results[0].url
+      }
+    }
+  }
+})
+
+function parseSearchResults(content) {
+  if (content.query === '' || !(content.hits instanceof Array)) {
+    searchPage.totalResults = 0
+    searchPage.queryTime = 0
+    searchPage.results = []
+    searchPage.totalPages = 0
+    searchPage.lastPage = 0
+    return
+  }
+
+  var results = []
+
+  for (var hit of content.hits) {
+    var hierarchy = hit._highlightResult.hierarchy
+    var titles = []
+    var level = 0
+    var levelName
+    while ((levelName = 'lvl' + level++) in hierarchy) {
+      titles.push(hierarchy[levelName].value)
+    }
+    var summary
+    if (hit._snippetResult && hit._snippetResult.content) {
+      summary = hit._snippetResult.content.value + '...'
+    }
+    results.push({
+      title: titles.pop(),
+      url: hit.url,
+      summary: summary,
+      breadcrumbs: titles,
+    })
+  }
+
+  searchPage.totalResults = content.nbHits
+  searchPage.queryTime = content.processingTimeMS
+  searchPage.totalPages = content.nbPages
+  searchPage.lastPage = content.page
+
+  if (searchPage.lastPage === 0) {
+    searchPage.results = results
+  } else {
+    searchPage.results = searchPage.results.concat(results)
+  }
+}
+</script>

themes/vue/source/css/_search-page.styl

@@ -0,0 +1,29 @@
+#search-page
+  .search-form
+    .search-query
+      width: 100%
+      border-radius: 5px
+      margin-right: 0
+    .search-footer
+      display: flex
+      height: 35px
+      align-items: center
+      justify-content: space-between
+      margin-bottom: 15px
+      p
+        margin: 0
+        padding: 0
+  .search-result
+    margin-bottom: 15px;
+    .title
+      display: block
+      font-size: 17.55px
+    .summary
+      padding: 0
+      margin: 0
+    .breadcrumb
+      color: $light
+      & + .breadcrumb::before
+        content: "\203A\A0"
+        margin-left: 5px
+        color: $light

themes/vue/source/css/page.styl

@@ -5,6 +5,7 @@
 @import "_demo"
 @import "_sponsors-page"
 @import "_sponsors-sidebar"
+@import "_search-page"
 @import "_migration"
 @import "_sidebar"
 @import "_offline-menu"