Bump antora from 2.3 to 3.0 (#92)

* Bump antora from 2.3 to 3.0

* Update antora-lunr to lunr-extension

* Bump asciidoctor-kroki to 0.15.4

* Bump asciidoctor-mathjax to 0.0.5

* Fix build script for Netlify

Author: andreslucena

antora-playbook.yml

@@ -16,9 +16,12 @@ content:
       branches: develop
 ui:
   bundle:
-    url: https://github.com/decidim/documentation-antora-ui/releases/download/v0.3/ui-bundle.zip
+    url: https://github.com/decidim/documentation-antora-ui/releases/download/v0.4/ui-bundle.zip
     snapshot: true
   supplemental_files: ./supplemental_ui
+antora:
+  extensions:
+    - require: '@antora/lunr-extension'
 asciidoc:
   attributes:
     kroki-fetch-diagram: true

bin/dbuild

@@ -1,4 +1,4 @@
 #!/bin/env bash
 
-docker run -u $(id -u) -e DOCSEARCH_ENABLED=true -e DOCSEARCH_ENGINE=lunr -v $PWD:/antora:Z --rm -t antora/antora --generator antora-site-generator-lunr --cache-dir=./.cache/antora antora-playbook.yml $@
+docker run -u $(id -u) -v $PWD:/antora:Z --rm -t antora/antora --cache-dir=./.cache/antora antora-playbook.yml $@
 

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   publish = "build/site/"
-  command = "node_modules/.bin/antora --generator antora-site-generator-lunr --stacktrace --fetch --html-url-extension-style=indexify antora-playbook.yml"
+  command = "npm run build"
 
 [build.environment]
   NODE_VERSION = "14"
@@ -10,7 +10,7 @@
   DOCSEARCH_ENGINE = "lunr"
 
 [context.deploy-preview]
-  command = "sed -i'' -e 's;branches: master;branches: HEAD;g' antora-playbook.yml && node_modules/.bin/antora --generator antora-site-generator-lunr --stacktrace --fetch --html-url-extension-style=indexify --url $DEPLOY_PRIME_URL antora-playbook.yml"
+  command = "sed -i'' -e 's;branches: master;branches: HEAD;g' antora-playbook.yml && npm run build"
 
 [[redirects]]
   from = "/social-contract/en/*"

package-lock.json

@@ -2,16 +2,15 @@
   "name": "decidim-documentation",
   "private": true,
   "scripts": {
-    "build": "DOCSEARCH_ENABLED=true DOCSEARCH_ENGINE=lunr antora --generator antora-site-generator-lunr antora-playbook.yml $@"
+    "build": "antora antora-playbook.yml $@"
   },
   "devDependencies": {
-    "@antora/cli": "^2.3.0",
-    "@antora/site-generator-default": "^2.3.0"
+    "@antora/cli": "^3.0.0",
+    "@antora/site-generator-default": "^3.0.0"
   },
   "dependencies": {
-    "antora-lunr": "^0.7.1",
-    "antora-site-generator-lunr": "^0.5.0",
-    "asciidoctor-kroki": "^0.9.2",
+    "@antora/lunr-extension": "^1.0.0-alpha.6",
+    "asciidoctor-kroki": "^0.15.4",
     "asciidoctor-mathjax": "0.0.5"
   }
 }

package.json

@@ -1,35 +1,3 @@
-.navbar-brand .navbar-item + .navbar-item {
-  flex-grow: 1;
-  justify-content: flex-end;
-}
-
-@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;
-  width: 150px;
-  border: 1px solid #dbdbdb;
-  border-radius: 0.1em;
-  line-height: 1.5;
-  padding: 0 0.25em;
-}
-
-@media screen and (min-width: 769px) {
-  #search-input {
-    width: 200px;
-  }
-}
-
 .search-result-dropdown-menu {
   position: absolute;
   z-index: 100;
@@ -50,11 +18,6 @@
 }
 
 @media screen and (max-width: 768px) {
-  .navbar-brand .navbar-item + .navbar-item {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
   .search-result-dropdown-menu {
     min-width: calc(100vw - 3.75rem);
   }
@@ -66,50 +29,47 @@
   background: #fff;
   border-radius: 4px;
   overflow: auto;
-  padding: 0 8px 8px;
+  padding: 0 8px;
   max-height: calc(100vh - 5.25rem);
-  color: #333;
-}
-
-.search-result-highlight {
-  color: #174d8c;
-  background: rgba(143, 187, 237, 0.1);
-  padding: .1em .05em;
+  line-height: 1.5;
 }
 
 .search-result-item {
   display: flex;
-  font-size: 1rem;
-  margin-bottom: 0.5rem;
-  margin-top: 0.5rem;
+  margin: 0.5rem 0;
 }
 
 .search-result-document-title {
   width: 33%;
   border-right: 1px solid #ddd;
-  color: #a4a7ae;
+  color: #02060c;
+  font-weight: 500;
   font-size: 0.8rem;
-  padding: 0.25rem 0.5rem 0.25rem 0;
+  padding: 0.5rem 0.5rem 0.5rem 0;
   text-align: right;
   position: relative;
   word-wrap: break-word;
 }
 
 .search-result-document-hit {
   flex: 1;
-  font-size: 0.75em;
-  color: #02060c;
-  font-weight: 700;
+  font-size: 0.75rem;
+  color: #63676d;
 }
 
 .search-result-document-hit > a {
   color: inherit;
   display: block;
-  padding: 0.5rem 0 0.5rem 1rem;
-  margin-bottom: 0.25rem;
+  padding: 0.55rem 0.25rem 0.55rem 0.75rem;
 }
 
 .search-result-document-hit > a:hover {
   background-color: rgba(69, 142, 225, 0.05);
 }
 
+.search-result-highlight {
+  color: #174d8c;
+  background: rgba(143, 187, 237, 0.1);
+  padding: 0.1em 0.05em;
+  font-weight: 500;
+}

supplemental_ui/css/search.css

@@ -1,10 +1,20 @@
-/* eslint-env browser */
-window.antoraLunr = (function (lunr) {
+/* global CustomEvent */
+;(function (globalScope) {
+  /* eslint-disable no-var */
+  var config = document.getElementById('search-ui-script').dataset
+  var snippetLength = parseInt(config.snippetLength || 100, 10)
+  var siteRootPath = config.siteRootPath || ''
+  appendStylesheet(config.stylesheet)
   var searchInput = document.getElementById('search-input')
   var searchResult = document.createElement('div')
   searchResult.classList.add('search-result-dropdown-menu')
   searchInput.parentNode.appendChild(searchResult)
 
+  function appendStylesheet (href) {
+    if (!href) return
+    document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: href }))
+  }
+
   function highlightText (doc, position) {
     var hits = []
     var start = position[0]
@@ -17,9 +27,8 @@ window.antoraLunr = (function (lunr) {
 
     var end = start + length
     var textEnd = text.length - 1
-    var contextOffset = 15
-    var contextAfter = end + contextOffset > textEnd ? textEnd : end + contextOffset
-    var contextBefore = start - contextOffset < 0 ? 0 : start - contextOffset
+    var contextAfter = end + snippetLength > textEnd ? textEnd : end + snippetLength
+    var contextBefore = start - snippetLength < 0 ? 0 : start - snippetLength
     if (start === 0 && end === textEnd) {
       hits.push(highlightSpan)
     } else if (start === 0) {
@@ -36,18 +45,16 @@ window.antoraLunr = (function (lunr) {
     return hits
   }
 
-  function highlightTitle (hash, doc, position) {
+  function highlightTitle (sectionTitle, doc, position) {
     var hits = []
     var start = position[0]
     var length = position[1]
 
     var highlightSpan = document.createElement('span')
     highlightSpan.classList.add('search-result-highlight')
     var title
-    if (hash) {
-      title = doc.titles.filter(function (item) {
-        return item.id === hash
-      })[0].text
+    if (sectionTitle) {
+      title = sectionTitle.text
     } else {
       title = doc.title
     }
@@ -71,7 +78,7 @@ window.antoraLunr = (function (lunr) {
     return hits
   }
 
-  function highlightHit (metadata, hash, doc) {
+  function highlightHit (metadata, sectionTitle, doc) {
     var hits = []
     for (var token in metadata) {
       var fields = metadata[token]
@@ -80,7 +87,7 @@ window.antoraLunr = (function (lunr) {
         if (positions.position) {
           var position = positions.position[0] // only higlight the first match
           if (field === 'title') {
-            hits = highlightTitle(hash, doc, position)
+            hits = highlightTitle(sectionTitle, doc, position)
           } else if (field === 'text') {
             hits = highlightText(doc, position)
           }
@@ -90,30 +97,32 @@ window.antoraLunr = (function (lunr) {
     return hits
   }
 
-  function createSearchResult(result, store, searchResultDataset) {
+  function createSearchResult (result, store, searchResultDataset) {
     result.forEach(function (item) {
-      var url = item.ref
-      var hash
-      if (url.includes('#')) {
-        hash = url.substring(url.indexOf('#') + 1)
-        url = url.replace('#' + hash, '')
+      var ids = item.ref.split('-')
+      var docId = ids[0]
+      var doc = store[docId]
+      var sectionTitle
+      if (ids.length > 1) {
+        var titleId = ids[1]
+        sectionTitle = doc.titles.filter(function (item) {
+          return String(item.id) === titleId
+        })[0]
       }
-      var doc = store[url]
       var metadata = item.matchData.metadata
-      var hits = highlightHit(metadata, hash, doc)
-      searchResultDataset.appendChild(createSearchResultItem(doc, item, hits))
+      var hits = highlightHit(metadata, sectionTitle, doc)
+      searchResultDataset.appendChild(createSearchResultItem(doc, sectionTitle, item, hits))
     })
   }
 
-  function createSearchResultItem (doc, item, hits) {
+  function createSearchResultItem (doc, sectionTitle, item, hits) {
     var documentTitle = document.createElement('div')
     documentTitle.classList.add('search-result-document-title')
     documentTitle.innerText = doc.title
     var documentHit = document.createElement('div')
     documentHit.classList.add('search-result-document-hit')
     var documentHitLink = document.createElement('a')
-    var rootPath = window.antora.basePath
-    documentHitLink.href = rootPath + item.ref
+    documentHitLink.href = siteRootPath + doc.url + (sectionTitle ? '#' + sectionTitle.hash : '')
     documentHit.appendChild(documentHitLink)
     hits.forEach(function (hit) {
       documentHitLink.appendChild(hit)
@@ -140,6 +149,11 @@ window.antoraLunr = (function (lunr) {
     return searchResultItem
   }
 
+  function clearSearchResults (reset) {
+    if (reset === true) searchInput.value = ''
+    searchResult.innerHTML = ''
+  }
+
   function search (index, text) {
     // execute an exact match search
     var result = index.search(text)
@@ -157,10 +171,7 @@ window.antoraLunr = (function (lunr) {
   }
 
   function searchIndex (index, store, text) {
-    // reset search result
-    while (searchResult.firstChild) {
-      searchResult.removeChild(searchResult.firstChild)
-    }
+    clearSearchResults(false)
     if (text.trim() === '') {
       return
     }
@@ -175,6 +186,10 @@ window.antoraLunr = (function (lunr) {
     }
   }
 
+  function confineEvent (e) {
+    e.stopPropagation()
+  }
+
   function debounce (func, wait, immediate) {
     var timeout
     return function () {
@@ -191,22 +206,43 @@ window.antoraLunr = (function (lunr) {
     }
   }
 
-  function init (data) {
-    var index = Object.assign({index: lunr.Index.load(data.index), store: data.store})
-    var search = debounce(function () {
-      searchIndex(index.index, index.store, searchInput.value)
-    }, 100)
-    searchInput.addEventListener('keydown', search)
-
-    // this is prevented in case of mousedown attached to SearchResultItem
-    searchInput.addEventListener('blur', function (e) {
-      while (searchResult.firstChild) {
-        searchResult.removeChild(searchResult.firstChild)
-      }
-    })
+  function enableSearchInput (enabled) {
+    searchInput.disabled = !enabled
+    searchInput.title = enabled ? '' : 'Loading index...'
   }
 
-  return {
-    init: init,
+  function initSearch (lunr, data) {
+    var start = performance.now()
+    var index = Object.assign({ index: lunr.Index.load(data.index), store: data.store })
+    enableSearchInput(true)
+    searchInput.dispatchEvent(
+      new CustomEvent('loadedindex', {
+        detail: {
+          took: performance.now() - start,
+        },
+      })
+    )
+    var debug = 'URLSearchParams' in globalScope && new URLSearchParams(globalScope.location.search).has('lunr-debug')
+    searchInput.addEventListener(
+      'keydown',
+      debounce(function (e) {
+        if (e.key === 'Escape' || e.key === 'Esc') return clearSearchResults(true)
+        try {
+          var query = searchInput.value
+          if (!query) return clearSearchResults()
+          searchIndex(index.index, index.store, searchInput.value)
+        } catch (err) {
+          if (debug) console.debug('Invalid search query: ' + query + ' (' + err.message + ')')
+        }
+      }, 100)
+    )
+    searchInput.addEventListener('click', confineEvent)
+    searchResult.addEventListener('click', confineEvent)
+    document.documentElement.addEventListener('click', clearSearchResults)
   }
-})(window.lunr)
+
+  // disable the search input until the index is loaded
+  enableSearchInput(false)
+
+  globalScope.initSearch = initSearch
+})(typeof globalThis !== 'undefined' ? globalThis : window)