docs: improve code preview #798
Merged
Conversation
This file contains 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
10 tasks
We use a variety of custom CSS hooks in traditional CSS file (not Tailwind CSS) to override the third-party plugin we use to render code previews. The `docs.css` file was not "cascading" as intended in production, and all of the styles we wrote there suddenly disappeared in production mode.
…copy to clipboard This is rather easy to do without a third-party package!
…e preview This will only toggle the preview box itself - not the code. That reflects the behavior found on flowbite.com.
…h preview Provide full React context in the style of a `Next.js` page for each code preview, to make it more immediately obviously how components should actually be used in the real world.
Specifically, we're just doing the imports from `flowbite-react` - we still need to add functionality to display an extra `import` line for icons.
We are SSR and have access to the full HTML of the page via React 18, so we don't need something to help us inject the script into the DOM.
This should refer specifically to the subset `CustomFlowbiteTheme["button"]`.
We need to have access to the development-mode-only `displayName` of each imported FC, as well as to the contents (bodies) of anonymous functions used inside component props in code examples. The only way to do that is to disable Webpack minification.
With these settings we reduce the bundle size back to where it was when we were minifying with default settings, but still retain thedisplay names of FCs and the bodies of anonymous functions.
Provide a link to the Github.com page to view code of the primary component in each code preview.
We need to input the code for Modal code previews manually, because our syntax highlighter resolves the value of `<Modal show>` instead of displaying the computation itself, and I can't see a way around this behavior.
…nteraction For components that you can interact with, like Pagination, doing so caused the code preview to stop highlighting/coloring code.
|
Hey @tulup-conner, First of all, thanks for the contributions - there's awesome progress and we're almost ready to merge. We're good to go! |
zoltanszogyenyi
approved these changes
Jun 9, 2023
rluders
approved these changes
Jun 9, 2023
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.
Description
Improves code previews found on most of the pages at https://flowbite-react.com. Generally speaking, "improves" means more accurately mirroring the code previews found on https://flowbite.com.
We have the following specific targets:
importstatements"use client"directivesexport default functionlike a Next.js pageimportstatements where applicable (icons)useStatecontext where applicable (modal, pagination, tabs)<Modal show>attribute doesn't show up, because its value is resolved<Tabs ref> attribute is a mess, becauseref.currentis resolvedFixes #785
Type of change
Breaking changes
None.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Checklist: