プラクティスページ内のアンカーリンクが重複している

[cafedomancer]

概要

/practices/:id ページのアンカーリンクが重複しています。。Markdown で書かれた内容の見出しになっているところにアンカーリンクが振られているのですが、以下の項目間でアンカーリンクが重複しているようです。ぱっと見なので項目には漏れがあるかもしれません。

• 内容
• 終了条件
• メンター向けメモ

再現手順

1. /practices/146 にアクセス
2. 「終了条件」の「手順」(/practices/146#) のアンカーリンクをクリック
3. 「内容」の「学習の狙い」(/practices/146#) に移動する

[machida]

@niikz こちらアサインさせていただきました。よろしくお願いしますー🙏

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。

[github-actions[bot]]

このissue|PRはstaleラベルを付けた後7日間更新がないためcloseしました。

[cafedomancer]

アンカーリンクの slug 化に使っている @sindresorhus/slugify というライブラリがそもそも日本語をサポートしていないことが原因。挙動としては日本語部分を単純に無視してハイフン化した slug が生成されるので、見出しに日本語が含まれるような Markdown では重複したアンカーリンクがたくさん生成されることになる。https://github.com/sindresorhus/transliterate?tab=readme-ov-file#supported-languages

見出しのアンカーリンク化に使っている markdown-it-anchor のデフォルトの slug 機能では、URL エスケープ -> 小文字化 -> ハイフン区切りにした slug が生成されるため、見出しに日本語が含まれていても特に問題にはならない。@sindresorhus/slugify の代わりにこちらを使うようにすると問題を部分的に解決できるのでそうする。

解決できない問題としては、同じページ中に異なる Markdown テキストがあるとそれぞれにレンダリングが (JS で) 行われるため、それらの間で重複した見出しがある場合は重複したアンカーリンクが生成される場合があることである。この問題の解決策としては ID 属性の値として UUID を振るなどの対応が考えられる。しかし、アンカーリンクとして UUID が振られた URL を見ても人間には意味を推測できないこと、JS でレンダリングする方式で同じものに常に同じ UUID を振る方法が思い付かなかったことから採用しないことにした。