❇️ Add live preview panel with real-time configuration syncing. - #2
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a live preview panel to the bio link editor so edits sync in real time to an index.html iframe, and refactors scroll-entrance animation initialization to support re-rendering when config changes.
Changes:
- Added a persistent preview panel (phone simulator + iframe) to
edit.htmlwith supporting layout/styles inedit.css. - Implemented live-preview config syncing from
edit.jsto the preview iframe, and addedscript.jssupport for re-rendering onUPDATE_CONFIGmessages. - Refactored scroll animation logic into a reusable
initScrollAnimations()and added preview-mode scrollbar hiding via.in-previewstyles.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| style.css | Adds .in-preview scrollbar-hiding styles for the iframe preview mode. |
| script.js | Introduces renderPage(config) re-rendering and listens for UPDATE_CONFIG messages; moves scroll animation init into a reusable function. |
| edit.js | Adds polling-based config change detection and posts updated config to the preview iframe. |
| edit.html | Adds the preview panel markup with an iframe loading index.html; relocates top-right controls. |
| edit.css | Adjusts editor layout to accommodate preview panel and adds preview panel / phone simulator styles. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+527
to
+532
| window.addEventListener('message', (event) => { | ||
| if (event.data && event.data.type === 'UPDATE_CONFIG') { | ||
| window.APP_CONFIG = event.data.config; | ||
| renderPage(window.APP_CONFIG); | ||
| } | ||
| }); |
Comment on lines
+1125
to
+1139
| // --- Live Preview Polling Loop --- | ||
| let lastPreviewStr = JSON.stringify(currentConfig); | ||
| setInterval(() => { | ||
| const currentStr = JSON.stringify(currentConfig); | ||
| if (currentStr !== lastPreviewStr) { | ||
| lastPreviewStr = currentStr; | ||
| const iframe = document.getElementById('preview-iframe'); | ||
| if (iframe && iframe.contentWindow) { | ||
| iframe.contentWindow.postMessage({ | ||
| type: 'UPDATE_CONFIG', | ||
| config: JSON.parse(currentStr) | ||
| }, '*'); | ||
| } | ||
| } | ||
| }, 300); |
| <!-- Preview Panel --> | ||
| <div class="preview-panel"> | ||
| <div class="phone-simulator"> | ||
| <iframe id="preview-iframe" src="index.html"></iframe> |
Comment on lines
+11
to
+15
| function renderPage(config) { | ||
| if (!config) { | ||
| console.error('Configuration data (config.js) not found.'); | ||
| return; | ||
| } |
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
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.
This pull request introduces a live preview feature to the bio link editor, allowing users to see real-time updates of their changes in a simulated phone preview panel. It also refactors the scroll animation logic for better encapsulation and adds style improvements for the new preview mode. The most important changes are grouped below:
Live Preview Feature:
.preview-panel) to the editor UI inedit.html, displaying a simulated phone with an iframe that loadsindex.html. [1] [2]edit.jsto detect configuration changes and post updated config data to the preview iframe for live updates.script.jsto listen forUPDATE_CONFIGmessages in the iframe and re-render the page with the new configuration, enabling true live preview.Scroll Animation Refactor:
initScrollAnimationsfunction, now called insiderenderPagefor correct re-initialization on config changes. [1] [2]Styling and Layout Improvements:
edit.cssandstyle.css. [1] [2] [3] [4] [5]Preview Mode Detection:
script.jsto detect when running inside an iframe and apply the.in-previewclass for style adjustments.These changes collectively enable a seamless, real-time editing and preview experience in the bio link editor.