DietPi-Website icon indicating copy to clipboard operation
DietPi-Website copied to clipboard

Download area: Added PC/VM linking to correct tabs in docu

Open StephanStS opened this issue 1 year ago • 4 comments

The linking to the DietPi docu always led to the first tab of the installation description (SBC part). Now, the linking directs to the VMware, Proxmox,... tab.

See [DietPi Forum - Native PC for UEFI always boot to Clonezilla](https://dietpi.com/forum/t/native-pc-for-uefi-always-boot-to-clonezilla/20624/10)

StephanStS avatar Jul 02 '24 14:07 StephanStS

I don't believe we should change the link. I think that it is already correct to link to the main article. Then the user can select his device.

Joulinar avatar Jul 02 '24 14:07 Joulinar

I don't believe we should change the link. I think that it is already correct to link to the main article. Then the user can select his device.

As we saw, at least one user could have benefit from the linking to the according tabs...

StephanStS avatar Jul 03 '24 17:07 StephanStS

I actually like this new MkDocs material feature to link to individual tabs directly. But before we use them, we should assign reasonable IDs to those tabs, to avoid those cryptic numbers.

Probably this will work already:

=== "tab name" {#anchor-name}

Else, we'd need to use the slugify function, to have tab IDs generated from tab names or header_name-tab_name (makes sense in our case, since the same tab names are repeated below different headers on the same page):

  • https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown-extensions/?h=tabbed#+pymdownx.tabbed.combine_header_slug
  • https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/#tab-ids
- pymdownx.tabbed: # Tabbed content blocks
    alternate_style: true
    slugify: !!python/object/apply:pymdownx.slugs.slugify
      kwds:
        case: lower
    combine_header_slug: true

This should be probably done anyway, and then we can adjust individual IDs from there, when needed.

MichaIng avatar Jul 03 '24 19:07 MichaIng

Just setting an {#anchor-name} after the tab name and referencing it did not work. Using the slugify option did work in a manner like {#header-name-tab-name} with a - as a separator between the header and the tab as well as a blank separator.

#header name

=== "tab name"

Also for

#header-name

=== "tab name"
#header-name

=== "tab-name"

etc.

One drawback is that the links do not work in a local mkdocs server via mkdocs serve: Links like e.g. http://localhost:8000/docs/getting_started/#how-to-install-dietpi-virtualbox
did not work: It only highlights the desired tab but do not jump to its contents.
This somehow reduces the local testing via mkdocs serve.

StephanStS avatar Jul 11 '24 21:07 StephanStS