jhildenbiddle / docsify-themeable

A delightfully simple theme system for docsify.js. Features multiple themes with rich customization options, an improved desktop and mobile experience, and legacy browser support (IE11+).
https://jhildenbiddle.github.io/docsify-themeable
MIT License
535 stars 272 forks source link

expand/collapse icons in the sidebar not working when external link present #68

Closed mengqiy closed 10 months ago

mengqiy commented 3 years ago

We want to use a sidebar like https://github.com/GoogleContainerTools/kpt-functions-catalog/pull/605/files#diff-b8dd38f16c2e1d175b940404cbb1e048a3dfb79e423890a2aa94dd188ae4647b which is generated from https://raw.githubusercontent.com/GoogleContainerTools/kpt/main/site/sidebar.md.

The issue is when external links present, the expand/collapse icons won't show and the inactive part are not collapsed due to misting class=inactive.

Please let me know if you need more information. I'm not an expert in front-end stuff, if I misunderstood something, please let me know. Thanks!

jhildenbiddle commented 3 years ago

Hi @mengqiy.

Happy to help. There are three important things to consider:

  1. The HTML structure and class name assignments are handled by docsify, not docsify-themeable. Docsify-themeable does include a few fixes via plugins (see here) that modify the HTML structure generated by docsify, but ideally this wouldn't be necessary since docsify-themeable is intended to be a theme and not a way to alter docsify's output.
  2. There needs to be a way to programmatically determine which external links should display an expand/collapse toggle. Is it all links in the sidebar, only the links that reference https://kpt.dev/, or some other pattern? Are there exceptions to consider?
  3. The good news is that there are many ways to address your issue. If we determine a fix that may be helpful for other docsify/docsify-themeable users, we can add the fix to a new version. If your needs are unique, we can explore writing a plugin (it's easy), adding custom CSS, or discuss modifying your sidebar auto-generating script to output HTML instead of markdown as a last resort. Point is, we'll figure it out. :)
mengqiy commented 3 years ago

Sorry for the late reply.

The behavior I expect: Whenever an item in the sidebar hierarchy has children items, it should display an expand/collapse toggle. It should NOT treat it differently depending on if it links to a local path or a external link.

# for kpt.dev
- [foo](foo/)                  # <========= should display an expand/collapse toggle here
  - [foo child](foo/child/)
- [bar](https://catalog.kpt.dev/bar/ ":target=_self") # <========= should display an expand/collapse toggle here
  - [bar child](https://catalog.kpt.dev/bar/child/ ":target=_self")
- [baz](baz/)
# for catalog.kpt.dev
- [foo](https://kpt.dev/foo/ ":crossorgin :target=_self")  # <========= should display an expand/collapse toggle here
  - [foo child](https://kpt.dev/foo/child/ ":crossorgin :target=_self")
- [bar](bar/ ":target=_self")               # <========= should display an expand/collapse toggle here
  - [bar child](bar/child/ ":target=_self")
- [baz](https://kpt.dev/baz/ ":crossorgin :target=_self")

cc: @etefera

jhildenbiddle commented 10 months ago

Hi @mengqiy --

Been quite a while on this one. :)

I checked out https://kpt.dev and it looks like you've worked your way around this issue. Closing this issue for now, but happy to work through this if you're still interested. Thx!