create-t3-app
create-t3-app copied to clipboard
t3-oss
docs: Add Interactivity (collapse/filter) to "Folder Structure" page
Is your feature request related to a problem? Please describe.
Currently, the "Folder Structure" page in the docs includes a large text-based directory listing as well as several sub-headings which in many cases include <sub> tags to denote when the described item will be present (based on which components of the T3 stack are present). This leads to a lot of scrolling, and some visual confusion between h3/h4 headers (which are currently used to denote child directories).
Describe the solution you'd like to see
I believe adding some interactivity to this page, where a user could configure/select which components they are using, and the page would respond to the selections, only showing relevant directory listing items as a result. Initially I think having a few buttons at the top w/ "[un]*selected" states could work quite well, as long as the toggle is obvious and it's easy to clear the selection. At minimum I believe the textual descriptions lower in the page should show/hide themselves automatically, as this feature alone would remove the need for the 22 <sub> tags that are currently in the page.
Describe alternate solutions
Additionally, the directory listing itself could respond to the user configuration such that you don't see certain items...I believe this could be more disorienting/confusing for a user learning the framework however, so a better option might be to de-emphasize the unused portions on select, e.g. change font color and add italics, or add a strikethrough (when a component is not being used based on their selection).
Additional information
No response
Implementation Plan
- Convert this page to
.mdxand ensure mdx support w/ a React component - Create a React component for the page (probably start single component implementation to simplify state)
- Use mostly css / tailwind classes for hiding/showing, no animations.
Are you describing something like this? I like this idea a lot.
The only possible downside I can see is additional complexity in maintaining the page, but hopefully there's a solution that is easy to work with :)
@c-ehrlich Yeah pretty much exactly that. Going to update implementation plan comment as I go, feel free to give feedback or DM me here/twitch/twitter, working on it right now so open to updates. Single React component included via .mdx seems like the most straightforward thing...will do hiding w/ tailwind classes
