angular / dev-infra

Angular Development Infrastructure
MIT License
62 stars 52 forks source link

docs: `getHeaderId()` cannot be localized #2172

Closed lacolaco closed 1 month ago

lacolaco commented 1 month ago

In the current markdown processing, each heading in the text gets its own id from the text content, but it supports only English.

https://github.com/angular/dev-infra/blob/main/docs/pipeline/guides/state.ts#L11-L30

export const getHeaderId = (id: string): string => {
  const numberOfHeaderOccurrencesInTheDocument = headerIds.get(id) ?? 0;
  headerIds.set(id, numberOfHeaderOccurrencesInTheDocument + 1);

  const cleanedUpId = id
    .toLowerCase()
    .replaceAll(/<code>(.*?)<\/code>/g, '$1') // remove <code>
    .replaceAll(/<strong>(.*?)<\/strong>/g, '$1') // remove <strong>
    .replaceAll(/<em>(.*?)<\/em>/g, '$1') // remove <em>
    .replace(/\s|\//g, '-') // remove spaces and slashes
    .replace(/gt;|lt;/g, '') // remove escaped < and >
    .replace(/&#\d+;/g, '') // remove HTML entities
    .replace(/[^0-9a-zA-Z\-]/g, ''); // only keep letters, digits & dashes

  const headerId = numberOfHeaderOccurrencesInTheDocument
    ? `${cleanedUpId}-${numberOfHeaderOccurrencesInTheDocument}`
    : cleanedUpId;

  return headerId;
};

Previously, in "aio", we can use {@a header-id} to tell the transformer the correct heading id.

## foobar {@a foo-bar}

This functionality is necessary for non-English localization, because in a vast document, guides refer to each other with links, and these links must be maintained.

Request

Idea

It's enough that supports {#heading-id} syntax implemented by other tools.

https://www.markdownguide.org/extended-syntax/#heading-ids https://github.com/markedjs/marked-custom-heading-id

## foobar {#foo-bar}
lacolaco commented 1 month ago

@josephperrott As far as I can see, that function is maintained by you. What do you think about fixing this problem?

lacolaco commented 1 month ago

Once we can make a consensus on my proposed idea, I can submit a pull request to fix it.

angular-automatic-lock-bot[bot] commented 2 weeks ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.