0.3.0

ovx · Nov 27, 2023 · f0250d4 · f0250d4
1 parent b738b83
commit f0250d4
Show file tree

Hide file tree

Showing 19 changed files with 3,124 additions and 669 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -14,4 +14,6 @@ jobs:
         with:
           fail_on_unmatched_files: true
           files: |
-            dist/searchbox.min.js
+            dist/searchbox.iife.js
+            dist/searchbox.js
+            dist/searchbox.umd.cjs
diff --git a/README.md b/README.md
@@ -39,144 +39,123 @@ Play with the [demo](https://bausw-com.github.io/searchbox/demo.html)
 
 ## Features
 
-- Backend-less, runs in the browser from pre-built index (see [Pagefind](https://pagefind.app/))
+- Backend-less, runs in the browser from a pre-built index (see [Pagefind](https://pagefind.app/))
 - Ideal for small websites, documentation pages and blogs
 - Highly customizable
 
 ## Usage
 
 Download a [release](https://github.com/bausw-com/searchbox/releases) or use a CDN:
 
-1. Create `<input />` element:
-
 ```html
-<!-- 1. Create input element -->
-<div id="search">
-  <input type="search" />
-</div>
+<!-- 1. Include the script -->
+<script async defer type="module" src="https://cdn.jsdelivr.net/gh/bausw-com/searchbox/dist/searchbox.min.js"></script>
 
-<!-- 2. Include Searchbox into your website -->
-<script type="module" src="https://cdn.jsdelivr.net/gh/bausw-com/searchbox@0.2.4/dist/searchbox.min.js"></script>
-
-<!-- 3. Configure Searchbox instance -->
-<script>
-window.addEventListener('DOMContentLoaded', () => {
-  const searchbox = new Searchbox({
-    props: {
-      options: {
-        // Place your options here (see Configuration options below)
-        // ...
-        // Replace this with your Pagefind's build path
-        pagefind: '/_pagefind/pagefind.js',
-      },
-    },
-    target: document.querySelector('#search')
-  });
-});
-</script>
+<!-- 2. use <search-box> tag around your search input -->
+<search-box pagefind="https://pagefind.app/_pagefind/pagefind.js">
+  <input type="search" placeholder="Search..." />
+</search-box>
 ```
 
 ## Configuration options
 
 ```ts
-export interface IOptions {
-  /**
-   * Dropdown alignment relative to the `anchor`.
-   */
-  align?: 'left' | 'right';
-
-  /**
-   * Dropdown anchor element for positioning and alignment. If not specified, the `input` will be used.
-   */
-  anchor?: HTMLElement;
-
-  /**
-   * The name of the Pagefind's "filter" property to be used as a category for grouping results. Use one of the properties returned by `pagefind.filters();`.
-   * https://pagefind.app/docs/api/#filtering
-  */
-  category?: string;
-
-  /**
-   * A custom search function. Can be used to request external API.
-   */
-  customSearch?: (term: string, suggestions: boolean) => Promise<IResult>;
-
-  /**
-   * A custom delay (in milliseconds) between the input focus and when the dropdown is shown.
-   */
-  dropdownDelay?: number;
-
-  /**
-   * Grouping function or a parameter name. The function should return group identifier as string.
-   */
-  groupBy?: string | ((doc: IResultItemDoc) => string);
-
-  /**
-   * Pagefind filters
-   * https://pagefind.app/docs/api/#filtering
-   */
-  filters?: Record<string, any>;
-
-  /**
-   * The name of the "meta" property to be used as an image in the search results (typically, this would be "image").
-  */
-  image?: string;
-
-  /**
-   * Max. number of results to return (default: 100)
-   */
-  limit?: number;
-
-  /**
-   * Path to `pagefind.js` script
-   */
-  pagefind: string;
-
-  /**
-   * A custom HTML element where the results will be rendered instead of the dropdown. Is specified, the dropdown won't be shown.
-   */
-  results?: HTMLElement;
-
-  /**
-   * Custom renderer functions. Supported functions: `header`, `footer`, `item`.
-   */
-  renderers?: IRenderers;
-
-  /**
-   * Pagefind sorting
-   * https://pagefind.app/docs/api/#sorting-results
-   */
-  sort?: Record<string, 'asc' | 'desc'>;
-
-  /**
-   * I18n strings override. See `src/strings.ts`.
-   */
-  strings?: Record<string, string>;
-
-  /**
-   * Whether to use suggestions
-   */
-  suggestions?: boolean;
-
-  /**
-   * A custom function that transforms the result (each item).
-   */
-  transform?: TTransformFunc;
-
-  /**
-   * Dropdown width (default: 100%)
-   */
-  width?: number;
-}
+/**
+ * Dropdown alignment relative to the `anchor`.
+ */
+export let align: 'left' | 'right' | undefined = undefined;
+
+/**
+ * Dropdown anchor element for positioning and alignment. If not specified, the `input` will be used.
+ */
+export let anchor: string | undefined = undefined;
+
+/**
+ * The name of the Pagefind's "filter" property to be used as a category for grouping results. Use one of the properties returned by `pagefind.filters();`.
+ * https://pagefind.app/docs/api/#filtering
+*/
+export let category: string | undefined = undefined;
+
+/**
+ * A custom search function. Can be used to request external API.
+ */
+export let customSearch: ((term: string, suggestions: boolean) => Promise<IResult>) | undefined = undefined;
+
+/**
+ * A custom delay (in milliseconds) between the input focus and when the dropdown is shown.
+ */
+export let dropdownDelay: number | undefined = undefined;
+
+/**
+ * Grouping function or a parameter name. The function should return group identifier as string.
+ */
+export let groupBy: string | ((doc: IResultItemDoc) => string) | undefined = undefined;
+
+/**
+ * Pagefind filters
+ * https://pagefind.app/docs/api/#filtering
+ */
+export let filters: Record<string, any> | undefined = undefined;
+
+/**
+ * The name of the "meta" property to be used as an image in the search results (typically, this would be "image").
+*/
+export let image: string | undefined = undefined;
+
+/**
+ * Max. number of results to return (default: 100)
+ */
+export let limit: number = 100;
+
+/**
+ * Path to `pagefind.js` script
+ */
+export let pagefind: string;
+
+/**
+ * Custom renderer functions. Supported functions: `header`, `footer`, `item`.
+ */
+export let renderers: IRenderers | undefined = undefined;
+
+/**
+ * A custom HTML element where the results will be rendered instead of the dropdown. Is specified, the dropdown won't be shown.
+ */
+export let results: string | undefined = undefined;
+
+/**
+ * Pagefind sorting
+ * https://pagefind.app/docs/api/#sorting-results
+ */
+export let sort: Record<string, 'asc' | 'desc'> | undefined = undefined;
+
+/**
+ * I18n strings override. See `src/strings.ts`.
+ */
+export let strings: Record<string, string> | undefined = undefined;
+
+/**
+ * Whether to use suggestions
+ */
+export let suggestions: boolean = false;
+
+/**
+ * A custom function that transforms the result (each item).
+ */
+export let transform: TTransformFunc | undefined = undefined;
+
+/**
+ * Dropdown width (default: 100%)
+ */
+export let width: string | undefined = undefined;
 ```
 
 ## Credits
 
 - [Pagefind](https://pagefind.app/) - A fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure
 
-## Sponspor
+## Sponsor
 
-This project is sponsored by [BAUSW](https://bausw.com) - no-code business apps for the construction industry.
+This project is sponsored by [BAUSW](https://bausw.com "Construction site diary and other digital solutions for engineers.") - Construction site diary and other digital solutions for engineers.
 
 ## License
 

diff --git a/demo.html b/demo.html
@@ -24,6 +24,9 @@
         display: flex;
         padding: 0.2rem 0.4rem;
       }
+      .search-input .search-box {
+        width: 100%;
+      }
       .search-input > *:not(:last-child) {
         margin-right: 5px;
       }
@@ -60,7 +63,6 @@
         box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.075);
       }
     </style>
-    <script type="module" crossorigin src="dist/searchbox.min.js"></script>
 
   </head>
   <body>
@@ -69,7 +71,17 @@
         <div>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
         </div>
-        <input type="search" placeholder="Try demo..." />
+
+        <search-box
+          id="searchbox"
+          anchor="#search .search-input"
+          category="section"
+          groupBy="title"
+          class="search-box"
+          pagefind="https://pagefind.app/_pagefind/pagefind.js"
+        >
+          <input type="search" placeholder="Try demo..." />
+        </search-box>
       </div>
 
       <div class="search-info">
@@ -83,45 +95,21 @@
       <h4>Usage</h4>
 
       <pre>
-        <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(153, 153, 136); font-weight:400;">&lt;!-- 1. Create input element --&gt;</span>
-<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">div</span> <span style="color:rgb(51, 51, 51); font-weight:400;">id</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;search&quot;</span>&gt;</span>
-  <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">input</span> <span style="color:rgb(51, 51, 51); font-weight:400;">type</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;search&quot;</span> /&gt;</span>
-<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">div</span>&gt;</span>
+        <code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">script</span> <span style="color:rgb(0, 128, 128); font-weight:400;">async</span> <span style="color:rgb(0, 128, 128); font-weight:400;">defer</span> <span style="color:rgb(0, 128, 128); font-weight:400;">type</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;module&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">src</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;https://cdn.jsdelivr.net/gh/bausw-com/searchbox/dist/searchbox.js&quot;</span>&gt;</span><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">script</span>&gt;</span>
 
-<span style="color:rgb(153, 153, 136); font-weight:400;">&lt;!-- 2. Include Searchbox into your website --&gt;</span>
-<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">script</span> <span style="color:rgb(51, 51, 51); font-weight:400;">type</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;module&quot;</span> <span style="color:rgb(51, 51, 51); font-weight:400;">src</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;https://cdn.jsdelivr.net/gh/bausw-com/searchbox@0.2.4/dist/searchbox.min.js&quot;</span>&gt;</span><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">script</span>&gt;</span>
-
-<span style="color:rgb(153, 153, 136); font-weight:400;">&lt;!-- 3. Configure Searchbox instance --&gt;</span>
-<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">script</span>&gt;</span><span style="color:rgb(51, 51, 51); font-weight:400;">
-<span style="color:rgb(0, 134, 179); font-weight:400;">window</span>.addEventListener(<span style="color:rgb(221, 17, 68); font-weight:400;">&#x27;DOMContentLoaded&#x27;</span>, <span style="color:rgb(51, 51, 51); font-weight:400;">() =&gt;</span> {
-  <span style="color:rgb(51, 51, 51); font-weight:700;">const</span> searchbox = <span style="color:rgb(51, 51, 51); font-weight:700;">new</span> Searchbox({
-    <span style="color:rgb(51, 51, 51); font-weight:400;">props</span>: {
-      <span style="color:rgb(51, 51, 51); font-weight:400;">options</span>: {
-        <span style="color:rgb(153, 153, 136); font-weight:400;">// Replace this with your Pagefind&#x27;s build path</span>
-        <span style="color:rgb(51, 51, 51); font-weight:400;">pagefind</span>: <span style="color:rgb(221, 17, 68); font-weight:400;">&#x27;/_pagefind/pagefind.js&#x27;</span>,
-      },
-    },
-    <span style="color:rgb(51, 51, 51); font-weight:400;">target</span>: <span style="color:rgb(0, 134, 179); font-weight:400;">document</span>.querySelector(<span style="color:rgb(221, 17, 68); font-weight:400;">&#x27;#search&#x27;</span>)
-  });
-});
-</span><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">script</span>&gt;</span></code></pre>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">search-box</span> <span style="color:rgb(0, 128, 128); font-weight:400;">pagefind</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;https://pagefind.app/_pagefind/pagefind.js&quot;</span>&gt;</span>
+  <span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">input</span> <span style="color:rgb(0, 128, 128); font-weight:400;">type</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;search&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">placeholder</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Search...&quot;</span> /&gt;</span>
+<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">search-box</span>&gt;</span></code></pre>
     </div>
 
     <script>
-       window.addEventListener('DOMContentLoaded', (event) => {
-        const searchbox = new Searchbox({
-          props: {
-            options: {
-              anchor: document.querySelector('#search .search-input'),
-              category: 'section',
-              pagefind: 'https://pagefind.app/_pagefind/pagefind.js',
-              groupBy: 'title',
-            },
-          },
-          target: document.querySelector('#search')
-        });
+      window.addEventListener('load', () => {
+        document.querySelector('#searchbox').renderers = {
+				  footer: () => `<div class="footer"><a href="https://github.com/bausw-com/searchbox">Powered by Searchbox</a></div>`,
+        };
       });
     </script>
-
+
+    <script async defer type="module" crossorigin src="dist/searchbox.js"></script>
   </body>
 </html>
diff --git a/dist/searchbox.iife.js b/dist/searchbox.iife.js