Shorten markdown heading anchors links (#11903)

This changes the links on headings like '# Usage' in markdown from

  `https://host/user/repo#user-content-usage`

to just

  `https://host/user/repo#usage`

matching GitHub and GitLab. The linked id elements still have the prefix
and this behaviour matches GitHub and GitLab too, so JS is needed to
scroll to the active anchor. I suspect it's like that to avoid namespace
collission between user-generated content and other page content.
Compatibilty for old links is included so they will continue to work.

Also included are some enhancements to make the clickable area for the
link icon larger and fix its color on arc-green.

Fixes: https://github.com/go-gitea/gitea/issues/11896
Fixes: https://github.com/go-gitea/gitea/issues/12062

1 files changed, 2 insertions, 10 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 37cb2a3988..544c2457c4 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -6,13 +6,13 @@ import './publicpath.js';
 import Vue from 'vue';
 import 'jquery.are-you-sure';
 import './vendor/semanticdropdown.js';
-import {svg} from './utils.js';
 
 import initContextPopups from './features/contextpopup.js';
 import initGitGraph from './features/gitgraph.js';
 import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
 import initServiceWorker from './features/serviceworker.js';
+import initMarkdownAnchors from './markdown/anchors.js';
 import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
@@ -2360,15 +2360,6 @@ $(document).ready(async () => {
     });
   });
 
-  // Set anchor.
-  $('.markdown').each(function () {
-    $(this).find('h1, h2, h3, h4, h5, h6').each(function () {
-      let node = $(this);
-      node = node.wrap('<div class="anchor-wrap"></div>');
-      node.append(`<a class="anchor" href="#${encodeURIComponent(node.attr('id'))}">${svg('octicon-link', 16)}</a>`);
-    });
-  });
-
   $('.issue-checkbox').on('click', () => {
     const numChecked = $('.issue-checkbox').children('input:checked').length;
     if (numChecked > 0) {
@@ -2426,6 +2417,7 @@ $(document).ready(async () => {
   searchTeams();
   searchRepositories();
 
+  initMarkdownAnchors();
   initCommentForm();
   initInstall();
   initRepository();