Include by default a HoloViz dropdown in the primary sidebar with links to all the HoloViz sites

[maximlt]

Suggestion to make holoviz.org and all the holoviz sites more exposed (exposed at all in fact besides the sometimes common domain name) on all the sites that are built with nbsite (technically, those that inherit from the shared conf file). Putting the dropdown in the primary sidebar as the navbar can get quite crowded (Panel for example).

• Handle dark mode?
• Get feedback

examples.holoviz.org:

nbsite:

hvplot:

EDIT:

• Enabled dark-mode compatibility
• Allow to opt-out, by setting nbsite_hv_sidebar_dropdown = {} in conf.py
• Allow configuring the text displayed in the button with nbsite_hv_sidebar_dropdown['dropdown_value'] = {'text': 'HoloViz websites'}, useful for instance for holoviz.org.
• Allow configuring the links.

[hoxbro]

Maybe move it to the right sidebar if it is available.

[maximlt]

Maybe move it to the right sidebar if it is available.

Working on #317, I found it to be a total pain to deal with dynamically populating the right sidebar (templates can be a list or a comma-separated string, I didn't explore why it was like this), the user may have defined some specific template per page, etc. So I ended up opting for an easier solution. It seems to me that users on mobile are also less likely to open the right side bar.
So I'm not totally against it, but I'd need more convincing/push-back to implement adding it to the right side-bar.

[hoxbro]

The current location is somewhat intrusive. I don't want it to be a higher priority than the TOC, but moving it below the TOC somewhat removes the functionality this PR tries to achieve.

[maximlt]

The current location is somewhat intrusive.

That's the main goal, I want it to be visible! Often sites like these have a large footer with links to all their different subdomains and resources. I thought about creating that but then felt it could too easily be missed. (We could still add a nice expanded footer like this).

moving it below the TOC somewhat removes the functionality this PR tries to achieve.

Yeah that would only really work well on the landing page, then for a website like Panel for instance that is deeply nested the button would be pushed really far down.

---

Something I thought about but didn't try to implement is what Google does:

Though I'm not sure how to make the button look so people are likely to click on it to explore. Maybe the best option would be just to have the exact same design as Google.

[hoxbro]

That's the main goal, I want it to be visible!

I agree, but it is a bit of an advertisement, and I don't like we prioritize that over the documentation itself, which is why I originally suggested the right sidebar.

Could we add it next to the logo dots you suggested next to the logo? That would make it stand out from the rest of the topbar.

[maximlt]

That's the main goal, I want it to be visible!

I agree, but it is a bit of an advertisement, and I don't like we prioritize that over the documentation itself, which is why I originally suggested the right sidebar.

Hmm yeah I'm not sure I would call that advertisement really, this is an ecosystem of tools that work well on their own but even better together. You can compare with Dask where it also doesn't strike me as an advertisement, the first items in its navbar are in fact linking to subdomains, each subdomain is a standalone project (dask, distributed, dask-ml).

Could we add it next to the logo dots you suggested next to the logo? That would make it stand out from the rest of the topbar.

Yep we could, but then maybe someone else will dislike it there. Arf, I hate this kind of UI/UX stuff where we have no real answer but just gut feeling.

[maximlt]

Updated to display the dropdown below the TOC. Feedback from the HoloViz meeting on this feature was:

Docs: Include HoloViz links (holoviz.org, Panel, HoloViews, Blog, etc.) on every website => UX discussion. PR with preview.

    Please chime in on the PR
    Suggestions:
        Move from top-left to bottom-left
        Maybe add the HoloViz logo
        Clean up footer
        Examples:
            ObservableHQ
                https://observablehq.com/plot/
                Made by Observable

I'm sure there's a better way to display this (somehow in the navbar), and I would have preferred it to be above the TOC as it's a global UI element, but I don't want to spend too much time on this, and the outcome is decent for a first iteration.

[maximlt]

I hesitated making this an extension but felt it'd be easier to adopt (no PR to open basically) if it was just inherited from the shared conf.py file. nbsite users can still opt-out the feature by setting nbsite_hv_sidebar_dropdown = {}

[hoxbro]

It's not the prettiest button, but LGTM.

Curious - how does this work on mobile?

[maximlt]

Curious - how does this work on mobile?

It's as good/bad looking as on a large screen.

It's not the prettiest button, but LGTM.

ChatGPT and I take this as a compliment :)