Add Search Page and tweak Result Ordering

docs/_css/makie.css

@@ -574,6 +574,7 @@ a.boxlink:hover {
         top: 4em;
         height: auto;
         max-height: calc(100vh - 4em);
+        min-height: calc(100vh - 16em);
         padding: 0;
     }
     .greedy-nav__toggle {

docs/_layout/body_layout.html

@@ -11,10 +11,13 @@
             <!-- <form id="lunrSearchForm" name="lunrSearchForm" action="/search/index.html">
               <input class="search-input" name="q" placeholder="Search docs" type="text">
             </form> -->
+            {{if searchpage}}
+            {{else}}
             <div class="stork-wrapper">
-              <input data-stork="makiesearch" class="stork-input" placeholder="Search documentation"/>
+              <input id="search-box" data-stork="makiesearch" class="stork-input" onkeypress="handleKeyPress(event)" placeholder="Search documentation"/>
               <div data-stork="makiesearch-output" class="stork-output"></div>
             </div>
+            {{end}}
             <h1>Navigation</h1>
             {{ navigation }}
           </div>

docs/_layout/foot.html

@@ -18,7 +18,7 @@
 
     </div>   <!-- closure of class site-container -->
 
-    
+
 
     <script src="/libs/navbar.js"></script>
     <!-- <script src="/libs/lunr/lunr.min.js"></script>
@@ -30,12 +30,26 @@
     prefix will be so everything has to be relative, but make_links_relative can only work with
     things like the src attribute of images, so we just use that -->
     <img id="stork-library-path-placeholder" src="/libs/stork" style="display:none"/>
+    {{if searchpage}}
+    <script>
+      storkfolder = document.querySelector("#stork-library-path-placeholder").src;
+      stork.register("makiesearch", `${storkfolder}/index_page.st`);
+    </script>
+    {{else}}
     <script>
       storkfolder = document.querySelector("#stork-library-path-placeholder").src;
-      stork.register("makiesearch", `${storkfolder}/index.st`);
+      stork.register("makiesearch", `${storkfolder}/index_box.st`);
+      function handleKeyPress(e){
+        // Redirect to search-page if enter is pressed in search-box
+        var key=e.keyCode || e.which;
+        if (key==13){
+          var input = document.getElementById("search-box").value
+          window.location = ("/search?q=" + input)
+        }
+      }
     </script>
+    {{end}}
 
-
     <!-- <script src="/libs/minimal-mistakes/main.min.js"></script> -->
     <script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
 

docs/_layout/style.html

@@ -6,6 +6,28 @@
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" type="text/css"/>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.min.css" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" href="https://files.stork-search.net/releases/v1.4.2/basic.css" />
+
+{{if searchpage}} <!-- Overwrite stork default style configuration for the search page -->
+<style>
+  .stork-wrapper .stork-results {
+    max-height: none;
+    overflow-y: hidden;
+  }
+  .stork-wrapper .stork-title {
+    font-size: 1em;
+  }
+</style>
+{{else}} <!-- Overwrite stork default style configuration for the search box -->
+<style>
+    .stork-wrapper {
+      width:99%
+    }
+    .stork-wrapper .stork-results {
+      max-height: 42vh;
+    }
+</style>
+{{end}}
+
 <!--[if IE ]>
 <style>
   /* old IE unsupported flexbox fixes */

docs/_libs/stork/config_box.toml

@@ -0,0 +1,10 @@
+[input]
+base_directory = "../.."
+url_prefix = ""
+html_selector = ".franklin-content"
+title_boost = "Ridiculous"
+
+[output]
+save_nearest_html_id = true
+excerpt_buffer = 12
+excerpts_per_result = 3

docs/_libs/stork/config_page.toml

@@ -0,0 +1,10 @@
+[input]
+base_directory = "../.."
+url_prefix = ""
+html_selector = ".franklin-content"
+title_boost = "Ridiculous"
+
+[output]
+save_nearest_html_id = true
+excerpt_buffer = 24
+excerpts_per_result = 7

docs/config.md

@@ -5,6 +5,7 @@ Add here global page variables to use throughout your website.
 author = "Makie.jl"
 mintoclevel = 2
 frontpage = false
+searchpage = false
 auto_code_path = true
 
 # Add here files or directories that should be ignored by Franklin, otherwise

docs/makedocs.jl

@@ -172,24 +172,27 @@ function populate_stork_config(deploydecision)
     finally
         cd(wd)
     end
-    cp("__site/libs/stork/config.toml", "__site/libs/stork/config_filled.toml", force = true)
-
-    toml = TOML.parsefile("__site/libs/stork/config.toml")
-    open("__site/libs/stork/config_filled.toml", "w") do io
-        toml["input"]["files"] = map(Dict ∘ pairs, sites)
-        subf = deploydecision.subfolder
-        toml["input"]["url_prefix"] = isempty(subf) ? "" : "/" * subf * "/" # then url without / prefix
-        TOML.print(io, toml, sorted = true)
-    end
 
+    for file in ["config_box", "config_page"]
+        cp("__site/libs/stork/$(file).toml", "__site/libs/stork/$(file)_filled.toml", force = true)
+
+        toml = TOML.parsefile("__site/libs/stork/$(file).toml")
+        open("__site/libs/stork/$(file)_filled.toml", "w") do io
+            toml["input"]["files"] = map(Dict ∘ pairs, sites)
+            subf = deploydecision.subfolder
+            toml["input"]["url_prefix"] = isempty(subf) ? "/" : "/" * subf * "/" # then url without / prefix
+            TOML.print(io, toml, sorted = true)
+        end
+    end
     return
 end
 
 function run_stork()
     wd = pwd()
     try
         cd("__site/libs/stork")
-        run(`$stork build --input config_filled.toml --output index.st`)
+        run(`$stork build --input config_box_filled.toml --output index_box.st`)
+        run(`$stork build --input config_page_filled.toml --output index_page.st`)
     finally
         cd(wd)
     end

docs/search.md

@@ -1,10 +1,25 @@
 @def title = "Search"
 @def hidden = true
+@def searchpage = true
 
 ## Search
-
-Number of results found: ~~~<span id="resultCount"></span>~~~
-
 ~~~
-<div id="searchResults"></div>
+<div class="stork-wrapper" id="search-page">
+  <input id="search-input" data-stork="makiesearch" class="stork-input" placeholder="Search documentation"/>
+  <div data-stork="makiesearch-output" class="stork-output-title"></div>
+</div>
+
+<script>
+  // this is a hacky way make stork update the results since updating is not possible through the stork API (yet)
+  function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  sleep(200).then(() => {
+    var search_input = new URLSearchParams(window.location.search).get('q');
+    var input = document.querySelector(`input[data-stork="makiesearch"]`);
+    input.value = search_input;
+    input.focus()
+    input.dispatchEvent(new Event("input"));
+  })
+</script>
 ~~~