feat: search + basic engine (wip)

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'))

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>
 

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')
       }

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 {

client/components/common/search-results.vue

+<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>

client/graph/common/common-pages-query-search.gql

+query ($query: String!) {
+  pages {
+    search(query:$query) {
+      results {
+        id
+        title
+        description
+        path
+        locale
+      }
+      suggestions
+      totalHits
+    }
+  }
+}

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;

client/static/svg/icon-no-results.svg

+<?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>

client/static/svg/icon-selective-highlighting.svg

+<?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>

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 {

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

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:

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",

server/app/data.yml

@@ -45,6 +45,8 @@ defaults:
       maxAge: 600
       methods: 'GET,POST'
       origin: true
+    search:
+      maxHits: 100
 localeNamespaces:
   - admin
   - auth

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()
   },

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) {

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!
+}

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) {

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

server/modules/search/db/definition.yml

 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/

server/modules/search/db/engine.js

+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
   }
 }

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
+

server/modules/search/postgres/definition.yml

+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

server/modules/search/postgres/engine.js

+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
+  }
+}

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