Skip to content

Heading self-links: more compact, customizable, and reusable #1831

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
Feb 8, 2024
Merged

Heading self-links: more compact, customizable, and reusable #1831

merged 4 commits into from
Feb 8, 2024

Conversation

chalin
Copy link
Contributor

@chalin chalin commented Feb 4, 2024 •
edited
Loading

  • Fixes Use Hugo render hook instead of AnchorJS #1460
  • Relative to the previous heading anchor link:
    • Drops the onmouse* attributes, replacing them with CSS of equivalent functionality
    • Drops the SVG, replacing it with a CSS defined simple character: #. This makes the headings much more compact.
  • Defines the heading anchor link styling through a new class .td-heading-self-link
    • The link is always visible on mobile and touch devices
    • Otherwise the link is invisible until the user hovers over the heading
    • Projects can customize the appearance of the heading link to their liking, changing the symbol, etc.
  • As mentioned in the CHANGELOG, projects must now explicitly enable the feature.

Preview of user-guide addition (and the new heading-self-link implementation):

Screenshots (narrow display)

Before1 After
image image

Footnotes

  1. I forced the display of the anchor symbol so you can see it in the "before" image. ↩

@chalin chalin added enhancement New feature or request UX design/style Front-end site design / styling cleanup/refactoring labels Feb 4, 2024
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch from 2fbb5db to b94a36b Compare February 4, 2024 00:41
@chalin chalin changed the title Header anchor links: more compact, customizable & reusable Heading links: more compact, customizable, and reusable Feb 4, 2024
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch from 2ebbf5c to c4394f4 Compare February 4, 2024 01:13
@chalin chalin mentioned this pull request Feb 4, 2024
Closed
4 tasks
@chalin chalin changed the title Heading links: more compact, customizable, and reusable Heading self-links: more compact, customizable, and reusable Feb 4, 2024
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch 4 times, most recently from ebedec8 to 4b9eebd Compare February 7, 2024 08:43
@chalin
Copy link
Contributor Author

chalin commented Feb 7, 2024

Ok, I've reimplemented the feature to be opt in. PTAL @LisaFC @deining @fekete-robert et al.

@chalin chalin mentioned this pull request Feb 7, 2024
Closed
33 tasks
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch from 4b9eebd to 490bf86 Compare February 7, 2024 09:48
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch 2 times, most recently from cc1c12c to 0a357d5 Compare February 8, 2024 19:35
@chalin chalin force-pushed the chalin-im-header-anchor-link-2024-02-03 branch from 0a357d5 to e36df9c Compare February 8, 2024 19:38
@chalin
Copy link
Contributor Author

chalin commented Feb 8, 2024

Thanks for the review and approval @fekete-robert.
@LisaFC approve this PR in today's PSC meeting.

@chalin chalin merged commit 3640101 into google:main Feb 8, 2024
@chalin chalin deleted the chalin-im-header-anchor-link-2024-02-03 branch February 8, 2024 21:06
@froboy froboy mentioned this pull request Jun 18, 2024
Open
@zirain zirain mentioned this pull request Aug 2, 2024
Merged
@chalin chalin added this to the 24Q1 milestone Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LisaFC LisaFC Awaiting requested review from LisaFC

@deining deining Awaiting requested review from deining

1 more reviewer

@fekete-robert fekete-robert fekete-robert approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
cleanup/refactoring design/style Front-end site design / styling enhancement New feature or request UX
Projects
None yet
Milestone
24Q1
Development

Successfully merging this pull request may close these issues.

Header self-link: improve style, ux, customizability, and reusability Use Hugo render hook instead of AnchorJS
2 participants
@chalin @fekete-robert