@hmyapps/search

Haaremy Global Search Overlay — Cmd+K Shadow DOM Widget.

Installation

npm install @hmyapps/search

Usage

ESM / Bundler

import { initSearch } from '@hmyapps/search';

initSearch({
  portalUrl: 'https://portal.haaremy.de', // default
  scope: 'wiki,paste',                    // optional: Quellen filtern
  placeholder: 'Suchen...',               // optional
});

Script-Tag (CDN / vanilla)

<script type="module">
  import { initSearch } from 'https://unpkg.com/@hmyapps/search/dist/index.js';
  initSearch();
</script>

Custom Element direkt

<hmy-search
  portal-url="https://portal.haaremy.de"
  scope="wiki,paste,plan"
  placeholder="Haaremy durchsuchen...">
</hmy-search>

Keyboard-Shortcuts

| Shortcut | Aktion | |---|---| | Cmd+K / Ctrl+K | Suche öffnen/schließen | | ↑ / ↓ | Ergebnisse navigieren | | Enter | Ausgewähltes Ergebnis öffnen | | Escape | Suche schließen |

Attribute

| Attribut | Default | Beschreibung | |---|---|---| | portal-url | https://portal.haaremy.de | Backend-URL für Search-API | | scope | (alle) | Kommagetrennte Quellen (wiki, paste, short, stream, olympia, plan) | | placeholder | Haaremy durchsuchen... | Suchfeld-Placeholder |

API

// Element-Instanz direkt steuern
const el = document.querySelector('hmy-search');
el.open();    // Overlay öffnen
el.close();   // Overlay schließen
el.toggle();  // Umschalten

Search-API Response

{
  "results": [
    { "id": "...", "title": "...", "excerpt": "...", "url": "...", "source": "wiki", "score": 0.9 }
  ],
  "total": 1,
  "backend": "portal"
}

Design

• Dark Theme (#1a1a2e Hintergrund)
• Haaremy-Pink (#ec4899) Akzentfarbe
• Shadow DOM — keine CSS-Konflikte mit Host-Seite
• Farbkodierte Source-Badges (wiki=blau, paste=amber, short=violett, stream=rot, olympia=grün, plan=pink)