fix(theme): suppress duplicate admonition icon when title contains emoji (#119, #17)

[luandro]

Summary

Fixes #119 (duplicate info/SVG icon appearing before emoji in Notion-converted callouts) and addresses #17 (dark mode styling and contrast for admonitions).

Problem

Notion callouts include an icon (often an emoji) alongside text. When converted to Docusaurus markdown (e.g. :::note 💡 Tip or :::note 👣), Docusaurus's default Admonition component prepends its own type SVG icon (such as the info circle) to the title bar, resulting in duplicated symbols: [SVG icon] 💡 Tip.

Additionally, dark mode admonition styles in src/css/custom.css lacked dedicated dark contrast definitions, making gray (note) and other callouts washed out on dark backgrounds.

Solution

1. Emoji Extraction Utility (src/utils/admonitionEmoji.ts):
   • Zero-dependency Unicode-safe extractor for leading emoji sequences.
   • Accurately supports basic emojis, variation selectors (\uFE0F on ⚠️ and ✔️), skin tone modifiers (👉🏽), regional indicator flags (🇧🇷), keycaps (1️⃣), and ZWJ sequences (👩‍💻).
   • Prevents false positives on numbers, punctuation, ©, ®, and ™.
2. Admonition Theme Swizzle (src/theme/Admonition/index.tsx):
   • Clean wrapper around @theme-original/Admonition.
   • When a title starts with an emoji, splits the emoji into the icon prop (<span className="admonition-emoji-icon">{emoji}</span>) and passes the clean remainder as the title.
   • For emoji-only titles (e.g. :::note 👣), renders only the emoji without extra fallback text.
   • For non-emoji titles or default admonitions without titles, preserves standard Docusaurus behavior and default SVG icons.
3. Styles (src/css/custom.css):
   • Added .admonition-emoji-icon sizing, alignment, and spacing.
   • Added complete [data-theme="dark"] admonition rules and icon fills for all callout types (note, tip, info, warning, danger, caution).
4. Tests & Config:
   • 10 unit test cases in src/utils/admonitionEmoji.test.ts covering simple emojis, skin tones, ZWJ sequences, flags, and negative cases.
   • Updated vitest.config.ts to include src/** test files.

Fixes #119
Closes #17

Greptile Summary

The PR customizes Docusaurus admonitions to replace default type icons with leading title emoji, preserves emoji-only titles, adds light/dark callout styling, and expands Vitest discovery for source tests.

• Extracts Unicode emoji sequences from string titles.
• Preserves standard behavior for non-string, non-emoji, and untitled admonitions.
• Fixes the previous emoji-only-title finding by keeping the emoji as a non-empty title while passing icon={null}.
• Adds focused extractor tests and dark-theme callout colors.

Confidence Score: 5/5

The PR appears safe to merge; no actionable new issue or outstanding previous finding remains.

The emoji-only path now passes a non-empty emoji title and suppresses only the default icon, fully addressing the previous finding. The subsequent CSS and parser changes preserve standard admonition behavior and existing test discovery.

Important Files Changed

Filename	Overview
src/theme/Admonition/index.tsx	Wraps Docusaurus admonitions and now preserves the title row for emoji-only titles.
src/utils/admonitionEmoji.ts	Implements Unicode-aware extraction of leading emoji sequences while preserving unmatched titles.
src/utils/admonitionEmoji.test.ts	Covers simple, modified, joined, flag, keycap, whitespace, consecutive, and negative cases.
src/css/custom.css	Adds emoji spacing, empty-icon cleanup, scoped SVG colors, and dark-mode admonition styling.
vitest.config.ts	Extends Vitest discovery to source-level test files without removing existing script tests.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
  A[Admonition title] --> B{String beginning with emoji?}
  B -->|No| C[Render original Admonition props]
  B -->|Yes| D[Split leading emoji]
  D --> E{Remaining title text?}
  E -->|Yes| F[Render emoji as icon and remainder as title]
  E -->|No| G[Render emoji as title with no default SVG]

Loading

_{Reviews (2): Last reviewed commit: "fix(theme): suppress duplicate admonitio..." | Re-trigger Greptile}

Context used (3)

• Knowledge Base — Documentation site experience
• Knowledge Base — Site components and theme
• Knowledge Base — Validation and test architecture

[qodo-code-review]

ⓘ Qodo reviews are paused because the subscription is no longer active. Ask your workspace admin to reactivate the subscription to resume reviews. Manage billing

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[luandro]

@greptile review

[github-actions]

🚀 Preview Deployment

Your documentation preview is ready!

Preview URL: https://pr-211.comapeo-docs-82j.pages.dev

📦 Content: from content branch (same source as staging/production)

This preview will update automatically when you push new commits to this PR.

---

_{Built with commit afb7747}

[luandro]

@greptile review

[github-actions]

🧹 Preview Deployment Cleanup

The preview deployment for this PR has been cleaned up.

Preview URL was: https://pr-211.comapeo-docs.pages.dev

---

_{Note: Cloudflare Pages deployments follow automatic retention policies. Old previews are cleaned up automatically.}