Simplify examples: static builds + iframe embedding#4
Merged
Conversation
Replace complex custom webpack plugin, alias resolution, and separate dependency management with a straightforward pattern: examples are standalone Vite apps built to static/example-apps/{name}/, then embedded in documentation via iframe with theme sync via postMessage.
Changes:
- Remove ocular-docusaurus-plugin (custom webpack resolution)
- Remove ExamplesDocItem (custom doc wrapper)
- Remove postinstall hook for example dependency installation
- Add build-examples.sh script to build all examples during site build
- Create ExampleIframe component for embedding with dark mode sync
- Update real-time-chat example for standalone operation (Vite config, index.html with Tailwind CDN)
- Add dark mode listener and Tailwind class-based dark mode config
Adding new examples now requires only: create a Vite app, add MDX page with <ExampleIframe>, update sidebar.
Redesign chat boxes with rounded card layout, avatar initials, iMessage-style bubbles, and polished input field. Add comprehensive walkthrough of the example covering authentication, connecting, subscribing, sending/receiving messages, typing indicators, and cleanup with code snippets.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the over-engineered example implementation with a simple, scalable pattern: examples are standalone Vite apps built to
static/example-apps/{name}/and embedded in documentation via iframe with dark mode sync.Removes custom webpack plugin, alias resolution, separate dependency management, and custom doc item component. Adding a new example now only requires creating a Vite app, writing an MDX page with
<ExampleIframe>, and updating the sidebar.Changes
ocular-docusaurus-plugin(custom webpack resolution for example node_modules)ExamplesDocItem(custom doc item wrapper)build-examples.shto build all examples during site buildExampleIframecomponent for embedding with dark mode sync via postMessage