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

Generate header ids and anchors without Javascript #362

Merged
merged 4 commits into from
Mar 27, 2021

Conversation

progval
Copy link
Contributor

@progval progval commented Mar 26, 2021

Uses https://github.com/allejo/jekyll-anchor-headings instead of
https://www.npmjs.com/package/anchor-js

As far as I can tell, it only breaks one anchor:
https://ircv3.net/charter#project-resources-contribution
will become https://ircv3.net/charter#project-resources--contribution
because kramdown does not generate ids in exactly the same way as
anchor.js

Pros of this change:

  • Works in browsers without JS
  • Less code overall (and the code is readable instead of being minified)
  • No need for {% include anchors.html %} at the bottom of every page

Cons:

  • Breaks that URL
  • A little more work on the server side

Uses https://github.com/allejo/jekyll-anchor-headings instead of
https://www.npmjs.com/package/anchor-js

As far as I can tell, it only breaks one anchor:
https://ircv3.net/charter#project-resources-contribution
will become https://ircv3.net/charter#project-resources--contribution
because kramdown does not generate ids in exactly the same way as
anchor.js

Pros of this change:

* Works in browsers without JS
* Less code overall (and the code is readable instead of being minified)
* No need for `{% include anchors.html %}` at the bottom of every page

Cons:

* Breaks that URL
* A little more work on the server side
@jwheare
Copy link
Member

jwheare commented Mar 26, 2021

That broken link isn't a big deal. I'd prefer if the styling could be kept though. Link icon appears on hover, not just an always visible # on every header.

@progval
Copy link
Contributor Author

progval commented Mar 26, 2021

I'd prefer if the styling could be kept though.

Do you mean the icon instead of #?

Link icon appears on hover, not just an always visible # on every header.

That what my change to the .sass does.

@progval
Copy link
Contributor Author

progval commented Mar 26, 2021

(updated styling to look like the old one, but using an emoji instead of a base64ed image)

@jwheare
Copy link
Member

jwheare commented Mar 26, 2021

The emoji is a bit of an eyesore on windows. Image is probably better.

The system may be missing the emoji, or have an ugly one.

I chose an an image from emojitwo instead of using the same one as anchor.js,
because anchor.js' comes from icomoon.io, which seems to have only
commercial licenses
@progval
Copy link
Contributor Author

progval commented Mar 26, 2021

Done.

I chose an an image from emojitwo instead of using the same one as anchor.js,
because anchor.js' comes from icomoon.io, which seems to have only
commercial licenses

@DanielOaks
Copy link
Member

Give me a lil bit, gonna look at the support tables and fix their generation with this.

@DanielOaks
Copy link
Member

Nice, after that change it seems good. I'm happy enough with that new link logo, but we can always search for a better one down the line. Thanks for the PR!

@DanielOaks DanielOaks merged commit 3568089 into ircv3:master Mar 27, 2021
@progval progval deleted the heading-anchor branch March 27, 2021 07:53
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.

None yet

3 participants