Skip to content

add CodeExample widget with tabs and syntax highlighting#395

Merged
JeremyDev87 merged 1 commit intomasterfrom
feat/316-code-example-widget
Feb 15, 2026
Merged

add CodeExample widget with tabs and syntax highlighting#395
JeremyDev87 merged 1 commit intomasterfrom
feat/316-code-example-widget

Conversation

@JeremyDev87
Copy link
Owner

Summary

Implements the CodeExample widget for the landing page, providing before/after code comparison to showcase the value of Codingbuddy.

  • Add CodeExample widget with tabbed before/after code comparison using shadcn/ui Tabs
  • Integrate syntax highlighting via prism-react-renderer
  • Add copy-to-clipboard functionality with success/failure feedback via CopyButton
  • Add i18n translations for all 5 languages (en, ko, ja, zh-CN, es)
  • Improve Tabs component accessibility (motion-reduce:transition-none, focus-visible ring on TabsContent)
  • Simplify CodeExampleProps type by removing beforeCode/afterCode props (data is now self-contained)
  • Restructure tests into dedicated CodeExample/ directory with per-component test files

Changes

New Files

  • widgets/CodeExample/data/examples.ts - Before/after code example data
  • widgets/CodeExample/lib/copyToClipboard.ts - Clipboard utility
  • widgets/CodeExample/ui/CodeBlock.tsx - Syntax-highlighted code block component
  • widgets/CodeExample/ui/CopyButton.tsx - Copy button with feedback states
  • __tests__/widgets/CodeExample/CodeExample.test.tsx - Widget integration tests
  • __tests__/widgets/CodeExample/CodeBlock.test.tsx - CodeBlock unit tests
  • __tests__/widgets/CodeExample/CopyButton.test.tsx - CopyButton unit tests
  • __tests__/widgets/CodeExample/copyToClipboard.test.ts - Clipboard utility tests

Modified Files

  • widgets/CodeExample/index.tsx - Full rewrite with tabs, syntax highlighting, i18n
  • components/ui/tabs.tsx - Accessibility improvements
  • types/widgets.ts - Simplified CodeExampleProps to WidgetProps alias
  • src/app/[locale]/@code_example/page.tsx - Simplified slot (no more code props)
  • messages/{en,ko,ja,zh-CN,es}.json - Updated codeExample i18n keys
  • package.json - Added prism-react-renderer dependency
  • __tests__/__helpers__/next-intl-mock.ts - Namespace-aware mock for multiple widgets

Test Plan

  • Verify tab switching between Before/After views
  • Verify syntax highlighting renders correctly
  • Verify copy-to-clipboard works and shows feedback
  • Verify responsive layout on mobile
  • Verify i18n translations for all 5 locales
  • Run yarn workspace landing-page test - all tests pass
  • Run yarn workspace landing-page build - build succeeds

Closes #316

…ighting

Implement the CodeExample widget with before/after code comparison,
syntax highlighting via prism-react-renderer, and copy-to-clipboard
functionality. Includes tab navigation, i18n support for 5 languages,
accessibility improvements, and comprehensive tests.

Closes #316
@JeremyDev87 JeremyDev87 self-assigned this Feb 15, 2026
@JeremyDev87 JeremyDev87 added feat landing-page Landing page project tasks labels Feb 15, 2026
@JeremyDev87 JeremyDev87 changed the title feat(landing-page): add CodeExample widget with tabs and syntax highlighting add CodeExample widget with tabs and syntax highlighting Feb 15, 2026
@JeremyDev87 JeremyDev87 merged commit 00fb385 into master Feb 15, 2026
23 checks passed
@JeremyDev87 JeremyDev87 deleted the feat/316-code-example-widget branch February 15, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat landing-page Landing page project tasks

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement CodeExample Widget

1 participant