Skip to content

feat(docs): open FAQ details on hash navigation and update URL on expand#193

Open
agustinoli wants to merge 1 commit into
developfrom
fix/faq-hash-navigation
Open

feat(docs): open FAQ details on hash navigation and update URL on expand#193
agustinoli wants to merge 1 commit into
developfrom
fix/faq-hash-navigation

Conversation

@agustinoli
Copy link
Copy Markdown
Contributor

@agustinoli agustinoli commented May 22, 2026

Summary

  • Los elementos <details> de las FAQ no se abrían al navegar a una URL con hash (ej. /docs/cluster/addons/grafana#what-are-the-default-grafana-credentials). El componente Details de Docusaurus es React-controlled, por lo que setear el atributo open nativo no funciona. La solución es disparar un click en el <summary> para que React actualice su estado interno.
  • Los anchor links (icono #) dentro de un <summary> no actualizaban la URL al hacer click. Docusaurus llama e.preventDefault() en todos los clicks dentro de <summary>, bloqueando la navegacion nativa del anchor. Se intercepta en fase de captura para actualizar el hash manualmente.
  • languageDetect.js no estaba registrado en clientModules, por lo que onRouteDidUpdate nunca se ejecutaba.

Changes

  • src/clientModules/hashOpen.js (nuevo): exporta onRouteDidUpdate para abrir el <details> que coincide con el hash de la URL. Tambien agrega un listener en fase de captura para actualizar la URL al expandir una FAQ o al hacer click en el anchor de un heading dentro de <summary>.
  • docusaurus.config.js: registra languageDetect.js y hashOpen.js en clientModules.

Test plan

  • Navegar directamente a /docs/cluster/addons/grafana#what-are-the-default-grafana-credentials. La FAQ debe abrirse automaticamente.
  • Hacer click en una FAQ para expandirla. La URL debe actualizarse con el hash de ese heading.
  • Hacer click en el icono # de un heading dentro de una FAQ. La URL debe actualizarse.
  • Verificar que la deteccion de idioma por browser sigue funcionando en primera visita.

…[38;2;187;187;187m �[39mdetails�[38;2;187;187;187m �[39mon�[38;2;187;187;187m �[39m�[38;2;170;34;255mhash�[39m�[38;2;187;187;187m �[39mnavigation�[38;2;187;187;187m �[39m�[38;2;170;34;255;01mand�[39;00m�[38;2;187;187;187m �[39mupdate�[38;2;187;187;187m �[39mURL�[38;2;187;187;187m �[39mon�[38;2;187;187;187m �[39mexpand

�[38;2;102;102;102m-�[39m�[38;2;187;187;187m �[39mAdd�[38;2;187;187;187m �[39mhashOpen�[38;2;102;102;102m.�[39mjs�[38;2;187;187;187m �[39mclient�[38;2;187;187;187m �[39mmodule�[38;2;187;187;187m �[39mthat�[38;2;187;187;187m �[39mopens�[38;2;187;187;187m �[39ma�[38;2;187;187;187m �[39m�[38;2;102;102;102m<�[39mdetails�[38;2;102;102;102m>�[39m�[38;2;187;187;187m �[39melement�[38;2;187;187;187m �[39m(�[38;2;170;34;255;01mor�[39;00m�[38;2;187;187;187m �[39mits
�[38;2;187;187;187m  �[39mparent)�[38;2;187;187;187m �[39mwhen�[38;2;187;187;187m �[39mthe�[38;2;187;187;187m �[39mpage�[38;2;187;187;187m �[39mloads�[38;2;187;187;187m �[39mwith�[38;2;187;187;187m �[39ma�[38;2;187;187;187m �[39mmatching�[38;2;187;187;187m �[39mURL�[38;2;187;187;187m �[39m�[38;2;170;34;255mhash�[39m�[38;2;102;102;102m.�[39m�[38;2;187;187;187m �[39mNeeded�[38;2;187;187;187m �[39mbecause
�[38;2;187;187;187m  �[39mDocusaurus�[38;2;187;187;187m �[39mwraps�[38;2;187;187;187m �[39m�[38;2;102;102;102m<�[39mdetails�[38;2;102;102;102m>�[39m�[38;2;187;187;187m �[39m�[38;2;170;34;255;01min�[39;00m�[38;2;187;187;187m �[39ma�[38;2;187;187;187m �[39mReact�[38;2;102;102;102m-�[39mcontrolled�[38;2;187;187;187m �[39mcomponent�[38;2;187;187;187m �[39mwhose�[38;2;187;187;187m �[39mstate
�[38;2;187;187;187m  �[39mcannot�[38;2;187;187;187m �[39mbe�[38;2;187;187;187m �[39mset�[38;2;187;187;187m �[39mby�[38;2;187;187;187m �[39mwriting�[38;2;187;187;187m �[39mto�[38;2;187;187;187m �[39mthe�[38;2;187;187;187m �[39mnative�[38;2;187;187;187m �[39mopen�[38;2;187;187;187m �[39mattribute�[38;2;187;187;187m �[39mdirectly�[38;2;102;102;102m.�[39m
�[38;2;102;102;102m-�[39m�[38;2;187;187;187m �[39mIntercept�[38;2;187;187;187m �[39mclicks�[38;2;187;187;187m �[39m�[38;2;170;34;255;01min�[39;00m�[38;2;187;187;187m �[39mcapture�[38;2;187;187;187m �[39mphase�[38;2;187;187;187m �[39mto�[38;2;187;187;187m �[39mupdate�[38;2;187;187;187m �[39mwindow�[38;2;102;102;102m.�[39mlocation�[38;2;187;187;187m �[39m�[38;2;170;34;255mhash�[39m�[38;2;187;187;187m �[39mwhen
�[38;2;187;187;187m  �[39mclicking�[38;2;187;187;187m �[39manchor�[38;2;187;187;187m �[39mlinks�[38;2;187;187;187m �[39m�[38;2;170;34;255;01mor�[39;00m�[38;2;187;187;187m �[39mexpanding�[38;2;187;187;187m �[39mFAQs�[38;2;187;187;187m �[39minside�[38;2;187;187;187m �[39m�[38;2;102;102;102m<�[39msummary�[38;2;102;102;102m>�[39m�[38;2;187;187;187m �[39melements�[38;2;102;102;102m.�[39m
�[38;2;187;187;187m  �[39mDocusaurus�[38;2;187;187;187m �[39mcalls�[38;2;187;187;187m �[39me�[38;2;102;102;102m.�[39mpreventDefault()�[38;2;187;187;187m �[39mon�[38;2;187;187;187m �[39mall�[38;2;187;187;187m �[39msummary�[38;2;187;187;187m �[39mclicks,�[38;2;187;187;187m �[39mwhich
�[38;2;187;187;187m  �[39mblocks�[38;2;187;187;187m �[39mnative�[38;2;187;187;187m �[39manchor�[38;2;187;187;187m �[39mnavigation�[38;2;102;102;102m.�[39m
�[38;2;102;102;102m-�[39m�[38;2;187;187;187m �[39mRegister�[38;2;187;187;187m �[39mlanguageDetect�[38;2;102;102;102m.�[39mjs�[38;2;187;187;187m �[39m�[38;2;170;34;255;01mand�[39;00m�[38;2;187;187;187m �[39mhashOpen�[38;2;102;102;102m.�[39mjs�[38;2;187;187;187m �[39m�[38;2;170;34;255;01min�[39;00m�[38;2;187;187;187m �[39mclientModules�[38;2;102;102;102m.�[39m
�[38;2;187;187;187m  �[39mlanguageDetect�[38;2;102;102;102m.�[39mjs�[38;2;187;187;187m �[39mwas�[38;2;187;187;187m �[39mpreviously�[38;2;187;187;187m �[39m�[38;2;170;34;255;01mnot�[39;00m�[38;2;187;187;187m �[39mregistered�[38;2;102;102;102m.�[39m
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.

1 participant