Skip to content

Conversation

@gordonwoodhull
Copy link
Contributor

@gordonwoodhull gordonwoodhull commented Nov 4, 2025

This is a vibe-coded bugfix for #3416

As such, I'll submit as draft. As I commented in the issue:

Not sure if it's worth it:

  • quite a few changes to get id passing through
  • it still needs custom JS because Bootstrap doesn't have this feature
  • i have not reviewed changes to custom nodes (!) and it would be some effort to do so

claude's summary

Extends the panel-tabset custom node system to preserve user-specified IDs from markdown headers (e.g., ## Tab Title {#my-id}) through the entire rendering pipeline, enabling anchor-based navigation to specific tabs.

Custom Node Changes (panel-tabset.lua):

  • Modified quarto.Tab constructor to accept and store identifier parameter
  • Updated parse_tabset_contents to pass el.attr.identifier to quarto.Tab
  • Modified render_quarto_tab to use tbl.identifier in header attributes
  • Extended custom node metaobject system to store and expose identifiers array
  • Updated render_tabset to use custom IDs with validation:
    • Warns on duplicate IDs and falls back to auto-generated IDs
    • Warns on conflicts with tabset- prefix pattern
    • Logs final ID used for each tab

Bootstrap Tab Navigation (quarto-html-after-body.ejs):

  • Added activateTabFromHash() to activate tabs from URL hash on page load
  • Added hashchange listener for anchor link navigation
  • Added click handler to reliably activate tabs even when hash is already set
  • Scrolls to show entire tabset container (.panel-tabset) on activation

This enables users to write Link to navigate to and activate specific tabs within panel-tabsets, with the custom ID flowing from markdown through the Lua filter system to the final HTML output.

🤖 Generated with Claude Code

Fixes #3416

Extends the panel-tabset custom node system to preserve user-specified IDs
from markdown headers (e.g., ## Tab Title {#my-id}) through the entire
rendering pipeline, enabling anchor-based navigation to specific tabs.

Custom Node Changes (panel-tabset.lua):
- Modified quarto.Tab constructor to accept and store identifier parameter
- Updated parse_tabset_contents to pass el.attr.identifier to quarto.Tab
- Modified render_quarto_tab to use tbl.identifier in header attributes
- Extended custom node metaobject system to store and expose identifiers array
- Updated render_tabset to use custom IDs with validation:
  * Warns on duplicate IDs and falls back to auto-generated IDs
  * Warns on conflicts with tabset- prefix pattern
  * Logs final ID used for each tab

Bootstrap Tab Navigation (quarto-html-after-body.ejs):
- Added activateTabFromHash() to activate tabs from URL hash on page load
- Added hashchange listener for anchor link navigation
- Added click handler to reliably activate tabs even when hash is already set
- Scrolls to show entire tabset container (.panel-tabset) on activation

This enables users to write [Link](#my-tab-id) to navigate to and activate
specific tabs within panel-tabsets, with the custom ID flowing from markdown
through the Lua filter system to the final HTML output.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@posit-snyk-bot
Copy link
Collaborator

posit-snyk-bot commented Nov 4, 2025

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Licenses 0 0 0 0 0 issues
Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants