Merge pull request #5 from owncloud/integrate-lunr-search

Integrate lunr search

package.json

@@ -1,16 +1,12 @@
 {
-  "name": "antora-ui-default",
-  "description": "An archetype project that produces a UI for creating documentation sites with Antora",
-  "homepage": "https://gitlab.com/antora/antora-ui-default",
-  "license": "MPL-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://gitlab.com/antora/antora-ui-default.git"
-  },
-  "engines": {
-    "node": ">= 8.0.0"
+  "name": "owncloud-docs-ui",
+  "version": "1.0.0",
+  "description": "The custom ownCloud Documentation UI Theme",
+  "directories": {
+    "doc": "docs"
   },
-  "devDependencies": {
+  "dependencies": {
+    "antora-lunr": "v0.1.0",
     "autoprefixer": "^7.1.6",
     "browserify": "^14.5.0",
     "chokidar": "^2.0.1",
@@ -33,6 +29,7 @@
     "handlebars": "^4.0.10",
     "highlight.js": "^9.12.0",
     "js-yaml": "^3.10.0",
+    "lunr": "^2.2.0",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
     "postcss-calc": "^6.0.1",
@@ -47,5 +44,26 @@
     "typeface-roboto-mono": "^0.0.44",
     "vinyl-buffer": "^1.0.0",
     "vinyl-fs": "^2.4.4"
-  }
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/owncloud/docs-ui.git"
+  },
+  "keywords": [
+    "owncloud",
+    "antora",
+    "asciidoc",
+    "documentation",
+    "lunr"
+  ],
+  "author": "Matthew Setter <matthew@matthewsetter.com>",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/owncloud/docs-ui/issues"
+  },
+  "homepage": "https://github.com/owncloud/doc-uis#readme"
 }

preview-site-src/ui-model.yml

@@ -8,9 +8,9 @@ site:
     url: '#'
     versions:
     - &latest_version_abc
-      url: '#' 
+      url: '#'
       version: '1.1'
-    - url: '#' 
+    - url: '#'
       version: '1.0'
     latestVersion: *latest_version_abc
   - &component
@@ -22,23 +22,23 @@ site:
       url: /xyz/6.0/index.html
       version: '6.0'
     - &component_version
-      url: '#' 
+      url: '#'
       version: '5.2'
-    - url: '#' 
+    - url: '#'
       version: '5.1'
-    - url: '#' 
+    - url: '#'
       version: '5.0'
     latestVersion: *latest_version_xyz
   - name: 123
     title: Project 123
     url: '#'
     versions:
     - &latest_version_123
-      url: '#' 
+      url: '#'
       version: '2.2'
-    - url: '#' 
+    - url: '#'
       version: '2.1'
-    - url: '#' 
+    - url: '#'
       version: '2.0'
     latestVersion: *latest_version_123
 page:

src/css/header.css

@@ -285,3 +285,115 @@ body {
   padding: 0 0.75em;
   white-space: nowrap;
 }
+
+.navbar-brand .navbar-item + .navbar-item {
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
+  max-height: calc(100vh - 3.25rem);
+}
+
+@media screen and (max-width: 768px) {
+  .navbar-brand .navbar-item + .navbar-item {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .algolia-autocomplete .ds-dropdown-menu {
+    min-width: calc(100vw - 2.75rem) !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .navbar-brand {
+    flex-grow: 1;
+  }
+
+  .navbar-menu {
+    flex-grow: 0;
+  }
+}
+
+#search-input {
+  color: #333;
+  font-family: inherit;
+  font-size: 0.95rem;
+  border: 1px solid #dbdbdb;
+  border-radius: 0.1em;
+  line-height: 1.5;
+  padding: 0 0.25em;
+  width: 100%;
+}
+
+@media screen and (min-width: 769px) {
+  #search-input {
+    width: 100%;
+  }
+}
+
+.search-result-dropdown-menu {
+  position: absolute;
+  z-index: 100;
+  display: block;
+  right: 0;
+  left: inherit;
+  top: 100%;
+  border-radius: 4px;
+  margin: 6px 0 0;
+  padding: 0;
+  text-align: left;
+  height: auto;
+  background: transparent;
+  border: none;
+  max-width: 600px;
+  min-width: 500px;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.search-result-dataset {
+  position: relative;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+  border-radius: 4px;
+  overflow: auto;
+  padding: 0 8px 8px;
+  max-height: calc(100vh - 3.25rem);
+  color: #333;
+}
+
+.search-result-highlight {
+  color: #174d8c;
+  background: rgba(143, 187, 237, 0.1);
+}
+
+.search-result-item {
+  display: flex;
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.search-result-document-title {
+  max-width: 40%;
+  border-right: 1px solid #999;
+  padding-right: 0.5rem;
+  color: #999;
+  font-size: 0.8rem;
+  width: 40%;
+}
+
+.search-result-document-hit {
+  padding-left: 1rem;
+  font-size: 0.9rem;
+  width: 60%;
+}
+
+.search-result-document-hit > a {
+  color: inherit;
+}
+
+.search-result-document-hit > a:hover {
+  background-color: rgba(69, 142, 225, 0.05);
+}