open-design/design-systems/discord
Tom Huang 9ee2c1994c
feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview (#289)
* feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview

- Add 7 new brand design systems (arc, canva, discord, duolingo, github, huggingface, openai)
- Show live showcase HTML thumbnails on Design Systems cards
- Add toggleable DESIGN.md side panel in preview modal with syntax-highlighted spec view
- Make preview iframe responsive: render at fixed design viewport and scale to fit so opening the side panel never reflows showcases into broken breakpoints
- Add floating collapse/expand handles on the sidebar boundary for direct hide/show

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(web): guard ResizeObserver and re-fire sidebar lazy-load on content swap

- Guard `new ResizeObserver(...)` in PreviewModal so the modal mounts in
  jsdom (the existing preview-modal-fullscreen test was failing with
  `ReferenceError: ResizeObserver is not defined`) and in older embedded
  WebViews. Fall back to a window resize listener when the constructor
  is unavailable.
- Add a `contentKey` hint to PreviewSidebar so the lazy-load `onToggle`
  callback re-fires when the underlying side-panel source swaps while
  the sidebar stays open. Wire `system.id` through from
  DesignSystemPreviewModal so swapping design systems with the spec
  panel open primes a fresh DESIGN.md fetch instead of leaving it stuck.

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

* fix(web/i18n): add missing ds/preview keys to hu locale

The Validate workspace check failed after main's hu.ts landed
without the four i18n keys introduced by this PR (ds.specToggle,
ds.specLoading, preview.showSidebar, preview.hideSidebar).

Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-02 23:19:00 +08:00
..
DESIGN.md feat(web): add brand design systems, card thumbnails, and DESIGN.md side-by-side preview (#289) 2026-05-02 23:19:00 +08:00