{"_id":"@arraypress/pagefind-modal-astro","_rev":"2-ac24470dbf8f5c311efc11a62aeb890c","name":"@arraypress/pagefind-modal-astro","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@arraypress/pagefind-modal-astro","version":"1.0.0","keywords":["astro","astro-component","search","pagefind","search-modal","cmdk","command-palette","ssg","withastro"],"author":{"name":"ArrayPress"},"license":"MIT","_id":"@arraypress/pagefind-modal-astro@1.0.0","maintainers":[{"name":"arraypress","email":"davidmichaelsherlock@icloud.com"}],"homepage":"https://github.com/arraypress/pagefind-modal-astro#readme","bugs":{"url":"https://github.com/arraypress/pagefind-modal-astro/issues"},"dist":{"shasum":"564c3939a96e4aef6e59a60cd5110f36a264169a","tarball":"https://registry.npmjs.org/@arraypress/pagefind-modal-astro/-/pagefind-modal-astro-1.0.0.tgz","fileCount":8,"integrity":"sha512-xzT1w2se2apNnZyQtaHV8e/hJ45jEvZFOsewSxPvY/ermlun5MqCVKj+SYADCDMaLJuYSJD8m8ZFeJJiqiy40w==","signatures":[{"sig":"MEUCIGrrnbtX143cDilq5RP2/vC8NDwZu847w94BbXimm7L6AiEA1Z6z/V3xBrzxgw4UeVyqwkh8FqmFahgjGVNpS77xO80=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26235},"type":"module","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./types":{"types":"./src/types.ts","default":"./src/types.ts"},"./package.json":"./package.json","./PagefindModal.astro":"./src/PagefindModal.astro"},"gitHead":"5984c7808bb4a1185d0f03c81081bcceb6b45b58","scripts":{"test":"vitest run","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"arraypress","email":"davidmichaelsherlock@icloud.com"},"repository":{"url":"git+https://github.com/arraypress/pagefind-modal-astro.git","type":"git"},"_npmVersion":"11.12.1","description":"Astro search modal — headless replacement for Pagefind's built-in UI. Native <dialog>, grouped results, ⌘K, keyboard nav, focus restoration.","directories":{},"_nodeVersion":"26.0.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.3.7","vitest":"^4.1.7","typescript":"^6.0.3"},"peerDependencies":{"astro":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/pagefind-modal-astro_1.0.0_1779554335914_0.9253220115924836","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arraypress/pagefind-modal-astro","version":"1.0.1","description":"Astro search modal — headless replacement for Pagefind's built-in UI. Native <dialog>, grouped results, ⌘K, keyboard nav, focus restoration.","type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./PagefindModal.astro":"./src/PagefindModal.astro","./types":{"types":"./src/types.ts","default":"./src/types.ts"},"./package.json":"./package.json"},"keywords":["astro","astro-component","search","pagefind","search-modal","cmdk","command-palette","ssg","withastro"],"author":{"name":"ArrayPress"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/arraypress/pagefind-modal-astro.git"},"engines":{"node":">=18.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"astro":"^6.0.0 || ^7.0.0"},"scripts":{"test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit"},"devDependencies":{"astro":"^6.3.7","typescript":"^6.0.3","vitest":"^4.1.7"},"gitHead":"e71864567ea452f049a67d6652ecc8449ad8f761","_id":"@arraypress/pagefind-modal-astro@1.0.1","bugs":{"url":"https://github.com/arraypress/pagefind-modal-astro/issues"},"homepage":"https://github.com/arraypress/pagefind-modal-astro#readme","_nodeVersion":"26.3.1","_npmVersion":"11.16.0","dist":{"integrity":"sha512-Nn2FyKto3RGm4mDt++eNdwux0J+8YZpb+jr+pnortCcaLczHEYGUIKUO3UmLa8NdwOztjlJF//A8w2hiYNqnCg==","shasum":"1674d8b1ea5cb21bd37b68edaf95e9cea51f2a53","tarball":"https://registry.npmjs.org/@arraypress/pagefind-modal-astro/-/pagefind-modal-astro-1.0.1.tgz","fileCount":8,"unpackedSize":26476,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCYqg7On2Gd2qRtlgTC+NQL9vtxlE+NF5O5ypoFX2ExRgIhAMflMWOck+2CoAkNCNs1rsWS+bxSomqzhpHCwA0mOSSx"}]},"_npmUser":{"name":"arraypress","email":"davidmichaelsherlock@icloud.com"},"directories":{},"maintainers":[{"name":"arraypress","email":"davidmichaelsherlock@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/pagefind-modal-astro_1.0.1_1782120945661_0.15888017046307268"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-23T16:38:55.744Z","modified":"2026-06-22T09:35:45.921Z","1.0.0":"2026-05-23T16:38:56.052Z","1.0.1":"2026-06-22T09:35:45.803Z"},"bugs":{"url":"https://github.com/arraypress/pagefind-modal-astro/issues"},"author":{"name":"ArrayPress"},"license":"MIT","homepage":"https://github.com/arraypress/pagefind-modal-astro#readme","keywords":["astro","astro-component","search","pagefind","search-modal","cmdk","command-palette","ssg","withastro"],"repository":{"type":"git","url":"git+https://github.com/arraypress/pagefind-modal-astro.git"},"description":"Astro search modal — headless replacement for Pagefind's built-in UI. Native <dialog>, grouped results, ⌘K, keyboard nav, focus restoration.","maintainers":[{"name":"arraypress","email":"davidmichaelsherlock@icloud.com"}],"readme":"# @arraypress/pagefind-modal-astro\n\n> Astro search modal — a headless replacement for Pagefind's built-in\n> `<pagefind-modal>` Component UI. Native `<dialog>`, grouped results,\n> keyboard navigation, ⌘K shortcut, focus restoration.\n\n## Install\n\n```bash\nnpm install @arraypress/pagefind-modal-astro\n```\n\nPlus run [Pagefind](https://pagefind.app/) as a postbuild step so the\nsearch index exists in production:\n\n```json\n{\n  \"scripts\": {\n    \"build\": \"astro build && pagefind --site dist\"\n  }\n}\n```\n\n## Use\n\n```astro\n---\nimport { PagefindModal } from '@arraypress/pagefind-modal-astro';\n---\n<PagefindModal />\n\n<!-- Anywhere on the page — any element with [data-search-open] opens it. -->\n<button data-search-open aria-label=\"Search\">\n  <svg>…</svg>\n</button>\n```\n\nOpen with the button, ⌘K (macOS) / Ctrl+K (Windows/Linux), or\nprogrammatically via the native `<dialog>` API:\n\n```js\ndocument.getElementById('pf-search-modal').showModal();\n```\n\n## Dev mode\n\nPagefind's JS bundle only exists in production builds\n(`dist/pagefind/pagefind.js`). The modal lazy-loads it on first\nsearch — in dev mode the load fails gracefully and the modal shows\nthe `unavailable` hint. Build the site to test search end-to-end.\n\n## Pagefind meta\n\nThe modal reads these `meta` keys per result. Set them on your\nsource pages via `data-pagefind-meta=\"key:value\"`:\n\n| Meta key   | Rendered as                       |\n|------------|-----------------------------------|\n| `title`    | Result headline                   |\n| `image`    | Thumbnail (falls back to monogram)|\n| `category` | Chip above the title              |\n| `price`    | Chip above the title              |\n| `artist`   | \"by …\" subline                    |\n| `summary`  | Excerpt (preferred over Pagefind's auto-excerpt) |\n\nAnything not set is silently omitted.\n\n## Section grouping\n\nResults group by URL prefix. The default rules:\n\n```ts\nimport { DEFAULT_SECTIONS } from '@arraypress/pagefind-modal-astro';\n\nDEFAULT_SECTIONS;\n// [\n//   { prefix: '/products/', key: 'products', label: 'Products', order: 1 },\n//   { prefix: '/blog/',     key: 'posts',    label: 'Posts',    order: 2 },\n//   { prefix: '/news',      key: 'news',     label: 'News',     order: 3 },\n//   { prefix: '',           key: 'pages',    label: 'Pages',    order: 9 },\n// ]\n```\n\nOverride for your routes:\n\n```astro\n<PagefindModal sections={[\n  { prefix: '/docs/',    key: 'docs',    label: 'Documentation', order: 1 },\n  { prefix: '/guides/',  key: 'guides',  label: 'Guides',        order: 2 },\n  { prefix: '',          key: 'pages',   label: 'Other',         order: 9 },\n]} />\n```\n\nRules try in array order; the first matching prefix wins. The last\nentry with `prefix: ''` catches everything else.\n\n## i18n\n\nAll structural strings are configurable:\n\n```astro\n<PagefindModal strings={{\n  ariaLabel:   'Recherche',\n  placeholder: 'Chercher…',\n  idleHint:    'Tapez pour rechercher.',\n  noResults:   'Aucun résultat.',\n  closeLabel:  'Fermer la recherche',\n  navHint:     'Naviguer',\n  openHint:    'Ouvrir',\n  closeHint:   'Fermer',\n}} />\n```\n\n## Keyboard shortcuts\n\n| Key            | Action                            |\n|----------------|-----------------------------------|\n| ⌘K / Ctrl+K    | Toggle the modal                  |\n| Esc            | Close (native `<dialog>`)         |\n| ↑ / ↓          | Navigate results                  |\n| Enter          | Open the selected result          |\n\nFocus is restored to the trigger element on close.\n\n## Props\n\n| Prop            | Default                  | Description                                       |\n|-----------------|--------------------------|---------------------------------------------------|\n| `id`            | `'pf-search-modal'`      | Dialog DOM id.                                    |\n| `pagefindPath`  | `'/pagefind/pagefind.js'`| Override if you serve Pagefind from a sub-path.   |\n| `sections`      | `DEFAULT_SECTIONS`       | URL-prefix grouping rules.                        |\n| `strings`       | English                  | i18n overrides.                                   |\n| `maxResults`    | `12`                     | How many top hits to hydrate per query.           |\n| `excerptLength` | `25`                     | Pagefind `excerptLength` option (words).          |\n| `debounceMs`    | `120`                    | Debounce on input → search.                       |\n| `class`         | —                        | Extra classes on the `<dialog>`.                  |\n\n## Styling\n\nThe component ships **no styles**. Hook against these class names\nin your stylesheet:\n\n```\n.pf-modal                — <dialog>\n.pf-modal__panel\n.pf-modal__head, __icon, __input, __kbd, __close\n.pf-modal__results, __hint\n.pf-modal__foot\n.pf-group, .pf-group__heading\n.pf-result, .pf-result__thumb (with --placeholder), __body\n.pf-result__meta, __chip, __price\n.pf-result__title, __artist, __excerpt, __url\n.pf-result[aria-selected=\"true\"]   /* keyboard/hover selection */\nbody.pf-search-open                /* added while modal is open */\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}