{"id":15534039,"url":"https://github.com/zachleat/pagefind-search","last_synced_at":"2025-04-23T13:44:49.840Z","repository":{"id":210062697,"uuid":"725645773","full_name":"zachleat/pagefind-search","owner":"zachleat","description":"A web component to search with Pagefind.","archived":false,"fork":false,"pushed_at":"2023-12-06T17:22:43.000Z","size":187,"stargazers_count":33,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T00:11:32.265Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zachleat.github.io/pagefind-search/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zachleat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-30T15:23:05.000Z","updated_at":"2025-01-17T03:40:45.000Z","dependencies_parsed_at":"2023-12-06T18:32:31.061Z","dependency_job_id":null,"html_url":"https://github.com/zachleat/pagefind-search","commit_stats":null,"previous_names":["zachleat/pagefind-search"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fpagefind-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fpagefind-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fpagefind-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fpagefind-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachleat","download_url":"https://codeload.github.com/zachleat/pagefind-search/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250441862,"owners_count":21431230,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T11:40:47.462Z","updated_at":"2025-04-23T13:44:49.824Z","avatar_url":"https://github.com/zachleat.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pagefind-search\n\nWeb Component to easily add the [Pagefind search UI](https://pagefind.app/) to your web site. This unlocks more control of asset loading via [`\u003cis-land\u003e`](https://www.11ty.dev/docs/plugins/partial-hydration/).\n\n## Usage\n\n```html\n\u003cscript type=\"module\" src=\"pagefind-search.js\"\u003e\u003c/script\u003e\n\n\u003c!-- No fallback content (works, but not ideal) --\u003e\n\u003cpagefind-search\u003e\u003c/pagefind-search\u003e\n\n\u003c!-- Better: fallback to DuckDuckGo site search (use any search engine here) --\u003e\n\u003cpagefind-search\u003e\n\t\u003cform action=\"https://duckduckgo.com/\" method=\"get\" style=\"min-height: 3.2em;\"\u003e\u003c!-- min-height to reduce CLS --\u003e\n\t\t\u003clabel\u003e\n\t\t\tSearch for:\n\t\t\t\u003cinput type=\"search\" name=\"q\" autocomplete=\"off\" autofocus\u003e\n\t\t\u003c/label\u003e\n\t\t\u003c!-- Put your searchable domain here --\u003e\n\t\t\u003cinput type=\"hidden\" name=\"sites\" value=\"www.zachleat.com\"\u003e\n\t\t\u003cbutton type=\"submit\"\u003eSearch\u003c/button\u003e\n\t\u003c/form\u003e\n\u003c/pagefind-search\u003e\n```\n\n### Extend Pagefind Options\n\nAny attribute that starts with an underscore will be passed to the Pagefind constructor as an option. Use underscore case for option names (as HTML attributes are case insensitive). This is only compatible with boolean/number/string options (but read on for a solution for the others below). Full [options list on the Pagefind documentation](https://pagefind.app/docs/ui/).\n\n* `_page_size` for `pageSize`\n* `_show_sub_results` for `showSubResults`\n* `_show_images` for `showImages`\n* `_excerpt_length` for `excerptLength`\n* (not attribute-friendly, read below) `processTerm`\n* (not attribute-friendly, read below) `processResult`\n* `_show_empty_filters` for `showEmptyFilters`\n* `_reset_styles` for `resetStyles`\n* `_bundle_path` for `bundlePath`\n* `_debounce_timeout_ms` for `debounceTimeoutMs`\n* (not attribute-friendly, read below) `translations`\n\n```html\n\u003cpagefind-search _show_images=\"false\"\u003e\n\t\u003c!-- Don’t forget your fallback content! --\u003e\n\u003c/pagefind-search\u003e\n```\n\n#### Advanced: Full JavaScript access\n\nUse the `manual` attribute to manually initialize your Pagefind UI with any custom options (including functions, objects, etc).\n\n```html\n\u003cpagefind-search manual id=\"my-search\"\u003e\n\t\u003c!-- Don’t forget your fallback content! --\u003e\n\u003c/pagefind-search\u003e\n\n\u003cscript type=\"module\"\u003e\nlet el = document.querySelector(\"#my-search\");\nawait el.pagefind({\n\tshowImages: false,\n\tdebounceTimeoutMs: 100,\n\tprocessTerm: function (term) {\n\t\treturn term.replace(/aa/g, 'ā');\n\t}\n});\n\n// Use `el.pagefindUI` to access the PagefindUI instance\n\u003c/script\u003e\n```\n\n### Loading via Islands\n\nUse [`\u003cis-land\u003e` to enable more control over the component’s downstream asset loading](https://www.11ty.dev/docs/plugins/partial-hydration/).\n\n```html\n\u003cscript type=\"module\" src=\"pagefind-search.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Use any of is-land’s on: conditions --\u003e\n\u003cis-land on:idle on:visible on:media=\"(min-width: 40em)\" on:save-data=\"false\"\u003e\n\t\u003cpagefind-search\u003e\n\t\t\u003c!-- Don’t forget your fallback content! --\u003e\n\t\u003c/pagefind-search\u003e\n\u003c/is-land\u003e\n```\n\nIf search is a secondary feature on a page, you _could_ lazy load the component definition too, though that would chain two separate JavaScript file loads together which is probably not what you want:\n\n```html\n\u003c!-- Use any of is-land’s on: conditions --\u003e\n\u003cis-land on:idle on:visible on:media=\"(min-width: 40em)\" on:save-data=\"false\"\u003e\n\t\u003cpagefind-search\u003e\n\t\t\u003c!-- Don’t forget your fallback content! --\u003e\n\t\u003c/pagefind-search\u003e\n\t\u003ctemplate data-island\u003e\n\t\t\u003cscript type=\"module\" src=\"pagefind-search.js\"\u003e\u003c/script\u003e\n\t\u003c/template\u003e\n\u003c/is-land\u003e\n```\n\n#### Eager CSS Loading\n\nYou can optionally load the Pagefind CSS yourself! This is useful if Search is a primary use case for the page and loads the 3 kB (compressed) Stylesheet up front but will still allow lazy loading the 20 kB (compressed) JavaScript file via `\u003cis-land\u003e`.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/pagefind/pagefind-ui.css\"\u003e\n\u003cscript type=\"module\" src=\"pagefind-search.js\"\u003e\u003c/script\u003e\n```\n\n### Full Attribute List\n\n* `pagefind-autofocus` to focus on the form element after pagefind has initialized.\n* `manual` for manual initialization.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Fpagefind-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachleat%2Fpagefind-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Fpagefind-search/lists"}