Added search script inlining functionality

Author: six-two

README.md

@@ -61,7 +61,7 @@ plugins:
 2. Add a tag where the search elements should be inserted and load the search script:
     ```markdown
     <div id="listing-extract-search"></div>
-    <script src="/listing-search.js">
+    <script src="/listing-search.js" async></script>
     ```
 3. Specify where you want the plugin to write the script file to.
 This should match the path you used in the previous step.
@@ -73,6 +73,14 @@ This should match the path you used in the previous step.
         javascript_search_file: listing-search.js
     ```
 
+I recommend using an absolute path for the `script.src` attribute, since it will keep working after moving the page or after switching between directory URLs and non directory URLs pages.
+It just runs into problems when your base directory (where the page is deployed) is not the root directory or when you are using offline mode (from `file://` URLs).
+
+Alternatively you can include the script and the data inline, but this can have tiny performance drawbacks:
+
+- If you include it on multiple pages, all of them will contain a copy of the data -> reduces caching efficiency
+- The whole search database needs to be downloaded while your page is loading (can not use `async` or `defer` script attributes).
+
 ## Configuration
 
 You can configure the plugin like this:

docs/plugin/inline-listing-search.md

@@ -0,0 +1,10 @@
+---
+hide:
+- toc
+---
+
+# Inline Listing search
+
+This page has a search function for all listings.
+
+PLACEHOLDER_INLINE_LISTINGS_SEARCH_PLUGIN

src/mkdocs_extract_listings_plugin/__init__.py

@@ -24,14 +24,13 @@ class ListingsConfig(Config):
 # local
 from .page_processor import PageProcessor
 from .all_listings_page import update_all_listings_page
-from .search_page import write_javascript_file
+from .search_page import write_javascript_file, get_javascript_file_source_code
 
 
 class ListingsPlugin(BasePlugin[ListingsConfig]):
     def on_config(self, config: MkDocsConfig) -> None:
         self.page_processor = PageProcessor(self.config)
 
-
     def on_pre_build(self, config: MkDocsConfig) -> None:
         # Reset before every build -> prevent duplicate entries when running mkdocs serve
         self.page_processor.clear()
@@ -47,12 +46,22 @@ def on_pre_build(self, config: MkDocsConfig) -> None:
                 logger.warning(f"Value for 'listings_file' should probably end in '.md', but is '{self.config.listings_file}'")
         else:
             if not self.config.javascript_search_file:
-                logger.warning("Neither 'javascript_search_file' nor 'listings_file' are set -> This plugin will do nothing. Please check the setup instructions at https://github.com/six-two/mkdocs-extract-listings-plugin/blob/main/README.md")
+                logger.warning("Neither 'javascript_search_file' nor 'listings_file' are set -> This plugin will do nothing, unless you use inline placeholder replacement. Please check the setup instructions at https://github.com/six-two/mkdocs-extract-listings-plugin/blob/main/README.md")
 
     # https://www.mkdocs.org/dev-guide/plugins/#on_page_content
     def on_page_content(self, html: str, page: Page, config: MkDocsConfig, files) -> None:
         self.page_processor.process_page(html, page)
 
+    # https://www.mkdocs.org/dev-guide/plugins/#on_post_page
+    def on_post_page(self, output: str, page: Page, config: MkDocsConfig) -> str:
+        if "PLACEHOLDER_INLINE_LISTINGS_SEARCH_PLUGIN" in output:
+            # Can not be cached, since script paths are dependent on current page path
+            # https://www.mkdocs.org/dev-guide/themes/#page
+            # https://www.mkdocs.org/dev-guide/api/#mkdocs.structure.files.File.src_uri
+            inline_script_html = '<div id="listing-extract-search"></div>\n<script>\n' + get_javascript_file_source_code(self.page_processor.page_data_list, self.config, True, page.file.src_uri, config) + '\n</script>'
+            output = output.replace("PLACEHOLDER_INLINE_LISTINGS_SEARCH_PLUGIN", inline_script_html)
+        return output
+
     def on_post_build(self, config: MkDocsConfig) -> None:
         update_all_listings_page(self.page_processor.page_data_list, self.config, config)
 

src/mkdocs_extract_listings_plugin/listing-search.js

@@ -7,15 +7,33 @@
 // This limits load required to parse entries, etc and should result in the user getting some quick feedback on his/her search
 (() => {
 PREVIEW_RESULTS = 15;
-BASE_URL="";
 DEFAULT_SEARCH_MODE="substr-i";
 // START: These values may be overwritten when the file is copied by the plugin
 STYLE=``;
 OFFLINE_JSON_DATA=null;
 // END
 
-let parentDirectoryUrl = new URL(document.currentScript.src);
-parentDirectoryUrl.pathname = parentDirectoryUrl.pathname.substring(0, parentDirectoryUrl.pathname.lastIndexOf("/") +  1);
+let parentDirectoryUrl;
+if (document.currentScript && document.currentScript.src) {
+    // This is run when the script is included via an <script src=...> tag.
+    // The script is always at the same location, no matter on which page it is inluded.
+    parentDirectoryUrl = new URL(document.currentScript.src);
+    parentDirectoryUrl.pathname = parentDirectoryUrl.pathname.substring(0, parentDirectoryUrl.pathname.lastIndexOf("/") +  1);
+} else {
+    // This is run when the script is inlined to a page.
+    // In this case we can not be certain about where we are, but the python code fixed all relative paths, so that they should work from here.
+    parentDirectoryUrl = new URL(window.location.href);
+    const directoryUrlsUsed = parentDirectoryUrl.pathname.endsWith("/") || parentDirectoryUrl.pathname.endsWith("/index.html")
+    if (directoryUrlsUsed) {
+        // Directory URLs are in use -> go up one directory and remove file name
+        parentDirectoryUrl.pathname = parentDirectoryUrl.pathname.substring(0, parentDirectoryUrl.pathname.lastIndexOf("/"));
+        parentDirectoryUrl.pathname = parentDirectoryUrl.pathname.substring(0, parentDirectoryUrl.pathname.lastIndexOf("/") +  1);
+    } else {
+        // Directory URLs are disabled -> stay in directory but remove file name
+        parentDirectoryUrl.pathname = parentDirectoryUrl.pathname.substring(0, parentDirectoryUrl.pathname.lastIndexOf("/") +  1);
+    }
+}
+
 parentDirectoryUrl.query = "";
 parentDirectoryUrl.hash = "";
 const base_url = parentDirectoryUrl.href.endsWith("/") ? parentDirectoryUrl.href : parentDirectoryUrl.href + "/";

src/mkdocs_extract_listings_plugin/search_page.py

@@ -8,12 +8,7 @@
 from .page_processor import PageData
 
 
-def write_javascript_file(page_data_list: list[PageData], plugin_config, config: MkDocsConfig) -> None:
-    dst_path = os.path.join(config.site_dir, plugin_config.javascript_search_file)
-    dst_path_parent = os.path.dirname(dst_path)
-    if not os.path.exists(dst_path_parent):
-        os.makedirs(dst_path_parent)
-
+def get_javascript_file_source_code(page_data_list: list[PageData], plugin_config, offline: bool, script_or_page_path: str, config: MkDocsConfig) -> str:
     src_path = os.path.join(SCRIPT_DIR, "listing-search.js")
     with open(src_path, "r") as f:
         js = f.read()
@@ -24,8 +19,8 @@ def write_javascript_file(page_data_list: list[PageData], plugin_config, config:
         js = js.replace("STYLE=``;", f"STYLE=`{css}`;")
 
     # We traverse from the JSON file up to the root directory
-    path_to_root = "../" * plugin_config.javascript_search_file.count("/")
-    if plugin_config.offline:
+    path_to_root = "../" * script_or_page_path.count("/")
+    if offline:
         json_data = get_json_data(page_data_list, path_to_root)
         js = js.replace("OFFLINE_JSON_DATA=null;", f"OFFLINE_JSON_DATA={json.dumps(json_data)};")
     else:
@@ -41,6 +36,17 @@ def write_javascript_file(page_data_list: list[PageData], plugin_config, config:
             # Path contains something else than just slashes
             js = js.replace('BASE_URL=""', f'BASE_URL="{path}"')
 
+    return js
+
+
+def write_javascript_file(page_data_list: list[PageData], plugin_config, config: MkDocsConfig) -> None:
+    dst_path = os.path.join(config.site_dir, plugin_config.javascript_search_file)
+    dst_path_parent = os.path.dirname(dst_path)
+    if not os.path.exists(dst_path_parent):
+        os.makedirs(dst_path_parent)
+
+    js = get_javascript_file_source_code(page_data_list, plugin_config, plugin_config.offline, plugin_config.javascript_search_file, config)
+
     with open(dst_path, "w") as f:
         f.write(js)