Skip to content

Feat/refresh readme banner#13

Open
mocasus wants to merge 4 commits into
mainfrom
feat/refresh-readme-banner
Open

Feat/refresh readme banner#13
mocasus wants to merge 4 commits into
mainfrom
feat/refresh-readme-banner

Conversation

@mocasus

@mocasus mocasus commented May 22, 2026

Copy link
Copy Markdown
Owner

Summary by CodeRabbit

  • Documentation
    • Updated the top image in the README to show a new banner graphic.

Banner sekarang match dengan desain dashboard baru:

Visual changes:
- Background ganti ke #0a0e1a dengan grid pattern subtle (sama seperti
  dashboard) plus ambient glow cyan + violet di kiri/kanan
- Bot icon: rounded square frame dengan brand gradient + Lucide-style
  bot icon line art (sama seperti header dashboard di /admin)
- Wordmark split: 'bot' putih-slate gradient + 'not' cyan-violet
  gradient (sama dengan header dashboard 'bot' + 'not' split)
- Eyebrow tag dengan animated cyan dot — 'Auto-order · QRIS · ID'
- Tagline lebih ringkas: 'Telegram + Discord bot — pelanggan scan QR,
  produk auto-deliver.'
- 5 feature pills dengan icon mini Lucide-style:
  - Telegram (cyan)
  - Discord (violet)
  - KlikQRIS (emerald, QR icon)
  - Auto-deliver (amber, lightning)
  - Dashboard (pink, bar chart)
- Dekorasi sparkles random di sudut-sudut

Technical:
- Inter font family (sama dengan UI)
- Width 1280, tinggi 360 (sebelumnya 320, +40px untuk akomodasi pills)
- Border 1px white/6 untuk subtle frame
- Halo glow di belakang icon untuk depth
GitHub renders SVG via <img> tag using strict XML parsing. HTML entities
like &middot; and &mdash; are not valid in SVG XML (only &amp;, &lt;,
&gt;, &quot;, &apos; are predefined) and triggered 'Error rendering
embedded code: Invalid image source.' on GitHub.

Fixes:
- Replace &middot; with literal · (U+00B7)
- Replace &mdash; with literal — (U+2014)
- Replace &amp; in aria-label with 'and' (some sanitizers strip it)
- Remove <animate> on the eyebrow dot — GitHub <img> rendering strips
  animation anyway and an empty self-closing element is cleaner

Validated with python xml.etree.ElementTree — parses as valid XML.
Previous version still didn't render even after removing HTML entities.
Likely culprit: GitHub's camo image proxy strips or breaks complex SVG
features when serving via img tag.

Removed potentially problematic features:
- filter with feGaussianBlur (replaced with stacked rects + opacity)
- pattern grid background (just solid gradient now)
- radialGradient (replaced with simple ellipse + opacity)
- Custom Inter font reference (system-ui fallback chain only)

Replaced HTML entities with numeric XML entities:
- middot -> #183
- mdash -> #8212
(numeric entities are universally valid in XML)

Also simplified pill icons (text-only with consistent padding) to keep
file under 4KB and reduce parsing risk.

File now: ~3KB, 50 elements, no filters/patterns/scripts.
Validated as valid XML.
The original logo.svg (rendered fine) used a specific structure that I
deviated from. This restores the exact same structural pattern (linearGradient + pattern + filter, mascot bot icon, wordmark, chips)
that GitHub camo proxy is proven to handle, just with updated content:

Visual changes vs the prior original:
- Background gradient: 0b1020 to 1a1438 -> 0a0e1a to 15192e
  (matches new dashboard background)
- Wordmark split: 'bot' in white-slate gradient + 'not' in cyan-violet
  (consistent with dashboard header that uses same split)
- Tagline updated: 'Telegram & Discord auto-order bot - pelanggan scan
  QR, produk auto-deliver.'
- Chip labels changed from tech stack (TypeScript/Prisma/QRIS/Fastify)
  to features (Telegram/Discord/KlikQRIS/Auto-deliver/Dashboard)
- 5 chips instead of 4

Cache busting:
- Also save as assets/banner.svg (new filename)
- Update README to use banner.svg instead of logo.svg
- This forces GitHub camo to fetch fresh content (any cached broken
  version of /assets/logo.svg won't be hit)
- Old logo.svg also updated for consistency (kept for backward compat)

Validated: 56 elements, 4.1KB, valid XML.
@coderabbitai

coderabbitai Bot commented Jun 29, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 3d5224a2-b6a3-46f8-80d6-d5f32230bb30

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • ✅ Review completed - (🔄 Check again to review again)
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands.

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.

2 participants