Alternate Search Libraries Tinysearch and Stork

.gitignore

@@ -1,2 +1,3 @@
 public
-themes
+themes
+storage

README.md

@@ -19,7 +19,7 @@ Maintenance of this project is made possible by all the <a href="https://github.
 
 ## Requirements
 
-This theme requires version 0.14.1 or later of [Zola](https://www.getzola.org/documentation/getting-started/installation/)
+This theme requires version 0.16.0 or later of [Zola](https://www.getzola.org/documentation/getting-started/installation/)
 
 ## Quick Start
 
@@ -59,37 +59,45 @@ git submodule add https://github.com/jieiku/abridge.git themes/abridge
 
 ### Step 3: Configuration
 
-Enable the theme in your `config.toml` in the site directory:
-
-```toml
-theme = "abridge"
-```
-
-Or copy the `config.toml` from the theme directory to your project's root directory:
+Copy the `config.toml` from the theme directory to your project's root directory:
 (This will give you a base configuration with all config values used)
+If you plan to use the search_facade feature (dynamic ondemand loading of search) then also copy the package.json (and netlify.toml if you use netlify)
+You will also want to copy the content/static folder if you intend to use stork or tinysearch
 
 ```bash
 cp themes/abridge/config.toml config.toml
+cp themes/abridge/package.json package.json
+cp themes/abridge/netlify.toml netlify.toml
+cp -r themes/abridge/content/static content/
 ```
 
-Uncomment the theme line, and point extra_syntaxes_and_themes at the correct directory:
+Uncomment the theme line:
 ```bash
 sed -i 's/^#theme = "abridge"/theme = "abridge"/' config.toml
-sed -i 's/^extra_syntaxes_and_themes = \["highlight_themes"\]/extra_syntaxes_and_themes = \["highlight_themes", "themes\/abridge\/highlight_themes"\]/' config.toml
 ```
 
-The result should be:
-```toml
-theme = "abridge"
-[markdown]
-extra_syntaxes_and_themes = ["highlight_themes", "themes/abridge/highlight_themes"]
-highlight_code = true
-highlight_theme = "css"
+### Step 4: Add new content
+
+You can copy the content from the theme directory to your project:
+
+```bash
+cp -r themes/abridge/content .
 ```
 
-By default abridge uses `highlight_theme = "css"`.
+You can modify or add new posts in the content directory as needed.
+
+### Step 5: Run the project
 
-This allows the code block light/dark mode to change with the rest of the site, this also prevents unsafe-inline for style-src in our CSP.
+Just run `zola serve` in the root path of the project:
+
+```bash
+zola serve
+```
+
+Zola will start the development web server making your site accessible by default at
+`http://127.0.0.1:1111`. Saved changes will live reload in the browser.
+
+### Step 6: Add provisions for search_facade.js (dynamic ondemand loading of search related js) or disable the facade.
 
 **IMPORTANT!** by default abridge dynamically loads the js related to the search when the search box is clicked, this allows for a faster page load and saved bandwidth. (not everyone needs or will use the search!)
 
@@ -100,25 +108,23 @@ to generate this file you have to do this:
 ```shell
 zola build
 npm run abridge
-zola build
+zola build # or zola serve
 ```
 
 or if testing/running the theme directly:
 
 ```shell
 zola build
 npm run abridge-demo
-zola build
+zola build # or zola serve
 ```
 
 I completely understand that this makes configuration a bit complicated. Zola does not have any built-in facilities for bundling javascript so we are using uglifyjs, shasum, openssl, etc (all defined in package.json) If you find this too difficult then I highly suggest just disabling the facade and loading the search index with the rest of the page:
 
-To disable the facade (dynamic loading of search), you can do this by commenting out the facade line in the config.toml.
-You also need to change the bundle that you use:
+You can disable the facade (dynamic loading of search) in the config.toml:
 
 ```toml
-#js_search_facade = "search_facade.js" # Do not load search until user interaction with search. [comment out to disable]
-js_bundle = "abridge-nofacade.min.js"
+js_search_facade = false
 ```
 
 The Abridge demo uses netlify, and the included package.json and netlify.toml files handle this extra bundle step for us automatically.
@@ -143,26 +149,75 @@ to this:
 command = "zola build && npm run abridge && zola build"
 ```
 
-### Step 4: Add new content
+### Step 7: Switch Search library (optional)
 
-You can copy the content from the theme directory to your project:
+Abridge by default uses elasticlunr for the search library (zola's default), but both tinysearch and stork are supported search libraries.
 
-```bash
-cp -r themes/abridge/content .
+**Switch to tinysearch:**
+
+First you have to install tinysearch so that you can build the index:
+
+```shell
+git clone https://github.com/tinysearch/tinysearch
+cd tinysearch
+cargo build --release
+sudo cp ./target/release/tinysearch /usr/local/bin/tinysearch
+exit # reload shell environment
 ```
 
-You can modify or add new posts in the content directory as needed.
+Switch abridge to tinysearch:
 
-### Step 5: Run the project
+```shell
+cd ~/.dev/abridge
+sed -i 's/^search_library =.*/search_library = "tinysearch"/' config.toml
+zola build
+tinysearch --optimize --path static public/data_tinysearch/index.html
+# zola serve
+```
 
-Just run `zola serve` in the root path of the project:
+**Switch to stork:**
 
-```bash
-zola serve
+First you have to install stork so that you can build the index:
+
+```shell
+git clone https://github.com/jameslittle230/stork
+cd stork
+cargo build --release
+sudo cp ./target/release/stork /usr/local/bin/stork
+exit # reload shell environment
 ```
 
-Zola will start the development web server making your site accessible by default at
-`http://127.0.0.1:1111`. Saved changes will live reload in the browser.
+Switch abridge to stork:
+
+```shell
+cd ~/.dev/abridge
+sed -i 's/^search_library =.*/search_library = "stork"/' config.toml
+zola build
+stork build --input public/data_stork/index.html --output static/stork.st
+# zola serve
+```
+
+**Switch back to elasticlunr:**
+
+abridge as a theme:
+```shell
+cd ~/.dev/abridge
+sed -i 's/^search_library =.*/search_library = false/' config.toml
+zola build
+npm run abridge
+zola build
+# zola serve
+```
+
+abridge theme directly:
+```shell
+cd ~/.dev/abridge
+sed -i 's/^search_library =.*/search_library = false/' config.toml
+zola build
+npm run abridge-demo
+zola build
+# zola serve
+```
 
 ## Customization
 
@@ -205,15 +260,15 @@ These are the javascript files currently used by Abridge:
 
 - search_index.en.js: search index generated by zola at each build for elasticlunr.
 - elasticlunr.min.js: search library for client side searching.
-- email.js: uses javascript to obfuscate your real email address for the mail icon at the bottom of the page.
 - search.js: to make use of elasticlunr from our sites search box for both suggestions and the results page.
-- search_facade.js: used to dynamically load a bundle containing all search related js ONLY when the search box is clicked.
+- search_facade.js: used to dynamically load a bundle containing all search related js ONLY when the search box is clicked. (on-demand)
+- email.js: uses javascript to obfuscate your real email address for the mail icon at the bottom of the page.
 - codecopy.js: add a Copy Button to code blocks, to copy contents of the code block to clipboard.
 - theme.js: very tiny script to facilitate local storage for the theme switcher. (never bundle, gets loaded separate)
 - theme_button.js: tiny script for the theme switcher function when you click the theme switch button.
 - prestyle.js: Used to preload css files `<link rel="preload"` - this script changes these to `<link rel="stylesheet"` once the page has finished loading, this allows us to load stylesheets for external fonts, fontawesome, or katex in a non blocking fashion.
 
-js_bundle is set to a javascript file with a bundle of multiple javascript files, this allows us to serve fewer javascript files (only the search index and the bundle). Included are a few of the likely most commonly used combinations, but you can generate these yourself using uglifyjs if you need to, there are examples in the config.toml, eg:
+js_bundle is set to a javascript file with a bundle of multiple javascript files, this allows us to serve fewer javascript files (only the search index and the bundle, or if using the facade all the js related features minus the search related files). Included are a few of the likely most commonly used combinations, but you can generate any combination of js features into a bundle yourself using uglifyjs if you need to, there are examples in the config.toml (or in package.json), eg:
 
 `uglifyjs prestyle.js theme_button.js elasticlunr.min.js search.js -c -m -o abridge-nofacade.min.js`
 
@@ -228,7 +283,7 @@ Abridge Alternate Bundles:
 Support Files:
 - theme.min.js (not a bundle, just a minification of theme.js)
 - katexbundle.min.js - includes: katex.min.js mathtex-script-type.min.js auto-render.min.js katexoptions.js
-- search_bundle.min.js: includes: search_index.en, elasticlunr, search
+- search_bundle.min.js: includes: search_index.en, elasticlunr, search (loaded on demand by search_facade)
 
 ### Global Configuration
 
@@ -298,17 +353,23 @@ The following options should be under the `[extra]` in `config.toml`
 - `security_header_csp` - Content Security policy, to enfore security rules: [observatory](https://observatory.mozilla.org), [csp-google](https://csp-evaluator.withgoogle.com/)
 
 - `integrity` - Useful to set false during development, should normally be set to true.
+- `js_bundle` - Useful to set false during javascript development, should normally be set to true.
+- `js_switcher` - Set to false to disable the theme switcher.
+- `js_search_facade` - Set to false to disable the search facade (dynamic loading of search_bundle).
+- `search_library` - search library to use, valid values are: false or elasticlunr, tinysearch, stork
+
 - `js_search_index` - The search index file to include in the header, comment out to disable.
 - `js_prestyle` - The script file used to preload: FontAwesome, Katex, external Google Fonts.
-- `js_search` - The search script file to include in the header, comment out to disable.
-
+- `js_codecopy` - The script file used to copy the code in code blocks.
+- `js_email` - The script file used to obfuscate the email link in footer.
 - `js_theme` - Used for the Theme Switcher, to facilitate localstorage.
 - `js_themeButton` - Used for the Theme Switcher.
-- `js_bundle` - Used to define a javascript bundle, [more information](https://github.com/Jieiku/abridge#javascript-files-js_bundle-and-options).
-- `stylesheets = [ "abridge.css" ]` - The stylesheet file(s) to include in the header.
+
+- `stylesheets = [ "abridge-switcher.css" ]` - The stylesheet file(s) to include in the header.
 
 - `banner` - Image to use in seo related cards, this will be the fallback image if the individual articles does not provide one.
 - `favicon_...` - Used to set the various favicons (displayed in bookmarks and active browser tab)
+- `icon_...` - Used to set the various icons used on the site.
 - `fontawesome =` - Uncomment to enable fontawesome library, this will include the file in the header.
     * `icon_read` - icon to display in meta info on index and posts, comment out to disable
     * `icon_date` - icon to display in meta info on index and posts, comment out to disable

config.toml

@@ -1,11 +1,11 @@
-base_url = "https://abridge.netlify.app" # do NOT include a trailing slash on the base URL for web urls
-#base_url = "/home/jieiku/.dev/abridge/public/" # used for locally usable build directly from disk, also set below extra.uglyurls = true
+# do NOT include a trailing slash on the base URL for web urls
+base_url = "https://abridge.netlify.app"
+#base_url = "/home/jieiku/.dev/abridge/public/" # for locally usable build directly from disk, also set in [extra] section uglyurls = true
 title = "Abridge"
 description = "Abridge is a fast and lightweight Zola theme using semantic html, abridge.css class-light CSS, and No JS."
 default_language = "en"
 output_dir = "public"
 compile_sass = true
-build_search_index = true
 minify_html = false
 generate_feed = true
 feed_filename = "atom.xml"
@@ -17,20 +17,19 @@ taxonomies = [
 ]
 
 #theme = "abridge"
+
+build_search_index = true
+[search]                # Options specific to elasticlunr search.
+include_title = true        # include title of page/section in index
+include_description = false # include description of page/section in index
+include_content = true      # include rendered content of page/section in index
+# Truncate content at nth character. Useful if index size significantly slows down the site.
+# truncate_content_length = 100
+
 [markdown]
-extra_syntaxes_and_themes = ["highlight_themes"] # Abridge's config.toml
-# In YOUR SITE'S config.toml set to: ["highlight_themes", "themes/abridge/highlight_themes"]
 highlight_code = true
-#highlight_theme = "abridge-dark"
 highlight_theme = "css"
 
-# abridge-dark ayu-dark-abridge ayu_mirage-dark-abridge charcoal-dark-abridge dracula-dark-abridge material-dark-abridge
-# abridge-light ayu-light-abridge ayu_mirage-light-abridge charcoal-light-abridge dracula-light-abridge material-light-abridge
-# abridge-white ayu-white-abridge ayu_mirage-white-abridge charcoal-white-abridge dracula-white-abridge material-white-abridge
-
-# xx-abridge themes are a copy of themes xx with contrast/color tweaks for 100 score on google lighthouse https://learnui.design/tools/accessible-color-generator.html
-# https://www.getzola.org/documentation/content/syntax-highlighting/#inline-vs-classed-highlighting
-
 render_emoji = false
 external_links_target_blank = true # rel="noopener"
 external_links_no_follow = false   # rel="nofollow"
@@ -95,17 +94,20 @@ menu_footer = [
 # Resource Files
 #################
 integrity = true # setting this to false is useful for developing, should normally be true.
+js_bundle = true # multiple javascript files combined into a single file
+js_switcher = true
+js_search_facade = true # Do not load search until user interaction with search.
+# search library to use, valid values are: false, elasticlunr, tinysearch, stork
+search_library = false
+
 js_search_index = "search_index.en.js" # Separate Always, generated each build
 js_prestyle = "prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts
-js_search = [ "elasticlunr.min.js", "search.js" ]# Bundleable
-js_search_facade = "search_facade.js" # Do not load search until user interaction with search. [comment out to disable]
 js_codecopy = "codecopy.js"# Bundleable
 js_email = "email.js"# Bundleable
-
-########## Switcher ########## (comment this block out if NOT using switcher):
 js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher)
 js_themeButton = "theme_button.js"# Bundleable
-js_bundle = "abridge-bundle.min.js"# Bundle JS File, comment out to disable (includes switcher)
+
+########## Switcher ########## (comment this block out if NOT using switcher):
 stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
 #stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher
 #stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher
@@ -114,8 +116,6 @@ stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme bas
 #stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ] # include your own font, and font icons!
 
 ########## No Switcher ##########
-#js_bundle = "search.min.js"# Bundle JS File, comment out to disable (search only: no switcher/prestyle)
-#js_bundle = "abridge.min.js"# Bundle JS File, comment out to disable (no switcher)
 #stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference
 #stylesheets = [ "abridge-blue.css" ] # Blue Automatic Night/Light Theme based on browser/system preference
 #stylesheets = [ "abridge-blueshade.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference
@@ -128,13 +128,6 @@ stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme bas
 #stylesheets = [ "abridge.css", "extra.css" ] # example loading extra css
 #stylesheets = [ "abridge.css", "syntax/syntax-abridge.css" ]
 
-# If you have js_bundle set, then Bundleable js files are ignored (it's assumed you bundled them).
-# You can include whatever js you want in your bundle. just generate your file like below and place in your sites root static directory:
-#               cd mysite/themes/abridge/static
-# searchonly:   uglifyjs elasticlunr.min.js search.js -c -m -o abridge-searchonly.min.js
-# noswitcher:   uglifyjs prestyle.js email.js codecopy.js elasticlunr.min.js search.js -c -m -o abridge-noswitcher.min.js
-# nofacade:     uglifyjs prestyle.js theme_button.js email.js codecopy.js elasticlunr.min.js search.js -c -m -o abridge-nofacade.min.js
-
 banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
 # favicons, comment out a line to disable loading some or all of these.
 favicon_theme_color = "#333333"

content/overview-code-blocks.md

@@ -83,8 +83,8 @@ function goSearch() {// on enter key or search icon click display results to the
     window.main || (window.main = e.innerHTML);
     var t = document.getElementById("suggestions"),
         n = ((ResultsClone = t.cloneNode(!0)).id = "results", document.createElement("div")),
-        o = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> Results For: '.concat(document.getElementById("userinput").value, "</h2>");
-    return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("userinput").value = "", !1
+        o = '<h2><button type="button" title="Close Search" onclick="closeSearch()"><i class="svgs x"></i></button> Results For: '.concat(document.getElementById("searchinput").value, "</h2>");
+    return n.innerHTML = o, ResultsClone.insertBefore(n, ResultsClone.firstChild), e.innerHTML = ResultsClone.outerHTML, t.innerHTML = "", document.getElementById("searchinput").value = "", !1
 }! function() {
   // search function code goes here
 }

content/static/stork_toml.md

@@ -0,0 +1,4 @@
++++
+path = "data_stork"
+template = "stork_toml.html"
++++

content/static/tinysearch_json.md

@@ -0,0 +1,4 @@
++++
+path = "data_tinysearch"
+template = "tinysearch_json.html"
++++