Skip to content

feat(design): Integrate Bloqr Design Language — tri-line logo, themed API docs#1587

Merged
jaypatrick merged 4 commits intomainfrom
copilot/integrate-bloqr-design-language
Apr 14, 2026
Merged

feat(design): Integrate Bloqr Design Language — tri-line logo, themed API docs#1587
jaypatrick merged 4 commits intomainfrom
copilot/integrate-bloqr-design-language

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 14, 2026

Replaces the old shield favicon and 4-bar logo with the Bloqr tri-line brand identity across the Angular SPA and all Worker-served API doc pages. Applies the full Bloqr dark palette (orange #FF5500 + cyan #00D4FF on #070B14) to Scalar, Swagger, and ReDoc.

Description

The app and API docs were missing the Bloqr brand identity: no tri-line logo, no consistent orange/cyan color language, and all three API doc UIs were using their default light/purple themes.

Changes

Logos & Favicon

  • frontend/src/favicon.svg — New tri-line icon: 3 descending bars (full-width white, medium muted white, short orange with glow) on dark #070B14 rounded-corner background with an orange accent stripe at top
  • frontend/src/assets/logo.svg — New 200×48 wordmark combining the tri-line icon with "BLOQR" (Space Grotesk bold) + "ADBLOCK COMPILER" subtitle and an orange underline accent

Angular App Header

  • Desktop header now renders assets/logo.svg wordmark (120px) instead of small favicon + text
  • Mobile sidenav brand upgraded from ⚡ Bloqr to inline SVG tri-line icon + text

Worker API Docs (worker/routes/docs.routes.ts)

  • Scalar /api/docstheme: 'purple'theme: 'none' + BLOQR_SCALAR_CSS overriding the full --scalar-* token set; orange/cyan gradient accent bar across the top; Space Grotesk + JetBrains Mono fonts
  • Swagger /api/swaggermanuallySwaggerUIHtml returns a complete dark HTML document with BLOQR_SWAGGER_CSS: dark panel backgrounds, orange POST method badges, cyan GET badges, dark inputs/models, execute button in orange. CDN asset URLs are allow-list validated and HTML-attribute-escaped before injection
  • ReDoc /api/redoctheme: 'default'theme: 'none' + same BLOQR_SCALAR_CSS, Scalar classic three-panel layout
  • Landing page / and /api — Inline tri-line SVG hero, orange border-top accent, radial orange+cyan gradient background, "Primary" badge on Scalar card, cyan-styled OpenAPI JSON download card

Formatting Fix

  • Collapsed isValidUrl arrow function to a single line and removed trailing blank line in docs.routes.ts to satisfy deno fmt CI check
// Shared Scalar CSS variable overrides applied to both /api/docs and /api/redoc
const BLOQR_SCALAR_CSS = `
:root {
    --scalar-color-accent:       #FF5500;
    --scalar-background-1:       #070B14;
    --scalar-sidebar-color-active: #FF5500;
    --scalar-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    ...
}
.scalar-app::before { /* gradient accent bar */
    background: linear-gradient(90deg, #FF5500 0%, #FF7033 50%, #00D4FF 100%);
}
`;

Testing

  • Unit tests added/updated
  • Manual testing performed — verified all four doc endpoints (/api/docs, /api/swagger, /api/redoc, /api/openapi.json) render correctly; existing docs.routes.test.ts assertions ('Bloqr API', 'swagger-ui' string checks) still satisfied by the updated HTML output
  • CI passes — fixed deno fmt failure (collapsed isValidUrl arrow to single line, removed trailing blank line)

Zero Trust Architecture Checklist

Worker / Backend

  • Every handler verifies auth before executing business logic — N/A (doc endpoints are public read-only)
  • CORS origin allowlist enforced (not *) on write/authenticated endpoints — N/A (no new write endpoints)
  • All secrets accessed via Worker Secret bindings (not [vars]) — N/A (no secrets used)
  • All external inputs Zod-validated before use — N/A (no user input processed)
  • All D1 queries use parameterized .prepare().bind() (no string interpolation) — N/A (no DB queries)
  • Security events emitted to Analytics Engine on auth failures — N/A (public endpoints)

Frontend / Angular

  • Protected routes have functional CanActivateFn auth guards — N/A (header/logo change only)
  • Auth tokens managed via Clerk SDK (not localStorage) — N/A
  • HTTP interceptor attaches ****** (no manual token passing) — N/A
  • API responses validated with Zod schemas before consumption — N/A

API Shield / Vulnerability Scanner

  • New/changed endpoints have a unique operationId in openapi.yaml — N/A (no new endpoints)
  • Resource endpoints (those with /{id} path parameters) include a security: annotation — N/A
  • Resource queries are scoped to the authenticated user (WHERE user_id = ?) — N/A
  • Missing/unauthorized resources return 404 (not 403) to avoid leaking resource existence — N/A
  • cloudflare-schema.yaml regenerated if openapi.yaml changed — N/A (OpenAPI spec unchanged)

Copilot AI requested review from Copilot and removed request for Copilot April 14, 2026 20:47
Copilot AI linked an issue Apr 14, 2026 that may be closed by this pull request
@jaypatrick jaypatrick added documentation Improvements or additions to documentation enhancement New feature or request ux Issues with the UX labels Apr 14, 2026
@jaypatrick jaypatrick added this to the beta milestone Apr 14, 2026
Copilot AI review requested due to automatic review settings April 14, 2026 21:14
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request.

… API docs

- Replace favicon.svg with tri-line Bloqr filter-list icon (3 descending bars,
  orange accent, dark #070B14 background) matching the landing page design language
- Replace assets/logo.svg with 200×48 wordmark: tri-line icon + BLOQR + ADBLOCK COMPILER
- Update Angular app header to use new wordmark (assets/logo.svg, 120px wide)
- Update mobile sidenav with inline SVG tri-line icon replacing the ⚡ emoji
- Theme Scalar UI (/api/docs) with BLOQR_SCALAR_CSS: override all --scalar-* tokens
  to orange (#FF5500) + cyan (#00D4FF) on dark (#070B14), Space Grotesk font,
  gradient orange-to-cyan accent bar, theme: 'none' for full CSS control
- Theme Swagger UI (/api/swagger) with manuallySwaggerUIHtml: full dark HTML page
  using BLOQR_SWAGGER_CSS with orange/cyan HTTP method colors, dark bg, validated URLs
- Theme ReDoc (/api/redoc) with same BLOQR_SCALAR_CSS, theme: 'none', classic layout
- Update API landing page: tri-line SVG hero logo, orange border-top accent, gradient
  radial hero bg, 'Primary' badge on Scalar card, cyan-styled OpenAPI JSON card

Agent-Logs-Url: https://github.com/jaypatrick/adblock-compiler/sessions/197b8ce6-0e57-46a8-82bd-6032ea6e49d0

Co-authored-by: jaypatrick <1800595+jaypatrick@users.noreply.github.com>
Copilot AI changed the title [WIP] Integrate Bloqr design language into Adblock backend feat(design): Integrate Bloqr Design Language — tri-line logo, themed API docs Apr 14, 2026
Copilot AI requested a review from jaypatrick April 14, 2026 21:16
@jaypatrick
Copy link
Copy Markdown
Owner

@copilot Fix CI

…trailing blank line

Agent-Logs-Url: https://github.com/jaypatrick/adblock-compiler/sessions/136f1338-3223-436f-bee5-2c60319bd652

Co-authored-by: jaypatrick <1800595+jaypatrick@users.noreply.github.com>
Copilot AI requested review from Copilot and removed request for Copilot April 14, 2026 21:21
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 14, 2026

@copilot Fix CI

Fixed in 8bc0167. The CI failure was deno fmt rejecting two style issues in worker/routes/docs.routes.ts:

  1. isValidUrl arrow function was split across two lines — collapsed to a single line (116 chars, within the 180-char limit)
  2. Trailing blank line at end of file — removed

@jaypatrick jaypatrick marked this pull request as ready for review April 14, 2026 21:35
Copilot AI review requested due to automatic review settings April 14, 2026 21:35
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 4 changed files in this pull request and generated 3 comments.

@jaypatrick
Copy link
Copy Markdown
Owner

@copilot apply changes based on the comments in this thread

@jaypatrick jaypatrick merged commit 3abe2d1 into main Apr 14, 2026
35 of 36 checks passed
@jaypatrick jaypatrick deleted the copilot/integrate-bloqr-design-language branch April 14, 2026 21:42
Copilot stopped work on behalf of jaypatrick due to an error April 14, 2026 21:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation enhancement New feature or request ux Issues with the UX

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Adblock backend Bloqr Design Language integration

3 participants