chore: use github-slugger for markdown anchors

[harish-sethuraman]

Prerequisites checklist

• I have read the contributing guidelines.

What is the purpose of this pull request? (put an "X" next to an item)

[x] Documentation update
[x] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[ ] Other, please explain:

What changes did you make? (Give an overview)

Making use of slugify function from old site

reference:

• docs: fix broken links #16066 (comment)

Is there anything you'd like reviewers to focus on?

There is one another slugger library

• eslint/docs/package.json

  Line 42 in b6aee95

  "slugify": "^1.6.3"

that we add as filter in eleventy and have used it inside only one file

• eslint/docs/src/pages/rules.md

  Line 26 in b6aee95

  <h2 id="{{ type.displayName | slugify }}"> {{ type.displayName }} </h2>

The problem here is that this library Coerces foreign symbols to their English equivalent link for more details. so the problems & statements is turned into problems-and-statements and added inside id. How ever I don't see this id being referenced anywhere. If it is not referenced anywhere (please help confirm this) we can go ahead and remove slugify library. 😄

[netlify]

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	e2afad6
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/62bd2b4b8aeacf0008427f31
😎 Deploy Preview	https://deploy-preview-16067--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[mdjermanovic]

How ever I don't see this id being referenced anywhere.

I don't think these sections are referenced from other pages, and even if they are, it's more likely that those links are still using IDs from the old website.

[harish-sethuraman]

it's more likely that those links are still using IDs from the old website.

I ran the old archive-website and noticed that the symbols weren't transformed <h2 id="layout-formatting">Layout &amp; Formatting</h2> but now they are layout-and-formatting. The only place this is being used is inside the TOC for that page. Shall we leave it as such? or should we remove that library and replace its slug method as well?

[mdjermanovic]

I think for consistency it would be good that IDs are always generated the same way, so this should be id="layout-formatting".

[harish-sethuraman]

So I tried to replace with github-slugger instead of slugify but seems like github-slugger produces layout--formatting with that same implementation as archive-website. Seems like the older site didn't use that (github-slugger) implementation as well. It was using anchor-js so we might want to replace -- with - in the new docs site while adding anchors (through slugify filters). Thoughts?

• https://github.com/eslint/archive-website/blob/29f448bb399fbeb94446afde7e5d74ca1b46348a/src/js/main/index.js#L35-L37

[mdjermanovic]

If there's already id on the element, anchor-js uses that id, so most ids were generated by github-slugger. But these particular headers on the old rules page apparently didn't have ids, so anchor-js assigned them ids per its own slugger. Since that's the case, I think it isn't important to retain the exact same ids, and layout--formatting looks good to me if that's what github-slugger produces.

[mdjermanovic]

LGTM, thanks!

I'll leave this open in case someone else wants to review it before merging.

[nzakas]

LGTM. Thanks.