Skip to content

feat(ux): plain-language TL;DR badge and copy-to-clipboard (#45) - #76

Merged
eaitbrahim merged 1 commit into
mainfrom
feat/tldr-clipboard
Aug 22, 2026
Merged

feat(ux): plain-language TL;DR badge and copy-to-clipboard (#45)#76
eaitbrahim merged 1 commit into
mainfrom
feat/tldr-clipboard

Conversation

@eaitbrahim

Copy link
Copy Markdown
Contributor

Closes #45.

What

Two reader-facing improvements for non-technical visitors:

1. Plain-language TL;DR badge (Honest Box)

The badge under the Honest Box title is now a single sentence per locale, derived strictly from what the box states in that locale's copy (no euphemisms, FR-9 intact):

  • EN: "In plain words: after the platform fees actually paid, none of keel's shipped rules is profitable and none beats simple dollar-cost averaging (DCA) — at best they touch break-even inside the venue's fee-free allowance."
  • AR: "بلغةٍ مبسّطة: بعد خصم رسوم المنصّة المدفوعة فعليًّا، لا تحقّق أيُّ قاعدةٍ من قواعد كيل المُصدَّرة ربحًا ولا تتفوّق على الشراء الدوري المنتظم (DCA) — وفي أحسن الأحوال تلامس نقطة التعادل داخل الحصّة الشهرية المعفاة من الرسوم."
  • FR: "En clair : une fois les frais de plateforme réellement payés déduits, aucune règle livrée de keel n'est rentable et aucune ne bat le simple achat périodique (DCA) — tout au plus elles touchent le point mort dans le quota mensuel sans frais."

HomePage now selects the badge explicitly per locale (the old a || b || c fallback could have leaked one locale's badge into another). Styling reuses the existing .honest-badge notice tokens — no new design language.

2. Copy-to-clipboard on command blocks

New CodeBlock.astro (Copy button + <pre><code>) used by:

  • InstallPage.astro — both platform-step blocks, the verify command, and the from-source block (all locales)
  • GuidePage.astro — every guide code step

Behavior:

  • One delegated inline <script is:inline> in BaseHead.astro (~40 lines, same pattern as the merged theme toggle from style(ui): enlarge mobile theme toggle touch target and optimize script directives #46/style(ui): 40px theme toggle, FR nav breathing room, explicit script directives #68) — no framework, still zero-client-JS in spirit.
  • navigator.clipboard.writeText, falling back to a hidden textarea + execCommand("copy") for older Safari.
  • Transient localized "Copied ✓" state (text swap + .copied accent border) for ~1.5 s, then reverts.
  • Buttons are native <button type="button"> (keyboard-focusable) with localized aria-labels (Copy the command to the clipboard / انسخ الأمر إلى الحافظة / Copier la commande dans le presse-papiers).
  • Labels live in the i18n layer (src/i18n/ui.tscode group), carried to the shared script via data-* attributes so the script stays locale-agnostic; SonarCloud's src/i18n/** duplication exclusion covers the dictionaries.

Verification

  • npx astro check — 0 errors (95 files).
  • npm run build — 56 pages, clean.
  • puppeteer-core @ 390×844, Chrome, clipboard permissions granted:
    • .honest-badge present and visible on /en/, /ar/, /fr/ homepages, text matches the copy above.
    • Copy buttons present on /en/install/ (4) and /en/guides/first-run/ (3); localized labels confirmed on /ar/install/ and /fr/install/.
    • Clicking a copy button then navigator.clipboard.readText() returns exactly the block's command text (verified on both install and guide pages).
    • Button state: Copied ✓ + .copied class 250 ms after click; reverted to Copy by 1.75 s.
    • Zero horizontal overflow (scrollWidth - clientWidth <= 0) on all seven pages checked.

Two reader-facing improvements for non-technical visitors:

- Honest Box TL;DR: the badge copy is now a single plain sentence per
  locale (EN/AR/FR), derived strictly from what the box states — none of
  the shipped rules is profitable after the fees actually paid, none
  beats DCA, at best break-even inside the fee-free allowance. No spin,
  FR-9 posture intact. HomePage picks the badge per locale explicitly
  instead of the old cross-locale fallback chain.

- Copy-to-clipboard on command blocks: new CodeBlock component (Copy
  button + pre) on the Install page's platform steps, verify command and
  from-source block, and on guide code steps. One delegated inline
  listener in BaseHead (same pattern as the theme toggle) uses
  navigator.clipboard.writeText with a hidden-textarea + execCommand
  fallback for older Safari; the button shows a transient localized
  "Copied" state for 1.5s. Labels and aria-labels live in the i18n layer
  (ui.ts code group), carried to the script via data attributes.

Verified at 390px with puppeteer: badge visible on en/ar/fr homepages,
copy buttons on /en/install/ and guide pages, clipboard round-trip
matches the command text, zero horizontal overflow.
@sonarqubecloud

Copy link
Copy Markdown

@eaitbrahim
eaitbrahim merged commit 02492db into main Aug 22, 2026
2 checks passed
@eaitbrahim
eaitbrahim deleted the feat/tldr-clipboard branch August 22, 2026 06:46
eaitbrahim added a commit that referenced this pull request Aug 22, 2026
… it two (#78)

Caught by the independent delivery review: the sentence predates PR #76.
Stated plainly: no framework or bundle, two small inline scripts (theme
toggle, copy-to-clipboard).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(ux): add non-technical TL;DR callouts and copy-to-clipboard for CLI commands

1 participant