feat: search + basic engine (wip)

2019-03-09 00:51:02 -05:00 · 2019-03-09 00:51:02 -05:00 · b5db531234
commit b5db531234
parent 6eb6f669e6
25 changed files with 766 additions and 108 deletions
--- a/client/client-app.js
+++ b/client/client-app.js
@ -168,6 +168,7 @@ Vue.component('page-selector', () => import(/* webpackPrefetch: true, webpackChu
 Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue'))
 Vue.component('register', () => import(/* webpackChunkName: "register" */ './components/register.vue'))
 Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue'))
+Vue.component('search-results', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/search-results.vue'))

 Vue.component('nav-footer', () => import(/* webpackChunkName: "theme-page"  */ './themes/' + process.env.CURRENT_THEME + '/components/nav-footer.vue'))
 Vue.component('nav-sidebar', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/nav-sidebar.vue'))
--- a/client/components/admin/admin-contribute.vue
+++ b/client/components/admin/admin-contribute.vue
@ -151,6 +151,16 @@
              v-list-tile-action
                v-btn(icon, href='https://lokalise.co', target='_blank')
                  v-icon(color='grey') public
+            v-divider
+            v-list-tile
+              v-list-tile-avatar(tile)
+                img(src='https://static.requarks.io/logo/netlify.svg', alt='Netlify')
+              v-list-tile-content
+                v-list-tile-title Netlify
+                v-list-tile-sub-title Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need.
+              v-list-tile-action
+                v-btn(icon, href='https://wwwnetlify.com', target='_blank')
+                  v-icon(color='grey') public

 </template>

--- a/client/components/admin/admin-search.vue
+++ b/client/components/admin/admin-search.vue
@ -6,7 +6,7 @@
          img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
          .admin-header-title
            .headline.primary--text Search Engine
-            .subheading.grey--text Configure the search capabilities of your wiki #[v-chip(label, color='primary', small).white--text coming soon]
+            .subheading.grey--text Configure the search capabilities of your wiki
          v-spacer
          v-btn(outline, color='grey', @click='refresh', large)
            v-icon refresh
@ -17,17 +17,12 @@
            v-icon(left) check
            span {{$t('common:actions.apply')}}

-        v-card.mt-3
-          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
-            v-tab(key='settings'): v-icon settings
-            v-tab(v-for='engine in activeEngines', :key='engine.key') {{ engine.title }}
-
-            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-              v-card.pa-3(flat, tile)
-                .body-2.grey--text.text--darken-1 Select which search engine to enable:
-                .caption.grey--text.pb-2 Some search engines require additional configuration in their dedicated tab (when selected).
-                v-form
-                  v-radio-group(v-model='selectedEngine')
+      v-flex(lg3, xs12)
+        v-card
+          v-toolbar(flat, color='primary', dark, dense)
+            .subheading Search Engine
+          v-card-text
+            v-radio-group.my-0(v-model='selectedEngine')
              v-radio.my-1(
                v-for='(engine, n) in engines'
                :key='engine.key'
@ -35,21 +30,21 @@
                :value='engine.key'
                color='primary'
                hide-details
-                      disabled
              )

-            v-tab-item(v-for='(engine, n) in activeEngines', :key='engine.key', :transition='false', :reverse-transition='false')
-              v-card.pa-3(flat, tile)
-                v-form
+      v-flex(lg9, xs12)
+        v-card.wiki-form
+          v-toolbar(color='primary', dense, flat, dark)
+            .subheading {{engine.title}}
+          v-card-text
            .enginelogo
              img(:src='engine.logo', :alt='engine.title')
-                  v-subheader.pl-0 {{engine.title}}
-                  .caption {{engine.description}}
-                  .caption: a(:href='engine.website') {{engine.website}}
+            .caption.pt-3 {{engine.description}}
+            .caption.pb-3: a(:href='engine.website') {{engine.website}}
            v-divider.mt-3
            v-subheader.pl-0 Engine Configuration
            .body-1.ml-3(v-if='!engine.config || engine.config.length < 1') This engine has no configuration options you can modify.
-                  template(v-else, v-for='cfg in logger.config')
+            template(v-else, v-for='cfg in engine.config')
              v-select(
                v-if='cfg.value.type === "string" && cfg.value.enum'
                outline
@ -63,7 +58,7 @@
                persistent-hint
                :class='cfg.value.hint ? "mb-2" : ""'
              )
-                    v-switch(
+              v-switch.mb-3(
                v-else-if='cfg.value.type === "boolean"'
                :key='cfg.key'
                :label='cfg.value.title'
@ -97,23 +92,16 @@ export default {
  data() {
    return {
      engines: [],
-      selectedEngine: 'db'
-    }
-  },
-  computed: {
-    activeEngines() {
-      return _.filter(this.engines, 'isEnabled')
+      selectedEngine: '',
+      engine: {}
    }
  },
  watch: {
    selectedEngine(newValue, oldValue) {
-      this.engines.forEach(engine => {
-        if (engine.key === newValue) {
-          engine.isEnabled = true
-        } else {
-          engine.isEnabled = false
-        }
-      })
+      this.engine = _.find(this.engines, ['key', newValue]) || {}
+    },
+    engines(newValue, oldValue) {
+      this.selectedEngine = 'db'
    }
  },
  methods: {
@ -156,7 +144,13 @@ export default {
    engines: {
      query: enginesQuery,
      fetchPolicy: 'network-only',
-      update: (data) => _.cloneDeep(data.search.searchEngines).map(str => ({...str, config: str.config.map(cfg => ({...cfg, value: JSON.parse(cfg.value)}))})),
+      update: (data) => _.cloneDeep(data.search.searchEngines).map(str => ({
+        ...str,
+        config: _.sortBy(str.config.map(cfg => ({
+          ...cfg,
+          value: JSON.parse(cfg.value)
+        })), [t => t.value.order])
+      })),
      watchLoading (isLoading) {
        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-search-refresh')
      }
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@ -64,7 +64,6 @@
              ref='searchField',
              v-if='searchIsShown && $vuetify.breakpoint.mdAndUp',
              v-model='search',
-              clearable,
              color='white',
              label='Search...',
              single-line,
@ -74,6 +73,7 @@
              prepend-inner-icon='search',
              :loading='searchIsLoading',
              @keyup.enter='searchEnter'
+              @keyup.esc='search = ``'
            )
              v-progress-linear(
                indeterminate,
@ -81,6 +81,33 @@
                height='2',
                color='blue'
              )
+          v-menu(
+            v-model='searchAdvMenuShown'
+            left
+            offset-y
+            min-width='350'
+            :close-on-content-click='false'
+            )
+            v-btn.nav-header-search-adv(icon, outline, color='grey darken-2', slot='activator')
+              v-icon(color='white') expand_more
+            v-card
+              v-toolbar(flat, :color='$vuetify.dark ? `grey darken-3-d5` : `grey lighten-4`', dense)
+                v-subheader.pl-0 Advanced Search
+              v-card-text
+                v-checkbox.mt-0(
+                  label='Restrict to Current Language'
+                  color='primary'
+                  v-model='searchRestrictLocale'
+                  hide-details
+                )
+                v-checkbox(
+                  label='Restrict to Below Current Path'
+                  color='primary'
+                  v-model='searchRestrictPath'
+                  hide-details
+                )
+              v-card-actions
+                v-btn(outline, small, color='grey') Save as defaults
      v-flex(xs6, :md4='searchIsShown', :md6='!searchIsShown')
        v-toolbar.nav-header-inner(color='black', dark, flat)
          v-spacer
@ -97,7 +124,7 @@
            v-btn.btn-animate-rotate(icon, href='/a', slot='activator')
              v-icon(color='grey') settings
            span Admin
-          v-menu(v-if='isAuthenticated', offset-y, min-width='300')
+          v-menu(v-if='isAuthenticated', offset-y, min-width='300', left)
            v-tooltip(bottom, slot='activator')
              v-btn.btn-animate-grow(icon, slot='activator', outline, color='blue')
                v-icon(color='grey') account_circle
@ -135,7 +162,7 @@
 </template>

 <script>
-import { get } from 'vuex-pathify'
+import { get, sync } from 'vuex-pathify'
 import _ from 'lodash'
 import Cookies from 'js-cookie'

@ -156,14 +183,17 @@ export default {
  data() {
    return {
      menuIsShown: true,
-      searchIsLoading: false,
      searchIsShown: true,
-      search: '',
+      searchAdvMenuShown: false,
      newPageModal: false,
      deletePageModal: false
    }
  },
  computed: {
+    search: sync('site/search'),
+    searchIsLoading: sync('site/searchIsLoading'),
+    searchRestrictLocale: sync('site/searchRestrictLocale'),
+    searchRestrictPath: sync('site/searchRestrictPath'),
    isLoading: get('isLoading'),
    title: get('site/title'),
    path: get('page/path'),
@ -275,6 +305,25 @@ export default {
      padding: 0;
    }
  }
+
+  &-search-adv {
+    position: absolute;
+    top: 7px;
+    right: 12px;
+    border-radius: 4px !important;
+
+    &::before {
+      border-radius: 4px !important;
+    }
+
+    &:hover, &:focus {
+      position: absolute !important;
+
+      &::before {
+        border-radius: 4px;
+      }
+    }
+  }
 }

 .navHeaderSearch {
--- a/client/components/common/search-results.vue
+++ b/client/components/common/search-results.vue
@ -0,0 +1,169 @@
+<template lang="pug">
+  .search-results(v-if='search.length > 1')
+    .search-results-container
+      .search-results-loader(v-if='searchIsLoading && results.length < 1')
+        orbit-spinner(
+          :animation-duration='1000'
+          :size='100'
+          color='#FFF'
+        )
+        .headline.mt-5 Searching...
+      .search-results-none(v-if='!searchIsLoading && results.length < 1')
+        img(src='/svg/icon-no-results.svg', alt='No Results')
+        .subheading No pages matching your query.
+      template(v-if='results.length > 0')
+        v-subheader.white--text Found {{response.totalHits}} results
+        v-list.radius-7(two-line)
+          template(v-for='(item, idx) of results')
+            v-list-tile(@click='', :key='item.id')
+              v-list-tile-avatar(tile)
+                img(src='/svg/icon-selective-highlighting.svg')
+              v-list-tile-content
+                v-list-tile-title(v-html='item.title')
+                v-list-tile-sub-title(v-html='item.description')
+                .caption.grey--text.mt-1(v-html='item.path')
+              v-list-tile-action
+                v-chip(label) {{item.locale.toUpperCase()}}
+            v-divider(v-if='idx < results.length - 1')
+        v-pagination.mt-3(
+          v-if='paginationLength > 1'
+          dark
+          v-model='pagination'
+          :length='paginationLength'
+        )
+      template(v-if='suggestions.length > 0')
+        v-subheader.white--text.mt-3 Did you mean...
+        v-list.radius-7(dense, dark)
+          template(v-for='(term, idx) of suggestions')
+            v-list-tile(:key='term', @click='setSearchTerm(term)')
+              v-list-tile-avatar
+                v-icon search
+              v-list-tile-content
+                v-list-tile-title(v-html='term')
+            v-divider(v-if='idx < suggestions.length - 1')
+      .text-xs-center.pt-4
+        v-btn(outline, color='orange', @click='search = ``', v-if='results.length > 0')
+          v-icon(left) save
+          span Copy Search Link
+        v-btn(outline, color='pink', @click='search = ``')
+          v-icon(left) clear
+          span Close
+</template>
+
+<script>
+import _ from 'lodash'
+import { get, sync } from 'vuex-pathify'
+import { OrbitSpinner } from 'epic-spinners'
+
+import searchPagesQuery from 'gql/common/common-pages-query-search.gql'
+
+export default {
+  components: {
+    OrbitSpinner
+  },
+  data() {
+    return {
+      pagination: 1,
+      response: {
+        results: [],
+        suggestions: [],
+        totalHits: 0
+      }
+    }
+  },
+  computed: {
+    search: sync('site/search'),
+    searchIsLoading: sync('site/searchIsLoading'),
+    searchRestrictLocale: sync('site/searchRestrictLocale'),
+    searchRestrictPath: sync('site/searchRestrictPath'),
+    results() {
+      return this.response.results ? this.response.results : []
+    },
+    hits() {
+      return this.response.totalHits ? this.response.totalHits : 0
+    },
+    suggestions() {
+      return this.response.suggestions ? this.response.suggestions : []
+    },
+    paginationLength() {
+      return this.response.totalHits > 0 ? 0 : Math.ceil(this.response.totalHits / 10)
+    }
+  },
+  methods: {
+    setSearchTerm(term) {
+      this.search = term
+    }
+  },
+  apollo: {
+    response: {
+      query: searchPagesQuery,
+      variables() {
+        return {
+          query: this.search
+        }
+      },
+      fetchPolicy: 'cache-and-network',
+      throttle: 1000,
+      skip() {
+        return !this.search || this.search.length < 2
+      },
+      update: (data) => _.get(data, 'pages.search', {}),
+      watchLoading (isLoading) {
+        this.searchIsLoading = isLoading
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.search-results {
+  position: fixed;
+  top: 64px;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 64px);
+  background-color: rgba(0,0,0,.9);
+  z-index: 100;
+  text-align: center;
+  animation: searchResultsReveal .6s ease;
+
+  @media #{map-get($display-breakpoints, 'sm-and-down')} {
+    top: 112px;
+  }
+
+  &-container {
+    margin: 12px auto;
+    width: 90vw;
+    max-width: 1024px;
+  }
+
+  &-loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    padding: 32px 0;
+    color: #FFF;
+  }
+
+  &-none {
+    color: #FFF;
+
+    img {
+      width: 200px;
+    }
+  }
+}
+
+@keyframes searchResultsReveal {
+  0% {
+    background-color: rgba(0,0,0,0);
+    padding-top: 32px;
+  }
+  100% {
+    background-color: rgba(0,0,0,.9);
+    padding-top: 0;
+  }
+}
+</style>
--- a/client/graph/common/common-pages-query-search.gql
+++ b/client/graph/common/common-pages-query-search.gql
@ -0,0 +1,15 @@
+query ($query: String!) {
+  pages {
+    search(query:$query) {
+      results {
+        id
+        title
+        description
+        path
+        locale
+      }
+      suggestions
+      totalHits
+    }
+  }
+}
--- a/client/scss/global.scss
+++ b/client/scss/global.scss
@ -6,3 +6,27 @@
 $tablet: 769px !default;
 $desktop: 980px !default;
 $widescreen: 1180px !default;
+
+$grid-breakpoints: (
+  'xs': 0,
+  'sm': 600px,
+  'md': 960px,
+  'lg': 1280px - 16px,
+  'xl': 1920px - 16px
+) !default;
+
+$display-breakpoints: (
+  'print-only': 'only print',
+  'screen-only': 'only screen',
+  'xs-only': 'only screen and (max-width: #{map-get($grid-breakpoints, 'sm') - 1})',
+  'sm-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')}) and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+  'sm-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'md') - 1})',
+  'sm-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'sm')})',
+  'md-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')}) and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+  'md-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'lg') - 1})',
+  'md-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'md')})',
+  'lg-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')}) and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+  'lg-and-down': 'only screen and (max-width: #{map-get($grid-breakpoints, 'xl') - 1})',
+  'lg-and-up': 'only screen and (min-width: #{map-get($grid-breakpoints, 'lg')})',
+  'xl-only': 'only screen and (min-width: #{map-get($grid-breakpoints, 'xl')})'
+) !default;
--- a/client/static/svg/icon-no-results.svg
+++ b/client/static/svg/icon-no-results.svg
@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 192 192" width="64px" height="64px">
+  <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+    <path fill="#ffffff" d="M150.3,156.6h-108.6c-5.55,0 -10.65,-2.85 -13.35,-7.8c-2.7,-4.8 -2.7,-10.65 0.15,-15.45l54.3,-90.45c2.85,-4.65 7.65,-7.5 13.2,-7.5c5.55,0 10.35,2.85 13.2,7.5l54.15,90.45c2.85,4.8 3,10.65 0.15,15.45c-2.7,4.8 -7.65,7.8 -13.2,7.8zM96,44.4c-2.25,0 -4.2,1.05 -5.4,3.15l-54.3,90.45c-1.2,1.95 -1.2,4.35 -0.15,6.45c1.05,2.1 3.15,3.15 5.55,3.15h108.45c2.25,0 4.35,-1.2 5.55,-3.15c1.2,-1.95 1.05,-4.35 -0.15,-6.45l-54.15,-90.45c-1.2,-1.95 -3.15,-3.15 -5.4,-3.15z"/>
+    <path fill="#ffffff" d="M91.5,109.95c0,2.55 1.95,4.5 4.5,4.5v0c2.55,0 4.5,-1.95 4.5,-4.5v-31.5c0,-2.55 -1.95,-4.5 -4.5,-4.5v0c-2.55,0 -4.5,1.95 -4.5,4.5"/>
+    <circle fill="#ffffff" cx="64" cy="83.5" transform="scale(1.5,1.5)" r="3"/>
+  </g>
+</svg>
--- a/client/static/svg/icon-selective-highlighting.svg
+++ b/client/static/svg/icon-selective-highlighting.svg
@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve" width="64px" height="64px">
+
+<g>
+	<g>
+	</g>
+</g>
+<g>
+	<path d="M86,9H32c-5.5,0-10,4.5-10,10v90c0,5.5,4.5,10,10,10h64c5.5,0,10-4.5,10-10V29C106,18,97,9,86,9z" style="fill:#FFFFFF;"/>
+</g>
+<g>
+	<path d="M55,62H42c-1.7,0-3-1.3-3-3s1.3-3,3-3h13c1.7,0,3,1.3,3,3S56.7,62,55,62z" style="fill:#E9EEF4;"/>
+</g>
+<g>
+	<path d="M65,62c-0.2,0-0.4,0-0.6-0.1c-0.2,0-0.4-0.1-0.6-0.2c-0.2-0.1-0.3-0.2-0.5-0.3c-0.2-0.1-0.3-0.2-0.4-0.4   c-0.1-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.2-0.6c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.6,0.9-2.1   c0.1-0.1,0.3-0.3,0.4-0.4c0.2-0.1,0.3-0.2,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.2c1-0.2,2,0.1,2.7,0.8c0.6,0.6,0.9,1.3,0.9,2.1   c0,0.2,0,0.4-0.1,0.6c0,0.2-0.1,0.4-0.2,0.6s-0.2,0.4-0.3,0.5c-0.1,0.2-0.2,0.3-0.4,0.5C66.6,61.7,65.8,62,65,62z" style="fill:#FF5576;"/>
+</g>
+<g>
+	<path d="M86,77H65c-1.7,0-3-1.3-3-3s1.3-3,3-3h21c1.7,0,3,1.3,3,3S87.7,77,86,77z" style="fill:#E9EEF4;"/>
+</g>
+<g>
+	<path d="M86,62H75c-1.7,0-3-1.3-3-3s1.3-3,3-3h11c1.7,0,3,1.3,3,3S87.7,62,86,62z" style="fill:#E9EEF4;"/>
+</g>
+<g>
+	<path d="M45,77h-3c-1.7,0-3-1.3-3-3s1.3-3,3-3h3c1.7,0,3,1.3,3,3S46.7,77,45,77z" style="fill:#E9EEF4;"/>
+</g>
+<g>
+	<path d="M76.2,92h-34c-1.7,0-3-1.3-3-3s1.3-3,3-3h34c1.7,0,3,1.3,3,3S77.9,92,76.2,92z" style="fill:#E9EEF4;"/>
+</g>
+<g>
+	<path d="M55,77c-0.8,0-1.6-0.3-2.1-0.9c-0.1-0.1-0.3-0.3-0.4-0.4c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.2-0.6   c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.6,0.9-2.1c0.7-0.7,1.7-1,2.7-0.8c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.4,0.2,0.5,0.3   c0.2,0.1,0.3,0.2,0.4,0.4c0.6,0.6,0.9,1.3,0.9,2.1s-0.3,1.6-0.9,2.1c-0.1,0.1-0.3,0.3-0.4,0.4c-0.2,0.1-0.3,0.2-0.5,0.3   c-0.2,0.1-0.4,0.1-0.6,0.2C55.4,77,55.2,77,55,77z" style="fill:#FF5576;"/>
+</g>
+<g>
+	<path d="M86,92c-0.8,0-1.6-0.3-2.1-0.9c-0.1-0.1-0.3-0.3-0.4-0.5c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.2-0.6   c0-0.2-0.1-0.4-0.1-0.6c0-0.8,0.3-1.6,0.9-2.1c0.7-0.7,1.7-1,2.7-0.8c0.2,0,0.4,0.1,0.6,0.2c0.2,0.1,0.4,0.2,0.5,0.3   c0.2,0.1,0.3,0.2,0.5,0.4c0.6,0.6,0.9,1.3,0.9,2.1c0,0.2,0,0.4-0.1,0.6c0,0.2-0.1,0.4-0.2,0.6s-0.2,0.4-0.3,0.5   c-0.1,0.2-0.2,0.3-0.4,0.5c-0.1,0.1-0.3,0.3-0.5,0.4c-0.2,0.1-0.3,0.2-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.2C86.4,92,86.2,92,86,92z" style="fill:#FF5576;"/>
+</g>
+<g>
+	<path d="M106,29H96c-5.5,0-10-4.5-10-10V9h0C97,9,106,18,106,29L106,29z" style="fill:#FFFFFF;"/>
+</g>
+<path d="M96,32h9.6c0.1,0,0.2,0,0.4,0c0,0,0,0,0,0c1.2,0,2.3-0.8,2.8-1.8c0.2-0.4,0.3-0.8,0.3-1.2c0-0.1,0-0.3,0-0.4  c-0.1-6-2.5-11.6-6.7-15.9C97.9,8.4,92.2,6,86,6c0,0,0,0,0,0H32c-7.2,0-13,5.8-13,13v90c0,7.3,5.9,13,11,13h63.8c8.7,0,15-5.5,15-13  l0.1-67c0-1.7-1.3-3-3-3c0,0,0,0,0,0c-1.7,0-3,1.3-3,3l-0.1,67c0,4.2-3.6,7-9,7H30c-1.7,0-5-3-5-7V19c0-3.9,3.1-7,7-7h51v7  C83,26.2,88.8,32,96,32z M102.7,26H96c-3.9,0-7-3.1-7-7v-6.7c3.4,0.6,6.5,2.2,9,4.7C100.5,19.5,102.1,22.6,102.7,26z" style="fill:#444B54;"/>
+</svg>
--- a/client/store/site.js
+++ b/client/store/site.js
@ -6,7 +6,11 @@ const state = {
  company: '',
  dark: siteConfig.darkMode,
  mascot: true,
-  title: siteConfig.title
+  title: siteConfig.title,
+  search: '',
+  searchIsLoading: false,
+  searchRestrictLocale: false,
+  searchRestrictPath: false
 }

 export default {
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@ -117,6 +117,7 @@
              span Print Format
            v-spacer
    nav-footer
+    search-results
    v-fab-transition
      v-btn(v-if='upBtnShown', fab, fixed, bottom, right, small, @click='$vuetify.goTo(0, scrollOpts)', color='primary')
        v-icon arrow_upward
--- a/dev/docker-postgres/docker-compose.yml
+++ b/dev/docker-postgres/docker-compose.yml
@ -27,12 +27,28 @@ services:
    ports:
      - "3001:8080"

+  solr:
+    image: solr:7-alpine
+    logging:
+      driver: "none"
+    networks:
+      - wikinet
+    ports:
+      - "8983:8983"
+    volumes:
+      - solr-data:/opt/solr/server/solr/mycores
+    entrypoint:
+      - docker-entrypoint.sh
+      - solr-precreate
+      - wiki
+
  wiki:
    build:
      context: .
      dockerfile: dev/docker-postgres/Dockerfile
    depends_on:
      - db
+      - solr
    networks:
      - wikinet
    ports:
@ -47,3 +63,4 @@ networks:

 volumes:
  db-data:
+  solr-data:
--- a/package.json
+++ b/package.json
@ -59,7 +59,8 @@
    "dependency-graph": "0.8.0",
    "diff": "4.0.1",
    "diff2html": "2.7.0",
-    "dotize": "^0.3.0",
+    "dotize": "0.3.0",
+    "elasticsearch": "15.4.1",
    "express": "4.16.4",
    "express-brute": "1.0.1",
    "file-type": "10.7.1",
@ -146,6 +147,7 @@
    "semver": "5.6.0",
    "serve-favicon": "2.5.0",
    "simple-git": "1.107.0",
+    "solr-node": "1.1.3",
    "sqlite3": "4.0.6",
    "subscriptions-transport-ws": "0.9.15",
    "twemoji": "11.3.0",
--- a/server/app/data.yml
+++ b/server/app/data.yml
@ -45,6 +45,8 @@ defaults:
      maxAge: 600
      methods: 'GET,POST'
      origin: true
+    search:
+      maxHits: 100
 localeNamespaces:
  - admin
  - auth
--- a/server/core/kernel.js
+++ b/server/core/kernel.js
@ -69,6 +69,7 @@ module.exports = {
    await WIKI.models.storage.refreshTargetsFromDisk()

    await WIKI.auth.activateStrategies()
+    await WIKI.models.searchEngines.initEngine()
    await WIKI.models.storage.initTargets()
    WIKI.scheduler.start()
  },
--- a/server/graph/resolvers/page.js
+++ b/server/graph/resolvers/page.js
@ -16,7 +16,18 @@ module.exports = {
        offsetPage: args.offsetPage || 0,
        offsetSize: args.offsetSize || 100
      })
+    },
+    async search (obj, args, context) {
+      if (WIKI.data.searchEngine) {
+        return WIKI.data.searchEngine.query(args.query, args)
+      } else {
+        return {
+          results: [],
+          suggestions: [],
+          totalHits: 0
        }
+      }
+    },
  },
  PageMutation: {
    async create(obj, args, context) {
--- a/server/graph/schemas/page.graphql
+++ b/server/graph/schemas/page.graphql
@ -20,6 +20,12 @@ type PageQuery {
    offsetPage: Int
    offsetSize: Int
  ): PageHistoryResult @auth(requires: ["manage:system", "read:pages"])
+
+  search(
+    query: String!
+    path: String
+    locale: String
+  ): PageSearchResponse! @auth(requires: ["manage:system", "read:pages"])
 }

 # -----------------------------------------------
@ -88,3 +94,17 @@ type PageHistoryResult {
  trail: [PageHistory]
  total: Int!
 }
+
+type PageSearchResponse {
+  results: [PageSearchResult]!
+  suggestions: [String]!
+  totalHits: Int!
+}
+
+type PageSearchResult {
+  id: Int!
+  title: String!
+  description: String!
+  path: String!
+  locale: String!
+}
--- a/server/models/searchEngines.js
+++ b/server/models/searchEngines.js
@ -95,6 +95,19 @@ module.exports = class SearchEngine extends Model {
    }
  }

+  static async initEngine() {
+    const searchEngine = await WIKI.models.searchEngines.query().findOne('isEnabled', true)
+    if (searchEngine) {
+      WIKI.data.searchEngine = require(`../modules/search/${searchEngine.key}/engine`)
+      WIKI.data.searchEngine.config = searchEngine.config
+      try {
+        await WIKI.data.searchEngine.init()
+      } catch (err) {
+        WIKI.logger.warn(err)
+      }
+    }
+  }
+
  static async pageEvent({ event, page }) {
    const searchEngines = await WIKI.models.storage.query().where('isEnabled', true)
    if (searchEngines && searchEngines.length > 0) {
--- a/server/modules/search/algolia/definition.yml
+++ b/server/modules/search/algolia/definition.yml
@ -4,4 +4,20 @@ description: Algolia is a powerful search-as-a-service solution, made easy to us
 author: requarks.io
 logo: https://static.requarks.io/logo/algolia.svg
 website: https://www.algolia.com/
-props: {}
+props:
+  appId:
+    type: String
+    title: App ID
+    hint: Your Algolia Application ID, found under API Keys
+    order: 1
+  apiKey:
+    type: String
+    title: Admin API Key
+    hint: Your Algolia Admin API Key, found under API Keys.
+    order: 2
+  indexName:
+    type: String
+    title: Index Name
+    hint: The name of the index you created under Indices.
+    default: wiki
+    order: 3
--- a/server/modules/search/db/definition.yml
+++ b/server/modules/search/db/definition.yml
@ -1,6 +1,6 @@
 key: db
-title: Database (built-in)
-description: Default database-based search engine.
+title: Database - Basic
+description: Default basic database-based search engine.
 author: requarks.io
 logo: https://static.requarks.io/logo/database.svg
 website: https://www.requarks.io/
--- a/server/modules/search/db/engine.js
+++ b/server/modules/search/db/engine.js
@ -1,26 +1,121 @@
+const _ = require('lodash')
+
 module.exports = {
  activate() {
-
+    // not used
  },
  deactivate() {
-
+    // not used
  },
-  query() {
-
+  /**
+   * INIT
+   */
+  init() {
+    // not used
  },
-  created() {
-
+  /**
+   * SUGGEST
+   *
+   * @param {String} q Query
+   * @param {Object} opts Additional options
+   */
+  async suggest(q, opts) {
+    const results = await WIKI.models.pages.query()
+      .column('title')
+      .where(builder => {
+        builder.where('isPublished', true)
+        if (opts.locale) {
+          builder.andWhere('locale', opts.locale)
+        }
+        if (opts.path) {
+          builder.andWhere('path', 'like', `${opts.path}%`)
+        }
+        builder.andWhere('title', 'like', `%${q}%`)
+      })
+      .limit(10)
+    return _.uniq(_.filter(_.flatten(results.map(r => r.title.split(' '))), w => w.indexOf(q) >= 0))
  },
-  updated() {
+  /**
+   * QUERY
+   *
+   * @param {String} q Query
+   * @param {Object} opts Additional options
+   */
+  async query(q, opts) {
+    const results = await WIKI.models.pages.query()
+      .column('id', 'title', 'description', 'path', 'localeCode as locale')
+      .where(builder => {
+        builder.where('isPublished', true)
+        if (opts.locale) {
+          builder.andWhere('localeCode', opts.locale)
+        }
+        if (opts.path) {
+          builder.andWhere('path', 'like', `${opts.path}%`)
+        }
+        // TODO: Add user permissions filtering
+        builder.andWhere(builder => {
+          switch(WIKI.config.db.type) {
+            case 'postgres':
+              builder.where('title', 'ILIKE', `%${q}%`)
+              builder.orWhere('description', 'ILIKE', `%${q}%`)
+              break
+            case 'mysql':
+            case 'mariadb':
+              builder.whereRaw(`title LIKE '%?%' COLLATE utf8_general_ci`, [q])
+              builder.orWhereRaw(`description LIKE '%?%' COLLATE utf8_general_ci`, [q])
+              break

+            // TODO: MSSQL handling
+            default:
+              builder.where('title', 'LIKE', `%${q}%`)
+              builder.orWhere('description', 'LIKE', `%${q}%`)
+              break
+          }
+        })
+      })
+      .limit(WIKI.config.search.maxHits)
+    return {
+      results,
+      suggestions: [],
+      totalHits: results.length
+    }
  },
-  deleted() {
-
+  /**
+   * CREATE
+   *
+   * @param {Object} page Page to create
+   */
+  async created(page) {
+    // not used
  },
-  renamed() {
-
+  /**
+   * UPDATE
+   *
+   * @param {Object} page Page to update
+   */
+  async updated(page) {
+    // not used
  },
-  rebuild() {
-
+  /**
+   * DELETE
+   *
+   * @param {Object} page Page to delete
+   */
+  async deleted(page) {
+    // not used
+  },
+  /**
+   * RENAME
+   *
+   * @param {Object} page Page to rename
+   */
+  async renamed(page) {
+    // not used
+  },
+  /**
+   * REBUILD INDEX
+   */
+  async rebuild() {
+    // not used
  }
 }
--- a/server/modules/search/elasticsearch/definition.yml
+++ b/server/modules/search/elasticsearch/definition.yml
@ -4,4 +4,41 @@ description: Elasticsearch is a distributed, RESTful search and analytics engine
 author: requarks.io
 logo: https://static.requarks.io/logo/elasticsearch.svg
 website: https://www.elastic.co/products/elasticsearch
-props: {}
+props:
+  apiVersion:
+    type: String
+    title: API Version
+    hint: Should match the version of the Elasticsearch nodes you are connecting to
+    order: 1
+    enum:
+      - '6.6'
+      - '6.5'
+      - '6.4'
+      - '6.3'
+    default: '6.6'
+  host:
+    type: String
+    title: Host(s)
+    hint: Comma-separated list of Elasticsearch hosts to connect to
+    order: 2
+  user:
+    type: String
+    title: Username
+    order: 3
+  pass:
+    type: String
+    title: Password
+    order: 4
+  sniff:
+    type: Boolean
+    title: Sniff on start
+    hint: 'Should Wiki.js attempt to detect the rest of the cluster on first connect? (Default: off)'
+    default: false
+    order: 5
+  sniffInterval:
+    type: Number
+    title: Sniff Interval
+    hint: '0 = disabled, Interval in seconds to check for updated list of nodes in cluster. (Default: 0)'
+    order: 6
+    default: 0
+
--- a/server/modules/search/postgres/definition.yml
+++ b/server/modules/search/postgres/definition.yml
@ -0,0 +1,30 @@
+key: postgres
+title: Database - PostgreSQL
+description: Advanced PostgreSQL-based search engine.
+author: requarks.io
+logo: https://static.requarks.io/logo/postgresql.svg
+website: https://www.requarks.io/
+props:
+  dictLanguage:
+    type: String
+    title: Dictionnary Language
+    hint: Language to use when creating and querying text search vectors.
+    default: english
+    enum:
+      - simple
+      - danish
+      - dutch
+      - english
+      - finnish
+      - french
+      - german
+      - hungarian
+      - italian
+      - norwegian
+      - portuguese
+      - romanian
+      - russian
+      - spanish
+      - swedish
+      - turkish
+    order: 1
--- a/server/modules/search/postgres/engine.js
+++ b/server/modules/search/postgres/engine.js
@ -0,0 +1,72 @@
+const _ = require('lodash')
+
+module.exports = {
+  activate() {
+    // not used
+  },
+  deactivate() {
+    // not used
+  },
+  /**
+   * INIT
+   */
+  init() {
+    // not used
+  },
+  /**
+   * SUGGEST
+   *
+   * @param {String} q Query
+   * @param {Object} opts Additional options
+   */
+  async suggest(q, opts) {
+
+  },
+  /**
+   * QUERY
+   *
+   * @param {String} q Query
+   * @param {Object} opts Additional options
+   */
+  async query(q, opts) {
+
+  },
+  /**
+   * CREATE
+   *
+   * @param {Object} page Page to create
+   */
+  async created(page) {
+    // not used
+  },
+  /**
+   * UPDATE
+   *
+   * @param {Object} page Page to update
+   */
+  async updated(page) {
+    // not used
+  },
+  /**
+   * DELETE
+   *
+   * @param {Object} page Page to delete
+   */
+  async deleted(page) {
+    // not used
+  },
+  /**
+   * RENAME
+   *
+   * @param {Object} page Page to rename
+   */
+  async renamed(page) {
+    // not used
+  },
+  /**
+   * REBUILD INDEX
+   */
+  async rebuild() {
+    // not used
+  }
+}
--- a/server/modules/search/solr/definition.yml
+++ b/server/modules/search/solr/definition.yml
@ -4,4 +4,31 @@ description: Solr is the popular, blazing-fast, open source enterprise search pl
 author: requarks.io
 logo: https://static.requarks.io/logo/solr.svg
 website: http://lucene.apache.org/solr/
-props: {}
+props:
+  host:
+    type: String
+    title: Host
+    hint: Host of the Solr server (e.g. 12.34.56.78 or solr.example.com)
+    default: solr
+    order: 1
+  port:
+    type: Number
+    title: Port
+    hint: Port of the Solr server
+    default: 8983
+    order: 2
+  core:
+    type: String
+    title: Core
+    hint: Core name (e.g. wiki)
+    default: wiki
+    order: 3
+  protocol:
+    type: String
+    title: Protocol
+    hint: Request protocol
+    default: http
+    enum:
+      - http
+      - https
+    order: 4