Thinkmill / Thinkmill/keystatic
showcase: enhance live preview with an iframe rendered in the edit page
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.4k
- Forks
- 159
- Avg merge
- 21h 41m
- Merged PRs (30d)
- 2
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.
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.
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.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100