@magicpages/ghost-typesense-search-ui 1.1.0 → 1.1.2

package/README.md

@@ -1,104 +1,66 @@
 # @magicpages/ghost-typesense-search-ui
 
-A beautiful, accessible, and customizable search interface for Ghost blogs using Typesense. Built with vanilla JavaScript for maximum compatibility and minimal overhead.
+A beautiful, accessible search interface for Ghost blogs using Typesense. Built with vanilla JavaScript.
 
-![Search UI Preview](https://raw.githubusercontent.com/magicpages/ghost-typesense/main/packages/search-ui/preview.png)
+![Search UI Preview](./preview.png)
 
 ## Features
 
 - 🔍 Real-time search with Typesense
-- 🎨 Replaces the default search modal with a beautiful, accessible, and customizable search interface
-- 🌓 Automatic dark mode support
+- 🎨 Beautiful, accessible interface
+- 🌓 Automatic dark mode
 - ⌨️ Full keyboard navigation
 - 📱 Responsive design
-- ♿ WCAG accessible
 - 🎯 Common searches support
-- 💅 Customizable styling
 
 ## Installation
 
-Ghost's configuration allows you to replace the default search script: https://ghost.org/docs/config/#search
+### Option 1: Replace Ghost's `sodoSearch` (Recommended if you can edit your config)
 
-The most comprehensive way to use this package is to upload the `dist/search.min.js` file to your Ghost theme and replace the default search script by adding the following configuration to your config.[environment].json file:
-
-```
+Add to your `config.[environment].json`:
+```json
 "sodoSearch": {
-    "url": "[link to your search.min.js file]"
+    "url": "[link to search.min.js]"
 }
 ```
-As an alternative, you can set the following environment variable:
-
-```
-sodoSearch__url=[link to your search.min.js file]
-```
 
-A second approach is to install the package directly as a dependency in your theme. 
+Or set environment variable:
 ```bash
-npm install @magicpages/ghost-typesense-search-ui
+sodoSearch__url=[link to search.min.js]
 ```
 
-If you do this, you might want to disable the default search script in your config.[environment].json file:
-
-```
-"sodoSearch": {
-   "url": false
-},
-```
+### Option 2: Direct Installation (Works if you can't edit your config, e.g. on Ghost(Pro))
 
-Or include it directly in your Ghost theme:
+Add to your site's code injection:
 
 ```html
-<script src="https://unpkg.com/@magicpages/ghost-typesense-search-ui/dist/search.min.js"></script>
-```
-
-## Usage
 
-1. Add the script to your Ghost theme:
-
-```html
-<!-- In default.hbs or post.hbs -->
-<script>
-  window.__MP_SEARCH_CONFIG__ = {
-    typesenseNodes: [{
-      host: 'your-typesense-host',
-      port: '443',
-      protocol: 'https'
-    }],
-    typesenseApiKey: 'your-search-only-api-key',
-    collectionName: 'posts',
-    theme: 'system', // 'light', 'dark', or 'system'
-    commonSearches: ['Getting Started', 'FAQ', 'Features'] // optional
-  };
-</script>
 <script src="https://unpkg.com/@magicpages/ghost-typesense-search-ui/dist/search.min.js"></script>
 ```
 
-2. Add a search trigger button:
-
-```html
-<button onclick="window.location.hash = '#/search'">
-  Search
-</button>
-```
-
-The search modal will automatically open when the URL hash is `#/search`.
+The script automatically takes over Ghost's native search and works with the `/#/search` URL trigger.
 
 ## Configuration
 
 | Option | Type | Required | Description |
 |--------|------|----------|-------------|
-| `typesenseNodes` | `Array` | Yes | Array of Typesense node configurations |
-| `typesenseApiKey` | `String` | Yes | Search-only API key from Typesense |
-| `collectionName` | `String` | Yes | Name of your Typesense collection |
-| `theme` | `String` | No | Color theme ('light', 'dark', or 'system') |
-| `commonSearches` | `Array` | No | List of common search terms to show |
-| `searchFields` | `Object` | No | Custom search field weights and highlighting |
+| `typesenseNodes` | `Array` | Yes | Typesense node configurations |
+| `typesenseApiKey` | `String` | Yes | Search-only API key |
+| `collectionName` | `String` | Yes | Collection name |
+| `theme` | `String` | No | 'light', 'dark', or 'system' |
+| `commonSearches` | `Array` | No | Common search terms |
+| `searchFields` | `Object` | No | Field weights and highlighting |
 
-## Customization
+## Keyboard Shortcuts
 
-### Styling
+- `/`: Open search
+- `↑/↓`: Navigate results
+- `Enter`: Select result
+- `Esc`: Close search
 
-The search UI uses CSS variables for easy customization:
+## Customization
+
+The UI uses CSS variables for styling:
 
 ```css
 #mp-search-wrapper {
@@ -111,7 +73,7 @@ The search UI uses CSS variables for easy customization:
   --accent-color: var(--ghost-accent-color, #1c1c1c);
 }
 
-/* Dark mode overrides */
+/* Dark mode */
 #mp-search-wrapper.dark {
   --modal-bg: #1c1c1c;
   --text-primary: #fff;
@@ -121,55 +83,6 @@ The search UI uses CSS variables for easy customization:
 }
 ```
 
-### Search Fields
-
-Customize search field weights and highlighting:
-
-```javascript
-window.__MP_SEARCH_CONFIG__ = {
-  // ... other config
-  searchFields: {
-    title: { weight: 4, highlight: true },
-    excerpt: { weight: 2, highlight: true },
-    html: { weight: 1, highlight: true }
-  }
-};
-```
-
-## Keyboard Navigation
-
-- `Ctrl/Cmd + K`: Open search
-- `Esc`: Close search
-- `↑/↓`: Navigate results
-- `Enter`: Select result
-- `Tab`: Navigate UI elements
-
-## Browser Support
-
-- Chrome/Edge (latest)
-- Firefox (latest)
-- Safari (latest)
-- Safari iOS (latest)
-- Chrome Android (latest)
-
-## Development
-
-1. Clone the repository:
-```bash
-git clone https://github.com/magicpages/ghost-typesense.git
-cd ghost-typesense
-```
-
-2. Install dependencies:
-```bash
-npm install
-```
-
-3. Start development server:
-```bash
-npm run dev -w packages/search-ui
-```
-
 ## License
 
-MIT © [MagicPages](https://github.com/magicpages) 
+MIT © [MagicPages](https://www.magicpages.co)