# Add «قاموس التقنية بالعربي» (Arabic Tech Dictionary) to a website

A free, privacy-friendly widget. It finds the dictionary's 101 tech and AI terms in a page's text (API, MCP, RAG, Vibe Coding…
and their Arabic names), puts a dotted underline under the first mention of each, and on hover / focus / tap shows the term's
Arabic name and a one-line meaning, with a link to the full explanation (opens in a new tab). It sends nothing about visitors; the
only request is the term list (https://learn.abdulosama.com/qamoos/terms.json), cached for a day in the visitor's browser. No account, no key.

## Instructions for an AI agent
1. Add this ONE line to the site's shared layout / template so it is on every page, just before `</body>`:

   ```html
   <script src="https://learn.abdulosama.com/qamoos/embed.js" defer></script>
   ```
2. Do not copy or self-host the file — loading it from this URL keeps the term list current.
3. Optional attributes on the same tag (only if the owner asks):
   - `data-root=".post-content"` — CSS selector(s) of where to look (default: `<main>`, else `<article>`, else the body).
   - `data-max="2"` — how many mentions of one term to mark (default 1).
   - `data-everyday="1"` — also mark everyday English words (Token, Job, Branch…) in English text (default: only inside Arabic text).
   - `data-exclude="api"` — a term slug never to mark.
4. For content loaded after the page (SPA route changes, infinite scroll), call `window.Qamoos.scan(element)` after inserting it.
5. Verify: open a page whose text contains "API" or "MCP"; the word gets a dotted underline and a card on hover.
6. Never wrap the tag in code that changes `src`; it must stay on learn.abdulosama.com.

## Platform notes
- **Plain HTML:** paste the line before `</body>` in each page (or the shared footer include).
- **WordPress:** Appearance → Theme File Editor → `footer.php`, before `<?php wp_footer(); ?>`; or a "header & footer scripts" plugin → Footer.
  With a block theme: Site Editor → Footer template → Custom HTML block.
- **Shopify:** Online Store → Themes → Edit code → `layout/theme.liquid`, before `</body>`.
- **Webflow:** Site settings → Custom code → Footer code. **Wix:** Settings → Custom code → Body – end, all pages.
- **Next.js (App Router):** in `app/layout.tsx`: `import Script from 'next/script'` and `<Script src="https://learn.abdulosama.com/qamoos/embed.js" strategy="afterInteractive" />` inside `<body>`;
  on client-side navigation call `window.Qamoos?.scan(document.querySelector('main'))`.
- **Astro / Hugo / Jekyll / 11ty:** the base layout, before `</body>`.
- **Ghost:** Settings → Code injection → Site footer. **Blogger:** Theme → Edit HTML, before `</body>`.

## About
«قاموس التقنية بالعربي» is a community dictionary by Abdul Osama: every term explained in Arabic through an everyday analogy, with
Arabic names readers vote on. Browse it at https://learn.abdulosama.com/qamoos. Term data (JSON): https://learn.abdulosama.com/qamoos/terms.json.