Multiple navbars based on active directory?

[muellerzr]

Description

Hi! I'm currently working on nbquarto, a lightweight doc framework to give access to Lua-like filters but using raw Python (for ease of use and learning on my end). I'm mimicking much of the Hugging Face documentation framework and semantics, as though I have a strong work bias (as I do work there!), I do honestly though learn much through what they have setup and am using it as one of my "gold standards".

One issue I have open as a feature to work on in the lib is semantic versioning in the docs, and I have the pipeline pretty much sorted on how it can be successful, except for one part:

• The sidebar

In Quarto, is it possible for me to do one of the following:

• Different sidebar.yaml's based on the directory being used (each URL points to github.io/{library}/{semantic_versioning_number}/{page}, with the latest release going to /{library} directly. Can I create a .yaml for each {semantic_versioning_number} and based on what folder we are in, that's the sidebar which gets used?
• Or: Store all of this in a single sidebar, which will get exceedingly messy quickly that I can do some custom rendering on the HTML potentially or something to wrap around a drop-down menu showing only certain sections based on the active version

Visualization of file format:

Option 1

- base_repo
  - docs
    - latest (main)
      - sidebar.yml
    - v0.1.0
      - sidebar.yml
    - v0.2.0
      - sidebar.yml

Option 2 (single sidebar yaml, just showing the basic idea here does not work since it doesn't hide anything):

website:
  sidebar:
    search: true
    contents:
      - section: "v0.1.0"
        contents: 
        - index.qmd
        - getting_started.qmd
        - section: "Package Reference"
          contents: package_reference/*
      - section: "latest"
        contents: 
        - index.qmd
        - getting_started.qmd
        - section: "Package Reference"
          contents: package_reference/*
        - section: "Other things"
          contents: new_stuff/*

Thanks!

[muellerzr]

After learning about _metadata.yml, I'm attempting to go that route via having one in each directory, such that:

website:
  sidebar:
    contents:
      - index.qmd
      - getting_started.qmd
      - new_file.qmd
      - section: "Package Reference"
        contents: package_reference/*

Haven't quite gotten it to work well with _quarto.yml since from my understanding quarto wants to merge these two together, not show them just when a particular page is up but I think I'm on the right track

[muellerzr]

Yes so basically this is the key. Currently it's not possible due to:

Metadata defined within _quarto.yml, _metadata.yml, and document-level YAML options are merged together

Taken from here, so quarto would need to have a way for me to say that this metadata should not be merged but instead rendered separately

Because the "working" solution is to have the core TOC in _quarto.yml and the _metadata.yml updates with the other version, except I'll get those pages merged together so the section headings etc are all quite weird, and isn't quite what I want :)

[mcanouil]

In this case, having a working Git repository, as example, would help. 😉

[mcanouil]

Some default setup you are working on for example.

The easy way would be to use project profile for each version, render each project version into a different directory.
All websites would share a drop-down menu with the links to each version website.

[muellerzr]

I wouldn't per-se call that the "easy" way, because "quarto render" or "quarto publish" wouldn't quite work. I'd still need to go into each individual "version", process it, and then manually push. Working on css magic right now to get there/describe what I'm aiming for better, and I'll push that to a branch to show.

Otherwise the project is the one linked, but again haven't gotten it working yet so there's nothing to show outside that currently

[muellerzr]

Because I already tried doing a _metadata.yml, if this is what you mean, as mentioned earlier

[mcanouil]

I would need to fiddle a bit, as even with conditional contents, variables/env, there is no native/direct way to achieve what you want at this point (or with a log of pre/post processing.

To note, if you can't use quarto render it's definitely not "easy".

[muellerzr]

Agreed :) Hence the feature request here/check :) I have some javascript that can be injected, almost have it functional then I'll share in this discussion

[muellerzr]

Okay I got my own behavior working, it'd be kinda nice if this could somehow be used in quarto main, but for now I'll use this for my website and inject a directive for doing so or a flag in the project as I build.

In hide_sidebar.js:

var children = $(".sidebar-menu-container > .list-unstyled").children()
var url = window.location.pathname
for (var child of children){
    var active_sidebar = $(child).find(`a[href*="${url}"]`)[0]
    console.log(active_sidebar)
    if (active_sidebar !== undefined){
        $(active_sidebar).parent().parent().wrap("<div id='active-sidebar'></div>")
    }
    else {
        child.style.display = "none"
    }
}

The _quarto.yml:

website:
  sidebar:
    search: true
    contents: auto

In each .qmd (and add more ../ to point to the right thing):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript" src="../hide_sidebar.js"></script>

This assumes a project directory setup such that:

- docs
  - version_1
    - file_1.qmd
    - file_2.qmd
  - version_2
    - file_2.qmd
    - file_3.qmd

So when looking at mysite.com/version_1 the sidebar will only show file_1 and file_2, and mysite.com/version_2 will show file_2 and file_3. cc @mcanouil :)

[muellerzr]

As I need to clean up my toying I just did, I'll link an example in my documentation of what the finished version looks like in a moment. The last thing to do is add a drop-down menu for each version to select with :)

[muellerzr]

To see what I'm basing this off of, check out https://hf.co/docs/accelerate