showcase: enhance live preview with an iframe rendered in the edit page
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 35/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
No repository files or tests are named. Start at the showcase edit page and review the existing Keystatic Official Live Preview setup, then determine how the iframe, Live Preview toggle, responsive desktop/mobile views, React portal, and mutation updates should connect; done means the preview renders in the edit page and updates after admin mutations.
Written by the indexing model from the issue text.
Description
Screenshots
Disabled
Note the new Live Preview button in the top bar
Enabled + Desktop
Enabled + Mobile
How it works
This implementation:
- requires that Keystatic Official Live Preview is implemented
- doesn't edit code of keystatic.
- the code is written as "user-land" only:
- using react portal to teleport components inside the existing keystatic DOM
- using a monkey patch on
fetchstrategy to emit events (when keystatic admin does mutations) that react components can subscribe against
I will copy the code tomorrow in the next comment for anyone that want to use it as a base implementation.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 159
- Avg merge
- 21h 41m
- Merged PRs (30d)
- 2
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from Thinkmill/keystatic
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
-
Difficulty 4/5 3-5 days Newbie friendliness 52/100
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
-
Difficulty 3/5 1-2 days Newbie friendliness 70/100
All issues in Thinkmill/keystatic
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
copse-dev/agent-pane#2953 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·