question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

docs: Add Interactivity (collapse/filter) to "Folder Structure" page

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
nateemersoncommented, Nov 19, 2022

@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

1reaction
c-ehrlichcommented, Nov 19, 2022

Are you describing something like this? I like this idea a lot.

image

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 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

docs: add interactivity to the Folder Structure page #963 - GitHub
Successfully merging this pull request may close these issues. docs: Add Interactivity (collapse/filter) to "Folder Structure" page.
Read more >
Filter charts and tables with Slicers - Google Docs Editors Help
On your computer, open a spreadsheet at sheets.google.com. Click the chart or pivot table you want to filter. At the top, click Data...
Read more >
Working with the IDE file browser | Looker - Google Cloud
Select File Browser in the IDE sidebar to collapse or expand the file browser. Managing files and folders. Each file or folder in...
Read more >
Managing files and folders in your Xcode project
Managing files and folders in your Xcode project. Add new or existing files to your project, and use groups to organize the files...
Read more >
Video: Collapsible headings - Microsoft Support
Training: Collapsed headings (headers) become something like a table of contents, allowing you to quickly browse through the document with body text out...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found