Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open accordions using URL hashes #674

Merged
merged 5 commits into from
Mar 29, 2024
Merged

Open accordions using URL hashes #674

merged 5 commits into from
Mar 29, 2024

Conversation

dpfens
Copy link
Contributor

@dpfens dpfens commented Mar 28, 2024

This change allows users to link directly to an opened accordion.

Page section tracking via URL hash is modified to exclude headings within page accordions, as those headings would override the open accordion's hash on-page.

The logic generates the URL hash from the accordion title (“How do I set up two-factor authentication (2FA)?” becomes “how-do-i-set-up-two-factor-authentication-2fa”). But the hash/ID can be overridden using the “slug” parameter when including the accordion component.

{% capture accordionContent %}
    My test content here
{% endcapture %}

{% assign accordionContent = accordionContent | markdownify %}
{% include components/accordion.html title='How do I add an accordion with a custom ID?' slug='accordion-custom-id' content=accordionContent %}

The hash is added/removed from the URL when users open/close the accordions.

Also adds a missing js.map file.

Douglas Perrien Fenstermacher added 2 commits March 27, 2024 13:49
modifies table-of-contents scroll behavior to exclude headings within accordions so as not to have headings within IDs within an accordion override the hash of the open accordion
@dpfens dpfens requested a review from a team as a code owner March 28, 2024 15:38
@IanLee1521
Copy link
Member

I admit I'm not the best front end expert, but this seems reasonable to me.

@dpfens
Copy link
Contributor Author

dpfens commented Mar 28, 2024

@IanLee1521 @hauten I just added a change to allow users to manually specify the id/slug of the accordion, both for SEO purposes, and to avoid potential conflicts with other components on the page

Copy link
Member

@LRWeber LRWeber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like it does what it set out to do! This should resolve #671

I have included some nitpicky formatting suggestions. We've (unfortunately) yet to establish standards for JS the way we have for Python, but ideally a file should at least be consistent in itself.

assets/js/hashes.js Outdated Show resolved Hide resolved
dpfens and others added 2 commits March 28, 2024 19:14
Co-authored-by: Laura Weber <LRWeber@users.noreply.github.com>
@dpfens
Copy link
Contributor Author

dpfens commented Mar 28, 2024

Added Matomo tracking code for tracking accordion opens

@hauten hauten merged commit 3b953f5 into LLNL:main Mar 29, 2024
1 check passed
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.

4 participants