Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add bodyHtmlBegin, bodyHtmlEnd #146

Merged
merged 3 commits into from
Aug 30, 2024
Merged

feat: add bodyHtmlBegin, bodyHtmlEnd #146

merged 3 commits into from
Aug 30, 2024

Conversation

shahyar
Copy link
Contributor

@shahyar shahyar commented Aug 29, 2024

Ported from vike-vue, adds the bodyHtmlBegin and bodyHtmlEnd config options to inject HTML into <body>

@shahyar
feat(vike-react): add bodyHtmlBegin, bodyHtmlEnd
3170dfb 
Ported from `vike-vue`, adds the `bodyHtmlBegin` and `bodyHtmlEnd`
config options to inject HTML into `<body>`
@brillout
Copy link
Member

👍 Curious: what's your use case for this?

@shahyar
Copy link
Contributor Author

shahyar commented Aug 30, 2024 •
edited
Loading

It's a bit convoluted, but I add some visual elements to the body that need to be there ASAP, especially during streaming.

I add a <noscript> tag to the body and some HTML elements. I then use CSS to detect when #root is empty (or only contains templates from a React stream), and render the appropriate message. Lastly, one of the elements serves as a loading screen, and presents the user with a "refresh" button in case it detects (using an animation delay) that the loading element has been visible for too long, indicating a major error with initializing the app.

FWIW: I used to do this myself, but I just migrated to vike-react, and that cleaned up the code base a lot.

@brillout brillout changed the title feat(vike-react): add bodyHtmlBegin, bodyHtmlEnd feat: add bodyHtmlBegin, bodyHtmlEnd Aug 30, 2024
@brillout brillout merged commit 6fbf795 into vikejs:main Aug 30, 2024
5 checks passed
@brillout
Copy link
Member

I see, it would be nice to eventually have such things be built into vike-react.

Released as 0.5.5.

brillout added a commit to vikejs/vike that referenced this pull request Aug 30, 2024
@brillout
docs: update /bodyHtmlEnd (vikejs/vike-react#146)
260bebf
@brillout
Copy link
Member

Docs updated: https://vike.dev/bodyHtmlEnd.

@shahyar
Copy link
Contributor Author

shahyar commented Aug 30, 2024

Thanks!

it would be nice to eventually have such things be built into vike-react.

Sure! Though it's a lot of hand-wavy CSS magic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@shahyar @brillout