Skip to content

Feature - Dark Mode Generator tool#720

Open
markmead wants to merge 12 commits into
mainfrom
feature/dark-mode-generator
Open

Feature - Dark Mode Generator tool#720
markmead wants to merge 12 commits into
mainfrom
feature/dark-mode-generator

Conversation

@markmead
Copy link
Copy Markdown
Owner

@markmead markmead commented Jun 6, 2026

Summary

  • Introduces a /tools section to HyperUI, evolving the site from a component library into a component and tools library
  • Adds a Dark Mode Generator: paste Tailwind HTML, get back the same HTML with dark: variants added — fully browser-based, nothing leaves the client
  • Extracts a shared ESM core (src/lib/dark-mode/) used by both the GUI and the existing CLI script

What's included

Shared core

  • src/constants/dark-mode.jsSHADE_MAP, COLOR_MAP, COLOR_FAMILIES
  • src/lib/dark-mode/transform-class.js — per-class transform logic with element-aware rule matching
  • src/lib/dark-mode/transform-html.jstransformHtmlString (regex, CLI/Node) + transformHtmlDom (DOMParser, browser)
  • src/lib/dark-mode/config.jsDEFAULT_CONFIG, localStorage persistence, normalizer, import/export

Pages & component

  • src/pages/tools/index.astro — tools landing page
  • src/pages/tools/dark-mode-generator.astro — page wrapper
  • src/components/DarkModeGenerator.astro — full GUI with sidebar config, live preview, and code output

Other

  • src/constants/seo.js — replaces deleted src/consts.ts; all 8 importers updated
  • scripts/generate-dark-variants.js — refactored to import from shared core (behavior unchanged)
  • src/components/SiteHeader.astro + DropdownMenu.astro — Tools nav link added

Safety model

Risk Mitigation
XSS from rendered HTML Output written via textContent, never innerHTML
Script execution during transform DOMParser builds a detached document — no scripts run
Script execution in preview <iframe sandbox="allow-scripts"> without allow-same-origin — cannot reach parent
Corrupt localStorage Versioned key + normalizeConfig() always returns a safe default

Test plan

  • Visit /tools — landing card present
  • Visit /tools/dark-mode-generator — tool loads, config persists across reload
  • Paste a component — output matches CLI behavior (bg-whitebg-white dark:bg-gray-900)
  • Add a rule excluding button for shade 600<button class="bg-blue-600"> is untouched
  • Paste <script>alert(1)</script> and <img src=x onerror=alert(1)> — nothing executes
  • Light / Dark / Split / Code preview modes all work
  • Export and re-import config round-trips correctly
  • Reset clears config back to defaults
  • pnpm generate:dark-variants output is identical to before the refactor

🤖 Generated with Claude Code

markmead and others added 5 commits June 6, 2026 13:23
Extracts SHADE_MAP, COLOR_MAP, COLOR_FAMILIES into src/constants/dark-mode.js
and creates src/lib/dark-mode/ with transform-class.js, transform-html.js,
and config.js (with localStorage persistence, normalizer, import/export).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces the TypeScript consts file with a plain ESM JS module and updates
all 8 importers to use the new path.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replaces inline SHADE_MAP/COLOR_MAP/transform logic in generate-dark-variants.js
with imports from src/lib/dark-mode/. Behavior is unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Adds a Tools entry to the desktop header and mobile dropdown menu.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Introduces the /tools section with a Dark Mode Generator: a browser-based
tool that transforms Tailwind HTML to include dark: variants. Features a
configurable sidebar (shade map, utility toggles, rules), sandboxed
light/dark/split/code preview, and localStorage persistence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Jun 6, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
hyperui d65bd70 Commit Preview URL

Branch Preview URL
Jun 06 2026, 01:44 PM

@markmead markmead added the enhancement New feature or request label Jun 6, 2026
@markmead markmead linked an issue Jun 6, 2026 that may be closed by this pull request
markmead and others added 7 commits June 6, 2026 13:49
config.shadeMap was never read — both the shade gate and the dark shade
fallback were referencing the imported SHADE_MAP constant directly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…aking

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Apply defensive coding and formatting across dark-mode utilities and the generator UI. Key changes:

- Add ESLint rules (curly, eqeqeq).
- Add explicit braces and block returns to many functions (normalizeConfig, normalizeShadeMap, normalizeColorMap, normalizeUtilities, normalizeRule, loadConfig, saveConfig, transform-class, transform-html, and component methods) to improve readability and avoid ambiguous control flow.
- Strengthen null/undefined checks and early returns (file import, clipboard copy, dialog close, iframe handling, element queries, etc.).
- Minor DOM/markup formatting and class/attribute reflows in DarkModeGenerator.astro (line wrapping, small class name tweak for alignment, SVG path inline).
- Small behavior/comments tweak: avoid clearing timers without braces and make clipboard catch a no-op.
- Update git metadata newline at EOF.

No core algorithm changes — these edits are primarily safety, style, and maintainability improvements.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Single-page layout builder

1 participant