feat: add en anchors

[wxsms]

Description of Problem

close #1998

added a script to generate anchors. It can also re-run for updates.

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	e22cc42
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/6365bbff6d7ced00074a77c9
😎 Deploy Preview	https://deploy-preview-2049--vuejs.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.

[wxsms]

Looks like that reactivity-fundamentals.md has 2 headings with same name, which will generate same slug id and cause vitepress complain. Any idea?

[edimitchel]

Looks like that reactivity-fundamentals.md has 2 headings with same name, which will generate same slug id and cause vitepress complain. Any idea?

Seems to be a duplicate title for composition api / option api..

[Jinjiang]

I suggest we just follow the current rule to add an incremental number after the duplicated ids. That's also what you can get on the current doc site.

For example, the second #reactive-proxy-vs-original should become #reactive-proxy-vs-original-1 automatically.

Thanks.

[skirtles-code]

I'm wondering whether we need to include the script in the PR? The script is useful for the initial bulk adding of headings, but do we really need to use it beyond that?

Perhaps we could just manually correct the handful of duplicate headers rather than trying to get the script to do it automatically?

[edimitchel]

I'm wondering whether we need to include the script in the PR? The script is useful for the initial bulk adding of headings, but do we really need to use it beyond that?

Perhaps we could just manually correct the handful of duplicate headers rather than trying to get the script to do it automatically?

It could be put into a gist instead of directly in the source of docs yes!

[Jinjiang]

I'm wondering whether we need to include the script in the PR? The script is useful for the initial bulk adding of headings, but do we really need to use it beyond that?
Perhaps we could just manually correct the handful of duplicate headers rather than trying to get the script to do it automatically?

It could be put into a gist instead of directly in the source of docs yes!

Sounds a good idea.

[wxsms]

I just removed the script related things from my branch. And fixed the duplicated anchor as @Jinjiang suggested.

the script posted here, and you may use it at will.

/**
 * slugify function taken from vitepress
 */
// string.js slugify drops non ascii chars so we have to
// use a custom implementation here
const { remove: removeDiacritics } = require('diacritics')
// eslint-disable-next-line no-control-regex
const rControl = /[\u0000-\u001f]/g
const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'<>,.?/]+/g

const slugify = (str) => {
  return (
    removeDiacritics(str)
      // Remove control characters
      .replace(rControl, '')
      // Replace special characters
      .replace(rSpecial, '-')
      // Remove continuous separators
      .replace(/\-{2,}/g, '-')
      // Remove prefixing and trailing separators
      .replace(/^\-+|\-+$/g, '')
      // ensure it doesn't start with a number (#121)
      .replace(/^(\d)/, '_$1')
      // lowercase
      .toLowerCase()
  )
}

let glob = require('glob');
let path = require('path');
let fs = require('fs');

glob('../../src/**/*.md', { cwd: __dirname }, function (err, files) {
  for (let f of files) {
    let filePath = path.join(__dirname, f);
    let content = fs.readFileSync(filePath, { encoding: 'utf-8' });
    let headings = content.match(/^#+ .+$/gm);
    for (let h of headings ?? []) {
      let _h = h.replace(/{#.+$/, '').trim();
      content = content.replace(h, `${_h} {#${slugify(_h)}}`);
    }
    fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
  }
});

[hymair]

Seems like this introduced a regression:

Check the smaller headings here: https://vuejs.org/guide/essentials/class-and-style.html

cc @wxsms @Jinjiang @skirtles-code @edimitchel

[Jinjiang]

@hymair thanks for figuring it out. I created a PR to fix this. 🙏